Table
An accessible table primitive built on React Aria - semantic markup, keyboard navigation, row selection and sortable columns. Pair it with TanStack Table for sorting, filtering and pagination logic, as in the example below.
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 table component using our CLI or manually:
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.
npx boardui@latest add tableSizes
The table comes in 2 sizes: md (normal) and sm (compact, with tighter padding and smaller avatars). Switch between them by changing the size prop on the Table component - try the Normal / Compact toggle in the preview above.
<Table size="md" aria-label="Customers"> {/* rest of the table components */}</Table>Table of Contents
This guide shows how to use TanStack Table - the headless engine for rows, columns, sorting, filtering and selection - together with the Table primitive to build your own data table. We'll cover the following topics:
- Basic table with the Table primitive
- Row selection
- Sorting
- Filtering & search
- Pagination
- Reusable components