Rows of records with shared columns.
Installation
Default
A plain table, rows separated by hairlines.
In a card
variant='card' straight in an Card, in place of CardContent: header and footer rows sit on the shell, the body is the card.
With header
CardHeader above the table; no footer, so the shell shows as a 4px rim below the body.
Flush
variant='flush' inside CardContent with overflow-hidden: the header row sits in the card; first and last column on the card title’s edge.
With selection
TanStack useTable with rowSelectionFeature; a selected row is selected.
Sortable columns
TableHead sort onSort: a button in the header, aria-sort on the cell. The call site sorts.
Grouped rows
TableGroupRow colSpan names the rows after it; open + onOpenChange fold them.
Row links
TableRowLink in one cell: its click area covers the row; the row’s other controls sit above it.
Virtualized
Table virtualized items itemKey header: 1,000 rows in pages of 100 (hasMore + onLoadMore), only those in view render. Give it a height.
Scrolls with the page
scrollElement: the rows scroll with the element around the table; the header sticks to its top.
Empty
One cell over every column holds an Empty.