046
Data Table
Data| Button | Action | 1 | |
| Calendar | Date | 3 | |
| Command | Navigation | 1 | |
| Dialog | Overlay | 1 | |
| Field | Form | 1 |
selected: —
Customize
Select
Paging
Code
<DataTable
columns={[
{ key: "name", header: "Name", sortable: true },
{ key: "meta", header: "Category", sortable: true },
{ key: "files", header: "Files", sortable: true, align: "right" },
]}
rows={rows}
selectable
onSelectedChange={setSelected}
pageSize={5}
defaultSort={{ key: "name", direction: "asc" }}
/>Install
npx shadcn@latest add https://components.haedong.dev/r/data-table.json
Props
Extends the native table props. Data-driven: columns describe header, cell (render), sort value and alignment; rows are your records with an id (or getRowId). Sortable headers are buttons with aria-sort on the th and cycle none → ^ → v → none. Selection is a Checkbox column lifted as ids; select-all is indeterminate for a part. pageSize puts a Pagination under the table.
| Prop | Type | Description |
|---|---|---|
| columns | DataTableColumn<T>[] | { key, header, render?, sortValue?, sortable?, align?, className? } |
| rows | T[] | Records. getRowId(row) defaults to row.id. |
| sort / defaultSort | { key, direction } | null | Controlled / uncontrolled sort; onSortChange on each cycle. |
| selectable | boolean | Adds the Checkbox column. selected / defaultSelected / onSelectedChange lift the ids. |
| pageSize | number | Rows per page; omit to show all. |
| emptyMessage | ReactNode | One muted row when there are no rows. Defaults to "No rows". |