Components
Table
Header cell, row, selectable row, and the trailing action cluster.
ROLEJOINEDSTATUS
JAJames Brownjames@northwind.coMarketingAug 2021Active
ANAnika Sharmaanika@northwind.coDesignFeb 2022Active
MAMarco Reyesmarco@northwind.coPlatformJun 2023Invited
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/table.jsonA track you own
Unlike the fixed GRID_COLS grid in app/grid.tsx, this table takes your track.
Define it once and apply it to the header and every row — that shared constant is
what stops the columns drifting apart, which is exactly how the dividers went
ragged the first time this was built per-row.
Selected is a border, not a wash
SelectableRow turns its border brand rather than tinting the whole card. Ten
tinted cards in a column is a wall; ten outlined ones still read as a list.
| Prop | Type | Default | Description |
|---|---|---|---|
| sorted | "asc" | "desc" | — | TableHeaderCell. Fills the matching arrow and brightens the label. |
| onSort | () => void | — | Makes the header cell a button and adds the arrows. |
| selected | boolean | — | TableRow and SelectableRow. |
| value | ReactNode | — | SelectableRow. The figure on the right. |
| onAccept / onIgnore / onMore | () => void | — | RowActions. Each is optional; only what you pass renders. |