Data Table
A production-grade TanStack Table kit in the shadcn idiom: build a table instance with useReactTable, paint it with DataTable, and compose the toolbar, bulk-action bar, pagination, view options and row actions around it.
bunx shadcn@latest add @nx-ui/data-tableThe full kit
Every piece composed: selection column, sortable headers, a faceted status filter with live counts, global search, column visibility, a bulk-action bar on selection, row actions, a filter-following footer total and pagination.
| B-2026-011 | Cardboard fines | Greenfield — Bay 1 | 18.9 t | 24.0°C | Intake | 11 Jul 2026 | ||
| B-2026-003 | Cardboard fines | Hallow Farm — Bay 2 | 16.3 t | 22.1°C | Intake | 09 Jul 2026 | ||
| B-2026-005 | Green waste | Riverside — Windrow 2 | 44.4 t | 64.9°C | Active | 02 Jul 2026 | ||
| B-2026-014 | Green waste | Hallow Farm — Bay 4 | 42.6 t | 62.4°C | Active | 30 Jun 2026 | ||
| B-2026-013 | Food waste | Hallow Farm — Bay 2 | 31.8 t | 58.1°C | Active | 24 Jun 2026 | ||
| B-2026-012 | Green waste | Greenfield — Windrow 7 | 55.2 t | 41.7°C | Curing | 10 Jun 2026 | ||
499.0 t |
Rows per page
Loading & empty states
DataTable owns both non-data states: `isLoading` swaps the body for skeleton rows (tuned with `loadingRowCount`), and an empty result renders `emptyState` — or a sensible default built from the ui/empty primitive.
isLoading paints skeleton rows0.0 t |
emptyStateNo batches yet Turn your first intake into a windrow to start tracking temperatures and maturation. | ||||||||
0.0 t | ||||||||
Expandable sub-rows
Add the `expandColumn()` factory and pass `renderSubComponent` — expanded rows paint a full-width detail panel on the secondary background, here a per-batch turn-log summary.
| B-2026-014 | Green waste | Hallow Farm — Bay 4 | 42.6 t | 62.4°C | Active | |
| B-2026-013 | Food waste | Hallow Farm — Bay 2 | 31.8 t | 58.1°C | Active | |
| B-2026-012 | Green waste | Greenfield — Windrow 7 | 55.2 t | 41.7°C | Curing | |
| B-2026-011 | Cardboard fines | Greenfield — Bay 1 | 18.9 t | 24.0°C | Intake | |
| B-2026-010 | Food waste | Riverside — Bay 3 | 27.3 t | 38.9°C | Curing | |
175.8 t |
Pinned columns & row click
TanStack column pinning gets the sticky treatment with an edge hairline: Batch is pinned left, the actions menu right, and the middle scrolls. `onRowClick` fires for the row while ignoring interactive cells.
| B-2026-014 | Green waste | Hallow Farm — Bay 4 | 42.6 t | 62.4°C | Active | |
| B-2026-013 | Food waste | Hallow Farm — Bay 2 | 31.8 t | 58.1°C | Active | |
| B-2026-012 | Green waste | Greenfield — Windrow 7 | 55.2 t | 41.7°C | Curing | |
| B-2026-011 | Cardboard fines | Greenfield — Bay 1 | 18.9 t | 24.0°C | Intake | |
| B-2026-010 | Food waste | Riverside — Bay 3 | 27.3 t | 38.9°C | Curing | |
| B-2026-009 | Green waste | Hallow Farm — Bay 1 | 47.5 t | 29.6°C | Screening | |
223.3 t |
Click a row (or scroll horizontally — Batch and the actions menu stay pinned).
End-to-end examples
Real domain tables built on this kit live under Tables in the sidebar — invoices (money formatting, density toggle, CSV export), waste movements and organisations.
API reference
Exported parts and their props, extracted from the component source.