Data Table
Data table with search, column sorting, row selection, pagination and custom cells.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
DataTableProps
Also accepts all props of Omit<React.ComponentProps<"div">, "children">
| Prop | Type | Default | Description |
|---|---|---|---|
| searchable | boolean | true | — |
| searchPlaceholder | string | "Search…" | — |
| selectable | boolean | true | — |
| pageSize | number | 5 | Rows per page; 0 disables pagination |
| striped | boolean | false | — |
| dense | boolean | false | — |
| emptyText | string | "No results." | — |
| toolbar | React.ReactNode | — | Rendered next to the search box, e.g. bulk actions |
Install
$ npx shadcn@latest add https://chromotion.dev/r/data-table.jsonThe CLI installs the base component; your customizations live in the code generated on the Customize tab.