Save 15% on all Justd Blocks
Components

Grid List

A structured list format that arranges items in a grid layout, ideal for displaying media, products, or cards.

Basic

A basic grid list is an excellent way for users to browse through items, perfect for selecting one or multiple items, and also supports row actions.

The Beatles
Led Zeppelin
Pink Floyd
Queen
The Rolling Stones
The Who

Installation

If you hit any issues, make sure you check out the installation guide here for more information.

Composed Components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

The Grid List comes packed with several components to enhance functionality and provide a seamless experience.

An interactive input that allows users to toggle a selection on or off, often used for settings or multiple-choice selections.

Manual Installation

Make sure you also install the composed components and the required packages for the component to function properly.

Anatomy

Multiple Selection

To enable multiple selections, set the selectionMode prop to multiple. Since this prop has no default value, you must define it explicitly.

The Beatles
Led Zeppelin
Pink Floyd
Queen
The Rolling Stones

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.

The Beatles
Led Zeppelin
Pink Floyd
Queen
The Rolling Stones
The Beach Boys
The Kinks
The Who

Dragging Between Items

You can move items between positions within the grid list.

The Beatles
Led Zeppelin
Pink Floyd
Queen
The Rolling Stones
The Beach Boys
The Kinks
The Who
The Byrds
The Yardbirds
The Who

Render Empty State

The grid list can display an empty state when no items are available using the renderEmptyState prop.

No bands selected

Controlled

The grid list can be controlled, which means the parent component manages the selection state of each item.

The Beatles
Led Zeppelin
Pink Floyd
Queen
The Rolling Stones
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.

The Beatles
Led Zeppelin
Pink Floyd
Queen
The Rolling Stones

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>