Data Table
Turns typed records into a sortable, searchable, selectable, and paginated data surface.
@rivetui/data-tablePreview
Explore each composition interactively, then open its code in the same context.
Default
| Actions | ||||||
|---|---|---|---|---|---|---|
Production gateway dpl_8f31c2a | Ready | fra1 | 28,410 | 2 min ago | ||
Checkout worker dpl_0c74ae1 | Building | iad1 | 9,842 | 8 min ago | ||
Asset transformer dpl_4b90df7 | Ready | lhr1 | 6,209 | 21 min ago | ||
Legacy webhook dpl_a812e65 | Paused | sfo1 | 0 | 3 hr ago | ||
Billing processor dpl_b171fe4 | Ready | fra1 | 15,803 | 5 hr ago |
8 rows
Empty
| Actions | ||||||
|---|---|---|---|---|---|---|
No results Adjust the active filters or provide a different query. | ||||||
Loading
| Actions | ||||||
|---|---|---|---|---|---|---|
Registry
Installation
Add the component source and its declared dependencies with the shadcn CLI.
bunx --bun shadcn@latest add @rivetui/data-tablePublic interface
API reference
Component-specific props are listed here. Native element and Base UI props continue to pass through.
DataTable
| Prop | Type | Default |
|---|---|---|
columns | DataTableColumnDef<TData>[] | — |
data | readonly TData[] | — |
getRowId | (row, index, parent?) => string | row index |
rowSelection | DataTableRowSelectionState | — |
defaultRowSelection | DataTableRowSelectionState | {} |
onRowSelectionChange | (selection: DataTableRowSelectionState) => void | — |
search | string | DataTableSearchOptions | — |
pagination | false | DataTablePaginationOptions | { pageSize: 10 } |
toolbar | ReactNode | ((table) => ReactNode) | — |
initialState | DataTableInitialState | — |
loading | boolean | false |
loadingRows | number | 5 |
emptyState | ReactNode | built-in empty message |
tableClassName | string | — |
className | string | — |
DataTableSearchOptions
| Prop | Type | Default |
|---|---|---|
columnIds | readonly string[] | all accessor columns |
label | string | "Search table" |
placeholder | string | "Search rows…" |
DataTablePaginationOptions
| Prop | Type | Default |
|---|---|---|
pageSize | number | 10 |
pageSizeOptions | readonly number[] | [10, 20, 50] |
DataTableColumnHeader adds the accessible sorting control. Selection remains opt-in through the exported DataTableSelectHeader and DataTableSelectCell helpers.
Selection state is keyed by the value returned from getRowId. Use rowSelection together with onRowSelectionChange for controlled state, or defaultRowSelection when the table should own subsequent updates.