useDataTable

Usage

useDataTable lives on the @kanzo-tech/ui/table subpath, never the root barrel, so import { Button } from "@kanzo-tech/ui" never pulls TanStack into the bundle. @tanstack/react-table is an optional peer, installed only by the apps that render a table.

pnpm add @tanstack/react-table

import { type ColumnDef, useDataTable } from "@kanzo-tech/ui/table";

const table = useDataTable({ columns, data, pageSize: 10 });

It returns a TanStack Table<TData> and nothing else — no wrapper, no subset. Hand it to DataTableRoot and the parts read it off context, or use it directly and render the rows yourself.

What it wires

useReactTable with the six row models a real table needs — core, filtered, sorted, paginated, faceted, faceted-unique — and six state slices held in useState: sorting, column filters, column visibility, row selection, global filter, pagination.

That is the entire value of the hook. Reaching for useReactTable directly means wiring the same six models and remembering which of them the facet filters need; the preset is this hook plus chrome, so moving from DataTable to the parts changes nothing about the engine.

Initial state

Every initial* option seeds a slice once and then gets out of the way — the first render is sorted, filtered, paged and hidden as you asked, and the user owns every render after it. Which is what deep-linking into a table needs.

They are seeds, not controls: changing an initial* value later does nothing. To drive a slice from outside, pass TanStack's state through instead — it is merged over the hook's own.

The instance is a TanStack table

Read state with getState(), drive it with setSorting / setPageIndex / resetColumnFilters, count with the row models. Nothing is hidden behind the hook.

Read state off the instance rather than through onXChange, which hands you a TanStack Updater — a value or a function — and leaves you to resolve it against the previous state yourself.

Server-driven tables

Any TableOptions key the hook does not name for itself is forwarded untouched, so the manual modes work exactly as TanStack documents them. manualPagination with a rowCount says how many rows exist beyond the ones you handed over, and the matching row model steps aside on its own; manualSorting and manualFiltering behave the same way.

Supplied onXChange handlers are called in addition to the hook's own state, never instead of it — so a table stays interactive while you also fetch on the change.

API Reference

useDataTable<TData, TValue>(options: UseDataTableOptions<TData, TValue>): Table<TData>

UseDataTableOptions extends Omit<Partial<TableOptions<TData>>, "columns" | "data">, so manualPagination, rowCount, getRowId, enableRowSelection, onSortingChange, state and every other TanStack option are accepted and passed through.

Returns

A TanStack Table<TData>. ColumnDef, Row, CellContext, HeaderContext and Table are re-exported from @kanzo-tech/ui/table, so a consumer types its columns without a direct TanStack import.

Related