Composed
Data grid
A selectable table on one shared column track.
Deal
Close date
Owner
Stage
Sep 12
ASAnika Sharma
Proposal
Sep 18
MRMarco Reyes
Negotiation
Oct 2
PNPriya Nair
Discovery
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/grid.jsonOne track, shared by every row
GRID_COLS is exported and applied to the header and every row, so the columns
cannot drift apart. An earlier version let each row size its own cells, and the
dividers went ragged the moment one cell had longer content than its neighbours.
The track carries a min-w, so below that width the table scrolls inside its own
container rather than pushing the page sideways.
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | { icon?, label }[] | — | GridHeader. |
| allChecked / indeterminate | boolean | — | GridHeader. Indeterminate is a partial selection, not a third value. |
| state | "default" | "hover" | "selected" | "default" | GridRow. |
| name / time / owner / status | ReactNode | — | GridRow cells — nodes, so an avatar or tag can go in. |