Components

Data Table

TanStack Table drives the model; the Table component renders it. Sorting built in.

const table = useReactTable({
  data: notes,
  columns,
  state: { sorting },
  onSortingChange: setSorting,
  getCoreRowModel: getCoreRowModel(),
  getSortedRowModel: getSortedRowModel(),
});

<Table>
  <TableHeader>…</TableHeader>
  <TableBody>
    {table.getRowModel().rows.map((row) => (
      <TableRow key={row.id}>…</TableRow>
    ))}
  </TableBody>
</Table>

TanStack Table drives the model — sorting, filtering, pagination — while the shadcn Table renders it. Click the Words header to sort.

The same model wired for a full workflow: a filter input (Filtering), a Columns menu toggling column.getIsVisible() (Visibility), a checkbox column bound to rowSelection (Row Selection), a per-row ⋯ menu (Row Actions), and Previous/Next controls over getPaginationRowModel (Pagination).

Markdown for agents: /design/data-table.md · spec: /design.md