Data Table

Sortable, filterable, paginated, selectable table with virtualization and CSV export, on TanStack Table.

DataTable is the Tier 1 face of a TanStack Table configuration: sort by clicking headers, a global search input above the columns that filters every column at once, pagination with a rows-per-page selector and Button controls, a Checkbox selection column, sticky first/last column pinning, automatic virtualization above ~200 rows, and client-side CSV export of the visible columns. Sort → filter → paginate compose through TanStack's row pipeline, so any order of operations gives the same result.

Installation

import { DataTable } from "@iammikz/srui";

Usage

const columns: ColumnDef<Person, unknown>[] = [
  { accessorKey: "name", header: "Name" },
  { accessorKey: "email", header: "Email" },
  { accessorKey: "role", header: "Role" },
];

<DataTable
  columns={columns}
  data={people}
  selectable
  filterable
  pageSize={5}
  onRowSelectionChange={(rows) => console.log(rows)}
/>

Props

Virtualization is automatic: without pageSize, datasets over 200 rows render through @tanstack/react-virtual (a 10,000-row table scrolls at 60fps — try the button in the demo above).

Server-side pagination

pageSize alone paginates the array you pass in — the client-side default. When your endpoint returns one page per request (?page=2&limit=10 → 10 rows plus a total), switch to manual mode: data becomes just the current page, and the table pages through the server's totals instead.

const [data, setData] = useState<Person[]>([]);
const [rowCount, setRowCount] = useState(0);
const [pagination, setPagination] = useState<PaginationState>({
  pageIndex: 0,
  pageSize: 10,
});

useEffect(() => {
  fetch(`/api/people?page=${pagination.pageIndex + 1}&limit=${pagination.pageSize}`)
    .then((res) => res.json())
    .then((body) => {
      setData(body.rows);
      setRowCount(body.total);
    });
}, [pagination]);

<DataTable
  columns={columns}
  data={data}
  manualPagination
  rowCount={rowCount}
  pagination={pagination}
  onPaginationChange={setPagination}
/>

• onPaginationChange fires with the resolved { pageIndex, pageSize } on Prev/Next and rows-per-page changes — that's your refetch trigger. pagination is optional: omit it and the table owns the state.
• The same pattern covers sorting and search: manualSorting + onSortingChange (header clicks emit [{ id, desc }] — sort server-side and refetch) and manualFiltering + onGlobalFilterChange (the search box emits the query as the user types). Sorting, the global filter and CSV export otherwise stay client-side — they operate on the loaded page.
• If the API reports pages instead of totals, pass pageCount instead of rowCount.

Tier 2 — slots and classNames

<DataTable
  columns={columns}
  data={data}
  slots={{
    toolbar: ({ table }) => <MyToolbar count={table.getFilteredRowModel().rows.length} />,
    empty: "No people match your filters.",
  }}
  classNames={{ root: "…", header: "…", row: "…", cell: "…" }}
/>

Tier 3 — useDataTable()

The headless hook: a fully wired TanStack instance (sorting, filtering, pagination, selection) with zero JSX.

const table = useDataTable<Person>({ columns, data, selectable: true });
// render anything: cards, a list, your own <table>…
table.getRowModel().rows.map((row) => …);

Accessibility

• Sort buttons expose aria-sort (ascending/descending); screen-reader labels cover the select-all and per-row checkboxes.
• The global search input is labelled (Search all columns), and the row count is an aria-live region so filtering announcements happen without focus moves. The rows-per-page trigger is labelled for screen readers.
• Virtualized rows keep native table semantics (table/thead/tbody).