Data Table
A full data table block powered by TanStack Table - sortable columns with custom chevrons, row selection with indeterminate header state, per-row chips and actions, and a pagination footer. Rendering uses the BoardUI table primitives, so the logic and the look stay decoupled.
Total Results
48 customers
| Purchase | Status | Actions | |||
|---|---|---|---|---|---|
 John Clarkson | Delivery failed | Sep 05, 2026 | $3.412 | ||
 Aspen Lubin | Delivery failed | Mar 25, 2026 | $1.899 | ||
 Michael Ekstrom | Shipped | Aug 01, 2026 | $2.752 | ||
 Kianna Vaccaro | Shipped | Apr 02, 2026 | $145 | ||
 Livia Saris | Delivery failed | Nov 14, 2026 | $708 | ||
 Jaydon Aminoff | Delivery waiting | Jul 17, 2026 | $224 | ||
 Maria Lubin | Shipped | Nov 15, 2026 | $2.959 | ||
 Ann Press | Delivery waiting | Sep 20, 2026 | $2.646 |
Installation
You can add this data table block using our CLI or manually. The CLI also pulls the table, checkbox, chip, select, pagination, and segmented-control primitives it composes:
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
CLI
Manual
The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.
npx boardui@latest add data-table