HQ UI

Grid List

A grid list displays a list of interactive items, with support for keyboard navigation, single or multiple selection, and row actions.

Installation

In the terminal, run the following command to begin:
npx hq-kit add grid-list

Basic

Layout

Selection Mode

Rearrange

Dragging Between Items

Controlled

Disabled

You can also disable an item directly by passing the isDisabled prop to GridList.Item.

<GridList.Item isDisabled>Disabled</GridList.Item>