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 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} />;
}