DataTable
primitive · liteSortable headers, free-text filter, optional paging. No virtualization — built for ≤ 5,000 rows.
8 of 8
| Status | ||||
|---|---|---|---|---|
| Ana Mantel | ana@disenio.studio | admin | 2026-04-12 | active |
| Sam Rivera | sam@acme.co | member | 2026-04-18 | active |
| Chen Liu | chen@studio.dev | member | 2026-04-22 | invited |
| Mira Patel | mira@labs.io | viewer | 2026-04-25 | active |
| Theo Park | theo@park.studio | admin | 2026-04-28 | active |
page 1 of 2
Installation
$pnpm dlx disenio add data-tableUsage
example.tsx
import { DataTable } from "@/components/ui/data-table";API
| Prop | Type | Default | Description |
|---|---|---|---|
| data | T[] | — | Row objects to render. |
| columns | DataTableColumn<T>[] | — | Column descriptors with id, header, accessor, optional cell renderer + sort key. |
| searchable | boolean | false | Show the filter input. |
| pageSize | number | — | Rows per page. Omit to show all. |
| rowKey | (row, i) => Key | — | Stable key per row. Defaults to index. |
| empty | ReactNode | — | Rendered when filtered results are empty. |
Column descriptor
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | — | Stable column id (used for sort state). |
| header | ReactNode | — | Header text or element. |
| accessor | keyof T | (row) => ReactNode | — | How to read the value for each row. |
| cell | (row) => ReactNode | — | Custom cell renderer. Defaults to accessor output. |
| sortable | boolean | false | Allow click-to-sort on the header. |
| sortValue | (row) => string|number|Date | — | Override sort key extraction. |
| align | "left" | "right" | "center" | "left" | Cell text alignment. |
| width | string | — | Optional CSS width. |
Accessibility
A11y · live audit
updates with themeAccent on paper
3.97AA Large
Ink on paper
21.00AAA
Keyboard↹ focus header · ↵ toggle sort · ↹ next column
ARIAsemantic <table>/<thead>/<tbody> · sort header is a button