DataTable

Generic <DataTable> on TanStack Table + Virtual. Sort, filter, column visibility, resizing, virtualization, URL state sync.

stable

Source: src/components/ui/data-table.tsx

Rendered example — light + dark

Light

Sort columns, filter rows, toggle visibility, and resize column widths. Virtualization is active even on this small dataset — try adding thousands of rows.

8 rowsShowing 0 of 8 in viewport

Dark

Sort columns, filter rows, toggle visibility, and resize column widths. Virtualization is active even on this small dataset — try adding thousands of rows.

8 rowsShowing 0 of 8 in viewport

Recipes & props

A realistic usage snippet for this component. Imports come from @/components/ui/…. See the source file src/components/ui/data-table.tsx 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} />;
}

Props API

DataTableProps

Prop	Type	Default	Description
`columns`	`ColumnDef<TData, TValue>[]`	—	—
`data`	`TData[]`	—	—
`initialColumnVisibility` opt	`VisibilityState`	`{}`	Initial column visibility — column id to visible boolean.
`initialGlobalFilter` opt	`string`	`''`	Initial global filter string.
`height` opt	`string \| number`	`'500px'`	Height of the scroll container in CSS units. Defaults to '500px'.
`estimateRowSize` opt	`number`	`40`	Estimated row height in px for virtualization. Defaults to 40.
`syncToUrl` opt	`boolean \| { key: string }`	`false`	Sync filter/sort/visibility/sizing to URLSearchParams so views are shareable and survive page refresh. Pass `{ key: 'myTable' }` to namespace URL params when multiple DataTables share a page. Defaults to false (no URL syncing).