Data Table
Full-featured data table built on TanStack Table v8: sortable columns, column filter input, row selection with checkboxes, and Previous/Next pagination. Composed from the Table family, Input, Button, and Checkbox primitives.
Preview
| alice@example.com | £99.00 | Completed | 2 Jun 2025 | Visa | |
| ben@example.com | £249.00 | Completed | 5 Jun 2025 | Mastercard | |
| cara@example.com | £19.00 | Pending | 7 Jun 2025 | PayPal | |
| david@example.com | £499.00 | Completed | 10 Jun 2025 | Visa | |
| eva@example.com | £99.00 | Failed | 12 Jun 2025 | Amex | |
| finn@example.com | £149.00 | Refunded | 14 Jun 2025 | Visa | |
| grace@example.com | £249.00 | Completed | 18 Jun 2025 | Mastercard | |
| henry@example.com | £19.00 | Pending | 21 Jun 2025 | PayPal |
Page 1 of 2
Installation
bash
npx shadcn@latest add @layout/data-tableUsage
tsx
import { DataTable, createSelectColumn } from "@/registry/layout/data-table/data-table";Guidelines for AI agents
Define columns with ColumnDef<TData> and pass them with your data array. Use createSelectColumn<TData>() as the first column to get a select-all header checkbox and per-row checkboxes. Set filterColumn to the accessorKey you want the filter input to search. For static read-only tables use the Table family directly instead.
Never
- Neveruse DataTable for read-only presentational tables; use the Table primitive instead
- Neverhardcode colours in cell renderers; use token-backed Badge or text-muted-foreground
- Neverpass an unsorted data array and expect stable row order under selection; TanStack Table reorders under sorting
- Neveruse filterColumn with a column that has no string or number values; filtering only works on primitive cell values
Tokens consumed
--layout-border--layout-muted--layout-muted-fg--layout-primary--layout-primary-fg--layout-input--layout-ring--layout-radius--layout-duration-base