data-table
npx shadcn@latest add @design/data-tableMemoize columns and data with useMemo. Sorting/selection/faceting are built in. Pagination is uncontrolled by default; for URL-synced or server pagination pass controlled pagination + onPaginationChange + pageCount (see the use-url-pagination hook) — then supply only the current page's rows. DataTableColumnHeader gives sortable/hideable headers.
| Role | ||
|---|---|---|
| Alice Andersen | alice@example.com | Admin |
| Bob Brennan | bob@example.com | Editor |
| Carol Chen | carol@example.com | Viewer |
| David Diallo | david@example.com | Member |
| Eva Eriksson | eva@example.com | Owner |
| Frank Fischer | frank@example.com | Admin |
| Grace Garcia | grace@example.com | Editor |
| Hans Hoffmann | hans@example.com | Viewer |
| Ingrid Ivanova | ingrid@example.com | Member |
| James Johansson | james@example.com | Owner |
Page 1 of 3