Data Table
A feature-rich table with toolbar, checkbox selection, sortable columns, and formatted data types. Composes Table, Toolbar, Tag, and SearchInput.
Full Example
| REC-001 | Widget Alpha | Product | Active | 1,250 | Dec 15, 2025, 9:30 AM | $4,999.00 | |
| REC-002 | Service Beta | Service | Pending | 48 | Dec 20, 2025, 2:15 PM | $12,500.00 | |
| REC-003 | Module Gamma | Component | Active | 832 | Nov 3, 2025, 8:00 AM | $750.50 | |
| REC-004 | Kit Delta | Product | Inactive | 0 | Oct 28, 2025, 4:45 PM | $2,100.00 | |
| REC-005 | Plan Epsilon | Service | Active | 5,400 | Dec 1, 2025, 11:20 AM | $89,000.00 | |
| REC-006 | Part Zeta | Component | Pending | 120 | Dec 22, 2025, 7:10 AM | $340.25 |
Usage
DataTable composes the base Table component with selection, sorting, and a toolbar slot. Pass your own toolbar content or omit it for a plain sortable table.
Use sortable and sortFn on columns to enable header click sorting (cycles asc → desc → none).
Numeric and currency columns should use text-right tabular-nums for proper alignment.
Status columns use the Tag component for semantic color coding.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | ColumnDef<T>[] | — | Column definitions with id, header, accessorFn, sortable, sortFn |
| data | T[] | — | Array of row data |
| selectable | boolean | false | Adds checkbox column with select-all |
| selectedRows | Set<number> | — | Controlled selection state (row indices) |
| onSelectionChange | (selected: Set<number>) => void | — | Callback when selection changes |
| toolbar | ReactNode | — | Toolbar content rendered above the table |