table

TanStack Table does NOT include virtualization — pair with `@tanstack/lit-virtual`. The standard pattern: get the row array from `table.getRowModel().rows`, construct a `VirtualizerController(host, opts)` alongside `TableController`, feed `rows.length` as the virtualizer count inside `render()`, and render only `virtualizer.getVirtualItems()` with each row absolutely positioned via `transform: translateY(...)`. Routing keywords: lit-virtual, VirtualizerController, virtualization, virtualized-rows, lit table.

The `TableController` ReactiveController pattern for hosting a TanStack Table instance inside a LitElement. One controller per host (constructed in a class field); `.table(options, selector?)` called from `render()`. The controller installs the Lit `coreReactivityFeature`, subscribes the host to `table.store` and `table.optionsStore`, and tears those subscriptions down on `hostDisconnected`. Routing keywords: TableController, ReactiveController, ReactiveControllerHost, hostConnected, hostDisconnected, lit-table.

Wiring reactivity for `@tanstack/lit-table` v9. Covers `TableController` (constructed once per LitElement host, `.table(options, selector?)` called per render), reading state via `table.state` / `table.store` / `table.atoms.<slice>`, rendering with `table.FlexRender` / `FlexRender`, fine-grained subscriptions via the `table.subscribe` directive, owning slices with external atoms via `createAtom` + `options.atoms`, and packaging shared config into `createTableHook` (`useAppTable`, `createAppColumnHelper`, `useTableContext`, `table.AppCell` / `table.AppHeader` / `table.AppFooter`). Routing keywords: TableController, ReactiveController, useAppTable, atoms, lit-context, FlexRender, lit-table.

Mechanical migration from `@tanstack/svelte-table@8` to `@tanstack/svelte-table@9`. v9 in Svelte is a full rewrite — Svelte 5 runes only (no Svelte 3/4), no `/legacy` adapter (unlike React), `createSvelteTable` → `createTable`, `getCoreRowModel` / `getSortedRowModel` factories → row-model factories registered as slots inside `tableFeatures({...})`, `flexRender` helper → `<FlexRender>` component, writable-store `state` → rune-based getters / external atoms, `onStateChange` → per-slice `on[State]Change` or `atoms`. Plan a feature-by-feature audit, not a search-and-replace.

Investigate a GitHub issue, determine whether it is a real bug, reproduce it with the smallest practical test or example, and apply a focused fix only after the failing behavior is confirmed. Use this when asked to look at, verify, triage, reproduce, or fix a GitHub issue in this repository.

Angular's structural-directive rendering pipeline for TanStack Table v9. Covers `FlexRender` (`*flexRender`), the shorthand directives `*flexRenderCell` / `*flexRenderHeader` / `*flexRenderFooter`, the `flexRenderComponent(Component, { inputs, outputs, bindings, directives, injector })` wrapper, DI tokens `TanStackTableToken` / `TanStackTableHeaderToken` / `TanStackTableCellToken` with their `injectTableContext()` / `injectTableHeaderContext()` / `injectTableCellContext()` helpers, the `[tanStackTable]` / `[tanStackTableHeader]` / `[tanStackTableCell]` host directives, `injectFlexRenderContext()`, automatic token injection inside `*flexRender`, and the four content shapes (primitive, `TemplateRef`, component type, `flexRenderComponent` wrapper).

Convert an Angular Table v9 from client-side to server-side processing. Flip `manualPagination` / `manualSorting` / `manualFiltering` / `manualGrouping` / `manualExpanding` for the slices the server now owns; drop the corresponding row-model factory slots from the `features` object for the factories the server replaces; supply `rowCount` (server total) so pagination computes correctly; hoist `pagination` / `sorting` / `columnFilters` / `globalFilter` to Angular signals with `state` + `on[State]Change`; fetch via `rxResource` / `httpResource` / `@tanstack/angular-query`; preserve previous data on refetch with `linkedSignal` (or `placeholderData: keepPreviousData` for Query); set `getRowId` for stable selection across refetches.

Compose TanStack Table v9 with `@tanstack/angular-query-experimental` for server-side data. Key the query on the controlled table state that drives the request (pagination, sorting, filters); use `placeholderData: keepPreviousData` to avoid a "0 rows flash" between pages; set `manualPagination` / `manualSorting` / `manualFiltering` for the slices the server owns; drop the matching client row-model factory slots from `features`; pass `rowCount` from the server response; set `getRowId` for stable selection across refetches; hoist controlled slices to Angular signals + `state` + `on[State]Change`. Alternative: `rxResource` / `httpResource` if you don't want to add the Query dependency (see `client-to-server`).

Compose TanStack Table v9 with `@tanstack/angular-store`. TanStack Table v9 is itself built on TanStack Store — each state slice is an atom. Read surfaces include `table.atoms.<slice>` (per-slice readonly, signal-backed), `table.state` / `table.store` (flat readonly views), and `table.baseAtoms.<slice>` (writable). The `atoms` table option lets you replace an internal slice with an external TanStack Store atom for cross-app sharing (URL sync, persistence, multi-table coordination). In Angular, native signals + `state` + `on[State]Change` is the default; reach for external atoms only when ownership crosses an app boundary the signal model can't easily span.

Compose TanStack Table v9 with `@tanstack/angular-virtual` for virtualized rendering of large row sets. TanStack Table does NOT virtualize on its own. Pattern: get `rows = table.getRowModel().rows`, feed `rows.length` to `injectVirtualizer({ count, estimateSize, getScrollElement, overscan })`, iterate `virtualizer.getVirtualItems()` in the template, position each row with `transform: translateY(item.start)` inside a tall sentinel, set `[style.height.px]="virtualizer.getTotalSize()"` to make the scrollbar correct. Handle the table-feature interactions: row-expanding (variable subRow heights → measure with `measureElement`), column sizing/pinning (column virtualization is separate), row-selection (selection state survives virtualization because it's keyed by row ID).

End-to-end first-table journey for TanStack Table v9 in Angular: install `@tanstack/angular-table`, declare `features` with `tableFeatures()` (row-model factories and fn registries live on the features object), build columns with the `TFeatures, TData` generic order, call `injectTable(() => ({...}))` from an injection context, and render with `FlexRender` / `*flexRenderHeader` / `*flexRenderCell` / `*flexRenderFooter`. Covers the minimum-viable signal-backed table plus the upgrade path to sorting + filtering + pagination.

Mechanical v8 → v9 migration for `@tanstack/angular-table`: `createAngularTable` → `injectTable`, `get*RowModel()` options → row-model factories on the `features` object (no separate `rowModels` option; fn registries like `filterFns`/`sortFns` are also slots on `features`), required `features` via `tableFeatures()`, state access via `table.atoms.<slice>.get()` or `table.state` instead of `table.getState()`, `createColumnHelper<TFeatures, TData>()` generic-order flip, every type now requires `TFeatures`, `enablePinning` split into `enableColumnPinning` / `enableRowPinning`, `sortingFn` → `sortFn` rename pile, `ColumnSizingInfo` → `ColumnResizing` split, removal of `_`-prefixed internals, signal-backed atoms replacing v8 memoized accessors, and structural-directive rendering replacing v8 component-based rendering.

Ship-ready optimizations for Angular Table v9: register only the `features` you actually use (tree-shake the bundle); keep `columns` / `features` (which carries row-model factories and fn registries) as stable references OUTSIDE the `injectTable` initializer; pass only the `*Fns` your data needs as slots on the features object; use `ChangeDetectionStrategy.OnPush`; lean on signal-backed atoms (`table.atoms.<slice>.get()`) instead of broad `table.state` reads where granularity matters; use `{ equal: shallow }` on object/array `computed` selectors; set `getRowId` for stable identity; track by `id` in every `@for`; defer cell components with `flexRenderComponent` only when you need its options; scope DI tokens via `[tanStackTable*]` directives to kill prop drilling.

TanStack Table v9 state ownership in Angular: signal-backed atoms via `angularReactivity`, the `injectTable(() => ({...}))` lazy initializer pattern, reading `table.atoms.<slice>.get()` inside templates / `computed(...)` / `effect(...)`, `shallow` for object slices, controlled state with Angular signals + `state` + `on[State]Change`, and when to reach for external TanStack Store atoms instead. Required reading before any other Angular Table v9 skill.

End-to-end first-table journey for `@tanstack/lit-table` v9: install the adapter (plus required `lit` and `@lit/context` peers), declare `features` via `tableFeatures()` (row model factories live as slots on the features object), build a typed column helper, construct one `TableController` per LitElement host, call `.table(options, selector?)` inside `render()`, and render with `FlexRender({ cell|header|footer })`. Routing keywords: install lit-table, first table, getting started, TableController, basic-table-controller, tableFeatures.

Mechanical breaking-change migration from TanStack Table v8 to v9 for `@tanstack/lit-table`. v8's `TableController(host, () => options)` shape collapses to v9's `new TableController(host)` + `.table(options, selector?)`; per-row-model `get*RowModel` options become `tableFeatures({...})` slots (row model factories live on the features object, not a separate `rowModels` map); `flexRender(def, ctx)` becomes `FlexRender({ cell|header|footer })`; core types gain a `TFeatures` first generic. Routing keywords: lit v8 to v9, migration, TableController v8, get*RowModel, features lit.

Wire up TanStack Devtools for TanStack Table in Preact. Mount `TanStackDevtools` with `tableDevtoolsPlugin()` once at the app root and call `useTanStackTableDevtools(table)` after each `useTable` so the table is registered as a devtools target. Live devtools are tree-shaken to no-ops in production unless you import from `@tanstack/preact-table-devtools/production`.

Convert a client-side `@tanstack/preact-table` to server-side (a.k.a. manual) modes. Pass server-paginated data, set `manualSorting` / `manualFiltering` / `manualPagination` / `manualGrouping` / `manualExpanding` for whatever the server owns, supply `rowCount`, key external atoms for pagination/sorting/ filters and trigger a refetch when they change. Routing keywords: server-side pagination, manual pagination, manualSorting, manualFiltering, rowCount, remote data preact.

Editable cells with `@tanstack/preact-form`. The table is the layout primitive; the form owns the state. Use `createFormHook` to register reusable field components (`TextField`, `NumberField`, `SelectField`), and in each column's `cell` renderer return the matching field component bound to that row's accessor. Row identity (via `getRowId`) keeps field state stable as rows resort / re-filter. Routing keywords: preact-form, editable cells, inline editing, createFormHook, FieldGroup, getRowId.

Server-side / async data flow with `@tanstack/preact-query`. Key the query on the table state that drives the request (pagination + sort + filters), pass `placeholderData: keepPreviousData` to avoid a "0 rows flash" between pages, set `manualPagination` / `manualSorting` / `manualFiltering` for the slices the server owns, supply `rowCount`, and let `table.set*` writes to external atoms re-key the query. Routing keywords: preact-query, server pagination, keepPreviousData, useQuery, manualPagination, rowCount, fetchData.

`@tanstack/preact-table` v9 is built on TanStack Store. Each registered state slice is an atom. The table exposes three reactive surfaces: `table.atoms.<slice>` (per-slice readonly), `table.store` (flat readonly view), and `table.baseAtoms.<slice>` (internal writable). Use external atoms via `useCreateAtom` + `options.atoms` to hand slice ownership to your app, share atoms across components with `useSelector`, and subscribe imperatively with `atom.subscribe(...)` for persistence/sync. Routing keywords: preact-store, useCreateAtom, useSelector, atoms, external state, slice ownership, persistence.

TanStack Table does NOT include virtualization — pair with TanStack Virtual. Preact has no dedicated `@tanstack/preact-virtual` adapter yet; use `@tanstack/virtual-core`'s `Virtualizer` class behind a small hook, or use the React adapter via `preact/compat`. Pattern: get `rows = table.getRowModel().rows`, feed `rows.length` to the virtualizer, render only virtual items, and use CSS transforms for row positioning. Routing keywords: preact virtualization, large table, virtual rows, virtual-core, getVirtualItems, table-core.

End-to-end first-table journey for `@tanstack/preact-table` v9: install the adapter, declare `features` via `tableFeatures()` with row model factories and *Fns slots on the features object, build a typed column helper, call `useTable` with stable references, and render with `table.FlexRender`. Routing keywords: install preact-table, first table, getting started, tableFeatures, features, useTable, FlexRender, basic-use-table.

Mechanical breaking-change migration from TanStack Table v8 to v9 for `@tanstack/preact-table`. Maps every old-shaped option, helper, type, and method an agent will reproduce from v8 muscle memory to its v9 equivalent: `useReactTable` → `useTable`, per-row-model `get*RowModel` options → row-model factories registered in `tableFeatures({...})`, plain column helpers → typed column helpers, `state` + `on*Change` → `atoms`, `flexRender` → `table.FlexRender`, and core type renames. Routing keywords: v8 to v9, migration, useReactTable, table v8 preact, get*RowModel, features.

Ship-ready optimizations for `@tanstack/preact-table` v9: tree-shake the bundle by registering ONLY the `features` you actually use; memoize `features`, `data`, and `columns` for stable identity; replace `(state) => state` with narrow selectors or per-slice `useSelector` subscriptions; wrap hot subtrees in `<table.Subscribe>`; and prefer slice atoms over `state` + `on*Change` for fine-grained updates. Routing keywords: preact-table performance, optimization, tree-shaking, stable refs, Subscribe, narrow selector.

Wiring reactivity for `@tanstack/preact-table` v9. Covers `useTable` (and its second-argument selector), reading state via `table.state` / `table.store` / `table.atoms.<slice>`, rendering with `table.FlexRender`, opting subtrees into fine-grained reactivity with `<table.Subscribe>` and the standalone `<Subscribe>`, owning slices with external atoms via `useCreateAtom` + `options.atoms`, and packaging shared config into a reusable hook with `createTableHook` (`useAppTable`, `createAppColumnHelper`, `table.AppTable` / `table.AppHeader` / `table.AppCell` / `table.AppFooter`). Routing keywords: useTable, useSelector, useCreateAtom, atoms, preact-store, table.Subscribe, FlexRender.

Wire up TanStack Devtools for TanStack Table in React. Mount `TanStackDevtools` with `tableDevtoolsPlugin()` once at the app root and call `useTanStackTableDevtools(table)` after each `useTable` so the table is registered as a devtools target. Live devtools are tree-shaken to no-ops in production unless you import from `@tanstack/react-table-devtools/production`.

Convert a client-side `@tanstack/react-table` v9 table to server-side (manual modes). Pass server-paginated/sorted/filtered rows as `data`, set `manualPagination` / `manualSorting` / `manualFiltering` / `manualGrouping` / `manualExpanding` for whatever the server now owns, supply `rowCount` so `getPageCount()` works, and DROP the matching factory from `tableFeatures()` (no `paginatedRowModel` slot if the server paginates). Own the relevant state slices via external atoms (`useCreateAtom` + `options.atoms`) so a query can key on the slice and refetch automatically — OR via classic `state` + `on*Change` controlled state.

Editable cells for `@tanstack/react-table` v9 via `@tanstack/react-form`. The table is the layout primitive; the form owns editing state. Use `createFormHook` to register reusable field components (`TextField`, `NumberField`, `SelectField`), then in each column's `cell` return `<form.AppField name={`data[${row.index}].field`}>{(field) => <field.TextField />}</form.AppField>`. Critical typing gotcha: if your row has a recursive `subRows`, use `Omit<Row, 'subRows'>` for the form row type — TanStack Form's `DeepKeys` recurses and hits TS2589. Subscribe to `form.state.values.data.length` (not the whole array) for row add/remove re-renders.

Server-side / async data flow for `@tanstack/react-table` v9 with `@tanstack/react-query`. Canonical pattern: external pagination atom via `useCreateAtom<PaginationState>` + `options.atoms` (NOT `state + on*Change`), pagination object as part of `queryKey`, `manualPagination: true`, `placeholderData: keepPreviousData` to avoid the 0-rows flash, and `defaultData = useMemo(() => [], [])` to keep `data` reference stable between fetches. `rowCount` from the API response so `getPageCount()` works.

`@tanstack/react-table` v9 is built on TanStack Store. Each state slice (sorting, pagination, rowSelection, columnFilters, …) is a separate atom. The table exposes three READ surfaces — `table.atoms.<slice>` (per-slice readonly), `table.store` (flat readonly view), `table.state` (selector output from `useTable`) — and two WRITE paths — internal `table.baseAtoms.<slice>` OR YOUR `options.atoms[slice]` if you opt to own the slice. Use `useCreateAtom` from `@tanstack/react-store` for stable identity, `useSelector` for fine-grained reads, and pass the atom in `options.atoms` so the table writes through it directly — no `on*Change` handler required.

`@tanstack/react-table` v9 does NOT include virtualization — pair with `@tanstack/react-virtual`. Standard row-virtualization pattern: get the row array from `table.getRowModel().rows`, feed `rows.length` to `useVirtualizer({ count, estimateSize, getScrollElement, ... })` in the DEEPEST possible component (a `TableBody`, NOT `App`), iterate `rowVirtualizer.getVirtualItems()` instead of `rows.map`, absolute-position each row with `transform: translateY(virtualRow.start)px`, and render `<tbody>` as a CSS grid with a fixed total height. Column virtualization uses `horizontal: true` plus padding-left/right placeholder cells. An experimental ref-mutation variant skips React reconciliation for ~10% extra perf but the standard pattern is the default.

End-to-end first-table journey for `@tanstack/react-table` v9. Install the React adapter, declare `features` via `tableFeatures()` (row model factories and *Fns registries live on the features object alongside feature flags), create a column helper with both `TFeatures` and `TData` generics, instantiate `useTable`, and render with `<table.FlexRender>`. New users land here, not on `useLegacyTable`.

Mechanical breaking-change migration from `@tanstack/react-table` v8 to v9. Every v8-shaped option, type, or method an agent will reproduce from muscle memory has a v9 equivalent enumerated below: `useReactTable` → `useTable`, root `get*RowModel` options → row model factories on `tableFeatures({...})` alongside their *Fns registries, `createColumnHelper<TData>` → `createColumnHelper<typeof features, TData>`, `table.getState()` → `table.state` / `table.store.state` / `table.atoms.X.get()`, `sortingFn` → `sortFn`, `enablePinning` → split, `_`-prefixed APIs unprefixed, `ColumnSizing` split into `columnSizingFeature` + `columnResizingFeature`. For incremental migration, `useLegacyTable` from `@tanstack/react-table/legacy` accepts the v8 API on the v9 engine — deprecated, larger bundle, no `table.Subscribe`. Long-term you migrate every table off it.

Ship-ready optimizations for `@tanstack/react-table` v9: tree-shake the bundle by registering ONLY the `features` you actually use; memoize `features`, `data`, and `columns` for stable identity; replace `(state) => state` with narrow selectors or per-slice `useSelector(table.atoms.<slice>)` subscriptions; and push state-driven re-renders down the tree with `<table.Subscribe>` / `<Subscribe>` so the expensive table body doesn't re-render every time you toggle a sort indicator. Don't over-optimize small tables — the default selector + inline rendering is fine until measured perf demands more.

Wiring reactivity for `@tanstack/react-table` v9. Covers `useTable` (and its second-argument selector), reading state via `table.state` / `table.store` / `table.atoms.<slice>`, rendering with `table.FlexRender`, opting subtrees into fine-grained reactivity with `<table.Subscribe>` and the standalone `<Subscribe>`, owning slices with external atoms via `useCreateAtom` + `options.atoms`, and packaging shared config into a reusable hook with `createTableHook` (`useAppTable`, `createAppColumnHelper`, `table.AppTable` / `table.AppHeader` / `table.AppCell` / `table.AppFooter`). Routing keywords: useTable, useSelector, useCreateAtom, atoms, react-store, table.Subscribe, FlexRender.

Wire up TanStack Devtools for TanStack Table in Solid. Mount `TanStackDevtools` with `tableDevtoolsPlugin()` once at the app root and call `useTanStackTableDevtools(table)` after each `createTable` so the table is registered as a devtools target. Live devtools are tree-shaken to no-ops in production unless you import from `@tanstack/solid-table-devtools/production`.

Convert a client-side `@tanstack/solid-table` to server-side. Lift the sort/filter/pagination state into Solid signals or external atoms (`createAtom` + `useSelector` from `@tanstack/solid-store`), set the corresponding `manual*` options, supply `rowCount`, and skip the matching row-model factory (the server already did that work).

Editable cells in `@tanstack/solid-table` with `@tanstack/solid-form`. The table is the layout primitive; the form owns the state. Build the form with `createFormHook` + `createFormHookContexts` to register reusable field components (`TextField`, `NumberField`, `SelectField`), source `data` from `form.state.values.data` via a reactive `get data()` getter, and render `<form.AppField name={...}>` inside each column's `cell`.

Debounce or throttle high-frequency writes that drive a `@tanstack/solid-table` with `@tanstack/solid-pacer`. Typical targets: column filter inputs (debounce text → `column.setFilterValue`) and column-resize state (throttle pointer moves). Pattern: wrap the setter in `createDebouncer`/`createThrottler` (or use the matching hook), call it from input handlers; the table's atoms still drive the row model.