Data table

shadcn/ui's data-table walkthrough on TanStack Table v9: the Table primitive plus the helpers in data-table.tsx. dataTableFeatures registers sorting, filtering, visibility, pagination and selection once; DataTableColumnHeader, DataTableViewOptions and DataTablePagination are the reusable pieces. A column with meta.currency renders Money and right-aligns itself. DataTableViewOptions takes an optional, controlled filters prop — labelled checkbox groups above "Toggle columns" — and a showColumns flag for a filters-only menu; DataTablePagination takes an optional total for a server row count and a custom pageSizeOptions list, including an "All" entry (#351). Page size 10; a queue with bulk actions and a phone layout is the Task queue composite.

const col = createColumnHelper<DataTableFeatures, Order>();
const columns = col.columns([ col.accessor("buyer", { header: ({ column }) => <DataTableColumnHeader column={column} title="Buyer" />, filterFn: "includesString" }), … ]);

const table = useTable({ features: dataTableFeatures, data, columns, getRowId: (r) => r.id });
<Table>…<TableHead aria-sort="ascending"><table.FlexRender header={header} /></TableHead>…<DataTableCell cell={cell} table={table} />…</Table>
<DataTablePagination table={table} />