{"owner":"TanStack","repo":"table","hasSkills":true,"totalSkillsCount":123,"totalTokensCount":120425,"categories":["root-instruction","plugin-manifest","anthropic-skill"],"hasMcp":false,"mcpConfig":null,"found":["AGENTS.md","packages/alpine-table/README.md","packages/alpine-table/skills/getting-started/SKILL.md","packages/alpine-table/skills/getting-started/references/create-table-hook.md","packages/alpine-table/skills/table-state/SKILL.md","packages/alpine-table/skills/table-state/references/reactivity.md","packages/angular-table-devtools/skills/devtools/SKILL.md","packages/angular-table/README.md","packages/angular-table/skills/getting-started/SKILL.md","packages/angular-table/skills/getting-started/references/create-table-hook.md","packages/angular-table/skills/getting-started/references/with-tanstack-query.md","packages/angular-table/skills/getting-started/references/with-tanstack-virtual.md","packages/angular-table/skills/migrate-v8-to-v9/SKILL.md","packages/angular-table/skills/migrate-v8-to-v9/references/adapter-migration.md","packages/angular-table/skills/table-state/SKILL.md","packages/angular-table/skills/table-state/references/reactivity.md","packages/ember-table/README.md","packages/ember-table/skills/getting-started/SKILL.md","packages/ember-table/skills/getting-started/references/create-table-hook.md","packages/ember-table/skills/table-state/SKILL.md","packages/ember-table/skills/table-state/references/reactivity.md","packages/lit-table/README.md","packages/lit-table/skills/getting-started/SKILL.md","packages/lit-table/skills/getting-started/references/create-table-hook.md","packages/lit-table/skills/getting-started/references/with-tanstack-virtual.md","packages/lit-table/skills/migrate-v8-to-v9/SKILL.md","packages/lit-table/skills/migrate-v8-to-v9/references/adapter-migration.md","packages/lit-table/skills/table-state/SKILL.md","packages/lit-table/skills/table-state/references/reactivity.md","packages/match-sorter-utils/README.md","packages/match-sorter-utils/skills/fuzzy-ranking/SKILL.md","packages/octane-table/README.md","packages/octane-table/skills/getting-started/SKILL.md","packages/octane-table/skills/getting-started/references/create-table-hook.md","packages/octane-table/skills/table-state/SKILL.md","packages/octane-table/skills/table-state/references/reactivity.md","packages/preact-table-devtools/README.md","packages/preact-table-devtools/skills/devtools/SKILL.md","packages/preact-table/README.md","packages/preact-table/skills/getting-started/SKILL.md","packages/preact-table/skills/getting-started/references/create-table-hook.md","packages/preact-table/skills/getting-started/references/with-tanstack-query.md","packages/preact-table/skills/getting-started/references/with-tanstack-virtual.md","packages/preact-table/skills/migrate-v8-to-v9/SKILL.md","packages/preact-table/skills/migrate-v8-to-v9/references/adapter-migration.md","packages/preact-table/skills/table-state/SKILL.md","packages/preact-table/skills/table-state/references/reactivity.md","packages/react-table-devtools/README.md","packages/react-table-devtools/skills/devtools/SKILL.md","packages/react-table/README.md","packages/react-table/skills/getting-started/SKILL.md","packages/react-table/skills/getting-started/references/create-table-hook.md","packages/react-table/skills/getting-started/references/with-tanstack-query.md","packages/react-table/skills/getting-started/references/with-tanstack-virtual.md","packages/react-table/skills/migrate-v8-to-v9/SKILL.md","packages/react-table/skills/migrate-v8-to-v9/references/adapter-migration.md","packages/react-table/skills/table-state/SKILL.md","packages/react-table/skills/table-state/references/reactivity.md","packages/solid-table-devtools/README.md","packages/solid-table-devtools/skills/devtools/SKILL.md","packages/solid-table/README.md","packages/solid-table/skills/getting-started/SKILL.md","packages/solid-table/skills/getting-started/references/create-table-hook.md","packages/solid-table/skills/getting-started/references/with-tanstack-query.md","packages/solid-table/skills/getting-started/references/with-tanstack-virtual.md","packages/solid-table/skills/migrate-v8-to-v9/SKILL.md","packages/solid-table/skills/migrate-v8-to-v9/references/adapter-migration.md","packages/solid-table/skills/table-state/SKILL.md","packages/solid-table/skills/table-state/references/reactivity.md","packages/svelte-table/README.md","packages/svelte-table/skills/getting-started/SKILL.md","packages/svelte-table/skills/getting-started/references/create-table-hook.md","packages/svelte-table/skills/getting-started/references/with-tanstack-query.md","packages/svelte-table/skills/getting-started/references/with-tanstack-virtual.md","packages/svelte-table/skills/migrate-v8-to-v9/SKILL.md","packages/svelte-table/skills/migrate-v8-to-v9/references/adapter-migration.md","packages/svelte-table/skills/table-state/SKILL.md","packages/svelte-table/skills/table-state/references/reactivity.md","packages/table-core/README.md","packages/table-core/skills/core/SKILL.md","packages/table-core/skills/core/references/api-not-found.md","packages/table-core/skills/core/references/rows.md","packages/table-core/skills/core/references/typescript.md","packages/table-core/skills/custom-features/SKILL.md","packages/table-core/skills/custom-features/references/plugin-example.md","packages/table-core/skills/migrate-v8-to-v9/SKILL.md","packages/table-core/skills/migrate-v8-to-v9/references/architecture.md","packages/table-core/skills/migrate-v8-to-v9/references/feature-apis.md","packages/table-core/skills/migrate-v8-to-v9/references/state.md","packages/table-core/skills/migrate-v8-to-v9/references/typescript.md","packages/table-core/skills/table-features/SKILL.md","packages/table-core/skills/table-features/references/aggregation.md","packages/table-core/skills/table-features/references/cell-selection.md","packages/table-core/skills/table-features/references/cell-spanning.md","packages/table-core/skills/table-features/references/client-vs-server.md","packages/table-core/skills/table-features/references/column-faceting.md","packages/table-core/skills/table-features/references/column-filtering.md","packages/table-core/skills/table-features/references/column-ordering.md","packages/table-core/skills/table-features/references/column-pinning.md","packages/table-core/skills/table-features/references/column-resizing.md","packages/table-core/skills/table-features/references/column-sizing.md","packages/table-core/skills/table-features/references/column-visibility.md","packages/table-core/skills/table-features/references/expanding.md","packages/table-core/skills/table-features/references/global-filtering.md","packages/table-core/skills/table-features/references/grouping.md","packages/table-core/skills/table-features/references/pagination.md","packages/table-core/skills/table-features/references/row-pinning.md","packages/table-core/skills/table-features/references/row-selection.md","packages/table-core/skills/table-features/references/sorting.md","packages/table-core/skills/table-state/SKILL.md","packages/table-devtools/README.md","packages/table-devtools/skills/devtools/SKILL.md","packages/vue-table-devtools/README.md","packages/vue-table-devtools/skills/devtools/SKILL.md","packages/vue-table/README.md","packages/vue-table/skills/getting-started/SKILL.md","packages/vue-table/skills/getting-started/references/create-table-hook.md","packages/vue-table/skills/getting-started/references/with-tanstack-query.md","packages/vue-table/skills/getting-started/references/with-tanstack-virtual.md","packages/vue-table/skills/migrate-v8-to-v9/SKILL.md","packages/vue-table/skills/migrate-v8-to-v9/references/adapter-migration.md","packages/vue-table/skills/table-state/SKILL.md","packages/vue-table/skills/table-state/references/reactivity.md"],"skills":{"AGENTS.md":"# Agent Instructions\n\nBefore analyzing or changing this repository, read and follow\n[`CONTRIBUTING.md`](./CONTRIBUTING.md). Its contribution, development, testing,\npull request, and changeset requirements apply to AI-assisted work as well as\nhuman-authored work.\n\nKeep every change focused on one topic. Understand and verify all generated\ncode, run the required checks, and provide a concise pull request description\nthat follows the repository template.\n\n## Packages that cannot be upgraded yet\n\nLeave these pins alone during routine dependency bumps. They currently break\nEmber, the Svelte kitchen-sink types, or are intentionally deferred.\n\n- **TypeScript** — keep `6.0.3`. Do not bump it as part of a general upgrade.\n- **Babel 7** — Ember is not compatible with Babel 8. In `packages/ember-table`\n and every `examples/ember/*` app, keep `@babel/core`,\n `@babel/plugin-transform-runtime`, `@babel/plugin-transform-typescript`, and\n `@babel/runtime` at `7.29.7`. `@rollup/plugin-babel` `7.1.0` is the Rollup\n plugin version, not Babel itself.\n- **`@dnd-kit/abstract` and `@dnd-kit/helpers`** — keep `^0.2.3` in\n `examples/svelte/kitchen-sink-shadcn`. `@dnd-kit-svelte/svelte@0.1.6` still\n depends on the 0.2.x line. Bumping to 0.5.x installs a second copy, and\n TypeScript treats those private-field types as incompatible.\n- **Vitest and `@vitest/coverage-v8`** — keep the 4.x line (currently\n `^4.1.11` and `4.1.11`). `@analogjs/vitest-angular@2.7.2` and Angular build\n tooling do not support Vitest 5, which also removes the `vitest` `bench` export\n used by the repository benchmarks. Upgrade these together in a separate migration.\n- **Octane** — keep `0.1.36`. The 0.2.x line fails the adapter conformance\n test for synchronous owner and isolated controlled updates during a discrete event.\n- **Pacer devtools** — keep `@tanstack/react-pacer-devtools` at `0.8.0` and\n `@tanstack/solid-pacer-devtools` at `0.7.0`. The 0.14.x packages do not export\n `pacerDevtoolsPlugin`, which the Form and Router examples use.\n- **`@tanstack/preact-form`** — keep `1.30.5` in the Preact Form example.\n The 1.33.x line removes `createFormHookContexts` and `withForm`, requiring\n a separate example migration.\n- **Preact** — keep `^10.29.8`. Preact 11 fails the adapter's hook and SSR\n tests and the devtools type check. The Store and Query adapters still require\n Preact 10. Upgrade these together in a separate migration.\n- **`@tanstack/intent`** — keep `0.4.0`. The 0.5 checker compiles TS and JS\n fences without framework TypeScript configuration or surrounding context. It\n rejects valid Preact and Lit examples, class-member excerpts, and deliberately\n wrong examples. Keep the repository's content and annotated-snippet checks\n enabled while this migration is deferred.\n","packages/alpine-table/README.md":"","packages/alpine-table/skills/getting-started/SKILL.md":"---\nname: getting-started\ndescription:\n Create and render Table v9 with the alpine adapter. Route reusable createTableHook\n defaults, and framework setup; use table-state for reactive ownership.\nmetadata:\n type: framework\n library: '@tanstack/alpine-table'\n framework: alpine\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/alpine/guide/table-state.md\n - TanStack/table:examples/alpine/basic-create-table\n - TanStack/table:packages/alpine-table/src/index.ts\n - TanStack/table:docs/framework/alpine/guide/composable-tables.md\n - TanStack/table:examples/alpine/basic-app-table\n - TanStack/table:packages/alpine-table/src/createTableHook.ts\n---\n\nLoad `intent load @tanstack/table-core#core` first for the headless model, stable inputs, and column inference.\n\n## Setup\n\n```ts\nimport Alpine from 'alpinejs'\nimport {\n FlexRender,\n createTable,\n tableFeatures,\n type ColumnDef,\n} from '@tanstack/alpine-table'\n\ntype Person = { id: string; name: string }\nconst features = tableFeatures({})\nconst columns: Array> = [\n { accessorKey: 'name', header: 'Name' },\n]\n\nAlpine.data('peopleTable', () => {\n const local = Alpine.reactive({\n data: [{ id: '1', name: 'Ada' }] as Array,\n })\n const table = createTable({\n features,\n columns,\n get data() {\n return local.data\n },\n getRowId: (row) => row.id,\n })\n\n return { table, FlexRender }\n})\n\nwindow.Alpine = Alpine\nAlpine.start()\n```\n\nRender real table structure with `x-for`; use `x-html=\"FlexRender({ header })\"` or `x-html=\"FlexRender({ cell })\"` only for renderer output.\n\n## Construction and rendering\n\nWrap changing data in `Alpine.reactive` and expose it with `get data()`. The adapter tracks option getters; `data: local.data` captures a snapshot and does not follow later array replacements. Keep static columns and features outside getters.\n\nThe returned table is a reactive proxy. Read Table APIs directly in `x-text`, `x-for`, `x-if`, or bound attributes; no Subscribe component is needed.\n\nBuild table structure and interactive controls as real Alpine markup. Use `x-html=\"FlexRender({ header })\"` or `x-html=\"FlexRender({ cell })\"` for renderer output. Alpine does not initialize directives inside `x-html` strings; use templates or `Alpine.bind` bundles for buttons and inputs.\n\n## Read for the task\n\n- When adding or configuring optional features, load `intent load @tanstack/table-core#table-features` and read only references for the requested behavior.\n- For state ownership or reactive reads, read [table-state](../table-state/SKILL.md).\n- When tables share features, defaults, or reusable UI, read [create-table-hook](references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/alpine-table/dist/index.d.ts`, `createTable.d.ts`, and `reactivity.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n","packages/alpine-table/skills/getting-started/references/create-table-hook.md":"# Alpine reusable table hooks\n\nRead when multiple Alpine tables share features, defaults, or rendering conventions. Keep standalone construction for tables without shared conventions. For controlled state or reactive reads, read [table-state](../../table-state/SKILL.md).\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```ts\nimport Alpine from 'alpinejs'\nimport { createTableHook, tableFeatures } from '@tanstack/alpine-table'\n\ntype Person = { id: string; name: string }\nconst { createAppTable, createAppColumnHelper } = createTableHook({\n features: tableFeatures({}),\n getRowId: (row: Person) => row.id,\n})\nconst helper = createAppColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n\nAlpine.data('peopleTable', () => {\n const local = Alpine.reactive({\n data: [{ id: '1', name: 'Ada' }] as Array,\n })\n const table = createAppTable({\n columns,\n get data() {\n return local.data\n },\n })\n return { table }\n})\n```\n\n## Core patterns\n\n### Share infrastructure, keep data local\n\nBind features, row models, row IDs, and defaults in the factory. Each Alpine component passes its own columns, reactive data getter, and controlled state.\n\n### Reuse markup with Alpine primitives\n\nUse real templates and `Alpine.bind` bundles for interactive reuse. `createTableHook` intentionally returns no component registry or context hooks.\n\n### Use the helper to retain feature inference\n\nColumns from `createAppColumnHelper()` know the factory's registered features without userland feature generics.\n\n## Common mistakes\n\n### HIGH Assuming a JSX component registry\n\nWrong: pass `cellComponents` or `tableComponents` to Alpine `createTableHook`.\n\nCorrect: share features/defaults with the hook and build reusable interactive markup with Alpine templates or bind bundles.\n\nThe Alpine hook returns only app features, a column helper, and createAppTable.\n\nSource: TanStack/table:packages/alpine-table/src/createTableHook.ts\n\n### HIGH Reactive data captured as a snapshot\n\nWrong: `createAppTable({ columns, data: local.data })` when the array will be replaced.\n\nCorrect: provide a `get data()` option.\n\nThe app factory delegates to Alpine createTable, whose option effect tracks getters.\n\nSource: TanStack/table:packages/alpine-table/src/createTable.ts\n\n## API discovery\n\nInspect `node_modules/@tanstack/alpine-table/dist/createTableHook.d.ts`; do not infer component/context APIs from React, Vue, Solid, Svelte, Angular, or Lit adapters.\n\n## Sources\n\n- `TanStack/table:docs/framework/alpine/guide/composable-tables.md`\n- `TanStack/table:examples/alpine/basic-app-table`\n- `TanStack/table:packages/alpine-table/src/createTableHook.ts`\n","packages/alpine-table/skills/table-state/SKILL.md":"---\nname: table-state\ndescription:\n Read and control Table v9 state in alpine. Use for tracked reads, subscriptions,\n controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/alpine-table'\n framework: alpine\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/alpine/guide/table-state.md\n - TanStack/table:examples/alpine/basic-create-table\n - TanStack/table:packages/alpine-table/src/createTable.ts\n---\n\nLoad `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules.\n\nAlpine's table proxy makes reads inside `x-text`, `x-for`, `x-if`, bound attributes, `x-effect`, and Alpine getters reactive. Event handlers read the current value when invoked. A captured value outside a binding does not become a continuing subscription, and there is no `table.Subscribe` component.\n\n## Controlled getter setup\n\n\n\n```ts\nimport Alpine from 'alpinejs'\nimport {\n createTable,\n rowPaginationFeature,\n tableFeatures,\n type PaginationState,\n} from '@tanstack/alpine-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nAlpine.data('pagedTable', () => {\n const local = Alpine.reactive<{ pagination: PaginationState }>({\n pagination: { pageIndex: 0, pageSize: 10 },\n })\n const table = createTable({\n features,\n columns,\n data,\n state: {\n get pagination() {\n return local.pagination\n },\n },\n onPaginationChange: (next) => {\n local.pagination =\n typeof next === 'function' ? next(local.pagination) : next\n },\n })\n return { table }\n})\n```\n\nRead `table.atoms.pagination.get().pageIndex` directly in an Alpine binding.\n\n## Reactive boundaries\n\n- A controlled slice needs a getter and callback. `state: { pagination: local.pagination }` captures the old object when the owner later replaces it.\n- Expose changing data through `get data()` and keep features, columns, and derived data stable outside reevaluated getters.\n- The proxy normally reevaluates all Table-reading bindings for every state change. A narrow atom read does not by itself narrow that broad invalidation.\n- For shared state, pass a stable external atom through `atoms`; omit controlled state and its callback for the same slice.\n\n## Read for the task\n\nFor advanced reactive boundaries, shared atoms, or detailed subscription examples, read [reactivity](references/reactivity.md). For construction or rendering setup, read [getting-started](../getting-started/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/alpine-table/dist/index.d.ts`, `createTable.d.ts`, and `reactivity.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n","packages/alpine-table/skills/table-state/references/reactivity.md":"# Alpine Table reactivity\n\nRead for Alpine subscription boundaries, shared state, or updates that require more than the default rendering behavior.\n\nThis reference inherits the version of its owning skill.\n\n## Gate broad binding updates\n\nBy default, the table proxy subscribes to the full store and increments one reactive version counter. Every binding that touches the table depends on that counter. A narrow atom read selects a value but does not isolate the binding from other state updates.\n\nThe optional second `createTable` argument shallow-compares selected state before bumping the counter. Options changes, including new data, still reevaluate bindings. Select every slice that the affected bindings must observe.\n\nFor high-frequency updates such as column resizing, use `() => ({})` only after explicit `table.atoms..subscribe()` side effects own the required updates and their cleanup. Otherwise, opting out freezes state-driven bindings.\n\n## Controlled getters and external atoms\n\nWhen `Alpine.reactive` owns a slice, keep a getter in `state` and resolve every callback into the reactive owner. Capturing `state: { pagination: local.pagination }` misses later object replacements.\n\nWhen an external atom owns the slice, pass it in `atoms` and write it through feature APIs or the external atom. Supplying controlled `state` for the same slice does not create two-way synchronization; the atom takes precedence.\n\n## Read inside the binding\n\nUse `x-text=\"table.atoms.pagination.get().pageIndex + 1\"` or read Table APIs inside an Alpine getter. Event handlers can read the current value directly. A value copied outside tracked execution stays a snapshot.\n\nThe adapter has no `table.Subscribe` component. Keep interactive markup in Alpine templates and use the reactive table proxy there.\n\n## API discovery\n\nInspect `node_modules/@tanstack/alpine-table/dist/index.d.ts`, `createTable.d.ts`, and `reactivity.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/alpine/guide/table-state.md`\n- `TanStack/table:examples/alpine/basic-create-table`\n- `TanStack/table:packages/alpine-table/src/createTable.ts`\n","packages/angular-table-devtools/skills/devtools/SKILL.md":"---\nname: devtools\ndescription: >\n Register Angular Table v9 instances with injectTanStackTableDevtools inside injection context. Load for reactive table registration, required options.key, enabled or undefined tables, cleanup, Angular isDevMode gating, or explicit production exports.\nmetadata:\n type: framework\n library: '@tanstack/angular-table-devtools'\n framework: angular\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\n - '@tanstack/table-devtools#devtools'\nsources:\n - 'TanStack/table:docs/devtools.md'\n - 'TanStack/table:packages/angular-table-devtools/src/index.ts'\n - 'TanStack/table:packages/angular-table-devtools/src/injectTanStackTableDevtools.ts'\n---\n\nThis skill builds on @tanstack/table-core#core and @tanstack/table-devtools#devtools.\n\n## Setup\n\n```ts\nimport { Component } from '@angular/core'\nimport { injectTable, tableFeatures } from '@tanstack/angular-table'\nimport { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'\n\nconst features = tableFeatures({})\nconst columns = [{ accessorKey: 'id' }]\nconst data: Array<{ id: string }> = []\n\n@Component({ selector: 'users-table', template: 'Users table registered' })\nexport class UsersTable {\n readonly table = injectTable(() => ({\n key: 'users-table',\n features,\n columns,\n data,\n }))\n\n constructor() {\n injectTanStackTableDevtools(() => ({ table: this.table }))\n }\n}\n```\n\nProvide the Angular TanStack Devtools host once at application configuration level as documented in `docs/devtools.md`.\n\n## Hooks and Components\n\nThe injector options function may return `table: undefined` or an `enabled` function to remove/disable registration reactively.\n\n## Common Mistakes\n\n### CRITICAL Injector called outside context\n\nWrong: call `injectTanStackTableDevtools` from an arbitrary callback after bootstrap.\n\nCorrect: call it in a component/service field initializer or constructor injection context.\n\nThe adapter uses Angular injection and effects for lifecycle cleanup.\n\nSource: TanStack/table:packages/angular-table-devtools/src/injectTanStackTableDevtools.ts\n\n### HIGH Missing table key\n\nWrong: register an otherwise valid table without `options.key`.\n\nCorrect: assign a stable unique key before injection registration.\n\nCore registration logs an error and skips keyless targets.\n\nSource: TanStack/table:packages/table-devtools/src/tableTarget.ts\n\n### MEDIUM isDevMode no-op misunderstood\n\nWrong: expect default Angular exports to render production Devtools.\n\nCorrect: keep standard setup development-only; use `/production` only when explicitly requested.\n\nThe package index switches exports using Angular `isDevMode()`.\n\nSource: TanStack/table:packages/angular-table-devtools/src/index.ts\n\n## API Discovery\n\nInspect `node_modules/@tanstack/angular-table-devtools/dist/index.d.ts` and `injectTanStackTableDevtools.d.ts` for current injection options.\n","packages/angular-table/README.md":"","packages/angular-table/skills/getting-started/SKILL.md":"---\nname: getting-started\ndescription:\n Create and render Table v9 with the angular adapter. Route reusable createTableHook\n components, Query and Virtual integration, and framework setup; use table-state for reactive\n ownership.\nmetadata:\n type: framework\n library: '@tanstack/angular-table'\n framework: angular\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/angular/guide/migrating.md\n - TanStack/table:docs/framework/angular/guide/flex-render.md\n - TanStack/table:examples/angular/basic-inject-table\n - TanStack/table:packages/angular-table/src/index.ts\n - TanStack/table:docs/framework/angular/guide/composable-tables.md\n - TanStack/table:examples/angular/composable-tables\n - TanStack/table:packages/angular-table/src/helpers/createTableHook.ts\n - TanStack/table:examples/angular/with-tanstack-query\n - TanStack/table:docs/framework/angular/guide/table-state.md\n - TanStack/table:docs/framework/angular/guide/pagination.md\n - TanStack/table:docs/framework/angular/guide/virtualization.md\n - TanStack/table:examples/angular/virtualized-rows\n - TanStack/table:examples/angular/virtualized-columns\n - TanStack/table:examples/angular/virtualized-infinite-scrolling\n---\n\nLoad `intent load @tanstack/table-core#core` first for the headless model, stable inputs, and column inference.\n\n## Setup\n\n```ts\nimport { Component, signal } from '@angular/core'\nimport { FlexRender, injectTable, tableFeatures } from '@tanstack/angular-table'\n\ntype Person = { name: string; age: number }\nconst features = tableFeatures({})\nconst columns = [\n { accessorKey: 'name', header: 'Name' },\n { accessorKey: 'age', header: 'Age' },\n]\n\n@Component({\n selector: 'app-table',\n imports: [FlexRender],\n template: `\n \n @for (row of table.getRowModel().rows; track row.id) {\n \n @for (cell of row.getAllCells(); track cell.id) {\n \n }\n \n }\n \n
\n {{\n value\n }}\n
`,\n})\nexport class TableComponent {\n readonly data = signal([{ name: 'Ada', age: 36 }])\n readonly table = injectTable(() => ({ features, columns, data: this.data() }))\n}\n```\n\n## Construction and rendering\n\nCall `injectTable` in a component, directive, or service field initializer, or another valid Angular injection context. The adapter binds its cleanup to that context.\n\nSignals read in the options initializer rerun it and call `setOptions`. Keep features, factories, and columns outside the initializer; return stable data references and derive transformed data with `computed` outside it.\n\nImport `FlexRender` for `*flexRender`, `*flexRenderCell`, `*flexRenderHeader`, and `*flexRenderFooter`. Render values can be primitives, `TemplateRef`, component types, or `flexRenderComponent(...)`. Use `flexRenderComponent` for Angular component types; ordinary render functions are already supported directly.\n\n## Read for the task\n\n- When adding or configuring optional features, load `intent load @tanstack/table-core#table-features` and read only references for the requested behavior.\n- For state ownership or reactive reads, read [table-state](../table-state/SKILL.md).\n- When tables share features, defaults, or reusable UI, read [create-table-hook](references/create-table-hook.md).\n- When Query supplies data or server processing, read [with-tanstack-query](references/with-tanstack-query.md).\n- When virtualizing rows or columns, read [with-tanstack-virtual](references/with-tanstack-virtual.md).\n- When upgrading v8 code, read [migrate-v8-to-v9](../migrate-v8-to-v9/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`.\n","packages/angular-table/skills/getting-started/references/create-table-hook.md":"# Angular reusable table hooks\n\nRead when multiple Angular tables share features, defaults, or rendering conventions. Keep standalone construction for tables without shared conventions. For controlled state or reactive reads, read [table-state](../../table-state/SKILL.md).\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```ts\nimport {\n createTableHook,\n rowSortingFeature,\n tableFeatures,\n} from '@tanstack/angular-table'\n\nexport const {\n injectAppTable,\n createAppColumnHelper,\n injectTableContext,\n injectTableCellContext,\n injectTableHeaderContext,\n} = createTableHook({\n features: tableFeatures({ rowSortingFeature }),\n})\n```\n\n```ts\nconst helper = createAppColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n\nexport class PeopleTable {\n readonly table = injectAppTable(() => ({ columns, data: this.data() }))\n}\n```\n\n## Core patterns\n\n### Consume typed DI context in registered components\n\n```ts\nexport class NameCell {\n readonly cell = injectTableCellContext()\n readonly value = computed(() => this.cell().getValue())\n}\n```\n\nUse the matching table/header/cell injector instead of threading context props through reusable components.\n\n### Distinguish component types from render functions\n\nRegister either an Angular component type or a render function. Return component types directly when FlexRender should set context inputs; use `flexRenderComponent(Component, options)` only for explicit inputs/outputs/injector/bindings/directives.\n\n## Common mistakes\n\n### CRITICAL Calling app helpers outside DI\n\nWrong:\n\n```ts\nexport function make() {\n return injectAppTable(() => options)\n}\n```\n\nCorrect:\n\n```ts\nexport class PeopleTable {\n readonly table = injectAppTable(() => options())\n}\n```\n\nBoth app-table construction and returned context injectors require Angular injection context.\n\nSource: `packages/angular-table/src/helpers/createTableHook.ts`\n\n### HIGH Prop drilling registered context\n\nWrong:\n\n```ts\ncell: (ctx) => flexRenderComponent(NameCell, { inputs: { cell: ctx.cell } })\n```\n\nCorrect:\n\n```ts\ncell: (ctx) => ctx.cell.NameCell\n```\n\nRegistered components can consume the app hook's typed cell context directly.\n\nSource: `docs/framework/angular/guide/composable-tables.md`\n\n### HIGH Wrapping a function as a component\n\nWrong:\n\n```ts\nflexRenderComponent((props) => props.cell.getValue())\n```\n\nCorrect:\n\n```ts\n;(props) => props.cell.getValue()\n```\n\n`flexRenderComponent` validates an Angular component type; plain render functions are already valid render content.\n\nSource: `packages/angular-table/src/flex-render/flexRenderComponent.ts`\n\n## API discovery\n\nInspect `node_modules/@tanstack/angular-table/dist/types/` for exact DI and rendering contracts in the bundled public API.\n\n## Sources\n\n- `TanStack/table:docs/framework/angular/guide/composable-tables.md`\n- `TanStack/table:examples/angular/composable-tables`\n- `TanStack/table:packages/angular-table/src/helpers/createTableHook.ts`\n","packages/angular-table/skills/getting-started/references/with-tanstack-query.md":"# Angular Table with TanStack Query\n\nRead when Angular Query supplies Table data or owns server-side processing. Load `intent load @tanstack/table-core#table-features` and read its client/server reference to decide which stages the server owns. Read [table-state](../../table-state/SKILL.md) for the signal or atom wiring used by the query key.\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```ts\nimport {\n injectQuery,\n keepPreviousData,\n} from '@tanstack/angular-query-experimental'\nimport { Component, signal } from '@angular/core'\nimport {\n injectTable,\n rowPaginationFeature,\n tableFeatures,\n} from '@tanstack/angular-table'\n\ntype Person = { id: string; name: string }\ntype PersonPage = { rows: Person[]; rowCount: number }\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst EMPTY_ROWS: Person[] = []\n\n@Component({\n selector: 'people-table',\n template: `{{ table.getRowModel().rows.length }} rows`,\n})\nexport class PeopleTable {\n readonly pagination = signal({ pageIndex: 0, pageSize: 20 })\n readonly query = injectQuery(() => ({\n queryKey: [\n 'people',\n this.pagination().pageIndex,\n this.pagination().pageSize,\n ],\n queryFn: (): Promise =>\n fetch(\n `/api/people?page=${this.pagination().pageIndex}&size=${this.pagination().pageSize}`,\n ).then((r) => r.json()),\n placeholderData: keepPreviousData,\n }))\n readonly table = injectTable(() => ({\n features,\n columns,\n data: this.query.data()?.rows ?? EMPTY_ROWS,\n rowCount: this.query.data()?.rowCount ?? 0,\n manualPagination: true,\n state: { pagination: this.pagination() },\n onPaginationChange: (next) =>\n typeof next === 'function'\n ? this.pagination.update(next)\n : this.pagination.set(next),\n }))\n}\n```\n\nProvide Angular Query's QueryClient in the application injection context before constructing this component. The server response contains the requested `rows` and total `rowCount`.\n\n## Core patterns\n\n### Track every server-owned input\n\nRead pagination, sorting, and filtering signals inside `injectQuery(() => ...)` and include them in the query key. Return data already processed for each manual stage.\n\n### Keep Query data authoritative\n\nRead the Query signal directly in `injectTable`. Create another signal only for a deliberate editable draft with an explicit cache synchronization policy.\n\n## Common mistakes\n\n### HIGH Capturing query inputs outside tracking\n\nWrong:\n\n```ts\nconst page = this.pagination().pageIndex\nreadonly query = injectQuery(() => ({ queryKey: ['people', page], queryFn }))\n```\n\nCorrect:\n\n```ts\nreadonly query = injectQuery(() => ({ queryKey: ['people', this.pagination().pageIndex], queryFn }))\n```\n\nSignal reads inside the options function establish refetch dependencies.\n\nSource: `examples/angular/with-tanstack-query/src/app/app.ts`\n\n### HIGH Expecting manual mode to request\n\nWrong:\n\n```ts\ninjectTable(() => ({ features, columns, data, manualPagination: true }))\n```\n\nCorrect:\n\n```ts\ninjectTable(() => ({\n features,\n columns,\n data: this.query.data()?.rows ?? EMPTY_ROWS,\n manualPagination: true,\n}))\n```\n\nManual flags only bypass client row processing; Query performs network work.\n\nSource: `examples/angular/with-tanstack-query/src/app/app.ts`\n\n### HIGH Omitting total counts\n\nWrong:\n\n```ts\n{ data: this.query.data()?.rows ?? EMPTY_ROWS, manualPagination: true }\n```\n\nCorrect:\n\n```ts\n{ data: this.query.data()?.rows ?? EMPTY_ROWS, rowCount: this.query.data()?.rowCount ?? 0, manualPagination: true }\n```\n\nTable needs `rowCount` or `pageCount` to constrain navigation across server pages.\n\nSource: `docs/framework/angular/guide/pagination.md`\n\n## API discovery\n\nInspect installed `@tanstack/angular-table/dist/types/`, the relevant core feature declarations, and installed Angular Query declarations for the exact `injectQuery` package/version contract.\n\n## Sources\n\n- `TanStack/table:examples/angular/with-tanstack-query`\n- `TanStack/table:docs/framework/angular/guide/table-state.md`\n- `TanStack/table:docs/framework/angular/guide/pagination.md`\n","packages/angular-table/skills/getting-started/references/with-tanstack-virtual.md":"# Angular Table with TanStack Virtual\n\nRead when rendering a large Angular table with TanStack Virtual. Virtual operates on the final Table model. Read [table-state](../../table-state/SKILL.md) if model counts or rendered state stop updating.\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```ts\nimport { Component, computed, viewChild } from '@angular/core'\nimport { injectTable, tableFeatures } from '@tanstack/angular-table'\nimport { injectVirtualizer } from '@tanstack/angular-virtual'\nimport type { ElementRef } from '@angular/core'\n\nconst features = tableFeatures({})\nconst columns = [{ accessorKey: 'name' }]\nconst data = Array.from({ length: 1000 }, (_, index) => ({\n id: String(index),\n name: `Person ${index}`,\n}))\n\n@Component({\n selector: 'virtual-table',\n template: `
\n
\n @for (item of virtualRows(); track item.key) {\n \n {{ rows()[item.index]!.getValue('name') }}\n
\n }\n
\n `,\n})\nexport class VirtualTable {\n readonly table = injectTable(() => ({\n features,\n columns,\n data,\n getRowId: (row) => row.id,\n }))\n readonly scrollElement =\n viewChild>('scrollElement')\n readonly rows = computed(() => this.table.getRowModel().rows)\n readonly rowVirtualizer = injectVirtualizer(() => ({\n count: this.rows().length,\n scrollElement: this.scrollElement()?.nativeElement,\n estimateSize: () => 34,\n getItemKey: (index) => this.rows()[index]!.id,\n overscan: 5,\n }))\n readonly virtualRows = computed(() => this.rowVirtualizer.getVirtualItems())\n readonly totalSize = computed(() => this.rowVirtualizer.getTotalSize())\n}\n```\n\n## Core patterns\n\n### Derive reactive models\n\nUse `computed(() => table.getRowModel().rows)` for rows. For column virtualization, register `columnVisibilityFeature` before reading `computed(() => table.getVisibleLeafColumns())`; register `columnSizingFeature` when deriving widths from sizing APIs. `injectVirtualizer` tracks signal reads in its initializer and requires injection context.\n\n### Own the layout contract\n\nGive the scroll element bounded overflow, create a total-size spacer, and translate or measure each virtual item. Use grid/flex widths for dynamic rows/columns and keep sticky headers inside the correct scroll geometry.\n\n### Gate infinite fetches\n\nWhen the last virtual item approaches fetched length, fetch only if more server rows exist and a request is not active. Manual sorting requires server-sorted pages and a reset/refetch policy.\n\n## Common mistakes\n\n### CRITICAL Constructing outside injection context\n\nWrong:\n\n```ts\nexport function virtualize(options) {\n return injectVirtualizer(() => options)\n}\n```\n\nCorrect:\n\n```ts\nconst features = tableFeatures({})\nconst columns = [{ accessorKey: 'name' }]\nconst data = Array.from({ length: 1000 }, (_, index) => ({\n id: String(index),\n name: `Person ${index}`,\n}))\n\n@Component({\n selector: 'virtual-table',\n template: `
\n
\n @for (item of virtualRows(); track item.key) {\n \n {{ rows()[item.index]!.getValue('name') }}\n
\n }\n
\n `,\n})\nexport class VirtualTable {\n readonly table = injectTable(() => ({\n features,\n columns,\n data,\n getRowId: (row) => row.id,\n }))\n readonly virtualizer = injectVirtualizer(() => options())\n}\n```\n\nThe Angular virtualizer follows DI lifecycle rules just like `injectTable`.\n\nSource: `examples/angular/virtualized-rows/src/app/app.ts`\n\n### HIGH Virtualizing raw data\n\nWrong:\n\n```ts\nreadonly rows = computed(() => this.data())\n```\n\nCorrect:\n\n```ts\nreadonly rows = computed(() => this.table.getRowModel().rows)\n```\n\nRaw data bypasses Table filtering, sorting, expansion, grouping, and pagination.\n\nSource: `docs/framework/angular/guide/virtualization.md`\n\n### HIGH Forgetting spacer and transforms\n\nWrong:\n\n```html\n@for (item of virtualRows(); track item.key) {\n
{{ rows()[item.index].id }}
\n}\n```\n\nCorrect:\n\n```html\n
\n @for (item of virtualRows(); track item.key) {\n \n {{ rows()[item.index]!.getValue('name') }}\n
\n }\n\n```\n\nVirtual computes ranges and sizes but does not apply DOM geometry, sticky CSS, or column widths.\n\nSource: `examples/angular/virtualized-columns/src/app/app.ts`\n\n## API discovery\n\nInspect installed `@tanstack/angular-table/dist/types/`, installed `@tanstack/angular-virtual/dist/`, and the maintained Angular examples for current row, column, measurement, and infinite patterns.\n\n## Sources\n\n- `TanStack/table:docs/framework/angular/guide/virtualization.md`\n- `TanStack/table:examples/angular/virtualized-rows`\n- `TanStack/table:examples/angular/virtualized-columns`\n- `TanStack/table:examples/angular/virtualized-infinite-scrolling`\n","packages/angular-table/skills/migrate-v8-to-v9/SKILL.md":"---\nname: migrate-v8-to-v9\ndescription:\n Migrate angular Table v8 to v9. Audit framework construction, rendering, state,\n and app hooks, with shared API changes in the core migration skill.\nmetadata:\n type: lifecycle\n library: '@tanstack/angular-table'\n framework: angular\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#migrate-v8-to-v9'\nsources:\n - TanStack/table:docs/framework/angular/guide/migrating.md\n - TanStack/table:packages/angular-table/src/index.ts\n - TanStack/table:examples/angular/basic-inject-table\n---\n\nLoad `intent load @tanstack/table-core#migrate-v8-to-v9` first and audit its entire shared checklist. It owns feature registration, row-model slots, state/reset changes, prototype methods, logical pinning, sizing/resizing, sorting, selection, helpers, and TypeScript mappings.\n\n## Framework prerequisites\n\nAngular 19 or newer is required (`@angular/core >=19`).\n\n## Angular migration checklist\n\n- [ ] Replace `createAngularTable` with `injectTable` in a valid Angular injection context.\n- [ ] Hoist features, columns, and factories outside the signal-tracked initializer.\n- [ ] Read state through signal-backed atoms; wire controlled signals with value-or-updater callbacks or stable Angular Store atoms.\n- [ ] Import current FlexRender directives, distinguish render functions from component types, and preserve instance-method receivers.\n- [ ] Audit repeated options and component registries for the optional `createTableHook`/`injectAppTable` path.\n\n## Apply the affected mappings\n\nRead [adapter-migration](references/adapter-migration.md) when changing construction, rendering, state, or app hooks. Read the relevant core migration references for each affected shared API; this adapter checklist does not replace that audit.\n\nFor complete v9 construction examples, read [getting-started](../getting-started/SKILL.md). For reactive state repairs, read [table-state](../table-state/SKILL.md).\n\n## Final checks\n\n- [ ] All shared core migration checks and affected mappings have been applied.\n- [ ] The framework checklist above passes with the current adapter declarations.\n- [ ] Model inputs remain stable and state changes reach their reactive owner.\n\n## API discovery\n\nInspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`.\n","packages/angular-table/skills/migrate-v8-to-v9/references/adapter-migration.md":"# Angular v8-to-v9 adapter migration\n\nRead when applying the Angular construction, state, rendering, or reusable-hook checks. Complete the shared audit with `intent load @tanstack/table-core#migrate-v8-to-v9`; its references own the shared feature and type rename inventories.\n\nThis reference inherits the version of its owning skill.\n\n## Framework requirements\n\nAngular 19 or newer is required (`@angular/core >=19`).\n\n## Construction\n\n| v8 | v9 |\n| ----------------------------------- | -------------------------------------------------------------- |\n| `createAngularTable(() => options)` | `injectTable(() => options)` in injection context |\n| `table.getState().sorting` | `table.atoms.sorting.get()` inside tracked Angular consumption |\n\nThe initializer reruns when signals read inside it change and calls `setOptions`. Keep features and columns stable outside it. Construct in a component/directive/service field or another valid injection context so lifecycle cleanup is registered correctly.\n\n## Angular state migration\n\n- `table.getState().sorting` becomes `table.atoms.sorting.get()` for narrow signal-backed reads.\n- Use `table.store.get()` only for a full flat snapshot/debug output.\n- Derive selected slices with Angular `computed`; use `shallow` equality for recreated object/array slices when appropriate.\n- Controlled Angular signals are read in `state` and updated through matching `on[State]Change` callbacks; resolve value-or-function updaters.\n- Prefer external atoms from `@tanstack/angular-store` through `atoms` for app-owned shared slices. Never provide both an atom and `state` for one slice.\n\n## Angular rendering and composition\n\n- Import `FlexRender`/the current `*flexRender` directives from the adapter.\n- Prefer `*flexRenderCell=\"cell; let value\"`, `*flexRenderHeader=\"header; let value\"`, and `*flexRenderFooter=\"footer; let value\"`; they choose the definition and context automatically.\n- General `*flexRender` supports primitives, `TemplateRef`, component types, and `flexRenderComponent(...)` wrappers.\n- Column render functions run in an Angular injection context and may call `inject()` or use signals.\n- Components mounted by FlexRender can call `injectFlexRenderContext()` for the render props.\n- Use `flexRenderComponent(Component, { inputs, outputs, injector, bindings, directives })` for explicit component configuration; creation-time `bindings`/`directives` require the supported Angular version.\n- `tableOptions(...)` composes partial options and may omit data, columns, or features until final assembly.\n- `createTableHook` is optional for repeated application conventions; it returns `injectAppTable` and a feature-bound `createAppColumnHelper`.\n\n## Related task guidance\n\nFor a full construction example, read [getting-started](../../getting-started/SKILL.md). For tracked reads and controlled updates, read [table-state](../../table-state/SKILL.md). When creating a reusable app factory, read [create-table-hook](../../getting-started/references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/angular/guide/migrating.md`\n- `TanStack/table:packages/angular-table/src/index.ts`\n- `TanStack/table:examples/angular/basic-inject-table`\n","packages/angular-table/skills/table-state/SKILL.md":"---\nname: table-state\ndescription:\n Read and control Table v9 state in angular. Use for tracked reads, subscriptions,\n controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/angular-table'\n framework: angular\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/angular/guide/table-state.md\n - TanStack/table:examples/angular/basic-external-state\n - TanStack/table:packages/angular-table/src/injectTable.ts\n---\n\nLoad `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules.\n\nAngular-backed atom reads participate in tracking inside templates, `computed`, and `effect`. A value captured outside those contexts is only a snapshot. Use `computed` for derivation or equality control; wrapping an atom is not required to make it reactive.\n\n## Controlled signal setup\n\n\n\n```ts\nimport { Component, signal } from '@angular/core'\nimport {\n injectTable,\n rowPaginationFeature,\n tableFeatures,\n} from '@tanstack/angular-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\n@Component({\n selector: 'page-status',\n template: ``,\n})\nexport class PageStatus {\n readonly pagination = signal({ pageIndex: 0, pageSize: 20 })\n readonly table = injectTable(() => ({\n features,\n columns,\n data,\n state: { pagination: this.pagination() },\n onPaginationChange: (next) =>\n typeof next === 'function'\n ? this.pagination.update(next)\n : this.pagination.set(next),\n }))\n}\n```\n\n## Reactive boundaries\n\n- Construct in Angular injection context. Signal writes used by the initializer rerun it and call `setOptions`; hoist features and columns and keep data references stable.\n- Supply both `state.pagination` and `onPaginationChange` when a signal owns the slice. Resolve updater functions with `.update(next)` instead of storing the function with `.set(next)`.\n- For shared state, create a stable atom with `@tanstack/angular-store` and pass it through `atoms`. Its writes do not need to flow through a controlled signal in the initializer.\n- Use `table.store.get()` for the flat state. Prefer `table.atoms..get()` for narrow tracked reads.\n\n## Read for the task\n\nFor advanced reactive boundaries, shared atoms, or detailed subscription examples, read [reactivity](references/reactivity.md). For construction or rendering setup, read [getting-started](../getting-started/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`.\n","packages/angular-table/skills/table-state/references/reactivity.md":"# Angular Table reactivity\n\nRead for Angular subscription boundaries, shared state, or updates that require more than the default rendering behavior.\n\nThis reference inherits the version of its owning skill.\n\n## Share state through an external atom\n\n\n\n```ts\nimport { Component, computed } from '@angular/core'\nimport { createAtom } from '@tanstack/angular-store'\nimport {\n injectTable,\n rowPaginationFeature,\n tableFeatures,\n type PaginationState,\n} from '@tanstack/angular-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\n@Component({ selector: 'page-status', template: `Page {{ pageIndex() + 1 }}` })\nexport class PageStatus {\n readonly paginationAtom = createAtom({\n pageIndex: 0,\n pageSize: 20,\n })\n readonly table = injectTable(() => ({\n features,\n columns,\n data,\n atoms: { pagination: this.paginationAtom },\n }))\n readonly pageIndex = computed(\n () => this.table.atoms.pagination.get().pageIndex,\n )\n}\n```\n\nThe atom can feed Query or other consumers without reading a controlled signal in the Table initializer. Table feature APIs write the external atom directly; omit `onPaginationChange` for this owner.\n\n## Derive values with equality control\n\nUse Angular `computed` when deriving a value or applying custom equality. For a recreated object or array result, use the adapter's `shallow` comparator when appropriate. A direct template atom read is already signal-reactive; nested `computed(() => computed(... )())` adds no tracking benefit.\n\nKeep static features, column factories, and row-model factories outside the initializer. Signal reads inside it establish dependencies, so a controlled pagination write reruns the initializer and calls `setOptions`.\n\n## Controlled updater mistakes\n\nWrong: `onPaginationChange: next => this.pagination.set(next)`.\n\nCorrect: use `typeof next === 'function' ? this.pagination.update(next) : this.pagination.set(next)`. Storing the updater itself corrupts the signal's state shape.\n\nUse one owner for each slice. An external atom takes precedence over `state` and starting values; those options are not synchronized fallback owners.\n\n## API discovery\n\nInspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/angular/guide/table-state.md`\n- `TanStack/table:examples/angular/basic-external-state`\n- `TanStack/table:packages/angular-table/src/injectTable.ts`\n","packages/ember-table/README.md":"","packages/ember-table/skills/getting-started/SKILL.md":"---\nname: getting-started\ndescription:\n Create and render Table v9 with the ember adapter. Route reusable createTableHook\n defaults, and framework setup; use table-state for reactive ownership.\nmetadata:\n type: framework\n library: '@tanstack/ember-table'\n framework: ember\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/ember/quick-start.md\n - TanStack/table:examples/ember/basic-table\n - TanStack/table:packages/ember-table/src/index.ts\n - TanStack/table:packages/ember-table/src/use-table.ts\n - TanStack/table:packages/ember-table/src/FlexRender.gts\n - TanStack/table:docs/framework/ember/guide/composable-tables.md\n - TanStack/table:examples/ember/basic-app-table\n - TanStack/table:packages/ember-table/src/create-table-hook.ts\n---\n\nLoad `intent load @tanstack/table-core#core` first for the headless model, stable inputs, and column inference.\n\nEmber 5.8 or newer requires Embroider or ember-auto-import v2. Prefer `.gts` or `.gjs` template-tag components with Glint.\n\n## Setup\n\n```gts\nimport Component from '@glimmer/component'\nimport { tracked } from '@glimmer/tracking'\nimport {\n FlexRenderCell,\n createColumnHelper,\n tableFeatures,\n useTable,\n type Cell,\n type Row,\n} from '@tanstack/ember-table'\n\ntype Person = { id: string; name: string }\n\nconst features = tableFeatures({})\nconst columnHelper = createColumnHelper()\nconst columns = columnHelper.columns([\n columnHelper.accessor('name', { header: 'Name' }),\n])\nconst initialData: Person[] = [{ id: '1', name: 'Ada' }]\nconst getRowId = (row: Person) => row.id\n\nconst getAllCells = (\n row: Row,\n): Array> => row.getAllCells()\n\nexport default class PeopleTable extends Component {\n @tracked data = initialData\n\n table = useTable(this, () => ({\n features,\n columns,\n data: this.data,\n getRowId,\n }))\n\n get rows() {\n return this.table.getRowModel().rows\n }\n\n \n}\n```\n\n## Construction and rendering\n\n`useTable` takes an options thunk. Read tracked data inside it, and keep features, atoms, and columns stable. In a component, pass `this` as the owner to bind external-atom cleanup to the component lifecycle. The one-argument thunk form remains available for standalone tables.\n\nRead Table APIs in template-consumed getters. Column, row, cell, and header prototype methods require their receiver, so use a getter or module helper such as `getAllCells(row)` rather than an extracted method. Wrap event calls the same way.\n\nUse `FlexRenderCell`, `FlexRenderHeader`, and `FlexRenderFooter` for the matching object. Rendered components receive `@ctx` and optional `@options` through `flexRenderComponent(Component, options)`.\n\nWith `tableFeatures({})`, render `row.getAllCells()`. Register `columnVisibilityFeature` before switching to `row.getVisibleCells()`.\n\n## Read for the task\n\n- When adding or configuring optional features, load `intent load @tanstack/table-core#table-features` and read only references for the requested behavior.\n- For state ownership or reactive reads, read [table-state](../table-state/SKILL.md).\n- When tables share features, defaults, or reusable UI, read [create-table-hook](references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/ember-table/declarations/index.d.ts`, `use-table.d.ts`, `signal.d.ts`, and `FlexRender.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n","packages/ember-table/skills/getting-started/references/create-table-hook.md":"# Ember reusable table hooks\n\nRead when multiple Ember tables share features, defaults, or rendering conventions. Keep standalone construction for tables without shared conventions. For controlled state or reactive reads, read [table-state](../../table-state/SKILL.md).\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```gts\nimport Component from '@glimmer/component'\nimport { tracked } from '@glimmer/tracking'\nimport {\n createSortedRowModel,\n createTableHook,\n rowSortingFeature,\n sortFn_alphanumeric,\n tableFeatures,\n} from '@tanstack/ember-table'\n\nconst features = tableFeatures({\n rowSortingFeature,\n sortedRowModel: createSortedRowModel(),\n sortFns: { alphanumeric: sortFn_alphanumeric },\n})\n\nexport const { appFeatures, createAppColumnHelper, createAppTable } =\n createTableHook({\n features,\n enableSortingRemoval: false,\n })\n\ntype Person = { id: string; name: string }\nconst columnHelper = createAppColumnHelper()\nconst columns = columnHelper.columns([\n columnHelper.accessor('name', { header: 'Name' }),\n])\n\nexport default class PeopleTable extends Component {\n @tracked data: Person[] = []\n\n table = createAppTable(this, () => ({\n columns,\n data: this.data,\n }))\n}\n```\n\nCreate the hook and column helpers at stable module scope. Pass the component as the first `createAppTable` argument to bind external-atom cleanup to its lifecycle; the one-argument thunk form remains supported for standalone tables. `createAppTable` preserves the `useTable` options thunk, so tracked reads such as `this.data` remain reactive. Do not pass `features` again at the table call site; the factory owns the feature set and binds it into column inference.\n\n## Composition contract\n\n- Hook options supply stable shared `features` and default table options.\n- `createAppColumnHelper()` binds the feature type while inferring each row type.\n- `createAppTable(() => options)` merges shared defaults with table-specific options.\n- Table-specific options win over shared defaults, except that the factory remains the feature owner.\n- `appFeatures` exposes the exact registered feature set for helper types or reusable utilities.\n\nShared options intentionally exclude `columns`, `data`, and `state`. Keep model inputs and controlled state at each table call site; share conventions, not one mutable state object across unrelated tables.\n\nSharing `rowSortingFeature`, `sortedRowModel`, and sorting defaults gives every table sorting capability; it does not make their internal sorting state shared. The factory technically accepts a stable external atom in shared `atoms`, but that deliberately couples tables and their column IDs. Prefer independent state unless synchronized tables are the actual product behavior.\n\n## Render normally\n\nEmber's factory does not register `AppTable`, `AppCell`, `AppHeader`, context hooks, or reusable component registries. Continue rendering with `FlexRenderCell`, `FlexRenderHeader`, and `FlexRenderFooter`. Continue wrapping receiver-dependent v9 methods in Ember template helpers as described by [getting-started](../SKILL.md).\n\n## Common mistakes\n\n### HIGH Copying another adapter's component registry\n\nWrong: expect `table.AppTable`, `useTableContext`, or a `tableComponents` option from React, Solid, Svelte, or Lit examples.\n\nCorrect: use the normal Ember FlexRender components and pass the table through ordinary Ember composition when another component truly needs it.\n\nThe Ember hook shares features/defaults and type inference only.\n\n### HIGH Passing features per table\n\nWrong:\n\n```gts\ncreateAppTable(() => ({ features: otherFeatures, columns, data: this.data }))\n```\n\nCorrect: define a separate app hook when a table needs a different feature set. `createAppTable` omits `features` from its call-site type.\n\n### HIGH Recreating the hook or columns with tracked updates\n\nWrong: call `createTableHook`, `createAppColumnHelper`, or `columns(...)` inside a component getter or the `createAppTable` thunk.\n\nCorrect: create them once at module scope and let the table thunk read only changing inputs.\n\n### MEDIUM Sharing controlled state as a default\n\nThe hook options omit `state`. Put `state` and matching `on[State]Change` callbacks in each `createAppTable` thunk so every table has one clear owner per slice. Use a shared external atom only when tables intentionally coordinate the same compatible slice.\n\n### MEDIUM Repeating manual feature generics\n\nUse `createAppColumnHelper()`; do not thread `typeof features` through every column helper after the factory has already captured it.\n\n## API discovery\n\nInspect `node_modules/@tanstack/ember-table/declarations/create-table-hook.d.ts` for the installed factory return shape, omitted options, and merge precedence. Inspect `use-table.d.ts` for thunk reactivity and `node_modules/@tanstack/table-core/dist/features//` for the shared feature APIs. Do not infer Ember component/context behavior from another adapter's createTableHook.\n\n## Sources\n\n- `TanStack/table:docs/framework/ember/guide/composable-tables.md`\n- `TanStack/table:examples/ember/basic-app-table`\n- `TanStack/table:packages/ember-table/src/create-table-hook.ts`\n","packages/ember-table/skills/table-state/SKILL.md":"---\nname: table-state\ndescription:\n Read and control Table v9 state in ember. Use for tracked reads, subscriptions,\n controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/ember-table'\n framework: ember\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/ember/guide/table-state.md\n - TanStack/table:examples/ember/basic-external-atoms\n - TanStack/table:examples/ember/basic-external-state\n - TanStack/table:packages/ember-table/src/use-table.ts\n - TanStack/table:packages/ember-table/src/reactivity.ts\n - TanStack/table:packages/ember-table/src/signal.ts\n---\n\nLoad `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules.\n\nGlimmer tracks Table APIs, atom reads, and store-property reads inside template-consumed getters. A value cached outside tracked consumption is only a snapshot. There is no `table.Subscribe` or selector argument to `useTable`; `table.store.subscribe` is intentionally a no-op and cannot drive rendering.\n\n## Controlled tracked setup\n\n```gts\nimport Component from '@glimmer/component'\nimport { tracked } from '@glimmer/tracking'\nimport { on } from '@ember/modifier'\nimport {\n rowPaginationFeature,\n tableFeatures,\n useTable,\n type PaginationState,\n} from '@tanstack/ember-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nexport default class PageStatus extends Component {\n @tracked pagination: PaginationState = { pageIndex: 0, pageSize: 10 }\n table = useTable(this, () => ({\n features,\n columns,\n data,\n state: { pagination: this.pagination },\n onPaginationChange: (next) => {\n this.pagination =\n typeof next === 'function' ? next(this.pagination) : next\n },\n }))\n\n get pageNumber() {\n return this.table.atoms.pagination.get().pageIndex + 1\n }\n\n nextPage = () => this.table.nextPage()\n\n \n}\n```\n\n## Reactive boundaries\n\n- Read tracked values inside the options thunk and assign callback results back to their tracked owner. Mutating `this.pagination.pageIndex++` does not notify the thunk.\n- `features` and `atoms` are construction-time inputs. Updating ordinary live options does not replace the feature set or atom owners; create them once before `useTable`.\n- Pass the component as the owner for lifecycle cleanup when external atoms are used. The standalone one-argument thunk form remains supported.\n- Use the adapter's `createAtom` for external Glimmer-reactive ownership. Read it in a tracked getter and use feature APIs or the external atom to write.\n- Keep features, columns, and data stable. Call receiver-dependent methods through getters or helpers rather than passing extracted methods to templates.\n\n## Read for the task\n\nFor advanced reactive boundaries, shared atoms, or detailed subscription examples, read [reactivity](references/reactivity.md). For construction or rendering setup, read [getting-started](../getting-started/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/ember-table/declarations/index.d.ts`, `use-table.d.ts`, `signal.d.ts`, and `FlexRender.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n","packages/ember-table/skills/table-state/references/reactivity.md":"# Ember Table reactivity\n\nRead for Ember subscription boundaries, shared state, or updates that require more than the default rendering behavior.\n\nThis reference inherits the version of its owning skill.\n\n## Own shared state with an Ember atom\n\n```gts\nimport Component from '@glimmer/component'\nimport { on } from '@ember/modifier'\nimport {\n createAtom,\n rowPaginationFeature,\n tableFeatures,\n useTable,\n type PaginationState,\n} from '@tanstack/ember-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nexport default class SharedPage extends Component {\n paginationAtom = createAtom({ pageIndex: 0, pageSize: 10 })\n table = useTable(this, () => ({\n features,\n columns,\n data,\n atoms: { pagination: this.paginationAtom },\n }))\n\n get pageNumber() {\n return this.paginationAtom.get().pageIndex + 1\n }\n\n nextPage = () => this.table.nextPage()\n\n \n}\n```\n\nThe adapter re-exports `createAtom` with Glimmer-reactive reads. Feature APIs write through to that owner, so omit `onPaginationChange`. Supplying the component owner binds external-atom cleanup to its destruction. Use the one-argument thunk form only when no Ember owner is available.\n\n## Construction-time ownership\n\nThe options thunk updates ordinary live options from tracked reads, but features and external atom owners are fixed during construction. Keep them stable. Replacing an `atoms` object in a getter does not swap the table's owners.\n\n## Template tracking is pull-based\n\nRead `table.atoms..get()`, `table.store.state.`, or a Table API inside a template-consumed getter. There is no selector argument or `table.Subscribe`; `table.store.subscribe` is a no-op. Subscribe to a supplied external atom when a separate consumer actually needs push notifications.\n\n`table.getState()` is removed v8 API. Caching a value outside tracked consumption does not establish Glimmer tracking.\n\n## Controlled state pitfalls\n\nResolve value-or-updater callbacks and assign a fresh tracked value. `this.pagination.pageIndex++` mutates an untracked nested property. A no-op callback freezes the controlled slice. Prefer `table.setPageIndex(...)` to invoke the callback with the feature's update rules.\n\nAn external atom wins over controlled state. Writing an internal base atom cannot replace the external value; use the feature API or write the external owner.\n\n## API discovery\n\nInspect `node_modules/@tanstack/ember-table/declarations/index.d.ts`, `use-table.d.ts`, `signal.d.ts`, and `FlexRender.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/ember/guide/table-state.md`\n- `TanStack/table:examples/ember/basic-external-atoms`\n- `TanStack/table:examples/ember/basic-external-state`\n- `TanStack/table:packages/ember-table/src/use-table.ts`\n- `TanStack/table:packages/ember-table/src/reactivity.ts`\n- `TanStack/table:packages/ember-table/src/signal.ts`\n","packages/lit-table/README.md":"","packages/lit-table/skills/getting-started/SKILL.md":"---\nname: getting-started\ndescription:\n Create and render Table v9 with the lit adapter. Route reusable createTableHook\n components, Virtual integration, and framework setup; use table-state for reactive ownership.\nmetadata:\n type: framework\n library: '@tanstack/lit-table'\n framework: lit\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/lit/guide/migrating.md\n - TanStack/table:examples/lit/basic-table-controller\n - TanStack/table:packages/lit-table/src/index.ts\n - TanStack/table:docs/framework/lit/guide/composable-tables.md\n - TanStack/table:examples/lit/composable-tables\n - TanStack/table:packages/lit-table/src/createTableHook.ts\n - TanStack/table:docs/framework/lit/guide/virtualization.md\n - TanStack/table:examples/lit/virtualized-rows\n - TanStack/table:examples/lit/virtualized-columns\n - TanStack/table:examples/lit/virtualized-infinite-scrolling\n---\n\nLoad `intent load @tanstack/table-core#core` first for the headless model, stable inputs, and column inference.\n\n## Setup\n\n```ts\nimport { LitElement, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport {\n FlexRender,\n TableController,\n createColumnHelper,\n tableFeatures,\n} from '@tanstack/lit-table'\n\ntype Person = { id: string; name: string }\n\nconst features = tableFeatures({})\nconst columnHelper = createColumnHelper()\nconst columns = columnHelper.columns([\n columnHelper.accessor('name', { header: 'Name' }),\n])\n\n@customElement('people-table')\nexport class PeopleTable extends LitElement {\n @state() private people: Array = [{ id: '1', name: 'Ada' }]\n private tableController = new TableController(this)\n\n protected render() {\n const table = this.tableController.table({\n features,\n columns,\n data: this.people,\n getRowId: (row) => row.id,\n })\n\n return html`\n \n ${repeat(\n table.getHeaderGroups(),\n (group) => group.id,\n (group) =>\n html`\n ${repeat(\n group.headers,\n (header) => header.id,\n (header) =>\n html``,\n )}\n `,\n )}\n \n \n ${repeat(\n table.getRowModel().rows,\n (row) => row.id,\n (row) =>\n html`\n ${repeat(\n row.getAllCells(),\n (cell) => cell.id,\n (cell) => html``,\n )}\n `,\n )}\n \n
\n ${header.isPlaceholder ? null : FlexRender({ header })}\n
${FlexRender({ cell })}
`\n }\n}\n```\n\n## Construction and rendering\n\nKeep one `TableController` as a host field. V9 takes only the host in its constructor; pass current options to `controller.table(...)` during every render. Recreating the controller repeats lifecycle and subscription work.\n\nKeep features, columns, and data stable across host updates. Use `FlexRender({ cell })`, `FlexRender({ header })`, or `FlexRender({ footer })` in Lit templates. The application owns semantic markup, accessibility, widths, and sticky positioning.\n\nThe controller selects all registered state by default. Narrow selected state only when host update cost requires it; use [table-state](../table-state/SKILL.md) for selectors and template subscriptions.\n\n## Read for the task\n\n- When adding or configuring optional features, load `intent load @tanstack/table-core#table-features` and read only references for the requested behavior.\n- For state ownership or reactive reads, read [table-state](../table-state/SKILL.md).\n- When tables share features, defaults, or reusable UI, read [create-table-hook](references/create-table-hook.md).\n- When virtualizing rows or columns, read [with-tanstack-virtual](references/with-tanstack-virtual.md).\n- When upgrading v8 code, read [migrate-v8-to-v9](../migrate-v8-to-v9/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/index.d.ts`, then `TableController.d.ts`, `flexRender.d.ts`, or the relevant exported declaration. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n","packages/lit-table/skills/getting-started/references/create-table-hook.md":"# Lit reusable table hooks\n\nRead when multiple Lit tables share features, defaults, or rendering conventions. Keep standalone construction for tables without shared conventions. For controlled state or reactive reads, read [table-state](../../table-state/SKILL.md).\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```ts\nimport {\n createSortedRowModel,\n createTableHook,\n rowSortingFeature,\n tableFeatures,\n} from '@tanstack/lit-table'\n\nconst features = tableFeatures({\n rowSortingFeature,\n sortedRowModel: createSortedRowModel(),\n})\n\nexport const { createAppColumnHelper, useAppTable, useTableContext } =\n createTableHook({\n features,\n getRowId: (row: { id: string }) => row.id,\n })\n```\n\nUse `createAppColumnHelper()` to define app columns. In a `LitElement`, capture the host in a local variable and initialize `useAppTable(host, options, selector)` once as a field; call the returned `table()` function during render. The maintained composable-tables example shows the complete host/getter shape.\n\n## Core patterns\n\n### Bind shared features, not table-specific data\n\nPut feature plugins, row-model factories, default options, row IDs, and shared render conventions in the factory. Pass each table's columns, data, and controlled state to `useAppTable`.\n\n### Add component registries only for real conventions\n\nRegister common cell/header functions when multiple tables use them. Render them through `table.AppCell` and `table.AppHeader`; ordinary tables can use the returned table instance without registries.\n\n### Consume table context in custom elements\n\nCreate the returned `useTableContext(this)` once as a custom-element field. Read its `.value` during render and handle `undefined` before the provider is available. The value is a base `LitTable` with the factory's feature types, not the extended table with registered components or `App*` helpers.\n\n## Common mistakes\n\n### HIGH Prop drilling replaces typed context\n\nWrong: pass the stable table instance through every custom-element property boundary.\n\nCorrect: call the `useTableContext` returned by the same `createTableHook` in the nearest registered/custom control.\n\nUse the context from the same factory so its feature types and provider match. Registered render functions receive their enhanced cell/header values through `AppCell` and `AppHeader`.\n\nSource: TanStack/table:packages/lit-table/src/createTableHook.ts\n\n### HIGH Recreating useAppTable each render\n\nWrong: call `useAppTable(this, options)` afresh inside `render`.\n\nCorrect: initialize it once as a host field and call `this.appTable.table()` during render.\n\nThe helper owns a TableController and context provider tied to the host lifecycle.\n\nSource: TanStack/table:examples/lit/composable-tables\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/createTableHook.d.ts`. Use the matching installed implementation rather than assuming JSX-adapter component APIs exist in Lit.\n\n## Sources\n\n- `TanStack/table:docs/framework/lit/guide/composable-tables.md`\n- `TanStack/table:examples/lit/composable-tables`\n- `TanStack/table:packages/lit-table/src/createTableHook.ts`\n","packages/lit-table/skills/getting-started/references/with-tanstack-virtual.md":"# Lit Table with TanStack Virtual\n\nRead when rendering a large Lit table with TanStack Virtual. Virtual operates on the final Table model. Read [table-state](../../table-state/SKILL.md) if model counts or rendered state stop updating.\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```ts\nimport { LitElement, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { VirtualizerController } from '@tanstack/lit-virtual'\nimport {\n TableController,\n tableFeatures,\n type ColumnDef,\n} from '@tanstack/lit-table'\n\ntype Item = { id: string; name: string }\nconst features = tableFeatures({})\nconst columns: Array> = [\n { accessorKey: 'name', header: 'Name' },\n]\nconst data: Array = Array.from({ length: 10_000 }, (_, id) => ({\n id: String(id),\n name: `Item ${id}`,\n}))\n\n@customElement('virtual-items')\nexport class VirtualItems extends LitElement {\n private controller = new TableController(this)\n private scroller = createRef()\n private virtualizer = new VirtualizerController(this, {\n count: data.length,\n getScrollElement: () => this.scroller.value,\n estimateSize: () => 32,\n overscan: 5,\n })\n\n protected render() {\n const table = this.controller.table({\n features,\n columns,\n data,\n getRowId: (row) => row.id,\n })\n const rows = table.getRowModel().rows\n const v = this.virtualizer.getVirtualizer()\n v.setOptions({ ...v.options, count: rows.length })\n\n return html`\n
\n ${v\n .getVirtualItems()\n .map(\n (item) =>\n html`\n ${rows[item.index].getValue('name')}\n
`,\n )}\n \n `\n }\n}\n```\n\n## Core patterns\n\n### Virtualize the final row model\n\nSet the virtualizer count from `table.getRowModel().rows.length`; index virtual items into that same array so filtering, sorting, expansion, and pagination are respected.\n\n### Keep geometry sources consistent\n\nFor column virtualization, estimate from `column.getSize()` and remeasure when columnSizing changes. Render widths from the same sizing state.\n\n### Treat unsupported combinations as user composition\n\nDrag-and-drop plus virtualization is not a maintained Table recipe. Start from the maintained Virtual example and reconcile both libraries' transforms, measurement, and auto-scroll contracts explicitly.\n\n## Common mistakes\n\n### HIGH Virtualizing raw data\n\nWrong: index virtual items into the original `data` array.\n\nCorrect: index into `table.getRowModel().rows`.\n\nRaw data ignores active Table processing and produces mismatched rows after sorting or filtering.\n\nSource: TanStack/table:examples/lit/virtualized-rows\n\n### HIGH Count and rows come from different models\n\nWrong: use `data.length` after filters change but render filtered rows.\n\nCorrect: update the virtualizer count from the same current `rows` array being rendered.\n\nMismatched geometry can index undefined rows or leave blank scroll space.\n\nSource: TanStack/table:examples/lit/virtualized-rows\n\n### HIGH Recreating columns during host renders\n\nWrong: pass `columns: [...columns]` from `render()` to work around a readonly tuple.\n\nCorrect: declare a stable mutable `Array>` once and pass `columns` directly.\n\nLit host updates can be driven by scrolling and measurement. A fresh column reference rebuilds Table's column pipeline on every such render.\n\nSource: TanStack/table:examples/lit/virtualized-rows\n\n### HIGH Sticky and sizing CSS assumed automatic\n\nWrong: add a VirtualizerController and expect sticky headers, widths, and transforms.\n\nCorrect: implement the scroll container, total-size spacer, absolute row transforms, sticky regions, and widths in Lit CSS/templates.\n\nBoth libraries are headless over rendering geometry.\n\nSource: TanStack/table:docs/framework/lit/guide/virtualization.md\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/index.d.ts` and `node_modules/@tanstack/lit-virtual/dist/`. Use maintained examples for geometry; do not register Virtual in `tableFeatures`.\n\n## Sources\n\n- `TanStack/table:docs/framework/lit/guide/virtualization.md`\n- `TanStack/table:examples/lit/virtualized-rows`\n- `TanStack/table:examples/lit/virtualized-columns`\n- `TanStack/table:examples/lit/virtualized-infinite-scrolling`\n","packages/lit-table/skills/migrate-v8-to-v9/SKILL.md":"---\nname: migrate-v8-to-v9\ndescription:\n Migrate lit Table v8 to v9. Audit framework construction, rendering, state, and\n app hooks, with shared API changes in the core migration skill.\nmetadata:\n type: lifecycle\n library: '@tanstack/lit-table'\n framework: lit\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#migrate-v8-to-v9'\nsources:\n - TanStack/table:docs/framework/lit/guide/migrating.md\n - TanStack/table:packages/lit-table/src/index.ts\n - TanStack/table:examples/lit/basic-table-controller\n---\n\nLoad `intent load @tanstack/table-core#migrate-v8-to-v9` first and audit its entire shared checklist. It owns feature registration, row-model slots, state/reset changes, prototype methods, logical pinning, sizing/resizing, sorting, selection, helpers, and TypeScript mappings.\n\n## Framework prerequisites\n\nLit 3.1.3 or newer within v3 (`lit ^3.1.3`) and `@lit/context ^1.1.0` are required.\n\n## Lit migration checklist\n\n- [ ] Construct one `TableController(this)` as a stable host field.\n- [ ] Replace the v8 `controller.table` property/options thunk with `controller.table(options, selector?)` during render.\n- [ ] Read selected `table.state` for rendering; use atom snapshots in handlers or stable `table.subscribe` selectors for template regions.\n- [ ] Feed resolved controlled callbacks back through reactive Lit properties, or use stable external atoms.\n- [ ] Switch render helpers to `FlexRender({ cell })`, `FlexRender({ header })`, or `FlexRender({ footer })` and preserve instance-method receivers.\n- [ ] If app conventions repeat, construct a host-bound `useAppTable` once and call its `.table()` during render.\n\n## Apply the affected mappings\n\nRead [adapter-migration](references/adapter-migration.md) when changing construction, rendering, state, or app hooks. Read the relevant core migration references for each affected shared API; this adapter checklist does not replace that audit.\n\nFor complete v9 construction examples, read [getting-started](../getting-started/SKILL.md). For reactive state repairs, read [table-state](../table-state/SKILL.md).\n\n## Final checks\n\n- [ ] All shared core migration checks and affected mappings have been applied.\n- [ ] The framework checklist above passes with the current adapter declarations.\n- [ ] Model inputs remain stable and state changes reach their reactive owner.\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/index.d.ts`, then `TableController.d.ts`, `flexRender.d.ts`, or the relevant exported declaration. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n","packages/lit-table/skills/migrate-v8-to-v9/references/adapter-migration.md":"# Lit v8-to-v9 adapter migration\n\nRead when applying the Lit construction, state, rendering, or reusable-hook checks. Complete the shared audit with `intent load @tanstack/table-core#migrate-v8-to-v9`; its references own the shared feature and type rename inventories.\n\nThis reference inherits the version of its owning skill.\n\n## Framework requirements\n\nLit 3.1.3 or newer within v3 (`lit ^3.1.3`) and `@lit/context ^1.1.0` are required.\n\n## Construction\n\n| v8 | v9 |\n| ------------------------------------------ | ---------------------------------------------------- |\n| `new TableController(this, () => options)` | `new TableController(this)` |\n| `controller.table` property | `controller.table(options, selector?)` during render |\n\nThe controller owns host subscriptions and cleanup. Keep it as a field and supply current stable model inputs during render. Constructing it on every render repeats lifecycle work.\n\n## Lit state migration\n\n- `table.getState().sorting` becomes selected `table.state.sorting` for rendering or `table.atoms.sorting.get()` for a current snapshot. Store snapshots do not establish template subscriptions.\n- `table.state` contains all registered slices by default. Pass a second-argument selector to `controller.table(...)` only to narrow the render-selected surface.\n- Use `table.subscribe(table.store, stableSelector, renderCallback)` for selected template state. Keep the selector reference stable outside render.\n- Controlled state uses Lit `@state()` fields and matching `on[State]Change` callbacks that resolve value-or-function updaters.\n- External atoms come from `@tanstack/store` and are provided through `atoms`. Never provide both `atoms.pagination` and `state.pagination`.\n- The controller owns state subscriptions and requests host updates. Apply current options with `controller.table(...)` during render; keep the controller as a stable host field.\n\n## Rendering and composition\n\n| v8 | v9 |\n| -------------------------- | ----------------------------------------------------------------------------- |\n| `flexRender(def, context)` | `FlexRender({ cell })`, `FlexRender({ header })`, or `FlexRender({ footer })` |\n| Standalone helper only | `table.FlexRender({ cell })` is also available |\n| Repeated raw options | `tableOptions(...)` composition |\n| Repeated conventions | `createTableHook({ features, ... })` |\n\n`createTableHook` returns a host-bound app table helper and pre-bound column helper. Construct the app helper with the Lit host, then call its `.table()` during render. It is optional and intended for recurring application conventions.\n\n## Related task guidance\n\nFor a full construction example, read [getting-started](../../getting-started/SKILL.md). For tracked reads and controlled updates, read [table-state](../../table-state/SKILL.md). When creating a reusable app factory, read [create-table-hook](../../getting-started/references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/index.d.ts`, then `TableController.d.ts`, `flexRender.d.ts`, or the relevant exported declaration. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/lit/guide/migrating.md`\n- `TanStack/table:packages/lit-table/src/index.ts`\n- `TanStack/table:examples/lit/basic-table-controller`\n","packages/lit-table/skills/table-state/SKILL.md":"---\nname: table-state\ndescription:\n Read and control Table v9 state in lit. Use for tracked reads, subscriptions,\n controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/lit-table'\n framework: lit\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/lit/guide/table-state.md\n - TanStack/table:examples/lit/basic-external-state\n - TanStack/table:packages/lit-table/src/TableController.ts\n---\n\nLoad `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules.\n\n`TableController` selects all registered state by default and requests host updates when selected state changes. `table.state` is the selected render value. `table.atoms..get()` and `table.store.state` are snapshots; those reads do not create a template subscription.\n\n## Controlled property setup\n\n\n\n```ts\nimport { LitElement, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport {\n TableController,\n rowPaginationFeature,\n tableFeatures,\n type PaginationState,\n} from '@tanstack/lit-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'id' }]\nconst data = [{ id: '1' }]\n\n@customElement('page-status')\nexport class PageStatus extends LitElement {\n @state() private pagination: PaginationState = { pageIndex: 0, pageSize: 10 }\n private controller = new TableController(\n this,\n )\n\n protected render() {\n const table = this.controller.table({\n features,\n columns,\n data,\n state: { pagination: this.pagination },\n onPaginationChange: (next) => {\n this.pagination =\n typeof next === 'function' ? next(this.pagination) : next\n },\n })\n return html``\n }\n}\n```\n\n## Reactive boundaries\n\n- Keep one controller on the host and pass current options during render. Keep features, columns, and data references stable across host updates.\n- A second `controller.table(options, selector)` argument changes the shape of `table.state` and gates host updates. Keep reused selectors stable.\n- Use `table.subscribe(source, selector, renderCallback)` for a template region that should update independently. Cache selector functions as host fields or module functions.\n- Feed every controlled callback result into the corresponding reactive property and pass it back through `state`. Use stable external atoms through `atoms` when sharing state outside the host.\n\n## Read for the task\n\nFor advanced reactive boundaries, shared atoms, or detailed subscription examples, read [reactivity](references/reactivity.md). For construction or rendering setup, read [getting-started](../getting-started/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/index.d.ts`, then `TableController.d.ts`, `flexRender.d.ts`, or the relevant exported declaration. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n","packages/lit-table/skills/table-state/references/reactivity.md":"# Lit Table reactivity\n\nRead for Lit subscription boundaries, shared state, or updates that require more than the default rendering behavior.\n\nThis reference inherits the version of its owning skill.\n\n## Select a template region independently\n\n\n\n```ts\nimport { LitElement, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport {\n TableController,\n rowPaginationFeature,\n tableFeatures,\n type TableState,\n} from '@tanstack/lit-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\nconst noOwnerState = () => null\nconst pageIndex = (state: TableState) =>\n state.pagination.pageIndex\n\n@customElement('page-island')\nexport class PageIsland extends LitElement {\n private controller = new TableController(\n this,\n )\n\n protected render() {\n const table = this.controller.table(\n { features, columns, data },\n noOwnerState,\n )\n return html`\n ${table.subscribe(table.store, pageIndex, (page) => html`Page ${page + 1}`)}\n \n `\n }\n}\n```\n\nThe owner selector opts this host out of state-driven updates. Every state-dependent region must then subscribe to its own dependencies. Keep both selectors stable. Recreating a `table.subscribe` selector changes its subscription work even if it computes the same value.\n\n## Shared atoms and controlled properties\n\nFor cross-system state, create a stable external TanStack Store atom and pass it in `atoms`. Feature APIs write the supplied atom. For host-owned state, use `@state()` plus the corresponding callback, resolve value-or-function updaters, and feed the property into the next `controller.table` call.\n\nUse `table.atoms.pagination.get()` in an event handler for the current snapshot. A cached store property outside render does not stay current and does not subscribe a template region.\n\n## Host lifecycle and accepted updates\n\nKeep the controller as a host field. It owns subscriptions and cleanup. `controller.table` stages fresh options for same-render reads; `hostUpdated` publishes captured controlled state after Lit commits. External atoms remain direct owners.\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/index.d.ts`, then `TableController.d.ts`, `flexRender.d.ts`, or the relevant exported declaration. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/lit/guide/table-state.md`\n- `TanStack/table:examples/lit/basic-external-state`\n- `TanStack/table:packages/lit-table/src/TableController.ts`\n","packages/match-sorter-utils/README.md":"","packages/match-sorter-utils/skills/fuzzy-ranking/SKILL.md":"---\nname: fuzzy-ranking\ndescription: >\n Rank fuzzy matches with rankItem, filter with RankingInfo.passed, compare saved ranking metadata with compareItems, and configure rankings, thresholds, accessors, min/max bounds, or diacritics. Load for @tanstack/match-sorter-utils itself or fuzzy Table filterMeta wiring.\nmetadata:\n type: core\n library: '@tanstack/match-sorter-utils'\n library_version: '9.2.6'\nsources:\n - 'TanStack/table:packages/match-sorter-utils/src/index.ts'\n - 'TanStack/table:docs/framework/react/guide/fuzzy-filtering.md'\n - 'TanStack/table:examples/react/filters-fuzzy'\n---\n\n## Setup\n\n\n\n```ts\nimport { compareItems, rankItem, rankings } from '@tanstack/match-sorter-utils'\n\nconst query = 'tan'\nconst values = ['table', 'tanner', 'router']\nexport const ranked = values\n .map((value) => ({\n value,\n info: rankItem(value, query, { threshold: rankings.MATCHES }),\n }))\n .filter((entry) => entry.info.passed)\n .sort((a, b) => compareItems(a.info, b.info))\n```\n\n## Core Patterns\n\n### Separate ranking, filtering, and sorting\n\nCall `rankItem` once, filter on `info.passed`, retain the `RankingInfo`, then order matching results with `compareItems`.\n\n### Rank object fields through accessors\n\n```ts\ntype Person = { name: string; email: string }\nconst person: Person = { name: 'Ada Lovelace', email: 'ada@example.test' }\nconst info = rankItem(person, 'lov', {\n accessors: [(item) => item.name, (item) => item.email],\n})\n```\n\nAccessor options can set a per-accessor threshold plus minRanking/maxRanking bounds.\n\n### Store ranking as Table filter metadata\n\nIn a Table filterFn, call `addMeta?.({ itemRank })`. Register the corresponding\nmeta shape with `filterMeta: metaHelper<{ itemRank: RankingInfo }>()`. A related\nsortFn reads `row.columnFiltersMeta[columnId]?.itemRank` and uses `compareItems`,\nfalling back to an ordinary comparator for ties or absent metadata. For the\nprimary Table composition, load `@tanstack/table-core#table-features` and read\nits global-filtering reference. Register the fuzzy filter under `filterFns`\nfor `globalFilterFn: 'fuzzy'`.\n\n## Common Mistakes\n\n### HIGH Numeric rank used as pass flag\n\nWrong: `if (rankItem(value, query).rank) include(value)`.\n\nCorrect: test `rankItem(value, query).passed`.\n\nRanks below the configured threshold can still be nonzero; `passed` records the threshold decision.\n\nSource: TanStack/table:packages/match-sorter-utils/src/index.ts\n\n### HIGH Ranking recomputed during sorting\n\nWrong: call `rankItem` for both rows on every comparator invocation.\n\nCorrect: retain RankingInfo during filtering and pass the stored values to `compareItems`.\n\nSorting is called many times; recomputing also risks using different query/options than the filter decision.\n\nSource: TanStack/table:docs/framework/react/guide/fuzzy-filtering.md\n\n### MEDIUM compareItems direction reversed twice\n\nWrong: negate `compareItems(a, b)` because a larger rank should appear first.\n\nCorrect: use `compareItems(a, b)` directly for ascending fuzzy relevance.\n\nThe function already returns -1 when `a.rank` is greater than `b.rank`.\n\nSource: TanStack/table:packages/match-sorter-utils/src/index.ts\n\n## API Discovery\n\nInspect `node_modules/@tanstack/match-sorter-utils/dist/index.d.ts` for the installed `RankItemOptions`, accessor attributes, ranking constants, and comparator behavior. For TanStack Table metadata integration, load `@tanstack/table-core#table-features` and read its global-filtering and sorting references.\n","packages/octane-table/README.md":"","packages/octane-table/skills/getting-started/SKILL.md":"---\nname: getting-started\ndescription:\n Create and render Table v9 with the octane adapter. Route reusable createTableHook\n components, and framework setup; use table-state for reactive ownership.\nmetadata:\n type: framework\n library: '@tanstack/octane-table'\n framework: octane\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/octane/quick-start.md\n - TanStack/table:examples/octane/basic-use-table\n - TanStack/table:packages/octane-table/src/index.ts\n - TanStack/table:packages/octane-table/src/useTable.tsrx\n - TanStack/table:docs/framework/octane/guide/composable-tables.md\n - TanStack/table:docs/framework/octane/guide/table-context.md\n - TanStack/table:examples/octane/composable-tables\n - TanStack/table:packages/octane-table/src/createTableHook.tsrx\n - TanStack/table:packages/octane-table/src/createTableHookContexts.ts\n---\n\nLoad `intent load @tanstack/table-core#core` first for the headless model, stable inputs, and column inference.\n\n## Setup\n\n```tsrx\nimport { createRoot, useState } from 'octane'\nimport {\n createColumnHelper,\n tableFeatures,\n useTable,\n} from '@tanstack/octane-table'\n\ntype Person = { name: string }\nconst features = tableFeatures({})\nconst helper = createColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n\nfunction PeopleTable() @{\n const [data] = useState([{ name: 'Ada' }])\n const table = useTable({ features, columns, data })\n\n \n \n @for (const group of table.getHeaderGroups(); key group.id) {\n \n @for (const header of group.headers; key header.id) {\n \n }\n \n }\n \n \n @for (const row of table.getRowModel().rows; key row.id) {\n \n @for (const cell of row.getAllCells(); key cell.id) {\n \n }\n \n }\n \n
\n}\n\nconst rootElement = document.getElementById('root')\nif (!rootElement) throw new Error('Root element not found')\ncreateRoot(rootElement).render(PeopleTable)\n```\n\n## Construction and rendering\n\nThis adapter distributes authored TypeScript and TSRX. Configure the consumer with `octane()` in `vite.config.ts` and the TSRX JSX import source `octane`. Author component bodies with `@{ ... }` and keyed `@for` loops for rows, headers, and cells.\n\nImport from `@tanstack/octane-table`. Render `table.FlexRender` as a component so it gets its own Octane scope. It preserves numbers including `0`, render descriptors, and component functions.\n\nKeep features and column definitions at module scope. For inputs that depend on component state, use `useMemo`; pass the current stable data array to `useTable`. Convert non-renderable values with `String(value)` when displaying them as text.\n\n## Read for the task\n\n- When adding or configuring optional features, load `intent load @tanstack/table-core#table-features` and read only references for the requested behavior.\n- For state ownership or reactive reads, read [table-state](../table-state/SKILL.md).\n- When tables share features, defaults, or reusable UI, read [create-table-hook](references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/octane-table/src/index.d.ts`, the matching `*.tsrx.d.ts` sidecar, and `src/types.ts`. This package publishes authored source; core APIs are in installed `@tanstack/table-core/dist/`.\n","packages/octane-table/skills/getting-started/references/create-table-hook.md":"# Octane reusable table hooks\n\nRead when multiple Octane tables share features, defaults, or rendering conventions. Keep standalone construction for tables without shared conventions. For controlled state or reactive reads, read [table-state](../../table-state/SKILL.md).\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```tsrx\nimport {\n createTableHook,\n rowSelectionFeature,\n tableFeatures,\n} from '@tanstack/octane-table'\n\nexport const { createAppColumnHelper, useAppTable, useTableContext } =\n createTableHook({\n features: tableFeatures({ rowSelectionFeature }),\n getRowId: (row: { id: string }) => row.id,\n })\n```\n\nCreate the factory at module scope. Its wrappers have stable identities and read the latest table facade without remounting their child subtrees.\n\n## Core patterns\n\n### Use the factory-bound helper\n\n```tsrx\ntype Person = { id: string; name: string }\nconst helper = createAppColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n```\n\n### Consume typed context under its wrapper\n\n```tsrx\nfunction RowCount() @{\n const table = useTableContext()\n {String(table.getRowModel().rows.length)}\n}\n\nfunction Grid() @{\n const table = useAppTable({ data, columns })\n \n}\n```\n\n`AppTable` takes static children without a selector. Use function children when a selector supplies their value:\n\n```tsrx\n state.rowSelection}>\n {(rowSelection) => {String(Object.keys(rowSelection).length)}}\n\n```\n\nRender `AppTable`, `AppCell`, `AppHeader`, `AppFooter`, and registered components with JSX. The wrappers establish context and independent Octane scopes.\n\n### Isolate nested table setups\n\nDefault contexts are module-scoped and HMR-stable. Sibling tables are isolated by their providers, but nested factories can resolve a consumer to the inner provider. Create fresh contexts for distinct nested setups:\n\n```tsrx\nimport {\n createTableHook,\n createTableHookContexts,\n rowSelectionFeature,\n tableFeatures,\n} from '@tanstack/octane-table'\n\nconst features = tableFeatures({ rowSelectionFeature })\nconst { tableContext, cellContext, headerContext } =\n createTableHookContexts()\n\nexport const app = createTableHook({\n features,\n tableContext,\n cellContext,\n headerContext,\n})\n```\n\nPrefer hooks returned by `createTableHook` because their types include registered component maps.\n\n## Common mistakes\n\n### HIGH Reading outside the matching provider\n\nWrong:\n\n```tsrx\nfunction Grid() @{\n \n}\n```\n\nCorrect:\n\n```tsrx\nfunction Grid() @{\n const table = useAppTable({ data, columns })\n \n}\n```\n\nFactory context hooks throw actionable errors when the matching `AppTable`, `AppCell`, or `AppHeader` provider is missing.\n\nSource: `packages/octane-table/src/createTableHook.tsrx`\n\n### HIGH Recreating the factory during render\n\nWrong:\n\n```tsrx\nfunction Grid() @{\n const app = createTableHook({ features })\n const table = app.useAppTable({ data, columns })\n \n}\n```\n\nCorrect:\n\n```tsrx\nconst app = createTableHook({ features })\n\nfunction Grid() @{\n const table = app.useAppTable({ data, columns })\n \n}\n```\n\nA factory created during render makes hook configuration, wrappers, contexts, and registered component identities unstable.\n\nSource: `packages/octane-table/src/createTableHook.tsrx`\n\n## API discovery\n\nInspect `node_modules/@tanstack/octane-table/src/createTableHook.tsrx.d.ts`, `src/createTableHookContexts.ts`, and `src/types.ts` for exact return names, wrapper props, registries, and scoped context types.\n\n## Sources\n\n- `TanStack/table:docs/framework/octane/guide/composable-tables.md`\n- `TanStack/table:docs/framework/octane/guide/table-context.md`\n- `TanStack/table:examples/octane/composable-tables`\n- `TanStack/table:packages/octane-table/src/createTableHook.tsrx`\n- `TanStack/table:packages/octane-table/src/createTableHookContexts.ts`\n","packages/octane-table/skills/table-state/SKILL.md":"---\nname: table-state\ndescription:\n Read and control Table v9 state in octane. Use for tracked reads, subscriptions,\n controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/octane-table'\n framework: octane\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/octane/guide/table-state.md\n - TanStack/table:examples/octane/basic-subscribe\n - TanStack/table:examples/octane/basic-external-atoms\n - TanStack/table:packages/octane-table/src/useTable.tsrx\n - TanStack/table:packages/octane-table/src/Subscribe.tsrx\n---\n\nLoad `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules.\n\n`useTable` selects all registered state by default. Its second argument changes the selected shape exposed as `table.state` and shallow-gates owner rerenders. Atom `.get()` and `table.store.state` reads are snapshots; use selected state or a rendered `table.Subscribe` to update the UI.\n\n## Controlled slice setup\n\n```tsrx\nimport { useState } from 'octane'\nimport {\n rowPaginationFeature,\n tableFeatures,\n useTable,\n} from '@tanstack/octane-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nfunction PageStatus() @{\n const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 20 })\n const table = useTable({\n features,\n columns,\n data,\n state: { pagination },\n onPaginationChange: setPagination,\n })\n\n \n}\n```\n\n## Reactive boundaries\n\n- Pass both the controlled value and its callback. Octane setters accept Table's value-or-updater callbacks; a callback alone cannot feed the new value back.\n- Render `` as a component. Calling it as a normal function shares the owner's compiler slots instead of creating an independent hook scope.\n- `useTable` stages fresh options for same-render reads. Controlled state reaches the store only from an accepted layout commit, so abandoned work cannot publish speculative values.\n- A stable atom from `@tanstack/octane-store` is a direct synchronous owner. Table writes reach it immediately; it takes precedence over controlled `state` for the same slice.\n- Keep features, columns, and data stable. Use the default selector until render cost justifies narrower subscriptions.\n\n## Read for the task\n\nFor advanced reactive boundaries, shared atoms, or detailed subscription examples, read [reactivity](references/reactivity.md). For construction or rendering setup, read [getting-started](../getting-started/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/octane-table/src/index.d.ts`, the matching `*.tsrx.d.ts` sidecar, and `src/types.ts`. This package publishes authored source; core APIs are in installed `@tanstack/table-core/dist/`.\n","packages/octane-table/skills/table-state/references/reactivity.md":"# Octane Table reactivity\n\nRead for Octane subscription boundaries, shared state, or updates that require more than the default rendering behavior.\n\nThis reference inherits the version of its owning skill.\n\n## Mount independent subscription islands\n\n```tsrx\nimport { rowSelectionFeature, tableFeatures, useTable } from '@tanstack/octane-table'\n\nconst features = tableFeatures({ rowSelectionFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nfunction SelectionCount() @{\n const table = useTable({ features, columns, data }, () => null)\n \n {(selection) => {String(Object.keys(selection).length)}}\n \n \n}\n```\n\nWithout `source`, `table.Subscribe` subscribes to `table.store` and needs a selector. With `source`, it can consume one atom or store. If the owner selects `null`, every UI region must subscribe to the slices its Table API reads depend on, including row-model dependencies.\n\nAlways mount `Subscribe` with JSX. `table.Subscribe({ source, children })` shares the owner's compiler slots and loses the independent hook scope.\n\n## Share a synchronous external owner\n\n```tsrx\nimport { useCreateAtom } from '@tanstack/octane-store'\nimport { rowPaginationFeature, tableFeatures, useTable } from '@tanstack/octane-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nfunction PageStatus() @{\n const pagination = useCreateAtom({ pageIndex: 0, pageSize: 20 })\n const table = useTable({ features, columns, data, atoms: { pagination } })\n \n}\n```\n\nUse `useSelector` from `@tanstack/octane-store` when another component consumes the atom. External atoms are direct synchronous owners and take precedence over `options.state`; omit the matching controlled callback.\n\n## Render and commit timing\n\n`useTable` stages current data, columns, callbacks, and controlled state for same-render reads. It publishes controlled state only after Octane accepts the render, from the layout commit. Suspended or abandoned renders cannot publish speculative state.\n\nThe owner drops the matching redundant post-commit notification because it already rendered that snapshot. Independently mounted `table.Subscribe` consumers still receive the update before paint. This distinction applies to controlled `state`; external atom writes remain synchronous.\n\nFor controlled state, pass `state.` together with the corresponding Octane setter. A custom callback must resolve raw values and updater functions before feeding the owner back into Table.\n\n## API discovery\n\nInspect `node_modules/@tanstack/octane-table/src/index.d.ts`, the matching `*.tsrx.d.ts` sidecar, and `src/types.ts`. This package publishes authored source; core APIs are in installed `@tanstack/table-core/dist/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/octane/guide/table-state.md`\n- `TanStack/table:examples/octane/basic-subscribe`\n- `TanStack/table:examples/octane/basic-external-atoms`\n- `TanStack/table:packages/octane-table/src/useTable.tsrx`\n- `TanStack/table:packages/octane-table/src/Subscribe.tsrx`\n","packages/preact-table-devtools/README.md":"","packages/preact-table-devtools/skills/devtools/SKILL.md":"---\nname: devtools\ndescription: >\n Connect native Preact Table v9 instances to Devtools with tableDevtoolsPlugin and useTanStackTableDevtools. Load for React-package mixups, missing targets, required options.key, enabled state, cleanup, or development gating.\nmetadata:\n type: framework\n library: '@tanstack/preact-table-devtools'\n framework: preact\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\n - '@tanstack/table-devtools#devtools'\nsources:\n - 'TanStack/table:docs/devtools.md'\n - 'TanStack/table:packages/preact-table-devtools/src/index.ts'\n - 'TanStack/table:packages/preact-table-devtools/src/useTanStackTableDevtools.ts'\n---\n\nThis skill builds on @tanstack/table-core#core and @tanstack/table-devtools#devtools.\n\n## Setup\n\n```tsx\nimport { TanStackDevtools } from '@tanstack/preact-devtools'\nimport { useTable, tableFeatures } from '@tanstack/preact-table'\nimport {\n tableDevtoolsPlugin,\n useTanStackTableDevtools,\n} from '@tanstack/preact-table-devtools'\n\nconst features = tableFeatures({})\nconst columns = [{ accessorKey: 'id' }]\nconst data: Array<{ id: string }> = []\n\nexport function App() {\n const table = useTable({\n key: 'users-table',\n features,\n columns,\n data,\n })\n useTanStackTableDevtools(table)\n return \n}\n```\n\n## Hooks and Components\n\nUse the native Preact packages throughout. Pass `{ enabled }` rather than conditionally calling the registration hook.\n\n## Common Mistakes\n\n### HIGH React Devtools package mixed into Preact\n\nWrong: import the hook from `@tanstack/react-table-devtools` through compat.\n\nCorrect: use `@tanstack/preact-table-devtools` with `@tanstack/preact-devtools`.\n\nThe native adapter owns Preact effect lifecycle and plugin types.\n\nSource: TanStack/table:docs/devtools.md\n\n### HIGH Missing or duplicate key\n\nWrong: omit `key` or reuse `users-table` for multiple mounted tables.\n\nCorrect: give each live table one stable unique key.\n\nKeyless registration is skipped; duplicate keys replace targets.\n\nSource: TanStack/table:packages/table-devtools/src/tableTarget.ts\n\n### MEDIUM Production no-op mistaken for failure\n\nWrong: expect the default entrypoint to stay active in a production bundle.\n\nCorrect: keep Devtools development-only unless an explicit production import is required.\n\nThe default index deliberately selects no-op implementations outside development.\n\nSource: TanStack/table:packages/preact-table-devtools/src/index.ts\n\n## API Discovery\n\nInspect `node_modules/@tanstack/preact-table-devtools/dist/index.d.ts` and `useTanStackTableDevtools.d.ts`; do not copy React adapter imports.\n","packages/preact-table/README.md":"","packages/preact-table/skills/getting-started/SKILL.md":"---\nname: getting-started\ndescription: Create and render Table v9 with the preact adapter. Route reusable createTableHook components, Query and Virtual integration, and framework setup; use table-state for reactive ownership.\nmetadata:\n type: framework\n library: '@tanstack/preact-table'\n library_version: '9.3.1'\n framework: preact\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/preact/guide/migrating.md\n - TanStack/table:examples/preact/basic-use-table\n - TanStack/table:packages/preact-table/src/index.ts\n - TanStack/table:docs/framework/preact/guide/composable-tables.md\n - TanStack/table:docs/framework/preact/guide/table-context.md\n - TanStack/table:examples/preact/composable-tables\n - TanStack/table:packages/preact-table/src/createTableHook.tsx\n - TanStack/table:packages/preact-table/src/createTableHookContexts.tsx\n - TanStack/table:examples/preact/with-tanstack-query\n - TanStack/table:docs/framework/preact/guide/pagination.md\n - TanStack/table:docs/framework/preact/guide/virtualization.md\n---\n\n# Preact Table setup and integration\n\nBefore starting, run `intent load @tanstack/table-core#core` for the shared headless model and stable-input rules.\n\n## Setup\n\n```tsx\nimport { useState } from 'preact/hooks'\nimport {\n createColumnHelper,\n tableFeatures,\n useTable,\n} from '@tanstack/preact-table'\n\ntype Person = { name: string }\nconst features = tableFeatures({})\nconst helper = createColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n\nexport function PeopleTable() {\n const [data] = useState([{ name: 'Ada' }])\n const table = useTable({ features, columns, data })\n return (\n \n \n {table.getHeaderGroups().map((group) => (\n \n {group.headers.map((header) => (\n \n ))}\n \n ))}\n \n \n {table.getRowModel().rows.map((row) => (\n \n {row.getAllCells().map((cell) => (\n \n ))}\n \n ))}\n \n
\n \n
\n \n
\n )\n}\n```\n\n## Essential constraints\n\nUse native `@tanstack/preact-table` and `preact/hooks`. V8 React-through-compat setup and `useReactTable` are not the native v9 API. Keep features, columns, and fallback arrays stable across renders.\n\nTable owns models and state. The application owns markup, CSS, interactions, and accessibility. Core-only tables use `row.getAllCells()`; visibility-aware methods need `columnVisibilityFeature`. Optional state and APIs require their features. Put row-model slots after their prerequisite features in `tableFeatures()`.\n\n## Load by task\n\n- For repeated features, defaults, typed contexts, or component registries, read [reusable app hooks](references/create-table-hook.md).\n- For Query-backed data, server pages, sorting, filtering, or request keys, read [TanStack Query integration](references/with-tanstack-query.md).\n- For virtual rows, columns, dynamic measurement, or infinite scrolling, read [TanStack Virtual integration](references/with-tanstack-virtual.md).\n- For controlled state, tracked reads, or render subscriptions, read [table state](../table-state/SKILL.md).\n- For feature registration, missing feature APIs, or processing ownership, run `intent load @tanstack/table-core#table-features` and read only references needed by the task.\n- For v8 code, read the [migration checklist](../migrate-v8-to-v9/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/preact-table/dist/index.d.ts`, then the exported adapter declarations for the installed version. Inspect optional core APIs under `node_modules/@tanstack/table-core/dist/features/`.\n","packages/preact-table/skills/getting-started/references/create-table-hook.md":"# Reusable Preact table hooks\n\nUse this reference when multiple Preact tables share features, defaults, or registered components. Keep one-off tables on `useTable`. For controlled state or subscription changes, read [table state](../../table-state/SKILL.md).\n\n## Setup\n\n```tsx\nimport {\n createTableHook,\n rowSelectionFeature,\n tableFeatures,\n} from '@tanstack/preact-table'\n\nexport const { createAppColumnHelper, useAppTable, useTableContext } =\n createTableHook({\n features: tableFeatures({ rowSelectionFeature }),\n getRowId: (row: { id: string }) => row.id,\n })\n```\n\n## Core patterns\n\n### Use the factory-bound helper\n\n```tsx\ntype Person = { id: string; name: string }\nconst helper = createAppColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n```\n\n### Consume typed context under its wrapper\n\n```tsx\nfunction RowCount() {\n const table = useTableContext()\n return {table.getRowModel().rows.length}\n}\nconst table = useAppTable({ data, columns })\nreturn (\n \n \n \n)\n```\n\n`AppTable` takes ordinary JSX children without a selector. Use function children only when a selector supplies their value:\n\n```tsx\n state.rowSelection}>\n {(rowSelection) => {Object.keys(rowSelection).length}}\n\n```\n\n### Isolate genuinely nested table setups\n\nDefault contexts are module-scoped and HMR-stable; sibling tables are already isolated by their providers. Separate `createTableHook` calls still share those defaults, so nested providers can silently resolve a consumer to the inner table. Use fresh contexts only when different table setups are nested:\n\n```tsx\nimport {\n createTableHook,\n createTableHookContexts,\n rowSelectionFeature,\n tableFeatures,\n} from '@tanstack/preact-table'\n\nconst features = tableFeatures({ rowSelectionFeature })\nconst { tableContext, cellContext, headerContext } =\n createTableHookContexts()\n\nexport const app = createTableHook({\n features,\n tableContext,\n cellContext,\n headerContext,\n})\n```\n\nPrefer hooks returned by `createTableHook` because their types include registered component maps. Hooks returned directly by `createTableHookContexts` know only `TFeatures` and support modules that cannot import the completed factory.\n\n## Common mistakes\n\n### Choose a factory for repeated conventions\n\nA factory for shared conventions:\n\n```tsx\nconst app = createTableHook({ features: tableFeatures({}) })\n```\n\nStandalone construction for a one-off table:\n\n```tsx\nconst table = useTable({ features, columns, data })\n```\n\nThe factory is valuable when it centralizes repeated policy, not merely another constructor name.\n\nSource: `docs/framework/preact/guide/composable-tables.md`\n\n### HIGH Reading outside the matching provider\n\nWrong:\n\n```tsx\nreturn \n```\n\nCorrect:\n\n```tsx\nreturn (\n \n \n \n)\n```\n\nFactory context hooks require the corresponding `AppTable`, `AppCell`, or `AppHeader` wrapper.\n\nSource: `packages/preact-table/src/createTableHook.tsx`\n\n### HIGH Recreating contexts per render\n\nWrong:\n\n```tsx\nfunction Grid() {\n const app = createTableHook({ features })\n const table = app.useAppTable({ data, columns })\n return (\n \n
\n \n )\n}\n```\n\nCorrect:\n\n```tsx\nconst app = createTableHook({ features })\nfunction Grid() {\n const table = app.useAppTable({ data, columns })\n return (\n \n
\n \n )\n}\n```\n\nCreating a new factory closure during render makes hook configuration and component registries unstable. Keep the factory and its bound hook identity at module scope.\n\nSource: `packages/preact-table/src/createTableHook.tsx`\n\n## API discovery\n\nInspect `node_modules/@tanstack/preact-table/dist/createTableHook.d.ts` and `createTableHookContexts.d.ts` for exact return names, provider props, registries, and scoped context types.\n\n## Sources\n\n- `TanStack/table:docs/framework/preact/guide/composable-tables.md`\n- `TanStack/table:docs/framework/preact/guide/table-context.md`\n- `TanStack/table:examples/preact/composable-tables`\n- `TanStack/table:packages/preact-table/src/createTableHook.tsx`\n- `TanStack/table:packages/preact-table/src/createTableHookContexts.tsx`\n","packages/preact-table/skills/getting-started/references/with-tanstack-query.md":"# Preact Table with TanStack Query\n\nUse this reference when Query owns server data for a Preact table. Read [table state](../../table-state/SKILL.md) for reactive ownership. Run `intent load @tanstack/table-core#table-features` and read its client/server reference before choosing manual processing stages. Query fetches rows already processed by every server-owned stage; manual flags only bypass Table processing.\n\n## Setup\n\n```tsx\nimport { keepPreviousData, useQuery } from '@tanstack/preact-query'\nimport { useCreateAtom, useSelector } from '@tanstack/preact-store'\nimport {\n rowPaginationFeature,\n tableFeatures,\n useTable,\n} from '@tanstack/preact-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst emptyRows: Array<{ id: string }> = []\nconst paginationAtom = useCreateAtom({ pageIndex: 0, pageSize: 20 })\nconst pagination = useSelector(paginationAtom, (value) => value)\nconst result = useQuery({\n queryKey: ['people', pagination],\n queryFn: () => fetchPeople(pagination),\n placeholderData: keepPreviousData,\n})\nconst table = useTable({\n features,\n columns,\n data: result.data?.rows ?? emptyRows,\n rowCount: result.data?.rowCount,\n atoms: { pagination: paginationAtom },\n manualPagination: true,\n})\n```\n\n## Core patterns\n\n### Key requests by every server-owned slice\n\n```tsx\nuseQuery({\n queryKey: ['people', pagination, sorting],\n queryFn: () => fetchPeople({ pagination, sorting }),\n})\n```\n\n### Pass cached rows directly\n\n```tsx\nuseTable({ features, columns, data: result.data?.rows ?? emptyRows })\n```\n\n## Common mistakes\n\n### HIGH Importing React Query APIs\n\nWrong:\n\n```tsx\nimport { useQuery } from '@tanstack/react-query'\n```\n\nCorrect:\n\n```tsx\nimport { useQuery } from '@tanstack/preact-query'\n```\n\nUse native Preact Query and Store integrations throughout the composition.\n\nSource: `examples/preact/with-tanstack-query`\n\n### HIGH Reusing one cache key\n\nWrong:\n\n```tsx\nuseQuery({ queryKey: ['people'], queryFn: () => fetchPeople(pagination) })\n```\n\nCorrect:\n\n```tsx\nuseQuery({\n queryKey: ['people', pagination],\n queryFn: () => fetchPeople(pagination),\n})\n```\n\nEach processed server result needs a key that includes its request state.\n\nSource: `examples/preact/with-tanstack-query`\n\n### HIGH Expecting manual flags to fetch\n\nWrong:\n\n```tsx\nuseTable({ features, columns, data, manualPagination: true })\n```\n\nCorrect:\n\n```tsx\nuseTable({\n features,\n columns,\n data: result.data?.rows ?? emptyRows,\n rowCount: result.data?.rowCount,\n manualPagination: true,\n})\n```\n\nManual pagination bypasses local processing; it neither calls the backend nor invents totals.\n\nSource: `docs/framework/preact/guide/pagination.md`\n\n## API discovery\n\nInspect installed `node_modules/@tanstack/preact-table/dist/index.d.ts` and the relevant installed core feature declarations; inspect `@tanstack/preact-query` declarations for exact query APIs.\n\n## Sources\n\n- `TanStack/table:examples/preact/with-tanstack-query`\n- `TanStack/table:docs/framework/preact/guide/pagination.md`\n","packages/preact-table/skills/getting-started/references/with-tanstack-virtual.md":"# Preact Table with TanStack Virtual\n\nUse this reference when virtualizing Preact table rows or columns. Virtual consumes the final Table model in the renderer; it is not a Table feature. For reactive model or subscription problems, read [table state](../../table-state/SKILL.md). Register `columnSizingFeature` before calling sizing APIs, and `columnVisibilityFeature` before visibility-aware APIs.\n\n## Setup\n\n```tsx\nimport { useRef } from 'preact/hooks'\nimport { useVirtualizer } from '@tanstack/react-virtual' // via preact/compat\n\nconst scrollRef = useRef(null)\nconst rows = table.getRowModel().rows\nconst virtualizer = useVirtualizer({\n count: rows.length,\n getScrollElement: () => scrollRef.current,\n estimateSize: () => 36,\n getItemKey: (index) => rows[index].id,\n overscan: 5,\n})\n```\n\nRender a spacer of `getTotalSize()` and position each row from its virtual item's `start`.\n\n## Core patterns\n\n### Apply Table's column sizes\n\n```tsx\n\n \n\n```\n\n### Measure dynamic rows by index\n\n```tsx\n
\n {row.id}\n
\n```\n\n## Common mistakes\n\n### HIGH Looking for a Preact-specific adapter\n\nThere is no `@tanstack/preact-virtual` package. In the standard Preact setup that aliases React to `preact/compat`, use the maintained React adapter:\n\n```tsx\nimport { useVirtualizer } from '@tanstack/react-virtual'\n```\n\nIf the application cannot use the compat alias, integrate the `Virtualizer` class from `@tanstack/virtual-core` directly. That is a lower-level integration with application-owned lifecycle and subscriptions; do not invent Preact hooks around it.\n\nSource: `docs/framework/preact/guide/virtualization.md`\n\n### HIGH Virtualizing raw data\n\nWrong:\n\n```tsx\nuseVirtualizer({ count: data.length, getScrollElement, estimateSize })\n```\n\nCorrect:\n\n```tsx\nconst rows = table.getRowModel().rows\nuseVirtualizer({ count: rows.length, getScrollElement, estimateSize })\n```\n\nRaw data omits Table's current filtering, sorting, expansion, grouping, and pagination.\n\nSource: `docs/framework/preact/guide/virtualization.md`\n\n### HIGH Assuming layout is automatic\n\nWrong:\n\n```tsx\nvirtualizer.getVirtualItems().map((item) =>
{rows[item.index].id}
)\n```\n\nCorrect:\n\n```tsx\nvirtualizer\n .getVirtualItems()\n .map((item) => (\n \n {rows[item.index].id}\n
\n ))\n```\n\nVirtual computes geometry; application markup and CSS must apply it and supply the scroll container/spacer.\n\nSource: `docs/framework/preact/guide/virtualization.md`\n\n## API discovery\n\nInspect `node_modules/@tanstack/preact-table/dist/index.d.ts`. For rendering APIs, inspect installed `node_modules/@tanstack/react-virtual/dist/` when using the standard `preact/compat` alias, or `node_modules/@tanstack/virtual-core/dist/` for a direct integration. There is no maintained Preact-specific Virtual package or Table example; start from the Preact guide and translate the maintained React examples only through the compat setup it describes.\n\n## Sources\n\n- `TanStack/table:docs/framework/preact/guide/virtualization.md`\n- `TanStack/table:packages/preact-table/src/index.ts`\n","packages/preact-table/skills/migrate-v8-to-v9/SKILL.md":"---\nname: migrate-v8-to-v9\ndescription: Migrate preact Table v8 to v9. Audit framework construction, rendering, state, and app hooks, with shared API changes in the core migration skill.\nmetadata:\n type: lifecycle\n library: '@tanstack/preact-table'\n library_version: '9.3.1'\n framework: preact\nrequires:\n - '@tanstack/table-core#migrate-v8-to-v9'\nsources:\n - TanStack/table:docs/framework/preact/guide/migrating.md\n - TanStack/table:packages/preact-table/src/index.ts\n - TanStack/table:examples/preact/basic-use-table\n---\n\n# Preact v8-to-v9 migration checklist\n\nBefore starting, run `intent load @tanstack/table-core#migrate-v8-to-v9`. Audit its entire shared checklist and read the detailed core mappings for APIs present in the application. This checklist adds the Preact-specific changes.\n\nFramework prerequisite: Preact 10 or newer (`preact >=10`).\n\n## Adapter audit\n\n- [ ] Replace React-adapter imports and `useReactTable` with native `@tanstack/preact-table` and `useTable`.\n- [ ] Remove compat aliases that existed only for Table. Preserve aliases still required by other libraries, including a React Virtual integration.\n- [ ] Keep model inputs stable and configure explicit features/row-model slots; complete the shared core checklist.\n- [ ] Use selected `table.state`, `table.Subscribe`, or Preact Store subscriptions; snapshots alone do not rerender consumers.\n- [ ] Pair controlled slices with callbacks, or supply stable atoms from `@tanstack/preact-store`; remove global `onStateChange`.\n- [ ] Use native Preact FlexRender components. Adopt `tableOptions` or `createTableHook` only for repeated app conventions.\n\n## Load the affected details\n\nWhen the audit finds old Preact construction, state, rendering, or app-hook code, read [adapter migration details](references/adapter-migration.md) before editing it. For a replacement render scaffold, read [getting started](../getting-started/SKILL.md). For controlled or stale state after migration, read [table state](../table-state/SKILL.md).\n\nShared pinning, sizing, sorting, selection, prototype-method, type, and registry changes stay in the core migration references. Renaming `useReactTable` alone does not complete the migration.\n\n## Verify the migration\n\n- [ ] Type-check against the installed v9 adapter and exercise every enabled client/manual feature flow.\n- [ ] Verify external state writes, reactive data replacement, and the framework rendering paths changed above.\n- [ ] Complete the core checklist, including layout and selection behavior when those features are used.\n- [ ] Replace temporary `stockFeatures` when the target is explicit feature tree-shaking.\n\n## API discovery\n\nInspect `node_modules/@tanstack/preact-table/dist/index.d.ts` and the exported adapter declarations. Use `node_modules/@tanstack/table-core/dist/index.d.ts` for shared APIs.\n","packages/preact-table/skills/migrate-v8-to-v9/references/adapter-migration.md":"# Preact adapter migration details\n\nRead when replacing Preact table construction, reactive state, rendering, or reusable app hooks. First complete the shared checklist from `intent load @tanstack/table-core#migrate-v8-to-v9`; its references own shared feature, method, and TypeScript mappings.\n\n## Replace `useReactTable` with `useTable`\n\n```tsx\nimport {\n createSortedRowModel,\n rowSortingFeature,\n tableFeatures,\n useTable,\n} from '@tanstack/preact-table'\n\nconst features = tableFeatures({\n rowSortingFeature,\n sortedRowModel: createSortedRowModel(),\n})\nconst table = useTable({ features, columns, data })\n```\n\nV8 did not have a first-party Preact adapter; many Preact apps used `@tanstack/react-table` through `preact/compat`. V9 uses native `@tanstack/preact-table`. Remove compatibility aliases that existed only for Table after replacing the imports. Keep aliases needed by other libraries, such as React Virtual. Prefer explicit features as the end state; `stockFeatures` is only a kitchen-sink migration shortcut.\n\n## State and reactive reads\n\n| v8 | v9 |\n| --------------------------- | ------------------------------------------------------------------------------------ |\n| `table.getState()` | Reactive `table.state`, snapshot `table.store.state`, or `table.atoms..get()` |\n| Top-level `onStateChange` | Per-slice callbacks or `table.store.subscribe()` |\n| Whole-component state reads | Custom second-argument selector, `table.Subscribe`, or atom source |\n\nThe default `useTable` selector subscribes the component to all registered state. Pass a selector for `table.state`, or `() => null` and subscribe lower:\n\n```tsx\nconst table = useTable(options, () => null)\n\n\n {selection => {Object.keys(selection).length} selected}\n\n```\n\nControlled `state` plus per-slice `on[State]Change` remains supported. For app-owned atoms, use `useCreateAtom`/`useSelector` from `@tanstack/preact-store` and pass them through `options.atoms`. An external atom wins over `state` for the same slice; do not mirror both ownership models.\n\n## Rendering and composition\n\n- Replace React-adapter `flexRender(def, context)` with `` or standalone ``; the function remains for advanced cases.\n- Use `tableOptions()` for typed reusable option fragments.\n- Use `createTableHook({ features, ...defaults })` for repeated app table conventions; it returns native app helpers such as `useAppTable` and `createAppColumnHelper`.\n\nFor detailed controlled wiring or tracking failures, read [table state](../../table-state/SKILL.md). For reusable contexts or components, read [app-hook composition](../../getting-started/references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/preact-table/dist/index.d.ts` and its exported declarations for construction, rendering, and app hooks.\n\n## Sources\n\n- `TanStack/table:docs/framework/preact/guide/migrating.md`\n- `TanStack/table:packages/preact-table/src/index.ts`\n- `TanStack/table:examples/preact/basic-use-table`\n","packages/preact-table/skills/table-state/SKILL.md":"---\nname: table-state\ndescription: Read and control Table v9 state in preact. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/preact-table'\n library_version: '9.3.1'\n framework: preact\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/preact/guide/table-state.md\n - TanStack/table:examples/preact/basic-subscribe\n - TanStack/table:packages/preact-table/src/useTable.ts\n---\n\n# Preact table state\n\nBefore starting, run `intent load @tanstack/table-core#table-state` for shared ownership, initialization, updates, and resets. State repair does not require loading setup guidance.\n\n## Read reactive state\n\n`useTable` selects all registered state by default. Its optional second-argument selector controls rerenders and the shape of `table.state`. `table.atoms..get()` and `table.store.state` are current snapshots, not Preact subscriptions.\n\nUse selected `table.state` in the owner render. For narrower boundaries, use `table.Subscribe` or `useSelector` from `@tanstack/preact-store`. Without `source`, `table.Subscribe` selects from `table.store`; with `source`, it subscribes to that atom or store. Start with the default selector until render cost requires narrowing.\n\n## Control a slice\n\nKeep features, columns, and data stable. Register the feature that owns the controlled slice. This example controls pagination without adding client row processing:\n\n```tsx\nimport { useState } from 'preact/hooks'\nimport {\n rowPaginationFeature,\n tableFeatures,\n useTable,\n type PaginationState,\n} from '@tanstack/preact-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nexport function PageControl() {\n const [pagination, setPagination] = useState({\n pageIndex: 0,\n pageSize: 20,\n })\n const table = useTable({\n features,\n columns,\n data,\n state: { pagination },\n onPaginationChange: setPagination,\n })\n return (\n \n )\n}\n```\n\nThe Preact setter accepts both a value and a functional updater. Supply the current `state.pagination` together with `onPaginationChange`; a callback alone does not keep the table synchronized.\n\nFor an externally owned atom, create it with `useCreateAtom` from `@tanstack/preact-store`, pass it in `atoms.`, and subscribe with `useSelector` where other UI needs its value.\n\n## Reactive boundaries\n\nUse native `@tanstack/preact-store` bindings. A narrowed selector must include every state slice used by rendered builder methods, or those consumers need their own subscription.\n\nFor external-atom examples, selector dependencies, or fine-grained boundaries, read [reactivity details](references/reactivity.md). If this task changes processing features, run `intent load @tanstack/table-core#table-features` and read the relevant feature references.\n\n## API discovery\n\nInspect `node_modules/@tanstack/preact-table/dist/useTable.d.ts` and `Subscribe.d.ts`, plus the installed `@tanstack/preact-store` declarations for atom hooks.\n","packages/preact-table/skills/table-state/references/reactivity.md":"# Preact table reactive boundaries\n\nRead when optimizing subscriptions, composing external atoms, or debugging Preact-specific tracking and controlled updates. Shared ownership, initialization, and reset rules remain in `intent load @tanstack/table-core#table-state`.\n\n## Example context\n\n```tsx\nconst table = useTable({ features, columns, data }, (state) => ({\n pagination: state.pagination,\n}))\nreturn {table.state.pagination.pageIndex + 1}\n```\n\nThe selector determines rerenders and the shape exposed on `table.state`; omission selects all registered slices.\n\n## State patterns\n\n### Fine-grained Preact subscription\n\n```tsx\nreturn (\n \n {(selection) => {Object.keys(selection).length}}\n \n)\n```\n\n### External atom ownership\n\n```tsx\nimport { useCreateAtom } from '@tanstack/preact-store'\nconst pagination = useCreateAtom({ pageIndex: 0, pageSize: 20 })\nconst table = useTable({ features, columns, data, atoms: { pagination } })\n```\n\n## Common mistakes\n\n### HIGH Reading snapshots as subscriptions\n\nWrong:\n\n```tsx\nconst page = table.store.state.pagination.pageIndex\n```\n\nCorrect:\n\n```tsx\nconst page = table.state.pagination.pageIndex\n```\n\nStore and atom `.get()` reads are snapshots; selected `table.state` or `Subscribe` connects a Preact render.\n\nSource: `packages/preact-table/src/useTable.ts`\n\n### HIGH Controlling only the callback\n\nWrong:\n\n```tsx\nuseTable({ features, columns, data, onPaginationChange: setPagination })\n```\n\nCorrect:\n\n```tsx\nuseTable({\n features,\n columns,\n data,\n state: { pagination },\n onPaginationChange: setPagination,\n})\n```\n\nThe callback must write into the value supplied for that controlled slice.\n\nSource: `docs/framework/preact/guide/table-state.md`\n\n### MEDIUM Narrowing away rendered dependencies\n\nWrong:\n\n```tsx\nconst table = useTable(options, (state) => ({ pagination: state.pagination }))\nreturn table.getSelectedRowModel().rows.length\n```\n\nCorrect:\n\n```tsx\nconst table = useTable(options, (state) => ({\n pagination: state.pagination,\n rowSelection: state.rowSelection,\n}))\nreturn table.getSelectedRowModel().rows.length\n```\n\nIf render output depends on selection, the owning render boundary must subscribe to it directly or via `Subscribe`.\n\nSource: `examples/preact/basic-subscribe`\n\n## API discovery\n\nInspect `node_modules/@tanstack/preact-table/dist/useTable.d.ts` and `Subscribe.d.ts`; use `@tanstack/preact-store` rather than React Store hooks.\n\n## Sources\n\n- `TanStack/table:docs/framework/preact/guide/table-state.md`\n- `TanStack/table:examples/preact/basic-subscribe`\n- `TanStack/table:packages/preact-table/src/useTable.ts`\n","packages/react-table-devtools/README.md":"","packages/react-table-devtools/skills/devtools/SKILL.md":"---\nname: devtools\ndescription: >\n Connect React Table v9 instances to Devtools with tableDevtoolsPlugin and useTanStackTableDevtools. Load for missing Table panels, registration lifecycle, required options.key, enabled state, or development versus explicit production exports.\nmetadata:\n type: framework\n library: '@tanstack/react-table-devtools'\n framework: react\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\n - '@tanstack/table-devtools#devtools'\nsources:\n - 'TanStack/table:docs/devtools.md'\n - 'TanStack/table:packages/react-table-devtools/src/index.ts'\n - 'TanStack/table:packages/react-table-devtools/src/useTanStackTableDevtools.ts'\n---\n\nThis skill builds on @tanstack/table-core#core and @tanstack/table-devtools#devtools.\n\n## Setup\n\n```tsx\nimport { TanStackDevtools } from '@tanstack/react-devtools'\nimport { useTable, tableFeatures } from '@tanstack/react-table'\nimport {\n tableDevtoolsPlugin,\n useTanStackTableDevtools,\n} from '@tanstack/react-table-devtools'\n\nconst features = tableFeatures({})\nconst columns = [{ accessorKey: 'id' }]\nconst data: Array<{ id: string }> = []\n\nexport function App() {\n const table = useTable({\n key: 'users-table',\n features,\n columns,\n data,\n })\n useTanStackTableDevtools(table)\n return \n}\n```\n\n## Hooks and Components\n\nUse `useTanStackTableDevtools(table, { enabled })` immediately after creating the table. Mount one TanStackDevtools host with `tableDevtoolsPlugin()` near the application root.\n\n## Common Mistakes\n\n### HIGH Hook receives a keyless table\n\nWrong: create the table without `key` and expect the hook to infer a name.\n\nCorrect: set a unique `key` in table options before calling the hook.\n\nCore target registration skips keyless tables.\n\nSource: TanStack/table:docs/devtools.md\n\n### HIGH Hook called conditionally\n\nWrong: call `useTanStackTableDevtools` only inside an `if` branch.\n\nCorrect: call it every render and pass `{ enabled: condition }`.\n\nThe hook owns React effect registration and cleanup.\n\nSource: TanStack/table:packages/react-table-devtools/src/useTanStackTableDevtools.ts\n\n### MEDIUM Default import expected in production\n\nWrong: expect the normal hook/plugin/panel to inspect production tables.\n\nCorrect: keep normal guidance development-only; use the `/production` entrypoint only when explicitly required.\n\nThe default index selects no-op implementations outside development.\n\nSource: TanStack/table:packages/react-table-devtools/src/index.ts\n\n## API Discovery\n\nInspect `node_modules/@tanstack/react-table-devtools/dist/index.d.ts` and `useTanStackTableDevtools.d.ts` for the installed lifecycle API.\n","packages/react-table/README.md":"","packages/react-table/skills/getting-started/SKILL.md":"---\nname: getting-started\ndescription: Create and render Table v9 with the react adapter. Route reusable createTableHook components, Query and Virtual integration, and framework setup; use table-state for reactive ownership.\nmetadata:\n type: framework\n library: '@tanstack/react-table'\n library_version: '9.3.1'\n framework: react\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/react/guide/migrating.md\n - TanStack/table:examples/react/basic-use-table\n - TanStack/table:packages/react-table/src/index.ts\n - TanStack/table:docs/framework/react/guide/composable-tables.md\n - TanStack/table:docs/framework/react/guide/table-context.md\n - TanStack/table:examples/react/composable-tables\n - TanStack/table:packages/react-table/src/createTableHook.tsx\n - TanStack/table:packages/react-table/src/createTableHookContexts.tsx\n - TanStack/table:examples/react/with-tanstack-query\n - TanStack/table:examples/react/virtualized-infinite-scrolling\n - TanStack/table:docs/framework/react/guide/pagination.md\n - TanStack/table:docs/framework/react/guide/virtualization.md\n - TanStack/table:examples/react/virtualized-rows\n - TanStack/table:examples/react/virtualized-columns\n---\n\n# React Table setup and integration\n\nBefore starting, run `intent load @tanstack/table-core#core` for the shared headless model and stable-input rules.\n\n## Setup\n\n```tsx\nimport { useState } from 'react'\nimport {\n createColumnHelper,\n tableFeatures,\n useTable,\n} from '@tanstack/react-table'\n\ntype Person = { name: string; age: number }\nconst features = tableFeatures({})\nconst helper = createColumnHelper()\nconst columns = helper.columns([\n helper.accessor('name', { header: 'Name' }),\n helper.accessor('age', { header: 'Age' }),\n])\n\nexport function PeopleTable() {\n const [data] = useState([{ name: 'Ada', age: 36 }])\n const table = useTable({ features, columns, data })\n\n return (\n \n \n {table.getHeaderGroups().map((group) => (\n \n {group.headers.map((header) => (\n \n ))}\n \n ))}\n \n \n {table.getRowModel().rows.map((row) => (\n \n {row.getAllCells().map((cell) => (\n \n ))}\n \n ))}\n \n
\n {header.isPlaceholder ? null : (\n \n )}\n
\n \n
\n )\n}\n```\n\nTable produces models and state; React owns the semantic markup, styles, event affordances, and accessibility.\n\n## Essential constraints\n\nUse `useTable` for v9. Keep `features`, `columns`, and fallback data at module scope or in stable state/memos. A new `response.data ?? []` fallback invalidates row models on every render. The default selector subscribes the owner to all registered state.\n\nTable owns models and state. The application owns markup, CSS, interactions, and accessibility. Core-only tables use `row.getAllCells()`; visibility-aware methods need `columnVisibilityFeature`. Optional state and APIs require their features. Put row-model slots after their prerequisite features in `tableFeatures()`.\n\n## Load by task\n\n- For repeated features, defaults, typed contexts, or component registries, read [reusable app hooks](references/create-table-hook.md).\n- For Query-backed data, server pages, sorting, filtering, or request keys, read [TanStack Query integration](references/with-tanstack-query.md).\n- For virtual rows, columns, dynamic measurement, or infinite scrolling, read [TanStack Virtual integration](references/with-tanstack-virtual.md).\n- For controlled state, tracked reads, or render subscriptions, read [table state](../table-state/SKILL.md).\n- For feature registration, missing feature APIs, or processing ownership, run `intent load @tanstack/table-core#table-features` and read only references needed by the task.\n- For v8 code, read the [migration checklist](../migrate-v8-to-v9/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/react-table/dist/index.d.ts`, then the exported adapter declarations for the installed version. Inspect optional core APIs under `node_modules/@tanstack/table-core/dist/features/`.\n","packages/react-table/skills/getting-started/references/create-table-hook.md":"# Reusable React table hooks\n\nUse this reference when multiple React tables share features, defaults, or registered components. Keep one-off tables on `useTable`. For controlled state or subscription changes, read [table state](../../table-state/SKILL.md).\n\n## Setup\n\n```tsx\nimport {\n createTableHook,\n rowSelectionFeature,\n tableFeatures,\n} from '@tanstack/react-table'\n\nexport const { createAppColumnHelper, useAppTable, useTableContext } =\n createTableHook({\n features: tableFeatures({ rowSelectionFeature }),\n getRowId: (row: { id: string }) => row.id,\n })\n```\n\nKeep this factory in an infrastructure module. It binds feature types and defaults once while each `useAppTable` call still supplies its own data, columns, state, and initial state.\n\n## Core patterns\n\n### Infer columns through the bound helper\n\n```tsx\ntype Person = { id: string; name: string }\nconst helper = createAppColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n\nfunction People({ data }: { data: Person[] }) {\n const table = useAppTable({ data, columns })\n return (\n \n
{table.getRowModel().rows.length}
\n \n )\n}\n```\n\n`AppTable` takes ordinary JSX children when it has no selector. Function children are only valid with a selector:\n\n```tsx\n state.rowSelection}>\n {(rowSelection) => {Object.keys(rowSelection).length}}\n\n```\n\n### Read registered context instead of drilling props\n\n```tsx\nfunction RowCount() {\n const table = useTableContext()\n return {table.getRowModel().rows.length}\n}\n```\n\nRegister reusable table/cell/header components in the factory and consume them under their matching `App*` provider.\n\n### Isolate genuinely nested table setups\n\nThe default module-scoped contexts are HMR-stable, and normal provider scoping already isolates sibling tables. Separate `createTableHook` calls still use those shared default contexts, so nested providers can silently resolve a consumer to the inner table. Create scoped contexts only when different table setups are nested:\n\n```tsx\nimport {\n createTableHook,\n createTableHookContexts,\n rowSelectionFeature,\n tableFeatures,\n} from '@tanstack/react-table'\n\nconst features = tableFeatures({ rowSelectionFeature })\nconst { tableContext, cellContext, headerContext } =\n createTableHookContexts()\n\nexport const app = createTableHook({\n features,\n tableContext,\n cellContext,\n headerContext,\n})\n```\n\nPrefer context hooks returned by `createTableHook`; they include the registered component maps in their types. Hooks returned directly by `createTableHookContexts` know only `TFeatures` and are useful from modules that cannot import the completed factory.\n\n## Common mistakes\n\n### Choose a factory for repeated conventions\n\nA factory for shared conventions:\n\n```tsx\nconst { useAppTable } = createTableHook({ features: tableFeatures({}) })\n```\n\nStandalone construction for a one-off table:\n\n```tsx\nconst table = useTable({ features, columns, data })\n```\n\nA factory adds an app-wide abstraction; standalone construction is clearer without shared conventions.\n\nSource: `docs/framework/react/guide/composable-tables.md`\n\n### HIGH Creating the factory during render\n\nWrong:\n\n```tsx\nfunction People() {\n const app = createTableHook({ features })\n const table = app.useAppTable({ data, columns })\n return (\n \n
\n \n )\n}\n```\n\nCorrect:\n\n```tsx\nconst app = createTableHook({ features })\nfunction People() {\n const table = app.useAppTable({ data, columns })\n return (\n \n
\n \n )\n}\n```\n\nCreating a new factory closure during render makes hook configuration and component registries unstable. Keep the factory and its bound hook identity at module scope.\n\nSource: `packages/react-table/src/createTableHook.tsx`\n\n### HIGH Closing a circular HMR import\n\nWrong:\n\n```tsx\n// table.ts imports RowCount; RowCount.tsx imports useTableContext from table.ts\nexport const app = createTableHook({ features, tableComponents: { RowCount } })\n```\n\nCorrect:\n\n```tsx\n// components.tsx receives the exported hook through a cycle-free module boundary\nexport const app = createTableHook({ features })\n```\n\nKeep the factory dependency graph acyclic or inject components from a separate composition root; circular registries can break Vite HMR.\n\nSource: `https://github.com/TanStack/table/issues/6348`\n\n## API discovery\n\nInspect `node_modules/@tanstack/react-table/dist/createTableHook.d.ts` and `createTableHookContexts.d.ts` for the exact returned helpers, component registries, wrapper props, and scoped context types.\n\n## Sources\n\n- `TanStack/table:docs/framework/react/guide/composable-tables.md`\n- `TanStack/table:docs/framework/react/guide/table-context.md`\n- `TanStack/table:examples/react/composable-tables`\n- `TanStack/table:packages/react-table/src/createTableHook.tsx`\n- `TanStack/table:packages/react-table/src/createTableHookContexts.tsx`\n","packages/react-table/skills/getting-started/references/with-tanstack-query.md":"# React Table with TanStack Query\n\nUse this reference when Query owns server data for a React table. Read [table state](../../table-state/SKILL.md) for reactive ownership. Run `intent load @tanstack/table-core#table-features` and read its client/server reference before choosing manual processing stages. Query fetches rows already processed by every server-owned stage; manual flags only bypass Table processing.\n\n## Setup\n\n```tsx\nimport { keepPreviousData, useQuery } from '@tanstack/react-query'\nimport { useCreateAtom, useSelector } from '@tanstack/react-store'\nimport {\n rowPaginationFeature,\n tableFeatures,\n useTable,\n} from '@tanstack/react-table'\nimport type { PaginationState } from '@tanstack/react-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst emptyRows: Array<{ id: string }> = []\n\nfunction ServerTable() {\n const paginationAtom = useCreateAtom({\n pageIndex: 0,\n pageSize: 20,\n })\n const pagination = useSelector(paginationAtom, (value) => value)\n const result = useQuery({\n queryKey: ['people', pagination],\n queryFn: async () =>\n fetch(\n `/api/people?page=${pagination.pageIndex}&size=${pagination.pageSize}`,\n ).then(\n (r) =>\n r.json() as Promise<{\n rows: Array<{ id: string }>\n rowCount: number\n }>,\n ),\n placeholderData: keepPreviousData,\n })\n return useTable({\n features,\n columns,\n data: result.data?.rows ?? emptyRows,\n rowCount: result.data?.rowCount,\n atoms: { pagination: paginationAtom },\n manualPagination: true,\n })\n}\n```\n\n## Core patterns\n\n### Put every server-owned slice in the key\n\n```tsx\nconst result = useQuery({\n queryKey: ['people', pagination, sorting, columnFilters],\n queryFn: () => fetchPeople({ pagination, sorting, columnFilters }),\n})\n```\n\n### Feed the query result directly to Table\n\n```tsx\nconst table = useTable({\n features,\n columns,\n data: result.data?.rows ?? emptyRows,\n})\n```\n\n## Common mistakes\n\n### HIGH Duplicating query rows into state\n\nWrong:\n\n```tsx\nuseEffect(() => setRows(result.data?.rows ?? []), [result.data])\nconst table = useTable({ features, columns, data: rows })\n```\n\nCorrect:\n\n```tsx\nconst table = useTable({\n features,\n columns,\n data: result.data?.rows ?? emptyRows,\n})\n```\n\nThe second state layer can lag behind the query cache and creates an extra synchronization path.\n\nSource: `examples/react/with-tanstack-query`\n\n### HIGH Omitting state from the query key\n\nWrong:\n\n```tsx\nuseQuery({ queryKey: ['people'], queryFn: () => fetchPeople({ pagination }) })\n```\n\nCorrect:\n\n```tsx\nuseQuery({\n queryKey: ['people', pagination],\n queryFn: () => fetchPeople({ pagination }),\n})\n```\n\nQuery otherwise reuses cache entries for different server requests.\n\nSource: `examples/react/with-tanstack-query`\n\n### HIGH Expecting manual mode to fetch\n\nWrong:\n\n```tsx\nuseTable({ features, columns, data, manualPagination: true })\n```\n\nCorrect:\n\n```tsx\nuseTable({\n features,\n columns,\n data: result.data?.rows ?? emptyRows,\n rowCount: result.data?.rowCount,\n manualPagination: true,\n})\n```\n\n`manualPagination` only bypasses client pagination; the application must fetch a processed page and provide its total count.\n\nSource: `docs/framework/react/guide/pagination.md`\n\n### Choose the loading transition\n\nTo show a loading transition for each page:\n\n```tsx\nuseQuery({\n queryKey: ['people', pagination],\n queryFn: () => fetchPeople({ pagination }),\n})\n```\n\nTo keep the previous page visible while fetching:\n\n```tsx\nuseQuery({\n queryKey: ['people', pagination],\n queryFn: () => fetchPeople({ pagination }),\n placeholderData: keepPreviousData,\n})\n```\n\nPreserve the previous page intentionally when an empty loading transition is undesirable.\n\nSource: `examples/react/with-tanstack-query`\n\n## API discovery\n\nInspect `node_modules/@tanstack/react-table/dist/index.d.ts` and the relevant installed core feature declarations; inspect the installed `@tanstack/react-query` declarations for current query option types.\n\n## Sources\n\n- `TanStack/table:examples/react/with-tanstack-query`\n- `TanStack/table:examples/react/virtualized-infinite-scrolling`\n- `TanStack/table:docs/framework/react/guide/pagination.md`\n","packages/react-table/skills/getting-started/references/with-tanstack-virtual.md":"# React Table with TanStack Virtual\n\nUse this reference when virtualizing React table rows or columns. Virtual consumes the final Table model in the renderer; it is not a Table feature. For reactive model or subscription problems, read [table state](../../table-state/SKILL.md). Register `columnSizingFeature` before calling sizing APIs, and `columnVisibilityFeature` before visibility-aware APIs.\n\n## Setup\n\n```tsx\nimport { useRef } from 'react'\nimport { useVirtualizer } from '@tanstack/react-virtual'\n\nfunction VirtualBody({ table }: { table: any }) {\n const scrollRef = useRef(null)\n const rows = table.getRowModel().rows\n const virtualizer = useVirtualizer({\n count: rows.length,\n getScrollElement: () => scrollRef.current,\n estimateSize: () => 36,\n getItemKey: (index) => rows[index].id,\n overscan: 5,\n })\n return (\n
\n
\n {virtualizer.getVirtualItems().map((item) => (\n \n {rows[item.index].getAllCells().map((cell: any) => (\n \n \n \n ))}\n
\n ))}\n
\n
\n )\n}\n```\n\n## Core patterns\n\n### Keep the virtualizer near its render loop\n\n```tsx\nconst rows = table.getRowModel().rows\nconst rowVirtualizer = useVirtualizer({\n count: rows.length,\n getScrollElement: () => container.current,\n estimateSize: () => 36,\n})\n```\n\nThis limits unrelated parent updates and keeps count, measurement, and rendered items together.\n\n### Use Table sizes in renderer CSS\n\n```tsx\n\n \n\n```\n\nTable calculates size state; the renderer must apply it.\n\n## Common mistakes\n\n### HIGH Registering Virtual as a feature\n\nWrong:\n\n```tsx\nconst features = tableFeatures({ rowVirtualizer: useVirtualizer(options) })\n```\n\nCorrect:\n\n```tsx\nconst rows = table.getRowModel().rows\nconst virtualizer = useVirtualizer({\n count: rows.length,\n getScrollElement: () => scrollRef.current,\n estimateSize: () => 36,\n})\n```\n\nVirtual controls rendering geometry and is not a Table feature or row model.\n\nSource: `docs/framework/react/guide/virtualization.md`\n\n### HIGH Virtualizing raw input data\n\nWrong:\n\n```tsx\nconst virtualizer = useVirtualizer({\n count: data.length,\n getScrollElement,\n estimateSize,\n})\n```\n\nCorrect:\n\n```tsx\nconst rows = table.getRowModel().rows\nconst virtualizer = useVirtualizer({\n count: rows.length,\n getScrollElement,\n estimateSize,\n})\n```\n\nRaw data ignores filtering, sorting, expansion, grouping, and pagination already applied by Table.\n\nSource: `examples/react/virtualized-rows`\n\n### HIGH Measuring against incomplete identity\n\nWrong:\n\n```tsx\n{row.id}\n```\n\nCorrect:\n\n```tsx\n\n {row.id}\n\n```\n\nDynamic measurement needs the virtual index, and stable row identity prevents measurements moving to the wrong row.\n\nSource: `examples/react/virtualized-rows`\n\n### HIGH Omitting positioning geometry\n\nWrong:\n\n```tsx\n{virtualizer.getVirtualItems().map(renderRow)}\n```\n\nCorrect:\n\n```tsx\n\n {virtualizer.getVirtualItems().map(renderRow)}\n\n```\n\nVirtual only computes positions; the renderer must provide total spacer size and position items using each virtual start.\n\nSource: `examples/react/virtualized-rows`\n\n## API discovery\n\nInspect `node_modules/@tanstack/react-table/dist/index.d.ts` for Table render APIs and installed `node_modules/@tanstack/react-virtual/dist/` for the exact virtualizer options. Copy layout contracts from the maintained example matching rows, columns, or infinite loading.\n\n## Sources\n\n- `TanStack/table:docs/framework/react/guide/virtualization.md`\n- `TanStack/table:examples/react/virtualized-rows`\n- `TanStack/table:examples/react/virtualized-columns`\n- `TanStack/table:examples/react/virtualized-infinite-scrolling`\n","packages/react-table/skills/migrate-v8-to-v9/SKILL.md":"---\nname: migrate-v8-to-v9\ndescription: Migrate react Table v8 to v9. Audit framework construction, rendering, state, and app hooks, with shared API changes in the core migration skill.\nmetadata:\n type: lifecycle\n library: '@tanstack/react-table'\n library_version: '9.3.1'\n framework: react\nrequires:\n - '@tanstack/table-core#migrate-v8-to-v9'\nsources:\n - TanStack/table:docs/framework/react/guide/migrating.md\n - TanStack/table:packages/react-table/src/index.ts\n - TanStack/table:packages/react-table/src/legacy.ts\n - TanStack/table:examples/react/basic-use-table\n---\n\n# React v8-to-v9 migration checklist\n\nBefore starting, run `intent load @tanstack/table-core#migrate-v8-to-v9`. Audit its entire shared checklist and read the detailed core mappings for APIs present in the application. This checklist adds the React-specific changes.\n\nFramework prerequisite: React 18 or newer (`react >=18`).\n\n## Adapter audit\n\n- [ ] Replace `useReactTable` with `useTable`; remove any temporary `useLegacyTable` from `@tanstack/react-table/legacy`.\n- [ ] Keep model inputs stable and use explicit `tableFeatures` plus its row-model slots. Audit every shared change through the core checklist.\n- [ ] Replace render reads with selected `table.state`, `table.Subscribe`, or `useSelector`. Atom/store snapshots alone do not subscribe React.\n- [ ] Pair each controlled `state` slice with its updater callback, or supply a stable React Store atom. Remove the global `onStateChange` option.\n- [ ] Check compiler-memoized children hiding builder-method reads; subscribe inside the child or pass the selected value to it.\n- [ ] Use `table.FlexRender` or standalone `FlexRender` where appropriate; `flexRender` remains supported.\n- [ ] Introduce `tableOptions` or `createTableHook` only for repeated conventions; preserve app wrapper and typed-context boundaries.\n\n## Load the affected details\n\nWhen the audit finds old React construction, state, rendering, or app-hook code, read [adapter migration details](references/adapter-migration.md) before editing it. For a replacement render scaffold, read [getting started](../getting-started/SKILL.md). For controlled or stale state after migration, read [table state](../table-state/SKILL.md).\n\nShared pinning, sizing, sorting, selection, prototype-method, type, and registry changes stay in the core migration references. Renaming `useReactTable` alone does not complete the migration.\n\n## Verify the migration\n\n- [ ] Type-check against the installed v9 adapter and exercise every enabled client/manual feature flow.\n- [ ] Verify external state writes, reactive data replacement, and the framework rendering paths changed above.\n- [ ] Complete the core checklist, including layout and selection behavior when those features are used.\n- [ ] Replace temporary `stockFeatures` when the target is explicit feature tree-shaking and remove `useLegacyTable`.\n\n## API discovery\n\nInspect `node_modules/@tanstack/react-table/dist/index.d.ts` and the exported adapter declarations. Use `node_modules/@tanstack/table-core/dist/index.d.ts` for shared APIs.\n","packages/react-table/skills/migrate-v8-to-v9/references/adapter-migration.md":"# React adapter migration details\n\nRead when replacing React table construction, reactive state, rendering, or reusable app hooks. First complete the shared checklist from `intent load @tanstack/table-core#migrate-v8-to-v9`; its references own shared feature, method, and TypeScript mappings.\n\n## Replace `useReactTable` with `useTable`\n\n```tsx\nimport {\n columnFilteringFeature,\n createFilteredRowModel,\n createSortedRowModel,\n filterFn_includesString,\n rowSortingFeature,\n sortFn_alphanumeric,\n tableFeatures,\n useTable,\n} from '@tanstack/react-table'\n\nconst features = tableFeatures({\n columnFilteringFeature,\n rowSortingFeature,\n filteredRowModel: createFilteredRowModel(),\n sortedRowModel: createSortedRowModel(),\n filterFns: { includesString: filterFn_includesString },\n sortFns: { alphanumeric: sortFn_alphanumeric },\n})\n\nconst table = useTable({ features, columns, data })\n```\n\nPrefer explicit features as the end state. `stockFeatures` is a useful kitchen-sink migration shortcut, but bundles every stock feature. Do not target `useLegacyTable`: it is deprecated, React-only, exported from `@tanstack/react-table/legacy`, and intended only to keep an existing migration moving temporarily.\n\n## State and reactive reads\n\n| v8 | v9 |\n| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `table.getState()` | `table.state`, `table.store.state`, or `table.atoms..get()` |\n| Top-level `onStateChange` | Per-slice `onSortingChange`, `onPaginationChange`, etc., or `table.store.subscribe()` for all changes |\n| Broad component updates | Default `useTable` selector still subscribes to all registered state; narrow with a selector, `table.Subscribe`, or `useSelector(table.atoms.)` |\n| Framework state only | Optional writable atoms through `options.atoms` |\n\nControlled `state` plus per-slice callbacks remains valid:\n\n```tsx\nconst [sorting, setSorting] = useState([])\nconst table = useTable({\n features,\n columns,\n data,\n state: { sorting },\n onSortingChange: setSorting,\n})\n```\n\nFor fine-grained rendering, pass a selector as the second `useTable` argument or select closer to the consumer:\n\n```tsx\nconst table = useTable(options, () => null)\n\n state.pagination}>\n {pagination => Page {pagination.pageIndex + 1}}\n\n```\n\nExternal atoms override the same slice in `state`; table setters write directly to them, and `table.reset()` does not reset them. Do not supply an atom, controlled value, and callback for the same slice without intentionally applying that precedence.\n\nFor React Compiler memoized children hiding builder reads, put `Subscribe` inside the child or pass its selected value as a changing prop. Read [React state](../../table-state/SKILL.md) before adding such a boundary.\n\n## Rendering and composition\n\n- `flexRender(def, context)` still works. Prefer ``, ``, or the standalone `` for the v9 component form.\n- Use `tableOptions()` to type reusable partial option objects.\n- Use `createTableHook()` only when several tables share features, row models, defaults, and registered components. It returns app-specific helpers such as `useAppTable`, `createAppColumnHelper`, and table/cell/header context hooks; it is not required for one-off tables.\n\nFor detailed controlled wiring or tracking failures, read [table state](../../table-state/SKILL.md). For reusable contexts or components, read [app-hook composition](../../getting-started/references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/react-table/dist/index.d.ts` and its exported declarations for construction, rendering, and app hooks. Inspect `dist/legacy.d.ts` only to identify deprecated bridge code that still needs removal.\n\n## Sources\n\n- `TanStack/table:docs/framework/react/guide/migrating.md`\n- `TanStack/table:packages/react-table/src/index.ts`\n- `TanStack/table:packages/react-table/src/legacy.ts`\n- `TanStack/table:examples/react/basic-use-table`\n","packages/react-table/skills/table-state/SKILL.md":"---\nname: table-state\ndescription: Read and control Table v9 state in react. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/react-table'\n library_version: '9.3.1'\n framework: react\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/react/guide/table-state.md\n - TanStack/table:docs/framework/react/guide/react-compiler.md\n - TanStack/table:examples/react/basic-subscribe\n - TanStack/table:packages/react-table/src/Subscribe.ts\n - TanStack/table:packages/react-table/src/useTable.ts\n---\n\n# React table state\n\nBefore starting, run `intent load @tanstack/table-core#table-state` for shared ownership, initialization, updates, and resets. State repair does not require loading setup guidance.\n\n## Read reactive state\n\n`useTable` selects all registered state by default. Its optional second-argument selector controls rerenders and the shape of `table.state`. `table.atoms..get()` and `table.store.state` are current snapshots, not React subscriptions.\n\nUse selected `table.state` in the owner render. For narrower boundaries, use `table.Subscribe` or `useSelector` from `@tanstack/react-store`. Without `source`, `table.Subscribe` selects from `table.store`; with `source`, it subscribes to that atom or store. Start with the default selector until render cost requires narrowing.\n\n## Control a slice\n\nKeep features, columns, and data stable. Register the feature that owns the controlled slice. This example controls pagination without adding client row processing:\n\n```tsx\nimport { useState } from 'react'\nimport {\n rowPaginationFeature,\n tableFeatures,\n useTable,\n type PaginationState,\n} from '@tanstack/react-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nexport function PageControl() {\n const [pagination, setPagination] = useState({\n pageIndex: 0,\n pageSize: 20,\n })\n const table = useTable({\n features,\n columns,\n data,\n state: { pagination },\n onPaginationChange: setPagination,\n })\n return (\n \n )\n}\n```\n\nThe React setter accepts both a value and a functional updater. Supply the current `state.pagination` together with `onPaginationChange`; a callback alone does not keep the table synchronized.\n\nFor an externally owned atom, create it with `useCreateAtom` from `@tanstack/react-store`, pass it in `atoms.`, and subscribe with `useSelector` where other UI needs its value.\n\n## Reactive boundaries\n\nFor React Compiler memoized children, put `Subscribe` inside the component hiding builder-method reads or pass the selected value as a changing prop. An outer subscription that ignores its value cannot refresh a stable child. In core-typed cell/header contexts, import standalone `Subscribe`.\n\nFor external-atom examples, selector dependencies, or fine-grained boundaries and React Compiler problems, read [reactivity details](references/reactivity.md). If this task changes processing features, run `intent load @tanstack/table-core#table-features` and read the relevant feature references.\n\n## API discovery\n\nInspect `node_modules/@tanstack/react-table/dist/useTable.d.ts` and `Subscribe.d.ts`, plus the installed `@tanstack/react-store` declarations for atom hooks.\n","packages/react-table/skills/table-state/references/reactivity.md":"# React table reactive boundaries\n\nRead when optimizing subscriptions, composing external atoms, or debugging React-specific tracking and controlled updates. Shared ownership, initialization, and reset rules remain in `intent load @tanstack/table-core#table-state`.\n\n## Example context\n\n```tsx\nimport {\n rowSelectionFeature,\n tableFeatures,\n useTable,\n} from '@tanstack/react-table'\n\nconst features = tableFeatures({ rowSelectionFeature })\n\nexport function SelectionCount({\n data,\n columns,\n}: {\n data: Array<{ id: string }>\n columns: any[]\n}) {\n const table = useTable({ features, data, columns }, (state) => ({\n rowSelection: state.rowSelection,\n }))\n return {Object.keys(table.state.rowSelection).length}\n}\n```\n\nThe optional selector controls which state changes rerender the component and which selected fields appear on `table.state`. Omitting it selects all registered slices.\n\n## State patterns\n\n### Subscribe at the expensive boundary\n\n```tsx\nfunction SelectedRows({\n table,\n}: {\n table: ReturnType>\n}) {\n return (\n state.rowSelection}>\n {(rowSelection) => {Object.keys(rowSelection).length}}\n \n )\n}\n```\n\nAt a top-level component holding the adapter's table instance, `table.Subscribe` selects from `table.store`. Use this after measuring or when the React Compiler cannot see state reads hidden behind table builder methods.\n\n### Control a slice with an external atom\n\n```tsx\nimport { useCreateAtom } from '@tanstack/react-store'\n\nconst selection = useCreateAtom>({})\nconst table = useTable({\n features,\n columns,\n data,\n atoms: { rowSelection: selection },\n})\n```\n\nAn external atom is both ownership and subscription source; it avoids value-or-updater glue.\n\n### Control a slice with React state\n\n```tsx\nconst [rowSelection, setRowSelection] = useState>({})\nconst table = useTable({\n features,\n columns,\n data,\n state: { rowSelection },\n onRowSelectionChange: setRowSelection,\n})\n```\n\n## Common mistakes\n\n### HIGH Treating a snapshot as subscription\n\nWrong:\n\n```tsx\nconst count = Object.keys(table.atoms.rowSelection.get()).length\n```\n\nCorrect:\n\n```tsx\nconst count = Object.keys(table.state.rowSelection).length\n```\n\n`atoms.*.get()` and `table.store.state` return current values but do not subscribe a React render.\n\nSource: `packages/react-table/src/useTable.ts`\n\n### HIGH Supplying only the change callback\n\nWrong:\n\n```tsx\nconst table = useTable({\n features,\n columns,\n data,\n onRowSelectionChange: setRowSelection,\n})\n```\n\nCorrect:\n\n```tsx\nconst table = useTable({\n features,\n columns,\n data,\n state: { rowSelection },\n onRowSelectionChange: setRowSelection,\n})\n```\n\nOnce a callback takes ownership, the corresponding controlled value must be written back.\n\nSource: `docs/framework/react/guide/table-state.md`\n\n### HIGH Hiding builder reads from the React Compiler\n\nWrong:\n\n```tsx\nfunction SelectionCell({ row }) {\n return (\n \n )\n}\n```\n\nCorrect:\n\n```tsx\nimport { Subscribe } from '@tanstack/react-table'\n\nfunction SelectionCell({ row }) {\n return (\n selection[row.id]}\n >\n {(selected) => (\n \n )}\n \n )\n}\n```\n\nWith the default selector, `useTable` returns a fresh React-facing table reference on state changes. The remaining hazard is a nested component receiving only a stable core table, row, cell, column, or header object and hiding a state read behind one of its methods. Keep `Subscribe` inside that component, or pass its selected value to the child as a changing prop. An outer `Subscribe` that ignores the selected value is not enough.\n\nInside cell and header render contexts, `table` is typed as core `Table`, so import standalone `Subscribe`. Use `source={table.store}` with a selector for multiple slices, or a specific atom for the narrowest boundary.\n\nSource: `docs/framework/react/guide/react-compiler.md`\n\n### Choose boundaries after measuring\n\nAn extra subscription boundary:\n\n```tsx\n\n {() => }\n\n```\n\nWith the default owner subscription, start with:\n\n```tsx\n\n```\n\nDefault `useTable` state selection is the simpler starting point; introduce fine-grained boundaries where measurement or compiler behavior justifies them.\n\nSource: `docs/framework/react/guide/table-state.md`\n\n## API discovery\n\nInspect `node_modules/@tanstack/react-table/dist/useTable.d.ts` and `Subscribe.d.ts`. Core atom precedence and state slices live under `node_modules/@tanstack/table-core/dist/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/react/guide/table-state.md`\n- `TanStack/table:docs/framework/react/guide/react-compiler.md`\n- `TanStack/table:examples/react/basic-subscribe`\n- `TanStack/table:packages/react-table/src/Subscribe.ts`\n- `TanStack/table:packages/react-table/src/useTable.ts`\n","packages/solid-table-devtools/README.md":"","packages/solid-table-devtools/skills/devtools/SKILL.md":"---\nname: devtools\ndescription: >\n Connect Solid Table v9 instances to Devtools with tableDevtoolsPlugin and useTanStackTableDevtools in the proper reactive owner. Load for missing targets, required options.key, enabled state, cleanup, or development versus explicit production exports.\nmetadata:\n type: framework\n library: '@tanstack/solid-table-devtools'\n framework: solid\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\n - '@tanstack/table-devtools#devtools'\nsources:\n - 'TanStack/table:docs/devtools.md'\n - 'TanStack/table:packages/solid-table-devtools/src/index.ts'\n - 'TanStack/table:packages/solid-table-devtools/src/useTanStackTableDevtools.ts'\n---\n\nThis skill builds on @tanstack/table-core#core and @tanstack/table-devtools#devtools.\n\n## Setup\n\n```tsx\nimport { TanStackDevtools } from '@tanstack/solid-devtools'\nimport { createTable, tableFeatures } from '@tanstack/solid-table'\nimport {\n tableDevtoolsPlugin,\n useTanStackTableDevtools,\n} from '@tanstack/solid-table-devtools'\n\nconst features = tableFeatures({})\n\nexport function App() {\n const table = createTable({\n key: 'users-table',\n features,\n columns: [],\n data: [],\n })\n useTanStackTableDevtools(table)\n return \n}\n```\n\n## Hooks and Components\n\nRegister inside the component's Solid owner. Pass `{ enabled }` to the hook for conditional registration.\n\n## Common Mistakes\n\n### HIGH Registration created outside an owner\n\nWrong: call the Solid registration hook at module scope.\n\nCorrect: call it in the component that owns the table.\n\nThe hook uses Solid reactive cleanup to unregister the target.\n\nSource: TanStack/table:packages/solid-table-devtools/src/useTanStackTableDevtools.ts\n\n### HIGH Missing or reused table key\n\nWrong: omit `options.key` or share one key between mounted tables.\n\nCorrect: assign a stable unique key per live table.\n\nThe target registry skips missing keys and replaces duplicate identities.\n\nSource: TanStack/table:packages/table-devtools/src/tableTarget.ts\n\n### MEDIUM Production entrypoint assumed active\n\nWrong: expect normal Devtools exports to inspect a production table.\n\nCorrect: keep default guidance development-only; use `/production` only on explicit request.\n\nThe package index selects no-op implementations outside development.\n\nSource: TanStack/table:packages/solid-table-devtools/src/index.ts\n\n## API Discovery\n\nInspect `node_modules/@tanstack/solid-table-devtools/dist/index.d.ts`, `useTanStackTableDevtools.d.ts`, and `production.d.ts`.\n","packages/solid-table/README.md":"","packages/solid-table/skills/getting-started/SKILL.md":"","packages/solid-table/skills/getting-started/references/create-table-hook.md":"# Reusable Solid table hooks\n\nUse this reference when multiple Solid tables share features, defaults, or registered components. Keep one-off tables on `createTable`. For controlled state or subscription changes, read [table state](../../table-state/SKILL.md).\n\n## Setup\n\n```tsx\nimport {\n createTableHook,\n rowSelectionFeature,\n tableFeatures,\n} from '@tanstack/solid-table'\n\nexport const { createAppColumnHelper, createAppTable, useTableContext } =\n createTableHook({\n features: tableFeatures({ rowSelectionFeature }),\n getRowId: (row: { id: string }) => row.id,\n })\n```\n\n## Core patterns\n\n### Infer columns with the bound helper\n\n```tsx\ntype Person = { id: string; name: string }\nconst helper = createAppColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n```\n\n### Preserve per-table reactivity\n\n```tsx\nconst table = createAppTable({\n columns,\n get data() {\n return data()\n },\n})\nreturn {() => }\n```\n\n## Common mistakes\n\n### Choose a factory for repeated conventions\n\nA factory for shared conventions:\n\n```tsx\nconst app = createTableHook({ features: tableFeatures({}) })\n```\n\nStandalone construction for a one-off table:\n\n```tsx\nconst table = createTable({ features, columns, data })\n```\n\nThe factory should encode repeated app conventions rather than add ceremony.\n\nSource: `docs/framework/solid/guide/composable-tables.md`\n\n### HIGH Passing per-table snapshots\n\nWrong:\n\n```tsx\ncreateAppTable({ columns, data: data() })\n```\n\nCorrect:\n\n```tsx\ncreateAppTable({\n columns,\n get data() {\n return data()\n },\n})\n```\n\nThe getter preserves Solid tracking when the signal changes.\n\nSource: `examples/solid/composable-tables`\n\n### HIGH Reading context outside wrappers\n\nWrong:\n\n```tsx\nreturn \n```\n\nCorrect:\n\n```tsx\nreturn {() => }\n```\n\nReturned context hooks must run under the matching factory wrapper; use them instead of prop drilling registered components.\n\nSource: `packages/solid-table/src/createTableHook.tsx`\n\n## API discovery\n\nInspect `node_modules/@tanstack/solid-table/dist/createTableHook.d.ts` for exact returned names, component binding, context providers, and reactive option merging.\n\n## Sources\n\n- `TanStack/table:docs/framework/solid/guide/composable-tables.md`\n- `TanStack/table:examples/solid/composable-tables`\n- `TanStack/table:packages/solid-table/src/createTableHook.tsx`\n","packages/solid-table/skills/getting-started/references/with-tanstack-query.md":"","packages/solid-table/skills/getting-started/references/with-tanstack-virtual.md":"","packages/solid-table/skills/migrate-v8-to-v9/SKILL.md":"","packages/solid-table/skills/migrate-v8-to-v9/references/adapter-migration.md":"","packages/solid-table/skills/table-state/SKILL.md":"","packages/solid-table/skills/table-state/references/reactivity.md":"","packages/svelte-table/README.md":"","packages/svelte-table/skills/getting-started/SKILL.md":"","packages/svelte-table/skills/getting-started/references/create-table-hook.md":"","packages/svelte-table/skills/getting-started/references/with-tanstack-query.md":"","packages/svelte-table/skills/getting-started/references/with-tanstack-virtual.md":"","packages/svelte-table/skills/migrate-v8-to-v9/SKILL.md":"","packages/svelte-table/skills/migrate-v8-to-v9/references/adapter-migration.md":"","packages/svelte-table/skills/table-state/SKILL.md":"","packages/svelte-table/skills/table-state/references/reactivity.md":"","packages/table-core/README.md":"","packages/table-core/skills/core/SKILL.md":"","packages/table-core/skills/core/references/api-not-found.md":"","packages/table-core/skills/core/references/rows.md":"","packages/table-core/skills/core/references/typescript.md":"","packages/table-core/skills/custom-features/SKILL.md":"","packages/table-core/skills/custom-features/references/plugin-example.md":"","packages/table-core/skills/migrate-v8-to-v9/SKILL.md":"","packages/table-core/skills/migrate-v8-to-v9/references/architecture.md":"","packages/table-core/skills/migrate-v8-to-v9/references/feature-apis.md":"","packages/table-core/skills/migrate-v8-to-v9/references/state.md":"","packages/table-core/skills/migrate-v8-to-v9/references/typescript.md":"","packages/table-core/skills/table-features/SKILL.md":"","packages/table-core/skills/table-features/references/aggregation.md":"","packages/table-core/skills/table-features/references/cell-selection.md":"","packages/table-core/skills/table-features/references/cell-spanning.md":"","packages/table-core/skills/table-features/references/client-vs-server.md":"","packages/table-core/skills/table-features/references/column-faceting.md":"","packages/table-core/skills/table-features/references/column-filtering.md":"","packages/table-core/skills/table-features/references/column-ordering.md":"","packages/table-core/skills/table-features/references/column-pinning.md":"","packages/table-core/skills/table-features/references/column-resizing.md":"","packages/table-core/skills/table-features/references/column-sizing.md":"","packages/table-core/skills/table-features/references/column-visibility.md":"","packages/table-core/skills/table-features/references/expanding.md":"","packages/table-core/skills/table-features/references/global-filtering.md":"","packages/table-core/skills/table-features/references/grouping.md":"","packages/table-core/skills/table-features/references/pagination.md":"","packages/table-core/skills/table-features/references/row-pinning.md":"","packages/table-core/skills/table-features/references/row-selection.md":"","packages/table-core/skills/table-features/references/sorting.md":"","packages/table-core/skills/table-state/SKILL.md":"","packages/table-devtools/README.md":"","packages/table-devtools/skills/devtools/SKILL.md":"","packages/vue-table-devtools/README.md":"","packages/vue-table-devtools/skills/devtools/SKILL.md":"","packages/vue-table/README.md":"","packages/vue-table/skills/getting-started/SKILL.md":"","packages/vue-table/skills/getting-started/references/create-table-hook.md":"","packages/vue-table/skills/getting-started/references/with-tanstack-query.md":"","packages/vue-table/skills/getting-started/references/with-tanstack-virtual.md":"","packages/vue-table/skills/migrate-v8-to-v9/SKILL.md":"","packages/vue-table/skills/migrate-v8-to-v9/references/adapter-migration.md":"","packages/vue-table/skills/table-state/SKILL.md":"","packages/vue-table/skills/table-state/references/reactivity.md":""},"files":{"AGENTS.md":"# Agent Instructions\n\nBefore analyzing or changing this repository, read and follow\n[`CONTRIBUTING.md`](./CONTRIBUTING.md). Its contribution, development, testing,\npull request, and changeset requirements apply to AI-assisted work as well as\nhuman-authored work.\n\nKeep every change focused on one topic. Understand and verify all generated\ncode, run the required checks, and provide a concise pull request description\nthat follows the repository template.\n\n## Packages that cannot be upgraded yet\n\nLeave these pins alone during routine dependency bumps. They currently break\nEmber, the Svelte kitchen-sink types, or are intentionally deferred.\n\n- **TypeScript** — keep `6.0.3`. Do not bump it as part of a general upgrade.\n- **Babel 7** — Ember is not compatible with Babel 8. In `packages/ember-table`\n and every `examples/ember/*` app, keep `@babel/core`,\n `@babel/plugin-transform-runtime`, `@babel/plugin-transform-typescript`, and\n `@babel/runtime` at `7.29.7`. `@rollup/plugin-babel` `7.1.0` is the Rollup\n plugin version, not Babel itself.\n- **`@dnd-kit/abstract` and `@dnd-kit/helpers`** — keep `^0.2.3` in\n `examples/svelte/kitchen-sink-shadcn`. `@dnd-kit-svelte/svelte@0.1.6` still\n depends on the 0.2.x line. Bumping to 0.5.x installs a second copy, and\n TypeScript treats those private-field types as incompatible.\n- **Vitest and `@vitest/coverage-v8`** — keep the 4.x line (currently\n `^4.1.11` and `4.1.11`). `@analogjs/vitest-angular@2.7.2` and Angular build\n tooling do not support Vitest 5, which also removes the `vitest` `bench` export\n used by the repository benchmarks. Upgrade these together in a separate migration.\n- **Octane** — keep `0.1.36`. The 0.2.x line fails the adapter conformance\n test for synchronous owner and isolated controlled updates during a discrete event.\n- **Pacer devtools** — keep `@tanstack/react-pacer-devtools` at `0.8.0` and\n `@tanstack/solid-pacer-devtools` at `0.7.0`. The 0.14.x packages do not export\n `pacerDevtoolsPlugin`, which the Form and Router examples use.\n- **`@tanstack/preact-form`** — keep `1.30.5` in the Preact Form example.\n The 1.33.x line removes `createFormHookContexts` and `withForm`, requiring\n a separate example migration.\n- **Preact** — keep `^10.29.8`. Preact 11 fails the adapter's hook and SSR\n tests and the devtools type check. The Store and Query adapters still require\n Preact 10. Upgrade these together in a separate migration.\n- **`@tanstack/intent`** — keep `0.4.0`. The 0.5 checker compiles TS and JS\n fences without framework TypeScript configuration or surrounding context. It\n rejects valid Preact and Lit examples, class-member excerpts, and deliberately\n wrong examples. Keep the repository's content and annotated-snippet checks\n enabled while this migration is deferred.\n","packages/alpine-table/README.md":"","packages/alpine-table/skills/getting-started/SKILL.md":"---\nname: getting-started\ndescription:\n Create and render Table v9 with the alpine adapter. Route reusable createTableHook\n defaults, and framework setup; use table-state for reactive ownership.\nmetadata:\n type: framework\n library: '@tanstack/alpine-table'\n framework: alpine\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/alpine/guide/table-state.md\n - TanStack/table:examples/alpine/basic-create-table\n - TanStack/table:packages/alpine-table/src/index.ts\n - TanStack/table:docs/framework/alpine/guide/composable-tables.md\n - TanStack/table:examples/alpine/basic-app-table\n - TanStack/table:packages/alpine-table/src/createTableHook.ts\n---\n\nLoad `intent load @tanstack/table-core#core` first for the headless model, stable inputs, and column inference.\n\n## Setup\n\n```ts\nimport Alpine from 'alpinejs'\nimport {\n FlexRender,\n createTable,\n tableFeatures,\n type ColumnDef,\n} from '@tanstack/alpine-table'\n\ntype Person = { id: string; name: string }\nconst features = tableFeatures({})\nconst columns: Array> = [\n { accessorKey: 'name', header: 'Name' },\n]\n\nAlpine.data('peopleTable', () => {\n const local = Alpine.reactive({\n data: [{ id: '1', name: 'Ada' }] as Array,\n })\n const table = createTable({\n features,\n columns,\n get data() {\n return local.data\n },\n getRowId: (row) => row.id,\n })\n\n return { table, FlexRender }\n})\n\nwindow.Alpine = Alpine\nAlpine.start()\n```\n\nRender real table structure with `x-for`; use `x-html=\"FlexRender({ header })\"` or `x-html=\"FlexRender({ cell })\"` only for renderer output.\n\n## Construction and rendering\n\nWrap changing data in `Alpine.reactive` and expose it with `get data()`. The adapter tracks option getters; `data: local.data` captures a snapshot and does not follow later array replacements. Keep static columns and features outside getters.\n\nThe returned table is a reactive proxy. Read Table APIs directly in `x-text`, `x-for`, `x-if`, or bound attributes; no Subscribe component is needed.\n\nBuild table structure and interactive controls as real Alpine markup. Use `x-html=\"FlexRender({ header })\"` or `x-html=\"FlexRender({ cell })\"` for renderer output. Alpine does not initialize directives inside `x-html` strings; use templates or `Alpine.bind` bundles for buttons and inputs.\n\n## Read for the task\n\n- When adding or configuring optional features, load `intent load @tanstack/table-core#table-features` and read only references for the requested behavior.\n- For state ownership or reactive reads, read [table-state](../table-state/SKILL.md).\n- When tables share features, defaults, or reusable UI, read [create-table-hook](references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/alpine-table/dist/index.d.ts`, `createTable.d.ts`, and `reactivity.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n","packages/alpine-table/skills/getting-started/references/create-table-hook.md":"# Alpine reusable table hooks\n\nRead when multiple Alpine tables share features, defaults, or rendering conventions. Keep standalone construction for tables without shared conventions. For controlled state or reactive reads, read [table-state](../../table-state/SKILL.md).\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```ts\nimport Alpine from 'alpinejs'\nimport { createTableHook, tableFeatures } from '@tanstack/alpine-table'\n\ntype Person = { id: string; name: string }\nconst { createAppTable, createAppColumnHelper } = createTableHook({\n features: tableFeatures({}),\n getRowId: (row: Person) => row.id,\n})\nconst helper = createAppColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n\nAlpine.data('peopleTable', () => {\n const local = Alpine.reactive({\n data: [{ id: '1', name: 'Ada' }] as Array,\n })\n const table = createAppTable({\n columns,\n get data() {\n return local.data\n },\n })\n return { table }\n})\n```\n\n## Core patterns\n\n### Share infrastructure, keep data local\n\nBind features, row models, row IDs, and defaults in the factory. Each Alpine component passes its own columns, reactive data getter, and controlled state.\n\n### Reuse markup with Alpine primitives\n\nUse real templates and `Alpine.bind` bundles for interactive reuse. `createTableHook` intentionally returns no component registry or context hooks.\n\n### Use the helper to retain feature inference\n\nColumns from `createAppColumnHelper()` know the factory's registered features without userland feature generics.\n\n## Common mistakes\n\n### HIGH Assuming a JSX component registry\n\nWrong: pass `cellComponents` or `tableComponents` to Alpine `createTableHook`.\n\nCorrect: share features/defaults with the hook and build reusable interactive markup with Alpine templates or bind bundles.\n\nThe Alpine hook returns only app features, a column helper, and createAppTable.\n\nSource: TanStack/table:packages/alpine-table/src/createTableHook.ts\n\n### HIGH Reactive data captured as a snapshot\n\nWrong: `createAppTable({ columns, data: local.data })` when the array will be replaced.\n\nCorrect: provide a `get data()` option.\n\nThe app factory delegates to Alpine createTable, whose option effect tracks getters.\n\nSource: TanStack/table:packages/alpine-table/src/createTable.ts\n\n## API discovery\n\nInspect `node_modules/@tanstack/alpine-table/dist/createTableHook.d.ts`; do not infer component/context APIs from React, Vue, Solid, Svelte, Angular, or Lit adapters.\n\n## Sources\n\n- `TanStack/table:docs/framework/alpine/guide/composable-tables.md`\n- `TanStack/table:examples/alpine/basic-app-table`\n- `TanStack/table:packages/alpine-table/src/createTableHook.ts`\n","packages/alpine-table/skills/table-state/SKILL.md":"---\nname: table-state\ndescription:\n Read and control Table v9 state in alpine. Use for tracked reads, subscriptions,\n controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/alpine-table'\n framework: alpine\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/alpine/guide/table-state.md\n - TanStack/table:examples/alpine/basic-create-table\n - TanStack/table:packages/alpine-table/src/createTable.ts\n---\n\nLoad `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules.\n\nAlpine's table proxy makes reads inside `x-text`, `x-for`, `x-if`, bound attributes, `x-effect`, and Alpine getters reactive. Event handlers read the current value when invoked. A captured value outside a binding does not become a continuing subscription, and there is no `table.Subscribe` component.\n\n## Controlled getter setup\n\n\n\n```ts\nimport Alpine from 'alpinejs'\nimport {\n createTable,\n rowPaginationFeature,\n tableFeatures,\n type PaginationState,\n} from '@tanstack/alpine-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nAlpine.data('pagedTable', () => {\n const local = Alpine.reactive<{ pagination: PaginationState }>({\n pagination: { pageIndex: 0, pageSize: 10 },\n })\n const table = createTable({\n features,\n columns,\n data,\n state: {\n get pagination() {\n return local.pagination\n },\n },\n onPaginationChange: (next) => {\n local.pagination =\n typeof next === 'function' ? next(local.pagination) : next\n },\n })\n return { table }\n})\n```\n\nRead `table.atoms.pagination.get().pageIndex` directly in an Alpine binding.\n\n## Reactive boundaries\n\n- A controlled slice needs a getter and callback. `state: { pagination: local.pagination }` captures the old object when the owner later replaces it.\n- Expose changing data through `get data()` and keep features, columns, and derived data stable outside reevaluated getters.\n- The proxy normally reevaluates all Table-reading bindings for every state change. A narrow atom read does not by itself narrow that broad invalidation.\n- For shared state, pass a stable external atom through `atoms`; omit controlled state and its callback for the same slice.\n\n## Read for the task\n\nFor advanced reactive boundaries, shared atoms, or detailed subscription examples, read [reactivity](references/reactivity.md). For construction or rendering setup, read [getting-started](../getting-started/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/alpine-table/dist/index.d.ts`, `createTable.d.ts`, and `reactivity.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n","packages/alpine-table/skills/table-state/references/reactivity.md":"# Alpine Table reactivity\n\nRead for Alpine subscription boundaries, shared state, or updates that require more than the default rendering behavior.\n\nThis reference inherits the version of its owning skill.\n\n## Gate broad binding updates\n\nBy default, the table proxy subscribes to the full store and increments one reactive version counter. Every binding that touches the table depends on that counter. A narrow atom read selects a value but does not isolate the binding from other state updates.\n\nThe optional second `createTable` argument shallow-compares selected state before bumping the counter. Options changes, including new data, still reevaluate bindings. Select every slice that the affected bindings must observe.\n\nFor high-frequency updates such as column resizing, use `() => ({})` only after explicit `table.atoms..subscribe()` side effects own the required updates and their cleanup. Otherwise, opting out freezes state-driven bindings.\n\n## Controlled getters and external atoms\n\nWhen `Alpine.reactive` owns a slice, keep a getter in `state` and resolve every callback into the reactive owner. Capturing `state: { pagination: local.pagination }` misses later object replacements.\n\nWhen an external atom owns the slice, pass it in `atoms` and write it through feature APIs or the external atom. Supplying controlled `state` for the same slice does not create two-way synchronization; the atom takes precedence.\n\n## Read inside the binding\n\nUse `x-text=\"table.atoms.pagination.get().pageIndex + 1\"` or read Table APIs inside an Alpine getter. Event handlers can read the current value directly. A value copied outside tracked execution stays a snapshot.\n\nThe adapter has no `table.Subscribe` component. Keep interactive markup in Alpine templates and use the reactive table proxy there.\n\n## API discovery\n\nInspect `node_modules/@tanstack/alpine-table/dist/index.d.ts`, `createTable.d.ts`, and `reactivity.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/alpine/guide/table-state.md`\n- `TanStack/table:examples/alpine/basic-create-table`\n- `TanStack/table:packages/alpine-table/src/createTable.ts`\n","packages/angular-table-devtools/skills/devtools/SKILL.md":"---\nname: devtools\ndescription: >\n Register Angular Table v9 instances with injectTanStackTableDevtools inside injection context. Load for reactive table registration, required options.key, enabled or undefined tables, cleanup, Angular isDevMode gating, or explicit production exports.\nmetadata:\n type: framework\n library: '@tanstack/angular-table-devtools'\n framework: angular\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\n - '@tanstack/table-devtools#devtools'\nsources:\n - 'TanStack/table:docs/devtools.md'\n - 'TanStack/table:packages/angular-table-devtools/src/index.ts'\n - 'TanStack/table:packages/angular-table-devtools/src/injectTanStackTableDevtools.ts'\n---\n\nThis skill builds on @tanstack/table-core#core and @tanstack/table-devtools#devtools.\n\n## Setup\n\n```ts\nimport { Component } from '@angular/core'\nimport { injectTable, tableFeatures } from '@tanstack/angular-table'\nimport { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'\n\nconst features = tableFeatures({})\nconst columns = [{ accessorKey: 'id' }]\nconst data: Array<{ id: string }> = []\n\n@Component({ selector: 'users-table', template: 'Users table registered' })\nexport class UsersTable {\n readonly table = injectTable(() => ({\n key: 'users-table',\n features,\n columns,\n data,\n }))\n\n constructor() {\n injectTanStackTableDevtools(() => ({ table: this.table }))\n }\n}\n```\n\nProvide the Angular TanStack Devtools host once at application configuration level as documented in `docs/devtools.md`.\n\n## Hooks and Components\n\nThe injector options function may return `table: undefined` or an `enabled` function to remove/disable registration reactively.\n\n## Common Mistakes\n\n### CRITICAL Injector called outside context\n\nWrong: call `injectTanStackTableDevtools` from an arbitrary callback after bootstrap.\n\nCorrect: call it in a component/service field initializer or constructor injection context.\n\nThe adapter uses Angular injection and effects for lifecycle cleanup.\n\nSource: TanStack/table:packages/angular-table-devtools/src/injectTanStackTableDevtools.ts\n\n### HIGH Missing table key\n\nWrong: register an otherwise valid table without `options.key`.\n\nCorrect: assign a stable unique key before injection registration.\n\nCore registration logs an error and skips keyless targets.\n\nSource: TanStack/table:packages/table-devtools/src/tableTarget.ts\n\n### MEDIUM isDevMode no-op misunderstood\n\nWrong: expect default Angular exports to render production Devtools.\n\nCorrect: keep standard setup development-only; use `/production` only when explicitly requested.\n\nThe package index switches exports using Angular `isDevMode()`.\n\nSource: TanStack/table:packages/angular-table-devtools/src/index.ts\n\n## API Discovery\n\nInspect `node_modules/@tanstack/angular-table-devtools/dist/index.d.ts` and `injectTanStackTableDevtools.d.ts` for current injection options.\n","packages/angular-table/README.md":"","packages/angular-table/skills/getting-started/SKILL.md":"---\nname: getting-started\ndescription:\n Create and render Table v9 with the angular adapter. Route reusable createTableHook\n components, Query and Virtual integration, and framework setup; use table-state for reactive\n ownership.\nmetadata:\n type: framework\n library: '@tanstack/angular-table'\n framework: angular\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/angular/guide/migrating.md\n - TanStack/table:docs/framework/angular/guide/flex-render.md\n - TanStack/table:examples/angular/basic-inject-table\n - TanStack/table:packages/angular-table/src/index.ts\n - TanStack/table:docs/framework/angular/guide/composable-tables.md\n - TanStack/table:examples/angular/composable-tables\n - TanStack/table:packages/angular-table/src/helpers/createTableHook.ts\n - TanStack/table:examples/angular/with-tanstack-query\n - TanStack/table:docs/framework/angular/guide/table-state.md\n - TanStack/table:docs/framework/angular/guide/pagination.md\n - TanStack/table:docs/framework/angular/guide/virtualization.md\n - TanStack/table:examples/angular/virtualized-rows\n - TanStack/table:examples/angular/virtualized-columns\n - TanStack/table:examples/angular/virtualized-infinite-scrolling\n---\n\nLoad `intent load @tanstack/table-core#core` first for the headless model, stable inputs, and column inference.\n\n## Setup\n\n```ts\nimport { Component, signal } from '@angular/core'\nimport { FlexRender, injectTable, tableFeatures } from '@tanstack/angular-table'\n\ntype Person = { name: string; age: number }\nconst features = tableFeatures({})\nconst columns = [\n { accessorKey: 'name', header: 'Name' },\n { accessorKey: 'age', header: 'Age' },\n]\n\n@Component({\n selector: 'app-table',\n imports: [FlexRender],\n template: `\n \n @for (row of table.getRowModel().rows; track row.id) {\n \n @for (cell of row.getAllCells(); track cell.id) {\n \n }\n \n }\n \n
\n {{\n value\n }}\n
`,\n})\nexport class TableComponent {\n readonly data = signal([{ name: 'Ada', age: 36 }])\n readonly table = injectTable(() => ({ features, columns, data: this.data() }))\n}\n```\n\n## Construction and rendering\n\nCall `injectTable` in a component, directive, or service field initializer, or another valid Angular injection context. The adapter binds its cleanup to that context.\n\nSignals read in the options initializer rerun it and call `setOptions`. Keep features, factories, and columns outside the initializer; return stable data references and derive transformed data with `computed` outside it.\n\nImport `FlexRender` for `*flexRender`, `*flexRenderCell`, `*flexRenderHeader`, and `*flexRenderFooter`. Render values can be primitives, `TemplateRef`, component types, or `flexRenderComponent(...)`. Use `flexRenderComponent` for Angular component types; ordinary render functions are already supported directly.\n\n## Read for the task\n\n- When adding or configuring optional features, load `intent load @tanstack/table-core#table-features` and read only references for the requested behavior.\n- For state ownership or reactive reads, read [table-state](../table-state/SKILL.md).\n- When tables share features, defaults, or reusable UI, read [create-table-hook](references/create-table-hook.md).\n- When Query supplies data or server processing, read [with-tanstack-query](references/with-tanstack-query.md).\n- When virtualizing rows or columns, read [with-tanstack-virtual](references/with-tanstack-virtual.md).\n- When upgrading v8 code, read [migrate-v8-to-v9](../migrate-v8-to-v9/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`.\n","packages/angular-table/skills/getting-started/references/create-table-hook.md":"# Angular reusable table hooks\n\nRead when multiple Angular tables share features, defaults, or rendering conventions. Keep standalone construction for tables without shared conventions. For controlled state or reactive reads, read [table-state](../../table-state/SKILL.md).\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```ts\nimport {\n createTableHook,\n rowSortingFeature,\n tableFeatures,\n} from '@tanstack/angular-table'\n\nexport const {\n injectAppTable,\n createAppColumnHelper,\n injectTableContext,\n injectTableCellContext,\n injectTableHeaderContext,\n} = createTableHook({\n features: tableFeatures({ rowSortingFeature }),\n})\n```\n\n```ts\nconst helper = createAppColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n\nexport class PeopleTable {\n readonly table = injectAppTable(() => ({ columns, data: this.data() }))\n}\n```\n\n## Core patterns\n\n### Consume typed DI context in registered components\n\n```ts\nexport class NameCell {\n readonly cell = injectTableCellContext()\n readonly value = computed(() => this.cell().getValue())\n}\n```\n\nUse the matching table/header/cell injector instead of threading context props through reusable components.\n\n### Distinguish component types from render functions\n\nRegister either an Angular component type or a render function. Return component types directly when FlexRender should set context inputs; use `flexRenderComponent(Component, options)` only for explicit inputs/outputs/injector/bindings/directives.\n\n## Common mistakes\n\n### CRITICAL Calling app helpers outside DI\n\nWrong:\n\n```ts\nexport function make() {\n return injectAppTable(() => options)\n}\n```\n\nCorrect:\n\n```ts\nexport class PeopleTable {\n readonly table = injectAppTable(() => options())\n}\n```\n\nBoth app-table construction and returned context injectors require Angular injection context.\n\nSource: `packages/angular-table/src/helpers/createTableHook.ts`\n\n### HIGH Prop drilling registered context\n\nWrong:\n\n```ts\ncell: (ctx) => flexRenderComponent(NameCell, { inputs: { cell: ctx.cell } })\n```\n\nCorrect:\n\n```ts\ncell: (ctx) => ctx.cell.NameCell\n```\n\nRegistered components can consume the app hook's typed cell context directly.\n\nSource: `docs/framework/angular/guide/composable-tables.md`\n\n### HIGH Wrapping a function as a component\n\nWrong:\n\n```ts\nflexRenderComponent((props) => props.cell.getValue())\n```\n\nCorrect:\n\n```ts\n;(props) => props.cell.getValue()\n```\n\n`flexRenderComponent` validates an Angular component type; plain render functions are already valid render content.\n\nSource: `packages/angular-table/src/flex-render/flexRenderComponent.ts`\n\n## API discovery\n\nInspect `node_modules/@tanstack/angular-table/dist/types/` for exact DI and rendering contracts in the bundled public API.\n\n## Sources\n\n- `TanStack/table:docs/framework/angular/guide/composable-tables.md`\n- `TanStack/table:examples/angular/composable-tables`\n- `TanStack/table:packages/angular-table/src/helpers/createTableHook.ts`\n","packages/angular-table/skills/getting-started/references/with-tanstack-query.md":"# Angular Table with TanStack Query\n\nRead when Angular Query supplies Table data or owns server-side processing. Load `intent load @tanstack/table-core#table-features` and read its client/server reference to decide which stages the server owns. Read [table-state](../../table-state/SKILL.md) for the signal or atom wiring used by the query key.\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```ts\nimport {\n injectQuery,\n keepPreviousData,\n} from '@tanstack/angular-query-experimental'\nimport { Component, signal } from '@angular/core'\nimport {\n injectTable,\n rowPaginationFeature,\n tableFeatures,\n} from '@tanstack/angular-table'\n\ntype Person = { id: string; name: string }\ntype PersonPage = { rows: Person[]; rowCount: number }\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst EMPTY_ROWS: Person[] = []\n\n@Component({\n selector: 'people-table',\n template: `{{ table.getRowModel().rows.length }} rows`,\n})\nexport class PeopleTable {\n readonly pagination = signal({ pageIndex: 0, pageSize: 20 })\n readonly query = injectQuery(() => ({\n queryKey: [\n 'people',\n this.pagination().pageIndex,\n this.pagination().pageSize,\n ],\n queryFn: (): Promise =>\n fetch(\n `/api/people?page=${this.pagination().pageIndex}&size=${this.pagination().pageSize}`,\n ).then((r) => r.json()),\n placeholderData: keepPreviousData,\n }))\n readonly table = injectTable(() => ({\n features,\n columns,\n data: this.query.data()?.rows ?? EMPTY_ROWS,\n rowCount: this.query.data()?.rowCount ?? 0,\n manualPagination: true,\n state: { pagination: this.pagination() },\n onPaginationChange: (next) =>\n typeof next === 'function'\n ? this.pagination.update(next)\n : this.pagination.set(next),\n }))\n}\n```\n\nProvide Angular Query's QueryClient in the application injection context before constructing this component. The server response contains the requested `rows` and total `rowCount`.\n\n## Core patterns\n\n### Track every server-owned input\n\nRead pagination, sorting, and filtering signals inside `injectQuery(() => ...)` and include them in the query key. Return data already processed for each manual stage.\n\n### Keep Query data authoritative\n\nRead the Query signal directly in `injectTable`. Create another signal only for a deliberate editable draft with an explicit cache synchronization policy.\n\n## Common mistakes\n\n### HIGH Capturing query inputs outside tracking\n\nWrong:\n\n```ts\nconst page = this.pagination().pageIndex\nreadonly query = injectQuery(() => ({ queryKey: ['people', page], queryFn }))\n```\n\nCorrect:\n\n```ts\nreadonly query = injectQuery(() => ({ queryKey: ['people', this.pagination().pageIndex], queryFn }))\n```\n\nSignal reads inside the options function establish refetch dependencies.\n\nSource: `examples/angular/with-tanstack-query/src/app/app.ts`\n\n### HIGH Expecting manual mode to request\n\nWrong:\n\n```ts\ninjectTable(() => ({ features, columns, data, manualPagination: true }))\n```\n\nCorrect:\n\n```ts\ninjectTable(() => ({\n features,\n columns,\n data: this.query.data()?.rows ?? EMPTY_ROWS,\n manualPagination: true,\n}))\n```\n\nManual flags only bypass client row processing; Query performs network work.\n\nSource: `examples/angular/with-tanstack-query/src/app/app.ts`\n\n### HIGH Omitting total counts\n\nWrong:\n\n```ts\n{ data: this.query.data()?.rows ?? EMPTY_ROWS, manualPagination: true }\n```\n\nCorrect:\n\n```ts\n{ data: this.query.data()?.rows ?? EMPTY_ROWS, rowCount: this.query.data()?.rowCount ?? 0, manualPagination: true }\n```\n\nTable needs `rowCount` or `pageCount` to constrain navigation across server pages.\n\nSource: `docs/framework/angular/guide/pagination.md`\n\n## API discovery\n\nInspect installed `@tanstack/angular-table/dist/types/`, the relevant core feature declarations, and installed Angular Query declarations for the exact `injectQuery` package/version contract.\n\n## Sources\n\n- `TanStack/table:examples/angular/with-tanstack-query`\n- `TanStack/table:docs/framework/angular/guide/table-state.md`\n- `TanStack/table:docs/framework/angular/guide/pagination.md`\n","packages/angular-table/skills/getting-started/references/with-tanstack-virtual.md":"# Angular Table with TanStack Virtual\n\nRead when rendering a large Angular table with TanStack Virtual. Virtual operates on the final Table model. Read [table-state](../../table-state/SKILL.md) if model counts or rendered state stop updating.\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```ts\nimport { Component, computed, viewChild } from '@angular/core'\nimport { injectTable, tableFeatures } from '@tanstack/angular-table'\nimport { injectVirtualizer } from '@tanstack/angular-virtual'\nimport type { ElementRef } from '@angular/core'\n\nconst features = tableFeatures({})\nconst columns = [{ accessorKey: 'name' }]\nconst data = Array.from({ length: 1000 }, (_, index) => ({\n id: String(index),\n name: `Person ${index}`,\n}))\n\n@Component({\n selector: 'virtual-table',\n template: `
\n
\n @for (item of virtualRows(); track item.key) {\n \n {{ rows()[item.index]!.getValue('name') }}\n
\n }\n
\n
`,\n})\nexport class VirtualTable {\n readonly table = injectTable(() => ({\n features,\n columns,\n data,\n getRowId: (row) => row.id,\n }))\n readonly scrollElement =\n viewChild>('scrollElement')\n readonly rows = computed(() => this.table.getRowModel().rows)\n readonly rowVirtualizer = injectVirtualizer(() => ({\n count: this.rows().length,\n scrollElement: this.scrollElement()?.nativeElement,\n estimateSize: () => 34,\n getItemKey: (index) => this.rows()[index]!.id,\n overscan: 5,\n }))\n readonly virtualRows = computed(() => this.rowVirtualizer.getVirtualItems())\n readonly totalSize = computed(() => this.rowVirtualizer.getTotalSize())\n}\n```\n\n## Core patterns\n\n### Derive reactive models\n\nUse `computed(() => table.getRowModel().rows)` for rows. For column virtualization, register `columnVisibilityFeature` before reading `computed(() => table.getVisibleLeafColumns())`; register `columnSizingFeature` when deriving widths from sizing APIs. `injectVirtualizer` tracks signal reads in its initializer and requires injection context.\n\n### Own the layout contract\n\nGive the scroll element bounded overflow, create a total-size spacer, and translate or measure each virtual item. Use grid/flex widths for dynamic rows/columns and keep sticky headers inside the correct scroll geometry.\n\n### Gate infinite fetches\n\nWhen the last virtual item approaches fetched length, fetch only if more server rows exist and a request is not active. Manual sorting requires server-sorted pages and a reset/refetch policy.\n\n## Common mistakes\n\n### CRITICAL Constructing outside injection context\n\nWrong:\n\n```ts\nexport function virtualize(options) {\n return injectVirtualizer(() => options)\n}\n```\n\nCorrect:\n\n```ts\nconst features = tableFeatures({})\nconst columns = [{ accessorKey: 'name' }]\nconst data = Array.from({ length: 1000 }, (_, index) => ({\n id: String(index),\n name: `Person ${index}`,\n}))\n\n@Component({\n selector: 'virtual-table',\n template: `
\n
\n @for (item of virtualRows(); track item.key) {\n \n {{ rows()[item.index]!.getValue('name') }}\n
\n }\n
\n
`,\n})\nexport class VirtualTable {\n readonly table = injectTable(() => ({\n features,\n columns,\n data,\n getRowId: (row) => row.id,\n }))\n readonly virtualizer = injectVirtualizer(() => options())\n}\n```\n\nThe Angular virtualizer follows DI lifecycle rules just like `injectTable`.\n\nSource: `examples/angular/virtualized-rows/src/app/app.ts`\n\n### HIGH Virtualizing raw data\n\nWrong:\n\n```ts\nreadonly rows = computed(() => this.data())\n```\n\nCorrect:\n\n```ts\nreadonly rows = computed(() => this.table.getRowModel().rows)\n```\n\nRaw data bypasses Table filtering, sorting, expansion, grouping, and pagination.\n\nSource: `docs/framework/angular/guide/virtualization.md`\n\n### HIGH Forgetting spacer and transforms\n\nWrong:\n\n```html\n@for (item of virtualRows(); track item.key) {\n
{{ rows()[item.index].id }}
\n}\n```\n\nCorrect:\n\n```html\n
\n @for (item of virtualRows(); track item.key) {\n \n {{ rows()[item.index]!.getValue('name') }}\n
\n }\n\n```\n\nVirtual computes ranges and sizes but does not apply DOM geometry, sticky CSS, or column widths.\n\nSource: `examples/angular/virtualized-columns/src/app/app.ts`\n\n## API discovery\n\nInspect installed `@tanstack/angular-table/dist/types/`, installed `@tanstack/angular-virtual/dist/`, and the maintained Angular examples for current row, column, measurement, and infinite patterns.\n\n## Sources\n\n- `TanStack/table:docs/framework/angular/guide/virtualization.md`\n- `TanStack/table:examples/angular/virtualized-rows`\n- `TanStack/table:examples/angular/virtualized-columns`\n- `TanStack/table:examples/angular/virtualized-infinite-scrolling`\n","packages/angular-table/skills/migrate-v8-to-v9/SKILL.md":"---\nname: migrate-v8-to-v9\ndescription:\n Migrate angular Table v8 to v9. Audit framework construction, rendering, state,\n and app hooks, with shared API changes in the core migration skill.\nmetadata:\n type: lifecycle\n library: '@tanstack/angular-table'\n framework: angular\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#migrate-v8-to-v9'\nsources:\n - TanStack/table:docs/framework/angular/guide/migrating.md\n - TanStack/table:packages/angular-table/src/index.ts\n - TanStack/table:examples/angular/basic-inject-table\n---\n\nLoad `intent load @tanstack/table-core#migrate-v8-to-v9` first and audit its entire shared checklist. It owns feature registration, row-model slots, state/reset changes, prototype methods, logical pinning, sizing/resizing, sorting, selection, helpers, and TypeScript mappings.\n\n## Framework prerequisites\n\nAngular 19 or newer is required (`@angular/core >=19`).\n\n## Angular migration checklist\n\n- [ ] Replace `createAngularTable` with `injectTable` in a valid Angular injection context.\n- [ ] Hoist features, columns, and factories outside the signal-tracked initializer.\n- [ ] Read state through signal-backed atoms; wire controlled signals with value-or-updater callbacks or stable Angular Store atoms.\n- [ ] Import current FlexRender directives, distinguish render functions from component types, and preserve instance-method receivers.\n- [ ] Audit repeated options and component registries for the optional `createTableHook`/`injectAppTable` path.\n\n## Apply the affected mappings\n\nRead [adapter-migration](references/adapter-migration.md) when changing construction, rendering, state, or app hooks. Read the relevant core migration references for each affected shared API; this adapter checklist does not replace that audit.\n\nFor complete v9 construction examples, read [getting-started](../getting-started/SKILL.md). For reactive state repairs, read [table-state](../table-state/SKILL.md).\n\n## Final checks\n\n- [ ] All shared core migration checks and affected mappings have been applied.\n- [ ] The framework checklist above passes with the current adapter declarations.\n- [ ] Model inputs remain stable and state changes reach their reactive owner.\n\n## API discovery\n\nInspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`.\n","packages/angular-table/skills/migrate-v8-to-v9/references/adapter-migration.md":"# Angular v8-to-v9 adapter migration\n\nRead when applying the Angular construction, state, rendering, or reusable-hook checks. Complete the shared audit with `intent load @tanstack/table-core#migrate-v8-to-v9`; its references own the shared feature and type rename inventories.\n\nThis reference inherits the version of its owning skill.\n\n## Framework requirements\n\nAngular 19 or newer is required (`@angular/core >=19`).\n\n## Construction\n\n| v8 | v9 |\n| ----------------------------------- | -------------------------------------------------------------- |\n| `createAngularTable(() => options)` | `injectTable(() => options)` in injection context |\n| `table.getState().sorting` | `table.atoms.sorting.get()` inside tracked Angular consumption |\n\nThe initializer reruns when signals read inside it change and calls `setOptions`. Keep features and columns stable outside it. Construct in a component/directive/service field or another valid injection context so lifecycle cleanup is registered correctly.\n\n## Angular state migration\n\n- `table.getState().sorting` becomes `table.atoms.sorting.get()` for narrow signal-backed reads.\n- Use `table.store.get()` only for a full flat snapshot/debug output.\n- Derive selected slices with Angular `computed`; use `shallow` equality for recreated object/array slices when appropriate.\n- Controlled Angular signals are read in `state` and updated through matching `on[State]Change` callbacks; resolve value-or-function updaters.\n- Prefer external atoms from `@tanstack/angular-store` through `atoms` for app-owned shared slices. Never provide both an atom and `state` for one slice.\n\n## Angular rendering and composition\n\n- Import `FlexRender`/the current `*flexRender` directives from the adapter.\n- Prefer `*flexRenderCell=\"cell; let value\"`, `*flexRenderHeader=\"header; let value\"`, and `*flexRenderFooter=\"footer; let value\"`; they choose the definition and context automatically.\n- General `*flexRender` supports primitives, `TemplateRef`, component types, and `flexRenderComponent(...)` wrappers.\n- Column render functions run in an Angular injection context and may call `inject()` or use signals.\n- Components mounted by FlexRender can call `injectFlexRenderContext()` for the render props.\n- Use `flexRenderComponent(Component, { inputs, outputs, injector, bindings, directives })` for explicit component configuration; creation-time `bindings`/`directives` require the supported Angular version.\n- `tableOptions(...)` composes partial options and may omit data, columns, or features until final assembly.\n- `createTableHook` is optional for repeated application conventions; it returns `injectAppTable` and a feature-bound `createAppColumnHelper`.\n\n## Related task guidance\n\nFor a full construction example, read [getting-started](../../getting-started/SKILL.md). For tracked reads and controlled updates, read [table-state](../../table-state/SKILL.md). When creating a reusable app factory, read [create-table-hook](../../getting-started/references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/angular/guide/migrating.md`\n- `TanStack/table:packages/angular-table/src/index.ts`\n- `TanStack/table:examples/angular/basic-inject-table`\n","packages/angular-table/skills/table-state/SKILL.md":"---\nname: table-state\ndescription:\n Read and control Table v9 state in angular. Use for tracked reads, subscriptions,\n controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/angular-table'\n framework: angular\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/angular/guide/table-state.md\n - TanStack/table:examples/angular/basic-external-state\n - TanStack/table:packages/angular-table/src/injectTable.ts\n---\n\nLoad `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules.\n\nAngular-backed atom reads participate in tracking inside templates, `computed`, and `effect`. A value captured outside those contexts is only a snapshot. Use `computed` for derivation or equality control; wrapping an atom is not required to make it reactive.\n\n## Controlled signal setup\n\n\n\n```ts\nimport { Component, signal } from '@angular/core'\nimport {\n injectTable,\n rowPaginationFeature,\n tableFeatures,\n} from '@tanstack/angular-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\n@Component({\n selector: 'page-status',\n template: ``,\n})\nexport class PageStatus {\n readonly pagination = signal({ pageIndex: 0, pageSize: 20 })\n readonly table = injectTable(() => ({\n features,\n columns,\n data,\n state: { pagination: this.pagination() },\n onPaginationChange: (next) =>\n typeof next === 'function'\n ? this.pagination.update(next)\n : this.pagination.set(next),\n }))\n}\n```\n\n## Reactive boundaries\n\n- Construct in Angular injection context. Signal writes used by the initializer rerun it and call `setOptions`; hoist features and columns and keep data references stable.\n- Supply both `state.pagination` and `onPaginationChange` when a signal owns the slice. Resolve updater functions with `.update(next)` instead of storing the function with `.set(next)`.\n- For shared state, create a stable atom with `@tanstack/angular-store` and pass it through `atoms`. Its writes do not need to flow through a controlled signal in the initializer.\n- Use `table.store.get()` for the flat state. Prefer `table.atoms..get()` for narrow tracked reads.\n\n## Read for the task\n\nFor advanced reactive boundaries, shared atoms, or detailed subscription examples, read [reactivity](references/reactivity.md). For construction or rendering setup, read [getting-started](../getting-started/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`.\n","packages/angular-table/skills/table-state/references/reactivity.md":"# Angular Table reactivity\n\nRead for Angular subscription boundaries, shared state, or updates that require more than the default rendering behavior.\n\nThis reference inherits the version of its owning skill.\n\n## Share state through an external atom\n\n\n\n```ts\nimport { Component, computed } from '@angular/core'\nimport { createAtom } from '@tanstack/angular-store'\nimport {\n injectTable,\n rowPaginationFeature,\n tableFeatures,\n type PaginationState,\n} from '@tanstack/angular-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\n@Component({ selector: 'page-status', template: `Page {{ pageIndex() + 1 }}` })\nexport class PageStatus {\n readonly paginationAtom = createAtom({\n pageIndex: 0,\n pageSize: 20,\n })\n readonly table = injectTable(() => ({\n features,\n columns,\n data,\n atoms: { pagination: this.paginationAtom },\n }))\n readonly pageIndex = computed(\n () => this.table.atoms.pagination.get().pageIndex,\n )\n}\n```\n\nThe atom can feed Query or other consumers without reading a controlled signal in the Table initializer. Table feature APIs write the external atom directly; omit `onPaginationChange` for this owner.\n\n## Derive values with equality control\n\nUse Angular `computed` when deriving a value or applying custom equality. For a recreated object or array result, use the adapter's `shallow` comparator when appropriate. A direct template atom read is already signal-reactive; nested `computed(() => computed(... )())` adds no tracking benefit.\n\nKeep static features, column factories, and row-model factories outside the initializer. Signal reads inside it establish dependencies, so a controlled pagination write reruns the initializer and calls `setOptions`.\n\n## Controlled updater mistakes\n\nWrong: `onPaginationChange: next => this.pagination.set(next)`.\n\nCorrect: use `typeof next === 'function' ? this.pagination.update(next) : this.pagination.set(next)`. Storing the updater itself corrupts the signal's state shape.\n\nUse one owner for each slice. An external atom takes precedence over `state` and starting values; those options are not synchronized fallback owners.\n\n## API discovery\n\nInspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/angular/guide/table-state.md`\n- `TanStack/table:examples/angular/basic-external-state`\n- `TanStack/table:packages/angular-table/src/injectTable.ts`\n","packages/ember-table/README.md":"","packages/ember-table/skills/getting-started/SKILL.md":"---\nname: getting-started\ndescription:\n Create and render Table v9 with the ember adapter. Route reusable createTableHook\n defaults, and framework setup; use table-state for reactive ownership.\nmetadata:\n type: framework\n library: '@tanstack/ember-table'\n framework: ember\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/ember/quick-start.md\n - TanStack/table:examples/ember/basic-table\n - TanStack/table:packages/ember-table/src/index.ts\n - TanStack/table:packages/ember-table/src/use-table.ts\n - TanStack/table:packages/ember-table/src/FlexRender.gts\n - TanStack/table:docs/framework/ember/guide/composable-tables.md\n - TanStack/table:examples/ember/basic-app-table\n - TanStack/table:packages/ember-table/src/create-table-hook.ts\n---\n\nLoad `intent load @tanstack/table-core#core` first for the headless model, stable inputs, and column inference.\n\nEmber 5.8 or newer requires Embroider or ember-auto-import v2. Prefer `.gts` or `.gjs` template-tag components with Glint.\n\n## Setup\n\n```gts\nimport Component from '@glimmer/component'\nimport { tracked } from '@glimmer/tracking'\nimport {\n FlexRenderCell,\n createColumnHelper,\n tableFeatures,\n useTable,\n type Cell,\n type Row,\n} from '@tanstack/ember-table'\n\ntype Person = { id: string; name: string }\n\nconst features = tableFeatures({})\nconst columnHelper = createColumnHelper()\nconst columns = columnHelper.columns([\n columnHelper.accessor('name', { header: 'Name' }),\n])\nconst initialData: Person[] = [{ id: '1', name: 'Ada' }]\nconst getRowId = (row: Person) => row.id\n\nconst getAllCells = (\n row: Row,\n): Array> => row.getAllCells()\n\nexport default class PeopleTable extends Component {\n @tracked data = initialData\n\n table = useTable(this, () => ({\n features,\n columns,\n data: this.data,\n getRowId,\n }))\n\n get rows() {\n return this.table.getRowModel().rows\n }\n\n \n}\n```\n\n## Construction and rendering\n\n`useTable` takes an options thunk. Read tracked data inside it, and keep features, atoms, and columns stable. In a component, pass `this` as the owner to bind external-atom cleanup to the component lifecycle. The one-argument thunk form remains available for standalone tables.\n\nRead Table APIs in template-consumed getters. Column, row, cell, and header prototype methods require their receiver, so use a getter or module helper such as `getAllCells(row)` rather than an extracted method. Wrap event calls the same way.\n\nUse `FlexRenderCell`, `FlexRenderHeader`, and `FlexRenderFooter` for the matching object. Rendered components receive `@ctx` and optional `@options` through `flexRenderComponent(Component, options)`.\n\nWith `tableFeatures({})`, render `row.getAllCells()`. Register `columnVisibilityFeature` before switching to `row.getVisibleCells()`.\n\n## Read for the task\n\n- When adding or configuring optional features, load `intent load @tanstack/table-core#table-features` and read only references for the requested behavior.\n- For state ownership or reactive reads, read [table-state](../table-state/SKILL.md).\n- When tables share features, defaults, or reusable UI, read [create-table-hook](references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/ember-table/declarations/index.d.ts`, `use-table.d.ts`, `signal.d.ts`, and `FlexRender.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n","packages/ember-table/skills/getting-started/references/create-table-hook.md":"# Ember reusable table hooks\n\nRead when multiple Ember tables share features, defaults, or rendering conventions. Keep standalone construction for tables without shared conventions. For controlled state or reactive reads, read [table-state](../../table-state/SKILL.md).\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```gts\nimport Component from '@glimmer/component'\nimport { tracked } from '@glimmer/tracking'\nimport {\n createSortedRowModel,\n createTableHook,\n rowSortingFeature,\n sortFn_alphanumeric,\n tableFeatures,\n} from '@tanstack/ember-table'\n\nconst features = tableFeatures({\n rowSortingFeature,\n sortedRowModel: createSortedRowModel(),\n sortFns: { alphanumeric: sortFn_alphanumeric },\n})\n\nexport const { appFeatures, createAppColumnHelper, createAppTable } =\n createTableHook({\n features,\n enableSortingRemoval: false,\n })\n\ntype Person = { id: string; name: string }\nconst columnHelper = createAppColumnHelper()\nconst columns = columnHelper.columns([\n columnHelper.accessor('name', { header: 'Name' }),\n])\n\nexport default class PeopleTable extends Component {\n @tracked data: Person[] = []\n\n table = createAppTable(this, () => ({\n columns,\n data: this.data,\n }))\n}\n```\n\nCreate the hook and column helpers at stable module scope. Pass the component as the first `createAppTable` argument to bind external-atom cleanup to its lifecycle; the one-argument thunk form remains supported for standalone tables. `createAppTable` preserves the `useTable` options thunk, so tracked reads such as `this.data` remain reactive. Do not pass `features` again at the table call site; the factory owns the feature set and binds it into column inference.\n\n## Composition contract\n\n- Hook options supply stable shared `features` and default table options.\n- `createAppColumnHelper()` binds the feature type while inferring each row type.\n- `createAppTable(() => options)` merges shared defaults with table-specific options.\n- Table-specific options win over shared defaults, except that the factory remains the feature owner.\n- `appFeatures` exposes the exact registered feature set for helper types or reusable utilities.\n\nShared options intentionally exclude `columns`, `data`, and `state`. Keep model inputs and controlled state at each table call site; share conventions, not one mutable state object across unrelated tables.\n\nSharing `rowSortingFeature`, `sortedRowModel`, and sorting defaults gives every table sorting capability; it does not make their internal sorting state shared. The factory technically accepts a stable external atom in shared `atoms`, but that deliberately couples tables and their column IDs. Prefer independent state unless synchronized tables are the actual product behavior.\n\n## Render normally\n\nEmber's factory does not register `AppTable`, `AppCell`, `AppHeader`, context hooks, or reusable component registries. Continue rendering with `FlexRenderCell`, `FlexRenderHeader`, and `FlexRenderFooter`. Continue wrapping receiver-dependent v9 methods in Ember template helpers as described by [getting-started](../SKILL.md).\n\n## Common mistakes\n\n### HIGH Copying another adapter's component registry\n\nWrong: expect `table.AppTable`, `useTableContext`, or a `tableComponents` option from React, Solid, Svelte, or Lit examples.\n\nCorrect: use the normal Ember FlexRender components and pass the table through ordinary Ember composition when another component truly needs it.\n\nThe Ember hook shares features/defaults and type inference only.\n\n### HIGH Passing features per table\n\nWrong:\n\n```gts\ncreateAppTable(() => ({ features: otherFeatures, columns, data: this.data }))\n```\n\nCorrect: define a separate app hook when a table needs a different feature set. `createAppTable` omits `features` from its call-site type.\n\n### HIGH Recreating the hook or columns with tracked updates\n\nWrong: call `createTableHook`, `createAppColumnHelper`, or `columns(...)` inside a component getter or the `createAppTable` thunk.\n\nCorrect: create them once at module scope and let the table thunk read only changing inputs.\n\n### MEDIUM Sharing controlled state as a default\n\nThe hook options omit `state`. Put `state` and matching `on[State]Change` callbacks in each `createAppTable` thunk so every table has one clear owner per slice. Use a shared external atom only when tables intentionally coordinate the same compatible slice.\n\n### MEDIUM Repeating manual feature generics\n\nUse `createAppColumnHelper()`; do not thread `typeof features` through every column helper after the factory has already captured it.\n\n## API discovery\n\nInspect `node_modules/@tanstack/ember-table/declarations/create-table-hook.d.ts` for the installed factory return shape, omitted options, and merge precedence. Inspect `use-table.d.ts` for thunk reactivity and `node_modules/@tanstack/table-core/dist/features//` for the shared feature APIs. Do not infer Ember component/context behavior from another adapter's createTableHook.\n\n## Sources\n\n- `TanStack/table:docs/framework/ember/guide/composable-tables.md`\n- `TanStack/table:examples/ember/basic-app-table`\n- `TanStack/table:packages/ember-table/src/create-table-hook.ts`\n","packages/ember-table/skills/table-state/SKILL.md":"---\nname: table-state\ndescription:\n Read and control Table v9 state in ember. Use for tracked reads, subscriptions,\n controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/ember-table'\n framework: ember\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/ember/guide/table-state.md\n - TanStack/table:examples/ember/basic-external-atoms\n - TanStack/table:examples/ember/basic-external-state\n - TanStack/table:packages/ember-table/src/use-table.ts\n - TanStack/table:packages/ember-table/src/reactivity.ts\n - TanStack/table:packages/ember-table/src/signal.ts\n---\n\nLoad `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules.\n\nGlimmer tracks Table APIs, atom reads, and store-property reads inside template-consumed getters. A value cached outside tracked consumption is only a snapshot. There is no `table.Subscribe` or selector argument to `useTable`; `table.store.subscribe` is intentionally a no-op and cannot drive rendering.\n\n## Controlled tracked setup\n\n```gts\nimport Component from '@glimmer/component'\nimport { tracked } from '@glimmer/tracking'\nimport { on } from '@ember/modifier'\nimport {\n rowPaginationFeature,\n tableFeatures,\n useTable,\n type PaginationState,\n} from '@tanstack/ember-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nexport default class PageStatus extends Component {\n @tracked pagination: PaginationState = { pageIndex: 0, pageSize: 10 }\n table = useTable(this, () => ({\n features,\n columns,\n data,\n state: { pagination: this.pagination },\n onPaginationChange: (next) => {\n this.pagination =\n typeof next === 'function' ? next(this.pagination) : next\n },\n }))\n\n get pageNumber() {\n return this.table.atoms.pagination.get().pageIndex + 1\n }\n\n nextPage = () => this.table.nextPage()\n\n \n}\n```\n\n## Reactive boundaries\n\n- Read tracked values inside the options thunk and assign callback results back to their tracked owner. Mutating `this.pagination.pageIndex++` does not notify the thunk.\n- `features` and `atoms` are construction-time inputs. Updating ordinary live options does not replace the feature set or atom owners; create them once before `useTable`.\n- Pass the component as the owner for lifecycle cleanup when external atoms are used. The standalone one-argument thunk form remains supported.\n- Use the adapter's `createAtom` for external Glimmer-reactive ownership. Read it in a tracked getter and use feature APIs or the external atom to write.\n- Keep features, columns, and data stable. Call receiver-dependent methods through getters or helpers rather than passing extracted methods to templates.\n\n## Read for the task\n\nFor advanced reactive boundaries, shared atoms, or detailed subscription examples, read [reactivity](references/reactivity.md). For construction or rendering setup, read [getting-started](../getting-started/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/ember-table/declarations/index.d.ts`, `use-table.d.ts`, `signal.d.ts`, and `FlexRender.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n","packages/ember-table/skills/table-state/references/reactivity.md":"# Ember Table reactivity\n\nRead for Ember subscription boundaries, shared state, or updates that require more than the default rendering behavior.\n\nThis reference inherits the version of its owning skill.\n\n## Own shared state with an Ember atom\n\n```gts\nimport Component from '@glimmer/component'\nimport { on } from '@ember/modifier'\nimport {\n createAtom,\n rowPaginationFeature,\n tableFeatures,\n useTable,\n type PaginationState,\n} from '@tanstack/ember-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nexport default class SharedPage extends Component {\n paginationAtom = createAtom({ pageIndex: 0, pageSize: 10 })\n table = useTable(this, () => ({\n features,\n columns,\n data,\n atoms: { pagination: this.paginationAtom },\n }))\n\n get pageNumber() {\n return this.paginationAtom.get().pageIndex + 1\n }\n\n nextPage = () => this.table.nextPage()\n\n \n}\n```\n\nThe adapter re-exports `createAtom` with Glimmer-reactive reads. Feature APIs write through to that owner, so omit `onPaginationChange`. Supplying the component owner binds external-atom cleanup to its destruction. Use the one-argument thunk form only when no Ember owner is available.\n\n## Construction-time ownership\n\nThe options thunk updates ordinary live options from tracked reads, but features and external atom owners are fixed during construction. Keep them stable. Replacing an `atoms` object in a getter does not swap the table's owners.\n\n## Template tracking is pull-based\n\nRead `table.atoms..get()`, `table.store.state.`, or a Table API inside a template-consumed getter. There is no selector argument or `table.Subscribe`; `table.store.subscribe` is a no-op. Subscribe to a supplied external atom when a separate consumer actually needs push notifications.\n\n`table.getState()` is removed v8 API. Caching a value outside tracked consumption does not establish Glimmer tracking.\n\n## Controlled state pitfalls\n\nResolve value-or-updater callbacks and assign a fresh tracked value. `this.pagination.pageIndex++` mutates an untracked nested property. A no-op callback freezes the controlled slice. Prefer `table.setPageIndex(...)` to invoke the callback with the feature's update rules.\n\nAn external atom wins over controlled state. Writing an internal base atom cannot replace the external value; use the feature API or write the external owner.\n\n## API discovery\n\nInspect `node_modules/@tanstack/ember-table/declarations/index.d.ts`, `use-table.d.ts`, `signal.d.ts`, and `FlexRender.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/ember/guide/table-state.md`\n- `TanStack/table:examples/ember/basic-external-atoms`\n- `TanStack/table:examples/ember/basic-external-state`\n- `TanStack/table:packages/ember-table/src/use-table.ts`\n- `TanStack/table:packages/ember-table/src/reactivity.ts`\n- `TanStack/table:packages/ember-table/src/signal.ts`\n","packages/lit-table/README.md":"","packages/lit-table/skills/getting-started/SKILL.md":"---\nname: getting-started\ndescription:\n Create and render Table v9 with the lit adapter. Route reusable createTableHook\n components, Virtual integration, and framework setup; use table-state for reactive ownership.\nmetadata:\n type: framework\n library: '@tanstack/lit-table'\n framework: lit\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/lit/guide/migrating.md\n - TanStack/table:examples/lit/basic-table-controller\n - TanStack/table:packages/lit-table/src/index.ts\n - TanStack/table:docs/framework/lit/guide/composable-tables.md\n - TanStack/table:examples/lit/composable-tables\n - TanStack/table:packages/lit-table/src/createTableHook.ts\n - TanStack/table:docs/framework/lit/guide/virtualization.md\n - TanStack/table:examples/lit/virtualized-rows\n - TanStack/table:examples/lit/virtualized-columns\n - TanStack/table:examples/lit/virtualized-infinite-scrolling\n---\n\nLoad `intent load @tanstack/table-core#core` first for the headless model, stable inputs, and column inference.\n\n## Setup\n\n```ts\nimport { LitElement, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport {\n FlexRender,\n TableController,\n createColumnHelper,\n tableFeatures,\n} from '@tanstack/lit-table'\n\ntype Person = { id: string; name: string }\n\nconst features = tableFeatures({})\nconst columnHelper = createColumnHelper()\nconst columns = columnHelper.columns([\n columnHelper.accessor('name', { header: 'Name' }),\n])\n\n@customElement('people-table')\nexport class PeopleTable extends LitElement {\n @state() private people: Array = [{ id: '1', name: 'Ada' }]\n private tableController = new TableController(this)\n\n protected render() {\n const table = this.tableController.table({\n features,\n columns,\n data: this.people,\n getRowId: (row) => row.id,\n })\n\n return html`\n \n ${repeat(\n table.getHeaderGroups(),\n (group) => group.id,\n (group) =>\n html`\n ${repeat(\n group.headers,\n (header) => header.id,\n (header) =>\n html``,\n )}\n `,\n )}\n \n \n ${repeat(\n table.getRowModel().rows,\n (row) => row.id,\n (row) =>\n html`\n ${repeat(\n row.getAllCells(),\n (cell) => cell.id,\n (cell) => html``,\n )}\n `,\n )}\n \n
\n ${header.isPlaceholder ? null : FlexRender({ header })}\n
${FlexRender({ cell })}
`\n }\n}\n```\n\n## Construction and rendering\n\nKeep one `TableController` as a host field. V9 takes only the host in its constructor; pass current options to `controller.table(...)` during every render. Recreating the controller repeats lifecycle and subscription work.\n\nKeep features, columns, and data stable across host updates. Use `FlexRender({ cell })`, `FlexRender({ header })`, or `FlexRender({ footer })` in Lit templates. The application owns semantic markup, accessibility, widths, and sticky positioning.\n\nThe controller selects all registered state by default. Narrow selected state only when host update cost requires it; use [table-state](../table-state/SKILL.md) for selectors and template subscriptions.\n\n## Read for the task\n\n- When adding or configuring optional features, load `intent load @tanstack/table-core#table-features` and read only references for the requested behavior.\n- For state ownership or reactive reads, read [table-state](../table-state/SKILL.md).\n- When tables share features, defaults, or reusable UI, read [create-table-hook](references/create-table-hook.md).\n- When virtualizing rows or columns, read [with-tanstack-virtual](references/with-tanstack-virtual.md).\n- When upgrading v8 code, read [migrate-v8-to-v9](../migrate-v8-to-v9/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/index.d.ts`, then `TableController.d.ts`, `flexRender.d.ts`, or the relevant exported declaration. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n","packages/lit-table/skills/getting-started/references/create-table-hook.md":"# Lit reusable table hooks\n\nRead when multiple Lit tables share features, defaults, or rendering conventions. Keep standalone construction for tables without shared conventions. For controlled state or reactive reads, read [table-state](../../table-state/SKILL.md).\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```ts\nimport {\n createSortedRowModel,\n createTableHook,\n rowSortingFeature,\n tableFeatures,\n} from '@tanstack/lit-table'\n\nconst features = tableFeatures({\n rowSortingFeature,\n sortedRowModel: createSortedRowModel(),\n})\n\nexport const { createAppColumnHelper, useAppTable, useTableContext } =\n createTableHook({\n features,\n getRowId: (row: { id: string }) => row.id,\n })\n```\n\nUse `createAppColumnHelper()` to define app columns. In a `LitElement`, capture the host in a local variable and initialize `useAppTable(host, options, selector)` once as a field; call the returned `table()` function during render. The maintained composable-tables example shows the complete host/getter shape.\n\n## Core patterns\n\n### Bind shared features, not table-specific data\n\nPut feature plugins, row-model factories, default options, row IDs, and shared render conventions in the factory. Pass each table's columns, data, and controlled state to `useAppTable`.\n\n### Add component registries only for real conventions\n\nRegister common cell/header functions when multiple tables use them. Render them through `table.AppCell` and `table.AppHeader`; ordinary tables can use the returned table instance without registries.\n\n### Consume table context in custom elements\n\nCreate the returned `useTableContext(this)` once as a custom-element field. Read its `.value` during render and handle `undefined` before the provider is available. The value is a base `LitTable` with the factory's feature types, not the extended table with registered components or `App*` helpers.\n\n## Common mistakes\n\n### HIGH Prop drilling replaces typed context\n\nWrong: pass the stable table instance through every custom-element property boundary.\n\nCorrect: call the `useTableContext` returned by the same `createTableHook` in the nearest registered/custom control.\n\nUse the context from the same factory so its feature types and provider match. Registered render functions receive their enhanced cell/header values through `AppCell` and `AppHeader`.\n\nSource: TanStack/table:packages/lit-table/src/createTableHook.ts\n\n### HIGH Recreating useAppTable each render\n\nWrong: call `useAppTable(this, options)` afresh inside `render`.\n\nCorrect: initialize it once as a host field and call `this.appTable.table()` during render.\n\nThe helper owns a TableController and context provider tied to the host lifecycle.\n\nSource: TanStack/table:examples/lit/composable-tables\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/createTableHook.d.ts`. Use the matching installed implementation rather than assuming JSX-adapter component APIs exist in Lit.\n\n## Sources\n\n- `TanStack/table:docs/framework/lit/guide/composable-tables.md`\n- `TanStack/table:examples/lit/composable-tables`\n- `TanStack/table:packages/lit-table/src/createTableHook.ts`\n","packages/lit-table/skills/getting-started/references/with-tanstack-virtual.md":"# Lit Table with TanStack Virtual\n\nRead when rendering a large Lit table with TanStack Virtual. Virtual operates on the final Table model. Read [table-state](../../table-state/SKILL.md) if model counts or rendered state stop updating.\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```ts\nimport { LitElement, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { VirtualizerController } from '@tanstack/lit-virtual'\nimport {\n TableController,\n tableFeatures,\n type ColumnDef,\n} from '@tanstack/lit-table'\n\ntype Item = { id: string; name: string }\nconst features = tableFeatures({})\nconst columns: Array> = [\n { accessorKey: 'name', header: 'Name' },\n]\nconst data: Array = Array.from({ length: 10_000 }, (_, id) => ({\n id: String(id),\n name: `Item ${id}`,\n}))\n\n@customElement('virtual-items')\nexport class VirtualItems extends LitElement {\n private controller = new TableController(this)\n private scroller = createRef()\n private virtualizer = new VirtualizerController(this, {\n count: data.length,\n getScrollElement: () => this.scroller.value,\n estimateSize: () => 32,\n overscan: 5,\n })\n\n protected render() {\n const table = this.controller.table({\n features,\n columns,\n data,\n getRowId: (row) => row.id,\n })\n const rows = table.getRowModel().rows\n const v = this.virtualizer.getVirtualizer()\n v.setOptions({ ...v.options, count: rows.length })\n\n return html`\n
\n ${v\n .getVirtualItems()\n .map(\n (item) =>\n html`\n ${rows[item.index].getValue('name')}\n
`,\n )}\n \n `\n }\n}\n```\n\n## Core patterns\n\n### Virtualize the final row model\n\nSet the virtualizer count from `table.getRowModel().rows.length`; index virtual items into that same array so filtering, sorting, expansion, and pagination are respected.\n\n### Keep geometry sources consistent\n\nFor column virtualization, estimate from `column.getSize()` and remeasure when columnSizing changes. Render widths from the same sizing state.\n\n### Treat unsupported combinations as user composition\n\nDrag-and-drop plus virtualization is not a maintained Table recipe. Start from the maintained Virtual example and reconcile both libraries' transforms, measurement, and auto-scroll contracts explicitly.\n\n## Common mistakes\n\n### HIGH Virtualizing raw data\n\nWrong: index virtual items into the original `data` array.\n\nCorrect: index into `table.getRowModel().rows`.\n\nRaw data ignores active Table processing and produces mismatched rows after sorting or filtering.\n\nSource: TanStack/table:examples/lit/virtualized-rows\n\n### HIGH Count and rows come from different models\n\nWrong: use `data.length` after filters change but render filtered rows.\n\nCorrect: update the virtualizer count from the same current `rows` array being rendered.\n\nMismatched geometry can index undefined rows or leave blank scroll space.\n\nSource: TanStack/table:examples/lit/virtualized-rows\n\n### HIGH Recreating columns during host renders\n\nWrong: pass `columns: [...columns]` from `render()` to work around a readonly tuple.\n\nCorrect: declare a stable mutable `Array>` once and pass `columns` directly.\n\nLit host updates can be driven by scrolling and measurement. A fresh column reference rebuilds Table's column pipeline on every such render.\n\nSource: TanStack/table:examples/lit/virtualized-rows\n\n### HIGH Sticky and sizing CSS assumed automatic\n\nWrong: add a VirtualizerController and expect sticky headers, widths, and transforms.\n\nCorrect: implement the scroll container, total-size spacer, absolute row transforms, sticky regions, and widths in Lit CSS/templates.\n\nBoth libraries are headless over rendering geometry.\n\nSource: TanStack/table:docs/framework/lit/guide/virtualization.md\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/index.d.ts` and `node_modules/@tanstack/lit-virtual/dist/`. Use maintained examples for geometry; do not register Virtual in `tableFeatures`.\n\n## Sources\n\n- `TanStack/table:docs/framework/lit/guide/virtualization.md`\n- `TanStack/table:examples/lit/virtualized-rows`\n- `TanStack/table:examples/lit/virtualized-columns`\n- `TanStack/table:examples/lit/virtualized-infinite-scrolling`\n","packages/lit-table/skills/migrate-v8-to-v9/SKILL.md":"---\nname: migrate-v8-to-v9\ndescription:\n Migrate lit Table v8 to v9. Audit framework construction, rendering, state, and\n app hooks, with shared API changes in the core migration skill.\nmetadata:\n type: lifecycle\n library: '@tanstack/lit-table'\n framework: lit\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#migrate-v8-to-v9'\nsources:\n - TanStack/table:docs/framework/lit/guide/migrating.md\n - TanStack/table:packages/lit-table/src/index.ts\n - TanStack/table:examples/lit/basic-table-controller\n---\n\nLoad `intent load @tanstack/table-core#migrate-v8-to-v9` first and audit its entire shared checklist. It owns feature registration, row-model slots, state/reset changes, prototype methods, logical pinning, sizing/resizing, sorting, selection, helpers, and TypeScript mappings.\n\n## Framework prerequisites\n\nLit 3.1.3 or newer within v3 (`lit ^3.1.3`) and `@lit/context ^1.1.0` are required.\n\n## Lit migration checklist\n\n- [ ] Construct one `TableController(this)` as a stable host field.\n- [ ] Replace the v8 `controller.table` property/options thunk with `controller.table(options, selector?)` during render.\n- [ ] Read selected `table.state` for rendering; use atom snapshots in handlers or stable `table.subscribe` selectors for template regions.\n- [ ] Feed resolved controlled callbacks back through reactive Lit properties, or use stable external atoms.\n- [ ] Switch render helpers to `FlexRender({ cell })`, `FlexRender({ header })`, or `FlexRender({ footer })` and preserve instance-method receivers.\n- [ ] If app conventions repeat, construct a host-bound `useAppTable` once and call its `.table()` during render.\n\n## Apply the affected mappings\n\nRead [adapter-migration](references/adapter-migration.md) when changing construction, rendering, state, or app hooks. Read the relevant core migration references for each affected shared API; this adapter checklist does not replace that audit.\n\nFor complete v9 construction examples, read [getting-started](../getting-started/SKILL.md). For reactive state repairs, read [table-state](../table-state/SKILL.md).\n\n## Final checks\n\n- [ ] All shared core migration checks and affected mappings have been applied.\n- [ ] The framework checklist above passes with the current adapter declarations.\n- [ ] Model inputs remain stable and state changes reach their reactive owner.\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/index.d.ts`, then `TableController.d.ts`, `flexRender.d.ts`, or the relevant exported declaration. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n","packages/lit-table/skills/migrate-v8-to-v9/references/adapter-migration.md":"# Lit v8-to-v9 adapter migration\n\nRead when applying the Lit construction, state, rendering, or reusable-hook checks. Complete the shared audit with `intent load @tanstack/table-core#migrate-v8-to-v9`; its references own the shared feature and type rename inventories.\n\nThis reference inherits the version of its owning skill.\n\n## Framework requirements\n\nLit 3.1.3 or newer within v3 (`lit ^3.1.3`) and `@lit/context ^1.1.0` are required.\n\n## Construction\n\n| v8 | v9 |\n| ------------------------------------------ | ---------------------------------------------------- |\n| `new TableController(this, () => options)` | `new TableController(this)` |\n| `controller.table` property | `controller.table(options, selector?)` during render |\n\nThe controller owns host subscriptions and cleanup. Keep it as a field and supply current stable model inputs during render. Constructing it on every render repeats lifecycle work.\n\n## Lit state migration\n\n- `table.getState().sorting` becomes selected `table.state.sorting` for rendering or `table.atoms.sorting.get()` for a current snapshot. Store snapshots do not establish template subscriptions.\n- `table.state` contains all registered slices by default. Pass a second-argument selector to `controller.table(...)` only to narrow the render-selected surface.\n- Use `table.subscribe(table.store, stableSelector, renderCallback)` for selected template state. Keep the selector reference stable outside render.\n- Controlled state uses Lit `@state()` fields and matching `on[State]Change` callbacks that resolve value-or-function updaters.\n- External atoms come from `@tanstack/store` and are provided through `atoms`. Never provide both `atoms.pagination` and `state.pagination`.\n- The controller owns state subscriptions and requests host updates. Apply current options with `controller.table(...)` during render; keep the controller as a stable host field.\n\n## Rendering and composition\n\n| v8 | v9 |\n| -------------------------- | ----------------------------------------------------------------------------- |\n| `flexRender(def, context)` | `FlexRender({ cell })`, `FlexRender({ header })`, or `FlexRender({ footer })` |\n| Standalone helper only | `table.FlexRender({ cell })` is also available |\n| Repeated raw options | `tableOptions(...)` composition |\n| Repeated conventions | `createTableHook({ features, ... })` |\n\n`createTableHook` returns a host-bound app table helper and pre-bound column helper. Construct the app helper with the Lit host, then call its `.table()` during render. It is optional and intended for recurring application conventions.\n\n## Related task guidance\n\nFor a full construction example, read [getting-started](../../getting-started/SKILL.md). For tracked reads and controlled updates, read [table-state](../../table-state/SKILL.md). When creating a reusable app factory, read [create-table-hook](../../getting-started/references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/index.d.ts`, then `TableController.d.ts`, `flexRender.d.ts`, or the relevant exported declaration. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/lit/guide/migrating.md`\n- `TanStack/table:packages/lit-table/src/index.ts`\n- `TanStack/table:examples/lit/basic-table-controller`\n","packages/lit-table/skills/table-state/SKILL.md":"---\nname: table-state\ndescription:\n Read and control Table v9 state in lit. Use for tracked reads, subscriptions,\n controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/lit-table'\n framework: lit\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/lit/guide/table-state.md\n - TanStack/table:examples/lit/basic-external-state\n - TanStack/table:packages/lit-table/src/TableController.ts\n---\n\nLoad `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules.\n\n`TableController` selects all registered state by default and requests host updates when selected state changes. `table.state` is the selected render value. `table.atoms..get()` and `table.store.state` are snapshots; those reads do not create a template subscription.\n\n## Controlled property setup\n\n\n\n```ts\nimport { LitElement, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport {\n TableController,\n rowPaginationFeature,\n tableFeatures,\n type PaginationState,\n} from '@tanstack/lit-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'id' }]\nconst data = [{ id: '1' }]\n\n@customElement('page-status')\nexport class PageStatus extends LitElement {\n @state() private pagination: PaginationState = { pageIndex: 0, pageSize: 10 }\n private controller = new TableController(\n this,\n )\n\n protected render() {\n const table = this.controller.table({\n features,\n columns,\n data,\n state: { pagination: this.pagination },\n onPaginationChange: (next) => {\n this.pagination =\n typeof next === 'function' ? next(this.pagination) : next\n },\n })\n return html``\n }\n}\n```\n\n## Reactive boundaries\n\n- Keep one controller on the host and pass current options during render. Keep features, columns, and data references stable across host updates.\n- A second `controller.table(options, selector)` argument changes the shape of `table.state` and gates host updates. Keep reused selectors stable.\n- Use `table.subscribe(source, selector, renderCallback)` for a template region that should update independently. Cache selector functions as host fields or module functions.\n- Feed every controlled callback result into the corresponding reactive property and pass it back through `state`. Use stable external atoms through `atoms` when sharing state outside the host.\n\n## Read for the task\n\nFor advanced reactive boundaries, shared atoms, or detailed subscription examples, read [reactivity](references/reactivity.md). For construction or rendering setup, read [getting-started](../getting-started/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/index.d.ts`, then `TableController.d.ts`, `flexRender.d.ts`, or the relevant exported declaration. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n","packages/lit-table/skills/table-state/references/reactivity.md":"# Lit Table reactivity\n\nRead for Lit subscription boundaries, shared state, or updates that require more than the default rendering behavior.\n\nThis reference inherits the version of its owning skill.\n\n## Select a template region independently\n\n\n\n```ts\nimport { LitElement, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport {\n TableController,\n rowPaginationFeature,\n tableFeatures,\n type TableState,\n} from '@tanstack/lit-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\nconst noOwnerState = () => null\nconst pageIndex = (state: TableState) =>\n state.pagination.pageIndex\n\n@customElement('page-island')\nexport class PageIsland extends LitElement {\n private controller = new TableController(\n this,\n )\n\n protected render() {\n const table = this.controller.table(\n { features, columns, data },\n noOwnerState,\n )\n return html`\n ${table.subscribe(table.store, pageIndex, (page) => html`Page ${page + 1}`)}\n \n `\n }\n}\n```\n\nThe owner selector opts this host out of state-driven updates. Every state-dependent region must then subscribe to its own dependencies. Keep both selectors stable. Recreating a `table.subscribe` selector changes its subscription work even if it computes the same value.\n\n## Shared atoms and controlled properties\n\nFor cross-system state, create a stable external TanStack Store atom and pass it in `atoms`. Feature APIs write the supplied atom. For host-owned state, use `@state()` plus the corresponding callback, resolve value-or-function updaters, and feed the property into the next `controller.table` call.\n\nUse `table.atoms.pagination.get()` in an event handler for the current snapshot. A cached store property outside render does not stay current and does not subscribe a template region.\n\n## Host lifecycle and accepted updates\n\nKeep the controller as a host field. It owns subscriptions and cleanup. `controller.table` stages fresh options for same-render reads; `hostUpdated` publishes captured controlled state after Lit commits. External atoms remain direct owners.\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/index.d.ts`, then `TableController.d.ts`, `flexRender.d.ts`, or the relevant exported declaration. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/lit/guide/table-state.md`\n- `TanStack/table:examples/lit/basic-external-state`\n- `TanStack/table:packages/lit-table/src/TableController.ts`\n","packages/match-sorter-utils/README.md":"","packages/match-sorter-utils/skills/fuzzy-ranking/SKILL.md":"---\nname: fuzzy-ranking\ndescription: >\n Rank fuzzy matches with rankItem, filter with RankingInfo.passed, compare saved ranking metadata with compareItems, and configure rankings, thresholds, accessors, min/max bounds, or diacritics. Load for @tanstack/match-sorter-utils itself or fuzzy Table filterMeta wiring.\nmetadata:\n type: core\n library: '@tanstack/match-sorter-utils'\n library_version: '9.2.6'\nsources:\n - 'TanStack/table:packages/match-sorter-utils/src/index.ts'\n - 'TanStack/table:docs/framework/react/guide/fuzzy-filtering.md'\n - 'TanStack/table:examples/react/filters-fuzzy'\n---\n\n## Setup\n\n\n\n```ts\nimport { compareItems, rankItem, rankings } from '@tanstack/match-sorter-utils'\n\nconst query = 'tan'\nconst values = ['table', 'tanner', 'router']\nexport const ranked = values\n .map((value) => ({\n value,\n info: rankItem(value, query, { threshold: rankings.MATCHES }),\n }))\n .filter((entry) => entry.info.passed)\n .sort((a, b) => compareItems(a.info, b.info))\n```\n\n## Core Patterns\n\n### Separate ranking, filtering, and sorting\n\nCall `rankItem` once, filter on `info.passed`, retain the `RankingInfo`, then order matching results with `compareItems`.\n\n### Rank object fields through accessors\n\n```ts\ntype Person = { name: string; email: string }\nconst person: Person = { name: 'Ada Lovelace', email: 'ada@example.test' }\nconst info = rankItem(person, 'lov', {\n accessors: [(item) => item.name, (item) => item.email],\n})\n```\n\nAccessor options can set a per-accessor threshold plus minRanking/maxRanking bounds.\n\n### Store ranking as Table filter metadata\n\nIn a Table filterFn, call `addMeta?.({ itemRank })`. Register the corresponding\nmeta shape with `filterMeta: metaHelper<{ itemRank: RankingInfo }>()`. A related\nsortFn reads `row.columnFiltersMeta[columnId]?.itemRank` and uses `compareItems`,\nfalling back to an ordinary comparator for ties or absent metadata. For the\nprimary Table composition, load `@tanstack/table-core#table-features` and read\nits global-filtering reference. Register the fuzzy filter under `filterFns`\nfor `globalFilterFn: 'fuzzy'`.\n\n## Common Mistakes\n\n### HIGH Numeric rank used as pass flag\n\nWrong: `if (rankItem(value, query).rank) include(value)`.\n\nCorrect: test `rankItem(value, query).passed`.\n\nRanks below the configured threshold can still be nonzero; `passed` records the threshold decision.\n\nSource: TanStack/table:packages/match-sorter-utils/src/index.ts\n\n### HIGH Ranking recomputed during sorting\n\nWrong: call `rankItem` for both rows on every comparator invocation.\n\nCorrect: retain RankingInfo during filtering and pass the stored values to `compareItems`.\n\nSorting is called many times; recomputing also risks using different query/options than the filter decision.\n\nSource: TanStack/table:docs/framework/react/guide/fuzzy-filtering.md\n\n### MEDIUM compareItems direction reversed twice\n\nWrong: negate `compareItems(a, b)` because a larger rank should appear first.\n\nCorrect: use `compareItems(a, b)` directly for ascending fuzzy relevance.\n\nThe function already returns -1 when `a.rank` is greater than `b.rank`.\n\nSource: TanStack/table:packages/match-sorter-utils/src/index.ts\n\n## API Discovery\n\nInspect `node_modules/@tanstack/match-sorter-utils/dist/index.d.ts` for the installed `RankItemOptions`, accessor attributes, ranking constants, and comparator behavior. For TanStack Table metadata integration, load `@tanstack/table-core#table-features` and read its global-filtering and sorting references.\n","packages/octane-table/README.md":"","packages/octane-table/skills/getting-started/SKILL.md":"---\nname: getting-started\ndescription:\n Create and render Table v9 with the octane adapter. Route reusable createTableHook\n components, and framework setup; use table-state for reactive ownership.\nmetadata:\n type: framework\n library: '@tanstack/octane-table'\n framework: octane\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/octane/quick-start.md\n - TanStack/table:examples/octane/basic-use-table\n - TanStack/table:packages/octane-table/src/index.ts\n - TanStack/table:packages/octane-table/src/useTable.tsrx\n - TanStack/table:docs/framework/octane/guide/composable-tables.md\n - TanStack/table:docs/framework/octane/guide/table-context.md\n - TanStack/table:examples/octane/composable-tables\n - TanStack/table:packages/octane-table/src/createTableHook.tsrx\n - TanStack/table:packages/octane-table/src/createTableHookContexts.ts\n---\n\nLoad `intent load @tanstack/table-core#core` first for the headless model, stable inputs, and column inference.\n\n## Setup\n\n```tsrx\nimport { createRoot, useState } from 'octane'\nimport {\n createColumnHelper,\n tableFeatures,\n useTable,\n} from '@tanstack/octane-table'\n\ntype Person = { name: string }\nconst features = tableFeatures({})\nconst helper = createColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n\nfunction PeopleTable() @{\n const [data] = useState([{ name: 'Ada' }])\n const table = useTable({ features, columns, data })\n\n \n \n @for (const group of table.getHeaderGroups(); key group.id) {\n \n @for (const header of group.headers; key header.id) {\n \n }\n \n }\n \n \n @for (const row of table.getRowModel().rows; key row.id) {\n \n @for (const cell of row.getAllCells(); key cell.id) {\n \n }\n \n }\n \n
\n}\n\nconst rootElement = document.getElementById('root')\nif (!rootElement) throw new Error('Root element not found')\ncreateRoot(rootElement).render(PeopleTable)\n```\n\n## Construction and rendering\n\nThis adapter distributes authored TypeScript and TSRX. Configure the consumer with `octane()` in `vite.config.ts` and the TSRX JSX import source `octane`. Author component bodies with `@{ ... }` and keyed `@for` loops for rows, headers, and cells.\n\nImport from `@tanstack/octane-table`. Render `table.FlexRender` as a component so it gets its own Octane scope. It preserves numbers including `0`, render descriptors, and component functions.\n\nKeep features and column definitions at module scope. For inputs that depend on component state, use `useMemo`; pass the current stable data array to `useTable`. Convert non-renderable values with `String(value)` when displaying them as text.\n\n## Read for the task\n\n- When adding or configuring optional features, load `intent load @tanstack/table-core#table-features` and read only references for the requested behavior.\n- For state ownership or reactive reads, read [table-state](../table-state/SKILL.md).\n- When tables share features, defaults, or reusable UI, read [create-table-hook](references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/octane-table/src/index.d.ts`, the matching `*.tsrx.d.ts` sidecar, and `src/types.ts`. This package publishes authored source; core APIs are in installed `@tanstack/table-core/dist/`.\n","packages/octane-table/skills/getting-started/references/create-table-hook.md":"# Octane reusable table hooks\n\nRead when multiple Octane tables share features, defaults, or rendering conventions. Keep standalone construction for tables without shared conventions. For controlled state or reactive reads, read [table-state](../../table-state/SKILL.md).\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```tsrx\nimport {\n createTableHook,\n rowSelectionFeature,\n tableFeatures,\n} from '@tanstack/octane-table'\n\nexport const { createAppColumnHelper, useAppTable, useTableContext } =\n createTableHook({\n features: tableFeatures({ rowSelectionFeature }),\n getRowId: (row: { id: string }) => row.id,\n })\n```\n\nCreate the factory at module scope. Its wrappers have stable identities and read the latest table facade without remounting their child subtrees.\n\n## Core patterns\n\n### Use the factory-bound helper\n\n```tsrx\ntype Person = { id: string; name: string }\nconst helper = createAppColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n```\n\n### Consume typed context under its wrapper\n\n```tsrx\nfunction RowCount() @{\n const table = useTableContext()\n {String(table.getRowModel().rows.length)}\n}\n\nfunction Grid() @{\n const table = useAppTable({ data, columns })\n \n}\n```\n\n`AppTable` takes static children without a selector. Use function children when a selector supplies their value:\n\n```tsrx\n state.rowSelection}>\n {(rowSelection) => {String(Object.keys(rowSelection).length)}}\n\n```\n\nRender `AppTable`, `AppCell`, `AppHeader`, `AppFooter`, and registered components with JSX. The wrappers establish context and independent Octane scopes.\n\n### Isolate nested table setups\n\nDefault contexts are module-scoped and HMR-stable. Sibling tables are isolated by their providers, but nested factories can resolve a consumer to the inner provider. Create fresh contexts for distinct nested setups:\n\n```tsrx\nimport {\n createTableHook,\n createTableHookContexts,\n rowSelectionFeature,\n tableFeatures,\n} from '@tanstack/octane-table'\n\nconst features = tableFeatures({ rowSelectionFeature })\nconst { tableContext, cellContext, headerContext } =\n createTableHookContexts()\n\nexport const app = createTableHook({\n features,\n tableContext,\n cellContext,\n headerContext,\n})\n```\n\nPrefer hooks returned by `createTableHook` because their types include registered component maps.\n\n## Common mistakes\n\n### HIGH Reading outside the matching provider\n\nWrong:\n\n```tsrx\nfunction Grid() @{\n \n}\n```\n\nCorrect:\n\n```tsrx\nfunction Grid() @{\n const table = useAppTable({ data, columns })\n \n}\n```\n\nFactory context hooks throw actionable errors when the matching `AppTable`, `AppCell`, or `AppHeader` provider is missing.\n\nSource: `packages/octane-table/src/createTableHook.tsrx`\n\n### HIGH Recreating the factory during render\n\nWrong:\n\n```tsrx\nfunction Grid() @{\n const app = createTableHook({ features })\n const table = app.useAppTable({ data, columns })\n \n}\n```\n\nCorrect:\n\n```tsrx\nconst app = createTableHook({ features })\n\nfunction Grid() @{\n const table = app.useAppTable({ data, columns })\n \n}\n```\n\nA factory created during render makes hook configuration, wrappers, contexts, and registered component identities unstable.\n\nSource: `packages/octane-table/src/createTableHook.tsrx`\n\n## API discovery\n\nInspect `node_modules/@tanstack/octane-table/src/createTableHook.tsrx.d.ts`, `src/createTableHookContexts.ts`, and `src/types.ts` for exact return names, wrapper props, registries, and scoped context types.\n\n## Sources\n\n- `TanStack/table:docs/framework/octane/guide/composable-tables.md`\n- `TanStack/table:docs/framework/octane/guide/table-context.md`\n- `TanStack/table:examples/octane/composable-tables`\n- `TanStack/table:packages/octane-table/src/createTableHook.tsrx`\n- `TanStack/table:packages/octane-table/src/createTableHookContexts.ts`\n","packages/octane-table/skills/table-state/SKILL.md":"---\nname: table-state\ndescription:\n Read and control Table v9 state in octane. Use for tracked reads, subscriptions,\n controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/octane-table'\n framework: octane\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/octane/guide/table-state.md\n - TanStack/table:examples/octane/basic-subscribe\n - TanStack/table:examples/octane/basic-external-atoms\n - TanStack/table:packages/octane-table/src/useTable.tsrx\n - TanStack/table:packages/octane-table/src/Subscribe.tsrx\n---\n\nLoad `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules.\n\n`useTable` selects all registered state by default. Its second argument changes the selected shape exposed as `table.state` and shallow-gates owner rerenders. Atom `.get()` and `table.store.state` reads are snapshots; use selected state or a rendered `table.Subscribe` to update the UI.\n\n## Controlled slice setup\n\n```tsrx\nimport { useState } from 'octane'\nimport {\n rowPaginationFeature,\n tableFeatures,\n useTable,\n} from '@tanstack/octane-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nfunction PageStatus() @{\n const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 20 })\n const table = useTable({\n features,\n columns,\n data,\n state: { pagination },\n onPaginationChange: setPagination,\n })\n\n \n}\n```\n\n## Reactive boundaries\n\n- Pass both the controlled value and its callback. Octane setters accept Table's value-or-updater callbacks; a callback alone cannot feed the new value back.\n- Render `` as a component. Calling it as a normal function shares the owner's compiler slots instead of creating an independent hook scope.\n- `useTable` stages fresh options for same-render reads. Controlled state reaches the store only from an accepted layout commit, so abandoned work cannot publish speculative values.\n- A stable atom from `@tanstack/octane-store` is a direct synchronous owner. Table writes reach it immediately; it takes precedence over controlled `state` for the same slice.\n- Keep features, columns, and data stable. Use the default selector until render cost justifies narrower subscriptions.\n\n## Read for the task\n\nFor advanced reactive boundaries, shared atoms, or detailed subscription examples, read [reactivity](references/reactivity.md). For construction or rendering setup, read [getting-started](../getting-started/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/octane-table/src/index.d.ts`, the matching `*.tsrx.d.ts` sidecar, and `src/types.ts`. This package publishes authored source; core APIs are in installed `@tanstack/table-core/dist/`.\n","packages/octane-table/skills/table-state/references/reactivity.md":"# Octane Table reactivity\n\nRead for Octane subscription boundaries, shared state, or updates that require more than the default rendering behavior.\n\nThis reference inherits the version of its owning skill.\n\n## Mount independent subscription islands\n\n```tsrx\nimport { rowSelectionFeature, tableFeatures, useTable } from '@tanstack/octane-table'\n\nconst features = tableFeatures({ rowSelectionFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nfunction SelectionCount() @{\n const table = useTable({ features, columns, data }, () => null)\n \n {(selection) => {String(Object.keys(selection).length)}}\n \n \n}\n```\n\nWithout `source`, `table.Subscribe` subscribes to `table.store` and needs a selector. With `source`, it can consume one atom or store. If the owner selects `null`, every UI region must subscribe to the slices its Table API reads depend on, including row-model dependencies.\n\nAlways mount `Subscribe` with JSX. `table.Subscribe({ source, children })` shares the owner's compiler slots and loses the independent hook scope.\n\n## Share a synchronous external owner\n\n```tsrx\nimport { useCreateAtom } from '@tanstack/octane-store'\nimport { rowPaginationFeature, tableFeatures, useTable } from '@tanstack/octane-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nfunction PageStatus() @{\n const pagination = useCreateAtom({ pageIndex: 0, pageSize: 20 })\n const table = useTable({ features, columns, data, atoms: { pagination } })\n \n}\n```\n\nUse `useSelector` from `@tanstack/octane-store` when another component consumes the atom. External atoms are direct synchronous owners and take precedence over `options.state`; omit the matching controlled callback.\n\n## Render and commit timing\n\n`useTable` stages current data, columns, callbacks, and controlled state for same-render reads. It publishes controlled state only after Octane accepts the render, from the layout commit. Suspended or abandoned renders cannot publish speculative state.\n\nThe owner drops the matching redundant post-commit notification because it already rendered that snapshot. Independently mounted `table.Subscribe` consumers still receive the update before paint. This distinction applies to controlled `state`; external atom writes remain synchronous.\n\nFor controlled state, pass `state.` together with the corresponding Octane setter. A custom callback must resolve raw values and updater functions before feeding the owner back into Table.\n\n## API discovery\n\nInspect `node_modules/@tanstack/octane-table/src/index.d.ts`, the matching `*.tsrx.d.ts` sidecar, and `src/types.ts`. This package publishes authored source; core APIs are in installed `@tanstack/table-core/dist/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/octane/guide/table-state.md`\n- `TanStack/table:examples/octane/basic-subscribe`\n- `TanStack/table:examples/octane/basic-external-atoms`\n- `TanStack/table:packages/octane-table/src/useTable.tsrx`\n- `TanStack/table:packages/octane-table/src/Subscribe.tsrx`\n","packages/preact-table-devtools/README.md":"","packages/preact-table-devtools/skills/devtools/SKILL.md":"---\nname: devtools\ndescription: >\n Connect native Preact Table v9 instances to Devtools with tableDevtoolsPlugin and useTanStackTableDevtools. Load for React-package mixups, missing targets, required options.key, enabled state, cleanup, or development gating.\nmetadata:\n type: framework\n library: '@tanstack/preact-table-devtools'\n framework: preact\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\n - '@tanstack/table-devtools#devtools'\nsources:\n - 'TanStack/table:docs/devtools.md'\n - 'TanStack/table:packages/preact-table-devtools/src/index.ts'\n - 'TanStack/table:packages/preact-table-devtools/src/useTanStackTableDevtools.ts'\n---\n\nThis skill builds on @tanstack/table-core#core and @tanstack/table-devtools#devtools.\n\n## Setup\n\n```tsx\nimport { TanStackDevtools } from '@tanstack/preact-devtools'\nimport { useTable, tableFeatures } from '@tanstack/preact-table'\nimport {\n tableDevtoolsPlugin,\n useTanStackTableDevtools,\n} from '@tanstack/preact-table-devtools'\n\nconst features = tableFeatures({})\nconst columns = [{ accessorKey: 'id' }]\nconst data: Array<{ id: string }> = []\n\nexport function App() {\n const table = useTable({\n key: 'users-table',\n features,\n columns,\n data,\n })\n useTanStackTableDevtools(table)\n return \n}\n```\n\n## Hooks and Components\n\nUse the native Preact packages throughout. Pass `{ enabled }` rather than conditionally calling the registration hook.\n\n## Common Mistakes\n\n### HIGH React Devtools package mixed into Preact\n\nWrong: import the hook from `@tanstack/react-table-devtools` through compat.\n\nCorrect: use `@tanstack/preact-table-devtools` with `@tanstack/preact-devtools`.\n\nThe native adapter owns Preact effect lifecycle and plugin types.\n\nSource: TanStack/table:docs/devtools.md\n\n### HIGH Missing or duplicate key\n\nWrong: omit `key` or reuse `users-table` for multiple mounted tables.\n\nCorrect: give each live table one stable unique key.\n\nKeyless registration is skipped; duplicate keys replace targets.\n\nSource: TanStack/table:packages/table-devtools/src/tableTarget.ts\n\n### MEDIUM Production no-op mistaken for failure\n\nWrong: expect the default entrypoint to stay active in a production bundle.\n\nCorrect: keep Devtools development-only unless an explicit production import is required.\n\nThe default index deliberately selects no-op implementations outside development.\n\nSource: TanStack/table:packages/preact-table-devtools/src/index.ts\n\n## API Discovery\n\nInspect `node_modules/@tanstack/preact-table-devtools/dist/index.d.ts` and `useTanStackTableDevtools.d.ts`; do not copy React adapter imports.\n","packages/preact-table/README.md":"","packages/preact-table/skills/getting-started/SKILL.md":"---\nname: getting-started\ndescription: Create and render Table v9 with the preact adapter. Route reusable createTableHook components, Query and Virtual integration, and framework setup; use table-state for reactive ownership.\nmetadata:\n type: framework\n library: '@tanstack/preact-table'\n library_version: '9.3.1'\n framework: preact\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/preact/guide/migrating.md\n - TanStack/table:examples/preact/basic-use-table\n - TanStack/table:packages/preact-table/src/index.ts\n - TanStack/table:docs/framework/preact/guide/composable-tables.md\n - TanStack/table:docs/framework/preact/guide/table-context.md\n - TanStack/table:examples/preact/composable-tables\n - TanStack/table:packages/preact-table/src/createTableHook.tsx\n - TanStack/table:packages/preact-table/src/createTableHookContexts.tsx\n - TanStack/table:examples/preact/with-tanstack-query\n - TanStack/table:docs/framework/preact/guide/pagination.md\n - TanStack/table:docs/framework/preact/guide/virtualization.md\n---\n\n# Preact Table setup and integration\n\nBefore starting, run `intent load @tanstack/table-core#core` for the shared headless model and stable-input rules.\n\n## Setup\n\n```tsx\nimport { useState } from 'preact/hooks'\nimport {\n createColumnHelper,\n tableFeatures,\n useTable,\n} from '@tanstack/preact-table'\n\ntype Person = { name: string }\nconst features = tableFeatures({})\nconst helper = createColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n\nexport function PeopleTable() {\n const [data] = useState([{ name: 'Ada' }])\n const table = useTable({ features, columns, data })\n return (\n \n \n {table.getHeaderGroups().map((group) => (\n \n {group.headers.map((header) => (\n \n ))}\n \n ))}\n \n \n {table.getRowModel().rows.map((row) => (\n \n {row.getAllCells().map((cell) => (\n \n ))}\n \n ))}\n \n
\n \n
\n \n
\n )\n}\n```\n\n## Essential constraints\n\nUse native `@tanstack/preact-table` and `preact/hooks`. V8 React-through-compat setup and `useReactTable` are not the native v9 API. Keep features, columns, and fallback arrays stable across renders.\n\nTable owns models and state. The application owns markup, CSS, interactions, and accessibility. Core-only tables use `row.getAllCells()`; visibility-aware methods need `columnVisibilityFeature`. Optional state and APIs require their features. Put row-model slots after their prerequisite features in `tableFeatures()`.\n\n## Load by task\n\n- For repeated features, defaults, typed contexts, or component registries, read [reusable app hooks](references/create-table-hook.md).\n- For Query-backed data, server pages, sorting, filtering, or request keys, read [TanStack Query integration](references/with-tanstack-query.md).\n- For virtual rows, columns, dynamic measurement, or infinite scrolling, read [TanStack Virtual integration](references/with-tanstack-virtual.md).\n- For controlled state, tracked reads, or render subscriptions, read [table state](../table-state/SKILL.md).\n- For feature registration, missing feature APIs, or processing ownership, run `intent load @tanstack/table-core#table-features` and read only references needed by the task.\n- For v8 code, read the [migration checklist](../migrate-v8-to-v9/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/preact-table/dist/index.d.ts`, then the exported adapter declarations for the installed version. Inspect optional core APIs under `node_modules/@tanstack/table-core/dist/features/`.\n","packages/preact-table/skills/getting-started/references/create-table-hook.md":"# Reusable Preact table hooks\n\nUse this reference when multiple Preact tables share features, defaults, or registered components. Keep one-off tables on `useTable`. For controlled state or subscription changes, read [table state](../../table-state/SKILL.md).\n\n## Setup\n\n```tsx\nimport {\n createTableHook,\n rowSelectionFeature,\n tableFeatures,\n} from '@tanstack/preact-table'\n\nexport const { createAppColumnHelper, useAppTable, useTableContext } =\n createTableHook({\n features: tableFeatures({ rowSelectionFeature }),\n getRowId: (row: { id: string }) => row.id,\n })\n```\n\n## Core patterns\n\n### Use the factory-bound helper\n\n```tsx\ntype Person = { id: string; name: string }\nconst helper = createAppColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n```\n\n### Consume typed context under its wrapper\n\n```tsx\nfunction RowCount() {\n const table = useTableContext()\n return {table.getRowModel().rows.length}\n}\nconst table = useAppTable({ data, columns })\nreturn (\n \n \n \n)\n```\n\n`AppTable` takes ordinary JSX children without a selector. Use function children only when a selector supplies their value:\n\n```tsx\n state.rowSelection}>\n {(rowSelection) => {Object.keys(rowSelection).length}}\n\n```\n\n### Isolate genuinely nested table setups\n\nDefault contexts are module-scoped and HMR-stable; sibling tables are already isolated by their providers. Separate `createTableHook` calls still share those defaults, so nested providers can silently resolve a consumer to the inner table. Use fresh contexts only when different table setups are nested:\n\n```tsx\nimport {\n createTableHook,\n createTableHookContexts,\n rowSelectionFeature,\n tableFeatures,\n} from '@tanstack/preact-table'\n\nconst features = tableFeatures({ rowSelectionFeature })\nconst { tableContext, cellContext, headerContext } =\n createTableHookContexts()\n\nexport const app = createTableHook({\n features,\n tableContext,\n cellContext,\n headerContext,\n})\n```\n\nPrefer hooks returned by `createTableHook` because their types include registered component maps. Hooks returned directly by `createTableHookContexts` know only `TFeatures` and support modules that cannot import the completed factory.\n\n## Common mistakes\n\n### Choose a factory for repeated conventions\n\nA factory for shared conventions:\n\n```tsx\nconst app = createTableHook({ features: tableFeatures({}) })\n```\n\nStandalone construction for a one-off table:\n\n```tsx\nconst table = useTable({ features, columns, data })\n```\n\nThe factory is valuable when it centralizes repeated policy, not merely another constructor name.\n\nSource: `docs/framework/preact/guide/composable-tables.md`\n\n### HIGH Reading outside the matching provider\n\nWrong:\n\n```tsx\nreturn \n```\n\nCorrect:\n\n```tsx\nreturn (\n \n \n \n)\n```\n\nFactory context hooks require the corresponding `AppTable`, `AppCell`, or `AppHeader` wrapper.\n\nSource: `packages/preact-table/src/createTableHook.tsx`\n\n### HIGH Recreating contexts per render\n\nWrong:\n\n```tsx\nfunction Grid() {\n const app = createTableHook({ features })\n const table = app.useAppTable({ data, columns })\n return (\n \n
\n \n )\n}\n```\n\nCorrect:\n\n```tsx\nconst app = createTableHook({ features })\nfunction Grid() {\n const table = app.useAppTable({ data, columns })\n return (\n \n
\n \n )\n}\n```\n\nCreating a new factory closure during render makes hook configuration and component registries unstable. Keep the factory and its bound hook identity at module scope.\n\nSource: `packages/preact-table/src/createTableHook.tsx`\n\n## API discovery\n\nInspect `node_modules/@tanstack/preact-table/dist/createTableHook.d.ts` and `createTableHookContexts.d.ts` for exact return names, provider props, registries, and scoped context types.\n\n## Sources\n\n- `TanStack/table:docs/framework/preact/guide/composable-tables.md`\n- `TanStack/table:docs/framework/preact/guide/table-context.md`\n- `TanStack/table:examples/preact/composable-tables`\n- `TanStack/table:packages/preact-table/src/createTableHook.tsx`\n- `TanStack/table:packages/preact-table/src/createTableHookContexts.tsx`\n","packages/preact-table/skills/getting-started/references/with-tanstack-query.md":"# Preact Table with TanStack Query\n\nUse this reference when Query owns server data for a Preact table. Read [table state](../../table-state/SKILL.md) for reactive ownership. Run `intent load @tanstack/table-core#table-features` and read its client/server reference before choosing manual processing stages. Query fetches rows already processed by every server-owned stage; manual flags only bypass Table processing.\n\n## Setup\n\n```tsx\nimport { keepPreviousData, useQuery } from '@tanstack/preact-query'\nimport { useCreateAtom, useSelector } from '@tanstack/preact-store'\nimport {\n rowPaginationFeature,\n tableFeatures,\n useTable,\n} from '@tanstack/preact-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst emptyRows: Array<{ id: string }> = []\nconst paginationAtom = useCreateAtom({ pageIndex: 0, pageSize: 20 })\nconst pagination = useSelector(paginationAtom, (value) => value)\nconst result = useQuery({\n queryKey: ['people', pagination],\n queryFn: () => fetchPeople(pagination),\n placeholderData: keepPreviousData,\n})\nconst table = useTable({\n features,\n columns,\n data: result.data?.rows ?? emptyRows,\n rowCount: result.data?.rowCount,\n atoms: { pagination: paginationAtom },\n manualPagination: true,\n})\n```\n\n## Core patterns\n\n### Key requests by every server-owned slice\n\n```tsx\nuseQuery({\n queryKey: ['people', pagination, sorting],\n queryFn: () => fetchPeople({ pagination, sorting }),\n})\n```\n\n### Pass cached rows directly\n\n```tsx\nuseTable({ features, columns, data: result.data?.rows ?? emptyRows })\n```\n\n## Common mistakes\n\n### HIGH Importing React Query APIs\n\nWrong:\n\n```tsx\nimport { useQuery } from '@tanstack/react-query'\n```\n\nCorrect:\n\n```tsx\nimport { useQuery } from '@tanstack/preact-query'\n```\n\nUse native Preact Query and Store integrations throughout the composition.\n\nSource: `examples/preact/with-tanstack-query`\n\n### HIGH Reusing one cache key\n\nWrong:\n\n```tsx\nuseQuery({ queryKey: ['people'], queryFn: () => fetchPeople(pagination) })\n```\n\nCorrect:\n\n```tsx\nuseQuery({\n queryKey: ['people', pagination],\n queryFn: () => fetchPeople(pagination),\n})\n```\n\nEach processed server result needs a key that includes its request state.\n\nSource: `examples/preact/with-tanstack-query`\n\n### HIGH Expecting manual flags to fetch\n\nWrong:\n\n```tsx\nuseTable({ features, columns, data, manualPagination: true })\n```\n\nCorrect:\n\n```tsx\nuseTable({\n features,\n columns,\n data: result.data?.rows ?? emptyRows,\n rowCount: result.data?.rowCount,\n manualPagination: true,\n})\n```\n\nManual pagination bypasses local processing; it neither calls the backend nor invents totals.\n\nSource: `docs/framework/preact/guide/pagination.md`\n\n## API discovery\n\nInspect installed `node_modules/@tanstack/preact-table/dist/index.d.ts` and the relevant installed core feature declarations; inspect `@tanstack/preact-query` declarations for exact query APIs.\n\n## Sources\n\n- `TanStack/table:examples/preact/with-tanstack-query`\n- `TanStack/table:docs/framework/preact/guide/pagination.md`\n","packages/preact-table/skills/getting-started/references/with-tanstack-virtual.md":"# Preact Table with TanStack Virtual\n\nUse this reference when virtualizing Preact table rows or columns. Virtual consumes the final Table model in the renderer; it is not a Table feature. For reactive model or subscription problems, read [table state](../../table-state/SKILL.md). Register `columnSizingFeature` before calling sizing APIs, and `columnVisibilityFeature` before visibility-aware APIs.\n\n## Setup\n\n```tsx\nimport { useRef } from 'preact/hooks'\nimport { useVirtualizer } from '@tanstack/react-virtual' // via preact/compat\n\nconst scrollRef = useRef(null)\nconst rows = table.getRowModel().rows\nconst virtualizer = useVirtualizer({\n count: rows.length,\n getScrollElement: () => scrollRef.current,\n estimateSize: () => 36,\n getItemKey: (index) => rows[index].id,\n overscan: 5,\n})\n```\n\nRender a spacer of `getTotalSize()` and position each row from its virtual item's `start`.\n\n## Core patterns\n\n### Apply Table's column sizes\n\n```tsx\n\n \n\n```\n\n### Measure dynamic rows by index\n\n```tsx\n
\n {row.id}\n
\n```\n\n## Common mistakes\n\n### HIGH Looking for a Preact-specific adapter\n\nThere is no `@tanstack/preact-virtual` package. In the standard Preact setup that aliases React to `preact/compat`, use the maintained React adapter:\n\n```tsx\nimport { useVirtualizer } from '@tanstack/react-virtual'\n```\n\nIf the application cannot use the compat alias, integrate the `Virtualizer` class from `@tanstack/virtual-core` directly. That is a lower-level integration with application-owned lifecycle and subscriptions; do not invent Preact hooks around it.\n\nSource: `docs/framework/preact/guide/virtualization.md`\n\n### HIGH Virtualizing raw data\n\nWrong:\n\n```tsx\nuseVirtualizer({ count: data.length, getScrollElement, estimateSize })\n```\n\nCorrect:\n\n```tsx\nconst rows = table.getRowModel().rows\nuseVirtualizer({ count: rows.length, getScrollElement, estimateSize })\n```\n\nRaw data omits Table's current filtering, sorting, expansion, grouping, and pagination.\n\nSource: `docs/framework/preact/guide/virtualization.md`\n\n### HIGH Assuming layout is automatic\n\nWrong:\n\n```tsx\nvirtualizer.getVirtualItems().map((item) =>
{rows[item.index].id}
)\n```\n\nCorrect:\n\n```tsx\nvirtualizer\n .getVirtualItems()\n .map((item) => (\n \n {rows[item.index].id}\n
\n ))\n```\n\nVirtual computes geometry; application markup and CSS must apply it and supply the scroll container/spacer.\n\nSource: `docs/framework/preact/guide/virtualization.md`\n\n## API discovery\n\nInspect `node_modules/@tanstack/preact-table/dist/index.d.ts`. For rendering APIs, inspect installed `node_modules/@tanstack/react-virtual/dist/` when using the standard `preact/compat` alias, or `node_modules/@tanstack/virtual-core/dist/` for a direct integration. There is no maintained Preact-specific Virtual package or Table example; start from the Preact guide and translate the maintained React examples only through the compat setup it describes.\n\n## Sources\n\n- `TanStack/table:docs/framework/preact/guide/virtualization.md`\n- `TanStack/table:packages/preact-table/src/index.ts`\n","packages/preact-table/skills/migrate-v8-to-v9/SKILL.md":"---\nname: migrate-v8-to-v9\ndescription: Migrate preact Table v8 to v9. Audit framework construction, rendering, state, and app hooks, with shared API changes in the core migration skill.\nmetadata:\n type: lifecycle\n library: '@tanstack/preact-table'\n library_version: '9.3.1'\n framework: preact\nrequires:\n - '@tanstack/table-core#migrate-v8-to-v9'\nsources:\n - TanStack/table:docs/framework/preact/guide/migrating.md\n - TanStack/table:packages/preact-table/src/index.ts\n - TanStack/table:examples/preact/basic-use-table\n---\n\n# Preact v8-to-v9 migration checklist\n\nBefore starting, run `intent load @tanstack/table-core#migrate-v8-to-v9`. Audit its entire shared checklist and read the detailed core mappings for APIs present in the application. This checklist adds the Preact-specific changes.\n\nFramework prerequisite: Preact 10 or newer (`preact >=10`).\n\n## Adapter audit\n\n- [ ] Replace React-adapter imports and `useReactTable` with native `@tanstack/preact-table` and `useTable`.\n- [ ] Remove compat aliases that existed only for Table. Preserve aliases still required by other libraries, including a React Virtual integration.\n- [ ] Keep model inputs stable and configure explicit features/row-model slots; complete the shared core checklist.\n- [ ] Use selected `table.state`, `table.Subscribe`, or Preact Store subscriptions; snapshots alone do not rerender consumers.\n- [ ] Pair controlled slices with callbacks, or supply stable atoms from `@tanstack/preact-store`; remove global `onStateChange`.\n- [ ] Use native Preact FlexRender components. Adopt `tableOptions` or `createTableHook` only for repeated app conventions.\n\n## Load the affected details\n\nWhen the audit finds old Preact construction, state, rendering, or app-hook code, read [adapter migration details](references/adapter-migration.md) before editing it. For a replacement render scaffold, read [getting started](../getting-started/SKILL.md). For controlled or stale state after migration, read [table state](../table-state/SKILL.md).\n\nShared pinning, sizing, sorting, selection, prototype-method, type, and registry changes stay in the core migration references. Renaming `useReactTable` alone does not complete the migration.\n\n## Verify the migration\n\n- [ ] Type-check against the installed v9 adapter and exercise every enabled client/manual feature flow.\n- [ ] Verify external state writes, reactive data replacement, and the framework rendering paths changed above.\n- [ ] Complete the core checklist, including layout and selection behavior when those features are used.\n- [ ] Replace temporary `stockFeatures` when the target is explicit feature tree-shaking.\n\n## API discovery\n\nInspect `node_modules/@tanstack/preact-table/dist/index.d.ts` and the exported adapter declarations. Use `node_modules/@tanstack/table-core/dist/index.d.ts` for shared APIs.\n","packages/preact-table/skills/migrate-v8-to-v9/references/adapter-migration.md":"# Preact adapter migration details\n\nRead when replacing Preact table construction, reactive state, rendering, or reusable app hooks. First complete the shared checklist from `intent load @tanstack/table-core#migrate-v8-to-v9`; its references own shared feature, method, and TypeScript mappings.\n\n## Replace `useReactTable` with `useTable`\n\n```tsx\nimport {\n createSortedRowModel,\n rowSortingFeature,\n tableFeatures,\n useTable,\n} from '@tanstack/preact-table'\n\nconst features = tableFeatures({\n rowSortingFeature,\n sortedRowModel: createSortedRowModel(),\n})\nconst table = useTable({ features, columns, data })\n```\n\nV8 did not have a first-party Preact adapter; many Preact apps used `@tanstack/react-table` through `preact/compat`. V9 uses native `@tanstack/preact-table`. Remove compatibility aliases that existed only for Table after replacing the imports. Keep aliases needed by other libraries, such as React Virtual. Prefer explicit features as the end state; `stockFeatures` is only a kitchen-sink migration shortcut.\n\n## State and reactive reads\n\n| v8 | v9 |\n| --------------------------- | ------------------------------------------------------------------------------------ |\n| `table.getState()` | Reactive `table.state`, snapshot `table.store.state`, or `table.atoms..get()` |\n| Top-level `onStateChange` | Per-slice callbacks or `table.store.subscribe()` |\n| Whole-component state reads | Custom second-argument selector, `table.Subscribe`, or atom source |\n\nThe default `useTable` selector subscribes the component to all registered state. Pass a selector for `table.state`, or `() => null` and subscribe lower:\n\n```tsx\nconst table = useTable(options, () => null)\n\n\n {selection => {Object.keys(selection).length} selected}\n\n```\n\nControlled `state` plus per-slice `on[State]Change` remains supported. For app-owned atoms, use `useCreateAtom`/`useSelector` from `@tanstack/preact-store` and pass them through `options.atoms`. An external atom wins over `state` for the same slice; do not mirror both ownership models.\n\n## Rendering and composition\n\n- Replace React-adapter `flexRender(def, context)` with `` or standalone ``; the function remains for advanced cases.\n- Use `tableOptions()` for typed reusable option fragments.\n- Use `createTableHook({ features, ...defaults })` for repeated app table conventions; it returns native app helpers such as `useAppTable` and `createAppColumnHelper`.\n\nFor detailed controlled wiring or tracking failures, read [table state](../../table-state/SKILL.md). For reusable contexts or components, read [app-hook composition](../../getting-started/references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/preact-table/dist/index.d.ts` and its exported declarations for construction, rendering, and app hooks.\n\n## Sources\n\n- `TanStack/table:docs/framework/preact/guide/migrating.md`\n- `TanStack/table:packages/preact-table/src/index.ts`\n- `TanStack/table:examples/preact/basic-use-table`\n","packages/preact-table/skills/table-state/SKILL.md":"---\nname: table-state\ndescription: Read and control Table v9 state in preact. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/preact-table'\n library_version: '9.3.1'\n framework: preact\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/preact/guide/table-state.md\n - TanStack/table:examples/preact/basic-subscribe\n - TanStack/table:packages/preact-table/src/useTable.ts\n---\n\n# Preact table state\n\nBefore starting, run `intent load @tanstack/table-core#table-state` for shared ownership, initialization, updates, and resets. State repair does not require loading setup guidance.\n\n## Read reactive state\n\n`useTable` selects all registered state by default. Its optional second-argument selector controls rerenders and the shape of `table.state`. `table.atoms..get()` and `table.store.state` are current snapshots, not Preact subscriptions.\n\nUse selected `table.state` in the owner render. For narrower boundaries, use `table.Subscribe` or `useSelector` from `@tanstack/preact-store`. Without `source`, `table.Subscribe` selects from `table.store`; with `source`, it subscribes to that atom or store. Start with the default selector until render cost requires narrowing.\n\n## Control a slice\n\nKeep features, columns, and data stable. Register the feature that owns the controlled slice. This example controls pagination without adding client row processing:\n\n```tsx\nimport { useState } from 'preact/hooks'\nimport {\n rowPaginationFeature,\n tableFeatures,\n useTable,\n type PaginationState,\n} from '@tanstack/preact-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nexport function PageControl() {\n const [pagination, setPagination] = useState({\n pageIndex: 0,\n pageSize: 20,\n })\n const table = useTable({\n features,\n columns,\n data,\n state: { pagination },\n onPaginationChange: setPagination,\n })\n return (\n \n )\n}\n```\n\nThe Preact setter accepts both a value and a functional updater. Supply the current `state.pagination` together with `onPaginationChange`; a callback alone does not keep the table synchronized.\n\nFor an externally owned atom, create it with `useCreateAtom` from `@tanstack/preact-store`, pass it in `atoms.`, and subscribe with `useSelector` where other UI needs its value.\n\n## Reactive boundaries\n\nUse native `@tanstack/preact-store` bindings. A narrowed selector must include every state slice used by rendered builder methods, or those consumers need their own subscription.\n\nFor external-atom examples, selector dependencies, or fine-grained boundaries, read [reactivity details](references/reactivity.md). If this task changes processing features, run `intent load @tanstack/table-core#table-features` and read the relevant feature references.\n\n## API discovery\n\nInspect `node_modules/@tanstack/preact-table/dist/useTable.d.ts` and `Subscribe.d.ts`, plus the installed `@tanstack/preact-store` declarations for atom hooks.\n","packages/preact-table/skills/table-state/references/reactivity.md":"# Preact table reactive boundaries\n\nRead when optimizing subscriptions, composing external atoms, or debugging Preact-specific tracking and controlled updates. Shared ownership, initialization, and reset rules remain in `intent load @tanstack/table-core#table-state`.\n\n## Example context\n\n```tsx\nconst table = useTable({ features, columns, data }, (state) => ({\n pagination: state.pagination,\n}))\nreturn {table.state.pagination.pageIndex + 1}\n```\n\nThe selector determines rerenders and the shape exposed on `table.state`; omission selects all registered slices.\n\n## State patterns\n\n### Fine-grained Preact subscription\n\n```tsx\nreturn (\n \n {(selection) => {Object.keys(selection).length}}\n \n)\n```\n\n### External atom ownership\n\n```tsx\nimport { useCreateAtom } from '@tanstack/preact-store'\nconst pagination = useCreateAtom({ pageIndex: 0, pageSize: 20 })\nconst table = useTable({ features, columns, data, atoms: { pagination } })\n```\n\n## Common mistakes\n\n### HIGH Reading snapshots as subscriptions\n\nWrong:\n\n```tsx\nconst page = table.store.state.pagination.pageIndex\n```\n\nCorrect:\n\n```tsx\nconst page = table.state.pagination.pageIndex\n```\n\nStore and atom `.get()` reads are snapshots; selected `table.state` or `Subscribe` connects a Preact render.\n\nSource: `packages/preact-table/src/useTable.ts`\n\n### HIGH Controlling only the callback\n\nWrong:\n\n```tsx\nuseTable({ features, columns, data, onPaginationChange: setPagination })\n```\n\nCorrect:\n\n```tsx\nuseTable({\n features,\n columns,\n data,\n state: { pagination },\n onPaginationChange: setPagination,\n})\n```\n\nThe callback must write into the value supplied for that controlled slice.\n\nSource: `docs/framework/preact/guide/table-state.md`\n\n### MEDIUM Narrowing away rendered dependencies\n\nWrong:\n\n```tsx\nconst table = useTable(options, (state) => ({ pagination: state.pagination }))\nreturn table.getSelectedRowModel().rows.length\n```\n\nCorrect:\n\n```tsx\nconst table = useTable(options, (state) => ({\n pagination: state.pagination,\n rowSelection: state.rowSelection,\n}))\nreturn table.getSelectedRowModel().rows.length\n```\n\nIf render output depends on selection, the owning render boundary must subscribe to it directly or via `Subscribe`.\n\nSource: `examples/preact/basic-subscribe`\n\n## API discovery\n\nInspect `node_modules/@tanstack/preact-table/dist/useTable.d.ts` and `Subscribe.d.ts`; use `@tanstack/preact-store` rather than React Store hooks.\n\n## Sources\n\n- `TanStack/table:docs/framework/preact/guide/table-state.md`\n- `TanStack/table:examples/preact/basic-subscribe`\n- `TanStack/table:packages/preact-table/src/useTable.ts`\n","packages/react-table-devtools/README.md":"","packages/react-table-devtools/skills/devtools/SKILL.md":"---\nname: devtools\ndescription: >\n Connect React Table v9 instances to Devtools with tableDevtoolsPlugin and useTanStackTableDevtools. Load for missing Table panels, registration lifecycle, required options.key, enabled state, or development versus explicit production exports.\nmetadata:\n type: framework\n library: '@tanstack/react-table-devtools'\n framework: react\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\n - '@tanstack/table-devtools#devtools'\nsources:\n - 'TanStack/table:docs/devtools.md'\n - 'TanStack/table:packages/react-table-devtools/src/index.ts'\n - 'TanStack/table:packages/react-table-devtools/src/useTanStackTableDevtools.ts'\n---\n\nThis skill builds on @tanstack/table-core#core and @tanstack/table-devtools#devtools.\n\n## Setup\n\n```tsx\nimport { TanStackDevtools } from '@tanstack/react-devtools'\nimport { useTable, tableFeatures } from '@tanstack/react-table'\nimport {\n tableDevtoolsPlugin,\n useTanStackTableDevtools,\n} from '@tanstack/react-table-devtools'\n\nconst features = tableFeatures({})\nconst columns = [{ accessorKey: 'id' }]\nconst data: Array<{ id: string }> = []\n\nexport function App() {\n const table = useTable({\n key: 'users-table',\n features,\n columns,\n data,\n })\n useTanStackTableDevtools(table)\n return \n}\n```\n\n## Hooks and Components\n\nUse `useTanStackTableDevtools(table, { enabled })` immediately after creating the table. Mount one TanStackDevtools host with `tableDevtoolsPlugin()` near the application root.\n\n## Common Mistakes\n\n### HIGH Hook receives a keyless table\n\nWrong: create the table without `key` and expect the hook to infer a name.\n\nCorrect: set a unique `key` in table options before calling the hook.\n\nCore target registration skips keyless tables.\n\nSource: TanStack/table:docs/devtools.md\n\n### HIGH Hook called conditionally\n\nWrong: call `useTanStackTableDevtools` only inside an `if` branch.\n\nCorrect: call it every render and pass `{ enabled: condition }`.\n\nThe hook owns React effect registration and cleanup.\n\nSource: TanStack/table:packages/react-table-devtools/src/useTanStackTableDevtools.ts\n\n### MEDIUM Default import expected in production\n\nWrong: expect the normal hook/plugin/panel to inspect production tables.\n\nCorrect: keep normal guidance development-only; use the `/production` entrypoint only when explicitly required.\n\nThe default index selects no-op implementations outside development.\n\nSource: TanStack/table:packages/react-table-devtools/src/index.ts\n\n## API Discovery\n\nInspect `node_modules/@tanstack/react-table-devtools/dist/index.d.ts` and `useTanStackTableDevtools.d.ts` for the installed lifecycle API.\n","packages/react-table/README.md":"","packages/react-table/skills/getting-started/SKILL.md":"---\nname: getting-started\ndescription: Create and render Table v9 with the react adapter. Route reusable createTableHook components, Query and Virtual integration, and framework setup; use table-state for reactive ownership.\nmetadata:\n type: framework\n library: '@tanstack/react-table'\n library_version: '9.3.1'\n framework: react\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/react/guide/migrating.md\n - TanStack/table:examples/react/basic-use-table\n - TanStack/table:packages/react-table/src/index.ts\n - TanStack/table:docs/framework/react/guide/composable-tables.md\n - TanStack/table:docs/framework/react/guide/table-context.md\n - TanStack/table:examples/react/composable-tables\n - TanStack/table:packages/react-table/src/createTableHook.tsx\n - TanStack/table:packages/react-table/src/createTableHookContexts.tsx\n - TanStack/table:examples/react/with-tanstack-query\n - TanStack/table:examples/react/virtualized-infinite-scrolling\n - TanStack/table:docs/framework/react/guide/pagination.md\n - TanStack/table:docs/framework/react/guide/virtualization.md\n - TanStack/table:examples/react/virtualized-rows\n - TanStack/table:examples/react/virtualized-columns\n---\n\n# React Table setup and integration\n\nBefore starting, run `intent load @tanstack/table-core#core` for the shared headless model and stable-input rules.\n\n## Setup\n\n```tsx\nimport { useState } from 'react'\nimport {\n createColumnHelper,\n tableFeatures,\n useTable,\n} from '@tanstack/react-table'\n\ntype Person = { name: string; age: number }\nconst features = tableFeatures({})\nconst helper = createColumnHelper()\nconst columns = helper.columns([\n helper.accessor('name', { header: 'Name' }),\n helper.accessor('age', { header: 'Age' }),\n])\n\nexport function PeopleTable() {\n const [data] = useState([{ name: 'Ada', age: 36 }])\n const table = useTable({ features, columns, data })\n\n return (\n \n \n {table.getHeaderGroups().map((group) => (\n \n {group.headers.map((header) => (\n \n ))}\n \n ))}\n \n \n {table.getRowModel().rows.map((row) => (\n \n {row.getAllCells().map((cell) => (\n \n ))}\n \n ))}\n \n
\n {header.isPlaceholder ? null : (\n \n )}\n
\n \n
\n )\n}\n```\n\nTable produces models and state; React owns the semantic markup, styles, event affordances, and accessibility.\n\n## Essential constraints\n\nUse `useTable` for v9. Keep `features`, `columns`, and fallback data at module scope or in stable state/memos. A new `response.data ?? []` fallback invalidates row models on every render. The default selector subscribes the owner to all registered state.\n\nTable owns models and state. The application owns markup, CSS, interactions, and accessibility. Core-only tables use `row.getAllCells()`; visibility-aware methods need `columnVisibilityFeature`. Optional state and APIs require their features. Put row-model slots after their prerequisite features in `tableFeatures()`.\n\n## Load by task\n\n- For repeated features, defaults, typed contexts, or component registries, read [reusable app hooks](references/create-table-hook.md).\n- For Query-backed data, server pages, sorting, filtering, or request keys, read [TanStack Query integration](references/with-tanstack-query.md).\n- For virtual rows, columns, dynamic measurement, or infinite scrolling, read [TanStack Virtual integration](references/with-tanstack-virtual.md).\n- For controlled state, tracked reads, or render subscriptions, read [table state](../table-state/SKILL.md).\n- For feature registration, missing feature APIs, or processing ownership, run `intent load @tanstack/table-core#table-features` and read only references needed by the task.\n- For v8 code, read the [migration checklist](../migrate-v8-to-v9/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/react-table/dist/index.d.ts`, then the exported adapter declarations for the installed version. Inspect optional core APIs under `node_modules/@tanstack/table-core/dist/features/`.\n","packages/react-table/skills/getting-started/references/create-table-hook.md":"# Reusable React table hooks\n\nUse this reference when multiple React tables share features, defaults, or registered components. Keep one-off tables on `useTable`. For controlled state or subscription changes, read [table state](../../table-state/SKILL.md).\n\n## Setup\n\n```tsx\nimport {\n createTableHook,\n rowSelectionFeature,\n tableFeatures,\n} from '@tanstack/react-table'\n\nexport const { createAppColumnHelper, useAppTable, useTableContext } =\n createTableHook({\n features: tableFeatures({ rowSelectionFeature }),\n getRowId: (row: { id: string }) => row.id,\n })\n```\n\nKeep this factory in an infrastructure module. It binds feature types and defaults once while each `useAppTable` call still supplies its own data, columns, state, and initial state.\n\n## Core patterns\n\n### Infer columns through the bound helper\n\n```tsx\ntype Person = { id: string; name: string }\nconst helper = createAppColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n\nfunction People({ data }: { data: Person[] }) {\n const table = useAppTable({ data, columns })\n return (\n \n
{table.getRowModel().rows.length}
\n \n )\n}\n```\n\n`AppTable` takes ordinary JSX children when it has no selector. Function children are only valid with a selector:\n\n```tsx\n state.rowSelection}>\n {(rowSelection) => {Object.keys(rowSelection).length}}\n\n```\n\n### Read registered context instead of drilling props\n\n```tsx\nfunction RowCount() {\n const table = useTableContext()\n return {table.getRowModel().rows.length}\n}\n```\n\nRegister reusable table/cell/header components in the factory and consume them under their matching `App*` provider.\n\n### Isolate genuinely nested table setups\n\nThe default module-scoped contexts are HMR-stable, and normal provider scoping already isolates sibling tables. Separate `createTableHook` calls still use those shared default contexts, so nested providers can silently resolve a consumer to the inner table. Create scoped contexts only when different table setups are nested:\n\n```tsx\nimport {\n createTableHook,\n createTableHookContexts,\n rowSelectionFeature,\n tableFeatures,\n} from '@tanstack/react-table'\n\nconst features = tableFeatures({ rowSelectionFeature })\nconst { tableContext, cellContext, headerContext } =\n createTableHookContexts()\n\nexport const app = createTableHook({\n features,\n tableContext,\n cellContext,\n headerContext,\n})\n```\n\nPrefer context hooks returned by `createTableHook`; they include the registered component maps in their types. Hooks returned directly by `createTableHookContexts` know only `TFeatures` and are useful from modules that cannot import the completed factory.\n\n## Common mistakes\n\n### Choose a factory for repeated conventions\n\nA factory for shared conventions:\n\n```tsx\nconst { useAppTable } = createTableHook({ features: tableFeatures({}) })\n```\n\nStandalone construction for a one-off table:\n\n```tsx\nconst table = useTable({ features, columns, data })\n```\n\nA factory adds an app-wide abstraction; standalone construction is clearer without shared conventions.\n\nSource: `docs/framework/react/guide/composable-tables.md`\n\n### HIGH Creating the factory during render\n\nWrong:\n\n```tsx\nfunction People() {\n const app = createTableHook({ features })\n const table = app.useAppTable({ data, columns })\n return (\n \n
\n \n )\n}\n```\n\nCorrect:\n\n```tsx\nconst app = createTableHook({ features })\nfunction People() {\n const table = app.useAppTable({ data, columns })\n return (\n \n
\n \n )\n}\n```\n\nCreating a new factory closure during render makes hook configuration and component registries unstable. Keep the factory and its bound hook identity at module scope.\n\nSource: `packages/react-table/src/createTableHook.tsx`\n\n### HIGH Closing a circular HMR import\n\nWrong:\n\n```tsx\n// table.ts imports RowCount; RowCount.tsx imports useTableContext from table.ts\nexport const app = createTableHook({ features, tableComponents: { RowCount } })\n```\n\nCorrect:\n\n```tsx\n// components.tsx receives the exported hook through a cycle-free module boundary\nexport const app = createTableHook({ features })\n```\n\nKeep the factory dependency graph acyclic or inject components from a separate composition root; circular registries can break Vite HMR.\n\nSource: `https://github.com/TanStack/table/issues/6348`\n\n## API discovery\n\nInspect `node_modules/@tanstack/react-table/dist/createTableHook.d.ts` and `createTableHookContexts.d.ts` for the exact returned helpers, component registries, wrapper props, and scoped context types.\n\n## Sources\n\n- `TanStack/table:docs/framework/react/guide/composable-tables.md`\n- `TanStack/table:docs/framework/react/guide/table-context.md`\n- `TanStack/table:examples/react/composable-tables`\n- `TanStack/table:packages/react-table/src/createTableHook.tsx`\n- `TanStack/table:packages/react-table/src/createTableHookContexts.tsx`\n","packages/react-table/skills/getting-started/references/with-tanstack-query.md":"# React Table with TanStack Query\n\nUse this reference when Query owns server data for a React table. Read [table state](../../table-state/SKILL.md) for reactive ownership. Run `intent load @tanstack/table-core#table-features` and read its client/server reference before choosing manual processing stages. Query fetches rows already processed by every server-owned stage; manual flags only bypass Table processing.\n\n## Setup\n\n```tsx\nimport { keepPreviousData, useQuery } from '@tanstack/react-query'\nimport { useCreateAtom, useSelector } from '@tanstack/react-store'\nimport {\n rowPaginationFeature,\n tableFeatures,\n useTable,\n} from '@tanstack/react-table'\nimport type { PaginationState } from '@tanstack/react-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst emptyRows: Array<{ id: string }> = []\n\nfunction ServerTable() {\n const paginationAtom = useCreateAtom({\n pageIndex: 0,\n pageSize: 20,\n })\n const pagination = useSelector(paginationAtom, (value) => value)\n const result = useQuery({\n queryKey: ['people', pagination],\n queryFn: async () =>\n fetch(\n `/api/people?page=${pagination.pageIndex}&size=${pagination.pageSize}`,\n ).then(\n (r) =>\n r.json() as Promise<{\n rows: Array<{ id: string }>\n rowCount: number\n }>,\n ),\n placeholderData: keepPreviousData,\n })\n return useTable({\n features,\n columns,\n data: result.data?.rows ?? emptyRows,\n rowCount: result.data?.rowCount,\n atoms: { pagination: paginationAtom },\n manualPagination: true,\n })\n}\n```\n\n## Core patterns\n\n### Put every server-owned slice in the key\n\n```tsx\nconst result = useQuery({\n queryKey: ['people', pagination, sorting, columnFilters],\n queryFn: () => fetchPeople({ pagination, sorting, columnFilters }),\n})\n```\n\n### Feed the query result directly to Table\n\n```tsx\nconst table = useTable({\n features,\n columns,\n data: result.data?.rows ?? emptyRows,\n})\n```\n\n## Common mistakes\n\n### HIGH Duplicating query rows into state\n\nWrong:\n\n```tsx\nuseEffect(() => setRows(result.data?.rows ?? []), [result.data])\nconst table = useTable({ features, columns, data: rows })\n```\n\nCorrect:\n\n```tsx\nconst table = useTable({\n features,\n columns,\n data: result.data?.rows ?? emptyRows,\n})\n```\n\nThe second state layer can lag behind the query cache and creates an extra synchronization path.\n\nSource: `examples/react/with-tanstack-query`\n\n### HIGH Omitting state from the query key\n\nWrong:\n\n```tsx\nuseQuery({ queryKey: ['people'], queryFn: () => fetchPeople({ pagination }) })\n```\n\nCorrect:\n\n```tsx\nuseQuery({\n queryKey: ['people', pagination],\n queryFn: () => fetchPeople({ pagination }),\n})\n```\n\nQuery otherwise reuses cache entries for different server requests.\n\nSource: `examples/react/with-tanstack-query`\n\n### HIGH Expecting manual mode to fetch\n\nWrong:\n\n```tsx\nuseTable({ features, columns, data, manualPagination: true })\n```\n\nCorrect:\n\n```tsx\nuseTable({\n features,\n columns,\n data: result.data?.rows ?? emptyRows,\n rowCount: result.data?.rowCount,\n manualPagination: true,\n})\n```\n\n`manualPagination` only bypasses client pagination; the application must fetch a processed page and provide its total count.\n\nSource: `docs/framework/react/guide/pagination.md`\n\n### Choose the loading transition\n\nTo show a loading transition for each page:\n\n```tsx\nuseQuery({\n queryKey: ['people', pagination],\n queryFn: () => fetchPeople({ pagination }),\n})\n```\n\nTo keep the previous page visible while fetching:\n\n```tsx\nuseQuery({\n queryKey: ['people', pagination],\n queryFn: () => fetchPeople({ pagination }),\n placeholderData: keepPreviousData,\n})\n```\n\nPreserve the previous page intentionally when an empty loading transition is undesirable.\n\nSource: `examples/react/with-tanstack-query`\n\n## API discovery\n\nInspect `node_modules/@tanstack/react-table/dist/index.d.ts` and the relevant installed core feature declarations; inspect the installed `@tanstack/react-query` declarations for current query option types.\n\n## Sources\n\n- `TanStack/table:examples/react/with-tanstack-query`\n- `TanStack/table:examples/react/virtualized-infinite-scrolling`\n- `TanStack/table:docs/framework/react/guide/pagination.md`\n","packages/react-table/skills/getting-started/references/with-tanstack-virtual.md":"# React Table with TanStack Virtual\n\nUse this reference when virtualizing React table rows or columns. Virtual consumes the final Table model in the renderer; it is not a Table feature. For reactive model or subscription problems, read [table state](../../table-state/SKILL.md). Register `columnSizingFeature` before calling sizing APIs, and `columnVisibilityFeature` before visibility-aware APIs.\n\n## Setup\n\n```tsx\nimport { useRef } from 'react'\nimport { useVirtualizer } from '@tanstack/react-virtual'\n\nfunction VirtualBody({ table }: { table: any }) {\n const scrollRef = useRef(null)\n const rows = table.getRowModel().rows\n const virtualizer = useVirtualizer({\n count: rows.length,\n getScrollElement: () => scrollRef.current,\n estimateSize: () => 36,\n getItemKey: (index) => rows[index].id,\n overscan: 5,\n })\n return (\n
\n
\n {virtualizer.getVirtualItems().map((item) => (\n \n {rows[item.index].getAllCells().map((cell: any) => (\n \n \n \n ))}\n
\n ))}\n
\n
\n )\n}\n```\n\n## Core patterns\n\n### Keep the virtualizer near its render loop\n\n```tsx\nconst rows = table.getRowModel().rows\nconst rowVirtualizer = useVirtualizer({\n count: rows.length,\n getScrollElement: () => container.current,\n estimateSize: () => 36,\n})\n```\n\nThis limits unrelated parent updates and keeps count, measurement, and rendered items together.\n\n### Use Table sizes in renderer CSS\n\n```tsx\n\n \n\n```\n\nTable calculates size state; the renderer must apply it.\n\n## Common mistakes\n\n### HIGH Registering Virtual as a feature\n\nWrong:\n\n```tsx\nconst features = tableFeatures({ rowVirtualizer: useVirtualizer(options) })\n```\n\nCorrect:\n\n```tsx\nconst rows = table.getRowModel().rows\nconst virtualizer = useVirtualizer({\n count: rows.length,\n getScrollElement: () => scrollRef.current,\n estimateSize: () => 36,\n})\n```\n\nVirtual controls rendering geometry and is not a Table feature or row model.\n\nSource: `docs/framework/react/guide/virtualization.md`\n\n### HIGH Virtualizing raw input data\n\nWrong:\n\n```tsx\nconst virtualizer = useVirtualizer({\n count: data.length,\n getScrollElement,\n estimateSize,\n})\n```\n\nCorrect:\n\n```tsx\nconst rows = table.getRowModel().rows\nconst virtualizer = useVirtualizer({\n count: rows.length,\n getScrollElement,\n estimateSize,\n})\n```\n\nRaw data ignores filtering, sorting, expansion, grouping, and pagination already applied by Table.\n\nSource: `examples/react/virtualized-rows`\n\n### HIGH Measuring against incomplete identity\n\nWrong:\n\n```tsx\n{row.id}\n```\n\nCorrect:\n\n```tsx\n\n {row.id}\n\n```\n\nDynamic measurement needs the virtual index, and stable row identity prevents measurements moving to the wrong row.\n\nSource: `examples/react/virtualized-rows`\n\n### HIGH Omitting positioning geometry\n\nWrong:\n\n```tsx\n{virtualizer.getVirtualItems().map(renderRow)}\n```\n\nCorrect:\n\n```tsx\n\n {virtualizer.getVirtualItems().map(renderRow)}\n\n```\n\nVirtual only computes positions; the renderer must provide total spacer size and position items using each virtual start.\n\nSource: `examples/react/virtualized-rows`\n\n## API discovery\n\nInspect `node_modules/@tanstack/react-table/dist/index.d.ts` for Table render APIs and installed `node_modules/@tanstack/react-virtual/dist/` for the exact virtualizer options. Copy layout contracts from the maintained example matching rows, columns, or infinite loading.\n\n## Sources\n\n- `TanStack/table:docs/framework/react/guide/virtualization.md`\n- `TanStack/table:examples/react/virtualized-rows`\n- `TanStack/table:examples/react/virtualized-columns`\n- `TanStack/table:examples/react/virtualized-infinite-scrolling`\n","packages/react-table/skills/migrate-v8-to-v9/SKILL.md":"---\nname: migrate-v8-to-v9\ndescription: Migrate react Table v8 to v9. Audit framework construction, rendering, state, and app hooks, with shared API changes in the core migration skill.\nmetadata:\n type: lifecycle\n library: '@tanstack/react-table'\n library_version: '9.3.1'\n framework: react\nrequires:\n - '@tanstack/table-core#migrate-v8-to-v9'\nsources:\n - TanStack/table:docs/framework/react/guide/migrating.md\n - TanStack/table:packages/react-table/src/index.ts\n - TanStack/table:packages/react-table/src/legacy.ts\n - TanStack/table:examples/react/basic-use-table\n---\n\n# React v8-to-v9 migration checklist\n\nBefore starting, run `intent load @tanstack/table-core#migrate-v8-to-v9`. Audit its entire shared checklist and read the detailed core mappings for APIs present in the application. This checklist adds the React-specific changes.\n\nFramework prerequisite: React 18 or newer (`react >=18`).\n\n## Adapter audit\n\n- [ ] Replace `useReactTable` with `useTable`; remove any temporary `useLegacyTable` from `@tanstack/react-table/legacy`.\n- [ ] Keep model inputs stable and use explicit `tableFeatures` plus its row-model slots. Audit every shared change through the core checklist.\n- [ ] Replace render reads with selected `table.state`, `table.Subscribe`, or `useSelector`. Atom/store snapshots alone do not subscribe React.\n- [ ] Pair each controlled `state` slice with its updater callback, or supply a stable React Store atom. Remove the global `onStateChange` option.\n- [ ] Check compiler-memoized children hiding builder-method reads; subscribe inside the child or pass the selected value to it.\n- [ ] Use `table.FlexRender` or standalone `FlexRender` where appropriate; `flexRender` remains supported.\n- [ ] Introduce `tableOptions` or `createTableHook` only for repeated conventions; preserve app wrapper and typed-context boundaries.\n\n## Load the affected details\n\nWhen the audit finds old React construction, state, rendering, or app-hook code, read [adapter migration details](references/adapter-migration.md) before editing it. For a replacement render scaffold, read [getting started](../getting-started/SKILL.md). For controlled or stale state after migration, read [table state](../table-state/SKILL.md).\n\nShared pinning, sizing, sorting, selection, prototype-method, type, and registry changes stay in the core migration references. Renaming `useReactTable` alone does not complete the migration.\n\n## Verify the migration\n\n- [ ] Type-check against the installed v9 adapter and exercise every enabled client/manual feature flow.\n- [ ] Verify external state writes, reactive data replacement, and the framework rendering paths changed above.\n- [ ] Complete the core checklist, including layout and selection behavior when those features are used.\n- [ ] Replace temporary `stockFeatures` when the target is explicit feature tree-shaking and remove `useLegacyTable`.\n\n## API discovery\n\nInspect `node_modules/@tanstack/react-table/dist/index.d.ts` and the exported adapter declarations. Use `node_modules/@tanstack/table-core/dist/index.d.ts` for shared APIs.\n","packages/react-table/skills/migrate-v8-to-v9/references/adapter-migration.md":"# React adapter migration details\n\nRead when replacing React table construction, reactive state, rendering, or reusable app hooks. First complete the shared checklist from `intent load @tanstack/table-core#migrate-v8-to-v9`; its references own shared feature, method, and TypeScript mappings.\n\n## Replace `useReactTable` with `useTable`\n\n```tsx\nimport {\n columnFilteringFeature,\n createFilteredRowModel,\n createSortedRowModel,\n filterFn_includesString,\n rowSortingFeature,\n sortFn_alphanumeric,\n tableFeatures,\n useTable,\n} from '@tanstack/react-table'\n\nconst features = tableFeatures({\n columnFilteringFeature,\n rowSortingFeature,\n filteredRowModel: createFilteredRowModel(),\n sortedRowModel: createSortedRowModel(),\n filterFns: { includesString: filterFn_includesString },\n sortFns: { alphanumeric: sortFn_alphanumeric },\n})\n\nconst table = useTable({ features, columns, data })\n```\n\nPrefer explicit features as the end state. `stockFeatures` is a useful kitchen-sink migration shortcut, but bundles every stock feature. Do not target `useLegacyTable`: it is deprecated, React-only, exported from `@tanstack/react-table/legacy`, and intended only to keep an existing migration moving temporarily.\n\n## State and reactive reads\n\n| v8 | v9 |\n| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `table.getState()` | `table.state`, `table.store.state`, or `table.atoms..get()` |\n| Top-level `onStateChange` | Per-slice `onSortingChange`, `onPaginationChange`, etc., or `table.store.subscribe()` for all changes |\n| Broad component updates | Default `useTable` selector still subscribes to all registered state; narrow with a selector, `table.Subscribe`, or `useSelector(table.atoms.)` |\n| Framework state only | Optional writable atoms through `options.atoms` |\n\nControlled `state` plus per-slice callbacks remains valid:\n\n```tsx\nconst [sorting, setSorting] = useState([])\nconst table = useTable({\n features,\n columns,\n data,\n state: { sorting },\n onSortingChange: setSorting,\n})\n```\n\nFor fine-grained rendering, pass a selector as the second `useTable` argument or select closer to the consumer:\n\n```tsx\nconst table = useTable(options, () => null)\n\n state.pagination}>\n {pagination => Page {pagination.pageIndex + 1}}\n\n```\n\nExternal atoms override the same slice in `state`; table setters write directly to them, and `table.reset()` does not reset them. Do not supply an atom, controlled value, and callback for the same slice without intentionally applying that precedence.\n\nFor React Compiler memoized children hiding builder reads, put `Subscribe` inside the child or pass its selected value as a changing prop. Read [React state](../../table-state/SKILL.md) before adding such a boundary.\n\n## Rendering and composition\n\n- `flexRender(def, context)` still works. Prefer ``, ``, or the standalone `` for the v9 component form.\n- Use `tableOptions()` to type reusable partial option objects.\n- Use `createTableHook()` only when several tables share features, row models, defaults, and registered components. It returns app-specific helpers such as `useAppTable`, `createAppColumnHelper`, and table/cell/header context hooks; it is not required for one-off tables.\n\nFor detailed controlled wiring or tracking failures, read [table state](../../table-state/SKILL.md). For reusable contexts or components, read [app-hook composition](../../getting-started/references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/react-table/dist/index.d.ts` and its exported declarations for construction, rendering, and app hooks. Inspect `dist/legacy.d.ts` only to identify deprecated bridge code that still needs removal.\n\n## Sources\n\n- `TanStack/table:docs/framework/react/guide/migrating.md`\n- `TanStack/table:packages/react-table/src/index.ts`\n- `TanStack/table:packages/react-table/src/legacy.ts`\n- `TanStack/table:examples/react/basic-use-table`\n","packages/react-table/skills/table-state/SKILL.md":"---\nname: table-state\ndescription: Read and control Table v9 state in react. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/react-table'\n library_version: '9.3.1'\n framework: react\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/react/guide/table-state.md\n - TanStack/table:docs/framework/react/guide/react-compiler.md\n - TanStack/table:examples/react/basic-subscribe\n - TanStack/table:packages/react-table/src/Subscribe.ts\n - TanStack/table:packages/react-table/src/useTable.ts\n---\n\n# React table state\n\nBefore starting, run `intent load @tanstack/table-core#table-state` for shared ownership, initialization, updates, and resets. State repair does not require loading setup guidance.\n\n## Read reactive state\n\n`useTable` selects all registered state by default. Its optional second-argument selector controls rerenders and the shape of `table.state`. `table.atoms..get()` and `table.store.state` are current snapshots, not React subscriptions.\n\nUse selected `table.state` in the owner render. For narrower boundaries, use `table.Subscribe` or `useSelector` from `@tanstack/react-store`. Without `source`, `table.Subscribe` selects from `table.store`; with `source`, it subscribes to that atom or store. Start with the default selector until render cost requires narrowing.\n\n## Control a slice\n\nKeep features, columns, and data stable. Register the feature that owns the controlled slice. This example controls pagination without adding client row processing:\n\n```tsx\nimport { useState } from 'react'\nimport {\n rowPaginationFeature,\n tableFeatures,\n useTable,\n type PaginationState,\n} from '@tanstack/react-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nexport function PageControl() {\n const [pagination, setPagination] = useState({\n pageIndex: 0,\n pageSize: 20,\n })\n const table = useTable({\n features,\n columns,\n data,\n state: { pagination },\n onPaginationChange: setPagination,\n })\n return (\n \n )\n}\n```\n\nThe React setter accepts both a value and a functional updater. Supply the current `state.pagination` together with `onPaginationChange`; a callback alone does not keep the table synchronized.\n\nFor an externally owned atom, create it with `useCreateAtom` from `@tanstack/react-store`, pass it in `atoms.`, and subscribe with `useSelector` where other UI needs its value.\n\n## Reactive boundaries\n\nFor React Compiler memoized children, put `Subscribe` inside the component hiding builder-method reads or pass the selected value as a changing prop. An outer subscription that ignores its value cannot refresh a stable child. In core-typed cell/header contexts, import standalone `Subscribe`.\n\nFor external-atom examples, selector dependencies, or fine-grained boundaries and React Compiler problems, read [reactivity details](references/reactivity.md). If this task changes processing features, run `intent load @tanstack/table-core#table-features` and read the relevant feature references.\n\n## API discovery\n\nInspect `node_modules/@tanstack/react-table/dist/useTable.d.ts` and `Subscribe.d.ts`, plus the installed `@tanstack/react-store` declarations for atom hooks.\n","packages/react-table/skills/table-state/references/reactivity.md":"# React table reactive boundaries\n\nRead when optimizing subscriptions, composing external atoms, or debugging React-specific tracking and controlled updates. Shared ownership, initialization, and reset rules remain in `intent load @tanstack/table-core#table-state`.\n\n## Example context\n\n```tsx\nimport {\n rowSelectionFeature,\n tableFeatures,\n useTable,\n} from '@tanstack/react-table'\n\nconst features = tableFeatures({ rowSelectionFeature })\n\nexport function SelectionCount({\n data,\n columns,\n}: {\n data: Array<{ id: string }>\n columns: any[]\n}) {\n const table = useTable({ features, data, columns }, (state) => ({\n rowSelection: state.rowSelection,\n }))\n return {Object.keys(table.state.rowSelection).length}\n}\n```\n\nThe optional selector controls which state changes rerender the component and which selected fields appear on `table.state`. Omitting it selects all registered slices.\n\n## State patterns\n\n### Subscribe at the expensive boundary\n\n```tsx\nfunction SelectedRows({\n table,\n}: {\n table: ReturnType>\n}) {\n return (\n state.rowSelection}>\n {(rowSelection) => {Object.keys(rowSelection).length}}\n \n )\n}\n```\n\nAt a top-level component holding the adapter's table instance, `table.Subscribe` selects from `table.store`. Use this after measuring or when the React Compiler cannot see state reads hidden behind table builder methods.\n\n### Control a slice with an external atom\n\n```tsx\nimport { useCreateAtom } from '@tanstack/react-store'\n\nconst selection = useCreateAtom>({})\nconst table = useTable({\n features,\n columns,\n data,\n atoms: { rowSelection: selection },\n})\n```\n\nAn external atom is both ownership and subscription source; it avoids value-or-updater glue.\n\n### Control a slice with React state\n\n```tsx\nconst [rowSelection, setRowSelection] = useState>({})\nconst table = useTable({\n features,\n columns,\n data,\n state: { rowSelection },\n onRowSelectionChange: setRowSelection,\n})\n```\n\n## Common mistakes\n\n### HIGH Treating a snapshot as subscription\n\nWrong:\n\n```tsx\nconst count = Object.keys(table.atoms.rowSelection.get()).length\n```\n\nCorrect:\n\n```tsx\nconst count = Object.keys(table.state.rowSelection).length\n```\n\n`atoms.*.get()` and `table.store.state` return current values but do not subscribe a React render.\n\nSource: `packages/react-table/src/useTable.ts`\n\n### HIGH Supplying only the change callback\n\nWrong:\n\n```tsx\nconst table = useTable({\n features,\n columns,\n data,\n onRowSelectionChange: setRowSelection,\n})\n```\n\nCorrect:\n\n```tsx\nconst table = useTable({\n features,\n columns,\n data,\n state: { rowSelection },\n onRowSelectionChange: setRowSelection,\n})\n```\n\nOnce a callback takes ownership, the corresponding controlled value must be written back.\n\nSource: `docs/framework/react/guide/table-state.md`\n\n### HIGH Hiding builder reads from the React Compiler\n\nWrong:\n\n```tsx\nfunction SelectionCell({ row }) {\n return (\n \n )\n}\n```\n\nCorrect:\n\n```tsx\nimport { Subscribe } from '@tanstack/react-table'\n\nfunction SelectionCell({ row }) {\n return (\n selection[row.id]}\n >\n {(selected) => (\n \n )}\n \n )\n}\n```\n\nWith the default selector, `useTable` returns a fresh React-facing table reference on state changes. The remaining hazard is a nested component receiving only a stable core table, row, cell, column, or header object and hiding a state read behind one of its methods. Keep `Subscribe` inside that component, or pass its selected value to the child as a changing prop. An outer `Subscribe` that ignores the selected value is not enough.\n\nInside cell and header render contexts, `table` is typed as core `Table`, so import standalone `Subscribe`. Use `source={table.store}` with a selector for multiple slices, or a specific atom for the narrowest boundary.\n\nSource: `docs/framework/react/guide/react-compiler.md`\n\n### Choose boundaries after measuring\n\nAn extra subscription boundary:\n\n```tsx\n\n {() => }\n\n```\n\nWith the default owner subscription, start with:\n\n```tsx\n\n```\n\nDefault `useTable` state selection is the simpler starting point; introduce fine-grained boundaries where measurement or compiler behavior justifies them.\n\nSource: `docs/framework/react/guide/table-state.md`\n\n## API discovery\n\nInspect `node_modules/@tanstack/react-table/dist/useTable.d.ts` and `Subscribe.d.ts`. Core atom precedence and state slices live under `node_modules/@tanstack/table-core/dist/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/react/guide/table-state.md`\n- `TanStack/table:docs/framework/react/guide/react-compiler.md`\n- `TanStack/table:examples/react/basic-subscribe`\n- `TanStack/table:packages/react-table/src/Subscribe.ts`\n- `TanStack/table:packages/react-table/src/useTable.ts`\n","packages/solid-table-devtools/README.md":"","packages/solid-table-devtools/skills/devtools/SKILL.md":"---\nname: devtools\ndescription: >\n Connect Solid Table v9 instances to Devtools with tableDevtoolsPlugin and useTanStackTableDevtools in the proper reactive owner. Load for missing targets, required options.key, enabled state, cleanup, or development versus explicit production exports.\nmetadata:\n type: framework\n library: '@tanstack/solid-table-devtools'\n framework: solid\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\n - '@tanstack/table-devtools#devtools'\nsources:\n - 'TanStack/table:docs/devtools.md'\n - 'TanStack/table:packages/solid-table-devtools/src/index.ts'\n - 'TanStack/table:packages/solid-table-devtools/src/useTanStackTableDevtools.ts'\n---\n\nThis skill builds on @tanstack/table-core#core and @tanstack/table-devtools#devtools.\n\n## Setup\n\n```tsx\nimport { TanStackDevtools } from '@tanstack/solid-devtools'\nimport { createTable, tableFeatures } from '@tanstack/solid-table'\nimport {\n tableDevtoolsPlugin,\n useTanStackTableDevtools,\n} from '@tanstack/solid-table-devtools'\n\nconst features = tableFeatures({})\n\nexport function App() {\n const table = createTable({\n key: 'users-table',\n features,\n columns: [],\n data: [],\n })\n useTanStackTableDevtools(table)\n return \n}\n```\n\n## Hooks and Components\n\nRegister inside the component's Solid owner. Pass `{ enabled }` to the hook for conditional registration.\n\n## Common Mistakes\n\n### HIGH Registration created outside an owner\n\nWrong: call the Solid registration hook at module scope.\n\nCorrect: call it in the component that owns the table.\n\nThe hook uses Solid reactive cleanup to unregister the target.\n\nSource: TanStack/table:packages/solid-table-devtools/src/useTanStackTableDevtools.ts\n\n### HIGH Missing or reused table key\n\nWrong: omit `options.key` or share one key between mounted tables.\n\nCorrect: assign a stable unique key per live table.\n\nThe target registry skips missing keys and replaces duplicate identities.\n\nSource: TanStack/table:packages/table-devtools/src/tableTarget.ts\n\n### MEDIUM Production entrypoint assumed active\n\nWrong: expect normal Devtools exports to inspect a production table.\n\nCorrect: keep default guidance development-only; use `/production` only on explicit request.\n\nThe package index selects no-op implementations outside development.\n\nSource: TanStack/table:packages/solid-table-devtools/src/index.ts\n\n## API Discovery\n\nInspect `node_modules/@tanstack/solid-table-devtools/dist/index.d.ts`, `useTanStackTableDevtools.d.ts`, and `production.d.ts`.\n","packages/solid-table/README.md":"","packages/solid-table/skills/getting-started/SKILL.md":"","packages/solid-table/skills/getting-started/references/create-table-hook.md":"# Reusable Solid table hooks\n\nUse this reference when multiple Solid tables share features, defaults, or registered components. Keep one-off tables on `createTable`. For controlled state or subscription changes, read [table state](../../table-state/SKILL.md).\n\n## Setup\n\n```tsx\nimport {\n createTableHook,\n rowSelectionFeature,\n tableFeatures,\n} from '@tanstack/solid-table'\n\nexport const { createAppColumnHelper, createAppTable, useTableContext } =\n createTableHook({\n features: tableFeatures({ rowSelectionFeature }),\n getRowId: (row: { id: string }) => row.id,\n })\n```\n\n## Core patterns\n\n### Infer columns with the bound helper\n\n```tsx\ntype Person = { id: string; name: string }\nconst helper = createAppColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n```\n\n### Preserve per-table reactivity\n\n```tsx\nconst table = createAppTable({\n columns,\n get data() {\n return data()\n },\n})\nreturn {() => }\n```\n\n## Common mistakes\n\n### Choose a factory for repeated conventions\n\nA factory for shared conventions:\n\n```tsx\nconst app = createTableHook({ features: tableFeatures({}) })\n```\n\nStandalone construction for a one-off table:\n\n```tsx\nconst table = createTable({ features, columns, data })\n```\n\nThe factory should encode repeated app conventions rather than add ceremony.\n\nSource: `docs/framework/solid/guide/composable-tables.md`\n\n### HIGH Passing per-table snapshots\n\nWrong:\n\n```tsx\ncreateAppTable({ columns, data: data() })\n```\n\nCorrect:\n\n```tsx\ncreateAppTable({\n columns,\n get data() {\n return data()\n },\n})\n```\n\nThe getter preserves Solid tracking when the signal changes.\n\nSource: `examples/solid/composable-tables`\n\n### HIGH Reading context outside wrappers\n\nWrong:\n\n```tsx\nreturn \n```\n\nCorrect:\n\n```tsx\nreturn {() => }\n```\n\nReturned context hooks must run under the matching factory wrapper; use them instead of prop drilling registered components.\n\nSource: `packages/solid-table/src/createTableHook.tsx`\n\n## API discovery\n\nInspect `node_modules/@tanstack/solid-table/dist/createTableHook.d.ts` for exact returned names, component binding, context providers, and reactive option merging.\n\n## Sources\n\n- `TanStack/table:docs/framework/solid/guide/composable-tables.md`\n- `TanStack/table:examples/solid/composable-tables`\n- `TanStack/table:packages/solid-table/src/createTableHook.tsx`\n","packages/solid-table/skills/getting-started/references/with-tanstack-query.md":"","packages/solid-table/skills/getting-started/references/with-tanstack-virtual.md":"","packages/solid-table/skills/migrate-v8-to-v9/SKILL.md":"","packages/solid-table/skills/migrate-v8-to-v9/references/adapter-migration.md":"","packages/solid-table/skills/table-state/SKILL.md":"","packages/solid-table/skills/table-state/references/reactivity.md":"","packages/svelte-table/README.md":"","packages/svelte-table/skills/getting-started/SKILL.md":"","packages/svelte-table/skills/getting-started/references/create-table-hook.md":"","packages/svelte-table/skills/getting-started/references/with-tanstack-query.md":"","packages/svelte-table/skills/getting-started/references/with-tanstack-virtual.md":"","packages/svelte-table/skills/migrate-v8-to-v9/SKILL.md":"","packages/svelte-table/skills/migrate-v8-to-v9/references/adapter-migration.md":"","packages/svelte-table/skills/table-state/SKILL.md":"","packages/svelte-table/skills/table-state/references/reactivity.md":"","packages/table-core/README.md":"","packages/table-core/skills/core/SKILL.md":"","packages/table-core/skills/core/references/api-not-found.md":"","packages/table-core/skills/core/references/rows.md":"","packages/table-core/skills/core/references/typescript.md":"","packages/table-core/skills/custom-features/SKILL.md":"","packages/table-core/skills/custom-features/references/plugin-example.md":"","packages/table-core/skills/migrate-v8-to-v9/SKILL.md":"","packages/table-core/skills/migrate-v8-to-v9/references/architecture.md":"","packages/table-core/skills/migrate-v8-to-v9/references/feature-apis.md":"","packages/table-core/skills/migrate-v8-to-v9/references/state.md":"","packages/table-core/skills/migrate-v8-to-v9/references/typescript.md":"","packages/table-core/skills/table-features/SKILL.md":"","packages/table-core/skills/table-features/references/aggregation.md":"","packages/table-core/skills/table-features/references/cell-selection.md":"","packages/table-core/skills/table-features/references/cell-spanning.md":"","packages/table-core/skills/table-features/references/client-vs-server.md":"","packages/table-core/skills/table-features/references/column-faceting.md":"","packages/table-core/skills/table-features/references/column-filtering.md":"","packages/table-core/skills/table-features/references/column-ordering.md":"","packages/table-core/skills/table-features/references/column-pinning.md":"","packages/table-core/skills/table-features/references/column-resizing.md":"","packages/table-core/skills/table-features/references/column-sizing.md":"","packages/table-core/skills/table-features/references/column-visibility.md":"","packages/table-core/skills/table-features/references/expanding.md":"","packages/table-core/skills/table-features/references/global-filtering.md":"","packages/table-core/skills/table-features/references/grouping.md":"","packages/table-core/skills/table-features/references/pagination.md":"","packages/table-core/skills/table-features/references/row-pinning.md":"","packages/table-core/skills/table-features/references/row-selection.md":"","packages/table-core/skills/table-features/references/sorting.md":"","packages/table-core/skills/table-state/SKILL.md":"","packages/table-devtools/README.md":"","packages/table-devtools/skills/devtools/SKILL.md":"","packages/vue-table-devtools/README.md":"","packages/vue-table-devtools/skills/devtools/SKILL.md":"","packages/vue-table/README.md":"","packages/vue-table/skills/getting-started/SKILL.md":"","packages/vue-table/skills/getting-started/references/create-table-hook.md":"","packages/vue-table/skills/getting-started/references/with-tanstack-query.md":"","packages/vue-table/skills/getting-started/references/with-tanstack-virtual.md":"","packages/vue-table/skills/migrate-v8-to-v9/SKILL.md":"","packages/vue-table/skills/migrate-v8-to-v9/references/adapter-migration.md":"","packages/vue-table/skills/table-state/SKILL.md":"","packages/vue-table/skills/table-state/references/reactivity.md":""},"items":[{"name":"AGENTS.md","path":"AGENTS.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/AGENTS.md","title":"AI Agent Protocol & Instructions","category":"root-instruction","format":"markdown","content":"# Agent Instructions\n\nBefore analyzing or changing this repository, read and follow\n[`CONTRIBUTING.md`](./CONTRIBUTING.md). Its contribution, development, testing,\npull request, and changeset requirements apply to AI-assisted work as well as\nhuman-authored work.\n\nKeep every change focused on one topic. Understand and verify all generated\ncode, run the required checks, and provide a concise pull request description\nthat follows the repository template.\n\n## Packages that cannot be upgraded yet\n\nLeave these pins alone during routine dependency bumps. They currently break\nEmber, the Svelte kitchen-sink types, or are intentionally deferred.\n\n- **TypeScript** — keep `6.0.3`. Do not bump it as part of a general upgrade.\n- **Babel 7** — Ember is not compatible with Babel 8. In `packages/ember-table`\n and every `examples/ember/*` app, keep `@babel/core`,\n `@babel/plugin-transform-runtime`, `@babel/plugin-transform-typescript`, and\n `@babel/runtime` at `7.29.7`. `@rollup/plugin-babel` `7.1.0` is the Rollup\n plugin version, not Babel itself.\n- **`@dnd-kit/abstract` and `@dnd-kit/helpers`** — keep `^0.2.3` in\n `examples/svelte/kitchen-sink-shadcn`. `@dnd-kit-svelte/svelte@0.1.6` still\n depends on the 0.2.x line. Bumping to 0.5.x installs a second copy, and\n TypeScript treats those private-field types as incompatible.\n- **Vitest and `@vitest/coverage-v8`** — keep the 4.x line (currently\n `^4.1.11` and `4.1.11`). `@analogjs/vitest-angular@2.7.2` and Angular build\n tooling do not support Vitest 5, which also removes the `vitest` `bench` export\n used by the repository benchmarks. Upgrade these together in a separate migration.\n- **Octane** — keep `0.1.36`. The 0.2.x line fails the adapter conformance\n test for synchronous owner and isolated controlled updates during a discrete event.\n- **Pacer devtools** — keep `@tanstack/react-pacer-devtools` at `0.8.0` and\n `@tanstack/solid-pacer-devtools` at `0.7.0`. The 0.14.x packages do not export\n `pacerDevtoolsPlugin`, which the Form and Router examples use.\n- **`@tanstack/preact-form`** — keep `1.30.5` in the Preact Form example.\n The 1.33.x line removes `createFormHookContexts` and `withForm`, requiring\n a separate example migration.\n- **Preact** — keep `^10.29.8`. Preact 11 fails the adapter's hook and SSR\n tests and the devtools type check. The Store and Query adapters still require\n Preact 10. Upgrade these together in a separate migration.\n- **`@tanstack/intent`** — keep `0.4.0`. The 0.5 checker compiles TS and JS\n fences without framework TypeScript configuration or surrounding context. It\n rejects valid Preact and Lit examples, class-member excerpts, and deliberately\n wrong examples. Keep the repository's content and annotated-snippet checks\n enabled while this migration is deferred.\n","isInternal":false,"tokens":767,"sizeBytes":2806},{"name":"create-table-hook.md","path":"packages/alpine-table/skills/getting-started/references/create-table-hook.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/alpine-table/skills/getting-started/references/create-table-hook.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Alpine reusable table hooks\n\nRead when multiple Alpine tables share features, defaults, or rendering conventions. Keep standalone construction for tables without shared conventions. For controlled state or reactive reads, read [table-state](../../table-state/SKILL.md).\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```ts\nimport Alpine from 'alpinejs'\nimport { createTableHook, tableFeatures } from '@tanstack/alpine-table'\n\ntype Person = { id: string; name: string }\nconst { createAppTable, createAppColumnHelper } = createTableHook({\n features: tableFeatures({}),\n getRowId: (row: Person) => row.id,\n})\nconst helper = createAppColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n\nAlpine.data('peopleTable', () => {\n const local = Alpine.reactive({\n data: [{ id: '1', name: 'Ada' }] as Array,\n })\n const table = createAppTable({\n columns,\n get data() {\n return local.data\n },\n })\n return { table }\n})\n```\n\n## Core patterns\n\n### Share infrastructure, keep data local\n\nBind features, row models, row IDs, and defaults in the factory. Each Alpine component passes its own columns, reactive data getter, and controlled state.\n\n### Reuse markup with Alpine primitives\n\nUse real templates and `Alpine.bind` bundles for interactive reuse. `createTableHook` intentionally returns no component registry or context hooks.\n\n### Use the helper to retain feature inference\n\nColumns from `createAppColumnHelper()` know the factory's registered features without userland feature generics.\n\n## Common mistakes\n\n### HIGH Assuming a JSX component registry\n\nWrong: pass `cellComponents` or `tableComponents` to Alpine `createTableHook`.\n\nCorrect: share features/defaults with the hook and build reusable interactive markup with Alpine templates or bind bundles.\n\nThe Alpine hook returns only app features, a column helper, and createAppTable.\n\nSource: TanStack/table:packages/alpine-table/src/createTableHook.ts\n\n### HIGH Reactive data captured as a snapshot\n\nWrong: `createAppTable({ columns, data: local.data })` when the array will be replaced.\n\nCorrect: provide a `get data()` option.\n\nThe app factory delegates to Alpine createTable, whose option effect tracks getters.\n\nSource: TanStack/table:packages/alpine-table/src/createTable.ts\n\n## API discovery\n\nInspect `node_modules/@tanstack/alpine-table/dist/createTableHook.d.ts`; do not infer component/context APIs from React, Vue, Solid, Svelte, Angular, or Lit adapters.\n\n## Sources\n\n- `TanStack/table:docs/framework/alpine/guide/composable-tables.md`\n- `TanStack/table:examples/alpine/basic-app-table`\n- `TanStack/table:packages/alpine-table/src/createTableHook.ts`\n","isInternal":false,"tokens":601,"sizeBytes":2717},{"name":"SKILL.md","path":"packages/alpine-table/skills/getting-started/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/alpine-table/skills/getting-started/SKILL.md","title":"getting-started","category":"anthropic-skill","format":"markdown","content":"---\nname: getting-started\ndescription:\n Create and render Table v9 with the alpine adapter. Route reusable createTableHook\n defaults, and framework setup; use table-state for reactive ownership.\nmetadata:\n type: framework\n library: '@tanstack/alpine-table'\n framework: alpine\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/alpine/guide/table-state.md\n - TanStack/table:examples/alpine/basic-create-table\n - TanStack/table:packages/alpine-table/src/index.ts\n - TanStack/table:docs/framework/alpine/guide/composable-tables.md\n - TanStack/table:examples/alpine/basic-app-table\n - TanStack/table:packages/alpine-table/src/createTableHook.ts\n---\n\nLoad `intent load @tanstack/table-core#core` first for the headless model, stable inputs, and column inference.\n\n## Setup\n\n```ts\nimport Alpine from 'alpinejs'\nimport {\n FlexRender,\n createTable,\n tableFeatures,\n type ColumnDef,\n} from '@tanstack/alpine-table'\n\ntype Person = { id: string; name: string }\nconst features = tableFeatures({})\nconst columns: Array> = [\n { accessorKey: 'name', header: 'Name' },\n]\n\nAlpine.data('peopleTable', () => {\n const local = Alpine.reactive({\n data: [{ id: '1', name: 'Ada' }] as Array,\n })\n const table = createTable({\n features,\n columns,\n get data() {\n return local.data\n },\n getRowId: (row) => row.id,\n })\n\n return { table, FlexRender }\n})\n\nwindow.Alpine = Alpine\nAlpine.start()\n```\n\nRender real table structure with `x-for`; use `x-html=\"FlexRender({ header })\"` or `x-html=\"FlexRender({ cell })\"` only for renderer output.\n\n## Construction and rendering\n\nWrap changing data in `Alpine.reactive` and expose it with `get data()`. The adapter tracks option getters; `data: local.data` captures a snapshot and does not follow later array replacements. Keep static columns and features outside getters.\n\nThe returned table is a reactive proxy. Read Table APIs directly in `x-text`, `x-for`, `x-if`, or bound attributes; no Subscribe component is needed.\n\nBuild table structure and interactive controls as real Alpine markup. Use `x-html=\"FlexRender({ header })\"` or `x-html=\"FlexRender({ cell })\"` for renderer output. Alpine does not initialize directives inside `x-html` strings; use templates or `Alpine.bind` bundles for buttons and inputs.\n\n## Read for the task\n\n- When adding or configuring optional features, load `intent load @tanstack/table-core#table-features` and read only references for the requested behavior.\n- For state ownership or reactive reads, read [table-state](../table-state/SKILL.md).\n- When tables share features, defaults, or reusable UI, read [create-table-hook](references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/alpine-table/dist/index.d.ts`, `createTable.d.ts`, and `reactivity.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n","frontmatter":{"name":"getting-started","description":"Create and render Table v9 with the alpine adapter. Route reusable createTableHook defaults, and framework setup; use table-state for reactive ownership.","metadata":{"type":"framework","library":"@tanstack/alpine-table","framework":"alpine","library_version":"9.3.1"},"requires":["@tanstack/table-core#core"],"sources":["TanStack/table:docs/framework/alpine/guide/table-state.md","TanStack/table:examples/alpine/basic-create-table","TanStack/table:packages/alpine-table/src/index.ts","TanStack/table:docs/framework/alpine/guide/composable-tables.md","TanStack/table:examples/alpine/basic-app-table","TanStack/table:packages/alpine-table/src/createTableHook.ts"]},"isInternal":false,"tokens":715,"sizeBytes":2956},{"name":"reactivity.md","path":"packages/alpine-table/skills/table-state/references/reactivity.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/alpine-table/skills/table-state/references/reactivity.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Alpine Table reactivity\n\nRead for Alpine subscription boundaries, shared state, or updates that require more than the default rendering behavior.\n\nThis reference inherits the version of its owning skill.\n\n## Gate broad binding updates\n\nBy default, the table proxy subscribes to the full store and increments one reactive version counter. Every binding that touches the table depends on that counter. A narrow atom read selects a value but does not isolate the binding from other state updates.\n\nThe optional second `createTable` argument shallow-compares selected state before bumping the counter. Options changes, including new data, still reevaluate bindings. Select every slice that the affected bindings must observe.\n\nFor high-frequency updates such as column resizing, use `() => ({})` only after explicit `table.atoms..subscribe()` side effects own the required updates and their cleanup. Otherwise, opting out freezes state-driven bindings.\n\n## Controlled getters and external atoms\n\nWhen `Alpine.reactive` owns a slice, keep a getter in `state` and resolve every callback into the reactive owner. Capturing `state: { pagination: local.pagination }` misses later object replacements.\n\nWhen an external atom owns the slice, pass it in `atoms` and write it through feature APIs or the external atom. Supplying controlled `state` for the same slice does not create two-way synchronization; the atom takes precedence.\n\n## Read inside the binding\n\nUse `x-text=\"table.atoms.pagination.get().pageIndex + 1\"` or read Table APIs inside an Alpine getter. Event handlers can read the current value directly. A value copied outside tracked execution stays a snapshot.\n\nThe adapter has no `table.Subscribe` component. Keep interactive markup in Alpine templates and use the reactive table proxy there.\n\n## API discovery\n\nInspect `node_modules/@tanstack/alpine-table/dist/index.d.ts`, `createTable.d.ts`, and `reactivity.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/alpine/guide/table-state.md`\n- `TanStack/table:examples/alpine/basic-create-table`\n- `TanStack/table:packages/alpine-table/src/createTable.ts`\n","isInternal":false,"tokens":446,"sizeBytes":2197},{"name":"SKILL.md","path":"packages/alpine-table/skills/table-state/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/alpine-table/skills/table-state/SKILL.md","title":"table-state","category":"anthropic-skill","format":"markdown","content":"---\nname: table-state\ndescription:\n Read and control Table v9 state in alpine. Use for tracked reads, subscriptions,\n controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/alpine-table'\n framework: alpine\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/alpine/guide/table-state.md\n - TanStack/table:examples/alpine/basic-create-table\n - TanStack/table:packages/alpine-table/src/createTable.ts\n---\n\nLoad `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules.\n\nAlpine's table proxy makes reads inside `x-text`, `x-for`, `x-if`, bound attributes, `x-effect`, and Alpine getters reactive. Event handlers read the current value when invoked. A captured value outside a binding does not become a continuing subscription, and there is no `table.Subscribe` component.\n\n## Controlled getter setup\n\n\n\n```ts\nimport Alpine from 'alpinejs'\nimport {\n createTable,\n rowPaginationFeature,\n tableFeatures,\n type PaginationState,\n} from '@tanstack/alpine-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nAlpine.data('pagedTable', () => {\n const local = Alpine.reactive<{ pagination: PaginationState }>({\n pagination: { pageIndex: 0, pageSize: 10 },\n })\n const table = createTable({\n features,\n columns,\n data,\n state: {\n get pagination() {\n return local.pagination\n },\n },\n onPaginationChange: (next) => {\n local.pagination =\n typeof next === 'function' ? next(local.pagination) : next\n },\n })\n return { table }\n})\n```\n\nRead `table.atoms.pagination.get().pageIndex` directly in an Alpine binding.\n\n## Reactive boundaries\n\n- A controlled slice needs a getter and callback. `state: { pagination: local.pagination }` captures the old object when the owner later replaces it.\n- Expose changing data through `get data()` and keep features, columns, and derived data stable outside reevaluated getters.\n- The proxy normally reevaluates all Table-reading bindings for every state change. A narrow atom read does not by itself narrow that broad invalidation.\n- For shared state, pass a stable external atom through `atoms`; omit controlled state and its callback for the same slice.\n\n## Read for the task\n\nFor advanced reactive boundaries, shared atoms, or detailed subscription examples, read [reactivity](references/reactivity.md). For construction or rendering setup, read [getting-started](../getting-started/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/alpine-table/dist/index.d.ts`, `createTable.d.ts`, and `reactivity.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n","frontmatter":{"name":"table-state","description":"Read and control Table v9 state in alpine. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.","metadata":{"type":"framework","library":"@tanstack/alpine-table","framework":"alpine","library_version":"9.3.1"},"requires":["@tanstack/table-core#table-state"],"sources":["TanStack/table:docs/framework/alpine/guide/table-state.md","TanStack/table:examples/alpine/basic-create-table","TanStack/table:packages/alpine-table/src/createTable.ts"]},"isInternal":false,"tokens":652,"sizeBytes":2877},{"name":"SKILL.md","path":"packages/angular-table-devtools/skills/devtools/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/angular-table-devtools/skills/devtools/SKILL.md","title":"devtools","category":"anthropic-skill","format":"markdown","content":"---\nname: devtools\ndescription: >\n Register Angular Table v9 instances with injectTanStackTableDevtools inside injection context. Load for reactive table registration, required options.key, enabled or undefined tables, cleanup, Angular isDevMode gating, or explicit production exports.\nmetadata:\n type: framework\n library: '@tanstack/angular-table-devtools'\n framework: angular\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\n - '@tanstack/table-devtools#devtools'\nsources:\n - 'TanStack/table:docs/devtools.md'\n - 'TanStack/table:packages/angular-table-devtools/src/index.ts'\n - 'TanStack/table:packages/angular-table-devtools/src/injectTanStackTableDevtools.ts'\n---\n\nThis skill builds on @tanstack/table-core#core and @tanstack/table-devtools#devtools.\n\n## Setup\n\n```ts\nimport { Component } from '@angular/core'\nimport { injectTable, tableFeatures } from '@tanstack/angular-table'\nimport { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'\n\nconst features = tableFeatures({})\nconst columns = [{ accessorKey: 'id' }]\nconst data: Array<{ id: string }> = []\n\n@Component({ selector: 'users-table', template: 'Users table registered' })\nexport class UsersTable {\n readonly table = injectTable(() => ({\n key: 'users-table',\n features,\n columns,\n data,\n }))\n\n constructor() {\n injectTanStackTableDevtools(() => ({ table: this.table }))\n }\n}\n```\n\nProvide the Angular TanStack Devtools host once at application configuration level as documented in `docs/devtools.md`.\n\n## Hooks and Components\n\nThe injector options function may return `table: undefined` or an `enabled` function to remove/disable registration reactively.\n\n## Common Mistakes\n\n### CRITICAL Injector called outside context\n\nWrong: call `injectTanStackTableDevtools` from an arbitrary callback after bootstrap.\n\nCorrect: call it in a component/service field initializer or constructor injection context.\n\nThe adapter uses Angular injection and effects for lifecycle cleanup.\n\nSource: TanStack/table:packages/angular-table-devtools/src/injectTanStackTableDevtools.ts\n\n### HIGH Missing table key\n\nWrong: register an otherwise valid table without `options.key`.\n\nCorrect: assign a stable unique key before injection registration.\n\nCore registration logs an error and skips keyless targets.\n\nSource: TanStack/table:packages/table-devtools/src/tableTarget.ts\n\n### MEDIUM isDevMode no-op misunderstood\n\nWrong: expect default Angular exports to render production Devtools.\n\nCorrect: keep standard setup development-only; use `/production` only when explicitly requested.\n\nThe package index switches exports using Angular `isDevMode()`.\n\nSource: TanStack/table:packages/angular-table-devtools/src/index.ts\n\n## API Discovery\n\nInspect `node_modules/@tanstack/angular-table-devtools/dist/index.d.ts` and `injectTanStackTableDevtools.d.ts` for current injection options.\n","frontmatter":{"name":"devtools","description":"Register Angular Table v9 instances with injectTanStackTableDevtools inside injection context. Load for reactive table registration, required options.key, enabled or undefined tables, cleanup, Angular isDevMode gating, or explicit production exports.\n","metadata":{"type":"framework","library":"@tanstack/angular-table-devtools","framework":"angular","library_version":"9.3.1"},"requires":["@tanstack/table-core#core","@tanstack/table-devtools#devtools"],"sources":["TanStack/table:docs/devtools.md","TanStack/table:packages/angular-table-devtools/src/index.ts","TanStack/table:packages/angular-table-devtools/src/injectTanStackTableDevtools.ts"]},"isInternal":false,"tokens":624,"sizeBytes":2883},{"name":"create-table-hook.md","path":"packages/angular-table/skills/getting-started/references/create-table-hook.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/angular-table/skills/getting-started/references/create-table-hook.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Angular reusable table hooks\n\nRead when multiple Angular tables share features, defaults, or rendering conventions. Keep standalone construction for tables without shared conventions. For controlled state or reactive reads, read [table-state](../../table-state/SKILL.md).\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```ts\nimport {\n createTableHook,\n rowSortingFeature,\n tableFeatures,\n} from '@tanstack/angular-table'\n\nexport const {\n injectAppTable,\n createAppColumnHelper,\n injectTableContext,\n injectTableCellContext,\n injectTableHeaderContext,\n} = createTableHook({\n features: tableFeatures({ rowSortingFeature }),\n})\n```\n\n```ts\nconst helper = createAppColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n\nexport class PeopleTable {\n readonly table = injectAppTable(() => ({ columns, data: this.data() }))\n}\n```\n\n## Core patterns\n\n### Consume typed DI context in registered components\n\n```ts\nexport class NameCell {\n readonly cell = injectTableCellContext()\n readonly value = computed(() => this.cell().getValue())\n}\n```\n\nUse the matching table/header/cell injector instead of threading context props through reusable components.\n\n### Distinguish component types from render functions\n\nRegister either an Angular component type or a render function. Return component types directly when FlexRender should set context inputs; use `flexRenderComponent(Component, options)` only for explicit inputs/outputs/injector/bindings/directives.\n\n## Common mistakes\n\n### CRITICAL Calling app helpers outside DI\n\nWrong:\n\n```ts\nexport function make() {\n return injectAppTable(() => options)\n}\n```\n\nCorrect:\n\n```ts\nexport class PeopleTable {\n readonly table = injectAppTable(() => options())\n}\n```\n\nBoth app-table construction and returned context injectors require Angular injection context.\n\nSource: `packages/angular-table/src/helpers/createTableHook.ts`\n\n### HIGH Prop drilling registered context\n\nWrong:\n\n```ts\ncell: (ctx) => flexRenderComponent(NameCell, { inputs: { cell: ctx.cell } })\n```\n\nCorrect:\n\n```ts\ncell: (ctx) => ctx.cell.NameCell\n```\n\nRegistered components can consume the app hook's typed cell context directly.\n\nSource: `docs/framework/angular/guide/composable-tables.md`\n\n### HIGH Wrapping a function as a component\n\nWrong:\n\n```ts\nflexRenderComponent((props) => props.cell.getValue())\n```\n\nCorrect:\n\n```ts\n;(props) => props.cell.getValue()\n```\n\n`flexRenderComponent` validates an Angular component type; plain render functions are already valid render content.\n\nSource: `packages/angular-table/src/flex-render/flexRenderComponent.ts`\n\n## API discovery\n\nInspect `node_modules/@tanstack/angular-table/dist/types/` for exact DI and rendering contracts in the bundled public API.\n\n## Sources\n\n- `TanStack/table:docs/framework/angular/guide/composable-tables.md`\n- `TanStack/table:examples/angular/composable-tables`\n- `TanStack/table:packages/angular-table/src/helpers/createTableHook.ts`\n","isInternal":false,"tokens":641,"sizeBytes":3000},{"name":"with-tanstack-query.md","path":"packages/angular-table/skills/getting-started/references/with-tanstack-query.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/angular-table/skills/getting-started/references/with-tanstack-query.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Angular Table with TanStack Query\n\nRead when Angular Query supplies Table data or owns server-side processing. Load `intent load @tanstack/table-core#table-features` and read its client/server reference to decide which stages the server owns. Read [table-state](../../table-state/SKILL.md) for the signal or atom wiring used by the query key.\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```ts\nimport {\n injectQuery,\n keepPreviousData,\n} from '@tanstack/angular-query-experimental'\nimport { Component, signal } from '@angular/core'\nimport {\n injectTable,\n rowPaginationFeature,\n tableFeatures,\n} from '@tanstack/angular-table'\n\ntype Person = { id: string; name: string }\ntype PersonPage = { rows: Person[]; rowCount: number }\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst EMPTY_ROWS: Person[] = []\n\n@Component({\n selector: 'people-table',\n template: `{{ table.getRowModel().rows.length }} rows`,\n})\nexport class PeopleTable {\n readonly pagination = signal({ pageIndex: 0, pageSize: 20 })\n readonly query = injectQuery(() => ({\n queryKey: [\n 'people',\n this.pagination().pageIndex,\n this.pagination().pageSize,\n ],\n queryFn: (): Promise =>\n fetch(\n `/api/people?page=${this.pagination().pageIndex}&size=${this.pagination().pageSize}`,\n ).then((r) => r.json()),\n placeholderData: keepPreviousData,\n }))\n readonly table = injectTable(() => ({\n features,\n columns,\n data: this.query.data()?.rows ?? EMPTY_ROWS,\n rowCount: this.query.data()?.rowCount ?? 0,\n manualPagination: true,\n state: { pagination: this.pagination() },\n onPaginationChange: (next) =>\n typeof next === 'function'\n ? this.pagination.update(next)\n : this.pagination.set(next),\n }))\n}\n```\n\nProvide Angular Query's QueryClient in the application injection context before constructing this component. The server response contains the requested `rows` and total `rowCount`.\n\n## Core patterns\n\n### Track every server-owned input\n\nRead pagination, sorting, and filtering signals inside `injectQuery(() => ...)` and include them in the query key. Return data already processed for each manual stage.\n\n### Keep Query data authoritative\n\nRead the Query signal directly in `injectTable`. Create another signal only for a deliberate editable draft with an explicit cache synchronization policy.\n\n## Common mistakes\n\n### HIGH Capturing query inputs outside tracking\n\nWrong:\n\n```ts\nconst page = this.pagination().pageIndex\nreadonly query = injectQuery(() => ({ queryKey: ['people', page], queryFn }))\n```\n\nCorrect:\n\n```ts\nreadonly query = injectQuery(() => ({ queryKey: ['people', this.pagination().pageIndex], queryFn }))\n```\n\nSignal reads inside the options function establish refetch dependencies.\n\nSource: `examples/angular/with-tanstack-query/src/app/app.ts`\n\n### HIGH Expecting manual mode to request\n\nWrong:\n\n```ts\ninjectTable(() => ({ features, columns, data, manualPagination: true }))\n```\n\nCorrect:\n\n```ts\ninjectTable(() => ({\n features,\n columns,\n data: this.query.data()?.rows ?? EMPTY_ROWS,\n manualPagination: true,\n}))\n```\n\nManual flags only bypass client row processing; Query performs network work.\n\nSource: `examples/angular/with-tanstack-query/src/app/app.ts`\n\n### HIGH Omitting total counts\n\nWrong:\n\n```ts\n{ data: this.query.data()?.rows ?? EMPTY_ROWS, manualPagination: true }\n```\n\nCorrect:\n\n```ts\n{ data: this.query.data()?.rows ?? EMPTY_ROWS, rowCount: this.query.data()?.rowCount ?? 0, manualPagination: true }\n```\n\nTable needs `rowCount` or `pageCount` to constrain navigation across server pages.\n\nSource: `docs/framework/angular/guide/pagination.md`\n\n## API discovery\n\nInspect installed `@tanstack/angular-table/dist/types/`, the relevant core feature declarations, and installed Angular Query declarations for the exact `injectQuery` package/version contract.\n\n## Sources\n\n- `TanStack/table:examples/angular/with-tanstack-query`\n- `TanStack/table:docs/framework/angular/guide/table-state.md`\n- `TanStack/table:docs/framework/angular/guide/pagination.md`\n","isInternal":false,"tokens":907,"sizeBytes":4129},{"name":"with-tanstack-virtual.md","path":"packages/angular-table/skills/getting-started/references/with-tanstack-virtual.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/angular-table/skills/getting-started/references/with-tanstack-virtual.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Angular Table with TanStack Virtual\n\nRead when rendering a large Angular table with TanStack Virtual. Virtual operates on the final Table model. Read [table-state](../../table-state/SKILL.md) if model counts or rendered state stop updating.\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```ts\nimport { Component, computed, viewChild } from '@angular/core'\nimport { injectTable, tableFeatures } from '@tanstack/angular-table'\nimport { injectVirtualizer } from '@tanstack/angular-virtual'\nimport type { ElementRef } from '@angular/core'\n\nconst features = tableFeatures({})\nconst columns = [{ accessorKey: 'name' }]\nconst data = Array.from({ length: 1000 }, (_, index) => ({\n id: String(index),\n name: `Person ${index}`,\n}))\n\n@Component({\n selector: 'virtual-table',\n template: `
\n
\n @for (item of virtualRows(); track item.key) {\n \n {{ rows()[item.index]!.getValue('name') }}\n
\n }\n
\n
`,\n})\nexport class VirtualTable {\n readonly table = injectTable(() => ({\n features,\n columns,\n data,\n getRowId: (row) => row.id,\n }))\n readonly scrollElement =\n viewChild>('scrollElement')\n readonly rows = computed(() => this.table.getRowModel().rows)\n readonly rowVirtualizer = injectVirtualizer(() => ({\n count: this.rows().length,\n scrollElement: this.scrollElement()?.nativeElement,\n estimateSize: () => 34,\n getItemKey: (index) => this.rows()[index]!.id,\n overscan: 5,\n }))\n readonly virtualRows = computed(() => this.rowVirtualizer.getVirtualItems())\n readonly totalSize = computed(() => this.rowVirtualizer.getTotalSize())\n}\n```\n\n## Core patterns\n\n### Derive reactive models\n\nUse `computed(() => table.getRowModel().rows)` for rows. For column virtualization, register `columnVisibilityFeature` before reading `computed(() => table.getVisibleLeafColumns())`; register `columnSizingFeature` when deriving widths from sizing APIs. `injectVirtualizer` tracks signal reads in its initializer and requires injection context.\n\n### Own the layout contract\n\nGive the scroll element bounded overflow, create a total-size spacer, and translate or measure each virtual item. Use grid/flex widths for dynamic rows/columns and keep sticky headers inside the correct scroll geometry.\n\n### Gate infinite fetches\n\nWhen the last virtual item approaches fetched length, fetch only if more server rows exist and a request is not active. Manual sorting requires server-sorted pages and a reset/refetch policy.\n\n## Common mistakes\n\n### CRITICAL Constructing outside injection context\n\nWrong:\n\n```ts\nexport function virtualize(options) {\n return injectVirtualizer(() => options)\n}\n```\n\nCorrect:\n\n```ts\nconst features = tableFeatures({})\nconst columns = [{ accessorKey: 'name' }]\nconst data = Array.from({ length: 1000 }, (_, index) => ({\n id: String(index),\n name: `Person ${index}`,\n}))\n\n@Component({\n selector: 'virtual-table',\n template: `
\n
\n @for (item of virtualRows(); track item.key) {\n \n {{ rows()[item.index]!.getValue('name') }}\n
\n }\n
\n
`,\n})\nexport class VirtualTable {\n readonly table = injectTable(() => ({\n features,\n columns,\n data,\n getRowId: (row) => row.id,\n }))\n readonly virtualizer = injectVirtualizer(() => options())\n}\n```\n\nThe Angular virtualizer follows DI lifecycle rules just like `injectTable`.\n\nSource: `examples/angular/virtualized-rows/src/app/app.ts`\n\n### HIGH Virtualizing raw data\n\nWrong:\n\n```ts\nreadonly rows = computed(() => this.data())\n```\n\nCorrect:\n\n```ts\nreadonly rows = computed(() => this.table.getRowModel().rows)\n```\n\nRaw data bypasses Table filtering, sorting, expansion, grouping, and pagination.\n\nSource: `docs/framework/angular/guide/virtualization.md`\n\n### HIGH Forgetting spacer and transforms\n\nWrong:\n\n```html\n@for (item of virtualRows(); track item.key) {\n
{{ rows()[item.index].id }}
\n}\n```\n\nCorrect:\n\n```html\n
\n @for (item of virtualRows(); track item.key) {\n \n {{ rows()[item.index]!.getValue('name') }}\n
\n }\n\n```\n\nVirtual computes ranges and sizes but does not apply DOM geometry, sticky CSS, or column widths.\n\nSource: `examples/angular/virtualized-columns/src/app/app.ts`\n\n## API discovery\n\nInspect installed `@tanstack/angular-table/dist/types/`, installed `@tanstack/angular-virtual/dist/`, and the maintained Angular examples for current row, column, measurement, and infinite patterns.\n\n## Sources\n\n- `TanStack/table:docs/framework/angular/guide/virtualization.md`\n- `TanStack/table:examples/angular/virtualized-rows`\n- `TanStack/table:examples/angular/virtualized-columns`\n- `TanStack/table:examples/angular/virtualized-infinite-scrolling`\n","isInternal":false,"tokens":1272,"sizeBytes":5470},{"name":"SKILL.md","path":"packages/angular-table/skills/getting-started/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/angular-table/skills/getting-started/SKILL.md","title":"getting-started","category":"anthropic-skill","format":"markdown","content":"---\nname: getting-started\ndescription:\n Create and render Table v9 with the angular adapter. Route reusable createTableHook\n components, Query and Virtual integration, and framework setup; use table-state for reactive\n ownership.\nmetadata:\n type: framework\n library: '@tanstack/angular-table'\n framework: angular\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/angular/guide/migrating.md\n - TanStack/table:docs/framework/angular/guide/flex-render.md\n - TanStack/table:examples/angular/basic-inject-table\n - TanStack/table:packages/angular-table/src/index.ts\n - TanStack/table:docs/framework/angular/guide/composable-tables.md\n - TanStack/table:examples/angular/composable-tables\n - TanStack/table:packages/angular-table/src/helpers/createTableHook.ts\n - TanStack/table:examples/angular/with-tanstack-query\n - TanStack/table:docs/framework/angular/guide/table-state.md\n - TanStack/table:docs/framework/angular/guide/pagination.md\n - TanStack/table:docs/framework/angular/guide/virtualization.md\n - TanStack/table:examples/angular/virtualized-rows\n - TanStack/table:examples/angular/virtualized-columns\n - TanStack/table:examples/angular/virtualized-infinite-scrolling\n---\n\nLoad `intent load @tanstack/table-core#core` first for the headless model, stable inputs, and column inference.\n\n## Setup\n\n```ts\nimport { Component, signal } from '@angular/core'\nimport { FlexRender, injectTable, tableFeatures } from '@tanstack/angular-table'\n\ntype Person = { name: string; age: number }\nconst features = tableFeatures({})\nconst columns = [\n { accessorKey: 'name', header: 'Name' },\n { accessorKey: 'age', header: 'Age' },\n]\n\n@Component({\n selector: 'app-table',\n imports: [FlexRender],\n template: `\n \n @for (row of table.getRowModel().rows; track row.id) {\n \n @for (cell of row.getAllCells(); track cell.id) {\n \n }\n \n }\n \n
\n {{\n value\n }}\n
`,\n})\nexport class TableComponent {\n readonly data = signal([{ name: 'Ada', age: 36 }])\n readonly table = injectTable(() => ({ features, columns, data: this.data() }))\n}\n```\n\n## Construction and rendering\n\nCall `injectTable` in a component, directive, or service field initializer, or another valid Angular injection context. The adapter binds its cleanup to that context.\n\nSignals read in the options initializer rerun it and call `setOptions`. Keep features, factories, and columns outside the initializer; return stable data references and derive transformed data with `computed` outside it.\n\nImport `FlexRender` for `*flexRender`, `*flexRenderCell`, `*flexRenderHeader`, and `*flexRenderFooter`. Render values can be primitives, `TemplateRef`, component types, or `flexRenderComponent(...)`. Use `flexRenderComponent` for Angular component types; ordinary render functions are already supported directly.\n\n## Read for the task\n\n- When adding or configuring optional features, load `intent load @tanstack/table-core#table-features` and read only references for the requested behavior.\n- For state ownership or reactive reads, read [table-state](../table-state/SKILL.md).\n- When tables share features, defaults, or reusable UI, read [create-table-hook](references/create-table-hook.md).\n- When Query supplies data or server processing, read [with-tanstack-query](references/with-tanstack-query.md).\n- When virtualizing rows or columns, read [with-tanstack-virtual](references/with-tanstack-virtual.md).\n- When upgrading v8 code, read [migrate-v8-to-v9](../migrate-v8-to-v9/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`.\n","frontmatter":{"name":"getting-started","description":"Create and render Table v9 with the angular adapter. Route reusable createTableHook components, Query and Virtual integration, and framework setup; use table-state for reactive ownership.","metadata":{"type":"framework","library":"@tanstack/angular-table","framework":"angular","library_version":"9.3.1"},"requires":["@tanstack/table-core#core"],"sources":["TanStack/table:docs/framework/angular/guide/migrating.md","TanStack/table:docs/framework/angular/guide/flex-render.md","TanStack/table:examples/angular/basic-inject-table","TanStack/table:packages/angular-table/src/index.ts","TanStack/table:docs/framework/angular/guide/composable-tables.md","TanStack/table:examples/angular/composable-tables","TanStack/table:packages/angular-table/src/helpers/createTableHook.ts","TanStack/table:examples/angular/with-tanstack-query","TanStack/table:docs/framework/angular/guide/table-state.md","TanStack/table:docs/framework/angular/guide/pagination.md","TanStack/table:docs/framework/angular/guide/virtualization.md","TanStack/table:examples/angular/virtualized-rows","TanStack/table:examples/angular/virtualized-columns","TanStack/table:examples/angular/virtualized-infinite-scrolling"]},"isInternal":false,"tokens":923,"sizeBytes":3933},{"name":"adapter-migration.md","path":"packages/angular-table/skills/migrate-v8-to-v9/references/adapter-migration.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/angular-table/skills/migrate-v8-to-v9/references/adapter-migration.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Angular v8-to-v9 adapter migration\n\nRead when applying the Angular construction, state, rendering, or reusable-hook checks. Complete the shared audit with `intent load @tanstack/table-core#migrate-v8-to-v9`; its references own the shared feature and type rename inventories.\n\nThis reference inherits the version of its owning skill.\n\n## Framework requirements\n\nAngular 19 or newer is required (`@angular/core >=19`).\n\n## Construction\n\n| v8 | v9 |\n| ----------------------------------- | -------------------------------------------------------------- |\n| `createAngularTable(() => options)` | `injectTable(() => options)` in injection context |\n| `table.getState().sorting` | `table.atoms.sorting.get()` inside tracked Angular consumption |\n\nThe initializer reruns when signals read inside it change and calls `setOptions`. Keep features and columns stable outside it. Construct in a component/directive/service field or another valid injection context so lifecycle cleanup is registered correctly.\n\n## Angular state migration\n\n- `table.getState().sorting` becomes `table.atoms.sorting.get()` for narrow signal-backed reads.\n- Use `table.store.get()` only for a full flat snapshot/debug output.\n- Derive selected slices with Angular `computed`; use `shallow` equality for recreated object/array slices when appropriate.\n- Controlled Angular signals are read in `state` and updated through matching `on[State]Change` callbacks; resolve value-or-function updaters.\n- Prefer external atoms from `@tanstack/angular-store` through `atoms` for app-owned shared slices. Never provide both an atom and `state` for one slice.\n\n## Angular rendering and composition\n\n- Import `FlexRender`/the current `*flexRender` directives from the adapter.\n- Prefer `*flexRenderCell=\"cell; let value\"`, `*flexRenderHeader=\"header; let value\"`, and `*flexRenderFooter=\"footer; let value\"`; they choose the definition and context automatically.\n- General `*flexRender` supports primitives, `TemplateRef`, component types, and `flexRenderComponent(...)` wrappers.\n- Column render functions run in an Angular injection context and may call `inject()` or use signals.\n- Components mounted by FlexRender can call `injectFlexRenderContext()` for the render props.\n- Use `flexRenderComponent(Component, { inputs, outputs, injector, bindings, directives })` for explicit component configuration; creation-time `bindings`/`directives` require the supported Angular version.\n- `tableOptions(...)` composes partial options and may omit data, columns, or features until final assembly.\n- `createTableHook` is optional for repeated application conventions; it returns `injectAppTable` and a feature-bound `createAppColumnHelper`.\n\n## Related task guidance\n\nFor a full construction example, read [getting-started](../../getting-started/SKILL.md). For tracked reads and controlled updates, read [table-state](../../table-state/SKILL.md). When creating a reusable app factory, read [create-table-hook](../../getting-started/references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/angular/guide/migrating.md`\n- `TanStack/table:packages/angular-table/src/index.ts`\n- `TanStack/table:examples/angular/basic-inject-table`\n","isInternal":false,"tokens":716,"sizeBytes":3511},{"name":"SKILL.md","path":"packages/angular-table/skills/migrate-v8-to-v9/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/angular-table/skills/migrate-v8-to-v9/SKILL.md","title":"migrate-v8-to-v9","category":"anthropic-skill","format":"markdown","content":"---\nname: migrate-v8-to-v9\ndescription:\n Migrate angular Table v8 to v9. Audit framework construction, rendering, state,\n and app hooks, with shared API changes in the core migration skill.\nmetadata:\n type: lifecycle\n library: '@tanstack/angular-table'\n framework: angular\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#migrate-v8-to-v9'\nsources:\n - TanStack/table:docs/framework/angular/guide/migrating.md\n - TanStack/table:packages/angular-table/src/index.ts\n - TanStack/table:examples/angular/basic-inject-table\n---\n\nLoad `intent load @tanstack/table-core#migrate-v8-to-v9` first and audit its entire shared checklist. It owns feature registration, row-model slots, state/reset changes, prototype methods, logical pinning, sizing/resizing, sorting, selection, helpers, and TypeScript mappings.\n\n## Framework prerequisites\n\nAngular 19 or newer is required (`@angular/core >=19`).\n\n## Angular migration checklist\n\n- [ ] Replace `createAngularTable` with `injectTable` in a valid Angular injection context.\n- [ ] Hoist features, columns, and factories outside the signal-tracked initializer.\n- [ ] Read state through signal-backed atoms; wire controlled signals with value-or-updater callbacks or stable Angular Store atoms.\n- [ ] Import current FlexRender directives, distinguish render functions from component types, and preserve instance-method receivers.\n- [ ] Audit repeated options and component registries for the optional `createTableHook`/`injectAppTable` path.\n\n## Apply the affected mappings\n\nRead [adapter-migration](references/adapter-migration.md) when changing construction, rendering, state, or app hooks. Read the relevant core migration references for each affected shared API; this adapter checklist does not replace that audit.\n\nFor complete v9 construction examples, read [getting-started](../getting-started/SKILL.md). For reactive state repairs, read [table-state](../table-state/SKILL.md).\n\n## Final checks\n\n- [ ] All shared core migration checks and affected mappings have been applied.\n- [ ] The framework checklist above passes with the current adapter declarations.\n- [ ] Model inputs remain stable and state changes reach their reactive owner.\n\n## API discovery\n\nInspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`.\n","frontmatter":{"name":"migrate-v8-to-v9","description":"Migrate angular Table v8 to v9. Audit framework construction, rendering, state, and app hooks, with shared API changes in the core migration skill.","metadata":{"type":"lifecycle","library":"@tanstack/angular-table","framework":"angular","library_version":"9.3.1"},"requires":["@tanstack/table-core#migrate-v8-to-v9"],"sources":["TanStack/table:docs/framework/angular/guide/migrating.md","TanStack/table:packages/angular-table/src/index.ts","TanStack/table:examples/angular/basic-inject-table"]},"isInternal":false,"tokens":517,"sizeBytes":2392},{"name":"reactivity.md","path":"packages/angular-table/skills/table-state/references/reactivity.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/angular-table/skills/table-state/references/reactivity.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Angular Table reactivity\n\nRead for Angular subscription boundaries, shared state, or updates that require more than the default rendering behavior.\n\nThis reference inherits the version of its owning skill.\n\n## Share state through an external atom\n\n\n\n```ts\nimport { Component, computed } from '@angular/core'\nimport { createAtom } from '@tanstack/angular-store'\nimport {\n injectTable,\n rowPaginationFeature,\n tableFeatures,\n type PaginationState,\n} from '@tanstack/angular-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\n@Component({ selector: 'page-status', template: `Page {{ pageIndex() + 1 }}` })\nexport class PageStatus {\n readonly paginationAtom = createAtom({\n pageIndex: 0,\n pageSize: 20,\n })\n readonly table = injectTable(() => ({\n features,\n columns,\n data,\n atoms: { pagination: this.paginationAtom },\n }))\n readonly pageIndex = computed(\n () => this.table.atoms.pagination.get().pageIndex,\n )\n}\n```\n\nThe atom can feed Query or other consumers without reading a controlled signal in the Table initializer. Table feature APIs write the external atom directly; omit `onPaginationChange` for this owner.\n\n## Derive values with equality control\n\nUse Angular `computed` when deriving a value or applying custom equality. For a recreated object or array result, use the adapter's `shallow` comparator when appropriate. A direct template atom read is already signal-reactive; nested `computed(() => computed(... )())` adds no tracking benefit.\n\nKeep static features, column factories, and row-model factories outside the initializer. Signal reads inside it establish dependencies, so a controlled pagination write reruns the initializer and calls `setOptions`.\n\n## Controlled updater mistakes\n\nWrong: `onPaginationChange: next => this.pagination.set(next)`.\n\nCorrect: use `typeof next === 'function' ? this.pagination.update(next) : this.pagination.set(next)`. Storing the updater itself corrupts the signal's state shape.\n\nUse one owner for each slice. An external atom takes precedence over `state` and starting values; those options are not synchronized fallback owners.\n\n## API discovery\n\nInspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/angular/guide/table-state.md`\n- `TanStack/table:examples/angular/basic-external-state`\n- `TanStack/table:packages/angular-table/src/injectTable.ts`\n","isInternal":false,"tokens":565,"sizeBytes":2688},{"name":"SKILL.md","path":"packages/angular-table/skills/table-state/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/angular-table/skills/table-state/SKILL.md","title":"table-state","category":"anthropic-skill","format":"markdown","content":"---\nname: table-state\ndescription:\n Read and control Table v9 state in angular. Use for tracked reads, subscriptions,\n controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/angular-table'\n framework: angular\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/angular/guide/table-state.md\n - TanStack/table:examples/angular/basic-external-state\n - TanStack/table:packages/angular-table/src/injectTable.ts\n---\n\nLoad `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules.\n\nAngular-backed atom reads participate in tracking inside templates, `computed`, and `effect`. A value captured outside those contexts is only a snapshot. Use `computed` for derivation or equality control; wrapping an atom is not required to make it reactive.\n\n## Controlled signal setup\n\n\n\n```ts\nimport { Component, signal } from '@angular/core'\nimport {\n injectTable,\n rowPaginationFeature,\n tableFeatures,\n} from '@tanstack/angular-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\n@Component({\n selector: 'page-status',\n template: ``,\n})\nexport class PageStatus {\n readonly pagination = signal({ pageIndex: 0, pageSize: 20 })\n readonly table = injectTable(() => ({\n features,\n columns,\n data,\n state: { pagination: this.pagination() },\n onPaginationChange: (next) =>\n typeof next === 'function'\n ? this.pagination.update(next)\n : this.pagination.set(next),\n }))\n}\n```\n\n## Reactive boundaries\n\n- Construct in Angular injection context. Signal writes used by the initializer rerun it and call `setOptions`; hoist features and columns and keep data references stable.\n- Supply both `state.pagination` and `onPaginationChange` when a signal owns the slice. Resolve updater functions with `.update(next)` instead of storing the function with `.set(next)`.\n- For shared state, create a stable atom with `@tanstack/angular-store` and pass it through `atoms`. Its writes do not need to flow through a controlled signal in the initializer.\n- Use `table.store.get()` for the flat state. Prefer `table.atoms..get()` for narrow tracked reads.\n\n## Read for the task\n\nFor advanced reactive boundaries, shared atoms, or detailed subscription examples, read [reactivity](references/reactivity.md). For construction or rendering setup, read [getting-started](../getting-started/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`.\n","frontmatter":{"name":"table-state","description":"Read and control Table v9 state in angular. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.","metadata":{"type":"framework","library":"@tanstack/angular-table","framework":"angular","library_version":"9.3.1"},"requires":["@tanstack/table-core#table-state"],"sources":["TanStack/table:docs/framework/angular/guide/table-state.md","TanStack/table:examples/angular/basic-external-state","TanStack/table:packages/angular-table/src/injectTable.ts"]},"isInternal":false,"tokens":652,"sizeBytes":2958},{"name":"create-table-hook.md","path":"packages/ember-table/skills/getting-started/references/create-table-hook.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/ember-table/skills/getting-started/references/create-table-hook.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Ember reusable table hooks\n\nRead when multiple Ember tables share features, defaults, or rendering conventions. Keep standalone construction for tables without shared conventions. For controlled state or reactive reads, read [table-state](../../table-state/SKILL.md).\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```gts\nimport Component from '@glimmer/component'\nimport { tracked } from '@glimmer/tracking'\nimport {\n createSortedRowModel,\n createTableHook,\n rowSortingFeature,\n sortFn_alphanumeric,\n tableFeatures,\n} from '@tanstack/ember-table'\n\nconst features = tableFeatures({\n rowSortingFeature,\n sortedRowModel: createSortedRowModel(),\n sortFns: { alphanumeric: sortFn_alphanumeric },\n})\n\nexport const { appFeatures, createAppColumnHelper, createAppTable } =\n createTableHook({\n features,\n enableSortingRemoval: false,\n })\n\ntype Person = { id: string; name: string }\nconst columnHelper = createAppColumnHelper()\nconst columns = columnHelper.columns([\n columnHelper.accessor('name', { header: 'Name' }),\n])\n\nexport default class PeopleTable extends Component {\n @tracked data: Person[] = []\n\n table = createAppTable(this, () => ({\n columns,\n data: this.data,\n }))\n}\n```\n\nCreate the hook and column helpers at stable module scope. Pass the component as the first `createAppTable` argument to bind external-atom cleanup to its lifecycle; the one-argument thunk form remains supported for standalone tables. `createAppTable` preserves the `useTable` options thunk, so tracked reads such as `this.data` remain reactive. Do not pass `features` again at the table call site; the factory owns the feature set and binds it into column inference.\n\n## Composition contract\n\n- Hook options supply stable shared `features` and default table options.\n- `createAppColumnHelper()` binds the feature type while inferring each row type.\n- `createAppTable(() => options)` merges shared defaults with table-specific options.\n- Table-specific options win over shared defaults, except that the factory remains the feature owner.\n- `appFeatures` exposes the exact registered feature set for helper types or reusable utilities.\n\nShared options intentionally exclude `columns`, `data`, and `state`. Keep model inputs and controlled state at each table call site; share conventions, not one mutable state object across unrelated tables.\n\nSharing `rowSortingFeature`, `sortedRowModel`, and sorting defaults gives every table sorting capability; it does not make their internal sorting state shared. The factory technically accepts a stable external atom in shared `atoms`, but that deliberately couples tables and their column IDs. Prefer independent state unless synchronized tables are the actual product behavior.\n\n## Render normally\n\nEmber's factory does not register `AppTable`, `AppCell`, `AppHeader`, context hooks, or reusable component registries. Continue rendering with `FlexRenderCell`, `FlexRenderHeader`, and `FlexRenderFooter`. Continue wrapping receiver-dependent v9 methods in Ember template helpers as described by [getting-started](../SKILL.md).\n\n## Common mistakes\n\n### HIGH Copying another adapter's component registry\n\nWrong: expect `table.AppTable`, `useTableContext`, or a `tableComponents` option from React, Solid, Svelte, or Lit examples.\n\nCorrect: use the normal Ember FlexRender components and pass the table through ordinary Ember composition when another component truly needs it.\n\nThe Ember hook shares features/defaults and type inference only.\n\n### HIGH Passing features per table\n\nWrong:\n\n```gts\ncreateAppTable(() => ({ features: otherFeatures, columns, data: this.data }))\n```\n\nCorrect: define a separate app hook when a table needs a different feature set. `createAppTable` omits `features` from its call-site type.\n\n### HIGH Recreating the hook or columns with tracked updates\n\nWrong: call `createTableHook`, `createAppColumnHelper`, or `columns(...)` inside a component getter or the `createAppTable` thunk.\n\nCorrect: create them once at module scope and let the table thunk read only changing inputs.\n\n### MEDIUM Sharing controlled state as a default\n\nThe hook options omit `state`. Put `state` and matching `on[State]Change` callbacks in each `createAppTable` thunk so every table has one clear owner per slice. Use a shared external atom only when tables intentionally coordinate the same compatible slice.\n\n### MEDIUM Repeating manual feature generics\n\nUse `createAppColumnHelper()`; do not thread `typeof features` through every column helper after the factory has already captured it.\n\n## API discovery\n\nInspect `node_modules/@tanstack/ember-table/declarations/create-table-hook.d.ts` for the installed factory return shape, omitted options, and merge precedence. Inspect `use-table.d.ts` for thunk reactivity and `node_modules/@tanstack/table-core/dist/features//` for the shared feature APIs. Do not infer Ember component/context behavior from another adapter's createTableHook.\n\n## Sources\n\n- `TanStack/table:docs/framework/ember/guide/composable-tables.md`\n- `TanStack/table:examples/ember/basic-app-table`\n- `TanStack/table:packages/ember-table/src/create-table-hook.ts`\n","isInternal":false,"tokens":1092,"sizeBytes":5183},{"name":"SKILL.md","path":"packages/ember-table/skills/getting-started/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/ember-table/skills/getting-started/SKILL.md","title":"getting-started","category":"anthropic-skill","format":"markdown","content":"---\nname: getting-started\ndescription:\n Create and render Table v9 with the ember adapter. Route reusable createTableHook\n defaults, and framework setup; use table-state for reactive ownership.\nmetadata:\n type: framework\n library: '@tanstack/ember-table'\n framework: ember\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/ember/quick-start.md\n - TanStack/table:examples/ember/basic-table\n - TanStack/table:packages/ember-table/src/index.ts\n - TanStack/table:packages/ember-table/src/use-table.ts\n - TanStack/table:packages/ember-table/src/FlexRender.gts\n - TanStack/table:docs/framework/ember/guide/composable-tables.md\n - TanStack/table:examples/ember/basic-app-table\n - TanStack/table:packages/ember-table/src/create-table-hook.ts\n---\n\nLoad `intent load @tanstack/table-core#core` first for the headless model, stable inputs, and column inference.\n\nEmber 5.8 or newer requires Embroider or ember-auto-import v2. Prefer `.gts` or `.gjs` template-tag components with Glint.\n\n## Setup\n\n```gts\nimport Component from '@glimmer/component'\nimport { tracked } from '@glimmer/tracking'\nimport {\n FlexRenderCell,\n createColumnHelper,\n tableFeatures,\n useTable,\n type Cell,\n type Row,\n} from '@tanstack/ember-table'\n\ntype Person = { id: string; name: string }\n\nconst features = tableFeatures({})\nconst columnHelper = createColumnHelper()\nconst columns = columnHelper.columns([\n columnHelper.accessor('name', { header: 'Name' }),\n])\nconst initialData: Person[] = [{ id: '1', name: 'Ada' }]\nconst getRowId = (row: Person) => row.id\n\nconst getAllCells = (\n row: Row,\n): Array> => row.getAllCells()\n\nexport default class PeopleTable extends Component {\n @tracked data = initialData\n\n table = useTable(this, () => ({\n features,\n columns,\n data: this.data,\n getRowId,\n }))\n\n get rows() {\n return this.table.getRowModel().rows\n }\n\n \n}\n```\n\n## Construction and rendering\n\n`useTable` takes an options thunk. Read tracked data inside it, and keep features, atoms, and columns stable. In a component, pass `this` as the owner to bind external-atom cleanup to the component lifecycle. The one-argument thunk form remains available for standalone tables.\n\nRead Table APIs in template-consumed getters. Column, row, cell, and header prototype methods require their receiver, so use a getter or module helper such as `getAllCells(row)` rather than an extracted method. Wrap event calls the same way.\n\nUse `FlexRenderCell`, `FlexRenderHeader`, and `FlexRenderFooter` for the matching object. Rendered components receive `@ctx` and optional `@options` through `flexRenderComponent(Component, options)`.\n\nWith `tableFeatures({})`, render `row.getAllCells()`. Register `columnVisibilityFeature` before switching to `row.getVisibleCells()`.\n\n## Read for the task\n\n- When adding or configuring optional features, load `intent load @tanstack/table-core#table-features` and read only references for the requested behavior.\n- For state ownership or reactive reads, read [table-state](../table-state/SKILL.md).\n- When tables share features, defaults, or reusable UI, read [create-table-hook](references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/ember-table/declarations/index.d.ts`, `use-table.d.ts`, `signal.d.ts`, and `FlexRender.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n","frontmatter":{"name":"getting-started","description":"Create and render Table v9 with the ember adapter. Route reusable createTableHook defaults, and framework setup; use table-state for reactive ownership.","metadata":{"type":"framework","library":"@tanstack/ember-table","framework":"ember","library_version":"9.3.1"},"requires":["@tanstack/table-core#core"],"sources":["TanStack/table:docs/framework/ember/quick-start.md","TanStack/table:examples/ember/basic-table","TanStack/table:packages/ember-table/src/index.ts","TanStack/table:packages/ember-table/src/use-table.ts","TanStack/table:packages/ember-table/src/FlexRender.gts","TanStack/table:docs/framework/ember/guide/composable-tables.md","TanStack/table:examples/ember/basic-app-table","TanStack/table:packages/ember-table/src/create-table-hook.ts"]},"isInternal":false,"tokens":925,"sizeBytes":3791},{"name":"reactivity.md","path":"packages/ember-table/skills/table-state/references/reactivity.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/ember-table/skills/table-state/references/reactivity.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Ember Table reactivity\n\nRead for Ember subscription boundaries, shared state, or updates that require more than the default rendering behavior.\n\nThis reference inherits the version of its owning skill.\n\n## Own shared state with an Ember atom\n\n```gts\nimport Component from '@glimmer/component'\nimport { on } from '@ember/modifier'\nimport {\n createAtom,\n rowPaginationFeature,\n tableFeatures,\n useTable,\n type PaginationState,\n} from '@tanstack/ember-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nexport default class SharedPage extends Component {\n paginationAtom = createAtom({ pageIndex: 0, pageSize: 10 })\n table = useTable(this, () => ({\n features,\n columns,\n data,\n atoms: { pagination: this.paginationAtom },\n }))\n\n get pageNumber() {\n return this.paginationAtom.get().pageIndex + 1\n }\n\n nextPage = () => this.table.nextPage()\n\n \n}\n```\n\nThe adapter re-exports `createAtom` with Glimmer-reactive reads. Feature APIs write through to that owner, so omit `onPaginationChange`. Supplying the component owner binds external-atom cleanup to its destruction. Use the one-argument thunk form only when no Ember owner is available.\n\n## Construction-time ownership\n\nThe options thunk updates ordinary live options from tracked reads, but features and external atom owners are fixed during construction. Keep them stable. Replacing an `atoms` object in a getter does not swap the table's owners.\n\n## Template tracking is pull-based\n\nRead `table.atoms..get()`, `table.store.state.`, or a Table API inside a template-consumed getter. There is no selector argument or `table.Subscribe`; `table.store.subscribe` is a no-op. Subscribe to a supplied external atom when a separate consumer actually needs push notifications.\n\n`table.getState()` is removed v8 API. Caching a value outside tracked consumption does not establish Glimmer tracking.\n\n## Controlled state pitfalls\n\nResolve value-or-updater callbacks and assign a fresh tracked value. `this.pagination.pageIndex++` mutates an untracked nested property. A no-op callback freezes the controlled slice. Prefer `table.setPageIndex(...)` to invoke the callback with the feature's update rules.\n\nAn external atom wins over controlled state. Writing an internal base atom cannot replace the external value; use the feature API or write the external owner.\n\n## API discovery\n\nInspect `node_modules/@tanstack/ember-table/declarations/index.d.ts`, `use-table.d.ts`, `signal.d.ts`, and `FlexRender.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/ember/guide/table-state.md`\n- `TanStack/table:examples/ember/basic-external-atoms`\n- `TanStack/table:examples/ember/basic-external-state`\n- `TanStack/table:packages/ember-table/src/use-table.ts`\n- `TanStack/table:packages/ember-table/src/reactivity.ts`\n- `TanStack/table:packages/ember-table/src/signal.ts`\n","isInternal":false,"tokens":705,"sizeBytes":3143},{"name":"SKILL.md","path":"packages/ember-table/skills/table-state/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/ember-table/skills/table-state/SKILL.md","title":"table-state","category":"anthropic-skill","format":"markdown","content":"---\nname: table-state\ndescription:\n Read and control Table v9 state in ember. Use for tracked reads, subscriptions,\n controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/ember-table'\n framework: ember\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/ember/guide/table-state.md\n - TanStack/table:examples/ember/basic-external-atoms\n - TanStack/table:examples/ember/basic-external-state\n - TanStack/table:packages/ember-table/src/use-table.ts\n - TanStack/table:packages/ember-table/src/reactivity.ts\n - TanStack/table:packages/ember-table/src/signal.ts\n---\n\nLoad `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules.\n\nGlimmer tracks Table APIs, atom reads, and store-property reads inside template-consumed getters. A value cached outside tracked consumption is only a snapshot. There is no `table.Subscribe` or selector argument to `useTable`; `table.store.subscribe` is intentionally a no-op and cannot drive rendering.\n\n## Controlled tracked setup\n\n```gts\nimport Component from '@glimmer/component'\nimport { tracked } from '@glimmer/tracking'\nimport { on } from '@ember/modifier'\nimport {\n rowPaginationFeature,\n tableFeatures,\n useTable,\n type PaginationState,\n} from '@tanstack/ember-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nexport default class PageStatus extends Component {\n @tracked pagination: PaginationState = { pageIndex: 0, pageSize: 10 }\n table = useTable(this, () => ({\n features,\n columns,\n data,\n state: { pagination: this.pagination },\n onPaginationChange: (next) => {\n this.pagination =\n typeof next === 'function' ? next(this.pagination) : next\n },\n }))\n\n get pageNumber() {\n return this.table.atoms.pagination.get().pageIndex + 1\n }\n\n nextPage = () => this.table.nextPage()\n\n \n}\n```\n\n## Reactive boundaries\n\n- Read tracked values inside the options thunk and assign callback results back to their tracked owner. Mutating `this.pagination.pageIndex++` does not notify the thunk.\n- `features` and `atoms` are construction-time inputs. Updating ordinary live options does not replace the feature set or atom owners; create them once before `useTable`.\n- Pass the component as the owner for lifecycle cleanup when external atoms are used. The standalone one-argument thunk form remains supported.\n- Use the adapter's `createAtom` for external Glimmer-reactive ownership. Read it in a tracked getter and use feature APIs or the external atom to write.\n- Keep features, columns, and data stable. Call receiver-dependent methods through getters or helpers rather than passing extracted methods to templates.\n\n## Read for the task\n\nFor advanced reactive boundaries, shared atoms, or detailed subscription examples, read [reactivity](references/reactivity.md). For construction or rendering setup, read [getting-started](../getting-started/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/ember-table/declarations/index.d.ts`, `use-table.d.ts`, `signal.d.ts`, and `FlexRender.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n","frontmatter":{"name":"table-state","description":"Read and control Table v9 state in ember. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.","metadata":{"type":"framework","library":"@tanstack/ember-table","framework":"ember","library_version":"9.3.1"},"requires":["@tanstack/table-core#table-state"],"sources":["TanStack/table:docs/framework/ember/guide/table-state.md","TanStack/table:examples/ember/basic-external-atoms","TanStack/table:examples/ember/basic-external-state","TanStack/table:packages/ember-table/src/use-table.ts","TanStack/table:packages/ember-table/src/reactivity.ts","TanStack/table:packages/ember-table/src/signal.ts"]},"isInternal":false,"tokens":786,"sizeBytes":3446},{"name":"create-table-hook.md","path":"packages/lit-table/skills/getting-started/references/create-table-hook.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/lit-table/skills/getting-started/references/create-table-hook.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Lit reusable table hooks\n\nRead when multiple Lit tables share features, defaults, or rendering conventions. Keep standalone construction for tables without shared conventions. For controlled state or reactive reads, read [table-state](../../table-state/SKILL.md).\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```ts\nimport {\n createSortedRowModel,\n createTableHook,\n rowSortingFeature,\n tableFeatures,\n} from '@tanstack/lit-table'\n\nconst features = tableFeatures({\n rowSortingFeature,\n sortedRowModel: createSortedRowModel(),\n})\n\nexport const { createAppColumnHelper, useAppTable, useTableContext } =\n createTableHook({\n features,\n getRowId: (row: { id: string }) => row.id,\n })\n```\n\nUse `createAppColumnHelper()` to define app columns. In a `LitElement`, capture the host in a local variable and initialize `useAppTable(host, options, selector)` once as a field; call the returned `table()` function during render. The maintained composable-tables example shows the complete host/getter shape.\n\n## Core patterns\n\n### Bind shared features, not table-specific data\n\nPut feature plugins, row-model factories, default options, row IDs, and shared render conventions in the factory. Pass each table's columns, data, and controlled state to `useAppTable`.\n\n### Add component registries only for real conventions\n\nRegister common cell/header functions when multiple tables use them. Render them through `table.AppCell` and `table.AppHeader`; ordinary tables can use the returned table instance without registries.\n\n### Consume table context in custom elements\n\nCreate the returned `useTableContext(this)` once as a custom-element field. Read its `.value` during render and handle `undefined` before the provider is available. The value is a base `LitTable` with the factory's feature types, not the extended table with registered components or `App*` helpers.\n\n## Common mistakes\n\n### HIGH Prop drilling replaces typed context\n\nWrong: pass the stable table instance through every custom-element property boundary.\n\nCorrect: call the `useTableContext` returned by the same `createTableHook` in the nearest registered/custom control.\n\nUse the context from the same factory so its feature types and provider match. Registered render functions receive their enhanced cell/header values through `AppCell` and `AppHeader`.\n\nSource: TanStack/table:packages/lit-table/src/createTableHook.ts\n\n### HIGH Recreating useAppTable each render\n\nWrong: call `useAppTable(this, options)` afresh inside `render`.\n\nCorrect: initialize it once as a host field and call `this.appTable.table()` during render.\n\nThe helper owns a TableController and context provider tied to the host lifecycle.\n\nSource: TanStack/table:examples/lit/composable-tables\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/createTableHook.d.ts`. Use the matching installed implementation rather than assuming JSX-adapter component APIs exist in Lit.\n\n## Sources\n\n- `TanStack/table:docs/framework/lit/guide/composable-tables.md`\n- `TanStack/table:examples/lit/composable-tables`\n- `TanStack/table:packages/lit-table/src/createTableHook.ts`\n","isInternal":false,"tokens":672,"sizeBytes":3149},{"name":"with-tanstack-virtual.md","path":"packages/lit-table/skills/getting-started/references/with-tanstack-virtual.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/lit-table/skills/getting-started/references/with-tanstack-virtual.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Lit Table with TanStack Virtual\n\nRead when rendering a large Lit table with TanStack Virtual. Virtual operates on the final Table model. Read [table-state](../../table-state/SKILL.md) if model counts or rendered state stop updating.\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```ts\nimport { LitElement, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { VirtualizerController } from '@tanstack/lit-virtual'\nimport {\n TableController,\n tableFeatures,\n type ColumnDef,\n} from '@tanstack/lit-table'\n\ntype Item = { id: string; name: string }\nconst features = tableFeatures({})\nconst columns: Array> = [\n { accessorKey: 'name', header: 'Name' },\n]\nconst data: Array = Array.from({ length: 10_000 }, (_, id) => ({\n id: String(id),\n name: `Item ${id}`,\n}))\n\n@customElement('virtual-items')\nexport class VirtualItems extends LitElement {\n private controller = new TableController(this)\n private scroller = createRef()\n private virtualizer = new VirtualizerController(this, {\n count: data.length,\n getScrollElement: () => this.scroller.value,\n estimateSize: () => 32,\n overscan: 5,\n })\n\n protected render() {\n const table = this.controller.table({\n features,\n columns,\n data,\n getRowId: (row) => row.id,\n })\n const rows = table.getRowModel().rows\n const v = this.virtualizer.getVirtualizer()\n v.setOptions({ ...v.options, count: rows.length })\n\n return html`\n
\n ${v\n .getVirtualItems()\n .map(\n (item) =>\n html`\n ${rows[item.index].getValue('name')}\n
`,\n )}\n \n `\n }\n}\n```\n\n## Core patterns\n\n### Virtualize the final row model\n\nSet the virtualizer count from `table.getRowModel().rows.length`; index virtual items into that same array so filtering, sorting, expansion, and pagination are respected.\n\n### Keep geometry sources consistent\n\nFor column virtualization, estimate from `column.getSize()` and remeasure when columnSizing changes. Render widths from the same sizing state.\n\n### Treat unsupported combinations as user composition\n\nDrag-and-drop plus virtualization is not a maintained Table recipe. Start from the maintained Virtual example and reconcile both libraries' transforms, measurement, and auto-scroll contracts explicitly.\n\n## Common mistakes\n\n### HIGH Virtualizing raw data\n\nWrong: index virtual items into the original `data` array.\n\nCorrect: index into `table.getRowModel().rows`.\n\nRaw data ignores active Table processing and produces mismatched rows after sorting or filtering.\n\nSource: TanStack/table:examples/lit/virtualized-rows\n\n### HIGH Count and rows come from different models\n\nWrong: use `data.length` after filters change but render filtered rows.\n\nCorrect: update the virtualizer count from the same current `rows` array being rendered.\n\nMismatched geometry can index undefined rows or leave blank scroll space.\n\nSource: TanStack/table:examples/lit/virtualized-rows\n\n### HIGH Recreating columns during host renders\n\nWrong: pass `columns: [...columns]` from `render()` to work around a readonly tuple.\n\nCorrect: declare a stable mutable `Array>` once and pass `columns` directly.\n\nLit host updates can be driven by scrolling and measurement. A fresh column reference rebuilds Table's column pipeline on every such render.\n\nSource: TanStack/table:examples/lit/virtualized-rows\n\n### HIGH Sticky and sizing CSS assumed automatic\n\nWrong: add a VirtualizerController and expect sticky headers, widths, and transforms.\n\nCorrect: implement the scroll container, total-size spacer, absolute row transforms, sticky regions, and widths in Lit CSS/templates.\n\nBoth libraries are headless over rendering geometry.\n\nSource: TanStack/table:docs/framework/lit/guide/virtualization.md\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/index.d.ts` and `node_modules/@tanstack/lit-virtual/dist/`. Use maintained examples for geometry; do not register Virtual in `tableFeatures`.\n\n## Sources\n\n- `TanStack/table:docs/framework/lit/guide/virtualization.md`\n- `TanStack/table:examples/lit/virtualized-rows`\n- `TanStack/table:examples/lit/virtualized-columns`\n- `TanStack/table:examples/lit/virtualized-infinite-scrolling`\n","isInternal":false,"tokens":1051,"sizeBytes":4693},{"name":"SKILL.md","path":"packages/lit-table/skills/getting-started/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/lit-table/skills/getting-started/SKILL.md","title":"getting-started","category":"anthropic-skill","format":"markdown","content":"---\nname: getting-started\ndescription:\n Create and render Table v9 with the lit adapter. Route reusable createTableHook\n components, Virtual integration, and framework setup; use table-state for reactive ownership.\nmetadata:\n type: framework\n library: '@tanstack/lit-table'\n framework: lit\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/lit/guide/migrating.md\n - TanStack/table:examples/lit/basic-table-controller\n - TanStack/table:packages/lit-table/src/index.ts\n - TanStack/table:docs/framework/lit/guide/composable-tables.md\n - TanStack/table:examples/lit/composable-tables\n - TanStack/table:packages/lit-table/src/createTableHook.ts\n - TanStack/table:docs/framework/lit/guide/virtualization.md\n - TanStack/table:examples/lit/virtualized-rows\n - TanStack/table:examples/lit/virtualized-columns\n - TanStack/table:examples/lit/virtualized-infinite-scrolling\n---\n\nLoad `intent load @tanstack/table-core#core` first for the headless model, stable inputs, and column inference.\n\n## Setup\n\n```ts\nimport { LitElement, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport {\n FlexRender,\n TableController,\n createColumnHelper,\n tableFeatures,\n} from '@tanstack/lit-table'\n\ntype Person = { id: string; name: string }\n\nconst features = tableFeatures({})\nconst columnHelper = createColumnHelper()\nconst columns = columnHelper.columns([\n columnHelper.accessor('name', { header: 'Name' }),\n])\n\n@customElement('people-table')\nexport class PeopleTable extends LitElement {\n @state() private people: Array = [{ id: '1', name: 'Ada' }]\n private tableController = new TableController(this)\n\n protected render() {\n const table = this.tableController.table({\n features,\n columns,\n data: this.people,\n getRowId: (row) => row.id,\n })\n\n return html`\n \n ${repeat(\n table.getHeaderGroups(),\n (group) => group.id,\n (group) =>\n html`\n ${repeat(\n group.headers,\n (header) => header.id,\n (header) =>\n html``,\n )}\n `,\n )}\n \n \n ${repeat(\n table.getRowModel().rows,\n (row) => row.id,\n (row) =>\n html`\n ${repeat(\n row.getAllCells(),\n (cell) => cell.id,\n (cell) => html``,\n )}\n `,\n )}\n \n
\n ${header.isPlaceholder ? null : FlexRender({ header })}\n
${FlexRender({ cell })}
`\n }\n}\n```\n\n## Construction and rendering\n\nKeep one `TableController` as a host field. V9 takes only the host in its constructor; pass current options to `controller.table(...)` during every render. Recreating the controller repeats lifecycle and subscription work.\n\nKeep features, columns, and data stable across host updates. Use `FlexRender({ cell })`, `FlexRender({ header })`, or `FlexRender({ footer })` in Lit templates. The application owns semantic markup, accessibility, widths, and sticky positioning.\n\nThe controller selects all registered state by default. Narrow selected state only when host update cost requires it; use [table-state](../table-state/SKILL.md) for selectors and template subscriptions.\n\n## Read for the task\n\n- When adding or configuring optional features, load `intent load @tanstack/table-core#table-features` and read only references for the requested behavior.\n- For state ownership or reactive reads, read [table-state](../table-state/SKILL.md).\n- When tables share features, defaults, or reusable UI, read [create-table-hook](references/create-table-hook.md).\n- When virtualizing rows or columns, read [with-tanstack-virtual](references/with-tanstack-virtual.md).\n- When upgrading v8 code, read [migrate-v8-to-v9](../migrate-v8-to-v9/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/index.d.ts`, then `TableController.d.ts`, `flexRender.d.ts`, or the relevant exported declaration. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n","frontmatter":{"name":"getting-started","description":"Create and render Table v9 with the lit adapter. Route reusable createTableHook components, Virtual integration, and framework setup; use table-state for reactive ownership.","metadata":{"type":"framework","library":"@tanstack/lit-table","framework":"lit","library_version":"9.3.1"},"requires":["@tanstack/table-core#core"],"sources":["TanStack/table:docs/framework/lit/guide/migrating.md","TanStack/table:examples/lit/basic-table-controller","TanStack/table:packages/lit-table/src/index.ts","TanStack/table:docs/framework/lit/guide/composable-tables.md","TanStack/table:examples/lit/composable-tables","TanStack/table:packages/lit-table/src/createTableHook.ts","TanStack/table:docs/framework/lit/guide/virtualization.md","TanStack/table:examples/lit/virtualized-rows","TanStack/table:examples/lit/virtualized-columns","TanStack/table:examples/lit/virtualized-infinite-scrolling"]},"isInternal":false,"tokens":1017,"sizeBytes":4341},{"name":"adapter-migration.md","path":"packages/lit-table/skills/migrate-v8-to-v9/references/adapter-migration.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/lit-table/skills/migrate-v8-to-v9/references/adapter-migration.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Lit v8-to-v9 adapter migration\n\nRead when applying the Lit construction, state, rendering, or reusable-hook checks. Complete the shared audit with `intent load @tanstack/table-core#migrate-v8-to-v9`; its references own the shared feature and type rename inventories.\n\nThis reference inherits the version of its owning skill.\n\n## Framework requirements\n\nLit 3.1.3 or newer within v3 (`lit ^3.1.3`) and `@lit/context ^1.1.0` are required.\n\n## Construction\n\n| v8 | v9 |\n| ------------------------------------------ | ---------------------------------------------------- |\n| `new TableController(this, () => options)` | `new TableController(this)` |\n| `controller.table` property | `controller.table(options, selector?)` during render |\n\nThe controller owns host subscriptions and cleanup. Keep it as a field and supply current stable model inputs during render. Constructing it on every render repeats lifecycle work.\n\n## Lit state migration\n\n- `table.getState().sorting` becomes selected `table.state.sorting` for rendering or `table.atoms.sorting.get()` for a current snapshot. Store snapshots do not establish template subscriptions.\n- `table.state` contains all registered slices by default. Pass a second-argument selector to `controller.table(...)` only to narrow the render-selected surface.\n- Use `table.subscribe(table.store, stableSelector, renderCallback)` for selected template state. Keep the selector reference stable outside render.\n- Controlled state uses Lit `@state()` fields and matching `on[State]Change` callbacks that resolve value-or-function updaters.\n- External atoms come from `@tanstack/store` and are provided through `atoms`. Never provide both `atoms.pagination` and `state.pagination`.\n- The controller owns state subscriptions and requests host updates. Apply current options with `controller.table(...)` during render; keep the controller as a stable host field.\n\n## Rendering and composition\n\n| v8 | v9 |\n| -------------------------- | ----------------------------------------------------------------------------- |\n| `flexRender(def, context)` | `FlexRender({ cell })`, `FlexRender({ header })`, or `FlexRender({ footer })` |\n| Standalone helper only | `table.FlexRender({ cell })` is also available |\n| Repeated raw options | `tableOptions(...)` composition |\n| Repeated conventions | `createTableHook({ features, ... })` |\n\n`createTableHook` returns a host-bound app table helper and pre-bound column helper. Construct the app helper with the Lit host, then call its `.table()` during render. It is optional and intended for recurring application conventions.\n\n## Related task guidance\n\nFor a full construction example, read [getting-started](../../getting-started/SKILL.md). For tracked reads and controlled updates, read [table-state](../../table-state/SKILL.md). When creating a reusable app factory, read [create-table-hook](../../getting-started/references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/index.d.ts`, then `TableController.d.ts`, `flexRender.d.ts`, or the relevant exported declaration. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/lit/guide/migrating.md`\n- `TanStack/table:packages/lit-table/src/index.ts`\n- `TanStack/table:examples/lit/basic-table-controller`\n","isInternal":false,"tokens":725,"sizeBytes":3702},{"name":"SKILL.md","path":"packages/lit-table/skills/migrate-v8-to-v9/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/lit-table/skills/migrate-v8-to-v9/SKILL.md","title":"migrate-v8-to-v9","category":"anthropic-skill","format":"markdown","content":"---\nname: migrate-v8-to-v9\ndescription:\n Migrate lit Table v8 to v9. Audit framework construction, rendering, state, and\n app hooks, with shared API changes in the core migration skill.\nmetadata:\n type: lifecycle\n library: '@tanstack/lit-table'\n framework: lit\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#migrate-v8-to-v9'\nsources:\n - TanStack/table:docs/framework/lit/guide/migrating.md\n - TanStack/table:packages/lit-table/src/index.ts\n - TanStack/table:examples/lit/basic-table-controller\n---\n\nLoad `intent load @tanstack/table-core#migrate-v8-to-v9` first and audit its entire shared checklist. It owns feature registration, row-model slots, state/reset changes, prototype methods, logical pinning, sizing/resizing, sorting, selection, helpers, and TypeScript mappings.\n\n## Framework prerequisites\n\nLit 3.1.3 or newer within v3 (`lit ^3.1.3`) and `@lit/context ^1.1.0` are required.\n\n## Lit migration checklist\n\n- [ ] Construct one `TableController(this)` as a stable host field.\n- [ ] Replace the v8 `controller.table` property/options thunk with `controller.table(options, selector?)` during render.\n- [ ] Read selected `table.state` for rendering; use atom snapshots in handlers or stable `table.subscribe` selectors for template regions.\n- [ ] Feed resolved controlled callbacks back through reactive Lit properties, or use stable external atoms.\n- [ ] Switch render helpers to `FlexRender({ cell })`, `FlexRender({ header })`, or `FlexRender({ footer })` and preserve instance-method receivers.\n- [ ] If app conventions repeat, construct a host-bound `useAppTable` once and call its `.table()` during render.\n\n## Apply the affected mappings\n\nRead [adapter-migration](references/adapter-migration.md) when changing construction, rendering, state, or app hooks. Read the relevant core migration references for each affected shared API; this adapter checklist does not replace that audit.\n\nFor complete v9 construction examples, read [getting-started](../getting-started/SKILL.md). For reactive state repairs, read [table-state](../table-state/SKILL.md).\n\n## Final checks\n\n- [ ] All shared core migration checks and affected mappings have been applied.\n- [ ] The framework checklist above passes with the current adapter declarations.\n- [ ] Model inputs remain stable and state changes reach their reactive owner.\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/index.d.ts`, then `TableController.d.ts`, `flexRender.d.ts`, or the relevant exported declaration. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n","frontmatter":{"name":"migrate-v8-to-v9","description":"Migrate lit Table v8 to v9. Audit framework construction, rendering, state, and app hooks, with shared API changes in the core migration skill.","metadata":{"type":"lifecycle","library":"@tanstack/lit-table","framework":"lit","library_version":"9.3.1"},"requires":["@tanstack/table-core#migrate-v8-to-v9"],"sources":["TanStack/table:docs/framework/lit/guide/migrating.md","TanStack/table:packages/lit-table/src/index.ts","TanStack/table:examples/lit/basic-table-controller"]},"isInternal":false,"tokens":602,"sizeBytes":2613},{"name":"reactivity.md","path":"packages/lit-table/skills/table-state/references/reactivity.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/lit-table/skills/table-state/references/reactivity.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Lit Table reactivity\n\nRead for Lit subscription boundaries, shared state, or updates that require more than the default rendering behavior.\n\nThis reference inherits the version of its owning skill.\n\n## Select a template region independently\n\n\n\n```ts\nimport { LitElement, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport {\n TableController,\n rowPaginationFeature,\n tableFeatures,\n type TableState,\n} from '@tanstack/lit-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\nconst noOwnerState = () => null\nconst pageIndex = (state: TableState) =>\n state.pagination.pageIndex\n\n@customElement('page-island')\nexport class PageIsland extends LitElement {\n private controller = new TableController(\n this,\n )\n\n protected render() {\n const table = this.controller.table(\n { features, columns, data },\n noOwnerState,\n )\n return html`\n ${table.subscribe(table.store, pageIndex, (page) => html`Page ${page + 1}`)}\n \n `\n }\n}\n```\n\nThe owner selector opts this host out of state-driven updates. Every state-dependent region must then subscribe to its own dependencies. Keep both selectors stable. Recreating a `table.subscribe` selector changes its subscription work even if it computes the same value.\n\n## Shared atoms and controlled properties\n\nFor cross-system state, create a stable external TanStack Store atom and pass it in `atoms`. Feature APIs write the supplied atom. For host-owned state, use `@state()` plus the corresponding callback, resolve value-or-function updaters, and feed the property into the next `controller.table` call.\n\nUse `table.atoms.pagination.get()` in an event handler for the current snapshot. A cached store property outside render does not stay current and does not subscribe a template region.\n\n## Host lifecycle and accepted updates\n\nKeep the controller as a host field. It owns subscriptions and cleanup. `controller.table` stages fresh options for same-render reads; `hostUpdated` publishes captured controlled state after Lit commits. External atoms remain direct owners.\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/index.d.ts`, then `TableController.d.ts`, `flexRender.d.ts`, or the relevant exported declaration. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/lit/guide/table-state.md`\n- `TanStack/table:examples/lit/basic-external-state`\n- `TanStack/table:packages/lit-table/src/TableController.ts`\n","isInternal":false,"tokens":606,"sizeBytes":2789},{"name":"SKILL.md","path":"packages/lit-table/skills/table-state/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/lit-table/skills/table-state/SKILL.md","title":"table-state","category":"anthropic-skill","format":"markdown","content":"---\nname: table-state\ndescription:\n Read and control Table v9 state in lit. Use for tracked reads, subscriptions,\n controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/lit-table'\n framework: lit\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/lit/guide/table-state.md\n - TanStack/table:examples/lit/basic-external-state\n - TanStack/table:packages/lit-table/src/TableController.ts\n---\n\nLoad `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules.\n\n`TableController` selects all registered state by default and requests host updates when selected state changes. `table.state` is the selected render value. `table.atoms..get()` and `table.store.state` are snapshots; those reads do not create a template subscription.\n\n## Controlled property setup\n\n\n\n```ts\nimport { LitElement, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport {\n TableController,\n rowPaginationFeature,\n tableFeatures,\n type PaginationState,\n} from '@tanstack/lit-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'id' }]\nconst data = [{ id: '1' }]\n\n@customElement('page-status')\nexport class PageStatus extends LitElement {\n @state() private pagination: PaginationState = { pageIndex: 0, pageSize: 10 }\n private controller = new TableController(\n this,\n )\n\n protected render() {\n const table = this.controller.table({\n features,\n columns,\n data,\n state: { pagination: this.pagination },\n onPaginationChange: (next) => {\n this.pagination =\n typeof next === 'function' ? next(this.pagination) : next\n },\n })\n return html``\n }\n}\n```\n\n## Reactive boundaries\n\n- Keep one controller on the host and pass current options during render. Keep features, columns, and data references stable across host updates.\n- A second `controller.table(options, selector)` argument changes the shape of `table.state` and gates host updates. Keep reused selectors stable.\n- Use `table.subscribe(source, selector, renderCallback)` for a template region that should update independently. Cache selector functions as host fields or module functions.\n- Feed every controlled callback result into the corresponding reactive property and pass it back through `state`. Use stable external atoms through `atoms` when sharing state outside the host.\n\n## Read for the task\n\nFor advanced reactive boundaries, shared atoms, or detailed subscription examples, read [reactivity](references/reactivity.md). For construction or rendering setup, read [getting-started](../getting-started/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/index.d.ts`, then `TableController.d.ts`, `flexRender.d.ts`, or the relevant exported declaration. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n","frontmatter":{"name":"table-state","description":"Read and control Table v9 state in lit. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.","metadata":{"type":"framework","library":"@tanstack/lit-table","framework":"lit","library_version":"9.3.1"},"requires":["@tanstack/table-core#table-state"],"sources":["TanStack/table:docs/framework/lit/guide/table-state.md","TanStack/table:examples/lit/basic-external-state","TanStack/table:packages/lit-table/src/TableController.ts"]},"isInternal":false,"tokens":713,"sizeBytes":3242},{"name":"SKILL.md","path":"packages/match-sorter-utils/skills/fuzzy-ranking/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/match-sorter-utils/skills/fuzzy-ranking/SKILL.md","title":"fuzzy-ranking","category":"anthropic-skill","format":"markdown","content":"---\nname: fuzzy-ranking\ndescription: >\n Rank fuzzy matches with rankItem, filter with RankingInfo.passed, compare saved ranking metadata with compareItems, and configure rankings, thresholds, accessors, min/max bounds, or diacritics. Load for @tanstack/match-sorter-utils itself or fuzzy Table filterMeta wiring.\nmetadata:\n type: core\n library: '@tanstack/match-sorter-utils'\n library_version: '9.2.6'\nsources:\n - 'TanStack/table:packages/match-sorter-utils/src/index.ts'\n - 'TanStack/table:docs/framework/react/guide/fuzzy-filtering.md'\n - 'TanStack/table:examples/react/filters-fuzzy'\n---\n\n## Setup\n\n\n\n```ts\nimport { compareItems, rankItem, rankings } from '@tanstack/match-sorter-utils'\n\nconst query = 'tan'\nconst values = ['table', 'tanner', 'router']\nexport const ranked = values\n .map((value) => ({\n value,\n info: rankItem(value, query, { threshold: rankings.MATCHES }),\n }))\n .filter((entry) => entry.info.passed)\n .sort((a, b) => compareItems(a.info, b.info))\n```\n\n## Core Patterns\n\n### Separate ranking, filtering, and sorting\n\nCall `rankItem` once, filter on `info.passed`, retain the `RankingInfo`, then order matching results with `compareItems`.\n\n### Rank object fields through accessors\n\n```ts\ntype Person = { name: string; email: string }\nconst person: Person = { name: 'Ada Lovelace', email: 'ada@example.test' }\nconst info = rankItem(person, 'lov', {\n accessors: [(item) => item.name, (item) => item.email],\n})\n```\n\nAccessor options can set a per-accessor threshold plus minRanking/maxRanking bounds.\n\n### Store ranking as Table filter metadata\n\nIn a Table filterFn, call `addMeta?.({ itemRank })`. Register the corresponding\nmeta shape with `filterMeta: metaHelper<{ itemRank: RankingInfo }>()`. A related\nsortFn reads `row.columnFiltersMeta[columnId]?.itemRank` and uses `compareItems`,\nfalling back to an ordinary comparator for ties or absent metadata. For the\nprimary Table composition, load `@tanstack/table-core#table-features` and read\nits global-filtering reference. Register the fuzzy filter under `filterFns`\nfor `globalFilterFn: 'fuzzy'`.\n\n## Common Mistakes\n\n### HIGH Numeric rank used as pass flag\n\nWrong: `if (rankItem(value, query).rank) include(value)`.\n\nCorrect: test `rankItem(value, query).passed`.\n\nRanks below the configured threshold can still be nonzero; `passed` records the threshold decision.\n\nSource: TanStack/table:packages/match-sorter-utils/src/index.ts\n\n### HIGH Ranking recomputed during sorting\n\nWrong: call `rankItem` for both rows on every comparator invocation.\n\nCorrect: retain RankingInfo during filtering and pass the stored values to `compareItems`.\n\nSorting is called many times; recomputing also risks using different query/options than the filter decision.\n\nSource: TanStack/table:docs/framework/react/guide/fuzzy-filtering.md\n\n### MEDIUM compareItems direction reversed twice\n\nWrong: negate `compareItems(a, b)` because a larger rank should appear first.\n\nCorrect: use `compareItems(a, b)` directly for ascending fuzzy relevance.\n\nThe function already returns -1 when `a.rank` is greater than `b.rank`.\n\nSource: TanStack/table:packages/match-sorter-utils/src/index.ts\n\n## API Discovery\n\nInspect `node_modules/@tanstack/match-sorter-utils/dist/index.d.ts` for the installed `RankItemOptions`, accessor attributes, ranking constants, and comparator behavior. For TanStack Table metadata integration, load `@tanstack/table-core#table-features` and read its global-filtering and sorting references.\n","frontmatter":{"name":"fuzzy-ranking","description":"Rank fuzzy matches with rankItem, filter with RankingInfo.passed, compare saved ranking metadata with compareItems, and configure rankings, thresholds, accessors, min/max bounds, or diacritics. Load for @tanstack/match-sorter-utils itself or fuzzy Table filterMeta wiring.\n","metadata":{"type":"core","library":"@tanstack/match-sorter-utils","library_version":"9.2.6"},"sources":["TanStack/table:packages/match-sorter-utils/src/index.ts","TanStack/table:docs/framework/react/guide/fuzzy-filtering.md","TanStack/table:examples/react/filters-fuzzy"]},"isInternal":false,"tokens":838,"sizeBytes":3503},{"name":"create-table-hook.md","path":"packages/octane-table/skills/getting-started/references/create-table-hook.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/octane-table/skills/getting-started/references/create-table-hook.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Octane reusable table hooks\n\nRead when multiple Octane tables share features, defaults, or rendering conventions. Keep standalone construction for tables without shared conventions. For controlled state or reactive reads, read [table-state](../../table-state/SKILL.md).\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```tsrx\nimport {\n createTableHook,\n rowSelectionFeature,\n tableFeatures,\n} from '@tanstack/octane-table'\n\nexport const { createAppColumnHelper, useAppTable, useTableContext } =\n createTableHook({\n features: tableFeatures({ rowSelectionFeature }),\n getRowId: (row: { id: string }) => row.id,\n })\n```\n\nCreate the factory at module scope. Its wrappers have stable identities and read the latest table facade without remounting their child subtrees.\n\n## Core patterns\n\n### Use the factory-bound helper\n\n```tsrx\ntype Person = { id: string; name: string }\nconst helper = createAppColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n```\n\n### Consume typed context under its wrapper\n\n```tsrx\nfunction RowCount() @{\n const table = useTableContext()\n {String(table.getRowModel().rows.length)}\n}\n\nfunction Grid() @{\n const table = useAppTable({ data, columns })\n \n}\n```\n\n`AppTable` takes static children without a selector. Use function children when a selector supplies their value:\n\n```tsrx\n state.rowSelection}>\n {(rowSelection) => {String(Object.keys(rowSelection).length)}}\n\n```\n\nRender `AppTable`, `AppCell`, `AppHeader`, `AppFooter`, and registered components with JSX. The wrappers establish context and independent Octane scopes.\n\n### Isolate nested table setups\n\nDefault contexts are module-scoped and HMR-stable. Sibling tables are isolated by their providers, but nested factories can resolve a consumer to the inner provider. Create fresh contexts for distinct nested setups:\n\n```tsrx\nimport {\n createTableHook,\n createTableHookContexts,\n rowSelectionFeature,\n tableFeatures,\n} from '@tanstack/octane-table'\n\nconst features = tableFeatures({ rowSelectionFeature })\nconst { tableContext, cellContext, headerContext } =\n createTableHookContexts()\n\nexport const app = createTableHook({\n features,\n tableContext,\n cellContext,\n headerContext,\n})\n```\n\nPrefer hooks returned by `createTableHook` because their types include registered component maps.\n\n## Common mistakes\n\n### HIGH Reading outside the matching provider\n\nWrong:\n\n```tsrx\nfunction Grid() @{\n \n}\n```\n\nCorrect:\n\n```tsrx\nfunction Grid() @{\n const table = useAppTable({ data, columns })\n \n}\n```\n\nFactory context hooks throw actionable errors when the matching `AppTable`, `AppCell`, or `AppHeader` provider is missing.\n\nSource: `packages/octane-table/src/createTableHook.tsrx`\n\n### HIGH Recreating the factory during render\n\nWrong:\n\n```tsrx\nfunction Grid() @{\n const app = createTableHook({ features })\n const table = app.useAppTable({ data, columns })\n \n}\n```\n\nCorrect:\n\n```tsrx\nconst app = createTableHook({ features })\n\nfunction Grid() @{\n const table = app.useAppTable({ data, columns })\n \n}\n```\n\nA factory created during render makes hook configuration, wrappers, contexts, and registered component identities unstable.\n\nSource: `packages/octane-table/src/createTableHook.tsrx`\n\n## API discovery\n\nInspect `node_modules/@tanstack/octane-table/src/createTableHook.tsrx.d.ts`, `src/createTableHookContexts.ts`, and `src/types.ts` for exact return names, wrapper props, registries, and scoped context types.\n\n## Sources\n\n- `TanStack/table:docs/framework/octane/guide/composable-tables.md`\n- `TanStack/table:docs/framework/octane/guide/table-context.md`\n- `TanStack/table:examples/octane/composable-tables`\n- `TanStack/table:packages/octane-table/src/createTableHook.tsrx`\n- `TanStack/table:packages/octane-table/src/createTableHookContexts.ts`\n","isInternal":false,"tokens":929,"sizeBytes":4066},{"name":"SKILL.md","path":"packages/octane-table/skills/getting-started/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/octane-table/skills/getting-started/SKILL.md","title":"getting-started","category":"anthropic-skill","format":"markdown","content":"---\nname: getting-started\ndescription:\n Create and render Table v9 with the octane adapter. Route reusable createTableHook\n components, and framework setup; use table-state for reactive ownership.\nmetadata:\n type: framework\n library: '@tanstack/octane-table'\n framework: octane\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/octane/quick-start.md\n - TanStack/table:examples/octane/basic-use-table\n - TanStack/table:packages/octane-table/src/index.ts\n - TanStack/table:packages/octane-table/src/useTable.tsrx\n - TanStack/table:docs/framework/octane/guide/composable-tables.md\n - TanStack/table:docs/framework/octane/guide/table-context.md\n - TanStack/table:examples/octane/composable-tables\n - TanStack/table:packages/octane-table/src/createTableHook.tsrx\n - TanStack/table:packages/octane-table/src/createTableHookContexts.ts\n---\n\nLoad `intent load @tanstack/table-core#core` first for the headless model, stable inputs, and column inference.\n\n## Setup\n\n```tsrx\nimport { createRoot, useState } from 'octane'\nimport {\n createColumnHelper,\n tableFeatures,\n useTable,\n} from '@tanstack/octane-table'\n\ntype Person = { name: string }\nconst features = tableFeatures({})\nconst helper = createColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n\nfunction PeopleTable() @{\n const [data] = useState([{ name: 'Ada' }])\n const table = useTable({ features, columns, data })\n\n \n \n @for (const group of table.getHeaderGroups(); key group.id) {\n \n @for (const header of group.headers; key header.id) {\n \n }\n \n }\n \n \n @for (const row of table.getRowModel().rows; key row.id) {\n \n @for (const cell of row.getAllCells(); key cell.id) {\n \n }\n \n }\n \n
\n}\n\nconst rootElement = document.getElementById('root')\nif (!rootElement) throw new Error('Root element not found')\ncreateRoot(rootElement).render(PeopleTable)\n```\n\n## Construction and rendering\n\nThis adapter distributes authored TypeScript and TSRX. Configure the consumer with `octane()` in `vite.config.ts` and the TSRX JSX import source `octane`. Author component bodies with `@{ ... }` and keyed `@for` loops for rows, headers, and cells.\n\nImport from `@tanstack/octane-table`. Render `table.FlexRender` as a component so it gets its own Octane scope. It preserves numbers including `0`, render descriptors, and component functions.\n\nKeep features and column definitions at module scope. For inputs that depend on component state, use `useMemo`; pass the current stable data array to `useTable`. Convert non-renderable values with `String(value)` when displaying them as text.\n\n## Read for the task\n\n- When adding or configuring optional features, load `intent load @tanstack/table-core#table-features` and read only references for the requested behavior.\n- For state ownership or reactive reads, read [table-state](../table-state/SKILL.md).\n- When tables share features, defaults, or reusable UI, read [create-table-hook](references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/octane-table/src/index.d.ts`, the matching `*.tsrx.d.ts` sidecar, and `src/types.ts`. This package publishes authored source; core APIs are in installed `@tanstack/table-core/dist/`.\n","frontmatter":{"name":"getting-started","description":"Create and render Table v9 with the octane adapter. Route reusable createTableHook components, and framework setup; use table-state for reactive ownership.","metadata":{"type":"framework","library":"@tanstack/octane-table","framework":"octane","library_version":"9.3.1"},"requires":["@tanstack/table-core#core"],"sources":["TanStack/table:docs/framework/octane/quick-start.md","TanStack/table:examples/octane/basic-use-table","TanStack/table:packages/octane-table/src/index.ts","TanStack/table:packages/octane-table/src/useTable.tsrx","TanStack/table:docs/framework/octane/guide/composable-tables.md","TanStack/table:docs/framework/octane/guide/table-context.md","TanStack/table:examples/octane/composable-tables","TanStack/table:packages/octane-table/src/createTableHook.tsrx","TanStack/table:packages/octane-table/src/createTableHookContexts.ts"]},"isInternal":false,"tokens":856,"sizeBytes":3554},{"name":"reactivity.md","path":"packages/octane-table/skills/table-state/references/reactivity.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/octane-table/skills/table-state/references/reactivity.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Octane Table reactivity\n\nRead for Octane subscription boundaries, shared state, or updates that require more than the default rendering behavior.\n\nThis reference inherits the version of its owning skill.\n\n## Mount independent subscription islands\n\n```tsrx\nimport { rowSelectionFeature, tableFeatures, useTable } from '@tanstack/octane-table'\n\nconst features = tableFeatures({ rowSelectionFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nfunction SelectionCount() @{\n const table = useTable({ features, columns, data }, () => null)\n \n {(selection) => {String(Object.keys(selection).length)}}\n \n \n}\n```\n\nWithout `source`, `table.Subscribe` subscribes to `table.store` and needs a selector. With `source`, it can consume one atom or store. If the owner selects `null`, every UI region must subscribe to the slices its Table API reads depend on, including row-model dependencies.\n\nAlways mount `Subscribe` with JSX. `table.Subscribe({ source, children })` shares the owner's compiler slots and loses the independent hook scope.\n\n## Share a synchronous external owner\n\n```tsrx\nimport { useCreateAtom } from '@tanstack/octane-store'\nimport { rowPaginationFeature, tableFeatures, useTable } from '@tanstack/octane-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nfunction PageStatus() @{\n const pagination = useCreateAtom({ pageIndex: 0, pageSize: 20 })\n const table = useTable({ features, columns, data, atoms: { pagination } })\n \n}\n```\n\nUse `useSelector` from `@tanstack/octane-store` when another component consumes the atom. External atoms are direct synchronous owners and take precedence over `options.state`; omit the matching controlled callback.\n\n## Render and commit timing\n\n`useTable` stages current data, columns, callbacks, and controlled state for same-render reads. It publishes controlled state only after Octane accepts the render, from the layout commit. Suspended or abandoned renders cannot publish speculative state.\n\nThe owner drops the matching redundant post-commit notification because it already rendered that snapshot. Independently mounted `table.Subscribe` consumers still receive the update before paint. This distinction applies to controlled `state`; external atom writes remain synchronous.\n\nFor controlled state, pass `state.` together with the corresponding Octane setter. A custom callback must resolve raw values and updater functions before feeding the owner back into Table.\n\n## API discovery\n\nInspect `node_modules/@tanstack/octane-table/src/index.d.ts`, the matching `*.tsrx.d.ts` sidecar, and `src/types.ts`. This package publishes authored source; core APIs are in installed `@tanstack/table-core/dist/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/octane/guide/table-state.md`\n- `TanStack/table:examples/octane/basic-subscribe`\n- `TanStack/table:examples/octane/basic-external-atoms`\n- `TanStack/table:packages/octane-table/src/useTable.tsrx`\n- `TanStack/table:packages/octane-table/src/Subscribe.tsrx`\n","isInternal":false,"tokens":726,"sizeBytes":3355},{"name":"SKILL.md","path":"packages/octane-table/skills/table-state/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/octane-table/skills/table-state/SKILL.md","title":"table-state","category":"anthropic-skill","format":"markdown","content":"---\nname: table-state\ndescription:\n Read and control Table v9 state in octane. Use for tracked reads, subscriptions,\n controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/octane-table'\n framework: octane\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/octane/guide/table-state.md\n - TanStack/table:examples/octane/basic-subscribe\n - TanStack/table:examples/octane/basic-external-atoms\n - TanStack/table:packages/octane-table/src/useTable.tsrx\n - TanStack/table:packages/octane-table/src/Subscribe.tsrx\n---\n\nLoad `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules.\n\n`useTable` selects all registered state by default. Its second argument changes the selected shape exposed as `table.state` and shallow-gates owner rerenders. Atom `.get()` and `table.store.state` reads are snapshots; use selected state or a rendered `table.Subscribe` to update the UI.\n\n## Controlled slice setup\n\n```tsrx\nimport { useState } from 'octane'\nimport {\n rowPaginationFeature,\n tableFeatures,\n useTable,\n} from '@tanstack/octane-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nfunction PageStatus() @{\n const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 20 })\n const table = useTable({\n features,\n columns,\n data,\n state: { pagination },\n onPaginationChange: setPagination,\n })\n\n \n}\n```\n\n## Reactive boundaries\n\n- Pass both the controlled value and its callback. Octane setters accept Table's value-or-updater callbacks; a callback alone cannot feed the new value back.\n- Render `` as a component. Calling it as a normal function shares the owner's compiler slots instead of creating an independent hook scope.\n- `useTable` stages fresh options for same-render reads. Controlled state reaches the store only from an accepted layout commit, so abandoned work cannot publish speculative values.\n- A stable atom from `@tanstack/octane-store` is a direct synchronous owner. Table writes reach it immediately; it takes precedence over controlled `state` for the same slice.\n- Keep features, columns, and data stable. Use the default selector until render cost justifies narrower subscriptions.\n\n## Read for the task\n\nFor advanced reactive boundaries, shared atoms, or detailed subscription examples, read [reactivity](references/reactivity.md). For construction or rendering setup, read [getting-started](../getting-started/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/octane-table/src/index.d.ts`, the matching `*.tsrx.d.ts` sidecar, and `src/types.ts`. This package publishes authored source; core APIs are in installed `@tanstack/table-core/dist/`.\n","frontmatter":{"name":"table-state","description":"Read and control Table v9 state in octane. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.","metadata":{"type":"framework","library":"@tanstack/octane-table","framework":"octane","library_version":"9.3.1"},"requires":["@tanstack/table-core#table-state"],"sources":["TanStack/table:docs/framework/octane/guide/table-state.md","TanStack/table:examples/octane/basic-subscribe","TanStack/table:examples/octane/basic-external-atoms","TanStack/table:packages/octane-table/src/useTable.tsrx","TanStack/table:packages/octane-table/src/Subscribe.tsrx"]},"isInternal":false,"tokens":678,"sizeBytes":3003},{"name":"SKILL.md","path":"packages/preact-table-devtools/skills/devtools/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/preact-table-devtools/skills/devtools/SKILL.md","title":"devtools","category":"anthropic-skill","format":"markdown","content":"---\nname: devtools\ndescription: >\n Connect native Preact Table v9 instances to Devtools with tableDevtoolsPlugin and useTanStackTableDevtools. Load for React-package mixups, missing targets, required options.key, enabled state, cleanup, or development gating.\nmetadata:\n type: framework\n library: '@tanstack/preact-table-devtools'\n framework: preact\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\n - '@tanstack/table-devtools#devtools'\nsources:\n - 'TanStack/table:docs/devtools.md'\n - 'TanStack/table:packages/preact-table-devtools/src/index.ts'\n - 'TanStack/table:packages/preact-table-devtools/src/useTanStackTableDevtools.ts'\n---\n\nThis skill builds on @tanstack/table-core#core and @tanstack/table-devtools#devtools.\n\n## Setup\n\n```tsx\nimport { TanStackDevtools } from '@tanstack/preact-devtools'\nimport { useTable, tableFeatures } from '@tanstack/preact-table'\nimport {\n tableDevtoolsPlugin,\n useTanStackTableDevtools,\n} from '@tanstack/preact-table-devtools'\n\nconst features = tableFeatures({})\nconst columns = [{ accessorKey: 'id' }]\nconst data: Array<{ id: string }> = []\n\nexport function App() {\n const table = useTable({\n key: 'users-table',\n features,\n columns,\n data,\n })\n useTanStackTableDevtools(table)\n return \n}\n```\n\n## Hooks and Components\n\nUse the native Preact packages throughout. Pass `{ enabled }` rather than conditionally calling the registration hook.\n\n## Common Mistakes\n\n### HIGH React Devtools package mixed into Preact\n\nWrong: import the hook from `@tanstack/react-table-devtools` through compat.\n\nCorrect: use `@tanstack/preact-table-devtools` with `@tanstack/preact-devtools`.\n\nThe native adapter owns Preact effect lifecycle and plugin types.\n\nSource: TanStack/table:docs/devtools.md\n\n### HIGH Missing or duplicate key\n\nWrong: omit `key` or reuse `users-table` for multiple mounted tables.\n\nCorrect: give each live table one stable unique key.\n\nKeyless registration is skipped; duplicate keys replace targets.\n\nSource: TanStack/table:packages/table-devtools/src/tableTarget.ts\n\n### MEDIUM Production no-op mistaken for failure\n\nWrong: expect the default entrypoint to stay active in a production bundle.\n\nCorrect: keep Devtools development-only unless an explicit production import is required.\n\nThe default index deliberately selects no-op implementations outside development.\n\nSource: TanStack/table:packages/preact-table-devtools/src/index.ts\n\n## API Discovery\n\nInspect `node_modules/@tanstack/preact-table-devtools/dist/index.d.ts` and `useTanStackTableDevtools.d.ts`; do not copy React adapter imports.\n","frontmatter":{"name":"devtools","description":"Connect native Preact Table v9 instances to Devtools with tableDevtoolsPlugin and useTanStackTableDevtools. Load for React-package mixups, missing targets, required options.key, enabled state, cleanup, or development gating.\n","metadata":{"type":"framework","library":"@tanstack/preact-table-devtools","framework":"preact","library_version":"9.3.1"},"requires":["@tanstack/table-core#core","@tanstack/table-devtools#devtools"],"sources":["TanStack/table:docs/devtools.md","TanStack/table:packages/preact-table-devtools/src/index.ts","TanStack/table:packages/preact-table-devtools/src/useTanStackTableDevtools.ts"]},"isInternal":false,"tokens":618,"sizeBytes":2640},{"name":"create-table-hook.md","path":"packages/preact-table/skills/getting-started/references/create-table-hook.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/preact-table/skills/getting-started/references/create-table-hook.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Reusable Preact table hooks\n\nUse this reference when multiple Preact tables share features, defaults, or registered components. Keep one-off tables on `useTable`. For controlled state or subscription changes, read [table state](../../table-state/SKILL.md).\n\n## Setup\n\n```tsx\nimport {\n createTableHook,\n rowSelectionFeature,\n tableFeatures,\n} from '@tanstack/preact-table'\n\nexport const { createAppColumnHelper, useAppTable, useTableContext } =\n createTableHook({\n features: tableFeatures({ rowSelectionFeature }),\n getRowId: (row: { id: string }) => row.id,\n })\n```\n\n## Core patterns\n\n### Use the factory-bound helper\n\n```tsx\ntype Person = { id: string; name: string }\nconst helper = createAppColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n```\n\n### Consume typed context under its wrapper\n\n```tsx\nfunction RowCount() {\n const table = useTableContext()\n return {table.getRowModel().rows.length}\n}\nconst table = useAppTable({ data, columns })\nreturn (\n \n \n \n)\n```\n\n`AppTable` takes ordinary JSX children without a selector. Use function children only when a selector supplies their value:\n\n```tsx\n state.rowSelection}>\n {(rowSelection) => {Object.keys(rowSelection).length}}\n\n```\n\n### Isolate genuinely nested table setups\n\nDefault contexts are module-scoped and HMR-stable; sibling tables are already isolated by their providers. Separate `createTableHook` calls still share those defaults, so nested providers can silently resolve a consumer to the inner table. Use fresh contexts only when different table setups are nested:\n\n```tsx\nimport {\n createTableHook,\n createTableHookContexts,\n rowSelectionFeature,\n tableFeatures,\n} from '@tanstack/preact-table'\n\nconst features = tableFeatures({ rowSelectionFeature })\nconst { tableContext, cellContext, headerContext } =\n createTableHookContexts()\n\nexport const app = createTableHook({\n features,\n tableContext,\n cellContext,\n headerContext,\n})\n```\n\nPrefer hooks returned by `createTableHook` because their types include registered component maps. Hooks returned directly by `createTableHookContexts` know only `TFeatures` and support modules that cannot import the completed factory.\n\n## Common mistakes\n\n### Choose a factory for repeated conventions\n\nA factory for shared conventions:\n\n```tsx\nconst app = createTableHook({ features: tableFeatures({}) })\n```\n\nStandalone construction for a one-off table:\n\n```tsx\nconst table = useTable({ features, columns, data })\n```\n\nThe factory is valuable when it centralizes repeated policy, not merely another constructor name.\n\nSource: `docs/framework/preact/guide/composable-tables.md`\n\n### HIGH Reading outside the matching provider\n\nWrong:\n\n```tsx\nreturn \n```\n\nCorrect:\n\n```tsx\nreturn (\n \n \n \n)\n```\n\nFactory context hooks require the corresponding `AppTable`, `AppCell`, or `AppHeader` wrapper.\n\nSource: `packages/preact-table/src/createTableHook.tsx`\n\n### HIGH Recreating contexts per render\n\nWrong:\n\n```tsx\nfunction Grid() {\n const app = createTableHook({ features })\n const table = app.useAppTable({ data, columns })\n return (\n \n
\n \n )\n}\n```\n\nCorrect:\n\n```tsx\nconst app = createTableHook({ features })\nfunction Grid() {\n const table = app.useAppTable({ data, columns })\n return (\n \n
\n \n )\n}\n```\n\nCreating a new factory closure during render makes hook configuration and component registries unstable. Keep the factory and its bound hook identity at module scope.\n\nSource: `packages/preact-table/src/createTableHook.tsx`\n\n## API discovery\n\nInspect `node_modules/@tanstack/preact-table/dist/createTableHook.d.ts` and `createTableHookContexts.d.ts` for exact return names, provider props, registries, and scoped context types.\n\n## Sources\n\n- `TanStack/table:docs/framework/preact/guide/composable-tables.md`\n- `TanStack/table:docs/framework/preact/guide/table-context.md`\n- `TanStack/table:examples/preact/composable-tables`\n- `TanStack/table:packages/preact-table/src/createTableHook.tsx`\n- `TanStack/table:packages/preact-table/src/createTableHookContexts.tsx`\n","isInternal":false,"tokens":1002,"sizeBytes":4358},{"name":"with-tanstack-query.md","path":"packages/preact-table/skills/getting-started/references/with-tanstack-query.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/preact-table/skills/getting-started/references/with-tanstack-query.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Preact Table with TanStack Query\n\nUse this reference when Query owns server data for a Preact table. Read [table state](../../table-state/SKILL.md) for reactive ownership. Run `intent load @tanstack/table-core#table-features` and read its client/server reference before choosing manual processing stages. Query fetches rows already processed by every server-owned stage; manual flags only bypass Table processing.\n\n## Setup\n\n```tsx\nimport { keepPreviousData, useQuery } from '@tanstack/preact-query'\nimport { useCreateAtom, useSelector } from '@tanstack/preact-store'\nimport {\n rowPaginationFeature,\n tableFeatures,\n useTable,\n} from '@tanstack/preact-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst emptyRows: Array<{ id: string }> = []\nconst paginationAtom = useCreateAtom({ pageIndex: 0, pageSize: 20 })\nconst pagination = useSelector(paginationAtom, (value) => value)\nconst result = useQuery({\n queryKey: ['people', pagination],\n queryFn: () => fetchPeople(pagination),\n placeholderData: keepPreviousData,\n})\nconst table = useTable({\n features,\n columns,\n data: result.data?.rows ?? emptyRows,\n rowCount: result.data?.rowCount,\n atoms: { pagination: paginationAtom },\n manualPagination: true,\n})\n```\n\n## Core patterns\n\n### Key requests by every server-owned slice\n\n```tsx\nuseQuery({\n queryKey: ['people', pagination, sorting],\n queryFn: () => fetchPeople({ pagination, sorting }),\n})\n```\n\n### Pass cached rows directly\n\n```tsx\nuseTable({ features, columns, data: result.data?.rows ?? emptyRows })\n```\n\n## Common mistakes\n\n### HIGH Importing React Query APIs\n\nWrong:\n\n```tsx\nimport { useQuery } from '@tanstack/react-query'\n```\n\nCorrect:\n\n```tsx\nimport { useQuery } from '@tanstack/preact-query'\n```\n\nUse native Preact Query and Store integrations throughout the composition.\n\nSource: `examples/preact/with-tanstack-query`\n\n### HIGH Reusing one cache key\n\nWrong:\n\n```tsx\nuseQuery({ queryKey: ['people'], queryFn: () => fetchPeople(pagination) })\n```\n\nCorrect:\n\n```tsx\nuseQuery({\n queryKey: ['people', pagination],\n queryFn: () => fetchPeople(pagination),\n})\n```\n\nEach processed server result needs a key that includes its request state.\n\nSource: `examples/preact/with-tanstack-query`\n\n### HIGH Expecting manual flags to fetch\n\nWrong:\n\n```tsx\nuseTable({ features, columns, data, manualPagination: true })\n```\n\nCorrect:\n\n```tsx\nuseTable({\n features,\n columns,\n data: result.data?.rows ?? emptyRows,\n rowCount: result.data?.rowCount,\n manualPagination: true,\n})\n```\n\nManual pagination bypasses local processing; it neither calls the backend nor invents totals.\n\nSource: `docs/framework/preact/guide/pagination.md`\n\n## API discovery\n\nInspect installed `node_modules/@tanstack/preact-table/dist/index.d.ts` and the relevant installed core feature declarations; inspect `@tanstack/preact-query` declarations for exact query APIs.\n\n## Sources\n\n- `TanStack/table:examples/preact/with-tanstack-query`\n- `TanStack/table:docs/framework/preact/guide/pagination.md`\n","isInternal":false,"tokens":709,"sizeBytes":3002},{"name":"with-tanstack-virtual.md","path":"packages/preact-table/skills/getting-started/references/with-tanstack-virtual.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/preact-table/skills/getting-started/references/with-tanstack-virtual.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Preact Table with TanStack Virtual\n\nUse this reference when virtualizing Preact table rows or columns. Virtual consumes the final Table model in the renderer; it is not a Table feature. For reactive model or subscription problems, read [table state](../../table-state/SKILL.md). Register `columnSizingFeature` before calling sizing APIs, and `columnVisibilityFeature` before visibility-aware APIs.\n\n## Setup\n\n```tsx\nimport { useRef } from 'preact/hooks'\nimport { useVirtualizer } from '@tanstack/react-virtual' // via preact/compat\n\nconst scrollRef = useRef(null)\nconst rows = table.getRowModel().rows\nconst virtualizer = useVirtualizer({\n count: rows.length,\n getScrollElement: () => scrollRef.current,\n estimateSize: () => 36,\n getItemKey: (index) => rows[index].id,\n overscan: 5,\n})\n```\n\nRender a spacer of `getTotalSize()` and position each row from its virtual item's `start`.\n\n## Core patterns\n\n### Apply Table's column sizes\n\n```tsx\n\n \n\n```\n\n### Measure dynamic rows by index\n\n```tsx\n
\n {row.id}\n
\n```\n\n## Common mistakes\n\n### HIGH Looking for a Preact-specific adapter\n\nThere is no `@tanstack/preact-virtual` package. In the standard Preact setup that aliases React to `preact/compat`, use the maintained React adapter:\n\n```tsx\nimport { useVirtualizer } from '@tanstack/react-virtual'\n```\n\nIf the application cannot use the compat alias, integrate the `Virtualizer` class from `@tanstack/virtual-core` directly. That is a lower-level integration with application-owned lifecycle and subscriptions; do not invent Preact hooks around it.\n\nSource: `docs/framework/preact/guide/virtualization.md`\n\n### HIGH Virtualizing raw data\n\nWrong:\n\n```tsx\nuseVirtualizer({ count: data.length, getScrollElement, estimateSize })\n```\n\nCorrect:\n\n```tsx\nconst rows = table.getRowModel().rows\nuseVirtualizer({ count: rows.length, getScrollElement, estimateSize })\n```\n\nRaw data omits Table's current filtering, sorting, expansion, grouping, and pagination.\n\nSource: `docs/framework/preact/guide/virtualization.md`\n\n### HIGH Assuming layout is automatic\n\nWrong:\n\n```tsx\nvirtualizer.getVirtualItems().map((item) =>
{rows[item.index].id}
)\n```\n\nCorrect:\n\n```tsx\nvirtualizer\n .getVirtualItems()\n .map((item) => (\n \n {rows[item.index].id}\n
\n ))\n```\n\nVirtual computes geometry; application markup and CSS must apply it and supply the scroll container/spacer.\n\nSource: `docs/framework/preact/guide/virtualization.md`\n\n## API discovery\n\nInspect `node_modules/@tanstack/preact-table/dist/index.d.ts`. For rendering APIs, inspect installed `node_modules/@tanstack/react-virtual/dist/` when using the standard `preact/compat` alias, or `node_modules/@tanstack/virtual-core/dist/` for a direct integration. There is no maintained Preact-specific Virtual package or Table example; start from the Preact guide and translate the maintained React examples only through the compat setup it describes.\n\n## Sources\n\n- `TanStack/table:docs/framework/preact/guide/virtualization.md`\n- `TanStack/table:packages/preact-table/src/index.ts`\n","isInternal":false,"tokens":787,"sizeBytes":3310},{"name":"SKILL.md","path":"packages/preact-table/skills/getting-started/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/preact-table/skills/getting-started/SKILL.md","title":"getting-started","category":"anthropic-skill","format":"markdown","content":"---\nname: getting-started\ndescription: Create and render Table v9 with the preact adapter. Route reusable createTableHook components, Query and Virtual integration, and framework setup; use table-state for reactive ownership.\nmetadata:\n type: framework\n library: '@tanstack/preact-table'\n library_version: '9.3.1'\n framework: preact\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/preact/guide/migrating.md\n - TanStack/table:examples/preact/basic-use-table\n - TanStack/table:packages/preact-table/src/index.ts\n - TanStack/table:docs/framework/preact/guide/composable-tables.md\n - TanStack/table:docs/framework/preact/guide/table-context.md\n - TanStack/table:examples/preact/composable-tables\n - TanStack/table:packages/preact-table/src/createTableHook.tsx\n - TanStack/table:packages/preact-table/src/createTableHookContexts.tsx\n - TanStack/table:examples/preact/with-tanstack-query\n - TanStack/table:docs/framework/preact/guide/pagination.md\n - TanStack/table:docs/framework/preact/guide/virtualization.md\n---\n\n# Preact Table setup and integration\n\nBefore starting, run `intent load @tanstack/table-core#core` for the shared headless model and stable-input rules.\n\n## Setup\n\n```tsx\nimport { useState } from 'preact/hooks'\nimport {\n createColumnHelper,\n tableFeatures,\n useTable,\n} from '@tanstack/preact-table'\n\ntype Person = { name: string }\nconst features = tableFeatures({})\nconst helper = createColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n\nexport function PeopleTable() {\n const [data] = useState([{ name: 'Ada' }])\n const table = useTable({ features, columns, data })\n return (\n \n \n {table.getHeaderGroups().map((group) => (\n \n {group.headers.map((header) => (\n \n ))}\n \n ))}\n \n \n {table.getRowModel().rows.map((row) => (\n \n {row.getAllCells().map((cell) => (\n \n ))}\n \n ))}\n \n
\n \n
\n \n
\n )\n}\n```\n\n## Essential constraints\n\nUse native `@tanstack/preact-table` and `preact/hooks`. V8 React-through-compat setup and `useReactTable` are not the native v9 API. Keep features, columns, and fallback arrays stable across renders.\n\nTable owns models and state. The application owns markup, CSS, interactions, and accessibility. Core-only tables use `row.getAllCells()`; visibility-aware methods need `columnVisibilityFeature`. Optional state and APIs require their features. Put row-model slots after their prerequisite features in `tableFeatures()`.\n\n## Load by task\n\n- For repeated features, defaults, typed contexts, or component registries, read [reusable app hooks](references/create-table-hook.md).\n- For Query-backed data, server pages, sorting, filtering, or request keys, read [TanStack Query integration](references/with-tanstack-query.md).\n- For virtual rows, columns, dynamic measurement, or infinite scrolling, read [TanStack Virtual integration](references/with-tanstack-virtual.md).\n- For controlled state, tracked reads, or render subscriptions, read [table state](../table-state/SKILL.md).\n- For feature registration, missing feature APIs, or processing ownership, run `intent load @tanstack/table-core#table-features` and read only references needed by the task.\n- For v8 code, read the [migration checklist](../migrate-v8-to-v9/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/preact-table/dist/index.d.ts`, then the exported adapter declarations for the installed version. Inspect optional core APIs under `node_modules/@tanstack/table-core/dist/features/`.\n","frontmatter":{"name":"getting-started","description":"Create and render Table v9 with the preact adapter. Route reusable createTableHook components, Query and Virtual integration, and framework setup; use table-state for reactive ownership.","metadata":{"type":"framework","library":"@tanstack/preact-table","library_version":"9.3.1","framework":"preact"},"requires":["@tanstack/table-core#core"],"sources":["TanStack/table:docs/framework/preact/guide/migrating.md","TanStack/table:examples/preact/basic-use-table","TanStack/table:packages/preact-table/src/index.ts","TanStack/table:docs/framework/preact/guide/composable-tables.md","TanStack/table:docs/framework/preact/guide/table-context.md","TanStack/table:examples/preact/composable-tables","TanStack/table:packages/preact-table/src/createTableHook.tsx","TanStack/table:packages/preact-table/src/createTableHookContexts.tsx","TanStack/table:examples/preact/with-tanstack-query","TanStack/table:docs/framework/preact/guide/pagination.md","TanStack/table:docs/framework/preact/guide/virtualization.md"]},"isInternal":false,"tokens":923,"sizeBytes":3951},{"name":"adapter-migration.md","path":"packages/preact-table/skills/migrate-v8-to-v9/references/adapter-migration.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/preact-table/skills/migrate-v8-to-v9/references/adapter-migration.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Preact adapter migration details\n\nRead when replacing Preact table construction, reactive state, rendering, or reusable app hooks. First complete the shared checklist from `intent load @tanstack/table-core#migrate-v8-to-v9`; its references own shared feature, method, and TypeScript mappings.\n\n## Replace `useReactTable` with `useTable`\n\n```tsx\nimport {\n createSortedRowModel,\n rowSortingFeature,\n tableFeatures,\n useTable,\n} from '@tanstack/preact-table'\n\nconst features = tableFeatures({\n rowSortingFeature,\n sortedRowModel: createSortedRowModel(),\n})\nconst table = useTable({ features, columns, data })\n```\n\nV8 did not have a first-party Preact adapter; many Preact apps used `@tanstack/react-table` through `preact/compat`. V9 uses native `@tanstack/preact-table`. Remove compatibility aliases that existed only for Table after replacing the imports. Keep aliases needed by other libraries, such as React Virtual. Prefer explicit features as the end state; `stockFeatures` is only a kitchen-sink migration shortcut.\n\n## State and reactive reads\n\n| v8 | v9 |\n| --------------------------- | ------------------------------------------------------------------------------------ |\n| `table.getState()` | Reactive `table.state`, snapshot `table.store.state`, or `table.atoms..get()` |\n| Top-level `onStateChange` | Per-slice callbacks or `table.store.subscribe()` |\n| Whole-component state reads | Custom second-argument selector, `table.Subscribe`, or atom source |\n\nThe default `useTable` selector subscribes the component to all registered state. Pass a selector for `table.state`, or `() => null` and subscribe lower:\n\n```tsx\nconst table = useTable(options, () => null)\n\n\n {selection => {Object.keys(selection).length} selected}\n\n```\n\nControlled `state` plus per-slice `on[State]Change` remains supported. For app-owned atoms, use `useCreateAtom`/`useSelector` from `@tanstack/preact-store` and pass them through `options.atoms`. An external atom wins over `state` for the same slice; do not mirror both ownership models.\n\n## Rendering and composition\n\n- Replace React-adapter `flexRender(def, context)` with `` or standalone ``; the function remains for advanced cases.\n- Use `tableOptions()` for typed reusable option fragments.\n- Use `createTableHook({ features, ...defaults })` for repeated app table conventions; it returns native app helpers such as `useAppTable` and `createAppColumnHelper`.\n\nFor detailed controlled wiring or tracking failures, read [table state](../../table-state/SKILL.md). For reusable contexts or components, read [app-hook composition](../../getting-started/references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/preact-table/dist/index.d.ts` and its exported declarations for construction, rendering, and app hooks.\n\n## Sources\n\n- `TanStack/table:docs/framework/preact/guide/migrating.md`\n- `TanStack/table:packages/preact-table/src/index.ts`\n- `TanStack/table:examples/preact/basic-use-table`\n","isInternal":false,"tokens":696,"sizeBytes":3278},{"name":"SKILL.md","path":"packages/preact-table/skills/migrate-v8-to-v9/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/preact-table/skills/migrate-v8-to-v9/SKILL.md","title":"migrate-v8-to-v9","category":"anthropic-skill","format":"markdown","content":"---\nname: migrate-v8-to-v9\ndescription: Migrate preact Table v8 to v9. Audit framework construction, rendering, state, and app hooks, with shared API changes in the core migration skill.\nmetadata:\n type: lifecycle\n library: '@tanstack/preact-table'\n library_version: '9.3.1'\n framework: preact\nrequires:\n - '@tanstack/table-core#migrate-v8-to-v9'\nsources:\n - TanStack/table:docs/framework/preact/guide/migrating.md\n - TanStack/table:packages/preact-table/src/index.ts\n - TanStack/table:examples/preact/basic-use-table\n---\n\n# Preact v8-to-v9 migration checklist\n\nBefore starting, run `intent load @tanstack/table-core#migrate-v8-to-v9`. Audit its entire shared checklist and read the detailed core mappings for APIs present in the application. This checklist adds the Preact-specific changes.\n\nFramework prerequisite: Preact 10 or newer (`preact >=10`).\n\n## Adapter audit\n\n- [ ] Replace React-adapter imports and `useReactTable` with native `@tanstack/preact-table` and `useTable`.\n- [ ] Remove compat aliases that existed only for Table. Preserve aliases still required by other libraries, including a React Virtual integration.\n- [ ] Keep model inputs stable and configure explicit features/row-model slots; complete the shared core checklist.\n- [ ] Use selected `table.state`, `table.Subscribe`, or Preact Store subscriptions; snapshots alone do not rerender consumers.\n- [ ] Pair controlled slices with callbacks, or supply stable atoms from `@tanstack/preact-store`; remove global `onStateChange`.\n- [ ] Use native Preact FlexRender components. Adopt `tableOptions` or `createTableHook` only for repeated app conventions.\n\n## Load the affected details\n\nWhen the audit finds old Preact construction, state, rendering, or app-hook code, read [adapter migration details](references/adapter-migration.md) before editing it. For a replacement render scaffold, read [getting started](../getting-started/SKILL.md). For controlled or stale state after migration, read [table state](../table-state/SKILL.md).\n\nShared pinning, sizing, sorting, selection, prototype-method, type, and registry changes stay in the core migration references. Renaming `useReactTable` alone does not complete the migration.\n\n## Verify the migration\n\n- [ ] Type-check against the installed v9 adapter and exercise every enabled client/manual feature flow.\n- [ ] Verify external state writes, reactive data replacement, and the framework rendering paths changed above.\n- [ ] Complete the core checklist, including layout and selection behavior when those features are used.\n- [ ] Replace temporary `stockFeatures` when the target is explicit feature tree-shaking.\n\n## API discovery\n\nInspect `node_modules/@tanstack/preact-table/dist/index.d.ts` and the exported adapter declarations. Use `node_modules/@tanstack/table-core/dist/index.d.ts` for shared APIs.\n","frontmatter":{"name":"migrate-v8-to-v9","description":"Migrate preact Table v8 to v9. Audit framework construction, rendering, state, and app hooks, with shared API changes in the core migration skill.","metadata":{"type":"lifecycle","library":"@tanstack/preact-table","library_version":"9.3.1","framework":"preact"},"requires":["@tanstack/table-core#migrate-v8-to-v9"],"sources":["TanStack/table:docs/framework/preact/guide/migrating.md","TanStack/table:packages/preact-table/src/index.ts","TanStack/table:examples/preact/basic-use-table"]},"isInternal":false,"tokens":631,"sizeBytes":2836},{"name":"reactivity.md","path":"packages/preact-table/skills/table-state/references/reactivity.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/preact-table/skills/table-state/references/reactivity.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Preact table reactive boundaries\n\nRead when optimizing subscriptions, composing external atoms, or debugging Preact-specific tracking and controlled updates. Shared ownership, initialization, and reset rules remain in `intent load @tanstack/table-core#table-state`.\n\n## Example context\n\n```tsx\nconst table = useTable({ features, columns, data }, (state) => ({\n pagination: state.pagination,\n}))\nreturn {table.state.pagination.pageIndex + 1}\n```\n\nThe selector determines rerenders and the shape exposed on `table.state`; omission selects all registered slices.\n\n## State patterns\n\n### Fine-grained Preact subscription\n\n```tsx\nreturn (\n \n {(selection) => {Object.keys(selection).length}}\n \n)\n```\n\n### External atom ownership\n\n```tsx\nimport { useCreateAtom } from '@tanstack/preact-store'\nconst pagination = useCreateAtom({ pageIndex: 0, pageSize: 20 })\nconst table = useTable({ features, columns, data, atoms: { pagination } })\n```\n\n## Common mistakes\n\n### HIGH Reading snapshots as subscriptions\n\nWrong:\n\n```tsx\nconst page = table.store.state.pagination.pageIndex\n```\n\nCorrect:\n\n```tsx\nconst page = table.state.pagination.pageIndex\n```\n\nStore and atom `.get()` reads are snapshots; selected `table.state` or `Subscribe` connects a Preact render.\n\nSource: `packages/preact-table/src/useTable.ts`\n\n### HIGH Controlling only the callback\n\nWrong:\n\n```tsx\nuseTable({ features, columns, data, onPaginationChange: setPagination })\n```\n\nCorrect:\n\n```tsx\nuseTable({\n features,\n columns,\n data,\n state: { pagination },\n onPaginationChange: setPagination,\n})\n```\n\nThe callback must write into the value supplied for that controlled slice.\n\nSource: `docs/framework/preact/guide/table-state.md`\n\n### MEDIUM Narrowing away rendered dependencies\n\nWrong:\n\n```tsx\nconst table = useTable(options, (state) => ({ pagination: state.pagination }))\nreturn table.getSelectedRowModel().rows.length\n```\n\nCorrect:\n\n```tsx\nconst table = useTable(options, (state) => ({\n pagination: state.pagination,\n rowSelection: state.rowSelection,\n}))\nreturn table.getSelectedRowModel().rows.length\n```\n\nIf render output depends on selection, the owning render boundary must subscribe to it directly or via `Subscribe`.\n\nSource: `examples/preact/basic-subscribe`\n\n## API discovery\n\nInspect `node_modules/@tanstack/preact-table/dist/useTable.d.ts` and `Subscribe.d.ts`; use `@tanstack/preact-store` rather than React Store hooks.\n\n## Sources\n\n- `TanStack/table:docs/framework/preact/guide/table-state.md`\n- `TanStack/table:examples/preact/basic-subscribe`\n- `TanStack/table:packages/preact-table/src/useTable.ts`\n","isInternal":false,"tokens":604,"sizeBytes":2688},{"name":"SKILL.md","path":"packages/preact-table/skills/table-state/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/preact-table/skills/table-state/SKILL.md","title":"table-state","category":"anthropic-skill","format":"markdown","content":"---\nname: table-state\ndescription: Read and control Table v9 state in preact. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/preact-table'\n library_version: '9.3.1'\n framework: preact\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/preact/guide/table-state.md\n - TanStack/table:examples/preact/basic-subscribe\n - TanStack/table:packages/preact-table/src/useTable.ts\n---\n\n# Preact table state\n\nBefore starting, run `intent load @tanstack/table-core#table-state` for shared ownership, initialization, updates, and resets. State repair does not require loading setup guidance.\n\n## Read reactive state\n\n`useTable` selects all registered state by default. Its optional second-argument selector controls rerenders and the shape of `table.state`. `table.atoms..get()` and `table.store.state` are current snapshots, not Preact subscriptions.\n\nUse selected `table.state` in the owner render. For narrower boundaries, use `table.Subscribe` or `useSelector` from `@tanstack/preact-store`. Without `source`, `table.Subscribe` selects from `table.store`; with `source`, it subscribes to that atom or store. Start with the default selector until render cost requires narrowing.\n\n## Control a slice\n\nKeep features, columns, and data stable. Register the feature that owns the controlled slice. This example controls pagination without adding client row processing:\n\n```tsx\nimport { useState } from 'preact/hooks'\nimport {\n rowPaginationFeature,\n tableFeatures,\n useTable,\n type PaginationState,\n} from '@tanstack/preact-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nexport function PageControl() {\n const [pagination, setPagination] = useState({\n pageIndex: 0,\n pageSize: 20,\n })\n const table = useTable({\n features,\n columns,\n data,\n state: { pagination },\n onPaginationChange: setPagination,\n })\n return (\n \n )\n}\n```\n\nThe Preact setter accepts both a value and a functional updater. Supply the current `state.pagination` together with `onPaginationChange`; a callback alone does not keep the table synchronized.\n\nFor an externally owned atom, create it with `useCreateAtom` from `@tanstack/preact-store`, pass it in `atoms.`, and subscribe with `useSelector` where other UI needs its value.\n\n## Reactive boundaries\n\nUse native `@tanstack/preact-store` bindings. A narrowed selector must include every state slice used by rendered builder methods, or those consumers need their own subscription.\n\nFor external-atom examples, selector dependencies, or fine-grained boundaries, read [reactivity details](references/reactivity.md). If this task changes processing features, run `intent load @tanstack/table-core#table-features` and read the relevant feature references.\n\n## API discovery\n\nInspect `node_modules/@tanstack/preact-table/dist/useTable.d.ts` and `Subscribe.d.ts`, plus the installed `@tanstack/preact-store` declarations for atom hooks.\n","frontmatter":{"name":"table-state","description":"Read and control Table v9 state in preact. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.","metadata":{"type":"framework","library":"@tanstack/preact-table","library_version":"9.3.1","framework":"preact"},"requires":["@tanstack/table-core#table-state"],"sources":["TanStack/table:docs/framework/preact/guide/table-state.md","TanStack/table:examples/preact/basic-subscribe","TanStack/table:packages/preact-table/src/useTable.ts"]},"isInternal":false,"tokens":725,"sizeBytes":3256},{"name":"SKILL.md","path":"packages/react-table-devtools/skills/devtools/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/react-table-devtools/skills/devtools/SKILL.md","title":"devtools","category":"anthropic-skill","format":"markdown","content":"---\nname: devtools\ndescription: >\n Connect React Table v9 instances to Devtools with tableDevtoolsPlugin and useTanStackTableDevtools. Load for missing Table panels, registration lifecycle, required options.key, enabled state, or development versus explicit production exports.\nmetadata:\n type: framework\n library: '@tanstack/react-table-devtools'\n framework: react\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\n - '@tanstack/table-devtools#devtools'\nsources:\n - 'TanStack/table:docs/devtools.md'\n - 'TanStack/table:packages/react-table-devtools/src/index.ts'\n - 'TanStack/table:packages/react-table-devtools/src/useTanStackTableDevtools.ts'\n---\n\nThis skill builds on @tanstack/table-core#core and @tanstack/table-devtools#devtools.\n\n## Setup\n\n```tsx\nimport { TanStackDevtools } from '@tanstack/react-devtools'\nimport { useTable, tableFeatures } from '@tanstack/react-table'\nimport {\n tableDevtoolsPlugin,\n useTanStackTableDevtools,\n} from '@tanstack/react-table-devtools'\n\nconst features = tableFeatures({})\nconst columns = [{ accessorKey: 'id' }]\nconst data: Array<{ id: string }> = []\n\nexport function App() {\n const table = useTable({\n key: 'users-table',\n features,\n columns,\n data,\n })\n useTanStackTableDevtools(table)\n return \n}\n```\n\n## Hooks and Components\n\nUse `useTanStackTableDevtools(table, { enabled })` immediately after creating the table. Mount one TanStackDevtools host with `tableDevtoolsPlugin()` near the application root.\n\n## Common Mistakes\n\n### HIGH Hook receives a keyless table\n\nWrong: create the table without `key` and expect the hook to infer a name.\n\nCorrect: set a unique `key` in table options before calling the hook.\n\nCore target registration skips keyless tables.\n\nSource: TanStack/table:docs/devtools.md\n\n### HIGH Hook called conditionally\n\nWrong: call `useTanStackTableDevtools` only inside an `if` branch.\n\nCorrect: call it every render and pass `{ enabled: condition }`.\n\nThe hook owns React effect registration and cleanup.\n\nSource: TanStack/table:packages/react-table-devtools/src/useTanStackTableDevtools.ts\n\n### MEDIUM Default import expected in production\n\nWrong: expect the normal hook/plugin/panel to inspect production tables.\n\nCorrect: keep normal guidance development-only; use the `/production` entrypoint only when explicitly required.\n\nThe default index selects no-op implementations outside development.\n\nSource: TanStack/table:packages/react-table-devtools/src/index.ts\n\n## API Discovery\n\nInspect `node_modules/@tanstack/react-table-devtools/dist/index.d.ts` and `useTanStackTableDevtools.d.ts` for the installed lifecycle API.\n","frontmatter":{"name":"devtools","description":"Connect React Table v9 instances to Devtools with tableDevtoolsPlugin and useTanStackTableDevtools. Load for missing Table panels, registration lifecycle, required options.key, enabled state, or development versus explicit production exports.\n","metadata":{"type":"framework","library":"@tanstack/react-table-devtools","framework":"react","library_version":"9.3.1"},"requires":["@tanstack/table-core#core","@tanstack/table-devtools#devtools"],"sources":["TanStack/table:docs/devtools.md","TanStack/table:packages/react-table-devtools/src/index.ts","TanStack/table:packages/react-table-devtools/src/useTanStackTableDevtools.ts"]},"isInternal":false,"tokens":620,"sizeBytes":2684},{"name":"create-table-hook.md","path":"packages/react-table/skills/getting-started/references/create-table-hook.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/react-table/skills/getting-started/references/create-table-hook.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Reusable React table hooks\n\nUse this reference when multiple React tables share features, defaults, or registered components. Keep one-off tables on `useTable`. For controlled state or subscription changes, read [table state](../../table-state/SKILL.md).\n\n## Setup\n\n```tsx\nimport {\n createTableHook,\n rowSelectionFeature,\n tableFeatures,\n} from '@tanstack/react-table'\n\nexport const { createAppColumnHelper, useAppTable, useTableContext } =\n createTableHook({\n features: tableFeatures({ rowSelectionFeature }),\n getRowId: (row: { id: string }) => row.id,\n })\n```\n\nKeep this factory in an infrastructure module. It binds feature types and defaults once while each `useAppTable` call still supplies its own data, columns, state, and initial state.\n\n## Core patterns\n\n### Infer columns through the bound helper\n\n```tsx\ntype Person = { id: string; name: string }\nconst helper = createAppColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n\nfunction People({ data }: { data: Person[] }) {\n const table = useAppTable({ data, columns })\n return (\n \n
{table.getRowModel().rows.length}
\n \n )\n}\n```\n\n`AppTable` takes ordinary JSX children when it has no selector. Function children are only valid with a selector:\n\n```tsx\n state.rowSelection}>\n {(rowSelection) => {Object.keys(rowSelection).length}}\n\n```\n\n### Read registered context instead of drilling props\n\n```tsx\nfunction RowCount() {\n const table = useTableContext()\n return {table.getRowModel().rows.length}\n}\n```\n\nRegister reusable table/cell/header components in the factory and consume them under their matching `App*` provider.\n\n### Isolate genuinely nested table setups\n\nThe default module-scoped contexts are HMR-stable, and normal provider scoping already isolates sibling tables. Separate `createTableHook` calls still use those shared default contexts, so nested providers can silently resolve a consumer to the inner table. Create scoped contexts only when different table setups are nested:\n\n```tsx\nimport {\n createTableHook,\n createTableHookContexts,\n rowSelectionFeature,\n tableFeatures,\n} from '@tanstack/react-table'\n\nconst features = tableFeatures({ rowSelectionFeature })\nconst { tableContext, cellContext, headerContext } =\n createTableHookContexts()\n\nexport const app = createTableHook({\n features,\n tableContext,\n cellContext,\n headerContext,\n})\n```\n\nPrefer context hooks returned by `createTableHook`; they include the registered component maps in their types. Hooks returned directly by `createTableHookContexts` know only `TFeatures` and are useful from modules that cannot import the completed factory.\n\n## Common mistakes\n\n### Choose a factory for repeated conventions\n\nA factory for shared conventions:\n\n```tsx\nconst { useAppTable } = createTableHook({ features: tableFeatures({}) })\n```\n\nStandalone construction for a one-off table:\n\n```tsx\nconst table = useTable({ features, columns, data })\n```\n\nA factory adds an app-wide abstraction; standalone construction is clearer without shared conventions.\n\nSource: `docs/framework/react/guide/composable-tables.md`\n\n### HIGH Creating the factory during render\n\nWrong:\n\n```tsx\nfunction People() {\n const app = createTableHook({ features })\n const table = app.useAppTable({ data, columns })\n return (\n \n
\n \n )\n}\n```\n\nCorrect:\n\n```tsx\nconst app = createTableHook({ features })\nfunction People() {\n const table = app.useAppTable({ data, columns })\n return (\n \n
\n \n )\n}\n```\n\nCreating a new factory closure during render makes hook configuration and component registries unstable. Keep the factory and its bound hook identity at module scope.\n\nSource: `packages/react-table/src/createTableHook.tsx`\n\n### HIGH Closing a circular HMR import\n\nWrong:\n\n```tsx\n// table.ts imports RowCount; RowCount.tsx imports useTableContext from table.ts\nexport const app = createTableHook({ features, tableComponents: { RowCount } })\n```\n\nCorrect:\n\n```tsx\n// components.tsx receives the exported hook through a cycle-free module boundary\nexport const app = createTableHook({ features })\n```\n\nKeep the factory dependency graph acyclic or inject components from a separate composition root; circular registries can break Vite HMR.\n\nSource: `https://github.com/TanStack/table/issues/6348`\n\n## API discovery\n\nInspect `node_modules/@tanstack/react-table/dist/createTableHook.d.ts` and `createTableHookContexts.d.ts` for the exact returned helpers, component registries, wrapper props, and scoped context types.\n\n## Sources\n\n- `TanStack/table:docs/framework/react/guide/composable-tables.md`\n- `TanStack/table:docs/framework/react/guide/table-context.md`\n- `TanStack/table:examples/react/composable-tables`\n- `TanStack/table:packages/react-table/src/createTableHook.tsx`\n- `TanStack/table:packages/react-table/src/createTableHookContexts.tsx`\n","isInternal":false,"tokens":1136,"sizeBytes":5076},{"name":"with-tanstack-query.md","path":"packages/react-table/skills/getting-started/references/with-tanstack-query.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/react-table/skills/getting-started/references/with-tanstack-query.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# React Table with TanStack Query\n\nUse this reference when Query owns server data for a React table. Read [table state](../../table-state/SKILL.md) for reactive ownership. Run `intent load @tanstack/table-core#table-features` and read its client/server reference before choosing manual processing stages. Query fetches rows already processed by every server-owned stage; manual flags only bypass Table processing.\n\n## Setup\n\n```tsx\nimport { keepPreviousData, useQuery } from '@tanstack/react-query'\nimport { useCreateAtom, useSelector } from '@tanstack/react-store'\nimport {\n rowPaginationFeature,\n tableFeatures,\n useTable,\n} from '@tanstack/react-table'\nimport type { PaginationState } from '@tanstack/react-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst emptyRows: Array<{ id: string }> = []\n\nfunction ServerTable() {\n const paginationAtom = useCreateAtom({\n pageIndex: 0,\n pageSize: 20,\n })\n const pagination = useSelector(paginationAtom, (value) => value)\n const result = useQuery({\n queryKey: ['people', pagination],\n queryFn: async () =>\n fetch(\n `/api/people?page=${pagination.pageIndex}&size=${pagination.pageSize}`,\n ).then(\n (r) =>\n r.json() as Promise<{\n rows: Array<{ id: string }>\n rowCount: number\n }>,\n ),\n placeholderData: keepPreviousData,\n })\n return useTable({\n features,\n columns,\n data: result.data?.rows ?? emptyRows,\n rowCount: result.data?.rowCount,\n atoms: { pagination: paginationAtom },\n manualPagination: true,\n })\n}\n```\n\n## Core patterns\n\n### Put every server-owned slice in the key\n\n```tsx\nconst result = useQuery({\n queryKey: ['people', pagination, sorting, columnFilters],\n queryFn: () => fetchPeople({ pagination, sorting, columnFilters }),\n})\n```\n\n### Feed the query result directly to Table\n\n```tsx\nconst table = useTable({\n features,\n columns,\n data: result.data?.rows ?? emptyRows,\n})\n```\n\n## Common mistakes\n\n### HIGH Duplicating query rows into state\n\nWrong:\n\n```tsx\nuseEffect(() => setRows(result.data?.rows ?? []), [result.data])\nconst table = useTable({ features, columns, data: rows })\n```\n\nCorrect:\n\n```tsx\nconst table = useTable({\n features,\n columns,\n data: result.data?.rows ?? emptyRows,\n})\n```\n\nThe second state layer can lag behind the query cache and creates an extra synchronization path.\n\nSource: `examples/react/with-tanstack-query`\n\n### HIGH Omitting state from the query key\n\nWrong:\n\n```tsx\nuseQuery({ queryKey: ['people'], queryFn: () => fetchPeople({ pagination }) })\n```\n\nCorrect:\n\n```tsx\nuseQuery({\n queryKey: ['people', pagination],\n queryFn: () => fetchPeople({ pagination }),\n})\n```\n\nQuery otherwise reuses cache entries for different server requests.\n\nSource: `examples/react/with-tanstack-query`\n\n### HIGH Expecting manual mode to fetch\n\nWrong:\n\n```tsx\nuseTable({ features, columns, data, manualPagination: true })\n```\n\nCorrect:\n\n```tsx\nuseTable({\n features,\n columns,\n data: result.data?.rows ?? emptyRows,\n rowCount: result.data?.rowCount,\n manualPagination: true,\n})\n```\n\n`manualPagination` only bypasses client pagination; the application must fetch a processed page and provide its total count.\n\nSource: `docs/framework/react/guide/pagination.md`\n\n### Choose the loading transition\n\nTo show a loading transition for each page:\n\n```tsx\nuseQuery({\n queryKey: ['people', pagination],\n queryFn: () => fetchPeople({ pagination }),\n})\n```\n\nTo keep the previous page visible while fetching:\n\n```tsx\nuseQuery({\n queryKey: ['people', pagination],\n queryFn: () => fetchPeople({ pagination }),\n placeholderData: keepPreviousData,\n})\n```\n\nPreserve the previous page intentionally when an empty loading transition is undesirable.\n\nSource: `examples/react/with-tanstack-query`\n\n## API discovery\n\nInspect `node_modules/@tanstack/react-table/dist/index.d.ts` and the relevant installed core feature declarations; inspect the installed `@tanstack/react-query` declarations for current query option types.\n\n## Sources\n\n- `TanStack/table:examples/react/with-tanstack-query`\n- `TanStack/table:examples/react/virtualized-infinite-scrolling`\n- `TanStack/table:docs/framework/react/guide/pagination.md`\n","isInternal":false,"tokens":973,"sizeBytes":4224},{"name":"with-tanstack-virtual.md","path":"packages/react-table/skills/getting-started/references/with-tanstack-virtual.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/react-table/skills/getting-started/references/with-tanstack-virtual.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# React Table with TanStack Virtual\n\nUse this reference when virtualizing React table rows or columns. Virtual consumes the final Table model in the renderer; it is not a Table feature. For reactive model or subscription problems, read [table state](../../table-state/SKILL.md). Register `columnSizingFeature` before calling sizing APIs, and `columnVisibilityFeature` before visibility-aware APIs.\n\n## Setup\n\n```tsx\nimport { useRef } from 'react'\nimport { useVirtualizer } from '@tanstack/react-virtual'\n\nfunction VirtualBody({ table }: { table: any }) {\n const scrollRef = useRef(null)\n const rows = table.getRowModel().rows\n const virtualizer = useVirtualizer({\n count: rows.length,\n getScrollElement: () => scrollRef.current,\n estimateSize: () => 36,\n getItemKey: (index) => rows[index].id,\n overscan: 5,\n })\n return (\n
\n
\n {virtualizer.getVirtualItems().map((item) => (\n \n {rows[item.index].getAllCells().map((cell: any) => (\n \n \n \n ))}\n
\n ))}\n
\n
\n )\n}\n```\n\n## Core patterns\n\n### Keep the virtualizer near its render loop\n\n```tsx\nconst rows = table.getRowModel().rows\nconst rowVirtualizer = useVirtualizer({\n count: rows.length,\n getScrollElement: () => container.current,\n estimateSize: () => 36,\n})\n```\n\nThis limits unrelated parent updates and keeps count, measurement, and rendered items together.\n\n### Use Table sizes in renderer CSS\n\n```tsx\n\n \n\n```\n\nTable calculates size state; the renderer must apply it.\n\n## Common mistakes\n\n### HIGH Registering Virtual as a feature\n\nWrong:\n\n```tsx\nconst features = tableFeatures({ rowVirtualizer: useVirtualizer(options) })\n```\n\nCorrect:\n\n```tsx\nconst rows = table.getRowModel().rows\nconst virtualizer = useVirtualizer({\n count: rows.length,\n getScrollElement: () => scrollRef.current,\n estimateSize: () => 36,\n})\n```\n\nVirtual controls rendering geometry and is not a Table feature or row model.\n\nSource: `docs/framework/react/guide/virtualization.md`\n\n### HIGH Virtualizing raw input data\n\nWrong:\n\n```tsx\nconst virtualizer = useVirtualizer({\n count: data.length,\n getScrollElement,\n estimateSize,\n})\n```\n\nCorrect:\n\n```tsx\nconst rows = table.getRowModel().rows\nconst virtualizer = useVirtualizer({\n count: rows.length,\n getScrollElement,\n estimateSize,\n})\n```\n\nRaw data ignores filtering, sorting, expansion, grouping, and pagination already applied by Table.\n\nSource: `examples/react/virtualized-rows`\n\n### HIGH Measuring against incomplete identity\n\nWrong:\n\n```tsx\n{row.id}\n```\n\nCorrect:\n\n```tsx\n\n {row.id}\n\n```\n\nDynamic measurement needs the virtual index, and stable row identity prevents measurements moving to the wrong row.\n\nSource: `examples/react/virtualized-rows`\n\n### HIGH Omitting positioning geometry\n\nWrong:\n\n```tsx\n{virtualizer.getVirtualItems().map(renderRow)}\n```\n\nCorrect:\n\n```tsx\n\n {virtualizer.getVirtualItems().map(renderRow)}\n\n```\n\nVirtual only computes positions; the renderer must provide total spacer size and position items using each virtual start.\n\nSource: `examples/react/virtualized-rows`\n\n## API discovery\n\nInspect `node_modules/@tanstack/react-table/dist/index.d.ts` for Table render APIs and installed `node_modules/@tanstack/react-virtual/dist/` for the exact virtualizer options. Copy layout contracts from the maintained example matching rows, columns, or infinite loading.\n\n## Sources\n\n- `TanStack/table:docs/framework/react/guide/virtualization.md`\n- `TanStack/table:examples/react/virtualized-rows`\n- `TanStack/table:examples/react/virtualized-columns`\n- `TanStack/table:examples/react/virtualized-infinite-scrolling`\n","isInternal":false,"tokens":1069,"sizeBytes":4677},{"name":"SKILL.md","path":"packages/react-table/skills/getting-started/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/react-table/skills/getting-started/SKILL.md","title":"getting-started","category":"anthropic-skill","format":"markdown","content":"---\nname: getting-started\ndescription: Create and render Table v9 with the react adapter. Route reusable createTableHook components, Query and Virtual integration, and framework setup; use table-state for reactive ownership.\nmetadata:\n type: framework\n library: '@tanstack/react-table'\n library_version: '9.3.1'\n framework: react\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/react/guide/migrating.md\n - TanStack/table:examples/react/basic-use-table\n - TanStack/table:packages/react-table/src/index.ts\n - TanStack/table:docs/framework/react/guide/composable-tables.md\n - TanStack/table:docs/framework/react/guide/table-context.md\n - TanStack/table:examples/react/composable-tables\n - TanStack/table:packages/react-table/src/createTableHook.tsx\n - TanStack/table:packages/react-table/src/createTableHookContexts.tsx\n - TanStack/table:examples/react/with-tanstack-query\n - TanStack/table:examples/react/virtualized-infinite-scrolling\n - TanStack/table:docs/framework/react/guide/pagination.md\n - TanStack/table:docs/framework/react/guide/virtualization.md\n - TanStack/table:examples/react/virtualized-rows\n - TanStack/table:examples/react/virtualized-columns\n---\n\n# React Table setup and integration\n\nBefore starting, run `intent load @tanstack/table-core#core` for the shared headless model and stable-input rules.\n\n## Setup\n\n```tsx\nimport { useState } from 'react'\nimport {\n createColumnHelper,\n tableFeatures,\n useTable,\n} from '@tanstack/react-table'\n\ntype Person = { name: string; age: number }\nconst features = tableFeatures({})\nconst helper = createColumnHelper()\nconst columns = helper.columns([\n helper.accessor('name', { header: 'Name' }),\n helper.accessor('age', { header: 'Age' }),\n])\n\nexport function PeopleTable() {\n const [data] = useState([{ name: 'Ada', age: 36 }])\n const table = useTable({ features, columns, data })\n\n return (\n \n \n {table.getHeaderGroups().map((group) => (\n \n {group.headers.map((header) => (\n \n ))}\n \n ))}\n \n \n {table.getRowModel().rows.map((row) => (\n \n {row.getAllCells().map((cell) => (\n \n ))}\n \n ))}\n \n
\n {header.isPlaceholder ? null : (\n \n )}\n
\n \n
\n )\n}\n```\n\nTable produces models and state; React owns the semantic markup, styles, event affordances, and accessibility.\n\n## Essential constraints\n\nUse `useTable` for v9. Keep `features`, `columns`, and fallback data at module scope or in stable state/memos. A new `response.data ?? []` fallback invalidates row models on every render. The default selector subscribes the owner to all registered state.\n\nTable owns models and state. The application owns markup, CSS, interactions, and accessibility. Core-only tables use `row.getAllCells()`; visibility-aware methods need `columnVisibilityFeature`. Optional state and APIs require their features. Put row-model slots after their prerequisite features in `tableFeatures()`.\n\n## Load by task\n\n- For repeated features, defaults, typed contexts, or component registries, read [reusable app hooks](references/create-table-hook.md).\n- For Query-backed data, server pages, sorting, filtering, or request keys, read [TanStack Query integration](references/with-tanstack-query.md).\n- For virtual rows, columns, dynamic measurement, or infinite scrolling, read [TanStack Virtual integration](references/with-tanstack-virtual.md).\n- For controlled state, tracked reads, or render subscriptions, read [table state](../table-state/SKILL.md).\n- For feature registration, missing feature APIs, or processing ownership, run `intent load @tanstack/table-core#table-features` and read only references needed by the task.\n- For v8 code, read the [migration checklist](../migrate-v8-to-v9/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/react-table/dist/index.d.ts`, then the exported adapter declarations for the installed version. Inspect optional core APIs under `node_modules/@tanstack/table-core/dist/features/`.\n","frontmatter":{"name":"getting-started","description":"Create and render Table v9 with the react adapter. Route reusable createTableHook components, Query and Virtual integration, and framework setup; use table-state for reactive ownership.","metadata":{"type":"framework","library":"@tanstack/react-table","library_version":"9.3.1","framework":"react"},"requires":["@tanstack/table-core#core"],"sources":["TanStack/table:docs/framework/react/guide/migrating.md","TanStack/table:examples/react/basic-use-table","TanStack/table:packages/react-table/src/index.ts","TanStack/table:docs/framework/react/guide/composable-tables.md","TanStack/table:docs/framework/react/guide/table-context.md","TanStack/table:examples/react/composable-tables","TanStack/table:packages/react-table/src/createTableHook.tsx","TanStack/table:packages/react-table/src/createTableHookContexts.tsx","TanStack/table:examples/react/with-tanstack-query","TanStack/table:examples/react/virtualized-infinite-scrolling","TanStack/table:docs/framework/react/guide/pagination.md","TanStack/table:docs/framework/react/guide/virtualization.md","TanStack/table:examples/react/virtualized-rows","TanStack/table:examples/react/virtualized-columns"]},"isInternal":false,"tokens":1011,"sizeBytes":4407},{"name":"adapter-migration.md","path":"packages/react-table/skills/migrate-v8-to-v9/references/adapter-migration.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/react-table/skills/migrate-v8-to-v9/references/adapter-migration.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# React adapter migration details\n\nRead when replacing React table construction, reactive state, rendering, or reusable app hooks. First complete the shared checklist from `intent load @tanstack/table-core#migrate-v8-to-v9`; its references own shared feature, method, and TypeScript mappings.\n\n## Replace `useReactTable` with `useTable`\n\n```tsx\nimport {\n columnFilteringFeature,\n createFilteredRowModel,\n createSortedRowModel,\n filterFn_includesString,\n rowSortingFeature,\n sortFn_alphanumeric,\n tableFeatures,\n useTable,\n} from '@tanstack/react-table'\n\nconst features = tableFeatures({\n columnFilteringFeature,\n rowSortingFeature,\n filteredRowModel: createFilteredRowModel(),\n sortedRowModel: createSortedRowModel(),\n filterFns: { includesString: filterFn_includesString },\n sortFns: { alphanumeric: sortFn_alphanumeric },\n})\n\nconst table = useTable({ features, columns, data })\n```\n\nPrefer explicit features as the end state. `stockFeatures` is a useful kitchen-sink migration shortcut, but bundles every stock feature. Do not target `useLegacyTable`: it is deprecated, React-only, exported from `@tanstack/react-table/legacy`, and intended only to keep an existing migration moving temporarily.\n\n## State and reactive reads\n\n| v8 | v9 |\n| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `table.getState()` | `table.state`, `table.store.state`, or `table.atoms..get()` |\n| Top-level `onStateChange` | Per-slice `onSortingChange`, `onPaginationChange`, etc., or `table.store.subscribe()` for all changes |\n| Broad component updates | Default `useTable` selector still subscribes to all registered state; narrow with a selector, `table.Subscribe`, or `useSelector(table.atoms.)` |\n| Framework state only | Optional writable atoms through `options.atoms` |\n\nControlled `state` plus per-slice callbacks remains valid:\n\n```tsx\nconst [sorting, setSorting] = useState([])\nconst table = useTable({\n features,\n columns,\n data,\n state: { sorting },\n onSortingChange: setSorting,\n})\n```\n\nFor fine-grained rendering, pass a selector as the second `useTable` argument or select closer to the consumer:\n\n```tsx\nconst table = useTable(options, () => null)\n\n state.pagination}>\n {pagination => Page {pagination.pageIndex + 1}}\n\n```\n\nExternal atoms override the same slice in `state`; table setters write directly to them, and `table.reset()` does not reset them. Do not supply an atom, controlled value, and callback for the same slice without intentionally applying that precedence.\n\nFor React Compiler memoized children hiding builder reads, put `Subscribe` inside the child or pass its selected value as a changing prop. Read [React state](../../table-state/SKILL.md) before adding such a boundary.\n\n## Rendering and composition\n\n- `flexRender(def, context)` still works. Prefer ``, ``, or the standalone `` for the v9 component form.\n- Use `tableOptions()` to type reusable partial option objects.\n- Use `createTableHook()` only when several tables share features, row models, defaults, and registered components. It returns app-specific helpers such as `useAppTable`, `createAppColumnHelper`, and table/cell/header context hooks; it is not required for one-off tables.\n\nFor detailed controlled wiring or tracking failures, read [table state](../../table-state/SKILL.md). For reusable contexts or components, read [app-hook composition](../../getting-started/references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/react-table/dist/index.d.ts` and its exported declarations for construction, rendering, and app hooks. Inspect `dist/legacy.d.ts` only to identify deprecated bridge code that still needs removal.\n\n## Sources\n\n- `TanStack/table:docs/framework/react/guide/migrating.md`\n- `TanStack/table:packages/react-table/src/index.ts`\n- `TanStack/table:packages/react-table/src/legacy.ts`\n- `TanStack/table:examples/react/basic-use-table`\n","isInternal":false,"tokens":925,"sizeBytes":4615},{"name":"SKILL.md","path":"packages/react-table/skills/migrate-v8-to-v9/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/react-table/skills/migrate-v8-to-v9/SKILL.md","title":"migrate-v8-to-v9","category":"anthropic-skill","format":"markdown","content":"---\nname: migrate-v8-to-v9\ndescription: Migrate react Table v8 to v9. Audit framework construction, rendering, state, and app hooks, with shared API changes in the core migration skill.\nmetadata:\n type: lifecycle\n library: '@tanstack/react-table'\n library_version: '9.3.1'\n framework: react\nrequires:\n - '@tanstack/table-core#migrate-v8-to-v9'\nsources:\n - TanStack/table:docs/framework/react/guide/migrating.md\n - TanStack/table:packages/react-table/src/index.ts\n - TanStack/table:packages/react-table/src/legacy.ts\n - TanStack/table:examples/react/basic-use-table\n---\n\n# React v8-to-v9 migration checklist\n\nBefore starting, run `intent load @tanstack/table-core#migrate-v8-to-v9`. Audit its entire shared checklist and read the detailed core mappings for APIs present in the application. This checklist adds the React-specific changes.\n\nFramework prerequisite: React 18 or newer (`react >=18`).\n\n## Adapter audit\n\n- [ ] Replace `useReactTable` with `useTable`; remove any temporary `useLegacyTable` from `@tanstack/react-table/legacy`.\n- [ ] Keep model inputs stable and use explicit `tableFeatures` plus its row-model slots. Audit every shared change through the core checklist.\n- [ ] Replace render reads with selected `table.state`, `table.Subscribe`, or `useSelector`. Atom/store snapshots alone do not subscribe React.\n- [ ] Pair each controlled `state` slice with its updater callback, or supply a stable React Store atom. Remove the global `onStateChange` option.\n- [ ] Check compiler-memoized children hiding builder-method reads; subscribe inside the child or pass the selected value to it.\n- [ ] Use `table.FlexRender` or standalone `FlexRender` where appropriate; `flexRender` remains supported.\n- [ ] Introduce `tableOptions` or `createTableHook` only for repeated conventions; preserve app wrapper and typed-context boundaries.\n\n## Load the affected details\n\nWhen the audit finds old React construction, state, rendering, or app-hook code, read [adapter migration details](references/adapter-migration.md) before editing it. For a replacement render scaffold, read [getting started](../getting-started/SKILL.md). For controlled or stale state after migration, read [table state](../table-state/SKILL.md).\n\nShared pinning, sizing, sorting, selection, prototype-method, type, and registry changes stay in the core migration references. Renaming `useReactTable` alone does not complete the migration.\n\n## Verify the migration\n\n- [ ] Type-check against the installed v9 adapter and exercise every enabled client/manual feature flow.\n- [ ] Verify external state writes, reactive data replacement, and the framework rendering paths changed above.\n- [ ] Complete the core checklist, including layout and selection behavior when those features are used.\n- [ ] Replace temporary `stockFeatures` when the target is explicit feature tree-shaking and remove `useLegacyTable`.\n\n## API discovery\n\nInspect `node_modules/@tanstack/react-table/dist/index.d.ts` and the exported adapter declarations. Use `node_modules/@tanstack/table-core/dist/index.d.ts` for shared APIs.\n","frontmatter":{"name":"migrate-v8-to-v9","description":"Migrate react Table v8 to v9. Audit framework construction, rendering, state, and app hooks, with shared API changes in the core migration skill.","metadata":{"type":"lifecycle","library":"@tanstack/react-table","library_version":"9.3.1","framework":"react"},"requires":["@tanstack/table-core#migrate-v8-to-v9"],"sources":["TanStack/table:docs/framework/react/guide/migrating.md","TanStack/table:packages/react-table/src/index.ts","TanStack/table:packages/react-table/src/legacy.ts","TanStack/table:examples/react/basic-use-table"]},"isInternal":false,"tokens":682,"sizeBytes":3079},{"name":"reactivity.md","path":"packages/react-table/skills/table-state/references/reactivity.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/react-table/skills/table-state/references/reactivity.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# React table reactive boundaries\n\nRead when optimizing subscriptions, composing external atoms, or debugging React-specific tracking and controlled updates. Shared ownership, initialization, and reset rules remain in `intent load @tanstack/table-core#table-state`.\n\n## Example context\n\n```tsx\nimport {\n rowSelectionFeature,\n tableFeatures,\n useTable,\n} from '@tanstack/react-table'\n\nconst features = tableFeatures({ rowSelectionFeature })\n\nexport function SelectionCount({\n data,\n columns,\n}: {\n data: Array<{ id: string }>\n columns: any[]\n}) {\n const table = useTable({ features, data, columns }, (state) => ({\n rowSelection: state.rowSelection,\n }))\n return {Object.keys(table.state.rowSelection).length}\n}\n```\n\nThe optional selector controls which state changes rerender the component and which selected fields appear on `table.state`. Omitting it selects all registered slices.\n\n## State patterns\n\n### Subscribe at the expensive boundary\n\n```tsx\nfunction SelectedRows({\n table,\n}: {\n table: ReturnType>\n}) {\n return (\n state.rowSelection}>\n {(rowSelection) => {Object.keys(rowSelection).length}}\n \n )\n}\n```\n\nAt a top-level component holding the adapter's table instance, `table.Subscribe` selects from `table.store`. Use this after measuring or when the React Compiler cannot see state reads hidden behind table builder methods.\n\n### Control a slice with an external atom\n\n```tsx\nimport { useCreateAtom } from '@tanstack/react-store'\n\nconst selection = useCreateAtom>({})\nconst table = useTable({\n features,\n columns,\n data,\n atoms: { rowSelection: selection },\n})\n```\n\nAn external atom is both ownership and subscription source; it avoids value-or-updater glue.\n\n### Control a slice with React state\n\n```tsx\nconst [rowSelection, setRowSelection] = useState>({})\nconst table = useTable({\n features,\n columns,\n data,\n state: { rowSelection },\n onRowSelectionChange: setRowSelection,\n})\n```\n\n## Common mistakes\n\n### HIGH Treating a snapshot as subscription\n\nWrong:\n\n```tsx\nconst count = Object.keys(table.atoms.rowSelection.get()).length\n```\n\nCorrect:\n\n```tsx\nconst count = Object.keys(table.state.rowSelection).length\n```\n\n`atoms.*.get()` and `table.store.state` return current values but do not subscribe a React render.\n\nSource: `packages/react-table/src/useTable.ts`\n\n### HIGH Supplying only the change callback\n\nWrong:\n\n```tsx\nconst table = useTable({\n features,\n columns,\n data,\n onRowSelectionChange: setRowSelection,\n})\n```\n\nCorrect:\n\n```tsx\nconst table = useTable({\n features,\n columns,\n data,\n state: { rowSelection },\n onRowSelectionChange: setRowSelection,\n})\n```\n\nOnce a callback takes ownership, the corresponding controlled value must be written back.\n\nSource: `docs/framework/react/guide/table-state.md`\n\n### HIGH Hiding builder reads from the React Compiler\n\nWrong:\n\n```tsx\nfunction SelectionCell({ row }) {\n return (\n \n )\n}\n```\n\nCorrect:\n\n```tsx\nimport { Subscribe } from '@tanstack/react-table'\n\nfunction SelectionCell({ row }) {\n return (\n selection[row.id]}\n >\n {(selected) => (\n \n )}\n \n )\n}\n```\n\nWith the default selector, `useTable` returns a fresh React-facing table reference on state changes. The remaining hazard is a nested component receiving only a stable core table, row, cell, column, or header object and hiding a state read behind one of its methods. Keep `Subscribe` inside that component, or pass its selected value to the child as a changing prop. An outer `Subscribe` that ignores the selected value is not enough.\n\nInside cell and header render contexts, `table` is typed as core `Table`, so import standalone `Subscribe`. Use `source={table.store}` with a selector for multiple slices, or a specific atom for the narrowest boundary.\n\nSource: `docs/framework/react/guide/react-compiler.md`\n\n### Choose boundaries after measuring\n\nAn extra subscription boundary:\n\n```tsx\n\n {() => }\n\n```\n\nWith the default owner subscription, start with:\n\n```tsx\n\n```\n\nDefault `useTable` state selection is the simpler starting point; introduce fine-grained boundaries where measurement or compiler behavior justifies them.\n\nSource: `docs/framework/react/guide/table-state.md`\n\n## API discovery\n\nInspect `node_modules/@tanstack/react-table/dist/useTable.d.ts` and `Subscribe.d.ts`. Core atom precedence and state slices live under `node_modules/@tanstack/table-core/dist/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/react/guide/table-state.md`\n- `TanStack/table:docs/framework/react/guide/react-compiler.md`\n- `TanStack/table:examples/react/basic-subscribe`\n- `TanStack/table:packages/react-table/src/Subscribe.ts`\n- `TanStack/table:packages/react-table/src/useTable.ts`\n","isInternal":false,"tokens":1182,"sizeBytes":5317},{"name":"SKILL.md","path":"packages/react-table/skills/table-state/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/react-table/skills/table-state/SKILL.md","title":"table-state","category":"anthropic-skill","format":"markdown","content":"---\nname: table-state\ndescription: Read and control Table v9 state in react. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/react-table'\n library_version: '9.3.1'\n framework: react\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/react/guide/table-state.md\n - TanStack/table:docs/framework/react/guide/react-compiler.md\n - TanStack/table:examples/react/basic-subscribe\n - TanStack/table:packages/react-table/src/Subscribe.ts\n - TanStack/table:packages/react-table/src/useTable.ts\n---\n\n# React table state\n\nBefore starting, run `intent load @tanstack/table-core#table-state` for shared ownership, initialization, updates, and resets. State repair does not require loading setup guidance.\n\n## Read reactive state\n\n`useTable` selects all registered state by default. Its optional second-argument selector controls rerenders and the shape of `table.state`. `table.atoms..get()` and `table.store.state` are current snapshots, not React subscriptions.\n\nUse selected `table.state` in the owner render. For narrower boundaries, use `table.Subscribe` or `useSelector` from `@tanstack/react-store`. Without `source`, `table.Subscribe` selects from `table.store`; with `source`, it subscribes to that atom or store. Start with the default selector until render cost requires narrowing.\n\n## Control a slice\n\nKeep features, columns, and data stable. Register the feature that owns the controlled slice. This example controls pagination without adding client row processing:\n\n```tsx\nimport { useState } from 'react'\nimport {\n rowPaginationFeature,\n tableFeatures,\n useTable,\n type PaginationState,\n} from '@tanstack/react-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nexport function PageControl() {\n const [pagination, setPagination] = useState({\n pageIndex: 0,\n pageSize: 20,\n })\n const table = useTable({\n features,\n columns,\n data,\n state: { pagination },\n onPaginationChange: setPagination,\n })\n return (\n \n )\n}\n```\n\nThe React setter accepts both a value and a functional updater. Supply the current `state.pagination` together with `onPaginationChange`; a callback alone does not keep the table synchronized.\n\nFor an externally owned atom, create it with `useCreateAtom` from `@tanstack/react-store`, pass it in `atoms.`, and subscribe with `useSelector` where other UI needs its value.\n\n## Reactive boundaries\n\nFor React Compiler memoized children, put `Subscribe` inside the component hiding builder-method reads or pass the selected value as a changing prop. An outer subscription that ignores its value cannot refresh a stable child. In core-typed cell/header contexts, import standalone `Subscribe`.\n\nFor external-atom examples, selector dependencies, or fine-grained boundaries and React Compiler problems, read [reactivity details](references/reactivity.md). If this task changes processing features, run `intent load @tanstack/table-core#table-features` and read the relevant feature references.\n\n## API discovery\n\nInspect `node_modules/@tanstack/react-table/dist/useTable.d.ts` and `Subscribe.d.ts`, plus the installed `@tanstack/react-store` declarations for atom hooks.\n","frontmatter":{"name":"table-state","description":"Read and control Table v9 state in react. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.","metadata":{"type":"framework","library":"@tanstack/react-table","library_version":"9.3.1","framework":"react"},"requires":["@tanstack/table-core#table-state"],"sources":["TanStack/table:docs/framework/react/guide/table-state.md","TanStack/table:docs/framework/react/guide/react-compiler.md","TanStack/table:examples/react/basic-subscribe","TanStack/table:packages/react-table/src/Subscribe.ts","TanStack/table:packages/react-table/src/useTable.ts"]},"isInternal":false,"tokens":763,"sizeBytes":3498},{"name":"SKILL.md","path":"packages/solid-table-devtools/skills/devtools/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/solid-table-devtools/skills/devtools/SKILL.md","title":"devtools","category":"anthropic-skill","format":"markdown","content":"---\nname: devtools\ndescription: >\n Connect Solid Table v9 instances to Devtools with tableDevtoolsPlugin and useTanStackTableDevtools in the proper reactive owner. Load for missing targets, required options.key, enabled state, cleanup, or development versus explicit production exports.\nmetadata:\n type: framework\n library: '@tanstack/solid-table-devtools'\n framework: solid\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\n - '@tanstack/table-devtools#devtools'\nsources:\n - 'TanStack/table:docs/devtools.md'\n - 'TanStack/table:packages/solid-table-devtools/src/index.ts'\n - 'TanStack/table:packages/solid-table-devtools/src/useTanStackTableDevtools.ts'\n---\n\nThis skill builds on @tanstack/table-core#core and @tanstack/table-devtools#devtools.\n\n## Setup\n\n```tsx\nimport { TanStackDevtools } from '@tanstack/solid-devtools'\nimport { createTable, tableFeatures } from '@tanstack/solid-table'\nimport {\n tableDevtoolsPlugin,\n useTanStackTableDevtools,\n} from '@tanstack/solid-table-devtools'\n\nconst features = tableFeatures({})\n\nexport function App() {\n const table = createTable({\n key: 'users-table',\n features,\n columns: [],\n data: [],\n })\n useTanStackTableDevtools(table)\n return \n}\n```\n\n## Hooks and Components\n\nRegister inside the component's Solid owner. Pass `{ enabled }` to the hook for conditional registration.\n\n## Common Mistakes\n\n### HIGH Registration created outside an owner\n\nWrong: call the Solid registration hook at module scope.\n\nCorrect: call it in the component that owns the table.\n\nThe hook uses Solid reactive cleanup to unregister the target.\n\nSource: TanStack/table:packages/solid-table-devtools/src/useTanStackTableDevtools.ts\n\n### HIGH Missing or reused table key\n\nWrong: omit `options.key` or share one key between mounted tables.\n\nCorrect: assign a stable unique key per live table.\n\nThe target registry skips missing keys and replaces duplicate identities.\n\nSource: TanStack/table:packages/table-devtools/src/tableTarget.ts\n\n### MEDIUM Production entrypoint assumed active\n\nWrong: expect normal Devtools exports to inspect a production table.\n\nCorrect: keep default guidance development-only; use `/production` only on explicit request.\n\nThe package index selects no-op implementations outside development.\n\nSource: TanStack/table:packages/solid-table-devtools/src/index.ts\n\n## API Discovery\n\nInspect `node_modules/@tanstack/solid-table-devtools/dist/index.d.ts`, `useTanStackTableDevtools.d.ts`, and `production.d.ts`.\n","frontmatter":{"name":"devtools","description":"Connect Solid Table v9 instances to Devtools with tableDevtoolsPlugin and useTanStackTableDevtools in the proper reactive owner. Load for missing targets, required options.key, enabled state, cleanup, or development versus explicit production exports.\n","metadata":{"type":"framework","library":"@tanstack/solid-table-devtools","framework":"solid","library_version":"9.3.1"},"requires":["@tanstack/table-core#core","@tanstack/table-devtools#devtools"],"sources":["TanStack/table:docs/devtools.md","TanStack/table:packages/solid-table-devtools/src/index.ts","TanStack/table:packages/solid-table-devtools/src/useTanStackTableDevtools.ts"]},"isInternal":false,"tokens":580,"sizeBytes":2548},{"name":"create-table-hook.md","path":"packages/solid-table/skills/getting-started/references/create-table-hook.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/solid-table/skills/getting-started/references/create-table-hook.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Reusable Solid table hooks\n\nUse this reference when multiple Solid tables share features, defaults, or registered components. Keep one-off tables on `createTable`. For controlled state or subscription changes, read [table state](../../table-state/SKILL.md).\n\n## Setup\n\n```tsx\nimport {\n createTableHook,\n rowSelectionFeature,\n tableFeatures,\n} from '@tanstack/solid-table'\n\nexport const { createAppColumnHelper, createAppTable, useTableContext } =\n createTableHook({\n features: tableFeatures({ rowSelectionFeature }),\n getRowId: (row: { id: string }) => row.id,\n })\n```\n\n## Core patterns\n\n### Infer columns with the bound helper\n\n```tsx\ntype Person = { id: string; name: string }\nconst helper = createAppColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n```\n\n### Preserve per-table reactivity\n\n```tsx\nconst table = createAppTable({\n columns,\n get data() {\n return data()\n },\n})\nreturn {() => }\n```\n\n## Common mistakes\n\n### Choose a factory for repeated conventions\n\nA factory for shared conventions:\n\n```tsx\nconst app = createTableHook({ features: tableFeatures({}) })\n```\n\nStandalone construction for a one-off table:\n\n```tsx\nconst table = createTable({ features, columns, data })\n```\n\nThe factory should encode repeated app conventions rather than add ceremony.\n\nSource: `docs/framework/solid/guide/composable-tables.md`\n\n### HIGH Passing per-table snapshots\n\nWrong:\n\n```tsx\ncreateAppTable({ columns, data: data() })\n```\n\nCorrect:\n\n```tsx\ncreateAppTable({\n columns,\n get data() {\n return data()\n },\n})\n```\n\nThe getter preserves Solid tracking when the signal changes.\n\nSource: `examples/solid/composable-tables`\n\n### HIGH Reading context outside wrappers\n\nWrong:\n\n```tsx\nreturn \n```\n\nCorrect:\n\n```tsx\nreturn {() => }\n```\n\nReturned context hooks must run under the matching factory wrapper; use them instead of prop drilling registered components.\n\nSource: `packages/solid-table/src/createTableHook.tsx`\n\n## API discovery\n\nInspect `node_modules/@tanstack/solid-table/dist/createTableHook.d.ts` for exact returned names, component binding, context providers, and reactive option merging.\n\n## Sources\n\n- `TanStack/table:docs/framework/solid/guide/composable-tables.md`\n- `TanStack/table:examples/solid/composable-tables`\n- `TanStack/table:packages/solid-table/src/createTableHook.tsx`\n","isInternal":false,"tokens":570,"sizeBytes":2461},{"name":"with-tanstack-query.md","path":"packages/solid-table/skills/getting-started/references/with-tanstack-query.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/solid-table/skills/getting-started/references/with-tanstack-query.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":759,"sizeBytes":3250},{"name":"with-tanstack-virtual.md","path":"packages/solid-table/skills/getting-started/references/with-tanstack-virtual.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/solid-table/skills/getting-started/references/with-tanstack-virtual.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":879,"sizeBytes":3623},{"name":"SKILL.md","path":"packages/solid-table/skills/getting-started/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/solid-table/skills/getting-started/SKILL.md","title":"getting-started","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"name":"getting-started","description":"Create and render Table v9 with the solid adapter. Route reusable createTableHook components, Query and Virtual integration, and framework setup; use table-state for reactive ownership.","metadata":{"type":"framework","library":"@tanstack/solid-table","library_version":"9.3.1","framework":"solid"},"requires":["@tanstack/table-core#core"],"sources":["TanStack/table:docs/framework/solid/guide/migrating.md","TanStack/table:examples/solid/basic-use-table","TanStack/table:packages/solid-table/src/index.tsx","TanStack/table:docs/framework/solid/guide/composable-tables.md","TanStack/table:examples/solid/composable-tables","TanStack/table:packages/solid-table/src/createTableHook.tsx","TanStack/table:examples/solid/with-tanstack-query","TanStack/table:docs/framework/solid/guide/pagination.md","TanStack/table:docs/framework/solid/guide/virtualization.md","TanStack/table:examples/solid/virtualized-rows","TanStack/table:examples/solid/virtualized-columns","TanStack/table:examples/solid/virtualized-infinite-scrolling"]},"isInternal":false,"tokens":960,"sizeBytes":4194},{"name":"adapter-migration.md","path":"packages/solid-table/skills/migrate-v8-to-v9/references/adapter-migration.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/solid-table/skills/migrate-v8-to-v9/references/adapter-migration.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":672,"sizeBytes":3132},{"name":"SKILL.md","path":"packages/solid-table/skills/migrate-v8-to-v9/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/solid-table/skills/migrate-v8-to-v9/SKILL.md","title":"migrate-v8-to-v9","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"name":"migrate-v8-to-v9","description":"Migrate solid Table v8 to v9. Audit framework construction, rendering, state, and app hooks, with shared API changes in the core migration skill.","metadata":{"type":"lifecycle","library":"@tanstack/solid-table","library_version":"9.3.1","framework":"solid"},"requires":["@tanstack/table-core#migrate-v8-to-v9"],"sources":["TanStack/table:docs/framework/solid/guide/migrating.md","TanStack/table:packages/solid-table/src/index.tsx","TanStack/table:examples/solid/basic-use-table"]},"isInternal":false,"tokens":642,"sizeBytes":2897},{"name":"reactivity.md","path":"packages/solid-table/skills/table-state/references/reactivity.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/solid-table/skills/table-state/references/reactivity.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":629,"sizeBytes":2703},{"name":"SKILL.md","path":"packages/solid-table/skills/table-state/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/solid-table/skills/table-state/SKILL.md","title":"table-state","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"name":"table-state","description":"Read and control Table v9 state in solid. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.","metadata":{"type":"framework","library":"@tanstack/solid-table","library_version":"9.3.1","framework":"solid"},"requires":["@tanstack/table-core#table-state"],"sources":["TanStack/table:docs/framework/solid/guide/table-state.md","TanStack/table:examples/solid/basic-external-state","TanStack/table:packages/solid-table/src/createTable.ts"]},"isInternal":false,"tokens":668,"sizeBytes":2959},{"name":"create-table-hook.md","path":"packages/svelte-table/skills/getting-started/references/create-table-hook.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/svelte-table/skills/getting-started/references/create-table-hook.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":862,"sizeBytes":3755},{"name":"with-tanstack-query.md","path":"packages/svelte-table/skills/getting-started/references/with-tanstack-query.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/svelte-table/skills/getting-started/references/with-tanstack-query.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":837,"sizeBytes":3597},{"name":"with-tanstack-virtual.md","path":"packages/svelte-table/skills/getting-started/references/with-tanstack-virtual.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/svelte-table/skills/getting-started/references/with-tanstack-virtual.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":991,"sizeBytes":4181},{"name":"SKILL.md","path":"packages/svelte-table/skills/getting-started/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/svelte-table/skills/getting-started/SKILL.md","title":"getting-started","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"name":"getting-started","description":"Create and render Table v9 with the svelte adapter. Route reusable createTableHook components, Query and Virtual integration, and framework setup; use table-state for reactive ownership.","metadata":{"type":"framework","library":"@tanstack/svelte-table","framework":"svelte","library_version":"9.3.1"},"requires":["@tanstack/table-core#core"],"sources":["TanStack/table:docs/framework/svelte/guide/migrating.md","TanStack/table:examples/svelte/basic-create-table","TanStack/table:packages/svelte-table/src/index.ts","TanStack/table:docs/framework/svelte/guide/composable-tables.md","TanStack/table:examples/svelte/composable-tables","TanStack/table:packages/svelte-table/src/createTableHook.svelte.ts","TanStack/table:examples/svelte/with-tanstack-query","TanStack/table:docs/framework/svelte/guide/pagination.md","TanStack/table:docs/framework/svelte/guide/virtualization.md","TanStack/table:examples/svelte/virtualized-rows","TanStack/table:examples/svelte/virtualized-columns","TanStack/table:examples/svelte/virtualized-infinite-scrolling"]},"isInternal":false,"tokens":964,"sizeBytes":3991},{"name":"adapter-migration.md","path":"packages/svelte-table/skills/migrate-v8-to-v9/references/adapter-migration.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/svelte-table/skills/migrate-v8-to-v9/references/adapter-migration.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":747,"sizeBytes":3706},{"name":"SKILL.md","path":"packages/svelte-table/skills/migrate-v8-to-v9/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/svelte-table/skills/migrate-v8-to-v9/SKILL.md","title":"migrate-v8-to-v9","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"name":"migrate-v8-to-v9","description":"Migrate svelte Table v8 to v9. Audit framework construction, rendering, state, and app hooks, with shared API changes in the core migration skill.","metadata":{"type":"lifecycle","library":"@tanstack/svelte-table","framework":"svelte","library_version":"9.3.1"},"requires":["@tanstack/table-core#migrate-v8-to-v9"],"sources":["TanStack/table:docs/framework/svelte/guide/migrating.md","TanStack/table:packages/svelte-table/src/index.ts","TanStack/table:examples/svelte/basic-create-table"]},"isInternal":false,"tokens":677,"sizeBytes":2997},{"name":"reactivity.md","path":"packages/svelte-table/skills/table-state/references/reactivity.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/svelte-table/skills/table-state/references/reactivity.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":1288,"sizeBytes":5625},{"name":"SKILL.md","path":"packages/svelte-table/skills/table-state/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/svelte-table/skills/table-state/SKILL.md","title":"table-state","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"name":"table-state","description":"Read and control Table v9 state in svelte. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.","metadata":{"type":"framework","library":"@tanstack/svelte-table","framework":"svelte","library_version":"9.3.1"},"requires":["@tanstack/table-core#table-state"],"sources":["TanStack/table:docs/framework/svelte/guide/table-state.md","TanStack/table:docs/framework/svelte/guide/pagination.md","TanStack/table:examples/svelte/basic-external-state","TanStack/table:packages/svelte-table/src/createTable.svelte.ts","TanStack/table:packages/svelte-table/src/createTableState.svelte.ts"]},"isInternal":false,"tokens":706,"sizeBytes":3038},{"name":"api-not-found.md","path":"packages/table-core/skills/core/references/api-not-found.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/core/references/api-not-found.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":643,"sizeBytes":2794},{"name":"rows.md","path":"packages/table-core/skills/core/references/rows.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/core/references/rows.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":499,"sizeBytes":2279},{"name":"typescript.md","path":"packages/table-core/skills/core/references/typescript.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/core/references/typescript.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":612,"sizeBytes":2559},{"name":"SKILL.md","path":"packages/table-core/skills/core/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/core/SKILL.md","title":"core","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"name":"core","description":"Use TanStack Table v9 core architecture, stable data and columns, and inferred types. Route setup, missing APIs, row models, state, features, and framework-specific work.","metadata":{"type":"core","library":"@tanstack/table-core","library_version":"9.3.1"},"sources":["TanStack/table:docs/overview.md","TanStack/table:docs/guide/tables.md","TanStack/table:docs/guide/data.md","TanStack/table:packages/table-core/src/index.ts","TanStack/table:docs/guide/helpers.md","TanStack/table:docs/guide/column-defs.md","TanStack/table:docs/guide/table-and-column-meta.md","TanStack/table:packages/table-core/src/helpers","TanStack/table:packages/table-core/src/types/TableFeatures.ts","TanStack/table:docs/framework/react/guide/migrating.md","TanStack/table:docs/guide/rows.md","TanStack/table:packages/table-core/src/core/rows/coreRowsFeature.utils.ts"]},"isInternal":false,"tokens":999,"sizeBytes":4878},{"name":"plugin-example.md","path":"packages/table-core/skills/custom-features/references/plugin-example.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/custom-features/references/plugin-example.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":1891,"sizeBytes":8432},{"name":"SKILL.md","path":"packages/table-core/skills/custom-features/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/custom-features/SKILL.md","title":"custom-features","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"name":"custom-features","description":"Implement a Table v9 plugin when built-ins and typed meta are insufficient. Covers FeatureMaps, runtime lifecycle hooks, prototypes, and a complete checked example.","metadata":{"type":"core","library":"@tanstack/table-core","library_version":"9.3.1"},"requires":["core","table-features"],"sources":["TanStack/table:docs/framework/react/guide/custom-features.md","TanStack/table:packages/table-core/src/types","TanStack/table:packages/table-core/src/types/TableFeatures.ts","TanStack/table:packages/table-core/src/utils.ts","TanStack/table:packages/table-core/src/features","TanStack/table:examples/react/custom-plugin"]},"isInternal":false,"tokens":721,"sizeBytes":3532},{"name":"architecture.md","path":"packages/table-core/skills/migrate-v8-to-v9/references/architecture.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/migrate-v8-to-v9/references/architecture.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":1730,"sizeBytes":8139},{"name":"feature-apis.md","path":"packages/table-core/skills/migrate-v8-to-v9/references/feature-apis.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/migrate-v8-to-v9/references/feature-apis.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":1489,"sizeBytes":7008},{"name":"state.md","path":"packages/table-core/skills/migrate-v8-to-v9/references/state.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/migrate-v8-to-v9/references/state.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":607,"sizeBytes":2926},{"name":"typescript.md","path":"packages/table-core/skills/migrate-v8-to-v9/references/typescript.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/migrate-v8-to-v9/references/typescript.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":666,"sizeBytes":2931},{"name":"SKILL.md","path":"packages/table-core/skills/migrate-v8-to-v9/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/migrate-v8-to-v9/SKILL.md","title":"migrate-v8-to-v9","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"name":"migrate-v8-to-v9","description":"Audit and migrate Table v8 to v9. Inventory affected APIs, follow the shared checklist, and read only the required architecture, state, feature, and TypeScript mappings.","metadata":{"type":"lifecycle","library":"@tanstack/table-core","library_version":"9.3.1"},"requires":["core"],"sources":["TanStack/table:docs/framework/react/guide/migrating.md","TanStack/table:docs/framework/preact/guide/migrating.md","TanStack/table:docs/framework/solid/guide/migrating.md","TanStack/table:docs/framework/svelte/guide/migrating.md","TanStack/table:docs/framework/vue/guide/migrating.md","TanStack/table:docs/framework/angular/guide/migrating.md","TanStack/table:docs/framework/lit/guide/migrating.md","TanStack/table:packages/table-core/src/index.ts","TanStack/table:packages/table-core/src/types/TableFeatures.ts","TanStack/table:packages/table-core/src/features/column-pinning/columnPinningFeature.types.ts","TanStack/table:packages/table-core/src/features/column-resizing/columnResizingFeature.types.ts","TanStack/table:packages/react-table/src/legacy.ts"]},"isInternal":false,"tokens":1547,"sizeBytes":7323},{"name":"aggregation.md","path":"packages/table-core/skills/table-features/references/aggregation.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/table-features/references/aggregation.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":972,"sizeBytes":4202},{"name":"cell-selection.md","path":"packages/table-core/skills/table-features/references/cell-selection.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/table-features/references/cell-selection.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":2024,"sizeBytes":9581},{"name":"cell-spanning.md","path":"packages/table-core/skills/table-features/references/cell-spanning.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/table-features/references/cell-spanning.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":1273,"sizeBytes":5386},{"name":"client-vs-server.md","path":"packages/table-core/skills/table-features/references/client-vs-server.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/table-features/references/client-vs-server.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":927,"sizeBytes":4088},{"name":"column-faceting.md","path":"packages/table-core/skills/table-features/references/column-faceting.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/table-features/references/column-faceting.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":637,"sizeBytes":2876},{"name":"column-filtering.md","path":"packages/table-core/skills/table-features/references/column-filtering.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/table-features/references/column-filtering.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":597,"sizeBytes":2718},{"name":"column-ordering.md","path":"packages/table-core/skills/table-features/references/column-ordering.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/table-features/references/column-ordering.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":450,"sizeBytes":2002},{"name":"column-pinning.md","path":"packages/table-core/skills/table-features/references/column-pinning.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/table-features/references/column-pinning.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":544,"sizeBytes":2242},{"name":"column-resizing.md","path":"packages/table-core/skills/table-features/references/column-resizing.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/table-features/references/column-resizing.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":522,"sizeBytes":2390},{"name":"column-sizing.md","path":"packages/table-core/skills/table-features/references/column-sizing.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/table-features/references/column-sizing.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":415,"sizeBytes":1797},{"name":"column-visibility.md","path":"packages/table-core/skills/table-features/references/column-visibility.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/table-features/references/column-visibility.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":423,"sizeBytes":1945},{"name":"expanding.md","path":"packages/table-core/skills/table-features/references/expanding.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/table-features/references/expanding.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":477,"sizeBytes":2046},{"name":"global-filtering.md","path":"packages/table-core/skills/table-features/references/global-filtering.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/table-features/references/global-filtering.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":497,"sizeBytes":2322},{"name":"grouping.md","path":"packages/table-core/skills/table-features/references/grouping.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/table-features/references/grouping.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":622,"sizeBytes":2700},{"name":"pagination.md","path":"packages/table-core/skills/table-features/references/pagination.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/table-features/references/pagination.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":478,"sizeBytes":2146},{"name":"row-pinning.md","path":"packages/table-core/skills/table-features/references/row-pinning.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/table-features/references/row-pinning.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":503,"sizeBytes":2098},{"name":"row-selection.md","path":"packages/table-core/skills/table-features/references/row-selection.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/table-features/references/row-selection.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":1355,"sizeBytes":6233},{"name":"sorting.md","path":"packages/table-core/skills/table-features/references/sorting.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/table-features/references/sorting.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":640,"sizeBytes":2771},{"name":"SKILL.md","path":"packages/table-core/skills/table-features/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/table-features/SKILL.md","title":"table-features","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"name":"table-features","description":"Add or debug Table v9 features: registration, row-model slots, prerequisites, sorting, filtering, pagination, selection, spanning, and column layout. Read only task-relevant feature references.","metadata":{"type":"core","library":"@tanstack/table-core","library_version":"9.3.1"},"requires":["core"],"sources":["TanStack/table:docs/guide/row-models.md","TanStack/table:packages/table-core/src/types/TableFeatures.ts","TanStack/table:packages/table-core/src/features/stockFeatures.ts","TanStack/table:packages/table-core/src/core/table/constructTable.ts","TanStack/table:packages/table-core/src/core/row-models/coreRowModelsFeature.utils.ts","TanStack/table:examples/react/with-tanstack-query","TanStack/table:docs/framework/react/guide/column-faceting.md","TanStack/table:packages/table-core/src/features/column-faceting","TanStack/table:examples/react/filters-faceted","TanStack/table:docs/framework/react/guide/column-filtering.md","TanStack/table:packages/table-core/src/features/column-filtering","TanStack/table:examples/react/filters","TanStack/table:docs/framework/react/guide/grouping.md","TanStack/table:packages/table-core/src/features/column-grouping","TanStack/table:examples/react/grouping","TanStack/table:docs/framework/react/guide/column-ordering.md","TanStack/table:packages/table-core/src/features/column-ordering","TanStack/table:examples/react/column-dnd","TanStack/table:docs/framework/react/guide/column-pinning.md","TanStack/table:packages/table-core/src/features/column-pinning","TanStack/table:examples/react/column-pinning-sticky","TanStack/table:docs/framework/react/guide/column-resizing.md","TanStack/table:packages/table-core/src/features/column-resizing","TanStack/table:examples/react/column-resizing-performant","TanStack/table:docs/framework/react/guide/column-sizing.md","TanStack/table:packages/table-core/src/features/column-sizing","TanStack/table:examples/react/column-sizing","TanStack/table:docs/framework/react/guide/column-visibility.md","TanStack/table:packages/table-core/src/features/column-visibility","TanStack/table:examples/react/column-visibility","TanStack/table:docs/framework/react/guide/global-filtering.md","TanStack/table:packages/table-core/src/features/global-filtering","TanStack/table:docs/framework/react/guide/expanding.md","TanStack/table:packages/table-core/src/features/row-expanding","TanStack/table:examples/react/expanding","TanStack/table:docs/framework/react/guide/pagination.md","TanStack/table:packages/table-core/src/features/row-pagination","TanStack/table:examples/react/pagination","TanStack/table:docs/framework/react/guide/row-pinning.md","TanStack/table:packages/table-core/src/features/row-pinning","TanStack/table:examples/react/row-pinning","TanStack/table:docs/framework/react/guide/cell-selection.md","TanStack/table:packages/table-core/src/features/cell-selection","TanStack/table:examples/react/cell-selection","TanStack/table:docs/framework/react/guide/cell-spanning.md","TanStack/table:packages/table-core/src/features/cell-spanning","TanStack/table:examples/react/cell-spanning","TanStack/table:docs/framework/react/guide/row-selection.md","TanStack/table:packages/table-core/src/features/row-selection","TanStack/table:examples/react/row-selection","TanStack/table:docs/framework/react/guide/sorting.md","TanStack/table:packages/table-core/src/features/row-sorting","TanStack/table:examples/react/sorting","TanStack/table:docs/framework/react/guide/aggregation.md","TanStack/table:packages/table-core/src/features/row-aggregation","TanStack/table:examples/react/aggregation","TanStack/table:examples/react/grouped-aggregation"]},"isInternal":false,"tokens":1976,"sizeBytes":9542},{"name":"SKILL.md","path":"packages/table-core/skills/table-state/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/skills/table-state/SKILL.md","title":"table-state","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"name":"table-state","description":"Choose Table v9 state ownership, atoms, initialization, updates, and resets. Load for controlled slices or state coordination; use the adapter state skill for reactive reads.","metadata":{"type":"core","library":"@tanstack/table-core","library_version":"9.3.1"},"requires":["core"],"sources":["TanStack/table:docs/framework/react/guide/table-state.md","TanStack/table:packages/table-core/src/core/table/coreTablesFeature.types.ts","TanStack/table:packages/table-core/src/core/table/coreTablesFeature.utils.ts","TanStack/table:packages/table-core/src/core/reactivity/coreReactivityFeature.utils.ts"]},"isInternal":false,"tokens":1173,"sizeBytes":5894},{"name":"SKILL.md","path":"packages/table-devtools/skills/devtools/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-devtools/skills/devtools/SKILL.md","title":"devtools","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"name":"devtools","description":"Register TanStack Table targets and inspect options, state, features, columns, rows, and row models with @tanstack/table-devtools. Load for missing connections, required unique table options.key, target replacement/cleanup, or an explicit request for production Devtools entrypoints.\n","metadata":{"type":"core","library":"@tanstack/table-devtools","library_version":"9.3.1"},"requires":["@tanstack/table-core#core"],"sources":["TanStack/table:docs/devtools.md","TanStack/table:packages/table-devtools/src/index.ts","TanStack/table:packages/table-devtools/src/tableTarget.ts","TanStack/table:packages/table-devtools/src/production.ts"]},"isInternal":false,"tokens":679,"sizeBytes":3230},{"name":"SKILL.md","path":"packages/vue-table-devtools/skills/devtools/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/vue-table-devtools/skills/devtools/SKILL.md","title":"devtools","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"name":"devtools","description":"Connect Vue Table v9 refs or instances to Devtools with tableDevtoolsPlugin and useTanStackTableDevtools. Load for missing targets, reactive table replacement, required options.key, enabled state, cleanup, or development gating.\n","metadata":{"type":"framework","library":"@tanstack/vue-table-devtools","framework":"vue","library_version":"9.3.1"},"requires":["@tanstack/table-core#core","@tanstack/table-devtools#devtools"],"sources":["TanStack/table:docs/devtools.md","TanStack/table:packages/vue-table-devtools/src/index.ts","TanStack/table:packages/vue-table-devtools/src/useTanStackTableDevtools.ts"]},"isInternal":false,"tokens":570,"sizeBytes":2495},{"name":"create-table-hook.md","path":"packages/vue-table/skills/getting-started/references/create-table-hook.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/vue-table/skills/getting-started/references/create-table-hook.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":712,"sizeBytes":3209},{"name":"with-tanstack-query.md","path":"packages/vue-table/skills/getting-started/references/with-tanstack-query.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/vue-table/skills/getting-started/references/with-tanstack-query.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":738,"sizeBytes":3230},{"name":"with-tanstack-virtual.md","path":"packages/vue-table/skills/getting-started/references/with-tanstack-virtual.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/vue-table/skills/getting-started/references/with-tanstack-virtual.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":731,"sizeBytes":3264},{"name":"SKILL.md","path":"packages/vue-table/skills/getting-started/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/vue-table/skills/getting-started/SKILL.md","title":"getting-started","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"name":"getting-started","description":"Create and render Table v9 with the vue adapter. Route reusable createTableHook components, Query and Virtual integration, and framework setup; use table-state for reactive ownership.","metadata":{"type":"framework","library":"@tanstack/vue-table","framework":"vue","library_version":"9.3.1"},"requires":["@tanstack/table-core#core"],"sources":["TanStack/table:docs/framework/vue/guide/migrating.md","TanStack/table:examples/vue/basic-use-table","TanStack/table:packages/vue-table/src/index.ts","TanStack/table:docs/framework/vue/guide/composable-tables.md","TanStack/table:examples/vue/composable-tables","TanStack/table:packages/vue-table/src/createTableHook.ts","TanStack/table:examples/vue/with-tanstack-query","TanStack/table:docs/framework/vue/guide/pagination.md","TanStack/table:docs/framework/vue/guide/virtualization.md","TanStack/table:examples/vue/virtualized-rows","TanStack/table:examples/vue/virtualized-columns","TanStack/table:examples/vue/virtualized-infinite-scrolling"]},"isInternal":false,"tokens":906,"sizeBytes":3777},{"name":"adapter-migration.md","path":"packages/vue-table/skills/migrate-v8-to-v9/references/adapter-migration.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/vue-table/skills/migrate-v8-to-v9/references/adapter-migration.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":682,"sizeBytes":3485},{"name":"SKILL.md","path":"packages/vue-table/skills/migrate-v8-to-v9/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/vue-table/skills/migrate-v8-to-v9/SKILL.md","title":"migrate-v8-to-v9","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"name":"migrate-v8-to-v9","description":"Migrate vue Table v8 to v9. Audit framework construction, rendering, state, and app hooks, with shared API changes in the core migration skill.","metadata":{"type":"lifecycle","library":"@tanstack/vue-table","framework":"vue","library_version":"9.3.1"},"requires":["@tanstack/table-core#migrate-v8-to-v9"],"sources":["TanStack/table:docs/framework/vue/guide/migrating.md","TanStack/table:packages/vue-table/src/index.ts","TanStack/table:examples/vue/basic-use-table"]},"isInternal":false,"tokens":645,"sizeBytes":2954},{"name":"reactivity.md","path":"packages/vue-table/skills/table-state/references/reactivity.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/vue-table/skills/table-state/references/reactivity.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"","isInternal":false,"tokens":720,"sizeBytes":3220},{"name":"SKILL.md","path":"packages/vue-table/skills/table-state/SKILL.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/vue-table/skills/table-state/SKILL.md","title":"table-state","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"name":"table-state","description":"Read and control Table v9 state in vue. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.","metadata":{"type":"framework","library":"@tanstack/vue-table","framework":"vue","library_version":"9.3.1"},"requires":["@tanstack/table-core#table-state"],"sources":["TanStack/table:docs/framework/vue/guide/table-state.md","TanStack/table:examples/vue/basic-external-state","TanStack/table:packages/vue-table/src/useTable.ts"]},"isInternal":false,"tokens":591,"sizeBytes":2703},{"name":"README.md","path":"packages/alpine-table/README.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/alpine-table/README.md","title":"alpine-table Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":2008,"sizeBytes":7231},{"name":"README.md","path":"packages/angular-table/README.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/angular-table/README.md","title":"angular-table Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":2008,"sizeBytes":7231},{"name":"README.md","path":"packages/ember-table/README.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/ember-table/README.md","title":"ember-table Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":2008,"sizeBytes":7231},{"name":"README.md","path":"packages/lit-table/README.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/lit-table/README.md","title":"lit-table Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":2008,"sizeBytes":7231},{"name":"README.md","path":"packages/match-sorter-utils/README.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/match-sorter-utils/README.md","title":"match-sorter-utils Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":2008,"sizeBytes":7231},{"name":"README.md","path":"packages/octane-table/README.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/octane-table/README.md","title":"octane-table Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":2008,"sizeBytes":7231},{"name":"README.md","path":"packages/preact-table-devtools/README.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/preact-table-devtools/README.md","title":"preact-table-devtools Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":2008,"sizeBytes":7231},{"name":"README.md","path":"packages/preact-table/README.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/preact-table/README.md","title":"preact-table Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":2008,"sizeBytes":7231},{"name":"README.md","path":"packages/react-table-devtools/README.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/react-table-devtools/README.md","title":"react-table-devtools Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":2008,"sizeBytes":7231},{"name":"README.md","path":"packages/react-table/README.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/react-table/README.md","title":"react-table Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":2008,"sizeBytes":7231},{"name":"README.md","path":"packages/solid-table-devtools/README.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/solid-table-devtools/README.md","title":"solid-table-devtools Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":2008,"sizeBytes":7231},{"name":"README.md","path":"packages/solid-table/README.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/solid-table/README.md","title":"solid-table Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":2008,"sizeBytes":7231},{"name":"README.md","path":"packages/svelte-table/README.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/svelte-table/README.md","title":"svelte-table Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":2008,"sizeBytes":7231},{"name":"README.md","path":"packages/table-core/README.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-core/README.md","title":"table-core Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":2008,"sizeBytes":7231},{"name":"README.md","path":"packages/table-devtools/README.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/table-devtools/README.md","title":"table-devtools Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":2008,"sizeBytes":7231},{"name":"README.md","path":"packages/vue-table-devtools/README.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/vue-table-devtools/README.md","title":"vue-table-devtools Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":2008,"sizeBytes":7231},{"name":"README.md","path":"packages/vue-table/README.md","rawUrl":"https://raw.githubusercontent.com/TanStack/table/HEAD/packages/vue-table/README.md","title":"vue-table Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":2008,"sizeBytes":7231}],"systemPromptSnippet":"\n\n# Agent Instructions\n\nBefore analyzing or changing this repository, read and follow\n[`CONTRIBUTING.md`](./CONTRIBUTING.md). Its contribution, development, testing,\npull request, and changeset requirements apply to AI-assisted work as well as\nhuman-authored work.\n\nKeep every change focused on one topic. Understand and verify all generated\ncode, run the required checks, and provide a concise pull request description\nthat follows the repository template.\n\n## Packages that cannot be upgraded yet\n\nLeave these pins alone during routine dependency bumps. They currently break\nEmber, the Svelte kitchen-sink types, or are intentionally deferred.\n\n- **TypeScript** — keep `6.0.3`. Do not bump it as part of a general upgrade.\n- **Babel 7** — Ember is not compatible with Babel 8. In `packages/ember-table`\n and every `examples/ember/*` app, keep `@babel/core`,\n `@babel/plugin-transform-runtime`, `@babel/plugin-transform-typescript`, and\n `@babel/runtime` at `7.29.7`. `@rollup/plugin-babel` `7.1.0` is the Rollup\n plugin version, not Babel itself.\n- **`@dnd-kit/abstract` and `@dnd-kit/helpers`** — keep `^0.2.3` in\n `examples/svelte/kitchen-sink-shadcn`. `@dnd-kit-svelte/svelte@0.1.6` still\n depends on the 0.2.x line. Bumping to 0.5.x installs a second copy, and\n TypeScript treats those private-field types as incompatible.\n- **Vitest and `@vitest/coverage-v8`** — keep the 4.x line (currently\n `^4.1.11` and `4.1.11`). `@analogjs/vitest-angular@2.7.2` and Angular build\n tooling do not support Vitest 5, which also removes the `vitest` `bench` export\n used by the repository benchmarks. Upgrade these together in a separate migration.\n- **Octane** — keep `0.1.36`. The 0.2.x line fails the adapter conformance\n test for synchronous owner and isolated controlled updates during a discrete event.\n- **Pacer devtools** — keep `@tanstack/react-pacer-devtools` at `0.8.0` and\n `@tanstack/solid-pacer-devtools` at `0.7.0`. The 0.14.x packages do not export\n `pacerDevtoolsPlugin`, which the Form and Router examples use.\n- **`@tanstack/preact-form`** — keep `1.30.5` in the Preact Form example.\n The 1.33.x line removes `createFormHookContexts` and `withForm`, requiring\n a separate example migration.\n- **Preact** — keep `^10.29.8`. Preact 11 fails the adapter's hook and SSR\n tests and the devtools type check. The Store and Query adapters still require\n Preact 10. Upgrade these together in a separate migration.\n- **`@tanstack/intent`** — keep `0.4.0`. The 0.5 checker compiles TS and JS\n fences without framework TypeScript configuration or surrounding context. It\n rejects valid Preact and Lit examples, class-member excerpts, and deliberately\n wrong examples. Keep the repository's content and annotated-snippet checks\n enabled while this migration is deferred.\n\n\n# Alpine reusable table hooks\n\nRead when multiple Alpine tables share features, defaults, or rendering conventions. Keep standalone construction for tables without shared conventions. For controlled state or reactive reads, read [table-state](../../table-state/SKILL.md).\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```ts\nimport Alpine from 'alpinejs'\nimport { createTableHook, tableFeatures } from '@tanstack/alpine-table'\n\ntype Person = { id: string; name: string }\nconst { createAppTable, createAppColumnHelper } = createTableHook({\n features: tableFeatures({}),\n getRowId: (row: Person) => row.id,\n})\nconst helper = createAppColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n\nAlpine.data('peopleTable', () => {\n const local = Alpine.reactive({\n data: [{ id: '1', name: 'Ada' }] as Array,\n })\n const table = createAppTable({\n columns,\n get data() {\n return local.data\n },\n })\n return { table }\n})\n```\n\n## Core patterns\n\n### Share infrastructure, keep data local\n\nBind features, row models, row IDs, and defaults in the factory. Each Alpine component passes its own columns, reactive data getter, and controlled state.\n\n### Reuse markup with Alpine primitives\n\nUse real templates and `Alpine.bind` bundles for interactive reuse. `createTableHook` intentionally returns no component registry or context hooks.\n\n### Use the helper to retain feature inference\n\nColumns from `createAppColumnHelper()` know the factory's registered features without userland feature generics.\n\n## Common mistakes\n\n### HIGH Assuming a JSX component registry\n\nWrong: pass `cellComponents` or `tableComponents` to Alpine `createTableHook`.\n\nCorrect: share features/defaults with the hook and build reusable interactive markup with Alpine templates or bind bundles.\n\nThe Alpine hook returns only app features, a column helper, and createAppTable.\n\nSource: TanStack/table:packages/alpine-table/src/createTableHook.ts\n\n### HIGH Reactive data captured as a snapshot\n\nWrong: `createAppTable({ columns, data: local.data })` when the array will be replaced.\n\nCorrect: provide a `get data()` option.\n\nThe app factory delegates to Alpine createTable, whose option effect tracks getters.\n\nSource: TanStack/table:packages/alpine-table/src/createTable.ts\n\n## API discovery\n\nInspect `node_modules/@tanstack/alpine-table/dist/createTableHook.d.ts`; do not infer component/context APIs from React, Vue, Solid, Svelte, Angular, or Lit adapters.\n\n## Sources\n\n- `TanStack/table:docs/framework/alpine/guide/composable-tables.md`\n- `TanStack/table:examples/alpine/basic-app-table`\n- `TanStack/table:packages/alpine-table/src/createTableHook.ts`\n\n\n---\nname: getting-started\ndescription:\n Create and render Table v9 with the alpine adapter. Route reusable createTableHook\n defaults, and framework setup; use table-state for reactive ownership.\nmetadata:\n type: framework\n library: '@tanstack/alpine-table'\n framework: alpine\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/alpine/guide/table-state.md\n - TanStack/table:examples/alpine/basic-create-table\n - TanStack/table:packages/alpine-table/src/index.ts\n - TanStack/table:docs/framework/alpine/guide/composable-tables.md\n - TanStack/table:examples/alpine/basic-app-table\n - TanStack/table:packages/alpine-table/src/createTableHook.ts\n---\n\nLoad `intent load @tanstack/table-core#core` first for the headless model, stable inputs, and column inference.\n\n## Setup\n\n```ts\nimport Alpine from 'alpinejs'\nimport {\n FlexRender,\n createTable,\n tableFeatures,\n type ColumnDef,\n} from '@tanstack/alpine-table'\n\ntype Person = { id: string; name: string }\nconst features = tableFeatures({})\nconst columns: Array> = [\n { accessorKey: 'name', header: 'Name' },\n]\n\nAlpine.data('peopleTable', () => {\n const local = Alpine.reactive({\n data: [{ id: '1', name: 'Ada' }] as Array,\n })\n const table = createTable({\n features,\n columns,\n get data() {\n return local.data\n },\n getRowId: (row) => row.id,\n })\n\n return { table, FlexRender }\n})\n\nwindow.Alpine = Alpine\nAlpine.start()\n```\n\nRender real table structure with `x-for`; use `x-html=\"FlexRender({ header })\"` or `x-html=\"FlexRender({ cell })\"` only for renderer output.\n\n## Construction and rendering\n\nWrap changing data in `Alpine.reactive` and expose it with `get data()`. The adapter tracks option getters; `data: local.data` captures a snapshot and does not follow later array replacements. Keep static columns and features outside getters.\n\nThe returned table is a reactive proxy. Read Table APIs directly in `x-text`, `x-for`, `x-if`, or bound attributes; no Subscribe component is needed.\n\nBuild table structure and interactive controls as real Alpine markup. Use `x-html=\"FlexRender({ header })\"` or `x-html=\"FlexRender({ cell })\"` for renderer output. Alpine does not initialize directives inside `x-html` strings; use templates or `Alpine.bind` bundles for buttons and inputs.\n\n## Read for the task\n\n- When adding or configuring optional features, load `intent load @tanstack/table-core#table-features` and read only references for the requested behavior.\n- For state ownership or reactive reads, read [table-state](../table-state/SKILL.md).\n- When tables share features, defaults, or reusable UI, read [create-table-hook](references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/alpine-table/dist/index.d.ts`, `createTable.d.ts`, and `reactivity.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n\n\n# Alpine Table reactivity\n\nRead for Alpine subscription boundaries, shared state, or updates that require more than the default rendering behavior.\n\nThis reference inherits the version of its owning skill.\n\n## Gate broad binding updates\n\nBy default, the table proxy subscribes to the full store and increments one reactive version counter. Every binding that touches the table depends on that counter. A narrow atom read selects a value but does not isolate the binding from other state updates.\n\nThe optional second `createTable` argument shallow-compares selected state before bumping the counter. Options changes, including new data, still reevaluate bindings. Select every slice that the affected bindings must observe.\n\nFor high-frequency updates such as column resizing, use `() => ({})` only after explicit `table.atoms..subscribe()` side effects own the required updates and their cleanup. Otherwise, opting out freezes state-driven bindings.\n\n## Controlled getters and external atoms\n\nWhen `Alpine.reactive` owns a slice, keep a getter in `state` and resolve every callback into the reactive owner. Capturing `state: { pagination: local.pagination }` misses later object replacements.\n\nWhen an external atom owns the slice, pass it in `atoms` and write it through feature APIs or the external atom. Supplying controlled `state` for the same slice does not create two-way synchronization; the atom takes precedence.\n\n## Read inside the binding\n\nUse `x-text=\"table.atoms.pagination.get().pageIndex + 1\"` or read Table APIs inside an Alpine getter. Event handlers can read the current value directly. A value copied outside tracked execution stays a snapshot.\n\nThe adapter has no `table.Subscribe` component. Keep interactive markup in Alpine templates and use the reactive table proxy there.\n\n## API discovery\n\nInspect `node_modules/@tanstack/alpine-table/dist/index.d.ts`, `createTable.d.ts`, and `reactivity.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/alpine/guide/table-state.md`\n- `TanStack/table:examples/alpine/basic-create-table`\n- `TanStack/table:packages/alpine-table/src/createTable.ts`\n\n\n---\nname: table-state\ndescription:\n Read and control Table v9 state in alpine. Use for tracked reads, subscriptions,\n controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/alpine-table'\n framework: alpine\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/alpine/guide/table-state.md\n - TanStack/table:examples/alpine/basic-create-table\n - TanStack/table:packages/alpine-table/src/createTable.ts\n---\n\nLoad `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules.\n\nAlpine's table proxy makes reads inside `x-text`, `x-for`, `x-if`, bound attributes, `x-effect`, and Alpine getters reactive. Event handlers read the current value when invoked. A captured value outside a binding does not become a continuing subscription, and there is no `table.Subscribe` component.\n\n## Controlled getter setup\n\n\n\n```ts\nimport Alpine from 'alpinejs'\nimport {\n createTable,\n rowPaginationFeature,\n tableFeatures,\n type PaginationState,\n} from '@tanstack/alpine-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nAlpine.data('pagedTable', () => {\n const local = Alpine.reactive<{ pagination: PaginationState }>({\n pagination: { pageIndex: 0, pageSize: 10 },\n })\n const table = createTable({\n features,\n columns,\n data,\n state: {\n get pagination() {\n return local.pagination\n },\n },\n onPaginationChange: (next) => {\n local.pagination =\n typeof next === 'function' ? next(local.pagination) : next\n },\n })\n return { table }\n})\n```\n\nRead `table.atoms.pagination.get().pageIndex` directly in an Alpine binding.\n\n## Reactive boundaries\n\n- A controlled slice needs a getter and callback. `state: { pagination: local.pagination }` captures the old object when the owner later replaces it.\n- Expose changing data through `get data()` and keep features, columns, and derived data stable outside reevaluated getters.\n- The proxy normally reevaluates all Table-reading bindings for every state change. A narrow atom read does not by itself narrow that broad invalidation.\n- For shared state, pass a stable external atom through `atoms`; omit controlled state and its callback for the same slice.\n\n## Read for the task\n\nFor advanced reactive boundaries, shared atoms, or detailed subscription examples, read [reactivity](references/reactivity.md). For construction or rendering setup, read [getting-started](../getting-started/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/alpine-table/dist/index.d.ts`, `createTable.d.ts`, and `reactivity.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n\n\n---\nname: devtools\ndescription: >\n Register Angular Table v9 instances with injectTanStackTableDevtools inside injection context. Load for reactive table registration, required options.key, enabled or undefined tables, cleanup, Angular isDevMode gating, or explicit production exports.\nmetadata:\n type: framework\n library: '@tanstack/angular-table-devtools'\n framework: angular\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\n - '@tanstack/table-devtools#devtools'\nsources:\n - 'TanStack/table:docs/devtools.md'\n - 'TanStack/table:packages/angular-table-devtools/src/index.ts'\n - 'TanStack/table:packages/angular-table-devtools/src/injectTanStackTableDevtools.ts'\n---\n\nThis skill builds on @tanstack/table-core#core and @tanstack/table-devtools#devtools.\n\n## Setup\n\n```ts\nimport { Component } from '@angular/core'\nimport { injectTable, tableFeatures } from '@tanstack/angular-table'\nimport { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'\n\nconst features = tableFeatures({})\nconst columns = [{ accessorKey: 'id' }]\nconst data: Array<{ id: string }> = []\n\n@Component({ selector: 'users-table', template: 'Users table registered' })\nexport class UsersTable {\n readonly table = injectTable(() => ({\n key: 'users-table',\n features,\n columns,\n data,\n }))\n\n constructor() {\n injectTanStackTableDevtools(() => ({ table: this.table }))\n }\n}\n```\n\nProvide the Angular TanStack Devtools host once at application configuration level as documented in `docs/devtools.md`.\n\n## Hooks and Components\n\nThe injector options function may return `table: undefined` or an `enabled` function to remove/disable registration reactively.\n\n## Common Mistakes\n\n### CRITICAL Injector called outside context\n\nWrong: call `injectTanStackTableDevtools` from an arbitrary callback after bootstrap.\n\nCorrect: call it in a component/service field initializer or constructor injection context.\n\nThe adapter uses Angular injection and effects for lifecycle cleanup.\n\nSource: TanStack/table:packages/angular-table-devtools/src/injectTanStackTableDevtools.ts\n\n### HIGH Missing table key\n\nWrong: register an otherwise valid table without `options.key`.\n\nCorrect: assign a stable unique key before injection registration.\n\nCore registration logs an error and skips keyless targets.\n\nSource: TanStack/table:packages/table-devtools/src/tableTarget.ts\n\n### MEDIUM isDevMode no-op misunderstood\n\nWrong: expect default Angular exports to render production Devtools.\n\nCorrect: keep standard setup development-only; use `/production` only when explicitly requested.\n\nThe package index switches exports using Angular `isDevMode()`.\n\nSource: TanStack/table:packages/angular-table-devtools/src/index.ts\n\n## API Discovery\n\nInspect `node_modules/@tanstack/angular-table-devtools/dist/index.d.ts` and `injectTanStackTableDevtools.d.ts` for current injection options.\n\n\n# Angular reusable table hooks\n\nRead when multiple Angular tables share features, defaults, or rendering conventions. Keep standalone construction for tables without shared conventions. For controlled state or reactive reads, read [table-state](../../table-state/SKILL.md).\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```ts\nimport {\n createTableHook,\n rowSortingFeature,\n tableFeatures,\n} from '@tanstack/angular-table'\n\nexport const {\n injectAppTable,\n createAppColumnHelper,\n injectTableContext,\n injectTableCellContext,\n injectTableHeaderContext,\n} = createTableHook({\n features: tableFeatures({ rowSortingFeature }),\n})\n```\n\n```ts\nconst helper = createAppColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n\nexport class PeopleTable {\n readonly table = injectAppTable(() => ({ columns, data: this.data() }))\n}\n```\n\n## Core patterns\n\n### Consume typed DI context in registered components\n\n```ts\nexport class NameCell {\n readonly cell = injectTableCellContext()\n readonly value = computed(() => this.cell().getValue())\n}\n```\n\nUse the matching table/header/cell injector instead of threading context props through reusable components.\n\n### Distinguish component types from render functions\n\nRegister either an Angular component type or a render function. Return component types directly when FlexRender should set context inputs; use `flexRenderComponent(Component, options)` only for explicit inputs/outputs/injector/bindings/directives.\n\n## Common mistakes\n\n### CRITICAL Calling app helpers outside DI\n\nWrong:\n\n```ts\nexport function make() {\n return injectAppTable(() => options)\n}\n```\n\nCorrect:\n\n```ts\nexport class PeopleTable {\n readonly table = injectAppTable(() => options())\n}\n```\n\nBoth app-table construction and returned context injectors require Angular injection context.\n\nSource: `packages/angular-table/src/helpers/createTableHook.ts`\n\n### HIGH Prop drilling registered context\n\nWrong:\n\n```ts\ncell: (ctx) => flexRenderComponent(NameCell, { inputs: { cell: ctx.cell } })\n```\n\nCorrect:\n\n```ts\ncell: (ctx) => ctx.cell.NameCell\n```\n\nRegistered components can consume the app hook's typed cell context directly.\n\nSource: `docs/framework/angular/guide/composable-tables.md`\n\n### HIGH Wrapping a function as a component\n\nWrong:\n\n```ts\nflexRenderComponent((props) => props.cell.getValue())\n```\n\nCorrect:\n\n```ts\n;(props) => props.cell.getValue()\n```\n\n`flexRenderComponent` validates an Angular component type; plain render functions are already valid render content.\n\nSource: `packages/angular-table/src/flex-render/flexRenderComponent.ts`\n\n## API discovery\n\nInspect `node_modules/@tanstack/angular-table/dist/types/` for exact DI and rendering contracts in the bundled public API.\n\n## Sources\n\n- `TanStack/table:docs/framework/angular/guide/composable-tables.md`\n- `TanStack/table:examples/angular/composable-tables`\n- `TanStack/table:packages/angular-table/src/helpers/createTableHook.ts`\n\n\n# Angular Table with TanStack Query\n\nRead when Angular Query supplies Table data or owns server-side processing. Load `intent load @tanstack/table-core#table-features` and read its client/server reference to decide which stages the server owns. Read [table-state](../../table-state/SKILL.md) for the signal or atom wiring used by the query key.\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```ts\nimport {\n injectQuery,\n keepPreviousData,\n} from '@tanstack/angular-query-experimental'\nimport { Component, signal } from '@angular/core'\nimport {\n injectTable,\n rowPaginationFeature,\n tableFeatures,\n} from '@tanstack/angular-table'\n\ntype Person = { id: string; name: string }\ntype PersonPage = { rows: Person[]; rowCount: number }\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst EMPTY_ROWS: Person[] = []\n\n@Component({\n selector: 'people-table',\n template: `{{ table.getRowModel().rows.length }} rows`,\n})\nexport class PeopleTable {\n readonly pagination = signal({ pageIndex: 0, pageSize: 20 })\n readonly query = injectQuery(() => ({\n queryKey: [\n 'people',\n this.pagination().pageIndex,\n this.pagination().pageSize,\n ],\n queryFn: (): Promise =>\n fetch(\n `/api/people?page=${this.pagination().pageIndex}&size=${this.pagination().pageSize}`,\n ).then((r) => r.json()),\n placeholderData: keepPreviousData,\n }))\n readonly table = injectTable(() => ({\n features,\n columns,\n data: this.query.data()?.rows ?? EMPTY_ROWS,\n rowCount: this.query.data()?.rowCount ?? 0,\n manualPagination: true,\n state: { pagination: this.pagination() },\n onPaginationChange: (next) =>\n typeof next === 'function'\n ? this.pagination.update(next)\n : this.pagination.set(next),\n }))\n}\n```\n\nProvide Angular Query's QueryClient in the application injection context before constructing this component. The server response contains the requested `rows` and total `rowCount`.\n\n## Core patterns\n\n### Track every server-owned input\n\nRead pagination, sorting, and filtering signals inside `injectQuery(() => ...)` and include them in the query key. Return data already processed for each manual stage.\n\n### Keep Query data authoritative\n\nRead the Query signal directly in `injectTable`. Create another signal only for a deliberate editable draft with an explicit cache synchronization policy.\n\n## Common mistakes\n\n### HIGH Capturing query inputs outside tracking\n\nWrong:\n\n```ts\nconst page = this.pagination().pageIndex\nreadonly query = injectQuery(() => ({ queryKey: ['people', page], queryFn }))\n```\n\nCorrect:\n\n```ts\nreadonly query = injectQuery(() => ({ queryKey: ['people', this.pagination().pageIndex], queryFn }))\n```\n\nSignal reads inside the options function establish refetch dependencies.\n\nSource: `examples/angular/with-tanstack-query/src/app/app.ts`\n\n### HIGH Expecting manual mode to request\n\nWrong:\n\n```ts\ninjectTable(() => ({ features, columns, data, manualPagination: true }))\n```\n\nCorrect:\n\n```ts\ninjectTable(() => ({\n features,\n columns,\n data: this.query.data()?.rows ?? EMPTY_ROWS,\n manualPagination: true,\n}))\n```\n\nManual flags only bypass client row processing; Query performs network work.\n\nSource: `examples/angular/with-tanstack-query/src/app/app.ts`\n\n### HIGH Omitting total counts\n\nWrong:\n\n```ts\n{ data: this.query.data()?.rows ?? EMPTY_ROWS, manualPagination: true }\n```\n\nCorrect:\n\n```ts\n{ data: this.query.data()?.rows ?? EMPTY_ROWS, rowCount: this.query.data()?.rowCount ?? 0, manualPagination: true }\n```\n\nTable needs `rowCount` or `pageCount` to constrain navigation across server pages.\n\nSource: `docs/framework/angular/guide/pagination.md`\n\n## API discovery\n\nInspect installed `@tanstack/angular-table/dist/types/`, the relevant core feature declarations, and installed Angular Query declarations for the exact `injectQuery` package/version contract.\n\n## Sources\n\n- `TanStack/table:examples/angular/with-tanstack-query`\n- `TanStack/table:docs/framework/angular/guide/table-state.md`\n- `TanStack/table:docs/framework/angular/guide/pagination.md`\n\n\n# Angular Table with TanStack Virtual\n\nRead when rendering a large Angular table with TanStack Virtual. Virtual operates on the final Table model. Read [table-state](../../table-state/SKILL.md) if model counts or rendered state stop updating.\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```ts\nimport { Component, computed, viewChild } from '@angular/core'\nimport { injectTable, tableFeatures } from '@tanstack/angular-table'\nimport { injectVirtualizer } from '@tanstack/angular-virtual'\nimport type { ElementRef } from '@angular/core'\n\nconst features = tableFeatures({})\nconst columns = [{ accessorKey: 'name' }]\nconst data = Array.from({ length: 1000 }, (_, index) => ({\n id: String(index),\n name: `Person ${index}`,\n}))\n\n@Component({\n selector: 'virtual-table',\n template: `
\n
\n @for (item of virtualRows(); track item.key) {\n \n {{ rows()[item.index]!.getValue('name') }}\n
\n }\n
\n
`,\n})\nexport class VirtualTable {\n readonly table = injectTable(() => ({\n features,\n columns,\n data,\n getRowId: (row) => row.id,\n }))\n readonly scrollElement =\n viewChild>('scrollElement')\n readonly rows = computed(() => this.table.getRowModel().rows)\n readonly rowVirtualizer = injectVirtualizer(() => ({\n count: this.rows().length,\n scrollElement: this.scrollElement()?.nativeElement,\n estimateSize: () => 34,\n getItemKey: (index) => this.rows()[index]!.id,\n overscan: 5,\n }))\n readonly virtualRows = computed(() => this.rowVirtualizer.getVirtualItems())\n readonly totalSize = computed(() => this.rowVirtualizer.getTotalSize())\n}\n```\n\n## Core patterns\n\n### Derive reactive models\n\nUse `computed(() => table.getRowModel().rows)` for rows. For column virtualization, register `columnVisibilityFeature` before reading `computed(() => table.getVisibleLeafColumns())`; register `columnSizingFeature` when deriving widths from sizing APIs. `injectVirtualizer` tracks signal reads in its initializer and requires injection context.\n\n### Own the layout contract\n\nGive the scroll element bounded overflow, create a total-size spacer, and translate or measure each virtual item. Use grid/flex widths for dynamic rows/columns and keep sticky headers inside the correct scroll geometry.\n\n### Gate infinite fetches\n\nWhen the last virtual item approaches fetched length, fetch only if more server rows exist and a request is not active. Manual sorting requires server-sorted pages and a reset/refetch policy.\n\n## Common mistakes\n\n### CRITICAL Constructing outside injection context\n\nWrong:\n\n```ts\nexport function virtualize(options) {\n return injectVirtualizer(() => options)\n}\n```\n\nCorrect:\n\n```ts\nconst features = tableFeatures({})\nconst columns = [{ accessorKey: 'name' }]\nconst data = Array.from({ length: 1000 }, (_, index) => ({\n id: String(index),\n name: `Person ${index}`,\n}))\n\n@Component({\n selector: 'virtual-table',\n template: `
\n
\n @for (item of virtualRows(); track item.key) {\n \n {{ rows()[item.index]!.getValue('name') }}\n
\n }\n
\n
`,\n})\nexport class VirtualTable {\n readonly table = injectTable(() => ({\n features,\n columns,\n data,\n getRowId: (row) => row.id,\n }))\n readonly virtualizer = injectVirtualizer(() => options())\n}\n```\n\nThe Angular virtualizer follows DI lifecycle rules just like `injectTable`.\n\nSource: `examples/angular/virtualized-rows/src/app/app.ts`\n\n### HIGH Virtualizing raw data\n\nWrong:\n\n```ts\nreadonly rows = computed(() => this.data())\n```\n\nCorrect:\n\n```ts\nreadonly rows = computed(() => this.table.getRowModel().rows)\n```\n\nRaw data bypasses Table filtering, sorting, expansion, grouping, and pagination.\n\nSource: `docs/framework/angular/guide/virtualization.md`\n\n### HIGH Forgetting spacer and transforms\n\nWrong:\n\n```html\n@for (item of virtualRows(); track item.key) {\n
{{ rows()[item.index].id }}
\n}\n```\n\nCorrect:\n\n```html\n
\n @for (item of virtualRows(); track item.key) {\n \n {{ rows()[item.index]!.getValue('name') }}\n
\n }\n\n```\n\nVirtual computes ranges and sizes but does not apply DOM geometry, sticky CSS, or column widths.\n\nSource: `examples/angular/virtualized-columns/src/app/app.ts`\n\n## API discovery\n\nInspect installed `@tanstack/angular-table/dist/types/`, installed `@tanstack/angular-virtual/dist/`, and the maintained Angular examples for current row, column, measurement, and infinite patterns.\n\n## Sources\n\n- `TanStack/table:docs/framework/angular/guide/virtualization.md`\n- `TanStack/table:examples/angular/virtualized-rows`\n- `TanStack/table:examples/angular/virtualized-columns`\n- `TanStack/table:examples/angular/virtualized-infinite-scrolling`\n\n\n---\nname: getting-started\ndescription:\n Create and render Table v9 with the angular adapter. Route reusable createTableHook\n components, Query and Virtual integration, and framework setup; use table-state for reactive\n ownership.\nmetadata:\n type: framework\n library: '@tanstack/angular-table'\n framework: angular\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/angular/guide/migrating.md\n - TanStack/table:docs/framework/angular/guide/flex-render.md\n - TanStack/table:examples/angular/basic-inject-table\n - TanStack/table:packages/angular-table/src/index.ts\n - TanStack/table:docs/framework/angular/guide/composable-tables.md\n - TanStack/table:examples/angular/composable-tables\n - TanStack/table:packages/angular-table/src/helpers/createTableHook.ts\n - TanStack/table:examples/angular/with-tanstack-query\n - TanStack/table:docs/framework/angular/guide/table-state.md\n - TanStack/table:docs/framework/angular/guide/pagination.md\n - TanStack/table:docs/framework/angular/guide/virtualization.md\n - TanStack/table:examples/angular/virtualized-rows\n - TanStack/table:examples/angular/virtualized-columns\n - TanStack/table:examples/angular/virtualized-infinite-scrolling\n---\n\nLoad `intent load @tanstack/table-core#core` first for the headless model, stable inputs, and column inference.\n\n## Setup\n\n```ts\nimport { Component, signal } from '@angular/core'\nimport { FlexRender, injectTable, tableFeatures } from '@tanstack/angular-table'\n\ntype Person = { name: string; age: number }\nconst features = tableFeatures({})\nconst columns = [\n { accessorKey: 'name', header: 'Name' },\n { accessorKey: 'age', header: 'Age' },\n]\n\n@Component({\n selector: 'app-table',\n imports: [FlexRender],\n template: `\n \n @for (row of table.getRowModel().rows; track row.id) {\n \n @for (cell of row.getAllCells(); track cell.id) {\n \n }\n \n }\n \n
\n {{\n value\n }}\n
`,\n})\nexport class TableComponent {\n readonly data = signal([{ name: 'Ada', age: 36 }])\n readonly table = injectTable(() => ({ features, columns, data: this.data() }))\n}\n```\n\n## Construction and rendering\n\nCall `injectTable` in a component, directive, or service field initializer, or another valid Angular injection context. The adapter binds its cleanup to that context.\n\nSignals read in the options initializer rerun it and call `setOptions`. Keep features, factories, and columns outside the initializer; return stable data references and derive transformed data with `computed` outside it.\n\nImport `FlexRender` for `*flexRender`, `*flexRenderCell`, `*flexRenderHeader`, and `*flexRenderFooter`. Render values can be primitives, `TemplateRef`, component types, or `flexRenderComponent(...)`. Use `flexRenderComponent` for Angular component types; ordinary render functions are already supported directly.\n\n## Read for the task\n\n- When adding or configuring optional features, load `intent load @tanstack/table-core#table-features` and read only references for the requested behavior.\n- For state ownership or reactive reads, read [table-state](../table-state/SKILL.md).\n- When tables share features, defaults, or reusable UI, read [create-table-hook](references/create-table-hook.md).\n- When Query supplies data or server processing, read [with-tanstack-query](references/with-tanstack-query.md).\n- When virtualizing rows or columns, read [with-tanstack-virtual](references/with-tanstack-virtual.md).\n- When upgrading v8 code, read [migrate-v8-to-v9](../migrate-v8-to-v9/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`.\n\n\n# Angular v8-to-v9 adapter migration\n\nRead when applying the Angular construction, state, rendering, or reusable-hook checks. Complete the shared audit with `intent load @tanstack/table-core#migrate-v8-to-v9`; its references own the shared feature and type rename inventories.\n\nThis reference inherits the version of its owning skill.\n\n## Framework requirements\n\nAngular 19 or newer is required (`@angular/core >=19`).\n\n## Construction\n\n| v8 | v9 |\n| ----------------------------------- | -------------------------------------------------------------- |\n| `createAngularTable(() => options)` | `injectTable(() => options)` in injection context |\n| `table.getState().sorting` | `table.atoms.sorting.get()` inside tracked Angular consumption |\n\nThe initializer reruns when signals read inside it change and calls `setOptions`. Keep features and columns stable outside it. Construct in a component/directive/service field or another valid injection context so lifecycle cleanup is registered correctly.\n\n## Angular state migration\n\n- `table.getState().sorting` becomes `table.atoms.sorting.get()` for narrow signal-backed reads.\n- Use `table.store.get()` only for a full flat snapshot/debug output.\n- Derive selected slices with Angular `computed`; use `shallow` equality for recreated object/array slices when appropriate.\n- Controlled Angular signals are read in `state` and updated through matching `on[State]Change` callbacks; resolve value-or-function updaters.\n- Prefer external atoms from `@tanstack/angular-store` through `atoms` for app-owned shared slices. Never provide both an atom and `state` for one slice.\n\n## Angular rendering and composition\n\n- Import `FlexRender`/the current `*flexRender` directives from the adapter.\n- Prefer `*flexRenderCell=\"cell; let value\"`, `*flexRenderHeader=\"header; let value\"`, and `*flexRenderFooter=\"footer; let value\"`; they choose the definition and context automatically.\n- General `*flexRender` supports primitives, `TemplateRef`, component types, and `flexRenderComponent(...)` wrappers.\n- Column render functions run in an Angular injection context and may call `inject()` or use signals.\n- Components mounted by FlexRender can call `injectFlexRenderContext()` for the render props.\n- Use `flexRenderComponent(Component, { inputs, outputs, injector, bindings, directives })` for explicit component configuration; creation-time `bindings`/`directives` require the supported Angular version.\n- `tableOptions(...)` composes partial options and may omit data, columns, or features until final assembly.\n- `createTableHook` is optional for repeated application conventions; it returns `injectAppTable` and a feature-bound `createAppColumnHelper`.\n\n## Related task guidance\n\nFor a full construction example, read [getting-started](../../getting-started/SKILL.md). For tracked reads and controlled updates, read [table-state](../../table-state/SKILL.md). When creating a reusable app factory, read [create-table-hook](../../getting-started/references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/angular/guide/migrating.md`\n- `TanStack/table:packages/angular-table/src/index.ts`\n- `TanStack/table:examples/angular/basic-inject-table`\n\n\n---\nname: migrate-v8-to-v9\ndescription:\n Migrate angular Table v8 to v9. Audit framework construction, rendering, state,\n and app hooks, with shared API changes in the core migration skill.\nmetadata:\n type: lifecycle\n library: '@tanstack/angular-table'\n framework: angular\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#migrate-v8-to-v9'\nsources:\n - TanStack/table:docs/framework/angular/guide/migrating.md\n - TanStack/table:packages/angular-table/src/index.ts\n - TanStack/table:examples/angular/basic-inject-table\n---\n\nLoad `intent load @tanstack/table-core#migrate-v8-to-v9` first and audit its entire shared checklist. It owns feature registration, row-model slots, state/reset changes, prototype methods, logical pinning, sizing/resizing, sorting, selection, helpers, and TypeScript mappings.\n\n## Framework prerequisites\n\nAngular 19 or newer is required (`@angular/core >=19`).\n\n## Angular migration checklist\n\n- [ ] Replace `createAngularTable` with `injectTable` in a valid Angular injection context.\n- [ ] Hoist features, columns, and factories outside the signal-tracked initializer.\n- [ ] Read state through signal-backed atoms; wire controlled signals with value-or-updater callbacks or stable Angular Store atoms.\n- [ ] Import current FlexRender directives, distinguish render functions from component types, and preserve instance-method receivers.\n- [ ] Audit repeated options and component registries for the optional `createTableHook`/`injectAppTable` path.\n\n## Apply the affected mappings\n\nRead [adapter-migration](references/adapter-migration.md) when changing construction, rendering, state, or app hooks. Read the relevant core migration references for each affected shared API; this adapter checklist does not replace that audit.\n\nFor complete v9 construction examples, read [getting-started](../getting-started/SKILL.md). For reactive state repairs, read [table-state](../table-state/SKILL.md).\n\n## Final checks\n\n- [ ] All shared core migration checks and affected mappings have been applied.\n- [ ] The framework checklist above passes with the current adapter declarations.\n- [ ] Model inputs remain stable and state changes reach their reactive owner.\n\n## API discovery\n\nInspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`.\n\n\n# Angular Table reactivity\n\nRead for Angular subscription boundaries, shared state, or updates that require more than the default rendering behavior.\n\nThis reference inherits the version of its owning skill.\n\n## Share state through an external atom\n\n\n\n```ts\nimport { Component, computed } from '@angular/core'\nimport { createAtom } from '@tanstack/angular-store'\nimport {\n injectTable,\n rowPaginationFeature,\n tableFeatures,\n type PaginationState,\n} from '@tanstack/angular-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\n@Component({ selector: 'page-status', template: `Page {{ pageIndex() + 1 }}` })\nexport class PageStatus {\n readonly paginationAtom = createAtom({\n pageIndex: 0,\n pageSize: 20,\n })\n readonly table = injectTable(() => ({\n features,\n columns,\n data,\n atoms: { pagination: this.paginationAtom },\n }))\n readonly pageIndex = computed(\n () => this.table.atoms.pagination.get().pageIndex,\n )\n}\n```\n\nThe atom can feed Query or other consumers without reading a controlled signal in the Table initializer. Table feature APIs write the external atom directly; omit `onPaginationChange` for this owner.\n\n## Derive values with equality control\n\nUse Angular `computed` when deriving a value or applying custom equality. For a recreated object or array result, use the adapter's `shallow` comparator when appropriate. A direct template atom read is already signal-reactive; nested `computed(() => computed(... )())` adds no tracking benefit.\n\nKeep static features, column factories, and row-model factories outside the initializer. Signal reads inside it establish dependencies, so a controlled pagination write reruns the initializer and calls `setOptions`.\n\n## Controlled updater mistakes\n\nWrong: `onPaginationChange: next => this.pagination.set(next)`.\n\nCorrect: use `typeof next === 'function' ? this.pagination.update(next) : this.pagination.set(next)`. Storing the updater itself corrupts the signal's state shape.\n\nUse one owner for each slice. An external atom takes precedence over `state` and starting values; those options are not synchronized fallback owners.\n\n## API discovery\n\nInspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/angular/guide/table-state.md`\n- `TanStack/table:examples/angular/basic-external-state`\n- `TanStack/table:packages/angular-table/src/injectTable.ts`\n\n\n---\nname: table-state\ndescription:\n Read and control Table v9 state in angular. Use for tracked reads, subscriptions,\n controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/angular-table'\n framework: angular\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/angular/guide/table-state.md\n - TanStack/table:examples/angular/basic-external-state\n - TanStack/table:packages/angular-table/src/injectTable.ts\n---\n\nLoad `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules.\n\nAngular-backed atom reads participate in tracking inside templates, `computed`, and `effect`. A value captured outside those contexts is only a snapshot. Use `computed` for derivation or equality control; wrapping an atom is not required to make it reactive.\n\n## Controlled signal setup\n\n\n\n```ts\nimport { Component, signal } from '@angular/core'\nimport {\n injectTable,\n rowPaginationFeature,\n tableFeatures,\n} from '@tanstack/angular-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\n@Component({\n selector: 'page-status',\n template: ``,\n})\nexport class PageStatus {\n readonly pagination = signal({ pageIndex: 0, pageSize: 20 })\n readonly table = injectTable(() => ({\n features,\n columns,\n data,\n state: { pagination: this.pagination() },\n onPaginationChange: (next) =>\n typeof next === 'function'\n ? this.pagination.update(next)\n : this.pagination.set(next),\n }))\n}\n```\n\n## Reactive boundaries\n\n- Construct in Angular injection context. Signal writes used by the initializer rerun it and call `setOptions`; hoist features and columns and keep data references stable.\n- Supply both `state.pagination` and `onPaginationChange` when a signal owns the slice. Resolve updater functions with `.update(next)` instead of storing the function with `.set(next)`.\n- For shared state, create a stable atom with `@tanstack/angular-store` and pass it through `atoms`. Its writes do not need to flow through a controlled signal in the initializer.\n- Use `table.store.get()` for the flat state. Prefer `table.atoms..get()` for narrow tracked reads.\n\n## Read for the task\n\nFor advanced reactive boundaries, shared atoms, or detailed subscription examples, read [reactivity](references/reactivity.md). For construction or rendering setup, read [getting-started](../getting-started/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`.\n\n\n# Ember reusable table hooks\n\nRead when multiple Ember tables share features, defaults, or rendering conventions. Keep standalone construction for tables without shared conventions. For controlled state or reactive reads, read [table-state](../../table-state/SKILL.md).\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```gts\nimport Component from '@glimmer/component'\nimport { tracked } from '@glimmer/tracking'\nimport {\n createSortedRowModel,\n createTableHook,\n rowSortingFeature,\n sortFn_alphanumeric,\n tableFeatures,\n} from '@tanstack/ember-table'\n\nconst features = tableFeatures({\n rowSortingFeature,\n sortedRowModel: createSortedRowModel(),\n sortFns: { alphanumeric: sortFn_alphanumeric },\n})\n\nexport const { appFeatures, createAppColumnHelper, createAppTable } =\n createTableHook({\n features,\n enableSortingRemoval: false,\n })\n\ntype Person = { id: string; name: string }\nconst columnHelper = createAppColumnHelper()\nconst columns = columnHelper.columns([\n columnHelper.accessor('name', { header: 'Name' }),\n])\n\nexport default class PeopleTable extends Component {\n @tracked data: Person[] = []\n\n table = createAppTable(this, () => ({\n columns,\n data: this.data,\n }))\n}\n```\n\nCreate the hook and column helpers at stable module scope. Pass the component as the first `createAppTable` argument to bind external-atom cleanup to its lifecycle; the one-argument thunk form remains supported for standalone tables. `createAppTable` preserves the `useTable` options thunk, so tracked reads such as `this.data` remain reactive. Do not pass `features` again at the table call site; the factory owns the feature set and binds it into column inference.\n\n## Composition contract\n\n- Hook options supply stable shared `features` and default table options.\n- `createAppColumnHelper()` binds the feature type while inferring each row type.\n- `createAppTable(() => options)` merges shared defaults with table-specific options.\n- Table-specific options win over shared defaults, except that the factory remains the feature owner.\n- `appFeatures` exposes the exact registered feature set for helper types or reusable utilities.\n\nShared options intentionally exclude `columns`, `data`, and `state`. Keep model inputs and controlled state at each table call site; share conventions, not one mutable state object across unrelated tables.\n\nSharing `rowSortingFeature`, `sortedRowModel`, and sorting defaults gives every table sorting capability; it does not make their internal sorting state shared. The factory technically accepts a stable external atom in shared `atoms`, but that deliberately couples tables and their column IDs. Prefer independent state unless synchronized tables are the actual product behavior.\n\n## Render normally\n\nEmber's factory does not register `AppTable`, `AppCell`, `AppHeader`, context hooks, or reusable component registries. Continue rendering with `FlexRenderCell`, `FlexRenderHeader`, and `FlexRenderFooter`. Continue wrapping receiver-dependent v9 methods in Ember template helpers as described by [getting-started](../SKILL.md).\n\n## Common mistakes\n\n### HIGH Copying another adapter's component registry\n\nWrong: expect `table.AppTable`, `useTableContext`, or a `tableComponents` option from React, Solid, Svelte, or Lit examples.\n\nCorrect: use the normal Ember FlexRender components and pass the table through ordinary Ember composition when another component truly needs it.\n\nThe Ember hook shares features/defaults and type inference only.\n\n### HIGH Passing features per table\n\nWrong:\n\n```gts\ncreateAppTable(() => ({ features: otherFeatures, columns, data: this.data }))\n```\n\nCorrect: define a separate app hook when a table needs a different feature set. `createAppTable` omits `features` from its call-site type.\n\n### HIGH Recreating the hook or columns with tracked updates\n\nWrong: call `createTableHook`, `createAppColumnHelper`, or `columns(...)` inside a component getter or the `createAppTable` thunk.\n\nCorrect: create them once at module scope and let the table thunk read only changing inputs.\n\n### MEDIUM Sharing controlled state as a default\n\nThe hook options omit `state`. Put `state` and matching `on[State]Change` callbacks in each `createAppTable` thunk so every table has one clear owner per slice. Use a shared external atom only when tables intentionally coordinate the same compatible slice.\n\n### MEDIUM Repeating manual feature generics\n\nUse `createAppColumnHelper()`; do not thread `typeof features` through every column helper after the factory has already captured it.\n\n## API discovery\n\nInspect `node_modules/@tanstack/ember-table/declarations/create-table-hook.d.ts` for the installed factory return shape, omitted options, and merge precedence. Inspect `use-table.d.ts` for thunk reactivity and `node_modules/@tanstack/table-core/dist/features//` for the shared feature APIs. Do not infer Ember component/context behavior from another adapter's createTableHook.\n\n## Sources\n\n- `TanStack/table:docs/framework/ember/guide/composable-tables.md`\n- `TanStack/table:examples/ember/basic-app-table`\n- `TanStack/table:packages/ember-table/src/create-table-hook.ts`\n\n\n---\nname: getting-started\ndescription:\n Create and render Table v9 with the ember adapter. Route reusable createTableHook\n defaults, and framework setup; use table-state for reactive ownership.\nmetadata:\n type: framework\n library: '@tanstack/ember-table'\n framework: ember\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/ember/quick-start.md\n - TanStack/table:examples/ember/basic-table\n - TanStack/table:packages/ember-table/src/index.ts\n - TanStack/table:packages/ember-table/src/use-table.ts\n - TanStack/table:packages/ember-table/src/FlexRender.gts\n - TanStack/table:docs/framework/ember/guide/composable-tables.md\n - TanStack/table:examples/ember/basic-app-table\n - TanStack/table:packages/ember-table/src/create-table-hook.ts\n---\n\nLoad `intent load @tanstack/table-core#core` first for the headless model, stable inputs, and column inference.\n\nEmber 5.8 or newer requires Embroider or ember-auto-import v2. Prefer `.gts` or `.gjs` template-tag components with Glint.\n\n## Setup\n\n```gts\nimport Component from '@glimmer/component'\nimport { tracked } from '@glimmer/tracking'\nimport {\n FlexRenderCell,\n createColumnHelper,\n tableFeatures,\n useTable,\n type Cell,\n type Row,\n} from '@tanstack/ember-table'\n\ntype Person = { id: string; name: string }\n\nconst features = tableFeatures({})\nconst columnHelper = createColumnHelper()\nconst columns = columnHelper.columns([\n columnHelper.accessor('name', { header: 'Name' }),\n])\nconst initialData: Person[] = [{ id: '1', name: 'Ada' }]\nconst getRowId = (row: Person) => row.id\n\nconst getAllCells = (\n row: Row,\n): Array> => row.getAllCells()\n\nexport default class PeopleTable extends Component {\n @tracked data = initialData\n\n table = useTable(this, () => ({\n features,\n columns,\n data: this.data,\n getRowId,\n }))\n\n get rows() {\n return this.table.getRowModel().rows\n }\n\n \n}\n```\n\n## Construction and rendering\n\n`useTable` takes an options thunk. Read tracked data inside it, and keep features, atoms, and columns stable. In a component, pass `this` as the owner to bind external-atom cleanup to the component lifecycle. The one-argument thunk form remains available for standalone tables.\n\nRead Table APIs in template-consumed getters. Column, row, cell, and header prototype methods require their receiver, so use a getter or module helper such as `getAllCells(row)` rather than an extracted method. Wrap event calls the same way.\n\nUse `FlexRenderCell`, `FlexRenderHeader`, and `FlexRenderFooter` for the matching object. Rendered components receive `@ctx` and optional `@options` through `flexRenderComponent(Component, options)`.\n\nWith `tableFeatures({})`, render `row.getAllCells()`. Register `columnVisibilityFeature` before switching to `row.getVisibleCells()`.\n\n## Read for the task\n\n- When adding or configuring optional features, load `intent load @tanstack/table-core#table-features` and read only references for the requested behavior.\n- For state ownership or reactive reads, read [table-state](../table-state/SKILL.md).\n- When tables share features, defaults, or reusable UI, read [create-table-hook](references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/ember-table/declarations/index.d.ts`, `use-table.d.ts`, `signal.d.ts`, and `FlexRender.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n\n\n# Ember Table reactivity\n\nRead for Ember subscription boundaries, shared state, or updates that require more than the default rendering behavior.\n\nThis reference inherits the version of its owning skill.\n\n## Own shared state with an Ember atom\n\n```gts\nimport Component from '@glimmer/component'\nimport { on } from '@ember/modifier'\nimport {\n createAtom,\n rowPaginationFeature,\n tableFeatures,\n useTable,\n type PaginationState,\n} from '@tanstack/ember-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nexport default class SharedPage extends Component {\n paginationAtom = createAtom({ pageIndex: 0, pageSize: 10 })\n table = useTable(this, () => ({\n features,\n columns,\n data,\n atoms: { pagination: this.paginationAtom },\n }))\n\n get pageNumber() {\n return this.paginationAtom.get().pageIndex + 1\n }\n\n nextPage = () => this.table.nextPage()\n\n \n}\n```\n\nThe adapter re-exports `createAtom` with Glimmer-reactive reads. Feature APIs write through to that owner, so omit `onPaginationChange`. Supplying the component owner binds external-atom cleanup to its destruction. Use the one-argument thunk form only when no Ember owner is available.\n\n## Construction-time ownership\n\nThe options thunk updates ordinary live options from tracked reads, but features and external atom owners are fixed during construction. Keep them stable. Replacing an `atoms` object in a getter does not swap the table's owners.\n\n## Template tracking is pull-based\n\nRead `table.atoms..get()`, `table.store.state.`, or a Table API inside a template-consumed getter. There is no selector argument or `table.Subscribe`; `table.store.subscribe` is a no-op. Subscribe to a supplied external atom when a separate consumer actually needs push notifications.\n\n`table.getState()` is removed v8 API. Caching a value outside tracked consumption does not establish Glimmer tracking.\n\n## Controlled state pitfalls\n\nResolve value-or-updater callbacks and assign a fresh tracked value. `this.pagination.pageIndex++` mutates an untracked nested property. A no-op callback freezes the controlled slice. Prefer `table.setPageIndex(...)` to invoke the callback with the feature's update rules.\n\nAn external atom wins over controlled state. Writing an internal base atom cannot replace the external value; use the feature API or write the external owner.\n\n## API discovery\n\nInspect `node_modules/@tanstack/ember-table/declarations/index.d.ts`, `use-table.d.ts`, `signal.d.ts`, and `FlexRender.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/ember/guide/table-state.md`\n- `TanStack/table:examples/ember/basic-external-atoms`\n- `TanStack/table:examples/ember/basic-external-state`\n- `TanStack/table:packages/ember-table/src/use-table.ts`\n- `TanStack/table:packages/ember-table/src/reactivity.ts`\n- `TanStack/table:packages/ember-table/src/signal.ts`\n\n\n---\nname: table-state\ndescription:\n Read and control Table v9 state in ember. Use for tracked reads, subscriptions,\n controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/ember-table'\n framework: ember\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/ember/guide/table-state.md\n - TanStack/table:examples/ember/basic-external-atoms\n - TanStack/table:examples/ember/basic-external-state\n - TanStack/table:packages/ember-table/src/use-table.ts\n - TanStack/table:packages/ember-table/src/reactivity.ts\n - TanStack/table:packages/ember-table/src/signal.ts\n---\n\nLoad `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules.\n\nGlimmer tracks Table APIs, atom reads, and store-property reads inside template-consumed getters. A value cached outside tracked consumption is only a snapshot. There is no `table.Subscribe` or selector argument to `useTable`; `table.store.subscribe` is intentionally a no-op and cannot drive rendering.\n\n## Controlled tracked setup\n\n```gts\nimport Component from '@glimmer/component'\nimport { tracked } from '@glimmer/tracking'\nimport { on } from '@ember/modifier'\nimport {\n rowPaginationFeature,\n tableFeatures,\n useTable,\n type PaginationState,\n} from '@tanstack/ember-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nexport default class PageStatus extends Component {\n @tracked pagination: PaginationState = { pageIndex: 0, pageSize: 10 }\n table = useTable(this, () => ({\n features,\n columns,\n data,\n state: { pagination: this.pagination },\n onPaginationChange: (next) => {\n this.pagination =\n typeof next === 'function' ? next(this.pagination) : next\n },\n }))\n\n get pageNumber() {\n return this.table.atoms.pagination.get().pageIndex + 1\n }\n\n nextPage = () => this.table.nextPage()\n\n \n}\n```\n\n## Reactive boundaries\n\n- Read tracked values inside the options thunk and assign callback results back to their tracked owner. Mutating `this.pagination.pageIndex++` does not notify the thunk.\n- `features` and `atoms` are construction-time inputs. Updating ordinary live options does not replace the feature set or atom owners; create them once before `useTable`.\n- Pass the component as the owner for lifecycle cleanup when external atoms are used. The standalone one-argument thunk form remains supported.\n- Use the adapter's `createAtom` for external Glimmer-reactive ownership. Read it in a tracked getter and use feature APIs or the external atom to write.\n- Keep features, columns, and data stable. Call receiver-dependent methods through getters or helpers rather than passing extracted methods to templates.\n\n## Read for the task\n\nFor advanced reactive boundaries, shared atoms, or detailed subscription examples, read [reactivity](references/reactivity.md). For construction or rendering setup, read [getting-started](../getting-started/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/ember-table/declarations/index.d.ts`, `use-table.d.ts`, `signal.d.ts`, and `FlexRender.d.ts`. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n\n\n# Lit reusable table hooks\n\nRead when multiple Lit tables share features, defaults, or rendering conventions. Keep standalone construction for tables without shared conventions. For controlled state or reactive reads, read [table-state](../../table-state/SKILL.md).\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```ts\nimport {\n createSortedRowModel,\n createTableHook,\n rowSortingFeature,\n tableFeatures,\n} from '@tanstack/lit-table'\n\nconst features = tableFeatures({\n rowSortingFeature,\n sortedRowModel: createSortedRowModel(),\n})\n\nexport const { createAppColumnHelper, useAppTable, useTableContext } =\n createTableHook({\n features,\n getRowId: (row: { id: string }) => row.id,\n })\n```\n\nUse `createAppColumnHelper()` to define app columns. In a `LitElement`, capture the host in a local variable and initialize `useAppTable(host, options, selector)` once as a field; call the returned `table()` function during render. The maintained composable-tables example shows the complete host/getter shape.\n\n## Core patterns\n\n### Bind shared features, not table-specific data\n\nPut feature plugins, row-model factories, default options, row IDs, and shared render conventions in the factory. Pass each table's columns, data, and controlled state to `useAppTable`.\n\n### Add component registries only for real conventions\n\nRegister common cell/header functions when multiple tables use them. Render them through `table.AppCell` and `table.AppHeader`; ordinary tables can use the returned table instance without registries.\n\n### Consume table context in custom elements\n\nCreate the returned `useTableContext(this)` once as a custom-element field. Read its `.value` during render and handle `undefined` before the provider is available. The value is a base `LitTable` with the factory's feature types, not the extended table with registered components or `App*` helpers.\n\n## Common mistakes\n\n### HIGH Prop drilling replaces typed context\n\nWrong: pass the stable table instance through every custom-element property boundary.\n\nCorrect: call the `useTableContext` returned by the same `createTableHook` in the nearest registered/custom control.\n\nUse the context from the same factory so its feature types and provider match. Registered render functions receive their enhanced cell/header values through `AppCell` and `AppHeader`.\n\nSource: TanStack/table:packages/lit-table/src/createTableHook.ts\n\n### HIGH Recreating useAppTable each render\n\nWrong: call `useAppTable(this, options)` afresh inside `render`.\n\nCorrect: initialize it once as a host field and call `this.appTable.table()` during render.\n\nThe helper owns a TableController and context provider tied to the host lifecycle.\n\nSource: TanStack/table:examples/lit/composable-tables\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/createTableHook.d.ts`. Use the matching installed implementation rather than assuming JSX-adapter component APIs exist in Lit.\n\n## Sources\n\n- `TanStack/table:docs/framework/lit/guide/composable-tables.md`\n- `TanStack/table:examples/lit/composable-tables`\n- `TanStack/table:packages/lit-table/src/createTableHook.ts`\n\n\n# Lit Table with TanStack Virtual\n\nRead when rendering a large Lit table with TanStack Virtual. Virtual operates on the final Table model. Read [table-state](../../table-state/SKILL.md) if model counts or rendered state stop updating.\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```ts\nimport { LitElement, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { VirtualizerController } from '@tanstack/lit-virtual'\nimport {\n TableController,\n tableFeatures,\n type ColumnDef,\n} from '@tanstack/lit-table'\n\ntype Item = { id: string; name: string }\nconst features = tableFeatures({})\nconst columns: Array> = [\n { accessorKey: 'name', header: 'Name' },\n]\nconst data: Array = Array.from({ length: 10_000 }, (_, id) => ({\n id: String(id),\n name: `Item ${id}`,\n}))\n\n@customElement('virtual-items')\nexport class VirtualItems extends LitElement {\n private controller = new TableController(this)\n private scroller = createRef()\n private virtualizer = new VirtualizerController(this, {\n count: data.length,\n getScrollElement: () => this.scroller.value,\n estimateSize: () => 32,\n overscan: 5,\n })\n\n protected render() {\n const table = this.controller.table({\n features,\n columns,\n data,\n getRowId: (row) => row.id,\n })\n const rows = table.getRowModel().rows\n const v = this.virtualizer.getVirtualizer()\n v.setOptions({ ...v.options, count: rows.length })\n\n return html`\n
\n ${v\n .getVirtualItems()\n .map(\n (item) =>\n html`\n ${rows[item.index].getValue('name')}\n
`,\n )}\n \n `\n }\n}\n```\n\n## Core patterns\n\n### Virtualize the final row model\n\nSet the virtualizer count from `table.getRowModel().rows.length`; index virtual items into that same array so filtering, sorting, expansion, and pagination are respected.\n\n### Keep geometry sources consistent\n\nFor column virtualization, estimate from `column.getSize()` and remeasure when columnSizing changes. Render widths from the same sizing state.\n\n### Treat unsupported combinations as user composition\n\nDrag-and-drop plus virtualization is not a maintained Table recipe. Start from the maintained Virtual example and reconcile both libraries' transforms, measurement, and auto-scroll contracts explicitly.\n\n## Common mistakes\n\n### HIGH Virtualizing raw data\n\nWrong: index virtual items into the original `data` array.\n\nCorrect: index into `table.getRowModel().rows`.\n\nRaw data ignores active Table processing and produces mismatched rows after sorting or filtering.\n\nSource: TanStack/table:examples/lit/virtualized-rows\n\n### HIGH Count and rows come from different models\n\nWrong: use `data.length` after filters change but render filtered rows.\n\nCorrect: update the virtualizer count from the same current `rows` array being rendered.\n\nMismatched geometry can index undefined rows or leave blank scroll space.\n\nSource: TanStack/table:examples/lit/virtualized-rows\n\n### HIGH Recreating columns during host renders\n\nWrong: pass `columns: [...columns]` from `render()` to work around a readonly tuple.\n\nCorrect: declare a stable mutable `Array>` once and pass `columns` directly.\n\nLit host updates can be driven by scrolling and measurement. A fresh column reference rebuilds Table's column pipeline on every such render.\n\nSource: TanStack/table:examples/lit/virtualized-rows\n\n### HIGH Sticky and sizing CSS assumed automatic\n\nWrong: add a VirtualizerController and expect sticky headers, widths, and transforms.\n\nCorrect: implement the scroll container, total-size spacer, absolute row transforms, sticky regions, and widths in Lit CSS/templates.\n\nBoth libraries are headless over rendering geometry.\n\nSource: TanStack/table:docs/framework/lit/guide/virtualization.md\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/index.d.ts` and `node_modules/@tanstack/lit-virtual/dist/`. Use maintained examples for geometry; do not register Virtual in `tableFeatures`.\n\n## Sources\n\n- `TanStack/table:docs/framework/lit/guide/virtualization.md`\n- `TanStack/table:examples/lit/virtualized-rows`\n- `TanStack/table:examples/lit/virtualized-columns`\n- `TanStack/table:examples/lit/virtualized-infinite-scrolling`\n\n\n---\nname: getting-started\ndescription:\n Create and render Table v9 with the lit adapter. Route reusable createTableHook\n components, Virtual integration, and framework setup; use table-state for reactive ownership.\nmetadata:\n type: framework\n library: '@tanstack/lit-table'\n framework: lit\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/lit/guide/migrating.md\n - TanStack/table:examples/lit/basic-table-controller\n - TanStack/table:packages/lit-table/src/index.ts\n - TanStack/table:docs/framework/lit/guide/composable-tables.md\n - TanStack/table:examples/lit/composable-tables\n - TanStack/table:packages/lit-table/src/createTableHook.ts\n - TanStack/table:docs/framework/lit/guide/virtualization.md\n - TanStack/table:examples/lit/virtualized-rows\n - TanStack/table:examples/lit/virtualized-columns\n - TanStack/table:examples/lit/virtualized-infinite-scrolling\n---\n\nLoad `intent load @tanstack/table-core#core` first for the headless model, stable inputs, and column inference.\n\n## Setup\n\n```ts\nimport { LitElement, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport {\n FlexRender,\n TableController,\n createColumnHelper,\n tableFeatures,\n} from '@tanstack/lit-table'\n\ntype Person = { id: string; name: string }\n\nconst features = tableFeatures({})\nconst columnHelper = createColumnHelper()\nconst columns = columnHelper.columns([\n columnHelper.accessor('name', { header: 'Name' }),\n])\n\n@customElement('people-table')\nexport class PeopleTable extends LitElement {\n @state() private people: Array = [{ id: '1', name: 'Ada' }]\n private tableController = new TableController(this)\n\n protected render() {\n const table = this.tableController.table({\n features,\n columns,\n data: this.people,\n getRowId: (row) => row.id,\n })\n\n return html`\n \n ${repeat(\n table.getHeaderGroups(),\n (group) => group.id,\n (group) =>\n html`\n ${repeat(\n group.headers,\n (header) => header.id,\n (header) =>\n html``,\n )}\n `,\n )}\n \n \n ${repeat(\n table.getRowModel().rows,\n (row) => row.id,\n (row) =>\n html`\n ${repeat(\n row.getAllCells(),\n (cell) => cell.id,\n (cell) => html``,\n )}\n `,\n )}\n \n
\n ${header.isPlaceholder ? null : FlexRender({ header })}\n
${FlexRender({ cell })}
`\n }\n}\n```\n\n## Construction and rendering\n\nKeep one `TableController` as a host field. V9 takes only the host in its constructor; pass current options to `controller.table(...)` during every render. Recreating the controller repeats lifecycle and subscription work.\n\nKeep features, columns, and data stable across host updates. Use `FlexRender({ cell })`, `FlexRender({ header })`, or `FlexRender({ footer })` in Lit templates. The application owns semantic markup, accessibility, widths, and sticky positioning.\n\nThe controller selects all registered state by default. Narrow selected state only when host update cost requires it; use [table-state](../table-state/SKILL.md) for selectors and template subscriptions.\n\n## Read for the task\n\n- When adding or configuring optional features, load `intent load @tanstack/table-core#table-features` and read only references for the requested behavior.\n- For state ownership or reactive reads, read [table-state](../table-state/SKILL.md).\n- When tables share features, defaults, or reusable UI, read [create-table-hook](references/create-table-hook.md).\n- When virtualizing rows or columns, read [with-tanstack-virtual](references/with-tanstack-virtual.md).\n- When upgrading v8 code, read [migrate-v8-to-v9](../migrate-v8-to-v9/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/index.d.ts`, then `TableController.d.ts`, `flexRender.d.ts`, or the relevant exported declaration. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n\n\n# Lit v8-to-v9 adapter migration\n\nRead when applying the Lit construction, state, rendering, or reusable-hook checks. Complete the shared audit with `intent load @tanstack/table-core#migrate-v8-to-v9`; its references own the shared feature and type rename inventories.\n\nThis reference inherits the version of its owning skill.\n\n## Framework requirements\n\nLit 3.1.3 or newer within v3 (`lit ^3.1.3`) and `@lit/context ^1.1.0` are required.\n\n## Construction\n\n| v8 | v9 |\n| ------------------------------------------ | ---------------------------------------------------- |\n| `new TableController(this, () => options)` | `new TableController(this)` |\n| `controller.table` property | `controller.table(options, selector?)` during render |\n\nThe controller owns host subscriptions and cleanup. Keep it as a field and supply current stable model inputs during render. Constructing it on every render repeats lifecycle work.\n\n## Lit state migration\n\n- `table.getState().sorting` becomes selected `table.state.sorting` for rendering or `table.atoms.sorting.get()` for a current snapshot. Store snapshots do not establish template subscriptions.\n- `table.state` contains all registered slices by default. Pass a second-argument selector to `controller.table(...)` only to narrow the render-selected surface.\n- Use `table.subscribe(table.store, stableSelector, renderCallback)` for selected template state. Keep the selector reference stable outside render.\n- Controlled state uses Lit `@state()` fields and matching `on[State]Change` callbacks that resolve value-or-function updaters.\n- External atoms come from `@tanstack/store` and are provided through `atoms`. Never provide both `atoms.pagination` and `state.pagination`.\n- The controller owns state subscriptions and requests host updates. Apply current options with `controller.table(...)` during render; keep the controller as a stable host field.\n\n## Rendering and composition\n\n| v8 | v9 |\n| -------------------------- | ----------------------------------------------------------------------------- |\n| `flexRender(def, context)` | `FlexRender({ cell })`, `FlexRender({ header })`, or `FlexRender({ footer })` |\n| Standalone helper only | `table.FlexRender({ cell })` is also available |\n| Repeated raw options | `tableOptions(...)` composition |\n| Repeated conventions | `createTableHook({ features, ... })` |\n\n`createTableHook` returns a host-bound app table helper and pre-bound column helper. Construct the app helper with the Lit host, then call its `.table()` during render. It is optional and intended for recurring application conventions.\n\n## Related task guidance\n\nFor a full construction example, read [getting-started](../../getting-started/SKILL.md). For tracked reads and controlled updates, read [table-state](../../table-state/SKILL.md). When creating a reusable app factory, read [create-table-hook](../../getting-started/references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/index.d.ts`, then `TableController.d.ts`, `flexRender.d.ts`, or the relevant exported declaration. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/lit/guide/migrating.md`\n- `TanStack/table:packages/lit-table/src/index.ts`\n- `TanStack/table:examples/lit/basic-table-controller`\n\n\n---\nname: migrate-v8-to-v9\ndescription:\n Migrate lit Table v8 to v9. Audit framework construction, rendering, state, and\n app hooks, with shared API changes in the core migration skill.\nmetadata:\n type: lifecycle\n library: '@tanstack/lit-table'\n framework: lit\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#migrate-v8-to-v9'\nsources:\n - TanStack/table:docs/framework/lit/guide/migrating.md\n - TanStack/table:packages/lit-table/src/index.ts\n - TanStack/table:examples/lit/basic-table-controller\n---\n\nLoad `intent load @tanstack/table-core#migrate-v8-to-v9` first and audit its entire shared checklist. It owns feature registration, row-model slots, state/reset changes, prototype methods, logical pinning, sizing/resizing, sorting, selection, helpers, and TypeScript mappings.\n\n## Framework prerequisites\n\nLit 3.1.3 or newer within v3 (`lit ^3.1.3`) and `@lit/context ^1.1.0` are required.\n\n## Lit migration checklist\n\n- [ ] Construct one `TableController(this)` as a stable host field.\n- [ ] Replace the v8 `controller.table` property/options thunk with `controller.table(options, selector?)` during render.\n- [ ] Read selected `table.state` for rendering; use atom snapshots in handlers or stable `table.subscribe` selectors for template regions.\n- [ ] Feed resolved controlled callbacks back through reactive Lit properties, or use stable external atoms.\n- [ ] Switch render helpers to `FlexRender({ cell })`, `FlexRender({ header })`, or `FlexRender({ footer })` and preserve instance-method receivers.\n- [ ] If app conventions repeat, construct a host-bound `useAppTable` once and call its `.table()` during render.\n\n## Apply the affected mappings\n\nRead [adapter-migration](references/adapter-migration.md) when changing construction, rendering, state, or app hooks. Read the relevant core migration references for each affected shared API; this adapter checklist does not replace that audit.\n\nFor complete v9 construction examples, read [getting-started](../getting-started/SKILL.md). For reactive state repairs, read [table-state](../table-state/SKILL.md).\n\n## Final checks\n\n- [ ] All shared core migration checks and affected mappings have been applied.\n- [ ] The framework checklist above passes with the current adapter declarations.\n- [ ] Model inputs remain stable and state changes reach their reactive owner.\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/index.d.ts`, then `TableController.d.ts`, `flexRender.d.ts`, or the relevant exported declaration. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n\n\n# Lit Table reactivity\n\nRead for Lit subscription boundaries, shared state, or updates that require more than the default rendering behavior.\n\nThis reference inherits the version of its owning skill.\n\n## Select a template region independently\n\n\n\n```ts\nimport { LitElement, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport {\n TableController,\n rowPaginationFeature,\n tableFeatures,\n type TableState,\n} from '@tanstack/lit-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\nconst noOwnerState = () => null\nconst pageIndex = (state: TableState) =>\n state.pagination.pageIndex\n\n@customElement('page-island')\nexport class PageIsland extends LitElement {\n private controller = new TableController(\n this,\n )\n\n protected render() {\n const table = this.controller.table(\n { features, columns, data },\n noOwnerState,\n )\n return html`\n ${table.subscribe(table.store, pageIndex, (page) => html`Page ${page + 1}`)}\n \n `\n }\n}\n```\n\nThe owner selector opts this host out of state-driven updates. Every state-dependent region must then subscribe to its own dependencies. Keep both selectors stable. Recreating a `table.subscribe` selector changes its subscription work even if it computes the same value.\n\n## Shared atoms and controlled properties\n\nFor cross-system state, create a stable external TanStack Store atom and pass it in `atoms`. Feature APIs write the supplied atom. For host-owned state, use `@state()` plus the corresponding callback, resolve value-or-function updaters, and feed the property into the next `controller.table` call.\n\nUse `table.atoms.pagination.get()` in an event handler for the current snapshot. A cached store property outside render does not stay current and does not subscribe a template region.\n\n## Host lifecycle and accepted updates\n\nKeep the controller as a host field. It owns subscriptions and cleanup. `controller.table` stages fresh options for same-render reads; `hostUpdated` publishes captured controlled state after Lit commits. External atoms remain direct owners.\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/index.d.ts`, then `TableController.d.ts`, `flexRender.d.ts`, or the relevant exported declaration. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/lit/guide/table-state.md`\n- `TanStack/table:examples/lit/basic-external-state`\n- `TanStack/table:packages/lit-table/src/TableController.ts`\n\n\n---\nname: table-state\ndescription:\n Read and control Table v9 state in lit. Use for tracked reads, subscriptions,\n controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/lit-table'\n framework: lit\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/lit/guide/table-state.md\n - TanStack/table:examples/lit/basic-external-state\n - TanStack/table:packages/lit-table/src/TableController.ts\n---\n\nLoad `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules.\n\n`TableController` selects all registered state by default and requests host updates when selected state changes. `table.state` is the selected render value. `table.atoms..get()` and `table.store.state` are snapshots; those reads do not create a template subscription.\n\n## Controlled property setup\n\n\n\n```ts\nimport { LitElement, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport {\n TableController,\n rowPaginationFeature,\n tableFeatures,\n type PaginationState,\n} from '@tanstack/lit-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'id' }]\nconst data = [{ id: '1' }]\n\n@customElement('page-status')\nexport class PageStatus extends LitElement {\n @state() private pagination: PaginationState = { pageIndex: 0, pageSize: 10 }\n private controller = new TableController(\n this,\n )\n\n protected render() {\n const table = this.controller.table({\n features,\n columns,\n data,\n state: { pagination: this.pagination },\n onPaginationChange: (next) => {\n this.pagination =\n typeof next === 'function' ? next(this.pagination) : next\n },\n })\n return html``\n }\n}\n```\n\n## Reactive boundaries\n\n- Keep one controller on the host and pass current options during render. Keep features, columns, and data references stable across host updates.\n- A second `controller.table(options, selector)` argument changes the shape of `table.state` and gates host updates. Keep reused selectors stable.\n- Use `table.subscribe(source, selector, renderCallback)` for a template region that should update independently. Cache selector functions as host fields or module functions.\n- Feed every controlled callback result into the corresponding reactive property and pass it back through `state`. Use stable external atoms through `atoms` when sharing state outside the host.\n\n## Read for the task\n\nFor advanced reactive boundaries, shared atoms, or detailed subscription examples, read [reactivity](references/reactivity.md). For construction or rendering setup, read [getting-started](../getting-started/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/lit-table/dist/index.d.ts`, then `TableController.d.ts`, `flexRender.d.ts`, or the relevant exported declaration. Core feature APIs are in `node_modules/@tanstack/table-core/dist/features/`.\n\n\n---\nname: fuzzy-ranking\ndescription: >\n Rank fuzzy matches with rankItem, filter with RankingInfo.passed, compare saved ranking metadata with compareItems, and configure rankings, thresholds, accessors, min/max bounds, or diacritics. Load for @tanstack/match-sorter-utils itself or fuzzy Table filterMeta wiring.\nmetadata:\n type: core\n library: '@tanstack/match-sorter-utils'\n library_version: '9.2.6'\nsources:\n - 'TanStack/table:packages/match-sorter-utils/src/index.ts'\n - 'TanStack/table:docs/framework/react/guide/fuzzy-filtering.md'\n - 'TanStack/table:examples/react/filters-fuzzy'\n---\n\n## Setup\n\n\n\n```ts\nimport { compareItems, rankItem, rankings } from '@tanstack/match-sorter-utils'\n\nconst query = 'tan'\nconst values = ['table', 'tanner', 'router']\nexport const ranked = values\n .map((value) => ({\n value,\n info: rankItem(value, query, { threshold: rankings.MATCHES }),\n }))\n .filter((entry) => entry.info.passed)\n .sort((a, b) => compareItems(a.info, b.info))\n```\n\n## Core Patterns\n\n### Separate ranking, filtering, and sorting\n\nCall `rankItem` once, filter on `info.passed`, retain the `RankingInfo`, then order matching results with `compareItems`.\n\n### Rank object fields through accessors\n\n```ts\ntype Person = { name: string; email: string }\nconst person: Person = { name: 'Ada Lovelace', email: 'ada@example.test' }\nconst info = rankItem(person, 'lov', {\n accessors: [(item) => item.name, (item) => item.email],\n})\n```\n\nAccessor options can set a per-accessor threshold plus minRanking/maxRanking bounds.\n\n### Store ranking as Table filter metadata\n\nIn a Table filterFn, call `addMeta?.({ itemRank })`. Register the corresponding\nmeta shape with `filterMeta: metaHelper<{ itemRank: RankingInfo }>()`. A related\nsortFn reads `row.columnFiltersMeta[columnId]?.itemRank` and uses `compareItems`,\nfalling back to an ordinary comparator for ties or absent metadata. For the\nprimary Table composition, load `@tanstack/table-core#table-features` and read\nits global-filtering reference. Register the fuzzy filter under `filterFns`\nfor `globalFilterFn: 'fuzzy'`.\n\n## Common Mistakes\n\n### HIGH Numeric rank used as pass flag\n\nWrong: `if (rankItem(value, query).rank) include(value)`.\n\nCorrect: test `rankItem(value, query).passed`.\n\nRanks below the configured threshold can still be nonzero; `passed` records the threshold decision.\n\nSource: TanStack/table:packages/match-sorter-utils/src/index.ts\n\n### HIGH Ranking recomputed during sorting\n\nWrong: call `rankItem` for both rows on every comparator invocation.\n\nCorrect: retain RankingInfo during filtering and pass the stored values to `compareItems`.\n\nSorting is called many times; recomputing also risks using different query/options than the filter decision.\n\nSource: TanStack/table:docs/framework/react/guide/fuzzy-filtering.md\n\n### MEDIUM compareItems direction reversed twice\n\nWrong: negate `compareItems(a, b)` because a larger rank should appear first.\n\nCorrect: use `compareItems(a, b)` directly for ascending fuzzy relevance.\n\nThe function already returns -1 when `a.rank` is greater than `b.rank`.\n\nSource: TanStack/table:packages/match-sorter-utils/src/index.ts\n\n## API Discovery\n\nInspect `node_modules/@tanstack/match-sorter-utils/dist/index.d.ts` for the installed `RankItemOptions`, accessor attributes, ranking constants, and comparator behavior. For TanStack Table metadata integration, load `@tanstack/table-core#table-features` and read its global-filtering and sorting references.\n\n\n# Octane reusable table hooks\n\nRead when multiple Octane tables share features, defaults, or rendering conventions. Keep standalone construction for tables without shared conventions. For controlled state or reactive reads, read [table-state](../../table-state/SKILL.md).\n\nThis reference inherits the version of its owning skill.\n\n## Setup\n\n```tsrx\nimport {\n createTableHook,\n rowSelectionFeature,\n tableFeatures,\n} from '@tanstack/octane-table'\n\nexport const { createAppColumnHelper, useAppTable, useTableContext } =\n createTableHook({\n features: tableFeatures({ rowSelectionFeature }),\n getRowId: (row: { id: string }) => row.id,\n })\n```\n\nCreate the factory at module scope. Its wrappers have stable identities and read the latest table facade without remounting their child subtrees.\n\n## Core patterns\n\n### Use the factory-bound helper\n\n```tsrx\ntype Person = { id: string; name: string }\nconst helper = createAppColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n```\n\n### Consume typed context under its wrapper\n\n```tsrx\nfunction RowCount() @{\n const table = useTableContext()\n {String(table.getRowModel().rows.length)}\n}\n\nfunction Grid() @{\n const table = useAppTable({ data, columns })\n \n}\n```\n\n`AppTable` takes static children without a selector. Use function children when a selector supplies their value:\n\n```tsrx\n state.rowSelection}>\n {(rowSelection) => {String(Object.keys(rowSelection).length)}}\n\n```\n\nRender `AppTable`, `AppCell`, `AppHeader`, `AppFooter`, and registered components with JSX. The wrappers establish context and independent Octane scopes.\n\n### Isolate nested table setups\n\nDefault contexts are module-scoped and HMR-stable. Sibling tables are isolated by their providers, but nested factories can resolve a consumer to the inner provider. Create fresh contexts for distinct nested setups:\n\n```tsrx\nimport {\n createTableHook,\n createTableHookContexts,\n rowSelectionFeature,\n tableFeatures,\n} from '@tanstack/octane-table'\n\nconst features = tableFeatures({ rowSelectionFeature })\nconst { tableContext, cellContext, headerContext } =\n createTableHookContexts()\n\nexport const app = createTableHook({\n features,\n tableContext,\n cellContext,\n headerContext,\n})\n```\n\nPrefer hooks returned by `createTableHook` because their types include registered component maps.\n\n## Common mistakes\n\n### HIGH Reading outside the matching provider\n\nWrong:\n\n```tsrx\nfunction Grid() @{\n \n}\n```\n\nCorrect:\n\n```tsrx\nfunction Grid() @{\n const table = useAppTable({ data, columns })\n \n}\n```\n\nFactory context hooks throw actionable errors when the matching `AppTable`, `AppCell`, or `AppHeader` provider is missing.\n\nSource: `packages/octane-table/src/createTableHook.tsrx`\n\n### HIGH Recreating the factory during render\n\nWrong:\n\n```tsrx\nfunction Grid() @{\n const app = createTableHook({ features })\n const table = app.useAppTable({ data, columns })\n \n}\n```\n\nCorrect:\n\n```tsrx\nconst app = createTableHook({ features })\n\nfunction Grid() @{\n const table = app.useAppTable({ data, columns })\n \n}\n```\n\nA factory created during render makes hook configuration, wrappers, contexts, and registered component identities unstable.\n\nSource: `packages/octane-table/src/createTableHook.tsrx`\n\n## API discovery\n\nInspect `node_modules/@tanstack/octane-table/src/createTableHook.tsrx.d.ts`, `src/createTableHookContexts.ts`, and `src/types.ts` for exact return names, wrapper props, registries, and scoped context types.\n\n## Sources\n\n- `TanStack/table:docs/framework/octane/guide/composable-tables.md`\n- `TanStack/table:docs/framework/octane/guide/table-context.md`\n- `TanStack/table:examples/octane/composable-tables`\n- `TanStack/table:packages/octane-table/src/createTableHook.tsrx`\n- `TanStack/table:packages/octane-table/src/createTableHookContexts.ts`\n\n\n---\nname: getting-started\ndescription:\n Create and render Table v9 with the octane adapter. Route reusable createTableHook\n components, and framework setup; use table-state for reactive ownership.\nmetadata:\n type: framework\n library: '@tanstack/octane-table'\n framework: octane\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#core'\nsources:\n - TanStack/table:docs/framework/octane/quick-start.md\n - TanStack/table:examples/octane/basic-use-table\n - TanStack/table:packages/octane-table/src/index.ts\n - TanStack/table:packages/octane-table/src/useTable.tsrx\n - TanStack/table:docs/framework/octane/guide/composable-tables.md\n - TanStack/table:docs/framework/octane/guide/table-context.md\n - TanStack/table:examples/octane/composable-tables\n - TanStack/table:packages/octane-table/src/createTableHook.tsrx\n - TanStack/table:packages/octane-table/src/createTableHookContexts.ts\n---\n\nLoad `intent load @tanstack/table-core#core` first for the headless model, stable inputs, and column inference.\n\n## Setup\n\n```tsrx\nimport { createRoot, useState } from 'octane'\nimport {\n createColumnHelper,\n tableFeatures,\n useTable,\n} from '@tanstack/octane-table'\n\ntype Person = { name: string }\nconst features = tableFeatures({})\nconst helper = createColumnHelper()\nconst columns = helper.columns([helper.accessor('name', { header: 'Name' })])\n\nfunction PeopleTable() @{\n const [data] = useState([{ name: 'Ada' }])\n const table = useTable({ features, columns, data })\n\n \n \n @for (const group of table.getHeaderGroups(); key group.id) {\n \n @for (const header of group.headers; key header.id) {\n \n }\n \n }\n \n \n @for (const row of table.getRowModel().rows; key row.id) {\n \n @for (const cell of row.getAllCells(); key cell.id) {\n \n }\n \n }\n \n
\n}\n\nconst rootElement = document.getElementById('root')\nif (!rootElement) throw new Error('Root element not found')\ncreateRoot(rootElement).render(PeopleTable)\n```\n\n## Construction and rendering\n\nThis adapter distributes authored TypeScript and TSRX. Configure the consumer with `octane()` in `vite.config.ts` and the TSRX JSX import source `octane`. Author component bodies with `@{ ... }` and keyed `@for` loops for rows, headers, and cells.\n\nImport from `@tanstack/octane-table`. Render `table.FlexRender` as a component so it gets its own Octane scope. It preserves numbers including `0`, render descriptors, and component functions.\n\nKeep features and column definitions at module scope. For inputs that depend on component state, use `useMemo`; pass the current stable data array to `useTable`. Convert non-renderable values with `String(value)` when displaying them as text.\n\n## Read for the task\n\n- When adding or configuring optional features, load `intent load @tanstack/table-core#table-features` and read only references for the requested behavior.\n- For state ownership or reactive reads, read [table-state](../table-state/SKILL.md).\n- When tables share features, defaults, or reusable UI, read [create-table-hook](references/create-table-hook.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/octane-table/src/index.d.ts`, the matching `*.tsrx.d.ts` sidecar, and `src/types.ts`. This package publishes authored source; core APIs are in installed `@tanstack/table-core/dist/`.\n\n\n# Octane Table reactivity\n\nRead for Octane subscription boundaries, shared state, or updates that require more than the default rendering behavior.\n\nThis reference inherits the version of its owning skill.\n\n## Mount independent subscription islands\n\n```tsrx\nimport { rowSelectionFeature, tableFeatures, useTable } from '@tanstack/octane-table'\n\nconst features = tableFeatures({ rowSelectionFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nfunction SelectionCount() @{\n const table = useTable({ features, columns, data }, () => null)\n \n {(selection) => {String(Object.keys(selection).length)}}\n \n \n}\n```\n\nWithout `source`, `table.Subscribe` subscribes to `table.store` and needs a selector. With `source`, it can consume one atom or store. If the owner selects `null`, every UI region must subscribe to the slices its Table API reads depend on, including row-model dependencies.\n\nAlways mount `Subscribe` with JSX. `table.Subscribe({ source, children })` shares the owner's compiler slots and loses the independent hook scope.\n\n## Share a synchronous external owner\n\n```tsrx\nimport { useCreateAtom } from '@tanstack/octane-store'\nimport { rowPaginationFeature, tableFeatures, useTable } from '@tanstack/octane-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nfunction PageStatus() @{\n const pagination = useCreateAtom({ pageIndex: 0, pageSize: 20 })\n const table = useTable({ features, columns, data, atoms: { pagination } })\n \n}\n```\n\nUse `useSelector` from `@tanstack/octane-store` when another component consumes the atom. External atoms are direct synchronous owners and take precedence over `options.state`; omit the matching controlled callback.\n\n## Render and commit timing\n\n`useTable` stages current data, columns, callbacks, and controlled state for same-render reads. It publishes controlled state only after Octane accepts the render, from the layout commit. Suspended or abandoned renders cannot publish speculative state.\n\nThe owner drops the matching redundant post-commit notification because it already rendered that snapshot. Independently mounted `table.Subscribe` consumers still receive the update before paint. This distinction applies to controlled `state`; external atom writes remain synchronous.\n\nFor controlled state, pass `state.` together with the corresponding Octane setter. A custom callback must resolve raw values and updater functions before feeding the owner back into Table.\n\n## API discovery\n\nInspect `node_modules/@tanstack/octane-table/src/index.d.ts`, the matching `*.tsrx.d.ts` sidecar, and `src/types.ts`. This package publishes authored source; core APIs are in installed `@tanstack/table-core/dist/`.\n\n## Sources\n\n- `TanStack/table:docs/framework/octane/guide/table-state.md`\n- `TanStack/table:examples/octane/basic-subscribe`\n- `TanStack/table:examples/octane/basic-external-atoms`\n- `TanStack/table:packages/octane-table/src/useTable.tsrx`\n- `TanStack/table:packages/octane-table/src/Subscribe.tsrx`\n\n\n---\nname: table-state\ndescription:\n Read and control Table v9 state in octane. Use for tracked reads, subscriptions,\n controlled slices, and framework-specific reactive boundaries.\nmetadata:\n type: framework\n library: '@tanstack/octane-table'\n framework: octane\n library_version: '9.3.1'\nrequires:\n - '@tanstack/table-core#table-state'\nsources:\n - TanStack/table:docs/framework/octane/guide/table-state.md\n - TanStack/table:examples/octane/basic-subscribe\n - TanStack/table:examples/octane/basic-external-atoms\n - TanStack/table:packages/octane-table/src/useTable.tsrx\n - TanStack/table:packages/octane-table/src/Subscribe.tsrx\n---\n\nLoad `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules.\n\n`useTable` selects all registered state by default. Its second argument changes the selected shape exposed as `table.state` and shallow-gates owner rerenders. Atom `.get()` and `table.store.state` reads are snapshots; use selected state or a rendered `table.Subscribe` to update the UI.\n\n## Controlled slice setup\n\n```tsrx\nimport { useState } from 'octane'\nimport {\n rowPaginationFeature,\n tableFeatures,\n useTable,\n} from '@tanstack/octane-table'\n\nconst features = tableFeatures({ rowPaginationFeature })\nconst columns = [{ accessorKey: 'name' }]\nconst data = [{ name: 'Ada' }]\n\nfunction PageStatus() @{\n const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 20 })\n const table = useTable({\n features,\n columns,\n data,\n state: { pagination },\n onPaginationChange: setPagination,\n })\n\n \n}\n```\n\n## Reactive boundaries\n\n- Pass both the controlled value and its callback. Octane setters accept Table's value-or-updater callbacks; a callback alone cannot feed the new value back.\n- Render `` as a component. Calling it as a normal function shares the owner's compiler slots instead of creating an independent hook scope.\n- `useTable` stages fresh options for same-render reads. Controlled state reaches the store only from an accepted layout commit, so abandoned work cannot publish speculative values.\n- A stable atom from `@tanstack/octane-store` is a direct synchronous owner. Table writes reach it immediately; it takes precedence over controlled `state` for the same slice.\n- Keep features, columns, and data stable. Use the default selector until render cost justifies narrower subscriptions.\n\n## Read for the task\n\nFor advanced reactive boundaries, shared atoms, or detailed subscription examples, read [reactivity](references/reactivity.md). For construction or rendering setup, read [getting-started](../getting-started/SKILL.md).\n\n## API discovery\n\nInspect `node_modules/@tanstack/octane-table/src/index.d.ts`, the matching `*.tsrx.d.ts` sidecar, and `src/types.ts`. This package publishes authored source; core APIs are in installed `@tanstack/table-core/dist/`.\n\n\n"}