DataTable
Generic <DataTable> on TanStack Table + Virtual. Sort, filter, column visibility/pinning, resizing, virtualization, URL state sync, row selection + ActionBar, per-column filters, expandable rows, summary row, localStorage-persisted visibility, and a server-driven `request` contract wired through useListing.
Rendered example — light + dark
Light
Structured token filtering (PropertyFilter) feeds the table; then sort, pin, per-column filter, expand a row for detail, select rows for bulk actions, resize widths, and export. Virtualization is active even on this small dataset.
| 8 of 8 | Totals → |
Dark
Structured token filtering (PropertyFilter) feeds the table; then sort, pin, per-column filter, expand a row for detail, select rows for bulk actions, resize widths, and export. Virtualization is active even on this small dataset.
| 8 of 8 | Totals → |
Recipes & props
A realistic usage snippet for this component. Imports come from
@/components/ui/….
See the
source
for the full API.
import { DataTable } from '@/components/ui/data-table';
const columns = [
{ accessorKey: 'name', header: 'Name' },
{ accessorKey: 'status', header: 'Status' },
];
const rows = [
{ name: 'Astro 5 upgrade', status: 'merged' },
{ name: 'Tailwind v4 migration', status: 'open' },
];
export default function Issues() {
return <DataTable columns={columns} data={rows} />;
}