Grid List
A grid list displays a list of interactive items, with support for keyboard navigation, single or multiple selection, and row actions.
Installation
CLI
Manual
npx hq-kit add grid-list
Basic
Preview
Code
Ubuntu
Debian
Fedora
Arch
CentOS
Gentoo
OpenSuse
Redhat
FreeBSD
NetBSD
Layout
Preview
Code
Columns
Gap
Ubuntu
Debian
Fedora
Arch
CentOS
Gentoo
OpenSuse
Redhat
FreeBSD
NetBSD
Selection Mode
Preview
Code
Selection mode
Ubuntu
Debian
Fedora
Arch
CentOS
Gentoo
OpenSuse
Redhat
FreeBSD
NetBSD
Rearrange
Preview
Code
Ubuntu
Debian
Fedora
Arch
CentOS
Gentoo
OpenSuse
Redhat
FreeBSD
NetBSD
Dragging Between Items
Preview
Code
Adobe Photoshop
Adobe XD
Documents
Adobe InDesign
Utilities
Adobe AfterEffects
Pictures
Adobe Fresco
Apps
Adobe Illustrator
Adobe Lightroom
Adobe Dreamweaver
Controlled
Preview
Code
Ubuntu
Debian
Fedora
Arch
CentOS
Gentoo
OpenSuse
Redhat
FreeBSD
NetBSD
[]Disabled
Preview
Code
Ubuntu
Debian
Fedora
Arch
You can also disable an item directly by passing the isDisabled prop to GridList.Item.
<GridList.Item isDisabled>Disabled</GridList.Item>