Data table
shadcn's data-table recipe on TanStack Table: sorting, columns menu, selection with a bulk bar, row menus, paging.
Preview
| Domain | Status | Consent rate | Actions | |||
|---|---|---|---|---|---|---|
| Demo PG | shop.example | Live | 62% | 47,138 | ||
| Fence Supplies | thefence.uk | Live | 71% | 18,320 | ||
| Northwind Coffee | northwind.example | Not on the site yet | Too few views | 0 | ||
| Atlas Outdoor | atlas.example | Meta refuses events | 58% | 92,410 | ||
| Brightside Dental | brightside.example | Paused | 64% | 3,205 |
Showing 1–5 of 5
Rows per page
Focus rings
| Domain | Status | Consent rate | Actions | |||
|---|---|---|---|---|---|---|
| Demo PG | shop.example | Live | 62% | 47,138 | ||
| Fence Supplies | thefence.uk | Live | 71% | 18,320 | ||
| Northwind Coffee | northwind.example | Not on the site yet | Too few views | 0 | ||
| Atlas Outdoor | atlas.example | Meta refuses events | 58% | 92,410 | ||
| Brightside Dental | brightside.example | Paused | 64% | 3,205 |
Showing 1–5 of 5
Rows per page
In each theme: Default · Trackable · SkillDecks · BetterMarketer
Install
npx shadcn@4.23.0 add https://ui.dobrin-dobrev.co.uk/r/data-table.json
Into an app set up with shadcn init --base radix; the parts it uses come with it.
Files
- registry/default/blocks/data-table.tsx → components/blocks/data-table.tsx