Logo

AueraUI

Docs

Components

Components

Groupmap

Group an array of data by a specified key and renders each group.

Logo

Thu, Sep 14

Order Shipped

Your order #12345 has been shipped and is on its way!

Order Confirmed

Your order #12345 has been confirmed!

Wed, Sep 13

New Message

You have a new message from John Doe.

Tue, Sep 12

Promotion Alert

50% off on selected items! Limited time offer.

Mon, Sep 11

Payment Received

Your payment of $59.99 has been successfully processed.

Sun, Sep 10

New Follower

Jane Smith started following you.

Sat, Sep 09

System Update

A new system update is available. Please restart your device.

Fri, Sep 08

Cart Reminder

You left 3 items in your cart. Complete your purchase now!

Thu, Sep 07

Review Request

Please review your recent purchase of Wireless Headphones.

Wed, Sep 06

Password Changed

Your password was successfully changed.

Tue, Sep 05

Friend Request

Alex Johnson sent you a friend request.

emptyListComponent

To display component when data is empty use the emptyListComponent prop

Notting is here!

API Reference

data

Type:

T[]

An array of data items to be grouped and rendered.

Default:

renderItem

Type:

function

A function that renders each item in the data array.

Default:

emptyListComponent

Type:

ReactNode

An optional component to display when the data array is empty.

Default:

className

Type:

string

An optional class name to apply to the outer container.

Default:

dataMapClass

Type:

string

An optional class name to apply to the data-mapping container.

Default:

direction

Type:

"row" | "column"

The direction (row or column) for the layout of the outer container.

Default:

column
dataMapdirection

Type:

"row" | "column"

The direction (row or column) for the layout of the data-mapping container.

Default:

column
groupByKey

Type:

function

A function to extract a key from each data item for grouping purposes.

Default:

renderKey

Type:

function

A function to render the group key, usually displayed as a heading.

Default:

showKeyOnHead

Type:

boolean

Determines whether to show the key as a heading above each group.

Default:

false