Appearance

useDataTable ​

useDataTable is a composable that creates a TanStack Table instance from column definitions and data. It powers DataTable and handles both client-side mode (sorting, filtering, pagination in memory) and server-side mode when used inside a DataView (sorting and pagination driven by DataView state and @update).

While the composable is exported for advanced use cases, it is recommended to use the DataTable component instead. DataTable uses useDataTable internally and provides the full table UI (headers, rows, selection column, expansion column, pagination). Use the composable directly only if you need to render a custom table layout while still relying on TanStack Table for state (e.g. your own #head / #body templates).

What it does ​

  • Accepts columns (TanStack ColumnDef[]) and data (row array), plus optional options for row IDs, selection, expansion, and initial state.
  • When not inside a DataView: returns a table instance with client-side sorting, filtering, and pagination (with default page size 10).
  • When inside a DataView (with variant="table" or pagination/sort enabled): returns a table instance in server mode; sorting and pagination state are synced with DataView and the parent should refetch on @update.

The return value includes table (the TanStack table instance) and isServerMode (boolean).

Import ​

ts
import { useDataTable } from '@leaflink/stash/DataTable';

Usage ​

Pass reactive columns and data, and optionally getRowId, enableRowSelection, getSubRows, getRowCanExpand, initialState, pageSize, or turn off enableSorting / enableFiltering / enablePagination. Use the returned table to render headers and rows (e.g. table.getHeaderGroups(), table.getRowModel().rows). For a complete, ready-made UI, use DataTable instead.