Grid List
A grid list displays a list of interactive items, with support for keyboard navigation, single or multiple selection, and row actions.
Installation
Preview
Examples
Multiple selection
To enable multiple selections, set the selectionMode prop to multiple. Since this prop has no default value, you must define it explicitly.
Note that I haven't set an id for the grid list item as the items already have default IDs. However, you should specify the id prop for each grid list item like this:
{(item) => <GridListItem id={item.name}>{item.name}</GridListItem>}Drag and drop
The grid list supports drag and drop functionalities if you use the dragAndDropHooks prop along with the useDragAndDrop hook. You can drop data on the entire list, individual items, add new items between existing ones, or rearrange items.
Dragging between items
You can move items between positions within the grid list.
Render empty state
The grid list can display an empty state when no items are available using the renderEmptyState prop.
Infinite scrolling
The grid list can handle large datasets efficiently with infinite scrolling. This allows for loading more data as the user scrolls down, improving performance and user experience.
Controlled
The grid list can be controlled, which means the parent component manages the selection state of each item.
You have selected:
Disabled
Similar to how the Tag Group component can be disabled using isDisabled for children and disabledKeys for the parent, the Grid List supports similar functionality. For example, items "Led Zeppelin" and "The Rolling Stones" are disabled.
To disable items via the parent component, you can use the disabledKeys prop like this:
<GridList
items={items}
aria-label="Select your favorite bands"
selectionMode="multiple"
disabledKeys={[2,5]}
className="min-w-64"
>
{(item) => <GridListItem id={item.id}>{item.name}</GridListItem>}
</GridList>