Advanced table components for sorting, filtering, and pagination
Use the /design import command to add TanStack Table components to your project
/design import tanstack-table DataTableInstalls dependencies and creates component wrapper
Features:
Click column headers to sort. Uses default size (md) and density (comfortable).
| Alice Johnson | alice@example.com | Admin | active |
| Bob Smith | bob@example.com | User | active |
| Carol White | carol@example.com | Editor | inactive |
| David Brown | david@example.com | User | active |
| Eve Davis | eve@example.com | Admin | active |
| Frank Miller | frank@example.com | User | inactive |
| Grace Wilson | grace@example.com | Editor | active |
| Henry Moore | henry@example.com | User | active |
✅ Design Token Integration
Table uses CVA variants with our design tokens. Supports size (sm/md/lg) and density (compact/comfortable/spacious) props. Uses Select component for page size dropdown.
Import code:
import { DataTable } from '@ui/components';
import type { ColumnDef } from '@tanstack/react-table';
<DataTable
columns={columns}
data={data}
size="md"
density="comfortable"
/>Compact size with compact density for dense data displays.
| Alice Johnson | alice@example.com | Admin | active |
| Bob Smith | bob@example.com | User | active |
| Carol White | carol@example.com | Editor | inactive |
| David Brown | david@example.com | User | active |
Usage example:
<DataTable
columns={columns}
data={data}
size="sm"
density="compact"
/>Navigate through large datasets with pagination controls using our Select component.
| S001 | Laptop Pro | $1,299.00 | 2025-10-01 | Tech Corp |
| S002 | Mouse Wireless | $49.00 | 2025-10-03 | Office Inc |
| S003 | Keyboard Mech | $159.00 | 2025-10-05 | Dev Studio |
| S004 | Monitor 27" | $399.00 | 2025-10-07 | Design Co |
| S005 | Webcam HD | $89.00 | 2025-10-10 | Remote LLC |
Rows per page
Usage example:
<DataTable
columns={columns}
data={data}
enablePagination={true}
pageSize={5}
/>Select multiple rows and get callbacks with selected data. Useful for bulk actions.
| Alice Johnson | alice@example.com | Admin | active | |
| Bob Smith | bob@example.com | User | active | |
| Carol White | carol@example.com | Editor | inactive | |
| David Brown | david@example.com | User | active | |
| Eve Davis | eve@example.com | Admin | active |
Rows per page
Usage example:
<DataTable
columns={columns}
data={data}
enableRowSelection={true}
onRowSelectionChange={(rows) => console.log(rows)}
/>Define columns using TanStack Table's type-safe ColumnDef:
const columns: ColumnDef<User>[] = [
{ accessorKey: 'name', header: 'Name' },
{ accessorKey: 'email', header: 'Email' },
{
accessorKey: 'status',
header: 'Status',
cell: ({ row }) => <Badge>{row.getValue('status')}</Badge>
}
];Use the cell property to customize how data is displayed (badges, buttons, links, etc.)
For server-side data fetching, disable built-in pagination and handle state externally. See TanStack Table docs for examples.