From c681ef769ecedf35272ee9e997168993dcf71d08 Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Sun, 4 Oct 2026 11:11:16 -0500 Subject: [PATCH] chore(skills): Add progressive disclosure to bundled skills --- .changeset/short-knives-open.md | 18 + .github/workflows/check-skills.yml | 4 + _artifacts/domain_map.yaml | 3857 +++++++++++------ _artifacts/skill_spec.md | 216 +- _artifacts/skill_tree.yaml | 1837 ++++---- docs/agent-skills.md | 38 +- package.json | 6 +- .../skills/getting-started/SKILL.md | 71 +- .../references/create-table-hook.md} | 47 +- .../alpine-table/skills/table-state/SKILL.md | 117 +- .../table-state/references/reactivity.md | 35 + .../skills/getting-started/SKILL.md | 114 +- .../references/create-table-hook.md} | 55 +- .../references/with-tanstack-query.md} | 54 +- .../references/with-tanstack-virtual.md | 183 + .../skills/migrate-v8-to-v9/SKILL.md | 197 +- .../references/adapter-migration.md | 51 + .../angular-table/skills/table-state/SKILL.md | 208 +- .../table-state/references/reactivity.md | 67 + .../skills/with-tanstack-virtual/SKILL.md | 126 - .../skills/getting-started/SKILL.md | 108 +- .../references/create-table-hook.md} | 47 +- .../ember-table/skills/table-state/SKILL.md | 216 +- .../table-state/references/reactivity.md | 75 + .../lit-table/skills/getting-started/SKILL.md | 91 +- .../references/create-table-hook.md} | 51 +- .../references/with-tanstack-virtual.md} | 39 +- .../skills/migrate-v8-to-v9/SKILL.md | 202 +- .../references/adapter-migration.md | 52 + .../lit-table/skills/table-state/SKILL.md | 150 +- .../table-state/references/reactivity.md | 67 + .../skills/fuzzy-ranking/SKILL.md | 7 +- .../skills/getting-started/SKILL.md | 139 +- .../references/create-table-hook.md} | 62 +- .../octane-table/skills/table-state/SKILL.md | 194 +- .../table-state/references/reactivity.md | 68 + .../skills/getting-started/SKILL.md | 130 +- .../references/create-table-hook.md} | 44 +- .../references/with-tanstack-query.md} | 35 +- .../references/with-tanstack-virtual.md} | 32 +- .../skills/migrate-v8-to-v9/SKILL.md | 194 +- .../references/adapter-migration.md | 60 + .../preact-table/skills/table-state/SKILL.md | 187 +- .../table-state/references/reactivity.md | 111 + .../skills/getting-started/SKILL.md | 131 +- .../references/create-table-hook.md} | 47 +- .../references/with-tanstack-query.md} | 43 +- .../references/with-tanstack-virtual.md} | 37 +- .../skills/migrate-v8-to-v9/SKILL.md | 229 +- .../references/adapter-migration.md | 86 + .../react-table/skills/table-state/SKILL.md | 272 +- .../table-state/references/reactivity.md | 205 + .../skills/getting-started/SKILL.md | 135 +- .../references/create-table-hook.md} | 40 +- .../references/with-tanstack-query.md} | 35 +- .../references/with-tanstack-virtual.md} | 36 +- .../skills/migrate-v8-to-v9/SKILL.md | 215 +- .../references/adapter-migration.md | 83 + .../solid-table/skills/table-state/SKILL.md | 194 +- .../table-state/references/reactivity.md | 114 + .../skills/getting-started/SKILL.md | 132 +- .../references/create-table-hook.md} | 43 +- .../references/with-tanstack-query.md} | 35 +- .../references/with-tanstack-virtual.md} | 37 +- .../skills/migrate-v8-to-v9/SKILL.md | 205 +- .../references/adapter-migration.md | 59 + .../svelte-table/skills/table-state/SKILL.md | 251 +- .../table-state/references/reactivity.md | 217 + packages/table-core/skills/core/SKILL.md | 167 +- .../references/api-not-found.md} | 37 +- .../table-core/skills/core/references/rows.md | 46 + .../references/typescript.md} | 34 +- .../skills/custom-features/SKILL.md | 250 +- .../references/plugin-example.md | 204 + .../skills/migrate-v8-to-v9/SKILL.md | 344 +- .../references/architecture.md | 139 + .../references/feature-apis.md | 107 + .../migrate-v8-to-v9/references/state.md | 42 + .../migrate-v8-to-v9/references/typescript.md | 52 + .../table-core/skills/table-features/SKILL.md | 245 +- .../references/aggregation.md} | 46 +- .../references/cell-selection.md} | 33 +- .../references/cell-spanning.md} | 29 +- .../references/client-vs-server.md} | 35 +- .../references/column-faceting.md} | 37 +- .../references/column-filtering.md} | 37 +- .../references/column-ordering.md} | 31 +- .../references/column-pinning.md} | 29 +- .../references/column-resizing.md} | 29 +- .../references/column-sizing.md} | 29 +- .../references/column-visibility.md} | 29 +- .../references/expanding.md} | 29 +- .../references/global-filtering.md} | 37 +- .../references/grouping.md} | 33 +- .../references/pagination.md} | 37 +- .../references/row-pinning.md} | 31 +- .../references/row-selection.md} | 29 +- .../references/sorting.md} | 37 +- .../table-core/skills/table-state/SKILL.md | 96 + .../vue-table/skills/getting-started/SKILL.md | 118 +- .../references/create-table-hook.md} | 37 +- .../references/with-tanstack-query.md} | 43 +- .../references/with-tanstack-virtual.md} | 37 +- .../skills/migrate-v8-to-v9/SKILL.md | 189 +- .../references/adapter-migration.md | 51 + .../vue-table/skills/table-state/SKILL.md | 182 +- .../table-state/references/reactivity.md | 148 + pnpm-lock.yaml | 3 + scripts/skill-snippets-angular.tsconfig.json | 7 + scripts/skill-tree.mjs | 197 + scripts/tests/skill-tree.test.mjs | 288 ++ scripts/typecheck-skill-snippets.mjs | 2 +- scripts/validate-skill-content.mjs | 9 +- scripts/validate-skill-tree.mjs | 12 + 114 files changed, 8082 insertions(+), 8144 deletions(-) create mode 100644 .changeset/short-knives-open.md rename packages/alpine-table/skills/{create-table-hook/SKILL.md => getting-started/references/create-table-hook.md} (64%) create mode 100644 packages/alpine-table/skills/table-state/references/reactivity.md rename packages/angular-table/skills/{create-table-hook/SKILL.md => getting-started/references/create-table-hook.md} (63%) rename packages/angular-table/skills/{with-tanstack-query/SKILL.md => getting-started/references/with-tanstack-query.md} (67%) create mode 100644 packages/angular-table/skills/getting-started/references/with-tanstack-virtual.md create mode 100644 packages/angular-table/skills/migrate-v8-to-v9/references/adapter-migration.md create mode 100644 packages/angular-table/skills/table-state/references/reactivity.md delete mode 100644 packages/angular-table/skills/with-tanstack-virtual/SKILL.md rename packages/ember-table/skills/{create-table-hook/SKILL.md => getting-started/references/create-table-hook.md} (71%) create mode 100644 packages/ember-table/skills/table-state/references/reactivity.md rename packages/lit-table/skills/{create-table-hook/SKILL.md => getting-started/references/create-table-hook.md} (58%) rename packages/lit-table/skills/{with-tanstack-virtual/SKILL.md => getting-started/references/with-tanstack-virtual.md} (81%) create mode 100644 packages/lit-table/skills/migrate-v8-to-v9/references/adapter-migration.md create mode 100644 packages/lit-table/skills/table-state/references/reactivity.md rename packages/octane-table/skills/{create-table-hook/SKILL.md => getting-started/references/create-table-hook.md} (64%) create mode 100644 packages/octane-table/skills/table-state/references/reactivity.md rename packages/preact-table/skills/{create-table-hook/SKILL.md => getting-started/references/create-table-hook.md} (75%) rename packages/preact-table/skills/{with-tanstack-query/SKILL.md => getting-started/references/with-tanstack-query.md} (69%) rename packages/preact-table/skills/{with-tanstack-virtual/SKILL.md => getting-started/references/with-tanstack-virtual.md} (75%) create mode 100644 packages/preact-table/skills/migrate-v8-to-v9/references/adapter-migration.md create mode 100644 packages/preact-table/skills/table-state/references/reactivity.md rename packages/react-table/skills/{create-table-hook/SKILL.md => getting-started/references/create-table-hook.md} (77%) rename packages/react-table/skills/{with-tanstack-query/SKILL.md => getting-started/references/with-tanstack-query.md} (74%) rename packages/react-table/skills/{with-tanstack-virtual/SKILL.md => getting-started/references/with-tanstack-virtual.md} (79%) create mode 100644 packages/react-table/skills/migrate-v8-to-v9/references/adapter-migration.md create mode 100644 packages/react-table/skills/table-state/references/reactivity.md rename packages/solid-table/skills/{create-table-hook/SKILL.md => getting-started/references/create-table-hook.md} (64%) rename packages/solid-table/skills/{with-tanstack-query/SKILL.md => getting-started/references/with-tanstack-query.md} (71%) rename packages/solid-table/skills/{with-tanstack-virtual/SKILL.md => getting-started/references/with-tanstack-virtual.md} (75%) create mode 100644 packages/solid-table/skills/migrate-v8-to-v9/references/adapter-migration.md create mode 100644 packages/solid-table/skills/table-state/references/reactivity.md rename packages/svelte-table/skills/{create-table-hook/SKILL.md => getting-started/references/create-table-hook.md} (73%) rename packages/svelte-table/skills/{with-tanstack-query/SKILL.md => getting-started/references/with-tanstack-query.md} (77%) rename packages/svelte-table/skills/{with-tanstack-virtual/SKILL.md => getting-started/references/with-tanstack-virtual.md} (78%) create mode 100644 packages/svelte-table/skills/migrate-v8-to-v9/references/adapter-migration.md create mode 100644 packages/svelte-table/skills/table-state/references/reactivity.md rename packages/table-core/skills/{api-not-found/SKILL.md => core/references/api-not-found.md} (65%) create mode 100644 packages/table-core/skills/core/references/rows.md rename packages/table-core/skills/{typescript/SKILL.md => core/references/typescript.md} (73%) create mode 100644 packages/table-core/skills/custom-features/references/plugin-example.md create mode 100644 packages/table-core/skills/migrate-v8-to-v9/references/architecture.md create mode 100644 packages/table-core/skills/migrate-v8-to-v9/references/feature-apis.md create mode 100644 packages/table-core/skills/migrate-v8-to-v9/references/state.md create mode 100644 packages/table-core/skills/migrate-v8-to-v9/references/typescript.md rename packages/table-core/skills/{aggregation/SKILL.md => table-features/references/aggregation.md} (74%) rename packages/table-core/skills/{cell-selection/SKILL.md => table-features/references/cell-selection.md} (82%) rename packages/table-core/skills/{cell-spanning/SKILL.md => table-features/references/cell-spanning.md} (81%) rename packages/table-core/skills/{client-vs-server/SKILL.md => table-features/references/client-vs-server.md} (78%) rename packages/table-core/skills/{column-faceting/SKILL.md => table-features/references/column-faceting.md} (67%) rename packages/table-core/skills/{column-filtering/SKILL.md => table-features/references/column-filtering.md} (62%) rename packages/table-core/skills/{column-ordering/SKILL.md => table-features/references/column-ordering.md} (62%) rename packages/table-core/skills/{column-pinning/SKILL.md => table-features/references/column-pinning.md} (69%) rename packages/table-core/skills/{column-resizing/SKILL.md => table-features/references/column-resizing.md} (69%) rename packages/table-core/skills/{column-sizing/SKILL.md => table-features/references/column-sizing.md} (66%) rename packages/table-core/skills/{column-visibility/SKILL.md => table-features/references/column-visibility.md} (66%) rename packages/table-core/skills/{expanding/SKILL.md => table-features/references/expanding.md} (67%) rename packages/table-core/skills/{global-filtering/SKILL.md => table-features/references/global-filtering.md} (59%) rename packages/table-core/skills/{grouping/SKILL.md => table-features/references/grouping.md} (67%) rename packages/table-core/skills/{pagination/SKILL.md => table-features/references/pagination.md} (56%) rename packages/table-core/skills/{row-pinning/SKILL.md => table-features/references/row-pinning.md} (66%) rename packages/table-core/skills/{row-selection/SKILL.md => table-features/references/row-selection.md} (86%) rename packages/table-core/skills/{sorting/SKILL.md => table-features/references/sorting.md} (62%) create mode 100644 packages/table-core/skills/table-state/SKILL.md rename packages/vue-table/skills/{create-table-hook/SKILL.md => getting-started/references/create-table-hook.md} (74%) rename packages/vue-table/skills/{with-tanstack-query/SKILL.md => getting-started/references/with-tanstack-query.md} (68%) rename packages/vue-table/skills/{with-tanstack-virtual/SKILL.md => getting-started/references/with-tanstack-virtual.md} (74%) create mode 100644 packages/vue-table/skills/migrate-v8-to-v9/references/adapter-migration.md create mode 100644 packages/vue-table/skills/table-state/references/reactivity.md create mode 100644 scripts/skill-snippets-angular.tsconfig.json create mode 100644 scripts/skill-tree.mjs create mode 100644 scripts/tests/skill-tree.test.mjs create mode 100644 scripts/validate-skill-tree.mjs diff --git a/.changeset/short-knives-open.md b/.changeset/short-knives-open.md new file mode 100644 index 0000000000..b084ac2c17 --- /dev/null +++ b/.changeset/short-knives-open.md @@ -0,0 +1,18 @@ +--- +'@tanstack/table-core': patch +'@tanstack/react-table': patch +'@tanstack/preact-table': patch +'@tanstack/solid-table': patch +'@tanstack/svelte-table': patch +'@tanstack/vue-table': patch +'@tanstack/angular-table': patch +'@tanstack/lit-table': patch +'@tanstack/alpine-table': patch +'@tanstack/ember-table': patch +'@tanstack/octane-table': patch +'@tanstack/match-sorter-utils': patch +--- + +Refactor bundled Intent skills into smaller entry points with references loaded for the current task. Keep core feature architecture and shared state directly discoverable, and move individual features, adapter compositions, and detailed migration guidance into references. + +Consumers with individual skill permissions or explicit agent mappings must replace retired feature/composition IDs with their owning entry points and refresh Intent mappings. See the Agent Skills guide for the replacement paths. diff --git a/.github/workflows/check-skills.yml b/.github/workflows/check-skills.yml index 4adbae05f2..1ef0040369 100644 --- a/.github/workflows/check-skills.yml +++ b/.github/workflows/check-skills.yml @@ -18,7 +18,11 @@ on: - '**/_artifacts/**' - 'scripts/sync-skill-versions.mjs' - 'scripts/typecheck-skill-snippets.mjs' + - 'scripts/skill-snippets-*.tsconfig.json' - 'scripts/validate-skill-content.mjs' + - 'scripts/validate-skill-tree.mjs' + - 'scripts/skill-tree.mjs' + - 'scripts/tests/skill-tree.test.mjs' - 'package.json' - 'pnpm-lock.yaml' - '.github/workflows/check-skills.yml' diff --git a/_artifacts/domain_map.yaml b/_artifacts/domain_map.yaml index bfb2348445..dcf8e55653 100644 --- a/_artifacts/domain_map.yaml +++ b/_artifacts/domain_map.yaml @@ -3,7 +3,8 @@ library: version: '9.2.5' repository: 'https://github.com/TanStack/table' homepage: 'https://tanstack.com/table' - description: 'Headless, framework-agnostic data-grid state and row-processing primitives with tree-shakeable v9 features and framework adapters.' + description: 'Headless, framework-agnostic data-grid state and row-processing + primitives with tree-shakeable v9 features and framework adapters.' primary_framework: 'framework-agnostic' monorepo: true package_version_overrides: @@ -15,75 +16,135 @@ meta: status: reviewed maintainer_review_pending: false phase_4_date: '2026-07-10' - release_voice: 'Treat v9 as stable guidance while recording the exact prerelease package version in skill metadata.' + release_voice: + 'Treat v9 as stable guidance while recording the exact prerelease + package version in skill metadata.' + structure_updated_at: 2026-10-04 + structure_workflow: Existing reviewed domain map and maintainer-approved + progressive-disclosure proposal -> revised skill spec -> skill tree -> + generate-skill Mode A. scope: goals: - - 'Route agents to the correct package and skill, then correct common foot-guns and misconceptions.' - - 'Use docs and examples for intended workflows, and direct exact API discovery to installed package declarations (dist/**/*.d.ts).' - - 'Teach headless rendering, feature registration, row-model ownership, framework state, and v8-to-v9 changes as foundations.' + - 'Route agents to the correct package and skill, then correct common + foot-guns and misconceptions.' + - 'Use docs and examples for intended workflows, and direct exact API + discovery to installed package declarations (dist/**/*.d.ts).' + - 'Teach headless rendering, feature registration, row-model ownership, + framework state, and v8-to-v9 changes as foundations.' included: - 'All 18 public workspace packages.' - - 'All 17 stock Table v9 features, custom features, TypeScript helpers, migrations, framework state, composable table hooks, Query, Virtual, Devtools, and fuzzy ranking.' - - 'Renderer-owned CSS edge cases for sticky positioning, column widths, resizing, layout, and virtualization.' + - 'All 17 stock Table v9 features, custom features, TypeScript helpers, + migrations, framework state, composable table hooks, Query, Virtual, + Devtools, and fuzzy ranking.' + - 'Renderer-owned CSS edge cases for sticky positioning, column widths, + resizing, layout, and virtualization.' excluded: - - 'Component-library-specific integrations such as shadcn, Material UI, Mantine, and equivalent design systems.' + - 'Component-library-specific integrations such as shadcn, Material UI, + Mantine, and equivalent design systems.' - 'Worker row models and experimental worker guidance.' - - 'A dedicated performance skill; performance guidance is placed where the relevant state, row model, or virtualization decision is made.' - - 'A promoted useLegacyTable workflow; it may only be identified as a deprecated temporary stopgap when encountered.' + - 'A dedicated performance skill; performance guidance is placed where the + relevant state, row model, or virtualization decision is made.' + - 'A promoted useLegacyTable workflow; it may only be identified as a + deprecated temporary stopgap when encountered.' validation_contract: - - 'Every generated skill must pass Intent validation and exact package-version synchronization.' - - 'Load-bearing TypeScript examples marked with skill-snippet:check must compile against workspace source and their package tsconfig.' - - 'Content checks reject malformed Markdown tables, invented package imports, feature-gated APIs without their feature, unstable empty-array data getters, and adapter-specific corrected foot-guns.' - - 'Wrong/Correct pairs are reserved for code where Wrong actually misbehaves; valid defaults and supported alternatives must use decision-oriented prose instead.' - - 'Virtual integration patterns must follow the maintained adapter guide/example rather than borrowing another framework adapter API.' - - 'Release automation updates skill and artifact version metadata after package versions are calculated and before packages publish.' + - 'Every generated skill must pass Intent validation and exact package-version + synchronization.' + - 'Load-bearing TypeScript examples marked with skill-snippet:check must + compile against workspace source and their package tsconfig.' + - 'Content checks reject malformed Markdown tables, invented package imports, + feature-gated APIs without their feature, unstable empty-array data getters, + and adapter-specific corrected foot-guns.' + - 'Wrong/Correct pairs are reserved for code where Wrong actually misbehaves; + valid defaults and supported alternatives must use decision-oriented prose + instead.' + - 'Virtual integration patterns must follow the maintained adapter + guide/example rather than borrowing another framework adapter API.' + - 'Release automation updates skill and artifact version metadata after + package versions are calculated and before packages publish.' migration_depth_contract: - exception: 'Migration skills are intentionally comprehensive rather than bare-bones. Each adapter migration skill must stand alone and list every breaking change in its maintained v8-to-v9 guide, even when the same change also appears in the table-core migration skill.' + exception: 'Keep the exhaustive shared audit checklist in the core migration + skill and detailed mappings in its references. Adapter migration skills + explicitly load that checklist and add adapter-only checks and references; + preserve every breaking change without repeating shared inventories.' required_coverage: - - 'Framework package and construction entrypoint changes, including framework-version prerequisites.' - - 'Logical start/end column-pinning rename and the full old-to-new API mapping.' - - 'Prototype-bound row, cell, column, and header methods; object-spread/Object.keys/JSON implications.' - - 'Required tableFeatures registration, stockFeatures audit guidance, all 16 feature imports, and feature-gated state/APIs.' - - 'Core row model removal plus every get*RowModel to create*RowModel feature-slot mapping.' - - 'filterFns, sortFns, aggregationFns, and filterMeta registry-slot migration.' - - 'Adapter state access, selectors/subscriptions, controlled slices, external atoms, precedence, and onStateChange removal.' + - 'Framework package and construction entrypoint changes, including + framework-version prerequisites.' + - 'Logical start/end column-pinning rename and the full old-to-new API + mapping.' + - 'Prototype-bound row, cell, column, and header methods; + object-spread/Object.keys/JSON implications.' + - 'Required tableFeatures registration, stockFeatures audit guidance, all 17 + feature imports, and feature-gated state/APIs.' + - 'Core row model removal plus every get*RowModel to create*RowModel + feature-slot mapping.' + - 'filterFns, sortFns, aggregationFns, and filterMeta registry-slot + migration.' + - 'Adapter state access, selectors/subscriptions, controlled slices, + external atoms, precedence, and onStateChange removal.' - 'createColumnHelper TFeatures and columns() inference changes.' - 'Framework rendering helper/component/directive changes.' - 'tableOptions and createTableHook composability.' - - 'enablePinning split, columnSizing/columnResizing split and state/API renames.' + - 'enablePinning split, columnSizing/columnResizing split and state/API + renames.' - 'Sorting option/API/type/built-in registry renames.' - - 'Removed underscore-prefixed internal APIs and public row API replacements.' - - 'Row-selection some-selected semantic changes and correct indeterminate checks.' - - 'TFeatures generic changes, StockFeatures typing, meta typing, function-registry augmentation replacement, and RowData restriction.' - - 'A final exhaustive migration checklist suitable for auditing an existing codebase.' + - 'Removed underscore-prefixed internal APIs and public row API + replacements.' + - 'Row-selection some-selected semantic changes and correct indeterminate + checks.' + - 'TFeatures generic changes, StockFeatures typing, meta typing, + function-registry augmentation replacement, and RowData restriction.' + - 'A final exhaustive migration checklist suitable for auditing an existing + codebase.' table_state_depth_contract: - exception: 'Framework table-state skills are foundational and intentionally richer than ordinary feature skills. Preserve the guide mental model and adapter-specific reactivity; do not reduce them to a few controlled-state snippets.' + exception: 'Shared ownership and reset rules belong to the core table-state + skill. Adapter table-state skills require it and retain essential reactive + reads and controlled wiring inline, with advanced patterns in references. + State repair does not require getting-started.' required_coverage: - - 'Table as a state coordinator and internal state as the default ownership choice.' - - 'Feature-gated state slices and the relationship between registered features, options, APIs, atoms, and inferred types.' - - 'The distinct baseAtoms, atoms, store, and adapter-selected state surfaces.' - - 'Current snapshot reads versus framework-reactive subscriptions or tracked reads.' - - 'Exactly one owner per slice: internal state, initialState, external atoms, or state plus on[State]Change.' - - 'External-atom precedence, controlled-state synchronization, updater-function handling, and global onStateChange removal.' - - 'Feature methods as the preferred write surface, baseAtoms as a low-level escape hatch, and external-atom writes when externally owned.' - - 'initialState timing, feature reset behavior, reset-to-default arguments, and core reset limitations with external atoms.' + - 'Table as a state coordinator and internal state as the default ownership + choice.' + - 'Feature-gated state slices and the relationship between registered + features, options, APIs, atoms, and inferred types.' + - 'The distinct baseAtoms, atoms, store, and adapter-selected state + surfaces.' + - 'Current snapshot reads versus framework-reactive subscriptions or tracked + reads.' + - 'Exactly one owner per slice: internal state, initialState, external + atoms, or state plus on[State]Change.' + - 'External-atom precedence, controlled-state synchronization, + updater-function handling, and global onStateChange removal.' + - 'Feature methods as the preferred write surface, baseAtoms as a low-level + escape hatch, and external-atom writes when externally owned.' + - 'initialState timing, feature reset behavior, reset-to-default arguments, + and core reset limitations with external atoms.' - 'Feature-specific state types and TableState inference.' - - 'Adapter-specific selectors, subscriptions, compiler/reactivity boundaries, and option synchronization.' + - 'Adapter-specific selectors, subscriptions, compiler/reactivity + boundaries, and option synchronization.' stable_model_input_contract: - rule: 'Every skill example must keep data and columns references stable between meaningful changes. Never recommend inline map/filter/slice chains, makeColumns calls, or fresh fallback arrays in repeatedly evaluated table options.' + rule: + 'Every skill example must keep data and columns references stable between + meaningful changes. Never recommend inline map/filter/slice chains, + makeColumns calls, or fresh fallback arrays in repeatedly evaluated table + options.' accepted_patterns: - 'Module or component-lifetime constants for static data and columns.' - - 'Framework memo/computed primitives for derived data, keyed to the actual derivation inputs.' - - 'Stable state, signal, ref, rune, resource, or Query result references for changing data.' - - 'A module-level stable empty fallback instead of data ?? [] in React-like render paths or reactive option initializers.' + - 'Framework memo/computed primitives for derived data, keyed to the actual + derivation inputs.' + - 'Stable state, signal, ref, rune, resource, or Query result references for + changing data.' + - 'A module-level stable empty fallback instead of data ?? [] in React-like + render paths or reactive option initializers.' custom_feature_depth_contract: - exception: 'The custom-features skill must enumerate the complete extension surface in one authoritative example. Do not pair a minimal density example with separate map/API examples or add a later misconception that merely explains their relationship.' + exception: + 'Keep the custom-feature workflow directly discoverable. Preserve the + complete extension surface and annotated authoritative example in + references/plugin-example.md, linked before implementation.' required_feature_maps: - 'TableState_FeatureMap' - 'TableOptions_FeatureMap' @@ -97,22 +158,32 @@ custom_feature_depth_contract: - 'CachedRowModels_FeatureMap' required_api_installation: - 'assignTableAPIs inside constructTableAPIs for the singleton table.' - - 'assignPrototypeAPIs inside assignColumnPrototype for shared column methods.' + - 'assignPrototypeAPIs inside assignColumnPrototype for shared column + methods.' - 'assignPrototypeAPIs inside assignRowPrototype for shared row methods.' - 'assignPrototypeAPIs inside assignCellPrototype for shared cell methods.' - - 'assignPrototypeAPIs inside assignHeaderPrototype for shared header methods.' - - 'initColumnInstanceData and initRowInstanceData for per-instance mutable data rather than shared methods.' - - 'The table_/column_/row_/cell_/header_ static-name prefixes, self argument difference, optional memoDeps, and absence of per-object assign*APIs utilities.' + - 'assignPrototypeAPIs inside assignHeaderPrototype for shared header + methods.' + - 'initColumnInstanceData and initRowInstanceData for per-instance mutable + data rather than shared methods.' + - 'The table_/column_/row_/cell_/header_ static-name prefixes, self argument + difference, optional memoDeps, and absence of per-object assign*APIs + utilities.' api_discovery_policy: - rule: 'For exact exports, option types, state shapes, and instance APIs, inspect dist declarations (.d.ts) in the installed package before inventing an API or relying on memory.' + rule: + 'For exact exports, option types, state shapes, and instance APIs, inspect + dist declarations (.d.ts) in the installed package before inventing an API + or relying on memory.' adapter_entrypoint: 'node_modules/@tanstack/-table/dist/index.d.ts' core_entrypoint: 'node_modules/@tanstack/table-core/dist/index.d.ts' feature_source: 'node_modules/@tanstack/table-core/dist/features//' ember_entrypoint: 'node_modules/@tanstack/ember-table/declarations/index.d.ts' angular_entrypoint: 'node_modules/@tanstack/angular-table/dist/types/' octane_entrypoint: 'node_modules/@tanstack/octane-table/src/index.d.ts' - fallback: 'If declarations are unavailable, resolve the installed package root and inspect published types; do not open package src/ or substitute v8 / another adapter API.' + fallback: 'If declarations are unavailable, resolve the installed package root + and inspect published types; do not open package src/ or substitute v8 / + another adapter API.' coverage: ignored_packages: @@ -152,1495 +223,2475 @@ coverage: domains: - slug: foundations name: 'Foundations and migration' - description: 'Headless philosophy, feature registration, client/server ownership, TypeScript inference, API discovery, custom features, and v8 migration.' + description: 'Headless philosophy, feature registration, client/server + ownership, TypeScript inference, API discovery, custom features, and v8 + migration.' - slug: feature-plugins name: 'Feature plugins' - description: 'The 17 stock optional features, their prerequisites, state, row-model participation, and UI responsibilities.' + description: 'The 17 stock optional features, their prerequisites, state, + row-model participation, and UI responsibilities.' - slug: framework-adapters name: 'Framework adapters' - description: 'Per-framework setup, reactive table state, v8 migration, reusable createTableHook patterns, and supported Query/Virtual composition.' + description: + 'Per-framework setup, reactive table state, v8 migration, reusable + createTableHook patterns, and supported Query/Virtual composition.' - slug: observability name: 'Devtools' - description: 'Framework-neutral and adapter-specific Devtools registration, keys, production exports, and connection failures.' + description: 'Framework-neutral and adapter-specific Devtools registration, + keys, production exports, and connection failures.' - slug: utilities name: 'Utilities' description: 'Fuzzy ranking and comparison behavior shipped by match-sorter-utils.' tensions: - - name: 'Explicit tree-shaking vs kitchen-sink convenience' - skills: ['core', 'table-features', 'getting-started', 'migrate-v8-to-v9'] - agent_risk: 'Agents reach for stockFeatures or a kitchen-sink example as the default and silently erase the main v9 bundle-size benefit.' - - name: 'Client-side processing vs server-owned processing' + - name: Explicit tree-shaking vs kitchen-sink convenience skills: - [ - 'client-vs-server', - 'column-filtering', - 'global-filtering', - 'grouping', - 'sorting', - 'pagination', - 'with-tanstack-query', - ] - agent_risk: 'Agents enable manual flags but still expect Table row models to transform the data, or mix server and client stages without defining the boundary.' - - name: 'Simple whole-table subscriptions vs fine-grained reactive state' - skills: ['table-state', 'create-table-hook', 'with-tanstack-virtual'] - agent_risk: 'Agents either over-optimize small tables or hide state reads behind stable objects so framework compilers and memoization miss updates.' - - name: 'Reactive options vs stable model inputs' + - core + - table-features + - getting-started + - migrate-v8-to-v9 + agent_risk: Agents reach for stockFeatures or a kitchen-sink example as the + default and silently erase the main v9 bundle-size benefit. + - name: Client-side processing vs server-owned processing skills: - [ - 'core', - 'client-vs-server', - 'getting-started', - 'table-state', - 'with-tanstack-query', - ] - agent_risk: 'Agents derive data with map/filter/slice or recreate columns inside render/options callbacks, invalidating row and column models on unrelated updates or causing adapter render loops.' - - name: 'Headless flexibility vs renderer-owned correctness' + - table-features/references/client-vs-server.md + - table-features/references/column-filtering.md + - table-features/references/global-filtering.md + - table-features/references/grouping.md + - table-features/references/sorting.md + - table-features/references/pagination.md + - getting-started/references/with-tanstack-query.md + agent_risk: Agents enable manual flags but still expect Table row models to + transform the data, or mix server and client stages without defining the + boundary. + - name: Simple whole-table subscriptions vs fine-grained reactive state skills: - [ - 'core', - 'column-pinning', - 'column-sizing', - 'column-resizing', - 'with-tanstack-virtual', - ] - agent_risk: 'Agents expect feature state to supply semantic markup or CSS and blame Table for sticky, width, accessibility, or layout behavior owned by their renderer.' + - table-state + - getting-started/references/create-table-hook.md + - getting-started/references/with-tanstack-virtual.md + agent_risk: + Agents either over-optimize small tables or hide state reads behind + stable objects so framework compilers and memoization miss updates. + - name: Reactive options vs stable model inputs + skills: + - core + - table-features/references/client-vs-server.md + - getting-started + - table-state + - getting-started/references/with-tanstack-query.md + agent_risk: + Agents derive data with map/filter/slice or recreate columns inside + render/options callbacks, invalidating row and column models on unrelated + updates or causing adapter render loops. + - name: Headless flexibility vs renderer-owned correctness + skills: + - core + - table-features/references/column-pinning.md + - table-features/references/column-sizing.md + - table-features/references/column-resizing.md + - getting-started/references/with-tanstack-virtual.md + agent_risk: Agents expect feature state to supply semantic markup or CSS and + blame Table for sticky, width, accessibility, or layout behavior owned by + their renderer. skills: - slug: core package: '@tanstack/table-core' domain: foundations type: core - purpose: 'Establish the headless mental model, core row model, markup ownership, stable inputs, and feature-driven table architecture.' - 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', - ] - failure_modes: - - 'Treating Table as a component or design system instead of rendering semantic markup, styles, and accessibility in userland.' - - 'Recreating data or columns on every reactive pass and causing repeated row-model work or render loops.' - - 'Destructuring v9 row, cell, header, or column prototype methods and losing their instance this binding.' - + purpose: + Establish the headless mental model, core row model, markup ownership, + stable inputs, and feature-driven table architecture. + 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 + failure_modes: + - Treating Table as a component or design system instead of rendering + semantic markup, styles, and accessibility in userland. + - Recreating data or columns on every reactive pass and causing repeated + row-model work or render loops. + - Destructuring v9 row, cell, header, or column prototype methods and + losing their instance this binding. + references: + - slug: typescript + purpose: Preserve userland inference with columnHelper, meta helpers, + tableOptions, and feature-derived types instead of manually threading + generics. + sources: + - 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 + failure_modes: + - Annotating heterogeneous helper-built columns as ColumnDef[] and erasing each accessor value type. + - Manually supplying deep Table feature generics rather than deriving + them from typeof features or letting helpers infer them. + - Using v8 global declaration merging for per-table meta when v9 + tableMeta, columnMeta, filterMeta, and meta helpers can scope the + types. + path: references/typescript.md + replaces: '@tanstack/table-core#typescript' + - slug: api-not-found + purpose: + Diagnose missing exports, options, state, and instance methods before + inventing replacement code. + sources: + - TanStack/table:packages/table-core/src/index.ts + - TanStack/table:packages/table-core/src/types/TableFeatures.ts + - TanStack/table:docs/framework/react/guide/migrating.md + failure_modes: + - Searching v8 docs or recalling v7 APIs instead of checking the + installed v9 package src and exact package version. + - Assuming an API was removed when its feature was simply omitted from + tableFeatures. + - Using object spread, Object.keys, or JSON serialization to discover + v9 prototype methods and concluding those methods do not exist. + path: references/api-not-found.md + replaces: '@tanstack/table-core#api-not-found' + - path: references/rows.md + purpose: Read for display-order row numbers, row identity, or row cache misuse. + sources: + - TanStack/table:docs/guide/rows.md + - TanStack/table:packages/table-core/src/core/rows/coreRowsFeature.utils.ts + failure_modes: + - Using row.index as the filtered, sorted display index. + - Reading _displayIndexCache directly instead of getDisplayIndex(). + 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. + requires: [] - slug: table-features package: '@tanstack/table-core' domain: foundations type: core - purpose: 'Register only the features, row-model factories, and function registries a table actually uses.' - 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', - ] - failure_modes: - - 'Calling a feature API without registering its feature, so its state slice and runtime API do not exist.' - - 'Registering a row-model or function-registry slot without its prerequisite feature, or placing prerequisites after dependent slots.' - - 'Defaulting to stockFeatures for new tables and bundling every optional feature instead of preserving v9 tree-shaking.' - - - slug: client-vs-server - package: '@tanstack/table-core' - domain: foundations - type: core - purpose: 'Choose which filtering, grouping, sorting, expanding, and pagination stages Table owns and which a backend owns.' - sources: - [ - 'TanStack/table:docs/guide/row-models.md', - 'TanStack/table:packages/table-core/src/core/row-models/coreRowModelsFeature.utils.ts', - 'TanStack/table:examples/react/with-tanstack-query', - ] - failure_modes: - - 'Assuming manualPagination, manualSorting, manualFiltering, manualGrouping, or manualExpanding performs server work; each flag only bypasses that client row-model stage.' - - 'Passing a full dataset while manual pagination is enabled and expecting Table to slice it, or passing one page while a client row model expects the full dataset.' - - 'Mixing client and server stages without defining their order, producing sorting or filtering that only applies to the currently loaded page.' - - - slug: typescript - package: '@tanstack/table-core' - domain: foundations - type: core - purpose: 'Preserve userland inference with columnHelper, meta helpers, tableOptions, and feature-derived types instead of manually threading generics.' - sources: - [ - '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', - ] - failure_modes: - - 'Annotating heterogeneous helper-built columns as ColumnDef[] and erasing each accessor value type.' - - 'Manually supplying deep Table feature generics rather than deriving them from typeof features or letting helpers infer them.' - - 'Using v8 global declaration merging for per-table meta when v9 tableMeta, columnMeta, filterMeta, and meta helpers can scope the types.' - - - slug: api-not-found + purpose: Register only the features, row-model factories, and function + registries a table actually uses. + 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 + failure_modes: + - Calling a feature API without registering its feature, so its state + slice and runtime API do not exist. + - Registering a row-model or function-registry slot without its + prerequisite feature, or placing prerequisites after dependent slots. + - Defaulting to stockFeatures for new tables and bundling every optional + feature instead of preserving v9 tree-shaking. + references: + - slug: client-vs-server + purpose: + Choose which filtering, grouping, sorting, expanding, and pagination + stages Table owns and which a backend owns. + sources: + - TanStack/table:docs/guide/row-models.md + - TanStack/table:packages/table-core/src/core/row-models/coreRowModelsFeature.utils.ts + - TanStack/table:examples/react/with-tanstack-query + failure_modes: + - Assuming manualPagination, manualSorting, manualFiltering, + manualGrouping, or manualExpanding performs server work; each flag + only bypasses that client row-model stage. + - Passing a full dataset while manual pagination is enabled and + expecting Table to slice it, or passing one page while a client row + model expects the full dataset. + - Mixing client and server stages without defining their order, + producing sorting or filtering that only applies to the currently + loaded page. + path: references/client-vs-server.md + replaces: '@tanstack/table-core#client-vs-server' + - slug: column-faceting + purpose: + Derive filter option counts and numeric ranges from the correct faceted + row model. + sources: + - TanStack/table:docs/framework/react/guide/column-faceting.md + - TanStack/table:packages/table-core/src/features/column-faceting + - TanStack/table:examples/react/filters-faceted + failure_modes: + - Registering columnFacetingFeature but omitting the facetedRowModel, + facetedUniqueValues, or facetedMinMaxValues slot needed by the API + being called. + - Expecting a column facet to include that column own active filter; + the faceted row model intentionally applies the other filters and + excludes its own. + - Computing large server-owned facet sets from the currently loaded + client page and presenting incomplete counts as global results. + path: references/column-faceting.md + replaces: '@tanstack/table-core#column-faceting' + - slug: column-filtering + purpose: + Configure column filters, filter functions, metadata, nested-row + direction, and client/manual ownership. + sources: + - TanStack/table:docs/framework/react/guide/column-filtering.md + - TanStack/table:packages/table-core/src/features/column-filtering + - TanStack/table:examples/react/filters + failure_modes: + - Setting manualFiltering and still expecting createFilteredRowModel + to transform data; manual mode returns the pre-filtered model. + - Using accessor values that are objects or renderer output with + built-in filter functions that expect comparable primitive values. + - Providing controlled columnFilters plus onColumnFiltersChange + without applying both value and updater-function forms to the + external source. + path: references/column-filtering.md + replaces: '@tanstack/table-core#column-filtering' + - slug: grouping + purpose: + Group rows, aggregate cells, and reason about grouped rows in expansion + and pagination. + sources: + - TanStack/table:docs/framework/react/guide/grouping.md + - TanStack/table:packages/table-core/src/features/column-grouping + - TanStack/table:examples/react/grouping + failure_modes: + - Registering groupedRowModel without columnGroupingFeature, + registering aggregationFns without rowAggregationFeature, or + expecting grouping state alone to process rows. + - Assuming pageSize counts only leaf data rows; group headers are rows + in the model and affect built-in pagination. + - Rendering every grouped cell as a normal value instead of handling + grouped, placeholder, and aggregated cell states. + path: references/grouping.md + replaces: '@tanstack/table-core#grouping' + - slug: column-ordering + purpose: + Control leaf-column order while respecting pinning, visibility, and + grouped-column precedence. + sources: + - TanStack/table:docs/framework/react/guide/column-ordering.md + - TanStack/table:packages/table-core/src/features/column-ordering + - TanStack/table:examples/react/column-dnd + failure_modes: + - Treating columnOrder as the final rendered order while pinning + regions and groupedColumnMode also reorder columns. + - Using headers, labels, or array indexes as drag identifiers instead + of stable leaf column IDs. + - Mutating the columnOrder array in place so the state owner does not + observe a new value. + path: references/column-ordering.md + replaces: '@tanstack/table-core#column-ordering' + - slug: column-pinning + purpose: + Partition columns into logical start, center, and end regions and + implement sticky layout correctly. + sources: + - 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 + failure_modes: + - Using v8 or early-beta left/right state and APIs instead of v9 + logical start/end names, especially in RTL layouts. + - 'Expecting pinning state to apply position: sticky, offsets, + z-index, backgrounds, or overflow CSS automatically.' + - Allowing rendered widths to diverge from column.getSize, producing + gaps or overlaps between adjacent pinned columns. + path: references/column-pinning.md + replaces: '@tanstack/table-core#column-pinning' + - slug: column-resizing + purpose: + Wire resize gestures and resize state onto the numeric sizing model + without avoidable render cost. + sources: + - 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 + failure_modes: + - Registering columnResizingFeature without its columnSizingFeature + prerequisite. + - Displaying a resize handle without attaching header.getResizeHandler + to mouse and touch start events. + - Reading getSize repeatedly in every cell during onChange resizing + instead of caching sizes or using CSS variables for large tables. + path: references/column-resizing.md + replaces: '@tanstack/table-core#column-resizing' + - slug: column-sizing + purpose: Use numeric min, max, and current sizes as state inputs to a + renderer-owned CSS layout. + sources: + - TanStack/table:docs/framework/react/guide/column-sizing.md + - TanStack/table:packages/table-core/src/features/column-sizing + - TanStack/table:examples/react/column-sizing + failure_modes: + - Expecting the numeric sizing state to set DOM widths without + applying it to th/td descendants, grid tracks, or flex styles. + - Forcing auto or percentage strings through a number API instead of + choosing and implementing an appropriate CSS layout strategy. + - Forgetting the default size and rendered content can disagree, which + also corrupts pinning offsets and total-size calculations. + path: references/column-sizing.md + replaces: '@tanstack/table-core#column-sizing' + - slug: column-visibility + purpose: + Hide leaf columns while rendering only visibility-aware header, column, + and cell collections. + sources: + - TanStack/table:docs/framework/react/guide/column-visibility.md + - TanStack/table:packages/table-core/src/features/column-visibility + - TanStack/table:examples/react/column-visibility + failure_modes: + - Updating columnVisibility but rendering getAllLeafColumns or + row.getAllCells, so hidden columns remain in the DOM. + - Treating absent map entries as hidden; only an explicit false hides + a column. + - Expecting enableHiding to hide a column when it only controls + whether the user or API may hide it. + path: references/column-visibility.md + replaces: '@tanstack/table-core#column-visibility' + - slug: global-filtering + purpose: Apply one filter across eligible columns with explicit column + eligibility and client/manual ownership. + sources: + - TanStack/table:docs/framework/react/guide/global-filtering.md + - TanStack/table:packages/table-core/src/features/global-filtering + - TanStack/table:examples/react/filters + failure_modes: + - Registering globalFilteringFeature without columnFilteringFeature + and a filtered row-model stage when client processing is expected. + - Assuming every column participates; the default eligibility checks + the first core row value and only accepts strings or numbers. + - Using manualFiltering while updating globalFilter state but never + sending that value to the server query. + path: references/global-filtering.md + replaces: '@tanstack/table-core#global-filtering' + - slug: expanding + purpose: + Expand hierarchical subrows or custom detail panels and place expansion + correctly relative to pagination. + sources: + - TanStack/table:docs/framework/react/guide/expanding.md + - TanStack/table:packages/table-core/src/features/row-expanding + - TanStack/table:examples/react/expanding + failure_modes: + - Expecting nested data to expand without getSubRows, or expecting a + custom detail panel without getRowCanExpand and renderer markup. + - Updating expanded state but never rendering subrows or the custom + expanded UI because Table is headless. + - Assuming paginateExpandedRows changes grouping or flattens visual + descendants; it only controls the expanded-row pagination stage. + path: references/expanding.md + replaces: '@tanstack/table-core#expanding' + - slug: pagination + purpose: + Configure client slicing or manual pages, counts, navigation limits, + and automatic page-index resets. + sources: + - TanStack/table:docs/framework/react/guide/pagination.md + - TanStack/table:packages/table-core/src/features/row-pagination + - TanStack/table:examples/react/pagination + failure_modes: + - Enabling manualPagination and passing all rows while expecting Table + to slice them; manual data must already represent the intended page. + - Omitting rowCount or pageCount for server pagination and then + trusting next-page or last-page availability. + - Misdiagnosing pageIndex jumping to zero as failed controlled state + when autoResetPageIndex is reacting to client-side data or row-model + changes. + path: references/pagination.md + replaces: '@tanstack/table-core#pagination' + - slug: row-pinning + purpose: + Separate top, center, and bottom rows with stable IDs and explicit + rendering/sticky behavior. + sources: + - TanStack/table:docs/framework/react/guide/row-pinning.md + - TanStack/table:packages/table-core/src/features/row-pinning + - TanStack/table:examples/react/row-pinning + failure_modes: + - Using index-derived row IDs for persistent pinning while sorting, + filtering, pagination, or data insertion changes indexes. + - Expecting row pinning to add sticky CSS or render top/center/bottom + collections in the correct order automatically. + - Ignoring keepPinnedRows, so pinned rows remain visible outside the + center row model when the desired product behavior was to filter or + paginate them away. + path: references/row-pinning.md + replaces: '@tanstack/table-core#row-pinning' + - slug: cell-selection + purpose: Maintain spreadsheet-style rectangular selections as ordered + include/exclude operations anchored to row and column ids, resolving + them into disjoint positive regions across sorting, filtering, + pagination, and column layout changes. + sources: + - TanStack/table:docs/framework/react/guide/cell-selection.md + - TanStack/table:packages/table-core/src/features/cell-selection + - TanStack/table:examples/react/cell-selection + failure_modes: + - Expecting cellSelection to be a per-cell map or a list of final + positive regions; it is an ordered log of two-corner include/exclude + operations, and derived bounds may split one stored range into + several regions. + - Reordering, deduplicating, or serializing only the corners of + controlled cellSelection state and thereby changing or losing + subtraction semantics. + - Using additive when the intended operation is explicit subtraction; + selectCellRange mode is replace, include, or exclude, while additive + is only a deprecated include alias. + - Assuming Ctrl/Cmd always adds a range; a modified interaction + excludes when it starts on a selected cell and includes when it + starts on an unselected cell. + - Binding only the mousedown handler and expecting drag selection, or + reimplementing mouseup even though the start handler owns its own + document listener. + - Drawing the selection outline with borders on a border-collapse + table, which changes row heights as cells become selected. + - Re-rendering every cell on each drag update instead of subscribing + per row to table.atoms.cellSelection. + path: references/cell-selection.md + replaces: '@tanstack/table-core#cell-selection' + - slug: cell-spanning + purpose: + Merge adjacent body cells into row- and column-spanning cells derived + from the rendered row model, with covered cells reporting a span of 0 + that renderers must skip. + sources: + - TanStack/table:docs/framework/react/guide/cell-spanning.md + - TanStack/table:packages/table-core/src/features/cell-spanning + - TanStack/table:examples/react/cell-spanning + failure_modes: + - Rendering a covered cell with rowSpan={0} instead of skipping it; + HTML rowspan="0" means span to the end of the row group, so the cell + merges down the entire tbody. + - Expecting spanning to sort or group rows; it merges adjacent equal + values only, so unsorted data renders no merges at all. + - Precomputing spans from the source data array, which survives + sorting, filtering, and page changes and produces ragged rows. + - Assuming a run continues across a page or pinned-section boundary; + runs are clipped to the rendered rows of each section. + - Pre-expanding stored selection corners to cover merges; selection + bounds already expand at derivation time when both features are + registered, and pre-expanded corners go stale when sorting or paging + changes the merges. + path: references/cell-spanning.md + replaces: '@tanstack/table-core#cell-spanning' + - slug: row-selection + purpose: + Maintain selection IDs across current, filtered, grouped, and manually + paginated data. + sources: + - TanStack/table:docs/framework/react/guide/row-selection.md + - TanStack/table:packages/table-core/src/features/row-selection + - TanStack/table:examples/react/row-selection + failure_modes: + - Assuming selection mutates application data or is automatically + deleted when rows disappear; rowSelection is independent ID state. + - Using default index IDs for server pagination or mutable data + instead of a stable getRowId. + - Treating getSelectedRowModel as a database-wide selection lookup + under manual pagination even though only loaded rows can appear in a + row model. + path: references/row-selection.md + replaces: '@tanstack/table-core#row-selection' + - slug: sorting + purpose: Configure single/multi sorting, comparison functions, undefined + placement, removal cycles, and client/manual ownership. + sources: + - TanStack/table:docs/framework/react/guide/sorting.md + - TanStack/table:packages/table-core/src/features/row-sorting + - TanStack/table:examples/react/sorting + failure_modes: + - Setting manualSorting and expecting createSortedRowModel to reorder + rows; manual mode trusts incoming data. + - Writing a custom sortFn that applies ascending/descending direction + itself even though Table reverses the comparator result for + descending order. + - Assuming undefined values, multi-sort gestures, and sort-removal + cycles match product expectations without configuring sortUndefined + and multi-sort options. + path: references/sorting.md + replaces: '@tanstack/table-core#sorting' + - slug: aggregation + path: references/aggregation.md + replaces: '@tanstack/table-core#aggregation' + purpose: + Aggregate columns independently of grouping, with depth-selected row + scopes, multiple keyed aggregations, custom context definitions, and + manual values. + sources: + - 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 + failure_modes: + - Adding grouping solely to compute a grand total instead of using + rowAggregationFeature. + - Passing a nonexistent scope option alongside rows; the public + options contain rows and maxDepth. + - Using the legacy callable aggregation signature instead of + constructAggregationFn and the aggregate context. + - Registering aggregationFns without rowAggregationFeature or assuming + grouping state alone computes aggregates. + 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.' + requires: + - core + - slug: table-state package: '@tanstack/table-core' domain: foundations type: core - purpose: 'Diagnose missing exports, options, state, and instance methods before inventing replacement code.' - sources: - [ - 'TanStack/table:packages/table-core/src/index.ts', - 'TanStack/table:packages/table-core/src/types/TableFeatures.ts', - 'TanStack/table:docs/framework/react/guide/migrating.md', - ] - failure_modes: - - 'Searching v8 docs or recalling v7 APIs instead of checking the installed v9 package src and exact package version.' - - 'Assuming an API was removed when its feature was simply omitted from tableFeatures.' - - 'Using object spread, Object.keys, or JSON serialization to discover v9 prototype methods and concluding those methods do not exist.' - + purpose: Choose shared Table v9 state ownership, initialization, update and + reset semantics; route reactive reads to the installed framework adapter. + 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 + failure_modes: + - Assuming an unregistered feature has a state slice. + - Confusing writable baseAtoms, readonly resolved atoms, the flat store, + and adapter-selected state. + - Supplying a controlled callback without the current controlled value, or + discarding updater functions. + - Assigning multiple owners to one slice and relying on atom/state + precedence. + - Treating snapshots as framework subscriptions. + - Expecting changed initialState or a core table.reset() to reset + externally owned atoms. + 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. + requires: + - core - slug: custom-features package: '@tanstack/table-core' domain: foundations type: core - purpose: 'Extend Table through every v9 FeatureMap and table/column/row/cell/header API lifecycle surface only when built-in options, meta, and APIs are insufficient.' - 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', - ] - failure_modes: - - 'Building a custom feature for behavior already covered by column meta, table meta, or a built-in feature API.' - - 'Adding types without registering matching initial state, default options, state updaters, and prototype/table APIs in the feature lifecycle.' - - 'Mutating table instances ad hoc instead of registering a stable feature in tableFeatures, losing type inference and composition.' - - 'Assuming the density example exhausts the extension surface and overlooking column-def, column, row, cell, header, or advanced row-model FeatureMaps.' - - 'Looking for nonexistent assignColumnAPIs/assignRowAPIs helpers instead of using assignPrototypeAPIs inside the matching TableFeature prototype hook.' - + purpose: Extend Table through every v9 FeatureMap and + table/column/row/cell/header API lifecycle surface only when built-in + options, meta, and APIs are insufficient. + 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 + failure_modes: + - Building a custom feature for behavior already covered by column meta, + table meta, or a built-in feature API. + - Adding types without registering matching initial state, default + options, state updaters, and prototype/table APIs in the feature + lifecycle. + - Mutating table instances ad hoc instead of registering a stable feature + in tableFeatures, losing type inference and composition. + - Assuming the density example exhausts the extension surface and + overlooking column-def, column, row, cell, header, or advanced row-model + FeatureMaps. + - Looking for nonexistent assignColumnAPIs/assignRowAPIs helpers instead + of using assignPrototypeAPIs inside the matching TableFeature prototype + hook. + references: + - path: references/plugin-example.md + purpose: Read when implementing a custom plugin for the complete checked + example, FeatureMaps, and lifecycle wiring. + 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 + failure_modes: + - Building a custom feature for behavior already covered by column + meta, table meta, or a built-in feature API. + - Adding types without registering matching initial state, default + options, state updaters, and prototype/table APIs in the feature + lifecycle. + - Mutating table instances ad hoc instead of registering a stable + feature in tableFeatures, losing type inference and composition. + - Assuming the density example exhausts the extension surface and + overlooking column-def, column, row, cell, header, or advanced + row-model FeatureMaps. + - Looking for nonexistent assignColumnAPIs/assignRowAPIs helpers + instead of using assignPrototypeAPIs inside the matching + TableFeature prototype hook. + 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. + requires: + - core + - table-features - slug: migrate-v8-to-v9 package: '@tanstack/table-core' domain: foundations type: migration - purpose: 'Route framework-specific migration while enforcing the shared v9 feature, row-model, instance-method, naming, and type changes.' - 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', - ] - failure_modes: - - 'Promoting deprecated useLegacyTable as the migration target instead of a temporary stopgap for code already using it.' - - 'Leaving v8 getFilteredRowModel/getSortedRowModel/getPaginationRowModel table options in place instead of v9 create*RowModel slots on tableFeatures.' - - 'Missing shared breaking changes such as prototype-bound instance methods, sortFn naming, feature-gated APIs, or logical start/end pinning.' - - - slug: column-faceting - package: '@tanstack/table-core' - domain: feature-plugins - type: feature - purpose: 'Derive filter option counts and numeric ranges from the correct faceted row model.' - sources: - [ - 'TanStack/table:docs/framework/react/guide/column-faceting.md', - 'TanStack/table:packages/table-core/src/features/column-faceting', - 'TanStack/table:examples/react/filters-faceted', - ] - failure_modes: - - 'Registering columnFacetingFeature but omitting the facetedRowModel, facetedUniqueValues, or facetedMinMaxValues slot needed by the API being called.' - - 'Expecting a column facet to include that column own active filter; the faceted row model intentionally applies the other filters and excludes its own.' - - 'Computing large server-owned facet sets from the currently loaded client page and presenting incomplete counts as global results.' - - - slug: column-filtering - package: '@tanstack/table-core' - domain: feature-plugins - type: feature - purpose: 'Configure column filters, filter functions, metadata, nested-row direction, and client/manual ownership.' - sources: - [ - 'TanStack/table:docs/framework/react/guide/column-filtering.md', - 'TanStack/table:packages/table-core/src/features/column-filtering', - 'TanStack/table:examples/react/filters', - ] - failure_modes: - - 'Setting manualFiltering and still expecting createFilteredRowModel to transform data; manual mode returns the pre-filtered model.' - - 'Using accessor values that are objects or renderer output with built-in filter functions that expect comparable primitive values.' - - 'Providing controlled columnFilters plus onColumnFiltersChange without applying both value and updater-function forms to the external source.' - - - slug: grouping - package: '@tanstack/table-core' - domain: feature-plugins - type: feature - purpose: 'Group rows, aggregate cells, and reason about grouped rows in expansion and pagination.' - sources: - [ - 'TanStack/table:docs/framework/react/guide/grouping.md', - 'TanStack/table:packages/table-core/src/features/column-grouping', - 'TanStack/table:examples/react/grouping', - ] - failure_modes: - - 'Registering groupedRowModel or aggregationFns without columnGroupingFeature, or expecting grouping state alone to process rows.' - - 'Assuming pageSize counts only leaf data rows; group headers are rows in the model and affect built-in pagination.' - - 'Rendering every grouped cell as a normal value instead of handling grouped, placeholder, and aggregated cell states.' - - - slug: column-ordering - package: '@tanstack/table-core' - domain: feature-plugins - type: feature - purpose: 'Control leaf-column order while respecting pinning, visibility, and grouped-column precedence.' - sources: - [ - 'TanStack/table:docs/framework/react/guide/column-ordering.md', - 'TanStack/table:packages/table-core/src/features/column-ordering', - 'TanStack/table:examples/react/column-dnd', - ] - failure_modes: - - 'Treating columnOrder as the final rendered order while pinning regions and groupedColumnMode also reorder columns.' - - 'Using headers, labels, or array indexes as drag identifiers instead of stable leaf column IDs.' - - 'Mutating the columnOrder array in place so the state owner does not observe a new value.' - - - slug: column-pinning - package: '@tanstack/table-core' - domain: feature-plugins - type: feature - purpose: 'Partition columns into logical start, center, and end regions and implement sticky layout correctly.' - sources: - [ - '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', - ] - failure_modes: - - 'Using v8 or early-beta left/right state and APIs instead of v9 logical start/end names, especially in RTL layouts.' - - 'Expecting pinning state to apply position: sticky, offsets, z-index, backgrounds, or overflow CSS automatically.' - - 'Allowing rendered widths to diverge from column.getSize, producing gaps or overlaps between adjacent pinned columns.' - - - slug: column-resizing - package: '@tanstack/table-core' - domain: feature-plugins - type: feature - purpose: 'Wire resize gestures and resize state onto the numeric sizing model without avoidable render cost.' - sources: - [ - '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', - ] - failure_modes: - - 'Registering columnResizingFeature without its columnSizingFeature prerequisite.' - - 'Displaying a resize handle without attaching header.getResizeHandler to the correct pointer or touch events.' - - 'Reading getSize repeatedly in every cell during onChange resizing instead of caching sizes or using CSS variables for large tables.' - - - slug: column-sizing - package: '@tanstack/table-core' - domain: feature-plugins - type: feature - purpose: 'Use numeric min, max, and current sizes as state inputs to a renderer-owned CSS layout.' - sources: - [ - 'TanStack/table:docs/framework/react/guide/column-sizing.md', - 'TanStack/table:packages/table-core/src/features/column-sizing', - 'TanStack/table:examples/react/column-sizing', - ] - failure_modes: - - 'Expecting the numeric sizing state to set DOM widths without applying it to th/td descendants, grid tracks, or flex styles.' - - 'Forcing auto or percentage strings through a number API instead of choosing and implementing an appropriate CSS layout strategy.' - - 'Forgetting the default size and rendered content can disagree, which also corrupts pinning offsets and total-size calculations.' - - - slug: column-visibility - package: '@tanstack/table-core' - domain: feature-plugins - type: feature - purpose: 'Hide leaf columns while rendering only visibility-aware header, column, and cell collections.' - sources: - [ - 'TanStack/table:docs/framework/react/guide/column-visibility.md', - 'TanStack/table:packages/table-core/src/features/column-visibility', - 'TanStack/table:examples/react/column-visibility', - ] - failure_modes: - - 'Updating columnVisibility but rendering getAllLeafColumns or row.getAllCells, so hidden columns remain in the DOM.' - - 'Treating absent map entries as hidden; only an explicit false hides a column.' - - 'Expecting enableHiding to hide a column when it only controls whether the user or API may hide it.' - - - slug: global-filtering - package: '@tanstack/table-core' - domain: feature-plugins - type: feature - purpose: 'Apply one filter across eligible columns with explicit column eligibility and client/manual ownership.' - sources: - [ - 'TanStack/table:docs/framework/react/guide/global-filtering.md', - 'TanStack/table:packages/table-core/src/features/global-filtering', - 'TanStack/table:examples/react/filters', - ] - failure_modes: - - 'Registering globalFilteringFeature without columnFilteringFeature and a filtered row-model stage when client processing is expected.' - - 'Assuming every column participates; the default eligibility checks the first core row value and only accepts strings or numbers.' - - 'Using manualFiltering while updating globalFilter state but never sending that value to the server query.' - - - slug: expanding - package: '@tanstack/table-core' - domain: feature-plugins - type: feature - purpose: 'Expand hierarchical subrows or custom detail panels and place expansion correctly relative to pagination.' - sources: - [ - 'TanStack/table:docs/framework/react/guide/expanding.md', - 'TanStack/table:packages/table-core/src/features/row-expanding', - 'TanStack/table:examples/react/expanding', - ] - failure_modes: - - 'Expecting nested data to expand without getSubRows, or expecting a custom detail panel without getRowCanExpand and renderer markup.' - - 'Updating expanded state but never rendering subrows or the custom expanded UI because Table is headless.' - - 'Assuming paginateExpandedRows changes grouping or flattens visual descendants; it only controls the expanded-row pagination stage.' - - - slug: pagination - package: '@tanstack/table-core' - domain: feature-plugins - type: feature - purpose: 'Configure client slicing or manual pages, counts, navigation limits, and automatic page-index resets.' - sources: - [ - 'TanStack/table:docs/framework/react/guide/pagination.md', - 'TanStack/table:packages/table-core/src/features/row-pagination', - 'TanStack/table:examples/react/pagination', - ] - failure_modes: - - 'Enabling manualPagination and passing all rows while expecting Table to slice them; manual data must already represent the intended page.' - - 'Omitting rowCount or pageCount for server pagination and then trusting next-page or last-page availability.' - - 'Misdiagnosing pageIndex jumping to zero as failed controlled state when autoResetPageIndex is reacting to client-side data or row-model changes.' - - - slug: row-pinning - package: '@tanstack/table-core' - domain: feature-plugins - type: feature - purpose: 'Separate top, center, and bottom rows with stable IDs and explicit rendering/sticky behavior.' - sources: - [ - 'TanStack/table:docs/framework/react/guide/row-pinning.md', - 'TanStack/table:packages/table-core/src/features/row-pinning', - 'TanStack/table:examples/react/row-pinning', - ] - failure_modes: - - 'Using index-derived row IDs for persistent pinning while sorting, filtering, pagination, or data insertion changes indexes.' - - 'Expecting row pinning to add sticky CSS or render top/center/bottom collections in the correct order automatically.' - - 'Ignoring keepPinnedRows, so pinned rows remain visible outside the center row model when the desired product behavior was to filter or paginate them away.' - - - slug: cell-selection - package: '@tanstack/table-core' - domain: feature-plugins - type: feature - purpose: 'Maintain spreadsheet-style rectangular selections as ordered include/exclude operations anchored to row and column ids, resolving them into disjoint positive regions across sorting, filtering, pagination, and column layout changes.' - sources: - [ - 'TanStack/table:docs/framework/react/guide/cell-selection.md', - 'TanStack/table:packages/table-core/src/features/cell-selection', - 'TanStack/table:examples/react/cell-selection', - ] - failure_modes: - - 'Expecting cellSelection to be a per-cell map or a list of final positive regions; it is an ordered log of two-corner include/exclude operations, and derived bounds may split one stored range into several regions.' - - 'Reordering, deduplicating, or serializing only the corners of controlled cellSelection state and thereby changing or losing subtraction semantics.' - - 'Using additive when the intended operation is explicit subtraction; selectCellRange mode is replace, include, or exclude, while additive is only a deprecated include alias.' - - 'Assuming Ctrl/Cmd always adds a range; a modified interaction excludes when it starts on a selected cell and includes when it starts on an unselected cell.' - - 'Binding only the mousedown handler and expecting drag selection, or reimplementing mouseup even though the start handler owns its own document listener.' - - 'Drawing the selection outline with borders on a border-collapse table, which changes row heights as cells become selected.' - - 'Re-rendering every cell on each drag update instead of subscribing per row to table.atoms.cellSelection.' - - - slug: cell-spanning - package: '@tanstack/table-core' - domain: feature-plugins - type: feature - purpose: 'Merge adjacent body cells into row- and column-spanning cells derived from the rendered row model, with covered cells reporting a span of 0 that renderers must skip.' - sources: - [ - 'TanStack/table:docs/framework/react/guide/cell-spanning.md', - 'TanStack/table:packages/table-core/src/features/cell-spanning', - 'TanStack/table:examples/react/cell-spanning', - ] - failure_modes: - - 'Rendering a covered cell with rowSpan={0} instead of skipping it; HTML rowspan="0" means span to the end of the row group, so the cell merges down the entire tbody.' - - 'Expecting spanning to sort or group rows; it merges adjacent equal values only, so unsorted data renders no merges at all.' - - 'Precomputing spans from the source data array, which survives sorting, filtering, and page changes and produces ragged rows.' - - 'Assuming a run continues across a page or pinned-section boundary; runs are clipped to the rendered rows of each section.' - - 'Pre-expanding stored selection corners to cover merges; selection bounds already expand at derivation time when both features are registered, and pre-expanded corners go stale when sorting or paging changes the merges.' - - - slug: row-selection - package: '@tanstack/table-core' - domain: feature-plugins - type: feature - purpose: 'Maintain selection IDs across current, filtered, grouped, and manually paginated data.' - sources: - [ - 'TanStack/table:docs/framework/react/guide/row-selection.md', - 'TanStack/table:packages/table-core/src/features/row-selection', - 'TanStack/table:examples/react/row-selection', - ] - failure_modes: - - 'Assuming selection mutates application data or is automatically deleted when rows disappear; rowSelection is independent ID state.' - - 'Using default index IDs for server pagination or mutable data instead of a stable getRowId.' - - 'Treating getSelectedRowModel as a database-wide selection lookup under manual pagination even though only loaded rows can appear in a row model.' - - - slug: sorting - package: '@tanstack/table-core' - domain: feature-plugins - type: feature - purpose: 'Configure single/multi sorting, comparison functions, undefined placement, removal cycles, and client/manual ownership.' - sources: - [ - 'TanStack/table:docs/framework/react/guide/sorting.md', - 'TanStack/table:packages/table-core/src/features/row-sorting', - 'TanStack/table:examples/react/sorting', - ] - failure_modes: - - 'Setting manualSorting and expecting createSortedRowModel to reorder rows; manual mode trusts incoming data.' - - 'Writing a custom sortFn that applies ascending/descending direction itself even though Table reverses the comparator result for descending order.' - - 'Assuming undefined values, multi-sort gestures, and sort-removal cycles match product expectations without configuring sortUndefined and multi-sort options.' - + purpose: Route framework-specific migration while enforcing the shared v9 + feature, row-model, instance-method, naming, and type changes. + 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 + failure_modes: + - Promoting deprecated useLegacyTable as the migration target instead of a + temporary stopgap for code already using it. + - Leaving v8 getFilteredRowModel/getSortedRowModel/getPaginationRowModel + table options in place instead of v9 create*RowModel slots on + tableFeatures. + - Missing shared breaking changes such as prototype-bound instance + methods, sortFn naming, feature-gated APIs, or logical start/end + pinning. + references: + - path: references/architecture.md + purpose: + Read for feature registration, row-model and function slots, bound + methods, and removed internal APIs. + 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 + failure_modes: [] + - path: references/state.md + purpose: Read for shared v8 state, ownership, observation, and reset changes. + 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 + failure_modes: [] + - path: references/feature-apis.md + purpose: + Read when auditing pinning, sizing, resizing, sorting, or row-selection + API changes. + 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 + failure_modes: [] + - path: references/typescript.md + purpose: + Read for feature generics, column helpers, meta, registries, and + RowData changes. + 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 + failure_modes: [] + 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. + requires: + - core - slug: getting-started package: '@tanstack/react-table' domain: framework-adapters type: framework framework: react - purpose: 'Create and render a headless v9 React table with useTable and explicit features.' - sources: - [ - 'TanStack/table:docs/framework/react/guide/migrating.md', - 'TanStack/table:examples/react/basic-use-table', - 'TanStack/table:packages/react-table/src/index.ts', - ] - failure_modes: - - 'Copying a v8 useReactTable/getCoreRowModel setup instead of the v9 useTable plus tableFeatures shape.' - - 'Expecting useTable to render markup or styles rather than mapping headers, rows, and cells with FlexRender or flexRender.' - - 'Creating features, columns, or fallback data inside render without stable references.' - + purpose: + Create and render a headless v9 React table with useTable and explicit + features. + 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 + failure_modes: + - Copying a v8 useReactTable/getCoreRowModel setup instead of the v9 + useTable plus tableFeatures shape. + - Expecting useTable to render markup or styles rather than mapping + headers, rows, and cells with FlexRender or flexRender. + - Creating features, columns, or fallback data inside render without + stable references. + references: + - slug: create-table-hook + purpose: Create a typed app-level React table hook with shared features, + options, helpers, components, and contexts. + sources: + - 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 + failure_modes: + - Using createTableHook for a one-off table or registering a full + component system when only shared features/defaults are needed. + - Prop-drilling table, cell, and header values through registered + components instead of using the typed context hooks returned by the + same factory. + - Creating contexts inside a render path or introducing circular + imports between the hook module and registered components, causing + HMR or remount failures. + path: references/create-table-hook.md + replaces: '@tanstack/react-table#create-table-hook' + - slug: with-tanstack-query + purpose: + Use Query as the server-data source while Table owns data-grid state + and explicit manual row-model boundaries. + sources: + - TanStack/table:examples/react/with-tanstack-query + - TanStack/table:examples/react/virtualized-infinite-scrolling + - TanStack/table:docs/framework/react/guide/pagination.md + failure_modes: + - Putting server response data into a second unsynchronized React + state layer instead of deriving Table data from the query result. + - Omitting pagination, sorting, or filter state from the query key and + showing cached data for the wrong table state. + - Enabling manual processing without passing server counts, resetting + invalid pages, or preserving previous data intentionally. + path: references/with-tanstack-query.md + replaces: '@tanstack/react-table#with-tanstack-query' + - slug: with-tanstack-virtual + purpose: + Virtualize React rows or columns as a rendering concern layered over + the final Table row model. + sources: + - TanStack/table:docs/framework/react/guide/virtualization.md + - TanStack/table:examples/react/virtualized-rows + - TanStack/table:examples/react/virtualized-columns + - TanStack/table:examples/react/virtualized-infinite-scrolling + failure_modes: + - Treating Virtual as a Table feature or row model instead of + virtualizing table.getRowModel().rows in the renderer. + - Measuring rows against the wrong scroll element or omitting stable + keys and data-index values for dynamic measurement. + - Combining semantic table layout, sticky headers/columns, transforms, + and dynamic heights without copying the example CSS positioning + contract. + path: references/with-tanstack-virtual.md + replaces: '@tanstack/react-table#with-tanstack-virtual' + 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. + requires: + - '@tanstack/table-core#core' - slug: table-state package: '@tanstack/react-table' domain: framework-adapters type: framework framework: react - purpose: 'Read, subscribe to, control, and optimize React table state with selectors, Subscribe, and external atoms.' - 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', - ] - failure_modes: - - 'Reading table.atoms.x.get or table.store.state during render and assuming that snapshot read subscribes React to future changes.' - - 'Providing onSliceChange without state.slice, or failing to apply updater-function values when React owns the slice.' - - 'Hiding builder-method state reads in compiler-memoized children without a Subscribe boundary, or adding fine-grained Subscribe everywhere before measuring.' - + purpose: Read, subscribe to, control, and optimize React table state with + selectors, Subscribe, and external atoms. + 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 + failure_modes: + - Reading table.atoms.x.get or table.store.state during render and + assuming that snapshot read subscribes React to future changes. + - Providing onSliceChange without state.slice, or failing to apply + updater-function values when React owns the slice. + - Hiding builder-method state reads in compiler-memoized children without + a Subscribe boundary, or adding fine-grained Subscribe everywhere before + measuring. + references: + - path: references/reactivity.md + purpose: + Read for advanced react reactive boundaries, subscription patterns, and + complete framework-specific state examples. + 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 + failure_modes: + - Reading table.atoms.x.get or table.store.state during render and + assuming that snapshot read subscribes React to future changes. + - Providing onSliceChange without state.slice, or failing to apply + updater-function values when React owns the slice. + - Hiding builder-method state reads in compiler-memoized children + without a Subscribe boundary, or adding fine-grained Subscribe + everywhere before measuring. + description: + Read and control Table v9 state in react. Use for tracked reads, + subscriptions, controlled slices, and framework-specific reactive + boundaries. + requires: + - '@tanstack/table-core#table-state' - slug: migrate-v8-to-v9 package: '@tanstack/react-table' domain: framework-adapters type: migration framework: react - purpose: 'Migrate React from useReactTable to the native v9 feature, state, rendering, helper, and composable APIs.' - 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', - ] - failure_modes: - - 'Using useLegacyTable as the finished migration rather than converting to useTable and explicit features.' - - 'Keeping the removed global onStateChange or v8 row-model options instead of per-slice control and tableFeatures slots.' - - 'Missing React-specific FlexRender/Subscribe changes while only applying the core feature renames.' - - - slug: create-table-hook - package: '@tanstack/react-table' - domain: framework-adapters - type: framework - framework: react - purpose: 'Create a typed app-level React table hook with shared features, options, helpers, components, and contexts.' - sources: - [ - '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', - ] - failure_modes: - - 'Using createTableHook for a one-off table or registering a full component system when only shared features/defaults are needed.' - - 'Prop-drilling table, cell, and header values through registered components instead of using the typed context hooks returned by the same factory.' - - 'Creating contexts inside a render path or introducing circular imports between the hook module and registered components, causing HMR or remount failures.' - - - slug: with-tanstack-query - package: '@tanstack/react-table' - domain: framework-adapters - type: integration - framework: react - purpose: 'Use Query as the server-data source while Table owns data-grid state and explicit manual row-model boundaries.' - sources: - [ - 'TanStack/table:examples/react/with-tanstack-query', - 'TanStack/table:examples/react/virtualized-infinite-scrolling', - 'TanStack/table:docs/framework/react/guide/pagination.md', - ] - failure_modes: - - 'Putting server response data into a second unsynchronized React state layer instead of deriving Table data from the query result.' - - 'Omitting pagination, sorting, or filter state from the query key and showing cached data for the wrong table state.' - - 'Enabling manual processing without passing server counts, resetting invalid pages, or preserving previous data intentionally.' - - - slug: with-tanstack-virtual - package: '@tanstack/react-table' - domain: framework-adapters - type: integration - framework: react - purpose: 'Virtualize React rows or columns as a rendering concern layered over the final Table row model.' - sources: - [ - 'TanStack/table:docs/framework/react/guide/virtualization.md', - 'TanStack/table:examples/react/virtualized-rows', - 'TanStack/table:examples/react/virtualized-columns', - 'TanStack/table:examples/react/virtualized-infinite-scrolling', - ] - failure_modes: - - 'Treating Virtual as a Table feature or row model instead of virtualizing table.getRowModel().rows in the renderer.' - - 'Measuring rows against the wrong scroll element or omitting stable keys and data-index values for dynamic measurement.' - - 'Combining semantic table layout, sticky headers/columns, transforms, and dynamic heights without copying the example CSS positioning contract.' - + purpose: Migrate React from useReactTable to the native v9 feature, state, + rendering, helper, and composable APIs. + 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 + failure_modes: + - Using useLegacyTable as the finished migration rather than converting to + useTable and explicit features. + - Keeping the removed global onStateChange or v8 row-model options instead + of per-slice control and tableFeatures slots. + - Missing React-specific FlexRender/Subscribe changes while only applying + the core feature renames. + references: + - path: references/adapter-migration.md + purpose: + Read for react construction, rendering, state, and app-hook migration + details. Shared feature and type mappings belong to the core migration + references. + 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 + failure_modes: + - Using useLegacyTable as the finished migration rather than + converting to useTable and explicit features. + - Keeping the removed global onStateChange or v8 row-model options + instead of per-slice control and tableFeatures slots. + - Missing React-specific FlexRender/Subscribe changes while only + applying the core feature renames. + description: Migrate react Table v8 to v9. Audit framework construction, + rendering, state, and app hooks, with shared API changes in the core + migration skill. + requires: + - '@tanstack/table-core#migrate-v8-to-v9' - slug: getting-started package: '@tanstack/preact-table' domain: framework-adapters type: framework framework: preact - purpose: 'Create and render a native Preact v9 table without relying on the React adapter through preact/compat.' - sources: - [ - 'TanStack/table:docs/framework/preact/guide/migrating.md', - 'TanStack/table:examples/preact/basic-use-table', - 'TanStack/table:packages/preact-table/src/index.ts', - ] - failure_modes: - - 'Importing @tanstack/react-table through preact/compat instead of the native @tanstack/preact-table v9 adapter.' - - 'Copying useReactTable or React-only rendering assumptions instead of Preact useTable and its exported helpers.' - - 'Recreating stable features, columns, or data on each render and causing unnecessary option and row-model work.' - + purpose: + Create and render a native Preact v9 table without relying on the React + adapter through preact/compat. + 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 + failure_modes: + - Importing @tanstack/react-table through preact/compat instead of the + native @tanstack/preact-table v9 adapter. + - Copying useReactTable or React-only rendering assumptions instead of + Preact useTable and its exported helpers. + - Recreating stable features, columns, or data on each render and causing + unnecessary option and row-model work. + references: + - slug: create-table-hook + purpose: + Build a typed reusable Preact table hook and optional component/context + registry. + sources: + - 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 + failure_modes: + - Using the app hook for one table when standalone useTable is clearer. + - Importing context hooks from a different factory or reading them + outside the matching AppTable/AppCell/AppHeader provider. + - Prop-drilling stable table instances through memoized components and + expecting context consumers to update without the factory + wrappers/subscriptions. + path: references/create-table-hook.md + replaces: '@tanstack/preact-table#create-table-hook' + - slug: with-tanstack-query + purpose: + Drive manually processed Preact table data from TanStack Query and + table state. + sources: + - TanStack/table:examples/preact/with-tanstack-query + - TanStack/table:docs/framework/preact/guide/pagination.md + failure_modes: + - Copying React Query hook names or React state glue instead of the + Preact Query example. + - Leaving table state out of the query key or query function request. + - Expecting manual pagination/filtering/sorting flags to fetch or + transform server data. + path: references/with-tanstack-query.md + replaces: '@tanstack/preact-table#with-tanstack-query' + - slug: with-tanstack-virtual + purpose: + Apply Preact Virtual rendering to Table rows or columns using the + adapter virtualization guide. + sources: + - TanStack/table:docs/framework/preact/guide/virtualization.md + - TanStack/table:packages/preact-table/src/index.ts + failure_modes: + - Copying React-only component/hook details instead of using the + Preact Virtual API exported for the installed versions. + - Virtualizing raw input data instead of the final filtered, sorted, + expanded, and paginated row model. + - Assuming Table supplies scroll containers, measurements, spacer + geometry, sticky CSS, or overscan defaults. + path: references/with-tanstack-virtual.md + replaces: '@tanstack/preact-table#with-tanstack-virtual' + 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. + requires: + - '@tanstack/table-core#core' - slug: table-state package: '@tanstack/preact-table' domain: framework-adapters type: framework framework: preact - purpose: 'Use selected table.state, Preact subscriptions, controlled slices, and external atoms correctly.' - sources: - [ - 'TanStack/table:docs/framework/preact/guide/table-state.md', - 'TanStack/table:examples/preact/basic-subscribe', - 'TanStack/table:packages/preact-table/src/useTable.ts', - ] - failure_modes: - - 'Reading atom/store snapshots in render as though they create Preact subscriptions.' - - 'Pairing an onSliceChange callback with no controlled state.slice value or ignoring updater-function inputs.' - - 'Narrowing the useTable selector so far that rendered builder APIs depend on unselected state, or optimizing before a real render problem exists.' - + purpose: + Use selected table.state, Preact subscriptions, controlled slices, and + external atoms correctly. + sources: + - TanStack/table:docs/framework/preact/guide/table-state.md + - TanStack/table:examples/preact/basic-subscribe + - TanStack/table:packages/preact-table/src/useTable.ts + failure_modes: + - Reading atom/store snapshots in render as though they create Preact + subscriptions. + - Pairing an onSliceChange callback with no controlled state.slice value + or ignoring updater-function inputs. + - Narrowing the useTable selector so far that rendered builder APIs depend + on unselected state, or optimizing before a real render problem exists. + references: + - path: references/reactivity.md + purpose: + Read for advanced preact reactive boundaries, subscription patterns, + and complete framework-specific state examples. + sources: + - TanStack/table:docs/framework/preact/guide/table-state.md + - TanStack/table:examples/preact/basic-subscribe + - TanStack/table:packages/preact-table/src/useTable.ts + failure_modes: + - Reading atom/store snapshots in render as though they create Preact + subscriptions. + - Pairing an onSliceChange callback with no controlled state.slice + value or ignoring updater-function inputs. + - Narrowing the useTable selector so far that rendered builder APIs + depend on unselected state, or optimizing before a real render + problem exists. + description: + Read and control Table v9 state in preact. Use for tracked reads, + subscriptions, controlled slices, and framework-specific reactive + boundaries. + requires: + - '@tanstack/table-core#table-state' - slug: migrate-v8-to-v9 package: '@tanstack/preact-table' domain: framework-adapters type: migration framework: preact - purpose: 'Move a v8 React-adapter/preact-compat table onto the native v9 Preact adapter and architecture.' - sources: - [ - 'TanStack/table:docs/framework/preact/guide/migrating.md', - 'TanStack/table:packages/preact-table/src/index.ts', - 'TanStack/table:examples/preact/basic-use-table', - ] - failure_modes: - - 'Treating Preact as a simple hook rename while leaving the React package and compat aliases in place.' - - 'Keeping v8 get*RowModel options and globally included features instead of explicit tableFeatures slots.' - - 'Missing prototype-method, state, helper, pinning, and sorting renames shared by every v9 adapter.' - - - slug: create-table-hook - package: '@tanstack/preact-table' - domain: framework-adapters - type: framework - framework: preact - purpose: 'Build a typed reusable Preact table hook and optional component/context registry.' - sources: - [ - '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', - ] - failure_modes: - - 'Using the app hook for one table when standalone useTable is clearer.' - - 'Importing context hooks from a different factory or reading them outside the matching AppTable/AppCell/AppHeader provider.' - - 'Prop-drilling stable table instances through memoized components and expecting context consumers to update without the factory wrappers/subscriptions.' - - - slug: with-tanstack-query - package: '@tanstack/preact-table' - domain: framework-adapters - type: integration - framework: preact - purpose: 'Drive manually processed Preact table data from TanStack Query and table state.' - sources: - [ - 'TanStack/table:examples/preact/with-tanstack-query', - 'TanStack/table:docs/framework/preact/guide/pagination.md', - ] - failure_modes: - - 'Copying React Query hook names or React state glue instead of the Preact Query example.' - - 'Leaving table state out of the query key or query function request.' - - 'Expecting manual pagination/filtering/sorting flags to fetch or transform server data.' - - - slug: with-tanstack-virtual - package: '@tanstack/preact-table' - domain: framework-adapters - type: integration - framework: preact - purpose: 'Apply Preact Virtual rendering to Table rows or columns using the adapter virtualization guide.' - sources: - [ - 'TanStack/table:docs/framework/preact/guide/virtualization.md', - 'TanStack/table:packages/preact-table/src/index.ts', - ] - failure_modes: - - 'Copying React-only component/hook details instead of using the Preact Virtual API exported for the installed versions.' - - 'Virtualizing raw input data instead of the final filtered, sorted, expanded, and paginated row model.' - - 'Assuming Table supplies scroll containers, measurements, spacer geometry, sticky CSS, or overscan defaults.' - + purpose: + Move a v8 React-adapter/preact-compat table onto the native v9 Preact + adapter and architecture. + sources: + - TanStack/table:docs/framework/preact/guide/migrating.md + - TanStack/table:packages/preact-table/src/index.ts + - TanStack/table:examples/preact/basic-use-table + failure_modes: + - Treating Preact as a simple hook rename while leaving the React package + and compat aliases in place. + - Keeping v8 get*RowModel options and globally included features instead + of explicit tableFeatures slots. + - Missing prototype-method, state, helper, pinning, and sorting renames + shared by every v9 adapter. + references: + - path: references/adapter-migration.md + purpose: + Read for preact construction, rendering, state, and app-hook migration + details. Shared feature and type mappings belong to the core migration + references. + sources: + - TanStack/table:docs/framework/preact/guide/migrating.md + - TanStack/table:packages/preact-table/src/index.ts + - TanStack/table:examples/preact/basic-use-table + failure_modes: + - Treating Preact as a simple hook rename while leaving the React + package and compat aliases in place. + - Keeping v8 get*RowModel options and globally included features + instead of explicit tableFeatures slots. + - Missing prototype-method, state, helper, pinning, and sorting + renames shared by every v9 adapter. + description: Migrate preact Table v8 to v9. Audit framework construction, + rendering, state, and app hooks, with shared API changes in the core + migration skill. + requires: + - '@tanstack/table-core#migrate-v8-to-v9' - slug: getting-started package: '@tanstack/solid-table' domain: framework-adapters type: framework framework: solid - purpose: 'Create a Solid v9 table with createTable, reactive getters, and JSX rendering.' - sources: - [ - 'TanStack/table:docs/framework/solid/guide/migrating.md', - 'TanStack/table:examples/solid/basic-use-table', - 'TanStack/table:packages/solid-table/src/index.tsx', - ] - failure_modes: - - 'Using the v8 createSolidTable entrypoint or a React hook instead of v9 createTable.' - - 'Reading a signal once and passing its snapshot as data instead of a getter/reactive option when updates are expected.' - - 'Expecting Table to render DOM or CSS rather than iterating row/header APIs in Solid JSX.' - + purpose: Create a Solid v9 table with createTable, reactive getters, and JSX + rendering. + 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 + failure_modes: + - Using the v8 createSolidTable entrypoint or a React hook instead of v9 + createTable. + - Reading a signal once and passing its snapshot as data instead of a + getter/reactive option when updates are expected. + - Expecting Table to render DOM or CSS rather than iterating row/header + APIs in Solid JSX. + references: + - slug: create-table-hook + purpose: Create a shared Solid createAppTable and typed helper/component + registry without losing reactivity. + sources: + - TanStack/table:docs/framework/solid/guide/composable-tables.md + - TanStack/table:examples/solid/composable-tables + - TanStack/table:packages/solid-table/src/createTableHook.tsx + failure_modes: + - Using createTableHook for a one-off table instead of standalone + createTable. + - Passing snapshots where createAppTable needs reactive getters or + signals for per-table data and state. + - Reading context values outside registered App wrappers or + prop-drilling the table when returned context hooks express the + shared boundary. + path: references/create-table-hook.md + replaces: '@tanstack/solid-table#create-table-hook' + - slug: with-tanstack-query + purpose: + Compose Solid Query resources with manually processed Table state and + reactive query inputs. + sources: + - TanStack/table:examples/solid/with-tanstack-query + - TanStack/table:docs/framework/solid/guide/pagination.md + failure_modes: + - Passing signal snapshots into the query key so sorting, filtering, + or pagination changes are not tracked. + - Copying React Query hook/state patterns instead of Solid Query + reactive option getters. + - Using manual Table flags without returning already processed server + data and counts. + path: references/with-tanstack-query.md + replaces: '@tanstack/solid-table#with-tanstack-query' + - slug: with-tanstack-virtual + purpose: + Virtualize Solid Table rows/columns and infinite server data while + preserving reactive measurements. + sources: + - 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 + failure_modes: + - Creating the virtualizer from a non-reactive row count or wrong + scroll element. + - Virtualizing raw data rather than the current Table row model. + - Applying transforms, dynamic measurements, sticky regions, or + grid/flex widths inconsistently with the rendered layout. + path: references/with-tanstack-virtual.md + replaces: '@tanstack/solid-table#with-tanstack-virtual' + 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. + requires: + - '@tanstack/table-core#core' - slug: table-state package: '@tanstack/solid-table' domain: framework-adapters type: framework framework: solid - purpose: 'Use Solid-backed table atoms inside tracked scopes and choose native signals or external atoms for ownership.' - 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', - ] - failure_modes: - - 'Reading table atoms outside JSX, createMemo, createEffect, or another tracked scope and expecting later changes to rerun code.' - - 'Calling a state updater with a Solid setter assumption without resolving Table value-or-updater semantics.' - - 'Adding React-style broad rerender workarounds instead of relying on Solid narrow atom reads and computations.' - + purpose: + Use Solid-backed table atoms inside tracked scopes and choose native + signals or external atoms for ownership. + 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 + failure_modes: + - Reading table atoms outside JSX, createMemo, createEffect, or another + tracked scope and expecting later changes to rerun code. + - Calling a state updater with a Solid setter assumption without resolving + Table value-or-updater semantics. + - Adding React-style broad rerender workarounds instead of relying on + Solid narrow atom reads and computations. + references: + - path: references/reactivity.md + purpose: + Read for advanced solid reactive boundaries, subscription patterns, and + complete framework-specific state examples. + 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 + failure_modes: + - Reading table atoms outside JSX, createMemo, createEffect, or + another tracked scope and expecting later changes to rerun code. + - Calling a state updater with a Solid setter assumption without + resolving Table value-or-updater semantics. + - Adding React-style broad rerender workarounds instead of relying on + Solid narrow atom reads and computations. + description: + Read and control Table v9 state in solid. Use for tracked reads, + subscriptions, controlled slices, and framework-specific reactive + boundaries. + requires: + - '@tanstack/table-core#table-state' - slug: migrate-v8-to-v9 package: '@tanstack/solid-table' domain: framework-adapters type: migration framework: solid - purpose: 'Migrate createSolidTable code to v9 createTable, explicit features, atom-backed state, and new helpers.' - sources: - [ - 'TanStack/table:docs/framework/solid/guide/migrating.md', - 'TanStack/table:packages/solid-table/src/index.tsx', - 'TanStack/table:examples/solid/basic-use-table', - ] - failure_modes: - - 'Renaming the entrypoint but retaining v8 row-model options outside tableFeatures.' - - 'Forcing React selector patterns into Solid instead of using signal-tracked table atom reads.' - - 'Missing shared v9 changes to instance method binding, feature APIs, meta helpers, sorting, and pinning.' - - - slug: create-table-hook - package: '@tanstack/solid-table' - domain: framework-adapters - type: framework - framework: solid - purpose: 'Create a shared Solid createAppTable and typed helper/component registry without losing reactivity.' - sources: - [ - 'TanStack/table:docs/framework/solid/guide/composable-tables.md', - 'TanStack/table:examples/solid/composable-tables', - 'TanStack/table:packages/solid-table/src/createTableHook.tsx', - ] - failure_modes: - - 'Using createTableHook for a one-off table instead of standalone createTable.' - - 'Passing snapshots where createAppTable needs reactive getters or signals for per-table data and state.' - - 'Reading context values outside registered App wrappers or prop-drilling the table when returned context hooks express the shared boundary.' - - - slug: with-tanstack-query - package: '@tanstack/solid-table' - domain: framework-adapters - type: integration - framework: solid - purpose: 'Compose Solid Query resources with manually processed Table state and reactive query inputs.' - sources: - [ - 'TanStack/table:examples/solid/with-tanstack-query', - 'TanStack/table:docs/framework/solid/guide/pagination.md', - ] - failure_modes: - - 'Passing signal snapshots into the query key so sorting, filtering, or pagination changes are not tracked.' - - 'Copying React Query hook/state patterns instead of Solid Query reactive option getters.' - - 'Using manual Table flags without returning already processed server data and counts.' - - - slug: with-tanstack-virtual - package: '@tanstack/solid-table' - domain: framework-adapters - type: integration - framework: solid - purpose: 'Virtualize Solid Table rows/columns and infinite server data while preserving reactive measurements.' - sources: - [ - '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', - ] - failure_modes: - - 'Creating the virtualizer from a non-reactive row count or wrong scroll element.' - - 'Virtualizing raw data rather than the current Table row model.' - - 'Applying transforms, dynamic measurements, sticky regions, or grid/flex widths inconsistently with the rendered layout.' - + purpose: Migrate createSolidTable code to v9 createTable, explicit features, + atom-backed state, and new helpers. + sources: + - TanStack/table:docs/framework/solid/guide/migrating.md + - TanStack/table:packages/solid-table/src/index.tsx + - TanStack/table:examples/solid/basic-use-table + failure_modes: + - Renaming the entrypoint but retaining v8 row-model options outside + tableFeatures. + - Forcing React selector patterns into Solid instead of using + signal-tracked table atom reads. + - Missing shared v9 changes to instance method binding, feature APIs, meta + helpers, sorting, and pinning. + references: + - path: references/adapter-migration.md + purpose: + Read for solid construction, rendering, state, and app-hook migration + details. Shared feature and type mappings belong to the core migration + references. + sources: + - TanStack/table:docs/framework/solid/guide/migrating.md + - TanStack/table:packages/solid-table/src/index.tsx + - TanStack/table:examples/solid/basic-use-table + failure_modes: + - Renaming the entrypoint but retaining v8 row-model options outside + tableFeatures. + - Forcing React selector patterns into Solid instead of using + signal-tracked table atom reads. + - Missing shared v9 changes to instance method binding, feature APIs, + meta helpers, sorting, and pinning. + description: Migrate solid Table v8 to v9. Audit framework construction, + rendering, state, and app hooks, with shared API changes in the core + migration skill. + requires: + - '@tanstack/table-core#migrate-v8-to-v9' - slug: getting-started package: '@tanstack/svelte-table' domain: framework-adapters type: framework framework: svelte - purpose: 'Create a Svelte 5 table with createTable, rune-backed option getters, FlexRender, and headless markup.' - sources: - [ - 'TanStack/table:docs/framework/svelte/guide/migrating.md', - 'TanStack/table:examples/svelte/basic-create-table', - 'TanStack/table:packages/svelte-table/src/index.ts', - ] - failure_modes: - - 'Using the v8 createSvelteTable/store API or pre-Svelte-5 syntax instead of v9 createTable and runes.' - - 'Passing a one-time data snapshot where a getter is needed for current rune state.' - - 'Expecting render helpers to initialize interactive markup or provide table CSS automatically.' - - - slug: table-state - package: '@tanstack/svelte-table' - domain: framework-adapters - type: framework - framework: svelte - purpose: 'Use rune-aware table atoms and stores, native $derived projections, controlled $state or createTableState slices, and external atoms without broad invalidation or snapshot mismatches.' - 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', - ] - failure_modes: - - 'Keeping the removed beta.58 createTable/createAppTable selector argument, selected table.state property, subscribeTable helper, or SubscribeSource type after beta.59.' - - 'Reading atom or store snapshots outside a tracked Svelte scope and expecting the read itself to keep a consumer reactive.' - - 'Reading table.store.get() in an effect that only needs one atom slice, causing unrelated state changes to rerun the effect.' - - 'Pairing onSliceChange with a controlled state slice that is not actually written back with value-or-updater semantics.' - - 'Blaming pagination reactivity when autoResetPageIndex immediately overwrites an externally requested page.' - - - slug: migrate-v8-to-v9 - package: '@tanstack/svelte-table' - domain: framework-adapters - type: migration - framework: svelte - purpose: 'Move Svelte 4/v8 store-oriented tables to the Svelte 5 v9 adapter, explicit features, and rune-backed state.' - sources: - [ - 'TanStack/table:docs/framework/svelte/guide/migrating.md', - 'TanStack/table:packages/svelte-table/src/index.ts', - 'TanStack/table:examples/svelte/basic-create-table', - ] - failure_modes: - - 'Attempting the v9 adapter migration without first adopting Svelte 5-compatible component and reactivity syntax.' - - 'Keeping readable-store assumptions or v8 row-model table options after switching to createTable.' - - 'Keeping beta.58 creation selectors, table.state, subscribeTable, or their removed selected-state generic parameters after beta.59.' - - 'Missing shared v9 prototype, feature, helper, sorting, and logical-pinning changes.' - - - slug: create-table-hook - package: '@tanstack/svelte-table' - domain: framework-adapters - type: framework - framework: svelte - purpose: 'Define a reusable Svelte createAppTable, typed column helper, and optional component/context registry.' - sources: - [ - 'TanStack/table:docs/framework/svelte/guide/composable-tables.md', - 'TanStack/table:examples/svelte/composable-tables', - 'TanStack/table:packages/svelte-table/src/createTableHook.svelte.ts', - ] - failure_modes: - - 'Reimplementing createAppTable around the framework-agnostic core instead of using the shipped rune-capable createTableHook implementation.' - - 'Passing $state snapshots instead of getters to createAppTable, freezing data or controlled state.' - - 'Prop-drilling contexts through registered components instead of consuming the typed hooks under matching App wrappers.' - - - slug: with-tanstack-query + purpose: + Create a Svelte 5 table with createTable, rune-backed option getters, + FlexRender, and headless markup. + 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 + failure_modes: + - Using the v8 createSvelteTable/store API or pre-Svelte-5 syntax instead + of v9 createTable and runes. + - Passing a one-time data snapshot where a getter is needed for current + rune state. + - Expecting render helpers to initialize interactive markup or provide + table CSS automatically. + references: + - slug: create-table-hook + purpose: + Define a reusable Svelte createAppTable, typed column helper, and + optional component/context registry. + sources: + - TanStack/table:docs/framework/svelte/guide/composable-tables.md + - TanStack/table:examples/svelte/composable-tables + - TanStack/table:packages/svelte-table/src/createTableHook.svelte.ts + failure_modes: + - Reimplementing createAppTable around the framework-agnostic core + instead of using the shipped rune-capable createTableHook + implementation. + - Passing $state snapshots instead of getters to createAppTable, + freezing data or controlled state. + - Prop-drilling contexts through registered components instead of + consuming the typed hooks under matching App wrappers. + path: references/create-table-hook.md + replaces: '@tanstack/svelte-table#create-table-hook' + - slug: with-tanstack-query + purpose: + Connect Svelte Query data and query keys to manual Table processing + state. + sources: + - TanStack/table:examples/svelte/with-tanstack-query + - TanStack/table:docs/framework/svelte/guide/pagination.md + failure_modes: + - Building a query from non-reactive snapshots so page, sort, or + filter changes do not refetch. + - Duplicating query data into unsynchronized $state rather than + exposing the query result to Table through a getter. + - Expecting manual Table flags to execute network requests or server + transformations. + path: references/with-tanstack-query.md + replaces: '@tanstack/svelte-table#with-tanstack-query' + - slug: with-tanstack-virtual + purpose: + Render Svelte Table row/column models through Svelte Virtual with + stable measurement and layout. + sources: + - 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 + failure_modes: + - Using a stale row count or scroll element instead of reactive values + available to the virtualizer. + - Virtualizing source data rather than the final Table row model. + - Combining absolute positioning, transforms, sticky regions, and + semantic table layout without the required CSS geometry. + path: references/with-tanstack-virtual.md + replaces: '@tanstack/svelte-table#with-tanstack-virtual' + 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. + requires: + - '@tanstack/table-core#core' + - slug: table-state package: '@tanstack/svelte-table' domain: framework-adapters - type: integration + type: framework framework: svelte - purpose: 'Connect Svelte Query data and query keys to manual Table processing state.' - sources: - [ - 'TanStack/table:examples/svelte/with-tanstack-query', - 'TanStack/table:docs/framework/svelte/guide/pagination.md', - ] - failure_modes: - - 'Building a query from non-reactive snapshots so page, sort, or filter changes do not refetch.' - - 'Duplicating query data into unsynchronized $state rather than exposing the query result to Table through a getter.' - - 'Expecting manual Table flags to execute network requests or server transformations.' - - - slug: with-tanstack-virtual + purpose: Use rune-aware table atoms and stores, native $derived projections, + controlled $state or createTableState slices, and external atoms without + broad invalidation or snapshot mismatches. + 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 + failure_modes: + - Keeping the removed beta.58 createTable/createAppTable selector + argument, selected table.state property, subscribeTable helper, or + SubscribeSource type after beta.59. + - Reading atom or store snapshots outside a tracked Svelte scope and + expecting the read itself to keep a consumer reactive. + - Reading table.store.get() in an effect that only needs one atom slice, + causing unrelated state changes to rerun the effect. + - Pairing onSliceChange with a controlled state slice that is not actually + written back with value-or-updater semantics. + - Blaming pagination reactivity when autoResetPageIndex immediately + overwrites an externally requested page. + references: + - path: references/reactivity.md + purpose: + Read for advanced svelte reactive boundaries, subscription patterns, + and complete framework-specific state examples. + 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 + failure_modes: + - Keeping the removed beta.58 createTable/createAppTable selector + argument, selected table.state property, subscribeTable helper, or + SubscribeSource type after beta.59. + - Reading atom or store snapshots outside a tracked Svelte scope and + expecting the read itself to keep a consumer reactive. + - Reading table.store.get() in an effect that only needs one atom + slice, causing unrelated state changes to rerun the effect. + - Pairing onSliceChange with a controlled state slice that is not + actually written back with value-or-updater semantics. + - Blaming pagination reactivity when autoResetPageIndex immediately + overwrites an externally requested page. + description: + Read and control Table v9 state in svelte. Use for tracked reads, + subscriptions, controlled slices, and framework-specific reactive + boundaries. + requires: + - '@tanstack/table-core#table-state' + - slug: migrate-v8-to-v9 package: '@tanstack/svelte-table' domain: framework-adapters - type: integration + type: migration framework: svelte - purpose: 'Render Svelte Table row/column models through Svelte Virtual with stable measurement and layout.' - sources: - [ - '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', - ] - failure_modes: - - 'Using a stale row count or scroll element instead of reactive values available to the virtualizer.' - - 'Virtualizing source data rather than the final Table row model.' - - 'Combining absolute positioning, transforms, sticky regions, and semantic table layout without the required CSS geometry.' - + purpose: Move Svelte 4/v8 store-oriented tables to the Svelte 5 v9 adapter, + explicit features, and rune-backed state. + sources: + - TanStack/table:docs/framework/svelte/guide/migrating.md + - TanStack/table:packages/svelte-table/src/index.ts + - TanStack/table:examples/svelte/basic-create-table + failure_modes: + - Attempting the v9 adapter migration without first adopting Svelte + 5-compatible component and reactivity syntax. + - Keeping readable-store assumptions or v8 row-model table options after + switching to createTable. + - Keeping beta.58 creation selectors, table.state, subscribeTable, or + their removed selected-state generic parameters after beta.59. + - Missing shared v9 prototype, feature, helper, sorting, and + logical-pinning changes. + references: + - path: references/adapter-migration.md + purpose: + Read for svelte construction, rendering, state, and app-hook migration + details. Shared feature and type mappings belong to the core migration + references. + sources: + - TanStack/table:docs/framework/svelte/guide/migrating.md + - TanStack/table:packages/svelte-table/src/index.ts + - TanStack/table:examples/svelte/basic-create-table + failure_modes: + - Attempting the v9 adapter migration without first adopting Svelte + 5-compatible component and reactivity syntax. + - Keeping readable-store assumptions or v8 row-model table options + after switching to createTable. + - Keeping beta.58 creation selectors, table.state, subscribeTable, or + their removed selected-state generic parameters after beta.59. + - Missing shared v9 prototype, feature, helper, sorting, and + logical-pinning changes. + description: Migrate svelte Table v8 to v9. Audit framework construction, + rendering, state, and app hooks, with shared API changes in the core + migration skill. + requires: + - '@tanstack/table-core#migrate-v8-to-v9' - slug: getting-started package: '@tanstack/vue-table' domain: framework-adapters type: framework framework: vue - purpose: 'Create a Vue v9 table with useTable, reactive options, and template/render helpers.' - sources: - [ - 'TanStack/table:docs/framework/vue/guide/migrating.md', - 'TanStack/table:examples/vue/basic-use-table', - 'TanStack/table:packages/vue-table/src/index.ts', - ] - failure_modes: - - 'Using v8 useVueTable or React hook names instead of the installed v9 Vue entrypoint.' - - 'Destructuring reactive refs/options into snapshots before passing them to useTable.' - - 'Expecting Table to provide a Vue table component or component-library styling.' - + purpose: Create a Vue v9 table with useTable, reactive options, and + template/render helpers. + 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 + failure_modes: + - Using v8 useVueTable or React hook names instead of the installed v9 Vue + entrypoint. + - Destructuring reactive refs/options into snapshots before passing them + to useTable. + - Expecting Table to provide a Vue table component or component-library + styling. + references: + - slug: create-table-hook + purpose: + Create a reusable Vue useAppTable and typed component/context registry + while avoiding circular inference. + sources: + - TanStack/table:docs/framework/vue/guide/composable-tables.md + - TanStack/table:examples/vue/composable-tables + - TanStack/table:packages/vue-table/src/createTableHook.ts + failure_modes: + - Using createTableHook for one table or registering reusable UI + components before the app has shared conventions. + - Creating a circular inference/import chain between the hook module + and registered components instead of exporting explicit context-hook + types. + - Passing Vue JSX children as slots when table.Subscribe expects an + explicit children prop. + path: references/create-table-hook.md + replaces: '@tanstack/vue-table#create-table-hook' + - slug: with-tanstack-query + purpose: + Drive Vue Query keys and server requests from reactive Table state with + explicit manual stages. + sources: + - TanStack/table:examples/vue/with-tanstack-query + - TanStack/table:docs/framework/vue/guide/pagination.md + failure_modes: + - Unwrapping refs before constructing the query key so table-state + changes are not dependencies. + - Mirroring query data into an unnecessary second ref and allowing the + two sources to drift. + - Omitting server counts or expecting manual Table modes to process + the returned page. + path: references/with-tanstack-query.md + replaces: '@tanstack/vue-table#with-tanstack-query' + - slug: with-tanstack-virtual + purpose: + Layer Vue Virtual rendering over the current Table row/column model and + its CSS layout. + sources: + - 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 + failure_modes: + - Passing non-reactive counts or scroll targets to the virtualizer. + - Virtualizing raw query/data arrays rather than the current Table + model. + - Assuming virtualization supplies column sizes, sticky CSS, semantic + markup, or dynamic-row measurement automatically. + path: references/with-tanstack-virtual.md + replaces: '@tanstack/vue-table#with-tanstack-virtual' + 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. + requires: + - '@tanstack/table-core#core' - slug: table-state package: '@tanstack/vue-table' domain: framework-adapters type: framework framework: vue - purpose: 'Read Vue-backed table atoms in tracked contexts and control slices with refs, computed values, or external atoms.' - 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', - ] - failure_modes: - - 'Reading an atom snapshot outside a template, computed, watch, or other tracked context and expecting it to update consumers.' - - 'Passing a ref value snapshot rather than the ref/computed/getter shape supported by reactive table options.' - - 'Ignoring value-or-updater callback semantics when synchronizing controlled refs.' - + purpose: + Read Vue-backed table atoms in tracked contexts and control slices with + refs, computed values, or external atoms. + 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 + failure_modes: + - Reading an atom snapshot outside a template, computed, watch, or other + tracked context and expecting it to update consumers. + - Passing a ref value snapshot rather than the ref/computed/getter shape + supported by reactive table options. + - Ignoring value-or-updater callback semantics when synchronizing + controlled refs. + references: + - path: references/reactivity.md + purpose: + Read for advanced vue reactive boundaries, subscription patterns, and + complete framework-specific state examples. + 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 + failure_modes: + - Reading an atom snapshot outside a template, computed, watch, or + other tracked context and expecting it to update consumers. + - Passing a ref value snapshot rather than the ref/computed/getter + shape supported by reactive table options. + - Ignoring value-or-updater callback semantics when synchronizing + controlled refs. + description: Read and control Table v9 state in vue. Use for tracked reads, + subscriptions, controlled slices, and framework-specific reactive + boundaries. + requires: + - '@tanstack/table-core#table-state' - slug: migrate-v8-to-v9 package: '@tanstack/vue-table' domain: framework-adapters type: migration framework: vue - purpose: 'Migrate Vue v8 table construction, row models, state, helpers, and rendering 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', - ] - failure_modes: - - 'Changing the hook name while retaining v8 row-model options and implicit all-feature behavior.' - - 'Flattening refs/computed inputs during migration and losing Vue reactivity.' - - 'Missing shared v9 changes to prototype methods, per-table meta, sortFn names, and start/end pinning.' - - - slug: create-table-hook - package: '@tanstack/vue-table' - domain: framework-adapters - type: framework - framework: vue - purpose: 'Create a reusable Vue useAppTable and typed component/context registry while avoiding circular inference.' - sources: - [ - 'TanStack/table:docs/framework/vue/guide/composable-tables.md', - 'TanStack/table:examples/vue/composable-tables', - 'TanStack/table:packages/vue-table/src/createTableHook.ts', - ] - failure_modes: - - 'Using createTableHook for one table or registering reusable UI components before the app has shared conventions.' - - 'Creating a circular inference/import chain between the hook module and registered components instead of exporting explicit context-hook types.' - - 'Passing Vue JSX children as slots when table.Subscribe expects an explicit children prop.' - - - slug: with-tanstack-query - package: '@tanstack/vue-table' - domain: framework-adapters - type: integration - framework: vue - purpose: 'Drive Vue Query keys and server requests from reactive Table state with explicit manual stages.' - sources: - [ - 'TanStack/table:examples/vue/with-tanstack-query', - 'TanStack/table:docs/framework/vue/guide/pagination.md', - ] - failure_modes: - - 'Unwrapping refs before constructing the query key so table-state changes are not dependencies.' - - 'Mirroring query data into an unnecessary second ref and allowing the two sources to drift.' - - 'Omitting server counts or expecting manual Table modes to process the returned page.' - - - slug: with-tanstack-virtual - package: '@tanstack/vue-table' - domain: framework-adapters - type: integration - framework: vue - purpose: 'Layer Vue Virtual rendering over the current Table row/column model and its CSS layout.' - sources: - [ - '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', - ] - failure_modes: - - 'Passing non-reactive counts or scroll targets to the virtualizer.' - - 'Virtualizing raw query/data arrays rather than the current Table model.' - - 'Assuming virtualization supplies column sizes, sticky CSS, semantic markup, or dynamic-row measurement automatically.' - + purpose: Migrate Vue v8 table construction, row models, state, helpers, and + rendering 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 + failure_modes: + - Changing the hook name while retaining v8 row-model options and implicit + all-feature behavior. + - Flattening refs/computed inputs during migration and losing Vue + reactivity. + - Missing shared v9 changes to prototype methods, per-table meta, sortFn + names, and start/end pinning. + references: + - path: references/adapter-migration.md + purpose: + Read for vue construction, rendering, state, and app-hook migration + details. Shared feature and type mappings belong to the core migration + references. + sources: + - TanStack/table:docs/framework/vue/guide/migrating.md + - TanStack/table:packages/vue-table/src/index.ts + - TanStack/table:examples/vue/basic-use-table + failure_modes: + - Changing the hook name while retaining v8 row-model options and + implicit all-feature behavior. + - Flattening refs/computed inputs during migration and losing Vue + reactivity. + - Missing shared v9 changes to prototype methods, per-table meta, + sortFn names, and start/end pinning. + description: Migrate vue Table v8 to v9. Audit framework construction, + rendering, state, and app hooks, with shared API changes in the core + migration skill. + requires: + - '@tanstack/table-core#migrate-v8-to-v9' - slug: getting-started package: '@tanstack/angular-table' domain: framework-adapters type: framework framework: angular - purpose: 'Create an Angular v9 table with injectTable, stable options, signals, and FlexRender directives.' - sources: - [ - 'TanStack/table:docs/framework/angular/guide/migrating.md', - 'TanStack/table:docs/framework/angular/guide/rendering.md', - 'TanStack/table:examples/angular/basic-inject-table', - 'TanStack/table:packages/angular-table/src/index.ts', - ] - failure_modes: - - 'Calling injectTable outside a valid Angular injection context.' - - 'Allocating columns or features inside the signal-tracked options initializer so every signal change rebuilds static inputs.' - - 'Treating render functions as Angular components or bypassing the documented structural directives and context injection rules.' - + purpose: + Create an Angular v9 table with injectTable, stable options, signals, + and FlexRender directives. + 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 + failure_modes: + - Calling injectTable outside a valid Angular injection context. + - Allocating columns or features inside the signal-tracked options + initializer so every signal change rebuilds static inputs. + - Treating render functions as Angular components or bypassing the + documented structural directives and context injection rules. + references: + - slug: create-table-hook + purpose: Create a typed injectAppTable abstraction with shared features, + defaults, components, and DI context. + sources: + - TanStack/table:docs/framework/angular/guide/composable-tables.md + - TanStack/table:examples/angular/composable-tables + - TanStack/table:packages/angular-table/src/helpers/createTableHook.ts + failure_modes: + - Calling injectAppTable or returned context injectors outside Angular + injection context. + - Prop-drilling table/cell/header values into registered components + instead of using the returned typed injection helpers. + - Treating arbitrary render values as Angular components and passing + them to flexRenderComponent. + path: references/create-table-hook.md + replaces: '@tanstack/angular-table#create-table-hook' + - slug: with-tanstack-query + purpose: + Connect Angular Query to signal-owned Table state and manual server + processing. + sources: + - TanStack/table:examples/angular/with-tanstack-query + - TanStack/table:docs/framework/angular/guide/table-state.md + - TanStack/table:docs/framework/angular/guide/pagination.md + failure_modes: + - Reading query-key signals outside a reactive query options function + and preventing refetches. + - Duplicating query data into another signal without a defined + editing/cache ownership model. + - Expecting manual Table flags to fetch data or omitting row/page + counts required for navigation. + path: references/with-tanstack-query.md + replaces: '@tanstack/angular-table#with-tanstack-query' + - slug: with-tanstack-virtual + purpose: + Render Angular Table models through Angular Virtual with correct + signals, measurements, and infinite fetching. + sources: + - 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 + failure_modes: + - Constructing the virtualizer outside required Angular + injection/reactive context or from stale counts. + - Virtualizing input data rather than the current Table row model. + - Combining measured rows, transforms, sticky regions, and grid/flex + sizing without the example layout contract. + path: references/with-tanstack-virtual.md + replaces: '@tanstack/angular-table#with-tanstack-virtual' + 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. + requires: + - '@tanstack/table-core#core' - slug: table-state package: '@tanstack/angular-table' domain: framework-adapters type: framework framework: angular - purpose: 'Use Angular-signal-backed table atoms, computed selectors, controlled signals, and external Store atoms correctly.' - 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', - ] - failure_modes: - - 'Wrapping every atom read in computed just to make it reactive even though table atoms already read Angular signals.' - - 'Reading controlled signals in injectTable and overlooking that each write reruns the initializer and setOptions.' - - 'Assigning updater functions directly to signals instead of resolving Table value-or-updater callbacks.' - + purpose: + Use Angular-signal-backed table atoms, computed selectors, controlled + signals, and external Store atoms correctly. + 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 + failure_modes: + - Wrapping every atom read in computed just to make it reactive even + though table atoms already read Angular signals. + - Reading controlled signals in injectTable and overlooking that each + write reruns the initializer and setOptions. + - Assigning updater functions directly to signals instead of resolving + Table value-or-updater callbacks. + references: + - path: references/reactivity.md + purpose: + Read for advanced angular reactive boundaries, subscription patterns, + and complete framework-specific state examples. + 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 + failure_modes: + - Wrapping every atom read in computed just to make it reactive even + though table atoms already read Angular signals. + - Reading controlled signals in injectTable and overlooking that each + write reruns the initializer and setOptions. + - Assigning updater functions directly to signals instead of resolving + Table value-or-updater callbacks. + description: + Read and control Table v9 state in angular. Use for tracked reads, + subscriptions, controlled slices, and framework-specific reactive + boundaries. + requires: + - '@tanstack/table-core#table-state' - slug: migrate-v8-to-v9 package: '@tanstack/angular-table' domain: framework-adapters type: migration framework: angular - purpose: 'Migrate createAngularTable code to injectTable, v9 features, signal-backed state, and current rendering directives.' - sources: - [ - 'TanStack/table:docs/framework/angular/guide/migrating.md', - 'TanStack/table:packages/angular-table/src/index.ts', - 'TanStack/table:examples/angular/basic-inject-table', - ] - failure_modes: - - 'Renaming createAngularTable to injectTable without moving construction into an injection context.' - - 'Retaining v8 get*RowModel options or unstable values inside the reactive initializer.' - - 'Missing FlexRender directive, prototype-method, helper, sorting, and logical-pinning changes.' - - - slug: create-table-hook - package: '@tanstack/angular-table' - domain: framework-adapters - type: framework - framework: angular - purpose: 'Create a typed injectAppTable abstraction with shared features, defaults, components, and DI context.' - sources: - [ - 'TanStack/table:docs/framework/angular/guide/composable-tables.md', - 'TanStack/table:examples/angular/composable-tables', - 'TanStack/table:packages/angular-table/src/helpers/createTableHook.ts', - ] - failure_modes: - - 'Calling injectAppTable or returned context injectors outside Angular injection context.' - - 'Prop-drilling table/cell/header values into registered components instead of using the returned typed injection helpers.' - - 'Treating arbitrary render values as Angular components and passing them to flexRenderComponent.' - - - slug: with-tanstack-query - package: '@tanstack/angular-table' - domain: framework-adapters - type: integration - framework: angular - purpose: 'Connect Angular Query to signal-owned Table state and manual server processing.' - sources: - [ - 'TanStack/table:examples/angular/with-tanstack-query', - 'TanStack/table:docs/framework/angular/guide/table-state.md', - 'TanStack/table:docs/framework/angular/guide/pagination.md', - ] - failure_modes: - - 'Reading query-key signals outside a reactive query options function and preventing refetches.' - - 'Duplicating query data into another signal without a defined editing/cache ownership model.' - - 'Expecting manual Table flags to fetch data or omitting row/page counts required for navigation.' - - - slug: with-tanstack-virtual - package: '@tanstack/angular-table' - domain: framework-adapters - type: integration - framework: angular - purpose: 'Render Angular Table models through Angular Virtual with correct signals, measurements, and infinite fetching.' - sources: - [ - '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', - ] - failure_modes: - - 'Constructing the virtualizer outside required Angular injection/reactive context or from stale counts.' - - 'Virtualizing input data rather than the current Table row model.' - - 'Combining measured rows, transforms, sticky regions, and grid/flex sizing without the example layout contract.' - + purpose: Migrate createAngularTable code to injectTable, v9 features, + signal-backed state, and current rendering directives. + sources: + - TanStack/table:docs/framework/angular/guide/migrating.md + - TanStack/table:packages/angular-table/src/index.ts + - TanStack/table:examples/angular/basic-inject-table + failure_modes: + - Renaming createAngularTable to injectTable without moving construction + into an injection context. + - Retaining v8 get*RowModel options or unstable values inside the reactive + initializer. + - Missing FlexRender directive, prototype-method, helper, sorting, and + logical-pinning changes. + references: + - path: references/adapter-migration.md + purpose: + Read for angular construction, rendering, state, and app-hook migration + details. Shared feature and type mappings belong to the core migration + references. + sources: + - TanStack/table:docs/framework/angular/guide/migrating.md + - TanStack/table:packages/angular-table/src/index.ts + - TanStack/table:examples/angular/basic-inject-table + failure_modes: + - Renaming createAngularTable to injectTable without moving + construction into an injection context. + - Retaining v8 get*RowModel options or unstable values inside the + reactive initializer. + - Missing FlexRender directive, prototype-method, helper, sorting, and + logical-pinning changes. + description: Migrate angular Table v8 to v9. Audit framework construction, + rendering, state, and app hooks, with shared API changes in the core + migration skill. + requires: + - '@tanstack/table-core#migrate-v8-to-v9' - slug: getting-started package: '@tanstack/lit-table' domain: framework-adapters type: framework framework: lit - purpose: 'Create and render a v9 Lit table through TableController and reactive host updates.' - sources: - [ - 'TanStack/table:docs/framework/lit/guide/migrating.md', - 'TanStack/table:examples/lit/basic-table-controller', - 'TanStack/table:packages/lit-table/src/index.ts', - ] - failure_modes: - - 'Using the v8 TableController constructor-with-options thunk instead of passing options to controller.table in render.' - - 'Constructing a new controller or selector on every render rather than keeping stable host fields.' - - 'Expecting TableController to supply semantic table markup, CSS, or a component library.' - + purpose: + Create and render a v9 Lit table through TableController and reactive + host updates. + 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 + failure_modes: + - Using the v8 TableController constructor-with-options thunk instead of + passing options to controller.table in render. + - Constructing a new controller or selector on every render rather than + keeping stable host fields. + - Expecting TableController to supply semantic table markup, CSS, or a + component library. + references: + - slug: create-table-hook + purpose: + Create a reusable Lit app-table controller/helper layer and consume + table context from custom elements. + sources: + - TanStack/table:docs/framework/lit/guide/composable-tables.md + - TanStack/table:examples/lit/composable-tables + - TanStack/table:packages/lit-table/src/createTableHook.ts + failure_modes: + - Calling useAppTable without the Lit host or recreating the backing + controller every update. + - Assuming Lit tableComponents work exactly like JSX adapter + registries; table-level controls may be custom elements using + useTableContext. + - Prop-drilling a stable table through custom elements instead of + consuming the nearest typed app-table context. + path: references/create-table-hook.md + replaces: '@tanstack/lit-table#create-table-hook' + - slug: with-tanstack-virtual + purpose: + Layer Lit Virtual rendering and measurement over the current Table + model. + sources: + - 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 + failure_modes: + - Creating a virtualizer/controller with the wrong host lifecycle or a + stale item count. + - Virtualizing raw input data instead of table.getRowModel().rows. + - Assuming Virtual or Table owns absolute positioning, measurement + attributes, sticky CSS, or column widths. + path: references/with-tanstack-virtual.md + replaces: '@tanstack/lit-table#with-tanstack-virtual' + 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. + requires: + - '@tanstack/table-core#core' - slug: table-state package: '@tanstack/lit-table' domain: framework-adapters type: framework framework: lit - purpose: 'Use TableController-selected table.state, stable subscriptions, controlled properties, and external atoms.' - 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', - ] - failure_modes: - - 'Reading store snapshots imperatively and assuming the host is subscribed to a custom derived value not selected or subscribed.' - - 'Creating selector functions inside render and causing avoidable subscription/update churn.' - - 'Providing onSliceChange without reflecting the controlled state.slice back into the next controller.table options.' - + purpose: Use TableController-selected table.state, stable subscriptions, + controlled properties, and external atoms. + 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 + failure_modes: + - Reading store snapshots imperatively and assuming the host is subscribed + to a custom derived value not selected or subscribed. + - Creating selector functions inside render and causing avoidable + subscription/update churn. + - Providing onSliceChange without reflecting the controlled state.slice + back into the next controller.table options. + references: + - path: references/reactivity.md + purpose: + Read for advanced lit reactive boundaries, subscription patterns, and + complete framework-specific state examples. + 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 + failure_modes: + - Reading store snapshots imperatively and assuming the host is + subscribed to a custom derived value not selected or subscribed. + - Creating selector functions inside render and causing avoidable + subscription/update churn. + - Providing onSliceChange without reflecting the controlled + state.slice back into the next controller.table options. + description: Read and control Table v9 state in lit. Use for tracked reads, + subscriptions, controlled slices, and framework-specific reactive + boundaries. + requires: + - '@tanstack/table-core#table-state' - slug: migrate-v8-to-v9 package: '@tanstack/lit-table' domain: framework-adapters type: migration framework: lit - purpose: 'Migrate Lit v8 controller construction, row models, state, helpers, and rendering 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', - ] - failure_modes: - - 'Passing the options thunk to the v9 TableController constructor instead of controller.table during render.' - - 'Keeping v8 get*RowModel table options rather than v9 tableFeatures slots.' - - 'Missing shared v9 prototype-method, meta-helper, sorting, and start/end pinning changes.' - - - slug: create-table-hook - package: '@tanstack/lit-table' - domain: framework-adapters - type: framework - framework: lit - purpose: 'Create a reusable Lit app-table controller/helper layer and consume table context from custom elements.' - sources: - [ - 'TanStack/table:docs/framework/lit/guide/composable-tables.md', - 'TanStack/table:examples/lit/composable-tables', - 'TanStack/table:packages/lit-table/src/createTableHook.ts', - ] - failure_modes: - - 'Calling useAppTable without the Lit host or recreating the backing controller every update.' - - 'Assuming Lit tableComponents work exactly like JSX adapter registries; table-level controls may be custom elements using useTableContext.' - - 'Prop-drilling a stable table through custom elements instead of consuming the nearest typed app-table context.' - - - slug: with-tanstack-virtual - package: '@tanstack/lit-table' - domain: framework-adapters - type: integration - framework: lit - purpose: 'Layer Lit Virtual rendering and measurement over the current Table model.' - sources: - [ - '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', - ] - failure_modes: - - 'Creating a virtualizer/controller with the wrong host lifecycle or a stale item count.' - - 'Virtualizing raw input data instead of table.getRowModel().rows.' - - 'Assuming Virtual or Table owns absolute positioning, measurement attributes, sticky CSS, or column widths.' - + purpose: + Migrate Lit v8 controller construction, row models, state, helpers, and + rendering 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 + failure_modes: + - Passing the options thunk to the v9 TableController constructor instead + of controller.table during render. + - Keeping v8 get*RowModel table options rather than v9 tableFeatures slots. + - Missing shared v9 prototype-method, meta-helper, sorting, and start/end + pinning changes. + references: + - path: references/adapter-migration.md + purpose: + Read for lit construction, rendering, state, and app-hook migration + details. Shared feature and type mappings belong to the core migration + references. + sources: + - TanStack/table:docs/framework/lit/guide/migrating.md + - TanStack/table:packages/lit-table/src/index.ts + - TanStack/table:examples/lit/basic-table-controller + failure_modes: + - Passing the options thunk to the v9 TableController constructor + instead of controller.table during render. + - Keeping v8 get*RowModel table options rather than v9 tableFeatures + slots. + - Missing shared v9 prototype-method, meta-helper, sorting, and + start/end pinning changes. + description: Migrate lit Table v8 to v9. Audit framework construction, + rendering, state, and app hooks, with shared API changes in the core + migration skill. + requires: + - '@tanstack/table-core#migrate-v8-to-v9' - slug: getting-started package: '@tanstack/octane-table' domain: framework-adapters type: framework framework: octane - purpose: 'Create and render an Octane v9 table with application-authored TSRX, stable inputs, keyed lists, and component-scoped render helpers.' - 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', - ] - failure_modes: - - 'Importing another framework adapter or translating React component-return semantics directly instead of using Octane TSRX component bodies.' - - 'Invoking FlexRender or other component-scoped helpers as plain functions instead of rendering them as components.' - - 'Recreating stable features, columns, or data on each render and causing unnecessary option and row-model work.' - + purpose: + Create and render an Octane v9 table with application-authored TSRX, + stable inputs, keyed lists, and component-scoped render helpers. + 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 + failure_modes: + - Importing another framework adapter or translating React + component-return semantics directly instead of using Octane TSRX + component bodies. + - Invoking FlexRender or other component-scoped helpers as plain functions + instead of rendering them as components. + - Recreating stable features, columns, or data on each render and causing + unnecessary option and row-model work. + references: + - slug: create-table-hook + purpose: + Build a typed reusable Octane table hook with stable App wrappers, + registered components, and default or isolated contexts. + sources: + - 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 + failure_modes: + - Using the app hook for one table when standalone useTable is clearer. + - Reading a factory context outside its matching + AppTable/AppCell/AppHeader provider or invoking a wrapper as a plain + function. + - Creating the factory in render and destabilizing wrapper, context, + and registered-component identities. + path: references/create-table-hook.md + replaces: '@tanstack/octane-table#create-table-hook' + description: + Create and render Table v9 with the octane adapter. Route reusable + createTableHook components, and framework setup; use table-state for + reactive ownership. + requires: + - '@tanstack/table-core#core' - slug: table-state package: '@tanstack/octane-table' domain: framework-adapters type: framework framework: octane - purpose: 'Use selected table.state, component-scoped Subscribe islands, controlled slices, and synchronous Octane Store atom ownership with commit-safe publication.' - 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', - ] - failure_modes: - - 'Reading atom/store snapshots in render as though they establish an Octane subscription.' - - 'Calling table.Subscribe as a normal function and sharing compiler slots instead of mounting an independent component scope.' - - 'Expecting controlled options.state to publish during render, or mixing it with an external atom that has ownership precedence.' - - - slug: create-table-hook - package: '@tanstack/octane-table' - domain: framework-adapters - type: framework - framework: octane - purpose: 'Build a typed reusable Octane table hook with stable App wrappers, registered components, and default or isolated contexts.' - sources: - [ - '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', - ] - failure_modes: - - 'Using the app hook for one table when standalone useTable is clearer.' - - 'Reading a factory context outside its matching AppTable/AppCell/AppHeader provider or invoking a wrapper as a plain function.' - - 'Creating the factory in render and destabilizing wrapper, context, and registered-component identities.' - + purpose: Use selected table.state, component-scoped Subscribe islands, + controlled slices, and synchronous Octane Store atom ownership with + commit-safe publication. + 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 + failure_modes: + - Reading atom/store snapshots in render as though they establish an + Octane subscription. + - Calling table.Subscribe as a normal function and sharing compiler slots + instead of mounting an independent component scope. + - Expecting controlled options.state to publish during render, or mixing + it with an external atom that has ownership precedence. + references: + - path: references/reactivity.md + purpose: + Read for advanced octane reactive boundaries, subscription patterns, + and complete framework-specific state examples. + 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 + failure_modes: + - Reading atom/store snapshots in render as though they establish an + Octane subscription. + - Calling table.Subscribe as a normal function and sharing compiler + slots instead of mounting an independent component scope. + - Expecting controlled options.state to publish during render, or + mixing it with an external atom that has ownership precedence. + description: + Read and control Table v9 state in octane. Use for tracked reads, + subscriptions, controlled slices, and framework-specific reactive + boundaries. + requires: + - '@tanstack/table-core#table-state' - slug: getting-started package: '@tanstack/ember-table' domain: framework-adapters type: framework framework: ember - purpose: 'Create an Ember v9 table through the tracked useTable options thunk and render it with Glimmer-native FlexRender components.' - 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', - ] - failure_modes: - - 'Passing an options object instead of a thunk, or failing to read tracked data inside that thunk.' - - 'Passing extracted v9 prototype methods through Ember templates without preserving their receiver.' - - 'Recreating features, columns, or derived data whenever tracked options rerun.' - + purpose: + Create an Ember v9 table through the tracked useTable options thunk and + render it with Glimmer-native FlexRender components. + 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 + failure_modes: + - Passing an options object instead of a thunk, or failing to read tracked + data inside that thunk. + - Passing extracted v9 prototype methods through Ember templates without + preserving their receiver. + - Recreating features, columns, or derived data whenever tracked options + rerun. + references: + - slug: create-table-hook + purpose: + Share Ember table features, row-model slots, defaults, and inferred + column helpers without inventing a component registry. + sources: + - 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 + failure_modes: + - Expecting AppTable/AppCell/context registries that the Ember factory + does not implement. + - Passing features at each createAppTable call or recreating the app + hook in tracked scope. + - Putting shared mutable state in factory defaults instead of keeping + state ownership per table. + path: references/create-table-hook.md + replaces: '@tanstack/ember-table#create-table-hook' + description: + Create and render Table v9 with the ember adapter. Route reusable + createTableHook defaults, and framework setup; use table-state for + reactive ownership. + requires: + - '@tanstack/table-core#core' - slug: table-state package: '@tanstack/ember-table' domain: framework-adapters type: framework framework: ember - purpose: 'Use Glimmer-tracked table reads and own slices internally, through Ember atoms, or through tracked controlled 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', - ] - failure_modes: - - 'Inventing table.Subscribe or using the intentionally no-op table.store.subscribe instead of Glimmer-tracked reads.' - - 'Using removed table.getState() rather than table.store.state or a slice atom.' - - 'Mixing atoms and state ownership, omitting updater resolution, or trying to replace construct-time atoms after table creation.' - - - slug: create-table-hook - package: '@tanstack/ember-table' - domain: framework-adapters - type: framework - framework: ember - purpose: 'Share Ember table features, row-model slots, defaults, and inferred column helpers without inventing a component registry.' - sources: - [ - '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', - ] - failure_modes: - - 'Expecting AppTable/AppCell/context registries that the Ember factory does not implement.' - - 'Passing features at each createAppTable call or recreating the app hook in tracked scope.' - - 'Putting shared mutable state in factory defaults instead of keeping state ownership per table.' - + purpose: Use Glimmer-tracked table reads and own slices internally, through + Ember atoms, or through tracked controlled 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 + failure_modes: + - Inventing table.Subscribe or using the intentionally no-op + table.store.subscribe instead of Glimmer-tracked reads. + - Using removed table.getState() rather than table.store.state or a slice + atom. + - Mixing atoms and state ownership, omitting updater resolution, or trying + to replace construct-time atoms after table creation. + references: + - path: references/reactivity.md + purpose: + Read for advanced ember reactive boundaries, subscription patterns, and + complete framework-specific state examples. + 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 + failure_modes: + - Inventing table.Subscribe or using the intentionally no-op + table.store.subscribe instead of Glimmer-tracked reads. + - Using removed table.getState() rather than table.store.state or a + slice atom. + - Mixing atoms and state ownership, omitting updater resolution, or + trying to replace construct-time atoms after table creation. + - Creating component-owned external-atom subscriptions without passing + the Ember owner prevents owner-destruction cleanup. + description: + Read and control Table v9 state in ember. Use for tracked reads, + subscriptions, controlled slices, and framework-specific reactive + boundaries. + requires: + - '@tanstack/table-core#table-state' - slug: getting-started package: '@tanstack/alpine-table' domain: framework-adapters type: framework framework: alpine - purpose: 'Create an Alpine v9 table and render reactive headless markup through Alpine bindings.' - 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', - ] - failure_modes: - - 'Copying a React/Vue hook API instead of Alpine createTable and its reactive proxy.' - - 'Expecting x-html output to initialize nested Alpine directives; interactive controls must exist as real markup/bindings.' - - 'Expecting the adapter to provide semantic markup, styling, or component-library integration.' - + purpose: + Create an Alpine v9 table and render reactive headless markup through + Alpine bindings. + 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 + failure_modes: + - Copying a React/Vue hook API instead of Alpine createTable and its + reactive proxy. + - Expecting x-html output to initialize nested Alpine directives; + interactive controls must exist as real markup/bindings. + - Expecting the adapter to provide semantic markup, styling, or + component-library integration. + references: + - slug: create-table-hook + purpose: + Share Alpine table features, options, and typed column helpers without + inventing a component registry. + sources: + - TanStack/table:docs/framework/alpine/guide/composable-tables.md + - TanStack/table:examples/alpine/basic-app-table + - TanStack/table:packages/alpine-table/src/createTableHook.ts + failure_modes: + - Expecting React-style registered cell/header/table components from + an Alpine hook that intentionally only shares features and defaults. + - Using createTableHook for a single table where standalone + createTable is clearer. + - Embedding interactive Alpine directives in x-html strings instead of + using real markup or Alpine.bind bundles. + path: references/create-table-hook.md + replaces: '@tanstack/alpine-table#create-table-hook' + description: + Create and render Table v9 with the alpine adapter. Route reusable + createTableHook defaults, and framework setup; use table-state for + reactive ownership. + requires: + - '@tanstack/table-core#core' - slug: table-state package: '@tanstack/alpine-table' domain: framework-adapters type: framework framework: alpine - purpose: 'Use automatically reactive Alpine table reads and own controlled slices through Alpine.reactive or external atoms.' - 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', - ] - failure_modes: - - 'Adding a nonexistent table.Subscribe abstraction instead of reading APIs directly in Alpine bindings.' - - 'Passing controlled snapshots instead of getters over Alpine.reactive state.' - - 'Ignoring value-or-updater semantics in onSliceChange callbacks or combining state and atoms for the same slice without understanding atom precedence.' - - - slug: create-table-hook - package: '@tanstack/alpine-table' - domain: framework-adapters - type: framework - framework: alpine - purpose: 'Share Alpine table features, options, and typed column helpers without inventing a component registry.' - sources: - [ - 'TanStack/table:docs/framework/alpine/guide/composable-tables.md', - 'TanStack/table:examples/alpine/basic-app-table', - 'TanStack/table:packages/alpine-table/src/createTableHook.ts', - ] - failure_modes: - - 'Expecting React-style registered cell/header/table components from an Alpine hook that intentionally only shares features and defaults.' - - 'Using createTableHook for a single table where standalone createTable is clearer.' - - 'Embedding interactive Alpine directives in x-html strings instead of using real markup or Alpine.bind bundles.' - + purpose: + Use automatically reactive Alpine table reads and own controlled slices + through Alpine.reactive or external atoms. + 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 + failure_modes: + - Adding a nonexistent table.Subscribe abstraction instead of reading APIs + directly in Alpine bindings. + - Passing controlled snapshots instead of getters over Alpine.reactive + state. + - Ignoring value-or-updater semantics in onSliceChange callbacks or + combining state and atoms for the same slice without understanding atom + precedence. + references: + - path: references/reactivity.md + purpose: + Read for advanced alpine reactive boundaries, subscription patterns, + and complete framework-specific state examples. + 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 + failure_modes: + - Adding a nonexistent table.Subscribe abstraction instead of reading + APIs directly in Alpine bindings. + - Passing controlled snapshots instead of getters over Alpine.reactive + state. + - Ignoring value-or-updater semantics in onSliceChange callbacks or + combining state and atoms for the same slice without understanding + atom precedence. + description: + Read and control Table v9 state in alpine. Use for tracked reads, + subscriptions, controlled slices, and framework-specific reactive + boundaries. + requires: + - '@tanstack/table-core#table-state' - slug: devtools package: '@tanstack/table-devtools' domain: observability type: integration - purpose: 'Register core table targets and inspect state, options, rows, columns, and feature coverage.' - 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', - ] - failure_modes: - - 'Registering a table with no non-empty options.key; registration is skipped and Devtools reports no connected table.' - - 'Reusing one key for different live tables and replacing the target unexpectedly.' - - 'Importing the development-gated entrypoint while expecting full Devtools behavior in production.' - + purpose: + Register core table targets and inspect state, options, rows, columns, + and feature coverage. + 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 + failure_modes: + - Registering a table with no non-empty options.key; registration is + skipped and Devtools reports no connected table. + - Reusing one key for different live tables and replacing the target + unexpectedly. + - Importing the development-gated entrypoint while expecting full Devtools + behavior in production. + 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 explicit production entrypoints. + requires: + - '@tanstack/table-core#core' - slug: devtools package: '@tanstack/react-table-devtools' domain: observability type: integration framework: react - purpose: 'Connect and render React Table Devtools with stable table identity and development gating.' - sources: - [ - 'TanStack/table:docs/devtools.md', - 'TanStack/table:packages/react-table-devtools/src/index.ts', - 'TanStack/table:packages/react-table-devtools/src/useTanStackTableDevtools.ts', - ] - failure_modes: - - 'Omitting table options.key and seeing a rendered panel with no registered table.' - - 'Calling registration conditionally or with unstable table identity instead of using the adapter hook/component lifecycle.' - - 'Assuming the default entrypoint stays functional outside development rather than using or intentionally avoiding the production export.' - + purpose: + Connect and render React Table Devtools with stable table identity and + development gating. + sources: + - TanStack/table:docs/devtools.md + - TanStack/table:packages/react-table-devtools/src/index.ts + - TanStack/table:packages/react-table-devtools/src/useTanStackTableDevtools.ts + failure_modes: + - Omitting table options.key and seeing a rendered panel with no + registered table. + - Calling registration conditionally or with unstable table identity + instead of using the adapter hook/component lifecycle. + - Assuming the default entrypoint stays functional outside development + rather than using or intentionally avoiding the production export. + description: Connect React Table v9 instances to Devtools with + ReactTableDevtools, useTanStackTableDevtools, or the plugin lifecycle. + Covers stable table identity, required unique options.key, cleanup, + enabled state, and development-gated exports. + requires: + - '@tanstack/table-core#core' + - '@tanstack/table-devtools#devtools' - slug: devtools package: '@tanstack/preact-table-devtools' domain: observability type: integration framework: preact - purpose: 'Connect Preact tables to the Devtools target registry and render the native Preact panel.' - sources: - [ - 'TanStack/table:docs/devtools.md', - 'TanStack/table:packages/preact-table-devtools/src/index.ts', - 'TanStack/table:packages/preact-table-devtools/src/useTanStackTableDevtools.ts', - ] - failure_modes: - - 'Copying React Devtools imports instead of the Preact package API.' - - 'Omitting a stable options.key or failing to clean up/re-register when the table changes.' - - 'Expecting development-gated exports to inspect tables in a production build.' - + purpose: + Connect Preact tables to the Devtools target registry and render the + native Preact panel. + sources: + - TanStack/table:docs/devtools.md + - TanStack/table:packages/preact-table-devtools/src/index.ts + - TanStack/table:packages/preact-table-devtools/src/useTanStackTableDevtools.ts + failure_modes: + - Copying React Devtools imports instead of the Preact package API. + - Omitting a stable options.key or failing to clean up/re-register when + the table changes. + - Expecting development-gated exports to inspect tables in a production + build. + description: + Connect native Preact Table instances to Devtools with the Preact + component, hook, or plugin lifecycle. Covers correct package imports, + required unique options.key, target cleanup, enabled state, and + development gating. + requires: + - '@tanstack/table-core#core' + - '@tanstack/table-devtools#devtools' - slug: devtools package: '@tanstack/solid-table-devtools' domain: observability type: integration framework: solid - purpose: 'Connect Solid tables to Devtools with reactive registration and the correct development/production exports.' - sources: - [ - 'TanStack/table:docs/devtools.md', - 'TanStack/table:packages/solid-table-devtools/src/index.ts', - 'TanStack/table:packages/solid-table-devtools/src/useTanStackTableDevtools.ts', - ] - failure_modes: - - 'Passing a stale table snapshot to registration rather than evaluating it in the intended Solid reactive owner.' - - 'Omitting options.key and silently failing target registration after the logged warning.' - - 'Importing the no-op development-gated component/plugin in production and expecting a panel.' - + purpose: Connect Solid tables to Devtools with reactive registration and the + correct development/production exports. + sources: + - TanStack/table:docs/devtools.md + - TanStack/table:packages/solid-table-devtools/src/index.ts + - TanStack/table:packages/solid-table-devtools/src/useTanStackTableDevtools.ts + failure_modes: + - Passing a stale table snapshot to registration rather than evaluating it + in the intended Solid reactive owner. + - Omitting options.key and silently failing target registration after the + logged warning. + - Importing the no-op development-gated component/plugin in production and + expecting a panel. + description: + Connect Solid Table instances to Devtools in the proper reactive + owner using the Solid component, hook, or plugin. Covers required unique + options.key, target cleanup, enabled state, and development versus + explicit production exports. + requires: + - '@tanstack/table-core#core' + - '@tanstack/table-devtools#devtools' - slug: devtools package: '@tanstack/vue-table-devtools' domain: observability type: integration framework: vue - purpose: 'Connect Vue table refs to Devtools and preserve reactive target cleanup.' - sources: - [ - 'TanStack/table:docs/devtools.md', - 'TanStack/table:packages/vue-table-devtools/src/index.ts', - 'TanStack/table:packages/vue-table-devtools/src/useTanStackTableDevtools.ts', - ] - failure_modes: - - 'Unwrapping a table ref once and preventing registration from following later table changes.' - - 'Omitting the table key or reusing it across simultaneous tables.' - - 'Expecting the development-gated default entrypoint to remain active in production.' - + purpose: Connect Vue table refs to Devtools and preserve reactive target cleanup. + sources: + - TanStack/table:docs/devtools.md + - TanStack/table:packages/vue-table-devtools/src/index.ts + - TanStack/table:packages/vue-table-devtools/src/useTanStackTableDevtools.ts + failure_modes: + - Unwrapping a table ref once and preventing registration from following + later table changes. + - Omitting the table key or reusing it across simultaneous tables. + - Expecting the development-gated default entrypoint to remain active in + production. + description: + Connect Vue Table refs to Devtools with reactive target tracking, + required unique options.key, lifecycle cleanup, enabled state, and + development-gated component/plugin exports. + requires: + - '@tanstack/table-core#core' + - '@tanstack/table-devtools#devtools' - slug: devtools package: '@tanstack/angular-table-devtools' domain: observability type: integration framework: angular - purpose: 'Register Angular signal-provided tables with Devtools inside injection context.' - sources: - [ - 'TanStack/table:docs/devtools.md', - 'TanStack/table:packages/angular-table-devtools/src/index.ts', - 'TanStack/table:packages/angular-table-devtools/src/injectTanStackTableDevtools.ts', - ] - failure_modes: - - 'Calling injectTanStackTableDevtools outside Angular injection context.' - - 'Omitting options.key or returning an undefined table without understanding registration is intentionally disabled.' - - 'Expecting Angular isDevMode-gated exports to render full Devtools in production.' - + purpose: + Register Angular signal-provided tables with Devtools inside injection + context. + sources: + - TanStack/table:docs/devtools.md + - TanStack/table:packages/angular-table-devtools/src/index.ts + - TanStack/table:packages/angular-table-devtools/src/injectTanStackTableDevtools.ts + failure_modes: + - Calling injectTanStackTableDevtools outside Angular injection context. + - Omitting options.key or returning an undefined table without + understanding registration is intentionally disabled. + - Expecting Angular isDevMode-gated exports to render full Devtools in + production. + description: + Register Angular Table instances with injectTanStackTableDevtools + inside injection context. Covers reactive options, enabled/undefined + tables, required unique options.key, cleanup, Angular isDevMode gating, + and explicit production exports. + requires: + - '@tanstack/table-core#core' + - '@tanstack/table-devtools#devtools' - slug: fuzzy-ranking package: '@tanstack/match-sorter-utils' domain: utilities type: core - purpose: 'Rank items, filter on passed, and compare stored ranking metadata without conflating fuzzy matching with Table itself.' - 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', - ] - failure_modes: - - 'Using the numeric rank as a boolean instead of checking RankingInfo.passed against the configured threshold.' - - 'Calling rankItem again during sorting instead of storing RankingInfo as filter metadata and comparing it with compareItems.' - - 'Assuming accessors return arbitrary values; matching prepares string values and accessor configuration controls thresholds and ranking bounds.' + purpose: Rank items, filter on passed, and compare stored ranking metadata + without conflating fuzzy matching with Table itself. + 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 + failure_modes: + - Using the numeric rank as a boolean instead of checking + RankingInfo.passed against the configured threshold. + - Calling rankItem again during sorting instead of storing RankingInfo as + filter metadata and comparing it with compareItems. + - Assuming accessors return arbitrary values; matching prepares string + values and accessor configuration controls thresholds and ranking + bounds. + description: + Rank fuzzy matches with rankItem, filter with RankingInfo.passed, + compare saved ranking metadata with compareItems, and configure rankings, + thresholds, accessors, bounds, and diacritic handling. Routes TanStack + Table filterMeta wiring to filtering skills. + requires: [] cross_references: - - from: 'core' - to: 'table-features' - reason: 'Every non-core API and state slice depends on feature registration.' - - from: 'table-features' - to: 'api-not-found' - reason: 'A missing feature is the first diagnostic for a missing v9 API.' - - from: 'client-vs-server' + - from: core + to: table-features + reason: Every non-core API and state slice depends on feature registration. + - from: table-features + to: core/references/api-not-found.md + reason: A missing feature is the first diagnostic for a missing v9 API. + - from: table-features/references/client-vs-server.md to: - [ - 'column-filtering', - 'global-filtering', - 'grouping', - 'sorting', - 'expanding', - 'pagination', - ] - reason: 'Manual flags bypass the matching client row-model stages.' - - from: 'typescript' - to: ['table-features', 'create-table-hook'] - reason: 'Feature and app-hook factories are the main sources of inferred v9 userland types.' - - from: 'column-faceting' - to: ['column-filtering', 'global-filtering'] - reason: 'Facet values depend on active filter context and eligible columns.' - - from: 'grouping' - to: ['expanding', 'pagination'] - reason: 'Grouped rows are expanded row trees and count as rows during pagination.' - - from: 'column-pinning' - to: ['column-sizing', 'column-resizing'] - reason: 'Sticky offsets are computed from the numeric column sizing model.' - - from: 'pagination' - to: ['row-selection', 'with-tanstack-query'] - reason: 'Manual pages change which selected IDs have loaded Row objects and usually drive a query key.' - - from: 'table-state' - to: ['create-table-hook', 'with-tanstack-query', 'with-tanstack-virtual'] - reason: 'Reusable components and integrations must read state through the adapter reactive model.' - - from: 'migrate-v8-to-v9' - to: ['table-features', 'table-state', 'typescript', 'api-not-found'] - reason: 'Migration problems span architecture, state, types, and renamed/gated APIs.' + - table-features/references/column-filtering.md + - table-features/references/global-filtering.md + - table-features/references/grouping.md + - table-features/references/sorting.md + - table-features/references/expanding.md + - table-features/references/pagination.md + reason: Manual flags bypass the matching client row-model stages. + - from: core/references/typescript.md + to: + - table-features + - getting-started/references/create-table-hook.md + reason: Feature and app-hook factories are the main sources of inferred v9 + userland types. + - from: table-features/references/column-faceting.md + to: + - table-features/references/column-filtering.md + - table-features/references/global-filtering.md + reason: Facet values depend on active filter context and eligible columns. + - from: table-features/references/grouping.md + to: + - table-features/references/expanding.md + - table-features/references/pagination.md + reason: Grouped rows are expanded row trees and count as rows during pagination. + - from: table-features/references/column-pinning.md + to: + - table-features/references/column-sizing.md + - table-features/references/column-resizing.md + reason: Sticky offsets are computed from the numeric column sizing model. + - from: table-features/references/pagination.md + to: + - table-features/references/row-selection.md + - getting-started/references/with-tanstack-query.md + reason: Manual pages change which selected IDs have loaded Row objects and + usually drive a query key. + - from: table-state + to: + - getting-started/references/create-table-hook.md + - getting-started/references/with-tanstack-query.md + - getting-started/references/with-tanstack-virtual.md + reason: + Reusable components and integrations must read state through the adapter + reactive model. + - from: migrate-v8-to-v9 + to: + - table-features + - table-state + - core/references/typescript.md + - core/references/api-not-found.md + reason: Migration problems span architecture, state, types, and renamed/gated APIs. issue_evidence: - cluster: 'Feature and API discovery' references: ['discussion/5834', 'issue/6212', 'issue/6311'] - finding: 'V9 modularity, renamed registries, and type-gated APIs make installed-source lookup and feature registration essential.' + finding: 'V9 modularity, renamed registries, and type-gated APIs make + installed-source lookup and feature registration essential.' - cluster: 'Composable tables and context' references: ['issue/6348', 'issue/6323', 'issue/6199', 'issue/2344'] - finding: 'Circular imports, context identity, and remount/stale-input failures justify dedicated createTableHook skills.' + finding: + 'Circular imports, context identity, and remount/stale-input failures + require dedicated createTableHook references linked from each adapter + entry point.' - cluster: 'Framework state and compiler reactivity' references: ['issue/6224', 'issue/6236', 'issue/6374', 'issue/6117', 'issue/5903'] - finding: 'Snapshot reads, controlled updater semantics, auto resets, and compiler-hidden method reads are recurring silent failures.' + finding: 'Snapshot reads, controlled updater semantics, auto resets, and + compiler-hidden method reads are recurring silent failures.' - cluster: 'Manual row models' references: [ @@ -1651,7 +2702,9 @@ issue_evidence: 'discussion/3552', 'discussion/5137', ] - finding: 'Users routinely expect manual flags to process rows or assume off-page rows remain available as Row objects.' + finding: + 'Users routinely expect manual flags to process rows or assume off-page + rows remain available as Row objects.' - cluster: 'TypeScript inference' references: [ @@ -1661,7 +2714,9 @@ issue_evidence: 'discussion/4195', 'discussion/4220', ] - finding: 'Manual ColumnDef annotations and deep generics erase TValue inference or overload TypeScript; v9 helpers should lead.' + finding: + 'Manual ColumnDef annotations and deep generics erase TValue inference + or overload TypeScript; v9 helpers should lead.' - cluster: 'Renderer-owned layout' references: [ @@ -1671,52 +2726,146 @@ issue_evidence: 'discussion/4439', 'discussion/3259', ] - finding: 'Pinning, width, alignment, RTL, and responsive behavior require explicit renderer CSS and stable sizing inputs.' + finding: 'Pinning, width, alignment, RTL, and responsive behavior require + explicit renderer CSS and stable sizing inputs.' documentation_read: - narrative_docs: 'All 187 narrative Markdown documents were inventoried by title, headings, and admonitions; foundational, feature, state, migration, composable, and virtualization guides were deep-read.' - generated_references: 'All 828 generated reference documents were inventoried for exports and API categories; exact API truth is delegated to installed dist declarations (.d.ts) in skills.' - examples: 'All 277 example directories were inventoried; basic, state, composable, Query, Virtual, feature, and Devtools-relevant examples were sampled or deep-read by skill.' - source: 'All public package entrypoints, tableFeatures prerequisites, core construction/state precedence, all 16 feature implementations/defaults, createTableHook implementations, Devtools registration, and match-sorter-utils source were inspected.' - community: 'Recent v9 issues plus recurring high-signal issues and GitHub discussions were reviewed for failure modes and misconceptions.' + narrative_docs: + 'All 187 narrative Markdown documents were inventoried by title, + headings, and admonitions; foundational, feature, state, migration, + composable, and virtualization guides were deep-read.' + generated_references: 'All 828 generated reference documents were inventoried + for exports and API categories; exact API truth is delegated to installed + dist declarations (.d.ts) in skills.' + examples: 'All 277 example directories were inventoried; basic, state, + composable, Query, Virtual, feature, and Devtools-relevant examples were + sampled or deep-read by skill.' + source: 'All public package entrypoints, tableFeatures prerequisites, core + construction/state precedence, all 16 feature implementations/defaults, + createTableHook implementations, Devtools registration, and + match-sorter-utils source were inspected.' + community: 'Recent v9 issues plus recurring high-signal issues and GitHub + discussions were reviewed for failure modes and misconceptions.' open_gaps: - skill: 'table-features' - question: 'Should stockFeatures be framed only as a migration/kitchen-sink convenience, or also as an acceptable default for small applications unconcerned with bundle size?' + question: 'Should stockFeatures be framed only as a migration/kitchen-sink + convenience, or also as an acceptable default for small applications + unconcerned with bundle size?' status: resolved - decision: 'Explicit features are the default; stockFeatures is migration and kitchen-sink convenience.' + decision: 'Explicit features are the default; stockFeatures is migration and + kitchen-sink convenience.' - skill: 'client-vs-server' - question: 'Should mixed pipelines such as server filtering/sorting plus client pagination be presented neutrally, or discouraged unless all required rows are loaded?' + question: + 'Should mixed pipelines such as server filtering/sorting plus client + pagination be presented neutrally, or discouraged unless all required rows + are loaded?' status: resolved - decision: 'Mixed pipelines are valid, but skills must name the owner and available dataset for every stage.' + decision: 'Mixed pipelines are valid, but skills must name the owner and + available dataset for every stage.' - skill: 'create-table-hook' - question: 'Should createTableHook be recommended as the standard app-level abstraction once an application has multiple tables, with standalone table creation reserved for one-offs?' + question: 'Should createTableHook be recommended as the standard app-level + abstraction once an application has multiple tables, with standalone table + creation reserved for one-offs?' status: resolved - decision: 'Recommend createTableHook for recurring app conventions and standalone creation for one-offs.' + decision: 'Recommend createTableHook for recurring app conventions and + standalone creation for one-offs.' - skill: 'create-table-hook' - question: 'How strongly should context/injection be preferred over prop drilling when registered components need the table, cell, or header?' + question: + 'How strongly should context/injection be preferred over prop drilling + when registered components need the table, cell, or header?' status: resolved - decision: 'Prefer the typed context or injection helpers returned by the same factory inside registered components.' + decision: + 'Prefer the typed context or injection helpers returned by the same + factory inside registered components.' - skill: 'migrate-v8-to-v9' - question: 'Should useLegacyTable be omitted unless it already appears in user code, or included as a clearly deprecated emergency bridge in a Common Mistakes note?' + question: + 'Should useLegacyTable be omitted unless it already appears in user + code, or included as a clearly deprecated emergency bridge in a Common + Mistakes note?' status: resolved - decision: 'Mention it only when encountered and identify it as a deprecated temporary bridge, never the migration target.' + decision: 'Mention it only when encountered and identify it as a deprecated + temporary bridge, never the migration target.' - skill: 'with-tanstack-virtual' - question: 'Should the skills cover only the maintained examples, or also mention unsupported combinations such as drag-and-drop plus virtualization as user-owned composition?' + question: + 'Should the skills cover only the maintained examples, or also mention + unsupported combinations such as drag-and-drop plus virtualization as + user-owned composition?' status: resolved - decision: 'Teach maintained examples; briefly label unsupported combinations as user-owned composition without prescribing an unmaintained recipe.' + decision: + 'Teach maintained examples; briefly label unsupported combinations as + user-owned composition without prescribing an unmaintained recipe.' - skill: 'devtools' - question: 'Should production entrypoints be taught as supported production inspection, or should normal guidance keep Devtools development-only?' + question: 'Should production entrypoints be taught as supported production + inspection, or should normal guidance keep Devtools development-only?' status: resolved - decision: 'Keep normal guidance development-only; explain production entrypoints only when explicitly requested.' + decision: + 'Keep normal guidance development-only; explain production entrypoints + only when explicitly requested.' maintainer_interview: phase_2_completed: true phase_2_summary: - - 'Primary journeys are first table setup, adding a feature, v8-to-v9 migration, server-data decisions, and performance debugging.' - - 'Table is headless and compatible with component libraries/design systems, but no library-specific skills are in scope.' - - 'Feature skills should be short, edge-case-first, and route exact API discovery to installed dist declarations (.d.ts).' - - 'Framework state guides, createTableHook, Query, and Virtual require dedicated adapter guidance where source exists.' + - 'Primary journeys are first table setup, adding a feature, v8-to-v9 + migration, server-data decisions, and performance debugging.' + - 'Table is headless and compatible with component libraries/design systems, + but no library-specific skills are in scope.' + - 'Feature skills should be short, edge-case-first, and route exact API + discovery to installed dist declarations (.d.ts).' + - 'Framework state guides, createTableHook, Query, and Virtual require + dedicated adapter guidance where source exists.' - 'Worker row models are excluded and useLegacyTable must not be promoted.' phase_4_completed: true phase_4_answers_accepted: true + progressive_disclosure_decision: + accepted_at: 2026-10-04 + decisions: + - Keep core state management and feature architecture directly + discoverable. + - Move individual optional features and adapter compositions to + conditional references. + - Use the official Intent artifacts-to-skills/references workflow for the + complete batch. +disclosure_contract: + entrypoints: 39 + feature_references: 17 + rules: + - Every skills entry produces SKILL.md; each nested references entry + produces the named supporting Markdown file relative to its owner. + - Read the reviewed domain map and skill spec before updating + skill_tree.yaml; generate files only from that tree. + - Choose references from the requested change and relevant registrations, + including features being added; installed or registered features alone do + not require loading their content. + - Use direct Markdown links with explicit read conditions; references have + no SKILL.md frontmatter or independent discovery entry. + - Keep source evidence and failure modes with their reference in this map, + and aggregate sources on the owner for Intent staleness tracking. + - Keep complete shared migration coverage in a checklist and load detailed + mappings only when that checklist finds affected code. + - Reference files inherit the owning skill/package version; version + synchronization stays on SKILL.md and artifacts. + validation: + - Validate every declared skill and reference exists, each reference is + directly linked from its owner, and no shipped document is absent from the + tree. + - Check reference Markdown and annotated snippets with the same rules as + entry points. + - Verify catalog size, single-file loading, reference-link resolution, + dependency reachability, and npm package contents in a consumer fixture. +progressive_disclosure_review: + date: 2026-10-04 + workflow: tree-generator and generate-skill Mode A from existing reviewed artifacts + community_scan: + - Reviewed issues 6601, 6577, 6524 and discussion 6535 for React reactive + boundaries and inferred feature types; retained source-backed adapter + guidance rather than unverified comment workarounds. + - Reviewed Angular issue 6530, closed as fixed in 9.1.3; obsolete + microtask/isMount workarounds do not belong in current skills. + - Existing domain issue evidence and technical failure modes remain attached + to their owning entry points or references. + artifact_corrections: + - Restore the aggregation inventory from its existing published skill, + guide, and source. + - Keep aggregationFns prerequisites tied to rowAggregationFeature. + - Keep resize handlers tied to mouse and touch start events. diff --git a/_artifacts/skill_spec.md b/_artifacts/skill_spec.md index 00de2f975d..bd6a9b0248 100644 --- a/_artifacts/skill_spec.md +++ b/_artifacts/skill_spec.md @@ -1,7 +1,7 @@ # TanStack Table v9 skill specification Status: reviewed
-Date: 2026-07-29
+Date: 2026-10-04
Library target: TanStack Table v9, authored in stable-release voice
Package metadata target: exact workspace package versions; release automation keeps every shipped skill synchronized @@ -9,7 +9,7 @@ This specification is the generation contract for a deliberately smaller, foot-g ## Outcome -Generate 80 short package-local skills across all 18 public packages. A loaded skill should quickly do three things: +Generate 39 package-local entry points across all 18 public packages, with the supporting references declared in skill_tree.yaml. A loaded skill should quickly do three things: 1. Correct the user or agent mental model. 2. Show the smallest reliable setup or decision pattern. @@ -23,12 +23,12 @@ The skills should not enumerate every option or method. That duplicates generate - V9 optional features are plugins. A feature API, state slice, row model, or function registry exists only when the matching feature is registered through tableFeatures. - The client/server row-model boundary is a first-order architecture decision. Manual modes bypass Table processing; they do not perform server work. - Most userland TypeScript should be inferred through helpers, features, options, and app-hook factories. Deep manual generics are a smell. -- createTableHook is important v9 guidance for reusable app-level table infrastructure. It deserves one dedicated skill in every framework package. +- createTableHook is important v9 guidance for reusable app-level table infrastructure. It deserves one dedicated reference linked from every framework getting-started skill. - Framework table-state guidance is fundamental and should retain substantially more depth than ordinary feature skills. - Data and columns are model inputs and must retain stable references between meaningful changes in every adapter and composition example. - V8-to-v9 migration is a primary route. Deprecated useLegacyTable is not the destination and must not be promoted. - TanStack Query usually owns data before it reaches Table. TanStack Virtual is intertwined with Table rendering after the final row/column model exists. -- CSS/layout failure modes belong in the relevant pinning, sizing, resizing, and virtualization skills. Component-library-specific skills do not. +- CSS/layout failure modes belong in the relevant pinning, sizing, resizing, and virtualization references. Component-library-specific skills do not. - Worker row models are excluded. ## Source-of-truth hierarchy @@ -68,54 +68,40 @@ Each generated SKILL.md must satisfy the current TanStack Intent validator: The metadata version must record the exact package version even though prose treats v9 as stable. Do not call ordinary v9 APIs experimental or advise waiting for stable. -### Body shape +### Artifacts before generated files -Prefer 60-180 lines. Table-state, migration, createTableHook, and Virtual skills may be longer when the adapter genuinely differs. +Use the installed Intent `tree-generator` and `generate-skill` Mode A workflows. The reviewed domain map contains the knowledge inventory and failure modes. This specification defines placement. Update `skill_tree.yaml` from both before generating any skill or reference. -Use this default structure: +Each item in `domain_map.yaml#skills` produces one `SKILL.md`. Its nested `references` entries retain their purpose, source evidence, and failure modes, and produce the paths listed in the corresponding tree entry. A moved topic remains covered through that reference. Do not restore its old discovery entry during regeneration. -1. One-paragraph mental model. -2. Setup: imports and the smallest valid configuration. -3. Two to four decision or implementation patterns. -4. Common mistakes: at least three concrete failures with correction. -5. API discovery: exact installed declaration route (`.d.ts`) and identifiers to inspect. -6. Cross-skill routing only when another skill owns the next decision. +The maintainer approved the progressive-disclosure proposal and batch implementation on 2026-10-04. Preserve prior reviewed technical decisions while changing their placement. This is generation from existing reviewed artifacts, not a new-library discovery interview. -Do not add a reference folder by default. Add one only when a large migration mapping or framework-specific content cannot stay concise in SKILL.md. Progressive disclosure is a size tool, not permission to recreate all docs as references. +### Body shape and disclosure -### Migration skill exception +Keep shared purpose, essential constraints, the minimum valid setup, and routing in `SKILL.md`. Prefer 60-120 lines for ordinary entry points; preserve correctness when a framework needs more. The 500-line ceiling is a guard, not a reason to delay references. -The table-core and seven adapter migrate-v8-to-v9 skills are intentionally comprehensive. They may approach the 500-line limit and must list every breaking change in the maintained migration guide, not merely three common mistakes or a short route to the docs. +- Use the core overview and routing format for `core`, the standard procedure format for setup and state, and Intent's checklist format for migration. +- Split conditional content by the task it serves. Optional features, Query, Virtual, reusable app hooks, advanced reactivity, and detailed migration maps belong in their declared references. +- Give each reference a direct relative Markdown link in the owning `SKILL.md` and an explicit condition for reading it. A list of filenames without read conditions is insufficient. +- Read references for the requested change and relevant existing registrations, including features being added. A feature being installed or registered alone does not require reading its reference. +- Each reference is ordinary Markdown with a descriptive title, purpose, source provenance, and maintained examples. It has no skill frontmatter and inherits its owning package version. +- Keep related feature references separate: row/cell selection, sizing/resizing, and each pinning feature have different behavior and prerequisites. +- Keep shared essential gotchas inline. Retain concrete feature-specific failure modes in the matching reference. Use wrong/correct examples only when they explain a real failure; a router does not need three artificial mistakes. +- Use `requires` only for unconditional skill prerequisites, and state those reads in prose. Intent load returns one entry point; it does not automatically load prerequisites or references. +- Use Markdown links within a package. Resolve cross-package skills with `intent load #`; do not assume a hoisted sibling package or a repository-only path exists in a consumer install. +- Keep exact API discovery rooted in installed package declarations. -Every adapter migration skill must be usable on its own and include: +### Migration coverage -- its framework-version prerequisite, package change, and construction entrypoint mapping; -- the complete shared architecture changes for tableFeatures, all stock feature imports, row-model slots, function registries, and stockFeatures audit guidance; -- the full logical start/end column-pinning mapping; -- prototype-method binding and enumeration/spread consequences; -- state access, selector/subscription, controlled-state, external-atom, precedence, and onStateChange changes for that adapter; -- createColumnHelper/columns(), rendering, tableOptions, and createTableHook changes; -- pinning-option, sizing/resizing, sorting, removed-internal, row, and row-selection API changes; -- all TypeScript generic, meta, function-registry augmentation, StockFeatures, and RowData changes; -- an exhaustive checkbox audit at the end. +Core `migrate-v8-to-v9` owns the complete shared audit checklist. Its architecture, state, feature-apis, and typescript references preserve every shared breaking change from the reviewed domain map. Audit the whole checklist and read detailed mappings for affected code. -Do not rely on the core migration skill to hide shared changes from an adapter migration. The requires relationship supplies context, but migration users commonly load only the adapter skill and need the full audit surface there. Keep detailed mappings in SKILL.md unless the file would exceed Intent's 500-line limit. +Each adapter migration entry point explicitly loads the core migration skill and adds its framework-version, construction, rendering, state, and app-hook checks. Its adapter-migration reference contains framework-specific detail. Shared rename tables and inventories have one authoritative home in core. Preserve complete migration coverage across the entry point and referenced files. -### Table-state skill exception +### State coverage -Every framework table-state skill must preserve substantially more of its guide than an ordinary feature skill because state coordination is the library's foundational behavior. Include: +Core `table-state` owns internal/default ownership, feature-gated slices, baseAtoms/atoms/store, controlled-value/updater pairing, external-atom precedence, initialization, resets, and state inference. It routes reactive consumption to the installed adapter. -- internal state as the default and the reasons to hoist only selected slices; -- feature-gated state and typing; -- `baseAtoms`, readonly derived `atoms`, the flat `store`, and any adapter-selected `table.state` surface; -- snapshot reads versus the adapter's tracked/subscribed reads; -- one owner per slice across internal state, `initialState`, external `atoms`, and `state` plus `on[State]Change`; -- precedence, value-or-updater handling, and removal of the v8 global `onStateChange` option; -- preferred feature-method writes, low-level base-atom writes, initial/reset semantics, and externally owned reset limitations; -- feature-specific types and `TableState` inference; -- framework-specific selector, subscription, compiler, signal, rune, ref, controller, or proxy behavior. - -Retain concrete wrong-versus-correct examples for the adapter's most likely subscription and controlled-state mistakes. Table-state skills may exceed the normal 180-line target while remaining below Intent's 500-line limit. +Each adapter `table-state` requires the core state skill. Keep its essential snapshot-versus-tracked-read distinction, supported subscription APIs, controlled wiring, and adapter-specific correctness warnings inline. Its reactivity reference holds advanced boundaries and extended examples. State repair in an existing table does not require getting-started. ### Stable model-input invariant @@ -123,11 +109,11 @@ Treat stable `data` and `columns` references as a correctness and performance in ### Custom-feature completeness exception -The custom-features skill must enumerate all 10 public declaration-merge FeatureMaps: table state, table options, table, column definition, column, row, cell, header, row-model functions, and cached row models. Explain that `Plugins` registers the feature key and that declarations add types only; each advertised runtime surface needs matching lifecycle wiring. +The custom-features plugin-example reference must enumerate all 10 public declaration-merge FeatureMaps: table state, table options, table, column definition, column, row, cell, header, row-model functions, and cached row models. Explain that `Plugins` registers the feature key and that declarations add types only; each advertised runtime surface needs matching lifecycle wiring. Enumerate both API utilities and every installation path: `assignTableAPIs` in `constructTableAPIs`, plus `assignPrototypeAPIs` in `assignColumnPrototype`, `assignRowPrototype`, `assignCellPrototype`, and `assignHeaderPrototype`. Include the static-name prefixes, prototype self argument, optional `memoDeps`, shared-prototype constraint, `initColumnInstanceData`/`initRowInstanceData`, and the fact that per-object `assignColumnAPIs`-style utilities do not exist. Clearly label row-model maps as advanced internal pipeline surfaces requiring explicit runtime/cache wiring. -Use one annotated, authoritative feature example for the complete shape. Do not stack a minimal density example, a second FeatureMap example, a third API-installation example, and then repeat their distinction under Common Mistakes. Keep selection guidance and foot-guns as compact prose around the single example. +Use one annotated, authoritative feature example for the complete shape. Do not stack a minimal density example, a second FeatureMap example, a third API-installation example, and then repeat their distinction under Common Mistakes. Keep the custom-features entry point focused on plugin selection and implementation steps, with a direct instruction to read the checked example before implementing lifecycle wiring. ### Code examples @@ -161,8 +147,9 @@ Use Wrong/Correct only when the Wrong form is demonstrably broken or misleading. - `intent validate` checks structure, frontmatter, sources, requires, and artifacts. - `skills:versions:check` compares each skill's `metadata.library_version` with its package and verifies artifact overrides. -- `test:skill-content` checks high-risk generated-content invariants, including Markdown table shape, package imports, feature gating, stable empty fallbacks, adapter subscription shapes, and resize input events. -- Add `` immediately before a self-contained TypeScript/TSX fence when its exact code is load-bearing. `test:skill-snippets` compiles each marked fence against workspace source. A marker may specify `prelude=path` or `tsconfig=path` when the snippet needs an explicit checked context. +- `test:skill-tree` checks artifact/file coverage, direct reference links, local link targets, skill dependencies, source provenance, Intent consumer discovery/loading, and packaged references. +- `test:skill-content` checks high-risk generated-content invariants in entry points and references, including Markdown table shape, package imports, feature gating, stable empty fallbacks, adapter subscription shapes, and resize input events. +- Add `` immediately before a self-contained TypeScript/TSX fence when its exact code is load-bearing. `test:skill-snippets` compiles each marked fence in entry points and references against workspace source. A marker may specify `prelude=path` or `tsconfig=path` when the snippet needs an explicit checked context. - Virtual composition guidance must be copied from or kept structurally faithful to the maintained adapter guide/example. When evidence is absent, route to the documented supported composition instead of inventing an adapter package or API. These checks run in `pnpm test:skills`. They supplement review; they do not justify expanding skills into API summaries. @@ -173,84 +160,29 @@ Skill versions ship with package versions. After release tooling calculates pack ## Routing taxonomy -### Foundations and migration — @tanstack/table-core (7) - -- core — headless philosophy, core model, stable inputs, renderer ownership. -- table-features — explicit registration, prerequisites, row-model/function slots, tree-shaking. -- client-vs-server — choose ownership for filtering/grouping/sorting/expanding/pagination. -- typescript — columnHelper, meta helpers, tableOptions, inference, avoid manual generics. -- api-not-found — inspect installed declarations, feature gating, version/adapter mismatch, prototypes. -- custom-features — plugin lifecycle after exhausting built-in APIs and meta. -- migrate-v8-to-v9 — shared breaking changes and adapter migration routing. - -### Stock feature plugins — @tanstack/table-core (16) - -- aggregation -- cell-selection -- column-faceting -- column-filtering -- grouping -- column-ordering -- column-pinning -- column-resizing -- column-sizing -- column-visibility -- global-filtering -- expanding -- pagination -- row-pinning -- row-selection -- sorting - -Each feature skill must: - -- name the feature import; -- name only row-model and registry slots relevant to that feature; -- state its tableFeatures prerequisites; -- distinguish state from row processing and renderer behavior; -- route exact API discovery to its shipped feature directory under `dist/features/`; -- include feature-specific edge cases from domain_map.yaml. - -Do not combine all column layout features into one summary. Their plugin prerequisites and CSS responsibilities differ enough to route independently. - -### Framework adapter set - -React, Preact, Solid, Svelte, Vue, and Angular each ship six skills: - -- getting-started -- table-state -- migrate-v8-to-v9 -- create-table-hook -- with-tanstack-query -- with-tanstack-virtual +### Foundations and migration: @tanstack/table-core -Lit ships five: +Five entry points remain directly discoverable: -- getting-started -- table-state -- migrate-v8-to-v9 -- create-table-hook -- with-tanstack-virtual +- `core`: headless model, stable inputs, minimal typed setup, and routing. References own TypeScript troubleshooting, missing API diagnosis, and row/display-index details. +- `table-features`: feature registration, prerequisites, row-model and function slots. References own client/server boundaries and each of the 17 optional features. +- `table-state`: shared ownership, initialization, updates, reset semantics, and adapter-state routing. +- `custom-features`: plugin authoring workflow and one complete checked plugin example in a reference. +- `migrate-v8-to-v9`: complete shared audit checklist and conditional architecture, state, feature API, and TypeScript mappings. -Alpine ships three: +### Optional feature references -- getting-started -- table-state -- create-table-hook +The `table-features` entry point directly links aggregation, cell-selection, cell-spanning, column-faceting, column-filtering, column-ordering, column-pinning, column-resizing, column-sizing, column-visibility, expanding, global-filtering, grouping, pagination, row-pinning, row-selection, and sorting. -Ember ships three: +Each feature reference names its feature import, relevant row-model/registry slots, prerequisites, state/processing/renderer responsibilities, installed declaration directory, and the feature-specific failure modes retained in the domain map. -- getting-started -- table-state -- create-table-hook +### Framework adapter set -Octane ships three: +All ten adapters have `getting-started` and `table-state` entry points. React, Preact, Solid, Svelte, Vue, Angular, and Lit also retain `migrate-v8-to-v9`. State and migration entry points have their own conditional detailed references. -- getting-started -- table-state -- create-table-hook +Every getting-started skill directly links a `references/create-table-hook.md`. React, Preact, Solid, Svelte, Vue, and Angular also link `references/with-tanstack-query.md` and `references/with-tanstack-virtual.md`. Lit also links Virtual. Broaden the getting-started description to route ongoing adapter work and these supported integrations. -Do not add Query where no maintained adapter example exists. Do not add Alpine, Ember, or Octane migration skills because none has a v8 adapter journey to teach. Do not add Ember or Octane Query or Virtual skills until maintained adapter examples exist. Do not invent Preact virtualization examples; its Virtual skill should rely on the maintained adapter guide and installed APIs. +Keep framework-specific examples in their package. Do not add Query or Virtual guidance where no maintained adapter guide/example exists. Alpine, Ember, and Octane have no v8 adapter migration journey. ### Devtools set (6) @@ -271,27 +203,29 @@ All Devtools skills must emphasize the required non-empty table options.key, lif ## Package coverage -| Package | Skills | -| -------------------------------- | -----: | -| @tanstack/table-core | 23 | -| @tanstack/react-table | 6 | -| @tanstack/preact-table | 6 | -| @tanstack/octane-table | 3 | -| @tanstack/solid-table | 6 | -| @tanstack/svelte-table | 6 | -| @tanstack/vue-table | 6 | -| @tanstack/angular-table | 6 | -| @tanstack/lit-table | 5 | -| @tanstack/alpine-table | 3 | -| @tanstack/ember-table | 3 | -| @tanstack/table-devtools | 1 | -| @tanstack/react-table-devtools | 1 | -| @tanstack/preact-table-devtools | 1 | -| @tanstack/solid-table-devtools | 1 | -| @tanstack/vue-table-devtools | 1 | -| @tanstack/angular-table-devtools | 1 | -| @tanstack/match-sorter-utils | 1 | -| Total | 80 | +| Package | Entry points | +| -------------------------------- | -----------: | +| @tanstack/table-core | 5 | +| @tanstack/react-table | 3 | +| @tanstack/preact-table | 3 | +| @tanstack/octane-table | 2 | +| @tanstack/solid-table | 3 | +| @tanstack/svelte-table | 3 | +| @tanstack/vue-table | 3 | +| @tanstack/angular-table | 3 | +| @tanstack/lit-table | 3 | +| @tanstack/alpine-table | 2 | +| @tanstack/ember-table | 2 | +| @tanstack/table-devtools | 1 | +| @tanstack/react-table-devtools | 1 | +| @tanstack/preact-table-devtools | 1 | +| @tanstack/solid-table-devtools | 1 | +| @tanstack/vue-table-devtools | 1 | +| @tanstack/angular-table-devtools | 1 | +| @tanstack/match-sorter-utils | 1 | +| Total | 39 | + +`pnpm test:skills` verifies the file inventory against the tree. A React consumer with core discovers eight Table entry points. Plain reference files never appear as independent Intent skills. ## Framework distinctions that must survive generation @@ -364,12 +298,12 @@ All Devtools skills must emphasize the required non-empty table options.key, lif ## Cross-cutting placement rules - Performance: stable inputs in getting-started/core; adapter-specific fine-grained state reads or selectors in table-state; CSS variables in resizing; measurement/overscan in Virtual; row ownership in client-vs-server. -- CSS: pinning, sizing, resizing, and Virtual skills only. Core may state that CSS is user-owned. +- CSS: pinning, sizing, resizing, and Virtual references only. Core may state that CSS is user-owned. - Accessibility: core/getting-started may remind that headless rendering leaves semantics and interaction accessibility with the renderer; do not create a component-library integration skill. - Query: data source and manual processing boundaries, not Table rendering. - Virtual: final Table models and renderer geometry, never tableFeatures. -- Context: createTableHook skills; mention context over prop drilling when a registered reusable component needs typed table/cell/header access. -- API lookup: api-not-found establishes the workflow; every other skill includes its direct installed declaration route. +- Context: createTableHook references; mention context over prop drilling when a registered reusable component needs typed table/cell/header access. +- API lookup: core/references/api-not-found.md establishes the workflow; every other skill includes its direct installed declaration route. ## Anti-patterns forbidden during generation @@ -393,7 +327,13 @@ The maintainer accepted these generation positions on 2026-07-10: 3. createTableHook is recommended for recurring app conventions; standalone construction remains appropriate for one-offs. 4. Typed context/injection helpers from createTableHook are preferred over prop drilling inside registered components. 5. useLegacyTable is mentioned only when encountered, as a deprecated temporary bridge rather than a migration target. -6. Virtual skills teach maintained examples and only identify unsupported combinations as user-owned composition. +6. Virtual references teach maintained examples and only identify unsupported combinations as user-owned composition. 7. Devtools guidance is development-only by default; production entrypoints are explained only when explicitly requested. Domain discovery is reviewed and tree generation may proceed. + +## Consumer compatibility and validation + +Moved topic IDs are intentionally removed from discovery. Document their owning entry points in docs/agent-skills.md. Consumers using explicit `install --map` mappings must regenerate them. Consumers allowing individual old IDs in `intent.skills` must select the replacement entry points. Preserve a small catalog by avoiding forwarding SKILL.md files. + +Verify the pinned Intent 0.4.0 behavior in an isolated consumer install: list/catalog counts, default and mapped guidance, single-file loading, conditional reference links, and prerequisites. Check that package tarballs contain the references. Measure discovery text and task-specific reads separately. Run the content and annotated-snippet checks after all moves, and include a changeset because these files ship inside published packages. diff --git a/_artifacts/skill_tree.yaml b/_artifacts/skill_tree.yaml index 4543dbb45d..520a1d26ec 100644 --- a/_artifacts/skill_tree.yaml +++ b/_artifacts/skill_tree.yaml @@ -2,1194 +2,917 @@ library: name: '@tanstack/table' version: '9.2.5' repository: 'https://github.com/TanStack/table' - description: 'Headless data-grid state and row processing with tree-shakeable v9 features and framework adapters.' + description: + 'Headless data-grid state and row processing with tree-shakeable v9 + features and framework adapters.' package_version_overrides: '@tanstack/match-sorter-utils': '9.1.2' generated_from: domain_map: '_artifacts/domain_map.yaml' skill_spec: '_artifacts/skill_spec.md' -generated_at: '2026-08-01' +generated_at: '2026-10-04' status: reviewed -reviewed_at: '2026-07-29' +reviewed_at: '2026-10-04' batch_review: true -structure: 'flat-per-package' +structure: 'entrypoints-with-references' monorepo_layout: true tree_decisions: - - 'Every domain-map entry maps one-to-one to a package-local SKILL.md.' - - 'Flat task-focused paths keep each feature and adapter workflow independently discoverable.' - - 'The table-core core skill is the lightweight router and philosophy skill; no additional synthetic router skills are added.' - - 'No reference files are planned initially. Generation may add one only when content cannot remain concise under the reviewed specification.' - - 'Cross-package requires use the package#skill identifier form; same-package requires use the local slug.' - - 'All migrate-v8-to-v9 skills are comprehensive exceptions to the compact default: each must enumerate every shared and adapter-specific breaking change and end with a complete audit checklist.' - - 'Wrong/Correct examples are used only for genuinely broken behavior; supported alternatives are presented as explicit decisions.' - - 'Adapter composition skills stay anchored to maintained examples and guides, especially where Virtual adapter APIs differ.' - - 'Skill source, content, Markdown structure, checked snippets, and package-version metadata are validated in CI.' - - 'All framework table-state skills are foundational depth exceptions: each preserves state surfaces, feature gating, ownership, precedence, updates/resets, typing, and adapter-specific subscription behavior from its guide.' - - 'Every generated example keeps data and columns stable; repeated option evaluation must not contain inline derivation, column factories, or fresh empty-array fallbacks.' - - 'The custom-features skill is a completeness exception expressed through one authoritative example: it inventories all 10 FeatureMaps and every table/column/row/cell/header API installation path without layering redundant examples or misconceptions.' + - Each domain-map skills entry maps to one package-local SKILL.md; its + references entries map to supporting Markdown files. + - Core, feature architecture, and shared state remain directly discoverable + alongside custom-plugin and migration workflows. + - All 17 optional features live under table-features/references, selected by + the requested change and relevant feature registrations. + - Adapter entry points route createTableHook, Query, and Virtual to references + only where maintained guidance exists. + - Adapter state skills require shared state, retain essential reactivity + inline, and disclose advanced examples without requiring setup guidance. + - Shared migration checklists remain complete; core references own shared + mappings and adapter references own framework-specific changes. + - Every reference has a direct conditional Markdown link from its owner and + inherits that package version. + - Owner sources aggregate reference evidence for Intent stale; source content, + links, annotated examples, and published reference files are validated. + - Keep Intent 0.4.0 and the repository content/snippet checks. Batch + generation uses generate-skill Mode A from these reviewed artifacts. skills: - - name: 'Core' + - name: Core slug: core type: core domain: foundations - path: 'packages/table-core/skills/core/SKILL.md' - package: 'packages/table-core' - description: 'Use TanStack Table v9 as a headless data-grid state and row-processing engine. Routes first-table setup, stable data/columns, semantic rendering, feature plugins, framework adapters, and renderer-owned CSS or accessibility.' - 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' - - - name: 'Table Features' + path: packages/table-core/skills/core/SKILL.md + package: packages/table-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. + 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 + references: + - references/typescript.md + - references/api-not-found.md + - references/rows.md + - name: Table Features slug: table-features - type: sub-skill - domain: foundations - path: 'packages/table-core/skills/table-features/SKILL.md' - package: 'packages/table-core' - description: 'Register v9 tableFeatures, feature plugins, create*RowModel factories, and filterFns/sortFns/aggregationFns slots in prerequisite order while preserving tree-shaking. Load when an API or state slice is missing or when choosing explicit features versus stockFeatures.' - 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' - - - name: 'Client vs Server' - slug: client-vs-server - type: sub-skill - domain: foundations - path: 'packages/table-core/skills/client-vs-server/SKILL.md' - package: 'packages/table-core' - description: 'Choose client or server ownership for filtering, grouping, sorting, expanding, and pagination. Explains create*RowModel pipelines, manual* bypass flags, mixed pipelines, server counts, stable processed data, and the exact dataset available to every stage.' - requires: ['core', 'table-features'] - sources: - - 'TanStack/table:docs/guide/row-models.md' - - 'TanStack/table:packages/table-core/src/core/row-models/coreRowModelsFeature.utils.ts' - - 'TanStack/table:examples/react/with-tanstack-query' - - - name: 'TypeScript' - slug: typescript - type: sub-skill + type: core domain: foundations - path: 'packages/table-core/skills/typescript/SKILL.md' - package: 'packages/table-core' - description: 'Preserve TanStack Table v9 inference with createColumnHelper, columns(), tableOptions, tableMeta/columnMeta/filterMeta helpers, typeof features, and createTableHook. Load for ColumnDef errors, reusable generic tables, or unnecessary manual feature generics.' - requires: ['core', 'table-features'] - sources: - - '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' - - - name: 'API Not Found' - slug: api-not-found - type: sub-skill + path: packages/table-core/skills/table-features/SKILL.md + package: packages/table-core + 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.' + 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 + references: + - references/client-vs-server.md + - references/column-faceting.md + - references/column-filtering.md + - references/grouping.md + - references/column-ordering.md + - references/column-pinning.md + - references/column-resizing.md + - references/column-sizing.md + - references/column-visibility.md + - references/global-filtering.md + - references/expanding.md + - references/pagination.md + - references/row-pinning.md + - references/cell-selection.md + - references/cell-spanning.md + - references/row-selection.md + - references/sorting.md + - references/aggregation.md + - name: Table State + slug: table-state + type: core domain: foundations - path: 'packages/table-core/skills/api-not-found/SKILL.md' - package: 'packages/table-core' - description: 'Diagnose missing TanStack Table exports, options, state slices, and instance methods by checking the installed package declarations (dist/**/*.d.ts), adapter/version mismatches, tableFeatures registration, and v9 prototype APIs before inventing replacements.' - requires: ['core', 'table-features'] + path: packages/table-core/skills/table-state/SKILL.md + package: packages/table-core + 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. + requires: + - core sources: - - 'TanStack/table:packages/table-core/src/index.ts' - - 'TanStack/table:packages/table-core/src/types/TableFeatures.ts' - - 'TanStack/table:docs/framework/react/guide/migrating.md' - - - name: 'Custom Features' + - 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 + - name: Custom Features slug: custom-features - type: sub-skill + type: core domain: foundations - path: 'packages/table-core/skills/custom-features/SKILL.md' - package: 'packages/table-core' - description: 'Author a TanStack Table v9 feature plugin across all 10 FeatureMaps and every table/column/row/cell/header API installation path, including prototypes, memoDeps, instance data, and advanced row-model maps, after checking built-ins and meta.' - requires: ['core', 'table-features', 'typescript'] - 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' - - - name: 'Migrate v8 to v9' + path: packages/table-core/skills/custom-features/SKILL.md + package: packages/table-core + 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. + 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 + references: + - references/plugin-example.md + - name: Migrate v8 to v9 slug: migrate-v8-to-v9 - type: lifecycle + type: migration domain: foundations - path: 'packages/table-core/skills/migrate-v8-to-v9/SKILL.md' - package: 'packages/table-core' - description: 'Perform a complete TanStack Table v8-to-v9 migration audit: all 16 feature registrations, every row-model and registry slot, state/store changes, prototype methods, full pinning and resizing mappings, sorting and selection semantics, removed internals, helpers, meta typing, and generic changes. useLegacyTable is only a deprecated temporary bridge when already encountered.' - requires: ['core', 'table-features', 'typescript'] - 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' - - - name: 'Column Faceting' - slug: column-faceting - type: sub-skill - domain: feature-plugins - path: 'packages/table-core/skills/column-faceting/SKILL.md' - package: 'packages/table-core' - description: 'Build faceted filter UIs with columnFacetingFeature, facetedRowModel, facetedUniqueValues, and facetedMinMaxValues. Covers own-filter exclusion, other-filter context, incomplete server-page counts, and installed feature-source API lookup.' - requires: ['core', 'table-features', 'column-filtering'] - sources: - - 'TanStack/table:docs/framework/react/guide/column-faceting.md' - - 'TanStack/table:packages/table-core/src/features/column-faceting' - - 'TanStack/table:examples/react/filters-faceted' - - - name: 'Column Filtering' - slug: column-filtering - type: sub-skill - domain: feature-plugins - path: 'packages/table-core/skills/column-filtering/SKILL.md' - package: 'packages/table-core' - description: 'Filter columns with columnFilteringFeature, filteredRowModel, filterFns, filterMeta, nested-row direction, and manualFiltering. Load for accessor/filter compatibility, controlled filter updaters, or client/server filter ownership.' - requires: ['core', 'table-features', 'client-vs-server'] - sources: - - 'TanStack/table:docs/framework/react/guide/column-filtering.md' - - 'TanStack/table:packages/table-core/src/features/column-filtering' - - 'TanStack/table:examples/react/filters' - - - name: 'Grouping' - slug: grouping - type: sub-skill - domain: feature-plugins - path: 'packages/table-core/skills/grouping/SKILL.md' - package: 'packages/table-core' - description: 'Group and aggregate rows with columnGroupingFeature, groupedRowModel, aggregationFns, groupedColumnMode, and manualGrouping. Covers grouped/placeholder/aggregated cells plus expansion and pagination semantics.' - requires: ['core', 'table-features', 'client-vs-server'] - sources: - - 'TanStack/table:docs/framework/react/guide/grouping.md' - - 'TanStack/table:packages/table-core/src/features/column-grouping' - - 'TanStack/table:examples/react/grouping' - - - name: 'Aggregation' - slug: aggregation - type: sub-skill - domain: feature-plugins - path: 'packages/table-core/skills/aggregation/SKILL.md' - package: 'packages/table-core' - description: 'Aggregate columns independently of grouping with rowAggregationFeature, built-in or custom aggregation functions, caller-selected row scopes, keyed results, grouped merges, and manual values.' - requires: ['core', 'table-features'] - sources: - - 'TanStack/table:docs/guide/aggregation.md' - - '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' - - - name: 'Column Ordering' - slug: column-ordering - type: sub-skill - domain: feature-plugins - path: 'packages/table-core/skills/column-ordering/SKILL.md' - package: 'packages/table-core' - description: 'Control leaf columnOrder with stable IDs while respecting pinning regions, visibility, and groupedColumnMode precedence. Load for column drag-and-drop or rendered order that differs from state.' - requires: ['core', 'table-features'] - sources: - - 'TanStack/table:docs/framework/react/guide/column-ordering.md' - - 'TanStack/table:packages/table-core/src/features/column-ordering' - - 'TanStack/table:examples/react/column-dnd' - - - name: 'Column Pinning' - slug: column-pinning - type: sub-skill - domain: feature-plugins - path: 'packages/table-core/skills/column-pinning/SKILL.md' - package: 'packages/table-core' - description: 'Pin columns into logical start/center/end regions with columnPinningFeature and implement sticky CSS, RTL logical offsets, z-index, backgrounds, overflow, and widths without gaps or overlaps.' - requires: ['core', 'table-features', 'column-sizing'] - sources: - - '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' - - - name: 'Column Resizing' - slug: column-resizing - type: sub-skill - domain: feature-plugins - path: 'packages/table-core/skills/column-resizing/SKILL.md' - package: 'packages/table-core' - description: 'Wire columnResizingFeature, header.getResizeHandler, resize modes/direction, pointer or touch events, and performant CSS-variable updates. Requires columnSizingFeature and renderer-owned handles/styles.' - requires: ['core', 'table-features', 'column-sizing'] - sources: - - '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' - - - name: 'Column Sizing' - slug: column-sizing - type: sub-skill - domain: feature-plugins - path: 'packages/table-core/skills/column-sizing/SKILL.md' - package: 'packages/table-core' - description: 'Use columnSizingFeature numeric size/minSize/maxSize state, getSize/getStart/getAfter offsets, and total sizes in table, grid, or flex CSS. Load for auto/percentage misconceptions or sizing/pinning layout mismatch.' - requires: ['core', 'table-features'] - sources: - - 'TanStack/table:docs/framework/react/guide/column-sizing.md' - - 'TanStack/table:packages/table-core/src/features/column-sizing' - - 'TanStack/table:examples/react/column-sizing' - - - name: 'Column Visibility' - slug: column-visibility - type: sub-skill - domain: feature-plugins - path: 'packages/table-core/skills/column-visibility/SKILL.md' - package: 'packages/table-core' - description: 'Hide columns with columnVisibilityFeature while rendering visibility-aware header, column, and cell collections. Covers false-versus-absent state, enableHiding semantics, and hidden columns remaining in DOM through getAll APIs.' - requires: ['core', 'table-features'] - sources: - - 'TanStack/table:docs/framework/react/guide/column-visibility.md' - - 'TanStack/table:packages/table-core/src/features/column-visibility' - - 'TanStack/table:examples/react/column-visibility' - - - name: 'Global Filtering' - slug: global-filtering - type: sub-skill - domain: feature-plugins - path: 'packages/table-core/skills/global-filtering/SKILL.md' - package: 'packages/table-core' - description: 'Apply globalFilter across eligible columns with globalFilteringFeature, columnFilteringFeature, filteredRowModel, globalFilterFn, and manual server filtering. Covers default string/number eligibility and explicit exclusions.' - requires: ['core', 'table-features', 'client-vs-server', 'column-filtering'] - sources: - - 'TanStack/table:docs/framework/react/guide/global-filtering.md' - - 'TanStack/table:packages/table-core/src/features/global-filtering' - - 'TanStack/table:examples/react/filters' - - - name: 'Expanding' - slug: expanding - type: sub-skill - domain: feature-plugins - path: 'packages/table-core/skills/expanding/SKILL.md' - package: 'packages/table-core' - description: 'Expand hierarchical subrows or custom detail panels with rowExpandingFeature, expandedRowModel, getSubRows, getRowCanExpand, manualExpanding, and paginateExpandedRows. Separates expansion state from user-rendered detail UI.' - requires: ['core', 'table-features', 'client-vs-server'] - sources: - - 'TanStack/table:docs/framework/react/guide/expanding.md' - - 'TanStack/table:packages/table-core/src/features/row-expanding' - - 'TanStack/table:examples/react/expanding' - - - name: 'Pagination' - slug: pagination - type: sub-skill - domain: feature-plugins - path: 'packages/table-core/skills/pagination/SKILL.md' - package: 'packages/table-core' - description: 'Paginate with rowPaginationFeature and paginatedRowModel or manualPagination. Covers pageIndex/pageSize, rowCount/pageCount, next-page limits, already-paginated server data, and autoResetPageIndex surprises.' - requires: ['core', 'table-features', 'client-vs-server'] - sources: - - 'TanStack/table:docs/framework/react/guide/pagination.md' - - 'TanStack/table:packages/table-core/src/features/row-pagination' - - 'TanStack/table:examples/react/pagination' - - - name: 'Row Pinning' - slug: row-pinning - type: sub-skill - domain: feature-plugins - path: 'packages/table-core/skills/row-pinning/SKILL.md' - package: 'packages/table-core' - description: 'Pin stable row IDs into top/center/bottom collections with rowPinningFeature and keepPinnedRows. Covers getRowId, filtering/pagination visibility, explicit region rendering, and renderer-owned sticky CSS.' - requires: ['core', 'table-features'] - sources: - - 'TanStack/table:docs/framework/react/guide/row-pinning.md' - - 'TanStack/table:packages/table-core/src/features/row-pinning' - - 'TanStack/table:examples/react/row-pinning' - - - name: 'Cell Selection' - slug: cell-selection - type: sub-skill - domain: feature-plugins - path: 'packages/table-core/skills/cell-selection/SKILL.md' - package: 'packages/table-core' - description: 'Select, add, and subtract rectangular cell ranges with cellSelectionFeature: ordered include/exclude operations, modifier dragging, final positive bounds, selection edges, and render-order resolution under pinning. Load for spreadsheet-style or “select all except” behavior.' - requires: ['core', 'table-features'] - sources: - - 'TanStack/table:docs/framework/react/guide/cell-selection.md' - - 'TanStack/table:packages/table-core/src/features/cell-selection' - - 'TanStack/table:examples/react/cell-selection' - - - name: 'Cell Spanning' - slug: cell-spanning - type: sub-skill - domain: feature-plugins - path: 'packages/table-core/skills/cell-spanning/SKILL.md' - package: 'packages/table-core' - description: 'Merge adjacent body cells with cellSpanningFeature: value-based rowSpan via spanRows, per-row colSpan via spanColumns, and the covered-cell convention where a span of 0 means skip the cell. Load for merged grids, spans lost after sorting or paging, or ragged rows.' - requires: ['core', 'table-features'] - sources: - - 'TanStack/table:docs/framework/react/guide/cell-spanning.md' - - 'TanStack/table:packages/table-core/src/features/cell-spanning' - - 'TanStack/table:examples/react/cell-spanning' - - - name: 'Row Selection' - slug: row-selection - type: sub-skill - domain: feature-plugins - path: 'packages/table-core/skills/row-selection/SKILL.md' - package: 'packages/table-core' - description: 'Maintain rowSelection ID state with stable getRowId, single/multi/subrow rules, current/filtered/grouped selected models, and manual-pagination semantics. Load when selected IDs outlive loaded Row objects or data removal.' - requires: ['core', 'table-features'] - sources: - - 'TanStack/table:docs/framework/react/guide/row-selection.md' - - 'TanStack/table:packages/table-core/src/features/row-selection' - - 'TanStack/table:examples/react/row-selection' - - - name: 'Sorting' - slug: sorting - type: sub-skill - domain: feature-plugins - path: 'packages/table-core/skills/sorting/SKILL.md' - package: 'packages/table-core' - description: 'Sort with rowSortingFeature, sortedRowModel, sortFns, multi-sort/removal options, sortUndefined, and manualSorting. Covers comparator direction, incoming server order, and explicit product sorting cycles.' - requires: ['core', 'table-features', 'client-vs-server'] - sources: - - 'TanStack/table:docs/framework/react/guide/sorting.md' - - 'TanStack/table:packages/table-core/src/features/row-sorting' - - 'TanStack/table:examples/react/sorting' - - - name: 'React Getting Started' + path: packages/table-core/skills/migrate-v8-to-v9/SKILL.md + package: packages/table-core + 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. + 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 + references: + - references/architecture.md + - references/state.md + - references/feature-apis.md + - references/typescript.md + - name: React Getting Started slug: getting-started type: framework domain: framework-adapters - path: 'packages/react-table/skills/getting-started/SKILL.md' - package: 'packages/react-table' - description: 'Create a TanStack React Table v9 table with useTable, tableFeatures, stable data/columns, header and row models, and FlexRender/flexRender. Load for a first React table or when adapting a kitchen-sink example without importing every feature.' + path: packages/react-table/skills/getting-started/SKILL.md + package: packages/react-table + 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. requires: - ['@tanstack/table-core#core', '@tanstack/table-core#table-features'] - sources: - - 'TanStack/table:docs/framework/react/guide/migrating.md' - - 'TanStack/table:examples/react/basic-use-table' - - 'TanStack/table:packages/react-table/src/index.ts' - - - name: 'React Table State' + - '@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 + references: + - references/create-table-hook.md + - references/with-tanstack-query.md + - references/with-tanstack-virtual.md + - name: React Table State slug: table-state type: framework domain: framework-adapters - path: 'packages/react-table/skills/table-state/SKILL.md' - package: 'packages/react-table' - description: 'Read and own React Table v9 state with selected table.state, useTable selectors, table.Subscribe/Subscribe, table.atoms, table.store, controlled state plus on*Change, and external TanStack Store atoms. Includes React Compiler builder-method subscription foot-guns.' - requires: ['@tanstack/table-core#core', 'getting-started'] - 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' - - - name: 'React Migrate v8 to v9' - slug: migrate-v8-to-v9 - type: lifecycle - domain: framework-adapters - path: 'packages/react-table/skills/migrate-v8-to-v9/SKILL.md' - package: 'packages/react-table' - description: 'Migrate @tanstack/react-table from v8 useReactTable to v9 useTable, explicit tableFeatures, create*RowModel slots, atomic state, FlexRender/Subscribe, helper changes, and composable tables. Treat useLegacyTable only as a deprecated bridge when already present.' + path: packages/react-table/skills/table-state/SKILL.md + package: packages/react-table + description: + Read and control Table v9 state in react. Use for tracked reads, + subscriptions, controlled slices, and framework-specific reactive + boundaries. requires: - [ - '@tanstack/table-core#migrate-v8-to-v9', - 'getting-started', - 'table-state', - ] - sources: - - 'TanStack/table:docs/framework/react/guide/migrating.md' - - 'TanStack/table:packages/react-table/src/index.ts' - - 'TanStack/table:examples/react/basic-use-table' - - 'TanStack/table:packages/react-table/src/legacy.ts' - - - name: 'React createTableHook' - slug: create-table-hook - type: framework - domain: framework-adapters - path: 'packages/react-table/skills/create-table-hook/SKILL.md' - package: 'packages/react-table' - description: 'Create an app-level React table factory with createTableHook, useAppTable, createAppColumnHelper, shared features/defaults, optional component registries, AppTable/AppCell/AppHeader wrappers, and typed context hooks. Covers scoped contexts, HMR circular imports, and context over prop drilling.' - requires: ['@tanstack/table-core#core', 'getting-started', 'table-state'] - sources: - - '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' - - - name: 'React with TanStack Query' - slug: with-tanstack-query - type: composition + - '@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 + references: + - references/reactivity.md + - name: React Migrate v8 to v9 + slug: migrate-v8-to-v9 + type: migration domain: framework-adapters - path: 'packages/react-table/skills/with-tanstack-query/SKILL.md' - package: 'packages/react-table' - description: 'Compose React Table v9 with TanStack Query for server filtering, sorting, pagination, and infinite data. Covers table state in query keys, manual* boundaries, server counts, previous data, and using query results directly rather than duplicating state.' + path: packages/react-table/skills/migrate-v8-to-v9/SKILL.md + package: packages/react-table + description: Migrate react Table v8 to v9. Audit framework construction, + rendering, state, and app hooks, with shared API changes in the core + migration skill. requires: - [ - '@tanstack/table-core#client-vs-server', - 'getting-started', - 'table-state', - ] - sources: - - 'TanStack/table:examples/react/with-tanstack-query' - - 'TanStack/table:examples/react/virtualized-infinite-scrolling' - - 'TanStack/table:docs/framework/react/guide/pagination.md' - - - name: 'React with TanStack Virtual' - slug: with-tanstack-virtual - type: composition - domain: framework-adapters - path: 'packages/react-table/skills/with-tanstack-virtual/SKILL.md' - package: 'packages/react-table' - description: 'Virtualize final React Table row or column models with TanStack Virtual. Covers scroll elements, stable row keys, data-index measurement, dynamic heights, sticky headers/columns, grid/flex geometry, infinite fetching, and Virtual as renderer composition rather than a Table feature.' - requires: ['@tanstack/table-core#core', 'getting-started', 'table-state'] - sources: - - 'TanStack/table:docs/framework/react/guide/virtualization.md' - - 'TanStack/table:examples/react/virtualized-rows' - - 'TanStack/table:examples/react/virtualized-columns' - - 'TanStack/table:examples/react/virtualized-infinite-scrolling' - - - name: 'Preact Getting Started' + - '@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 + references: + - references/adapter-migration.md + - name: Preact Getting Started slug: getting-started type: framework domain: framework-adapters - path: 'packages/preact-table/skills/getting-started/SKILL.md' - package: 'packages/preact-table' - description: 'Create a native @tanstack/preact-table v9 table with useTable, tableFeatures, stable inputs, and Preact render helpers. Load when replacing @tanstack/react-table through preact/compat or starting a Preact table.' + path: packages/preact-table/skills/getting-started/SKILL.md + package: packages/preact-table + 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. requires: - ['@tanstack/table-core#core', '@tanstack/table-core#table-features'] - sources: - - 'TanStack/table:docs/framework/preact/guide/migrating.md' - - 'TanStack/table:examples/preact/basic-use-table' - - 'TanStack/table:packages/preact-table/src/index.ts' - - - name: 'Preact Table State' + - '@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 + references: + - references/create-table-hook.md + - references/with-tanstack-query.md + - references/with-tanstack-virtual.md + - name: Preact Table State slug: table-state type: framework domain: framework-adapters - path: 'packages/preact-table/skills/table-state/SKILL.md' - package: 'packages/preact-table' - description: 'Read and own Preact Table state with selected table.state, useTable selectors, table.Subscribe, table.atoms/store, controlled slices, and external Preact Store atoms. Distinguishes current snapshots from reactive subscriptions and avoids React-package imports.' - requires: ['@tanstack/table-core#core', 'getting-started'] - sources: - - 'TanStack/table:docs/framework/preact/guide/table-state.md' - - 'TanStack/table:examples/preact/basic-subscribe' - - 'TanStack/table:packages/preact-table/src/useTable.ts' - - - name: 'Preact Migrate v8 to v9' - slug: migrate-v8-to-v9 - type: lifecycle - domain: framework-adapters - path: 'packages/preact-table/skills/migrate-v8-to-v9/SKILL.md' - package: 'packages/preact-table' - description: 'Move a Preact v8 app from the React adapter/preact/compat to native @tanstack/preact-table v9, useTable, tableFeatures row models, atom-backed state, and current render helpers while applying shared v9 breaking changes.' + path: packages/preact-table/skills/table-state/SKILL.md + package: packages/preact-table + description: + Read and control Table v9 state in preact. Use for tracked reads, + subscriptions, controlled slices, and framework-specific reactive + boundaries. requires: - [ - '@tanstack/table-core#migrate-v8-to-v9', - 'getting-started', - 'table-state', - ] - sources: - - 'TanStack/table:docs/framework/preact/guide/migrating.md' - - 'TanStack/table:packages/preact-table/src/index.ts' - - 'TanStack/table:examples/preact/basic-use-table' - - - name: 'Preact createTableHook' - slug: create-table-hook - type: framework - domain: framework-adapters - path: 'packages/preact-table/skills/create-table-hook/SKILL.md' - package: 'packages/preact-table' - description: 'Create a reusable Preact useAppTable and createAppColumnHelper with shared features/options, optional App component registries, typed table/cell/header context hooks, scoped contexts, and correct provider subscription boundaries.' - requires: ['@tanstack/table-core#core', 'getting-started', 'table-state'] - sources: - - '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' - - - name: 'Preact with TanStack Query' - slug: with-tanstack-query - type: composition + - '@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 + references: + - references/reactivity.md + - name: Preact Migrate v8 to v9 + slug: migrate-v8-to-v9 + type: migration domain: framework-adapters - path: 'packages/preact-table/skills/with-tanstack-query/SKILL.md' - package: 'packages/preact-table' - description: 'Compose native Preact Table with TanStack Query using table state in query keys, already-processed server pages, manual filtering/sorting/pagination, server counts, and Preact-specific query/state APIs.' + path: packages/preact-table/skills/migrate-v8-to-v9/SKILL.md + package: packages/preact-table + description: Migrate preact Table v8 to v9. Audit framework construction, + rendering, state, and app hooks, with shared API changes in the core + migration skill. requires: - [ - '@tanstack/table-core#client-vs-server', - 'getting-started', - 'table-state', - ] - sources: - - 'TanStack/table:examples/preact/with-tanstack-query' - - 'TanStack/table:docs/framework/preact/guide/pagination.md' - - - name: 'Preact with TanStack Virtual' - slug: with-tanstack-virtual - type: composition - domain: framework-adapters - path: 'packages/preact-table/skills/with-tanstack-virtual/SKILL.md' - package: 'packages/preact-table' - description: 'Apply Preact Virtual rendering to the final Preact Table row or column model. Uses the maintained adapter guide and installed source for exact APIs; covers counts, scroll targets, keys, measurements, spacer geometry, and renderer-owned sticky/sizing CSS.' - requires: ['@tanstack/table-core#core', 'getting-started', 'table-state'] - sources: - - 'TanStack/table:docs/framework/preact/guide/virtualization.md' - - 'TanStack/table:packages/preact-table/src/index.ts' - - - name: 'Solid Getting Started' + - '@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 + references: + - references/adapter-migration.md + - name: Solid Getting Started slug: getting-started type: framework domain: framework-adapters - path: 'packages/solid-table/skills/getting-started/SKILL.md' - package: 'packages/solid-table' - description: 'Create a Solid Table v9 table with createTable, explicit tableFeatures, reactive data getters, stable static inputs, and Solid JSX rendering. Load when replacing createSolidTable or adapting React examples.' + path: packages/solid-table/skills/getting-started/SKILL.md + package: packages/solid-table + 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. requires: - ['@tanstack/table-core#core', '@tanstack/table-core#table-features'] - sources: - - 'TanStack/table:docs/framework/solid/guide/migrating.md' - - 'TanStack/table:examples/solid/basic-use-table' - - 'TanStack/table:packages/solid-table/src/index.tsx' - - - name: 'Solid Table State' + - '@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 + references: + - references/create-table-hook.md + - references/with-tanstack-query.md + - references/with-tanstack-virtual.md + - name: Solid Table State slug: table-state type: framework domain: framework-adapters - path: 'packages/solid-table/skills/table-state/SKILL.md' - package: 'packages/solid-table' - description: 'Read Solid-backed table.atoms inside JSX, createMemo, createEffect, or table.Subscribe; own slices with native signals or external TanStack Store atoms; and apply value-or-updater callbacks without React-style rerender workarounds.' - requires: ['@tanstack/table-core#core', 'getting-started'] - 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' - - - name: 'Solid Migrate v8 to v9' - slug: migrate-v8-to-v9 - type: lifecycle - domain: framework-adapters - path: 'packages/solid-table/skills/migrate-v8-to-v9/SKILL.md' - package: 'packages/solid-table' - description: 'Migrate Solid from v8 createSolidTable to v9 createTable, explicit features and row-model slots, signal-backed atoms, current helpers/rendering, prototype methods, sortFn names, and logical start/end pinning.' + path: packages/solid-table/skills/table-state/SKILL.md + package: packages/solid-table + description: + Read and control Table v9 state in solid. Use for tracked reads, + subscriptions, controlled slices, and framework-specific reactive + boundaries. requires: - [ - '@tanstack/table-core#migrate-v8-to-v9', - 'getting-started', - 'table-state', - ] - sources: - - 'TanStack/table:docs/framework/solid/guide/migrating.md' - - 'TanStack/table:packages/solid-table/src/index.tsx' - - 'TanStack/table:examples/solid/basic-use-table' - - - name: 'Solid createTableHook' - slug: create-table-hook - type: framework - domain: framework-adapters - path: 'packages/solid-table/skills/create-table-hook/SKILL.md' - package: 'packages/solid-table' - description: 'Create a reusable Solid createAppTable/createAppColumnHelper with shared features/defaults, reactive per-table getters, optional App component registries, and typed context hooks for registered table/cell/header UI.' - requires: ['@tanstack/table-core#core', 'getting-started', 'table-state'] - sources: - - 'TanStack/table:docs/framework/solid/guide/composable-tables.md' - - 'TanStack/table:examples/solid/composable-tables' - - 'TanStack/table:packages/solid-table/src/createTableHook.tsx' - - - name: 'Solid with TanStack Query' - slug: with-tanstack-query - type: composition + - '@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 + references: + - references/reactivity.md + - name: Solid Migrate v8 to v9 + slug: migrate-v8-to-v9 + type: migration domain: framework-adapters - path: 'packages/solid-table/skills/with-tanstack-query/SKILL.md' - package: 'packages/solid-table' - description: 'Compose Solid Query reactive options with Solid Table manual processing. Covers tracked query-key signals, query result getters, server counts, and avoiding React Query patterns or duplicated data state.' + path: packages/solid-table/skills/migrate-v8-to-v9/SKILL.md + package: packages/solid-table + description: Migrate solid Table v8 to v9. Audit framework construction, + rendering, state, and app hooks, with shared API changes in the core + migration skill. requires: - [ - '@tanstack/table-core#client-vs-server', - 'getting-started', - 'table-state', - ] - sources: - - 'TanStack/table:examples/solid/with-tanstack-query' - - 'TanStack/table:docs/framework/solid/guide/pagination.md' - - - name: 'Solid with TanStack Virtual' - slug: with-tanstack-virtual - type: composition - domain: framework-adapters - path: 'packages/solid-table/skills/with-tanstack-virtual/SKILL.md' - package: 'packages/solid-table' - description: 'Virtualize Solid Table row/column models and infinite Query data with reactive counts, scroll targets, stable keys, dynamic measurement, transforms, sticky regions, and grid/flex sizing.' - requires: ['@tanstack/table-core#core', 'getting-started', 'table-state'] - sources: - - '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' - - - name: 'Svelte Getting Started' + - '@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 + references: + - references/adapter-migration.md + - name: Svelte Getting Started slug: getting-started type: framework domain: framework-adapters - path: 'packages/svelte-table/skills/getting-started/SKILL.md' - package: 'packages/svelte-table' - description: 'Create a Svelte 5 TanStack Table v9 table with createTable, explicit tableFeatures, rune-backed data getters, stable static inputs, FlexRender, and headless markup. Load when replacing createSvelteTable or pre-rune patterns.' + path: packages/svelte-table/skills/getting-started/SKILL.md + package: packages/svelte-table + 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. requires: - ['@tanstack/table-core#core', '@tanstack/table-core#table-features'] - sources: - - 'TanStack/table:docs/framework/svelte/guide/migrating.md' - - 'TanStack/table:examples/svelte/basic-create-table' - - 'TanStack/table:packages/svelte-table/src/index.ts' - - - name: 'Svelte Table State' + - '@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 + references: + - references/create-table-hook.md + - references/with-tanstack-query.md + - references/with-tanstack-virtual.md + - name: Svelte Table State slug: table-state type: framework domain: framework-adapters - path: 'packages/svelte-table/skills/table-state/SKILL.md' - package: 'packages/svelte-table' - description: 'Use Svelte 5 rune-aware table atoms and stores, $derived projections, reactive option getters, controlled $state or createTableState slices, external atoms, and auto-reset behavior without broad invalidation or snapshot mismatches.' - requires: ['@tanstack/table-core#core', 'getting-started'] - 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' - - - name: 'Svelte Migrate v8 to v9' - slug: migrate-v8-to-v9 - type: lifecycle - domain: framework-adapters - path: 'packages/svelte-table/skills/migrate-v8-to-v9/SKILL.md' - package: 'packages/svelte-table' - description: 'Complete Svelte v8-to-v9 migration reference: Svelte 5, createTable, beta.59 selector removal, explicit features and row-model slots, atom/rune state, rendering helpers, prototype methods, type generics, sorting, sizing, selection, and logical pinning.' + path: packages/svelte-table/skills/table-state/SKILL.md + package: packages/svelte-table + description: + Read and control Table v9 state in svelte. Use for tracked reads, + subscriptions, controlled slices, and framework-specific reactive + boundaries. requires: - [ - '@tanstack/table-core#migrate-v8-to-v9', - 'getting-started', - 'table-state', - ] - sources: - - 'TanStack/table:docs/framework/svelte/guide/migrating.md' - - 'TanStack/table:packages/svelte-table/src/index.ts' - - 'TanStack/table:examples/svelte/basic-create-table' - - - name: 'Svelte createTableHook' - slug: create-table-hook - type: framework - domain: framework-adapters - path: 'packages/svelte-table/skills/create-table-hook/SKILL.md' - package: 'packages/svelte-table' - description: "Define a Svelte createAppTable/createAppColumnHelper using the adapter's rune-capable createTableHook implementation, shared features/defaults, reactive per-table getters, optional App component registries, and typed table/cell/header context hooks." - requires: ['@tanstack/table-core#core', 'getting-started', 'table-state'] - sources: - - 'TanStack/table:docs/framework/svelte/guide/composable-tables.md' - - 'TanStack/table:examples/svelte/composable-tables' - - 'TanStack/table:packages/svelte-table/src/createTableHook.svelte.ts' - - - name: 'Svelte with TanStack Query' - slug: with-tanstack-query - type: composition + - '@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 + references: + - references/reactivity.md + - name: Svelte Migrate v8 to v9 + slug: migrate-v8-to-v9 + type: migration domain: framework-adapters - path: 'packages/svelte-table/skills/with-tanstack-query/SKILL.md' - package: 'packages/svelte-table' - description: 'Compose Svelte Query with Svelte Table manual filtering, sorting, and pagination using reactive query inputs, query-result data getters, server counts, and a single source of server-data truth.' + path: packages/svelte-table/skills/migrate-v8-to-v9/SKILL.md + package: packages/svelte-table + description: Migrate svelte Table v8 to v9. Audit framework construction, + rendering, state, and app hooks, with shared API changes in the core + migration skill. requires: - [ - '@tanstack/table-core#client-vs-server', - 'getting-started', - 'table-state', - ] - sources: - - 'TanStack/table:examples/svelte/with-tanstack-query' - - 'TanStack/table:docs/framework/svelte/guide/pagination.md' - - - name: 'Svelte with TanStack Virtual' - slug: with-tanstack-virtual - type: composition - domain: framework-adapters - path: 'packages/svelte-table/skills/with-tanstack-virtual/SKILL.md' - package: 'packages/svelte-table' - description: 'Virtualize Svelte Table final row or column models with reactive counts and scroll targets, stable keys, dynamic measurement, absolute transforms, sticky regions, grid/flex sizing, and infinite data.' - requires: ['@tanstack/table-core#core', 'getting-started', 'table-state'] - sources: - - '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' - - - name: 'Vue Getting Started' + - '@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 + references: + - references/adapter-migration.md + - name: Vue Getting Started slug: getting-started type: framework domain: framework-adapters - path: 'packages/vue-table/skills/getting-started/SKILL.md' - package: 'packages/vue-table' - description: 'Create a Vue TanStack Table v9 table with useTable, explicit tableFeatures, stable columns/features, reactive ref or computed data, and Vue template/render helpers without destructuring reactive snapshots.' + path: packages/vue-table/skills/getting-started/SKILL.md + package: packages/vue-table + 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. requires: - ['@tanstack/table-core#core', '@tanstack/table-core#table-features'] - sources: - - 'TanStack/table:docs/framework/vue/guide/migrating.md' - - 'TanStack/table:examples/vue/basic-use-table' - - 'TanStack/table:packages/vue-table/src/index.ts' - - - name: 'Vue Table State' + - '@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 + references: + - references/create-table-hook.md + - references/with-tanstack-query.md + - references/with-tanstack-virtual.md + - name: Vue Table State slug: table-state type: framework domain: framework-adapters - path: 'packages/vue-table/skills/table-state/SKILL.md' - package: 'packages/vue-table' - description: 'Read Vue-backed table.atoms/store in templates, computed, watch, or table.Subscribe; own slices with refs/computed or external Vue Store atoms; and apply updater callbacks while preserving reactive option shapes.' - requires: ['@tanstack/table-core#core', 'getting-started'] - 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' - - - name: 'Vue Migrate v8 to v9' - slug: migrate-v8-to-v9 - type: lifecycle - domain: framework-adapters - path: 'packages/vue-table/skills/migrate-v8-to-v9/SKILL.md' - package: 'packages/vue-table' - description: 'Migrate Vue v8 construction, implicit features, row-model options, state, helpers, rendering, instance methods, sorting names, meta typing, and physical pinning to the Vue v9 useTable architecture.' + path: packages/vue-table/skills/table-state/SKILL.md + package: packages/vue-table + description: Read and control Table v9 state in vue. Use for tracked reads, + subscriptions, controlled slices, and framework-specific reactive + boundaries. requires: - [ - '@tanstack/table-core#migrate-v8-to-v9', - 'getting-started', - 'table-state', - ] - sources: - - 'TanStack/table:docs/framework/vue/guide/migrating.md' - - 'TanStack/table:packages/vue-table/src/index.ts' - - 'TanStack/table:examples/vue/basic-use-table' - - - name: 'Vue createTableHook' - slug: create-table-hook - type: framework - domain: framework-adapters - path: 'packages/vue-table/skills/create-table-hook/SKILL.md' - package: 'packages/vue-table' - description: 'Create a reusable Vue useAppTable/createAppColumnHelper with shared features/defaults, reactive per-table options, optional component registries, dynamic App wrappers, typed context hooks, and explicit types that break circular inference.' - requires: ['@tanstack/table-core#core', 'getting-started', 'table-state'] - sources: - - 'TanStack/table:docs/framework/vue/guide/composable-tables.md' - - 'TanStack/table:examples/vue/composable-tables' - - 'TanStack/table:packages/vue-table/src/createTableHook.ts' - - - name: 'Vue with TanStack Query' - slug: with-tanstack-query - type: composition + - '@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 + references: + - references/reactivity.md + - name: Vue Migrate v8 to v9 + slug: migrate-v8-to-v9 + type: migration domain: framework-adapters - path: 'packages/vue-table/skills/with-tanstack-query/SKILL.md' - package: 'packages/vue-table' - description: 'Compose reactive Vue Query keys and results with Vue Table manual row processing, refs/computed state, server counts, and already-processed pages without duplicating query data into a drifting local ref.' + path: packages/vue-table/skills/migrate-v8-to-v9/SKILL.md + package: packages/vue-table + description: Migrate vue Table v8 to v9. Audit framework construction, + rendering, state, and app hooks, with shared API changes in the core + migration skill. requires: - [ - '@tanstack/table-core#client-vs-server', - 'getting-started', - 'table-state', - ] - sources: - - 'TanStack/table:examples/vue/with-tanstack-query' - - 'TanStack/table:docs/framework/vue/guide/pagination.md' - - - name: 'Vue with TanStack Virtual' - slug: with-tanstack-virtual - type: composition - domain: framework-adapters - path: 'packages/vue-table/skills/with-tanstack-virtual/SKILL.md' - package: 'packages/vue-table' - description: 'Virtualize Vue Table final row or column models with reactive counts/scroll targets, stable keys, measurement, spacer geometry, sticky CSS, grid/flex widths, and infinite server data.' - requires: ['@tanstack/table-core#core', 'getting-started', 'table-state'] - sources: - - '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' - - - name: 'Angular Getting Started' + - '@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 + references: + - references/adapter-migration.md + - name: Angular Getting Started slug: getting-started type: framework domain: framework-adapters - path: 'packages/angular-table/skills/getting-started/SKILL.md' - package: 'packages/angular-table' - description: 'Create an Angular TanStack Table v9 table with injectTable inside injection context, explicit stable tableFeatures/columns, signal-backed data, and FlexRender structural directives or helpers.' + path: packages/angular-table/skills/getting-started/SKILL.md + package: packages/angular-table + 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. requires: - ['@tanstack/table-core#core', '@tanstack/table-core#table-features'] - sources: - - 'TanStack/table:docs/framework/angular/guide/migrating.md' - - 'TanStack/table:docs/framework/angular/guide/rendering.md' - - 'TanStack/table:examples/angular/basic-inject-table' - - 'TanStack/table:packages/angular-table/src/index.ts' - - - name: 'Angular Table State' + - '@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 + references: + - references/create-table-hook.md + - references/with-tanstack-query.md + - references/with-tanstack-virtual.md + - name: Angular Table State slug: table-state type: framework domain: framework-adapters - path: 'packages/angular-table/skills/table-state/SKILL.md' - package: 'packages/angular-table' - description: 'Use Angular-signal-backed table.atoms, direct template reads, computed selectors, controlled signals, value-or-updater callbacks, and external Angular Store atoms while accounting for injectTable initializer reruns.' - requires: ['@tanstack/table-core#core', 'getting-started'] - 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' - - - name: 'Angular Migrate v8 to v9' - slug: migrate-v8-to-v9 - type: lifecycle - domain: framework-adapters - path: 'packages/angular-table/skills/migrate-v8-to-v9/SKILL.md' - package: 'packages/angular-table' - description: 'Migrate createAngularTable v8 code to injectTable v9 in injection context, tableFeatures row models, signal-backed state, stable reactive initializers, current FlexRender directives, helpers, prototype methods, sorting, and logical pinning.' + path: packages/angular-table/skills/table-state/SKILL.md + package: packages/angular-table + description: + Read and control Table v9 state in angular. Use for tracked reads, + subscriptions, controlled slices, and framework-specific reactive + boundaries. requires: - [ - '@tanstack/table-core#migrate-v8-to-v9', - 'getting-started', - 'table-state', - ] - sources: - - 'TanStack/table:docs/framework/angular/guide/migrating.md' - - 'TanStack/table:packages/angular-table/src/index.ts' - - 'TanStack/table:examples/angular/basic-inject-table' - - - name: 'Angular createTableHook' - slug: create-table-hook - type: framework - domain: framework-adapters - path: 'packages/angular-table/skills/create-table-hook/SKILL.md' - package: 'packages/angular-table' - description: 'Create an Angular injectAppTable/createAppColumnHelper abstraction with shared features/defaults, registered components, injectTableContext/injectTableCellContext/injectTableHeaderContext, and correct FlexRender component versus function handling.' - requires: ['@tanstack/table-core#core', 'getting-started', 'table-state'] - sources: - - 'TanStack/table:docs/framework/angular/guide/composable-tables.md' - - 'TanStack/table:examples/angular/composable-tables' - - 'TanStack/table:packages/angular-table/src/helpers/createTableHook.ts' - - - name: 'Angular with TanStack Query' - slug: with-tanstack-query - type: composition + - '@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 + references: + - references/reactivity.md + - name: Angular Migrate v8 to v9 + slug: migrate-v8-to-v9 + type: migration domain: framework-adapters - path: 'packages/angular-table/skills/with-tanstack-query/SKILL.md' - package: 'packages/angular-table' - description: 'Compose Angular Query with signal-owned Table filtering, sorting, and pagination state. Covers reactive query options/keys, manual row-model boundaries, direct query data, server row/page counts, and injection context.' + path: packages/angular-table/skills/migrate-v8-to-v9/SKILL.md + package: packages/angular-table + description: Migrate angular Table v8 to v9. Audit framework construction, + rendering, state, and app hooks, with shared API changes in the core + migration skill. requires: - [ - '@tanstack/table-core#client-vs-server', - 'getting-started', - 'table-state', - ] - sources: - - 'TanStack/table:examples/angular/with-tanstack-query' - - 'TanStack/table:docs/framework/angular/guide/table-state.md' - - 'TanStack/table:docs/framework/angular/guide/pagination.md' - - - name: 'Angular with TanStack Virtual' - slug: with-tanstack-virtual - type: composition - domain: framework-adapters - path: 'packages/angular-table/skills/with-tanstack-virtual/SKILL.md' - package: 'packages/angular-table' - description: 'Virtualize Angular Table final row or column models inside the correct injection/reactive lifecycle. Covers signal counts, scroll elements, keys, measurement, transforms, sticky regions, grid/flex sizing, and infinite data.' - requires: ['@tanstack/table-core#core', 'getting-started', 'table-state'] - sources: - - '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' - - - name: 'Lit Getting Started' + - '@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 + references: + - references/adapter-migration.md + - name: Lit Getting Started slug: getting-started type: framework domain: framework-adapters - path: 'packages/lit-table/skills/getting-started/SKILL.md' - package: 'packages/lit-table' - description: 'Create a Lit TanStack Table v9 table with a stable TableController host field, explicit tableFeatures, controller.table(options, selector) during render, and headless Lit templates.' + path: packages/lit-table/skills/getting-started/SKILL.md + package: packages/lit-table + 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. requires: - ['@tanstack/table-core#core', '@tanstack/table-core#table-features'] - sources: - - 'TanStack/table:docs/framework/lit/guide/migrating.md' - - 'TanStack/table:examples/lit/basic-table-controller' - - 'TanStack/table:packages/lit-table/src/index.ts' - - - name: 'Lit Table State' + - '@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 + references: + - references/create-table-hook.md + - references/with-tanstack-virtual.md + - name: Lit Table State slug: table-state type: framework domain: framework-adapters - path: 'packages/lit-table/skills/table-state/SKILL.md' - package: 'packages/lit-table' - description: 'Use TableController-selected table.state, table.atoms/store, stable table.subscribe selectors, controlled reactive properties plus on*Change, and external TanStack Store atoms while preserving Lit host update behavior.' - requires: ['@tanstack/table-core#core', 'getting-started'] - 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' - - - name: 'Lit Migrate v8 to v9' + path: packages/lit-table/skills/table-state/SKILL.md + package: packages/lit-table + description: Read and control Table v9 state in lit. Use for tracked reads, + subscriptions, controlled slices, and framework-specific reactive + boundaries. + 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 + references: + - references/reactivity.md + - name: Lit Migrate v8 to v9 slug: migrate-v8-to-v9 - type: lifecycle + type: migration domain: framework-adapters - path: 'packages/lit-table/skills/migrate-v8-to-v9/SKILL.md' - package: 'packages/lit-table' - description: 'Migrate Lit v8 controller construction to a stable v9 TableController plus controller.table(options), explicit feature/row-model slots, selected state, helpers, prototype methods, sortFn names, and logical start/end pinning.' + path: packages/lit-table/skills/migrate-v8-to-v9/SKILL.md + package: packages/lit-table + description: Migrate lit Table v8 to v9. Audit framework construction, + rendering, state, and app hooks, with shared API changes in the core + migration skill. requires: - [ - '@tanstack/table-core#migrate-v8-to-v9', - 'getting-started', - 'table-state', - ] - sources: - - 'TanStack/table:docs/framework/lit/guide/migrating.md' - - 'TanStack/table:packages/lit-table/src/index.ts' - - 'TanStack/table:examples/lit/basic-table-controller' - - - name: 'Lit createTableHook' - slug: create-table-hook - type: framework - domain: framework-adapters - path: 'packages/lit-table/skills/create-table-hook/SKILL.md' - package: 'packages/lit-table' - description: 'Create a reusable Lit useAppTable/createAppColumnHelper layer with host-backed controllers, shared features/defaults, typed cell/header renderers, and useTableContext for custom-element controls instead of prop drilling.' - requires: ['@tanstack/table-core#core', 'getting-started', 'table-state'] - sources: - - 'TanStack/table:docs/framework/lit/guide/composable-tables.md' - - 'TanStack/table:examples/lit/composable-tables' - - 'TanStack/table:packages/lit-table/src/createTableHook.ts' - - - name: 'Lit with TanStack Virtual' - slug: with-tanstack-virtual - type: composition - domain: framework-adapters - path: 'packages/lit-table/skills/with-tanstack-virtual/SKILL.md' - package: 'packages/lit-table' - description: 'Virtualize Lit Table final row or column models with host lifecycle-aware virtualizers, stable counts/keys, dynamic measurement, scroll geometry, sticky CSS, grid/flex sizing, and infinite data.' - requires: ['@tanstack/table-core#core', 'getting-started', 'table-state'] - sources: - - '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' - - - name: 'Octane Getting Started' + - '@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 + references: + - references/adapter-migration.md + - name: Octane Getting Started slug: getting-started type: framework domain: framework-adapters - path: 'packages/octane-table/skills/getting-started/SKILL.md' - package: 'packages/octane-table' - description: 'Create an @tanstack/octane-table v9 table with useTable, tableFeatures, stable inputs, TSRX component bodies, keyed @for rendering, and FlexRender. Load when starting an Octane table or translating a React/Preact example without changing its behavior.' + path: packages/octane-table/skills/getting-started/SKILL.md + package: packages/octane-table + description: + Create and render Table v9 with the octane adapter. Route reusable + createTableHook components, and framework setup; use table-state for + reactive ownership. requires: - ['@tanstack/table-core#core', '@tanstack/table-core#table-features'] - 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' - - - name: 'Octane Table State' + - '@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 + references: + - references/create-table-hook.md + - name: Octane Table State slug: table-state type: framework domain: framework-adapters - path: 'packages/octane-table/skills/table-state/SKILL.md' - package: 'packages/octane-table' - description: 'Read and own Octane Table v9 state with useTable selectors, table.state, table.Subscribe, controlled slices, and @tanstack/octane-store atoms. Load for state ownership, render timing, snapshot-versus-subscription bugs, or fine-grained rendering.' - requires: ['@tanstack/table-core#core', 'getting-started'] - 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' - - - name: 'Octane createTableHook' - slug: create-table-hook - type: framework - domain: framework-adapters - path: 'packages/octane-table/skills/create-table-hook/SKILL.md' - package: 'packages/octane-table' - description: 'Create reusable Octane table infrastructure with createTableHook, useAppTable, createAppColumnHelper, registered components, stable App wrappers, and typed context hooks. Load for recurring conventions, scoped contexts, or prop drilling.' - requires: ['@tanstack/table-core#core', 'getting-started', 'table-state'] - sources: - - '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' - - - name: 'Ember Getting Started' + path: packages/octane-table/skills/table-state/SKILL.md + package: packages/octane-table + description: + Read and control Table v9 state in octane. Use for tracked reads, + subscriptions, controlled slices, and framework-specific reactive + boundaries. + 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 + references: + - references/reactivity.md + - name: Ember Getting Started slug: getting-started type: framework domain: framework-adapters - path: 'packages/ember-table/skills/getting-started/SKILL.md' - package: 'packages/ember-table' - description: "Create a TanStack Ember Table v9 table with useTable, a tracked options thunk, stable tableFeatures and columns, .gts templates, FlexRenderCell/Header/Footer, and correctly bound template helpers. Load for first-table setup, Glimmer reactivity, component cell renderers, or adapting another framework's example to Ember." + path: packages/ember-table/skills/getting-started/SKILL.md + package: packages/ember-table + description: + Create and render Table v9 with the ember adapter. Route reusable + createTableHook defaults, and framework setup; use table-state for + reactive ownership. requires: - ['@tanstack/table-core#core', '@tanstack/table-core#table-features'] - 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' - - - name: 'Ember Table State' + - '@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 + references: + - references/create-table-hook.md + - name: Ember Table State slug: table-state type: framework domain: framework-adapters - path: 'packages/ember-table/skills/table-state/SKILL.md' - package: 'packages/ember-table' - description: 'Read, track, initialize, control, and reset TanStack Ember Table v9 state through Glimmer-reactive table APIs, baseAtoms, atoms, store, Ember createAtom, or @tracked state plus on*Change. Load for ownership precedence, updater callbacks, stale template state, options-thunk reactivity, or incorrect table.Subscribe/store.subscribe usage.' - requires: ['@tanstack/table-core#core', 'getting-started'] - 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' - - - name: 'Ember createTableHook' - slug: create-table-hook - type: framework - domain: framework-adapters - path: 'packages/ember-table/skills/create-table-hook/SKILL.md' - package: 'packages/ember-table' - description: 'Share TanStack Ember Table v9 features, row-model slots, defaults, and inferred column helpers with createTableHook, createAppTable, createAppColumnHelper, and appFeatures. Load for recurring Ember table conventions, per-table overrides, or confusion with component/context registries from other adapters.' - requires: ['@tanstack/table-core#core', 'getting-started', 'table-state'] - sources: - - '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' - - - name: 'Alpine Getting Started' + path: packages/ember-table/skills/table-state/SKILL.md + package: packages/ember-table + description: + Read and control Table v9 state in ember. Use for tracked reads, + subscriptions, controlled slices, and framework-specific reactive + boundaries. + 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 + references: + - references/reactivity.md + - name: Alpine Getting Started slug: getting-started type: framework domain: framework-adapters - path: 'packages/alpine-table/skills/getting-started/SKILL.md' - package: 'packages/alpine-table' - description: 'Create an Alpine TanStack Table v9 table with createTable, explicit tableFeatures, Alpine.reactive data/getters, real x-for/x-text/x-html markup, and renderer-owned styles. Covers why x-html does not initialize nested Alpine directives.' + path: packages/alpine-table/skills/getting-started/SKILL.md + package: packages/alpine-table + description: + Create and render Table v9 with the alpine adapter. Route reusable + createTableHook defaults, and framework setup; use table-state for + reactive ownership. requires: - ['@tanstack/table-core#core', '@tanstack/table-core#table-features'] - 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' - - - name: 'Alpine Table State' + - '@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 + references: + - references/create-table-hook.md + - name: Alpine Table State slug: table-state type: framework domain: framework-adapters - path: 'packages/alpine-table/skills/table-state/SKILL.md' - package: 'packages/alpine-table' - description: 'Read automatically reactive Alpine table APIs directly in bindings; own slices with Alpine.reactive getters plus on*Change or external TanStack Store atoms; and apply updater callbacks without inventing table.Subscribe.' - requires: ['@tanstack/table-core#core', 'getting-started'] - 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' - - - name: 'Alpine createTableHook' - slug: create-table-hook - type: framework - domain: framework-adapters - path: 'packages/alpine-table/skills/create-table-hook/SKILL.md' - package: 'packages/alpine-table' - description: 'Share Alpine tableFeatures, defaults, createAppTable, and createAppColumnHelper with createTableHook. Clarifies that Alpine has no registered component/context registry and interactive reuse belongs in real markup or Alpine.bind bundles.' - requires: ['@tanstack/table-core#core', 'getting-started', 'table-state'] - sources: - - 'TanStack/table:docs/framework/alpine/guide/composable-tables.md' - - 'TanStack/table:examples/alpine/basic-app-table' - - 'TanStack/table:packages/alpine-table/src/createTableHook.ts' - - - name: 'Table Devtools' + path: packages/alpine-table/skills/table-state/SKILL.md + package: packages/alpine-table + description: + Read and control Table v9 state in alpine. Use for tracked reads, + subscriptions, controlled slices, and framework-specific reactive + boundaries. + 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 + references: + - references/reactivity.md + - name: Table Devtools slug: devtools - type: core + type: integration domain: observability - path: 'packages/table-devtools/skills/devtools/SKILL.md' - package: 'packages/table-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 explicit production entrypoints.' - requires: ['@tanstack/table-core#core'] + path: packages/table-devtools/skills/devtools/SKILL.md + package: packages/table-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 explicit production entrypoints. + 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' - - - name: 'React Table Devtools' + - 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 + - name: React Table Devtools slug: devtools - type: framework + type: integration domain: observability - path: 'packages/react-table-devtools/skills/devtools/SKILL.md' - package: 'packages/react-table-devtools' - description: 'Connect React Table v9 instances to Devtools with ReactTableDevtools, useTanStackTableDevtools, or the plugin lifecycle. Covers stable table identity, required unique options.key, cleanup, enabled state, and development-gated exports.' - requires: ['@tanstack/table-core#core', '@tanstack/table-devtools#devtools'] + path: packages/react-table-devtools/skills/devtools/SKILL.md + package: packages/react-table-devtools + description: Connect React Table v9 instances to Devtools with + ReactTableDevtools, useTanStackTableDevtools, or the plugin lifecycle. + Covers stable table identity, required unique options.key, cleanup, + enabled state, and development-gated exports. + 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' - - - name: 'Preact Table Devtools' + - TanStack/table:docs/devtools.md + - TanStack/table:packages/react-table-devtools/src/index.ts + - TanStack/table:packages/react-table-devtools/src/useTanStackTableDevtools.ts + - name: Preact Table Devtools slug: devtools - type: framework + type: integration domain: observability - path: 'packages/preact-table-devtools/skills/devtools/SKILL.md' - package: 'packages/preact-table-devtools' - description: 'Connect native Preact Table instances to Devtools with the Preact component, hook, or plugin lifecycle. Covers correct package imports, required unique options.key, target cleanup, enabled state, and development gating.' - requires: ['@tanstack/table-core#core', '@tanstack/table-devtools#devtools'] + path: packages/preact-table-devtools/skills/devtools/SKILL.md + package: packages/preact-table-devtools + description: + Connect native Preact Table instances to Devtools with the Preact + component, hook, or plugin lifecycle. Covers correct package imports, + required unique options.key, target cleanup, enabled state, and + development gating. + 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' - - - name: 'Solid Table Devtools' + - TanStack/table:docs/devtools.md + - TanStack/table:packages/preact-table-devtools/src/index.ts + - TanStack/table:packages/preact-table-devtools/src/useTanStackTableDevtools.ts + - name: Solid Table Devtools slug: devtools - type: framework + type: integration domain: observability - path: 'packages/solid-table-devtools/skills/devtools/SKILL.md' - package: 'packages/solid-table-devtools' - description: 'Connect Solid Table instances to Devtools in the proper reactive owner using the Solid component, hook, or plugin. Covers required unique options.key, target cleanup, enabled state, and development versus explicit production exports.' - requires: ['@tanstack/table-core#core', '@tanstack/table-devtools#devtools'] + path: packages/solid-table-devtools/skills/devtools/SKILL.md + package: packages/solid-table-devtools + description: + Connect Solid Table instances to Devtools in the proper reactive + owner using the Solid component, hook, or plugin. Covers required unique + options.key, target cleanup, enabled state, and development versus + explicit production exports. + 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' - - - name: 'Vue Table Devtools' + - TanStack/table:docs/devtools.md + - TanStack/table:packages/solid-table-devtools/src/index.ts + - TanStack/table:packages/solid-table-devtools/src/useTanStackTableDevtools.ts + - name: Vue Table Devtools slug: devtools - type: framework + type: integration domain: observability - path: 'packages/vue-table-devtools/skills/devtools/SKILL.md' - package: 'packages/vue-table-devtools' - description: 'Connect Vue Table refs to Devtools with reactive target tracking, required unique options.key, lifecycle cleanup, enabled state, and development-gated component/plugin exports.' - requires: ['@tanstack/table-core#core', '@tanstack/table-devtools#devtools'] + path: packages/vue-table-devtools/skills/devtools/SKILL.md + package: packages/vue-table-devtools + description: + Connect Vue Table refs to Devtools with reactive target tracking, + required unique options.key, lifecycle cleanup, enabled state, and + development-gated component/plugin exports. + 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' - - - name: 'Angular Table Devtools' + - TanStack/table:docs/devtools.md + - TanStack/table:packages/vue-table-devtools/src/index.ts + - TanStack/table:packages/vue-table-devtools/src/useTanStackTableDevtools.ts + - name: Angular Table Devtools slug: devtools - type: framework + type: integration domain: observability - path: 'packages/angular-table-devtools/skills/devtools/SKILL.md' - package: 'packages/angular-table-devtools' - description: 'Register Angular Table instances with injectTanStackTableDevtools inside injection context. Covers reactive options, enabled/undefined tables, required unique options.key, cleanup, Angular isDevMode gating, and explicit production exports.' - requires: ['@tanstack/table-core#core', '@tanstack/table-devtools#devtools'] + path: packages/angular-table-devtools/skills/devtools/SKILL.md + package: packages/angular-table-devtools + description: + Register Angular Table instances with injectTanStackTableDevtools + inside injection context. Covers reactive options, enabled/undefined + tables, required unique options.key, cleanup, Angular isDevMode gating, + and explicit production exports. + 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' - - - name: 'Fuzzy Ranking' + - TanStack/table:docs/devtools.md + - TanStack/table:packages/angular-table-devtools/src/index.ts + - TanStack/table:packages/angular-table-devtools/src/injectTanStackTableDevtools.ts + - name: Fuzzy Ranking slug: fuzzy-ranking type: core domain: utilities - path: 'packages/match-sorter-utils/skills/fuzzy-ranking/SKILL.md' - package: 'packages/match-sorter-utils' - description: 'Rank fuzzy matches with rankItem, filter with RankingInfo.passed, compare saved ranking metadata with compareItems, and configure rankings, thresholds, accessors, bounds, and diacritic handling. Routes TanStack Table filterMeta wiring to filtering skills.' - 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' + path: packages/match-sorter-utils/skills/fuzzy-ranking/SKILL.md + package: packages/match-sorter-utils + description: + Rank fuzzy matches with rankItem, filter with RankingInfo.passed, + compare saved ranking metadata with compareItems, and configure rankings, + thresholds, accessors, bounds, and diacritic handling. Routes TanStack + Table filterMeta wiring to filtering skills. + 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 diff --git a/docs/agent-skills.md b/docs/agent-skills.md index 37da780155..b1ee3d983b 100644 --- a/docs/agent-skills.md +++ b/docs/agent-skills.md @@ -27,14 +27,18 @@ TanStack Table publishes skills inside its packages so the guidance travels with The skills available to your agent depend on which packages your project installs: -| Package | Skills | What they teach | -| ---------------------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `@tanstack/table-core` | `core`, `table-features`, and focused feature skills | Headless table architecture, explicit feature registration, TypeScript, client/server boundaries, migration, and features such as sorting, filtering, grouping, pagination, pinning, sizing, selection, and aggregation | -| `@tanstack/-table` | Framework-specific setup and state skills | Creating, rendering, and controlling a table with your framework adapter; supported adapters also include migration and TanStack Query/Virtual composition skills | -| `@tanstack/table-devtools` and framework devtools adapters | `devtools` | Registering table instances and inspecting features, state, options, rows, and columns | -| `@tanstack/match-sorter-utils` | `fuzzy-ranking` | Fuzzy filtering, ranking metadata, and rank-aware sorting | +| Package | Skills | What they teach | +| ---------------------------------------------------------- | ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `@tanstack/table-core` | `core`, `table-features`, `table-state`, `custom-features`, `migrate-v8-to-v9` | Core architecture, feature registration, shared state ownership, plugin authoring, and migration. Each optional feature has an on-demand reference linked from `table-features`. | +| `@tanstack/-table` | `getting-started`, `table-state`, and migration where supported | Framework setup, rendering, and reactive state. References cover reusable app hooks, advanced reactivity, and maintained Query/Virtual integrations. | +| `@tanstack/table-devtools` and framework devtools adapters | `devtools` | Registering table instances and inspecting features, state, options, rows, and columns | +| `@tanstack/match-sorter-utils` | `fuzzy-ranking` | Fuzzy filtering, ranking metadata, and rank-aware sorting | -Each skill lives under `node_modules//skills//SKILL.md` once the package is installed. Skills can declare prerequisites, so your agent can load the core guidance before a framework or feature-specific skill. +Each skill lives under `node_modules//skills//SKILL.md` once the package is installed. Its `references/` directory contains guidance for specific tasks. For example, row selection lives in `@tanstack/table-core/skills/table-features/references/row-selection.md`. + +The entry point tells the agent when to read each reference. A sorting change loads the sorting guidance; selection, resizing, and other unrelated feature references stay unloaded. Framework state skills load the shared state model and then explain their own reactive reads and updates. + +Intent lists entry points and loads one requested `SKILL.md` at a time. The agent follows its prerequisite instructions and reads relevant references. A React project with core installed has eight Table entry points. Devtools and other installed libraries add their own entries. ## Step 1: Install TanStack Table @@ -89,9 +93,11 @@ You can inspect and load Table skills yourself with the same commands: ```bash npx @tanstack/intent@latest list npx @tanstack/intent@latest load @tanstack/react-table#getting-started -npx @tanstack/intent@latest load @tanstack/table-core#sorting +npx @tanstack/intent@latest load @tanstack/table-core#table-features ``` +For sorting, follow the loaded entry point's link to `references/sorting.md`. The load command resolves relative Markdown links to the installed package, including when your package manager uses nested dependency paths. + If you prefer explicit task-to-skill entries, run `npx @tanstack/intent@latest install --map`. Mapping mode scans your installed intent-enabled packages and writes compact `id`, `run`, and `for` entries into the managed block. ## Step 4: Confirm It's Wired Up @@ -112,6 +118,22 @@ If the agent still falls back to v8 patterns, reopen its config file and confirm Skills are versioned with each package. When you update your TanStack Table packages, the `SKILL.md` files under `node_modules` update with them. No CLI rerun is needed. If you use explicit mappings, rerun `npx @tanstack/intent@latest install --map` after adding another intent-enabled package, such as a Table devtools adapter, or when you want to refresh the mappings. +### Update older skill mappings + +The progressive-disclosure layout replaces individual feature and composition skill IDs with references. If your agent configuration contains the old IDs, update them as follows: + +| Old skill ID | Replacement entry point and reference | +| --------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | +| `@tanstack/table-core#sorting`, `#row-selection`, and the other optional feature skills | `@tanstack/table-core#table-features`, then the matching feature reference | +| `@tanstack/table-core#client-vs-server` | `@tanstack/table-core#table-features`, then `references/client-vs-server.md` | +| `@tanstack/table-core#typescript` or `#api-not-found` | `@tanstack/table-core#core`, then the matching reference | +| `@tanstack/-table#create-table-hook` | The adapter's `getting-started`, then `references/create-table-hook.md` | +| `@tanstack/-table#with-tanstack-query` or `#with-tanstack-virtual` | The adapter's `getting-started`, then the matching integration reference | + +If `package.json#intent.skills` allows individual old skill IDs, run `npx @tanstack/intent@latest install --review` to select their replacements and the prerequisites they need. Package-level permissions include new entry points automatically. Regenerate explicit mappings with `npx @tanstack/intent@latest install --map` after updating permissions. Direct file pointers to moved skills also need their new paths. + +Core state guidance is available as `@tanstack/table-core#table-state`. Adapter state and migration skill IDs remain available. Migration skills retain a complete audit checklist and link to detailed mappings for the APIs your project uses. + ## Using Skills Without the CLI If you'd rather wire skills in yourself, reference them directly from `node_modules` in any agent config file. The minimum your agent needs is a pointer to the relevant file: diff --git a/package.json b/package.json index 21b06aa0c9..1273ffb430 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,8 @@ "test:intent": "intent validate && intent stale", "test:skill-content": "node scripts/validate-skill-content.mjs", "test:skill-snippets": "node scripts/typecheck-skill-snippets.mjs", - "test:skills": "intent validate && pnpm skills:versions:check && pnpm test:skill-content && pnpm test:skill-snippets", + "test:skill-tree": "node scripts/validate-skill-tree.mjs && node --test scripts/tests/skill-tree.test.mjs", + "test:skills": "intent validate && pnpm skills:versions:check && pnpm test:skill-tree && pnpm test:skill-content && pnpm test:skill-snippets", "test:knip": "NODE_OPTIONS='--max-old-space-size=4096' knip", "test:lib": "nx affected --targets=test:lib", "test:lib:dev": "pnpm test:lib && nx watch --all -- pnpm test:lib", @@ -94,6 +95,7 @@ "tsdown": "^0.23.0", "typescript": "6.0.3", "vite": "^8.3.2", - "vitest": "^4.1.11" + "vitest": "^4.1.11", + "yaml": "2.9.0" } } diff --git a/packages/alpine-table/skills/getting-started/SKILL.md b/packages/alpine-table/skills/getting-started/SKILL.md index 9962e238d9..70937cd0cd 100644 --- a/packages/alpine-table/skills/getting-started/SKILL.md +++ b/packages/alpine-table/skills/getting-started/SKILL.md @@ -1,22 +1,25 @@ --- name: getting-started -description: > - Create an Alpine TanStack Table v9 table with createTable, explicit tableFeatures, Alpine.reactive data getters, x-for rendering, and FlexRender through x-html. Load for first-table setup, reactive options, or when nested Alpine directives rendered by x-html do not initialize. +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.2.5' + library_version: 9.2.5 requires: - '@tanstack/table-core#core' - - '@tanstack/table-core#table-features' 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/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 --- -This skill builds on @tanstack/table-core#core and @tanstack/table-core#table-features. +Load `intent load @tanstack/table-core#core` first for the headless model, stable inputs, and column inference. ## Setup @@ -57,52 +60,20 @@ Alpine.start() Render real table structure with `x-for`; use `x-html="FlexRender({ header })"` or `x-html="FlexRender({ cell })"` only for renderer output. -## Core Patterns +## Construction and rendering -### Pass live options through getters +Wrap 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. -Wrap changing data in an `Alpine.reactive({ data })` object and read `local.data` through `get data()`. The property read gives the adapter's effect a dependency to track before it calls `table.setOptions`. +The 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. -### Read table APIs directly in bindings +Build 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. -The adapter returns a reactive proxy. Expressions such as `x-text="table.getRowModel().rows.length"` update without a Subscribe component. +## Read for the task -### Render interaction controls as real markup +- When adding or configuring optional features, load `intent load @tanstack/table-core#table-features` and read only references for the requested behavior. +- For state ownership or reactive reads, read [table-state](../table-state/SKILL.md). +- When tables share features, defaults, or reusable UI, read [create-table-hook](references/create-table-hook.md). -Buttons, inputs, and directives belong in the template. Renderer strings are useful for cell content, but `x-html` does not initialize Alpine directives inside the injected HTML. +## API discovery -## Common Mistakes - -### HIGH Passing a data snapshot - -Wrong: `createTable({ features, columns, data: local.data })` when `local.data` will be replaced. - -Correct: expose `get data() { return local.data }`. - -The adapter tracks option getters; a captured array does not follow later replacements. - -Source: TanStack/table:packages/alpine-table/src/createTable.ts - -### HIGH Interactive directives hidden in x-html - -Wrong: return `''` from a cell renderer. - -Correct: render the button as real template markup and bind the row action there, or use an `Alpine.bind` bundle. - -Alpine does not initialize directives inside content inserted by `x-html`. - -Source: TanStack/table:docs/framework/alpine/guide/composable-tables.md - -### HIGH Expecting Table styling - -Wrong: enable sizing or pinning and assume widths/sticky positioning appear. - -Correct: apply widths, logical offsets, overflow, and sticky CSS in the Alpine template. - -Table exposes state and geometry; it does not own the renderer. - -Source: TanStack/table:docs/overview.md - -## API Discovery - -Inspect `node_modules/@tanstack/alpine-table/dist/index.d.ts` and `createTable.d.ts`. Exact core APIs live under `node_modules/@tanstack/table-core/dist/`. +Inspect `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/`. diff --git a/packages/alpine-table/skills/create-table-hook/SKILL.md b/packages/alpine-table/skills/getting-started/references/create-table-hook.md similarity index 64% rename from packages/alpine-table/skills/create-table-hook/SKILL.md rename to packages/alpine-table/skills/getting-started/references/create-table-hook.md index bc197d5acc..a95ee0cb39 100644 --- a/packages/alpine-table/skills/create-table-hook/SKILL.md +++ b/packages/alpine-table/skills/getting-started/references/create-table-hook.md @@ -1,23 +1,8 @@ ---- -name: create-table-hook -description: > - Share Alpine tableFeatures, defaults, createAppTable, and createAppColumnHelper with createTableHook. Load when multiple Alpine tables repeat infrastructure; unlike JSX adapters, Alpine has no registered table/cell/header component or context registry. -metadata: - type: framework - library: '@tanstack/alpine-table' - framework: alpine - library_version: '9.2.5' -requires: - - '@tanstack/table-core#core' - - getting-started - - table-state -sources: - - 'TanStack/table:docs/framework/alpine/guide/composable-tables.md' - - 'TanStack/table:examples/alpine/basic-app-table' - - 'TanStack/table:packages/alpine-table/src/createTableHook.ts' ---- - -This skill builds on @tanstack/table-core#core plus this package's getting-started and table-state skills. +# Alpine reusable table hooks + +Read 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). + +This reference inherits the version of its owning skill. ## Setup @@ -47,7 +32,7 @@ Alpine.data('peopleTable', () => { }) ``` -## Core Patterns +## Core patterns ### Share infrastructure, keep data local @@ -61,7 +46,7 @@ Use real templates and `Alpine.bind` bundles for interactive reuse. `createTable Columns from `createAppColumnHelper()` know the factory's registered features without userland feature generics. -## Common Mistakes +## Common mistakes ### HIGH Assuming a JSX component registry @@ -73,16 +58,6 @@ The Alpine hook returns only app features, a column helper, and createAppTable. Source: TanStack/table:packages/alpine-table/src/createTableHook.ts -### MEDIUM Abstracting a one-off table - -Wrong: introduce an app factory for one table with no shared conventions. - -Correct: use standalone `createTable` until infrastructure repeats. - -The hook is an application reuse boundary, not required setup. - -Source: TanStack/table:docs/framework/alpine/guide/composable-tables.md - ### HIGH Reactive data captured as a snapshot Wrong: `createAppTable({ columns, data: local.data })` when the array will be replaced. @@ -93,6 +68,12 @@ The app factory delegates to Alpine createTable, whose option effect tracks gett Source: TanStack/table:packages/alpine-table/src/createTable.ts -## API Discovery +## API discovery Inspect `node_modules/@tanstack/alpine-table/dist/createTableHook.d.ts`; do not infer component/context APIs from React, Vue, Solid, Svelte, Angular, or Lit adapters. + +## Sources + +- `TanStack/table:docs/framework/alpine/guide/composable-tables.md` +- `TanStack/table:examples/alpine/basic-app-table` +- `TanStack/table:packages/alpine-table/src/createTableHook.ts` diff --git a/packages/alpine-table/skills/table-state/SKILL.md b/packages/alpine-table/skills/table-state/SKILL.md index 8f9eeaad09..ddabb926a8 100644 --- a/packages/alpine-table/skills/table-state/SKILL.md +++ b/packages/alpine-table/skills/table-state/SKILL.md @@ -1,34 +1,28 @@ --- name: table-state -description: > - Read automatically reactive Alpine table APIs in bindings and own slices with Alpine.reactive getters plus on*Change or external TanStack Store atoms. Load for controlled state, updater callbacks, selector gating, atom precedence, or code incorrectly adding table.Subscribe. +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.2.5' + library_version: 9.2.5 requires: - - '@tanstack/table-core#core' - - getting-started + - '@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' + - TanStack/table:docs/framework/alpine/guide/table-state.md + - TanStack/table:examples/alpine/basic-create-table + - TanStack/table:packages/alpine-table/src/createTable.ts --- -This skill builds on @tanstack/table-core#core and this package's getting-started skill. +Load `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules. -## State Mental Model +Alpine'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. -TanStack Table is primarily a state coordinator. Keep state internal unless another system needs to read, persist, or drive it. Without `initialState`, `atoms`, `state`, or `on[State]Change`, the table owns all registered slices. +## Controlled getter setup -- `table.baseAtoms` are internal writable atoms initialized from resolved initial state. -- `table.atoms` are readonly derived atoms for the active owner of each registered slice. -- `table.store` combines those atoms into one readonly flat store. - -The Alpine adapter proxies the table and subscribes it to the store. Reads inside `x-text`, `x-for`, `x-if`, bound attributes, `x-effect`, or Alpine getters are reactive automatically; event handlers read the current value when invoked. State is feature-based, so missing state or methods usually mean the feature was not registered. Keep `features`, `columns`, and source `data` stable; expose changing reactive data through a getter rather than filtering, mapping, or slicing inside table options. - -## Setup + ```ts import Alpine from 'alpinejs' @@ -36,10 +30,12 @@ import { createTable, rowPaginationFeature, tableFeatures, + type PaginationState, } from '@tanstack/alpine-table' -import type { PaginationState } from '@tanstack/alpine-table' const features = tableFeatures({ rowPaginationFeature }) +const columns = [{ accessorKey: 'name' }] +const data = [{ name: 'Ada' }] Alpine.data('pagedTable', () => { const local = Alpine.reactive<{ pagination: PaginationState }>({ @@ -47,90 +43,35 @@ Alpine.data('pagedTable', () => { }) const table = createTable({ features, - columns: [], - data: [], + columns, + data, state: { get pagination() { return local.pagination }, }, - onPaginationChange: (updater) => { + onPaginationChange: (next) => { local.pagination = - typeof updater === 'function' ? updater(local.pagination) : updater + typeof next === 'function' ? next(local.pagination) : next }, }) - return { table } }) ``` -## Core Patterns - -### Read narrow atoms in bindings - -Use `table.atoms.pagination.get().pageIndex` for a narrow state read. The proxy registers the binding as reactive. - -### Use a selector only to gate broad proxy updates - -The optional second `createTable` argument shallow-compares selected state. Use `() => ({})` only when explicit atom subscriptions handle high-frequency updates such as resizing. - -### Choose one owner per slice - -Use either an external atom through `atoms.pagination` or Alpine-controlled `state.pagination` plus `onPaginationChange`. An external atom wins if both are supplied. - -## Choose State Ownership - -- Prefer internal state and feature APIs for table-local interaction. -- Use `initialState` only for starting/reset values; changing it later does not reset current state. -- Prefer a stable external atom in `atoms` when state is shared. Feature APIs write it directly, so omit `on[State]Change`. -- Use an `Alpine.reactive` value exposed through a getter plus its matching callback for simple controlled state. Resolve raw values and updater functions. - -External atoms take precedence over external `state`, which syncs into the internal base atom. Do not rely on multiple owners. The global v8 `onStateChange` option is gone; subscribe to `table.store` to observe the complete state. - -## Initialize, Update, and Reset - -Prefer feature methods such as `setSorting`, `nextPage`, `toggleVisibility`, and `toggleSelected`. Direct `baseAtoms` writes are a rare escape hatch for internal state; write the external atom when it owns a slice. - -```ts -table.resetSorting() -table.resetPagination() -table.resetPagination(true) -``` - -Feature resets use `table.initialState` unless `true` requests the feature default and can update external owners. Core `table.reset()` resets internal base atoms only. Use feature-specific types such as `PaginationState`; use `TableState` for the full state inferred from registered features. - -## Common Mistakes - -### HIGH Inventing a Subscribe component - -Wrong: render a nonexistent `table.Subscribe` wrapper. - -Correct: read the relevant table API directly in an Alpine binding. - -The Alpine adapter makes proxied table reads reactive; it has no component render boundary. - -Source: TanStack/table:docs/framework/alpine/guide/table-state.md - -### HIGH Controlled snapshot never refreshes - -Wrong: set `state: { pagination: local.pagination }` and later replace `local.pagination`. - -Correct: define a getter for the controlled slice and apply each updater back to `local.pagination`. - -The adapter effect must read the current reactive value to reapply options. - -Source: TanStack/table:packages/alpine-table/src/createTable.ts - -### MEDIUM State and atom owners conflict +Read `table.atoms.pagination.get().pageIndex` directly in an Alpine binding. -Wrong: pass both `state.pagination` and `atoms.pagination` expecting two-way synchronization. +## Reactive boundaries -Correct: select one ownership mechanism; when an atom owns the slice, write the external atom. +- A controlled slice needs a getter and callback. `state: { pagination: local.pagination }` captures the old object when the owner later replaces it. +- Expose changing data through `get data()` and keep features, columns, and derived data stable outside reevaluated getters. +- The proxy normally reevaluates all Table-reading bindings for every state change. A narrow atom read does not by itself narrow that broad invalidation. +- For shared state, pass a stable external atom through `atoms`; omit controlled state and its callback for the same slice. -The derived table atom reads the external atom before controlled or internal state. +## Read for the task -Source: TanStack/table:docs/framework/alpine/guide/table-state.md +For 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). -## API Discovery +## API discovery -Inspect `node_modules/@tanstack/alpine-table/dist/createTable.d.ts` and `reactivity.d.ts`. Inspect `node_modules/@tanstack/table-core/dist/core/table/constructTable.d.ts` for state precedence. +Inspect `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/`. diff --git a/packages/alpine-table/skills/table-state/references/reactivity.md b/packages/alpine-table/skills/table-state/references/reactivity.md new file mode 100644 index 0000000000..6b5e23f523 --- /dev/null +++ b/packages/alpine-table/skills/table-state/references/reactivity.md @@ -0,0 +1,35 @@ +# Alpine Table reactivity + +Read for Alpine subscription boundaries, shared state, or updates that require more than the default rendering behavior. + +This reference inherits the version of its owning skill. + +## Gate broad binding updates + +By 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. + +The 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. + +For 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. + +## Controlled getters and external atoms + +When `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. + +When 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. + +## Read inside the binding + +Use `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. + +The adapter has no `table.Subscribe` component. Keep interactive markup in Alpine templates and use the reactive table proxy there. + +## API discovery + +Inspect `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/`. + +## 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` diff --git a/packages/angular-table/skills/getting-started/SKILL.md b/packages/angular-table/skills/getting-started/SKILL.md index 50837c0102..8697cb8ddc 100644 --- a/packages/angular-table/skills/getting-started/SKILL.md +++ b/packages/angular-table/skills/getting-started/SKILL.md @@ -1,23 +1,34 @@ --- name: getting-started -description: > - Create an Angular TanStack Table v9 table with injectTable inside injection context, explicit stable tableFeatures and columns, signal-backed data, and FlexRender structural directives or helpers. +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.2.5' + library_version: 9.2.5 requires: - '@tanstack/table-core#core' - - '@tanstack/table-core#table-features' sources: - - 'TanStack/table:docs/framework/angular/guide/migrating.md' - - 'TanStack/table:docs/framework/angular/guide/rendering.md' - - 'TanStack/table:examples/angular/basic-inject-table' - - 'TanStack/table:packages/angular-table/src/index.ts' + - 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 --- -This skill builds on `@tanstack/table-core#core` and `@tanstack/table-core#table-features`. Read them first for the headless model and explicit features. +Load `intent load @tanstack/table-core#core` first for the headless model, stable inputs, and column inference. ## Setup @@ -57,82 +68,23 @@ export class TableComponent { } ``` -## Core Patterns +## Construction and rendering -### Keep static inputs outside the initializer +Call `injectTable` in a component, directive, or service field initializer, or another valid Angular injection context. The adapter binds its cleanup to that context. -`injectTable` reruns its options initializer when a signal read changes. Define features, row-model factories, and columns at module or stable class scope; read only changing values inside. +Signals 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. -### Render each content kind correctly +Import `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. -Import `FlexRender` for `*flexRender`, `*flexRenderCell`, `*flexRenderHeader`, and `*flexRenderFooter`. Definitions may yield primitives, `TemplateRef`, component types, or `flexRenderComponent(...)`; Table does not supply markup or CSS. +## Read for the task -## Common Mistakes +- When adding or configuring optional features, load `intent load @tanstack/table-core#table-features` and read only references for the requested behavior. +- For state ownership or reactive reads, read [table-state](../table-state/SKILL.md). +- When tables share features, defaults, or reusable UI, read [create-table-hook](references/create-table-hook.md). +- When Query supplies data or server processing, read [with-tanstack-query](references/with-tanstack-query.md). +- When virtualizing rows or columns, read [with-tanstack-virtual](references/with-tanstack-virtual.md). +- When upgrading v8 code, read [migrate-v8-to-v9](../migrate-v8-to-v9/SKILL.md). -### CRITICAL Calling injectTable outside DI +## API discovery -Wrong: - -```ts -export function makeTable() { - return injectTable(() => ({ features, columns, data })) -} -``` - -Correct: - -```ts -export class TableComponent { - readonly table = injectTable(() => ({ features, columns, data: this.data() })) -} -``` - -`injectTable` asserts an Angular injection context and registers lifecycle cleanup there. - -Source: `packages/angular-table/src/injectTable.ts` - -### HIGH Reallocating static options reactively - -Wrong: - -```ts -injectTable(() => ({ - features: tableFeatures({}), - columns: makeColumns(), - data: this.data(), -})) -``` - -Correct: - -```ts -const features = tableFeatures({}) -const columns = makeColumns() -injectTable(() => ({ features, columns, data: this.data() })) -``` - -Every signal change reruns the initializer; rebuilding static inputs invalidates memoized Table work. - -Source: `packages/angular-table/src/injectTable.ts` - -### HIGH Treating a render function as a component - -Wrong: - -```ts -cell: () => flexRenderComponent(() => 'value') -``` - -Correct: - -```ts -cell: () => 'value' -``` - -`flexRenderComponent` wraps an Angular component type; ordinary functions and primitives are handled directly by FlexRender. - -Source: `docs/framework/angular/guide/rendering.md` - -## API Discovery - -Inspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public API; inspect optional feature APIs in installed `@tanstack/table-core/dist/features/`. +Inspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`. diff --git a/packages/angular-table/skills/create-table-hook/SKILL.md b/packages/angular-table/skills/getting-started/references/create-table-hook.md similarity index 63% rename from packages/angular-table/skills/create-table-hook/SKILL.md rename to packages/angular-table/skills/getting-started/references/create-table-hook.md index 0fa119908b..dba8c437e7 100644 --- a/packages/angular-table/skills/create-table-hook/SKILL.md +++ b/packages/angular-table/skills/getting-started/references/create-table-hook.md @@ -1,23 +1,8 @@ ---- -name: create-table-hook -description: > - Create an Angular injectAppTable/createAppColumnHelper abstraction with shared features/defaults, registered components, injectTableContext/injectTableCellContext/injectTableHeaderContext, and correct FlexRender component-versus-function handling. -metadata: - type: framework - library: '@tanstack/angular-table' - framework: angular - library_version: '9.2.5' -requires: - - '@tanstack/table-core#core' - - getting-started - - table-state -sources: - - 'TanStack/table:docs/framework/angular/guide/composable-tables.md' - - 'TanStack/table:examples/angular/composable-tables' - - 'TanStack/table:packages/angular-table/src/helpers/createTableHook.ts' ---- - -This skill builds on `@tanstack/table-core#core`, `getting-started`, and `table-state`. Use it for repeated app conventions; keep one-off tables on `injectTable`. +# Angular reusable table hooks + +Read 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). + +This reference inherits the version of its owning skill. ## Setup @@ -48,7 +33,7 @@ export class PeopleTable { } ``` -## Core Patterns +## Core patterns ### Consume typed DI context in registered components @@ -65,7 +50,7 @@ Use the matching table/header/cell injector instead of threading context props t Register 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. -## Common Mistakes +## Common mistakes ### CRITICAL Calling app helpers outside DI @@ -103,7 +88,7 @@ Correct: cell: (ctx) => ctx.cell.NameCell ``` -Registered components can consume the app hook’s typed cell context directly. +Registered components can consume the app hook's typed cell context directly. Source: `docs/framework/angular/guide/composable-tables.md` @@ -125,24 +110,12 @@ Correct: Source: `packages/angular-table/src/flex-render/flexRenderComponent.ts` -### MEDIUM Abstracting a one-off table - -Wrong: - -```ts -const hook = createTableHook({ features: tableFeatures({}) }) -``` - -Correct: - -```ts -readonly table = injectTable(() => ({ features, columns, data: this.data() })) -``` +## API discovery -Use the app hook only when shared defaults, types, or registered components justify it. - -Source: `docs/framework/angular/guide/composable-tables.md` +Inspect `node_modules/@tanstack/angular-table/dist/types/` for exact DI and rendering contracts in the bundled public API. -## API Discovery +## Sources -Inspect `node_modules/@tanstack/angular-table/dist/types/` for exact DI and rendering contracts in the bundled public API. +- `TanStack/table:docs/framework/angular/guide/composable-tables.md` +- `TanStack/table:examples/angular/composable-tables` +- `TanStack/table:packages/angular-table/src/helpers/createTableHook.ts` diff --git a/packages/angular-table/skills/with-tanstack-query/SKILL.md b/packages/angular-table/skills/getting-started/references/with-tanstack-query.md similarity index 67% rename from packages/angular-table/skills/with-tanstack-query/SKILL.md rename to packages/angular-table/skills/getting-started/references/with-tanstack-query.md index 1c779d8b5f..fe4d8b8694 100644 --- a/packages/angular-table/skills/with-tanstack-query/SKILL.md +++ b/packages/angular-table/skills/getting-started/references/with-tanstack-query.md @@ -1,23 +1,8 @@ ---- -name: with-tanstack-query -description: > - Compose Angular Query with signal-owned Table filtering, sorting, and pagination state using reactive query options, manual row-model boundaries, direct query data, server counts, and valid injection context. -metadata: - type: composition - library: '@tanstack/angular-table' - framework: angular - library_version: '9.2.5' -requires: - - '@tanstack/table-core#client-vs-server' - - getting-started - - table-state -sources: - - 'TanStack/table:examples/angular/with-tanstack-query' - - 'TanStack/table:docs/framework/angular/guide/table-state.md' - - 'TanStack/table:docs/framework/angular/guide/pagination.md' ---- - -This skill builds on `@tanstack/table-core#client-vs-server`, `getting-started`, and `table-state`. Decide the server-owned stages and dataset before wiring Query. +# Angular Table with TanStack Query + +Read 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. + +This reference inherits the version of its owning skill. ## Setup @@ -26,16 +11,23 @@ import { injectQuery, keepPreviousData, } from '@tanstack/angular-query-experimental' -import { signal } from '@angular/core' +import { Component, signal } from '@angular/core' import { injectTable, rowPaginationFeature, tableFeatures, } from '@tanstack/angular-table' +type Person = { id: string; name: string } +type PersonPage = { rows: Person[]; rowCount: number } const features = tableFeatures({ rowPaginationFeature }) -const EMPTY_ROWS: never[] = [] +const columns = [{ accessorKey: 'name' }] +const EMPTY_ROWS: Person[] = [] +@Component({ + selector: 'people-table', + template: `{{ table.getRowModel().rows.length }} rows`, +}) export class PeopleTable { readonly pagination = signal({ pageIndex: 0, pageSize: 20 }) readonly query = injectQuery(() => ({ @@ -44,7 +36,7 @@ export class PeopleTable { this.pagination().pageIndex, this.pagination().pageSize, ], - queryFn: () => + queryFn: (): Promise => fetch( `/api/people?page=${this.pagination().pageIndex}&size=${this.pagination().pageSize}`, ).then((r) => r.json()), @@ -65,7 +57,9 @@ export class PeopleTable { } ``` -## Core Patterns +Provide Angular Query's QueryClient in the application injection context before constructing this component. The server response contains the requested `rows` and total `rowCount`. + +## Core patterns ### Track every server-owned input @@ -75,7 +69,7 @@ Read pagination, sorting, and filtering signals inside `injectQuery(() => ...)` Read the Query signal directly in `injectTable`. Create another signal only for a deliberate editable draft with an explicit cache synchronization policy. -## Common Mistakes +## Common mistakes ### HIGH Capturing query inputs outside tracking @@ -137,6 +131,12 @@ Table needs `rowCount` or `pageCount` to constrain navigation across server page Source: `docs/framework/angular/guide/pagination.md` -## API Discovery +## API discovery + +Inspect installed `@tanstack/angular-table/dist/types/`, the relevant core feature declarations, and installed Angular Query declarations for the exact `injectQuery` package/version contract. + +## Sources -Inspect installed `@tanstack/angular-table/dist/types/`, the relevant core feature source, and installed Angular Query source for the exact `injectQuery` package/version contract. +- `TanStack/table:examples/angular/with-tanstack-query` +- `TanStack/table:docs/framework/angular/guide/table-state.md` +- `TanStack/table:docs/framework/angular/guide/pagination.md` diff --git a/packages/angular-table/skills/getting-started/references/with-tanstack-virtual.md b/packages/angular-table/skills/getting-started/references/with-tanstack-virtual.md new file mode 100644 index 0000000000..2b402c6319 --- /dev/null +++ b/packages/angular-table/skills/getting-started/references/with-tanstack-virtual.md @@ -0,0 +1,183 @@ +# Angular Table with TanStack Virtual + +Read 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. + +This reference inherits the version of its owning skill. + +## Setup + +```ts +import { Component, computed, viewChild } from '@angular/core' +import { injectTable, tableFeatures } from '@tanstack/angular-table' +import { injectVirtualizer } from '@tanstack/angular-virtual' +import type { ElementRef } from '@angular/core' + +const features = tableFeatures({}) +const columns = [{ accessorKey: 'name' }] +const data = Array.from({ length: 1000 }, (_, index) => ({ + id: String(index), + name: `Person ${index}`, +})) + +@Component({ + selector: 'virtual-table', + template: `
+
+ @for (item of virtualRows(); track item.key) { +
+ {{ rows()[item.index]!.getValue('name') }} +
+ } +
+
`, +}) +export class VirtualTable { + readonly table = injectTable(() => ({ + features, + columns, + data, + getRowId: (row) => row.id, + })) + readonly scrollElement = + viewChild>('scrollElement') + readonly rows = computed(() => this.table.getRowModel().rows) + readonly rowVirtualizer = injectVirtualizer(() => ({ + count: this.rows().length, + scrollElement: this.scrollElement()?.nativeElement, + estimateSize: () => 34, + getItemKey: (index) => this.rows()[index]!.id, + overscan: 5, + })) + readonly virtualRows = computed(() => this.rowVirtualizer.getVirtualItems()) + readonly totalSize = computed(() => this.rowVirtualizer.getTotalSize()) +} +``` + +## Core patterns + +### Derive reactive models + +Use `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. + +### Own the layout contract + +Give 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. + +### Gate infinite fetches + +When 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. + +## Common mistakes + +### CRITICAL Constructing outside injection context + +Wrong: + +```ts +export function virtualize(options) { + return injectVirtualizer(() => options) +} +``` + +Correct: + +```ts +const features = tableFeatures({}) +const columns = [{ accessorKey: 'name' }] +const data = Array.from({ length: 1000 }, (_, index) => ({ + id: String(index), + name: `Person ${index}`, +})) + +@Component({ + selector: 'virtual-table', + template: `
+
+ @for (item of virtualRows(); track item.key) { +
+ {{ rows()[item.index]!.getValue('name') }} +
+ } +
+
`, +}) +export class VirtualTable { + readonly table = injectTable(() => ({ + features, + columns, + data, + getRowId: (row) => row.id, + })) + readonly virtualizer = injectVirtualizer(() => options()) +} +``` + +The Angular virtualizer follows DI lifecycle rules just like `injectTable`. + +Source: `examples/angular/virtualized-rows/src/app/app.ts` + +### HIGH Virtualizing raw data + +Wrong: + +```ts +readonly rows = computed(() => this.data()) +``` + +Correct: + +```ts +readonly rows = computed(() => this.table.getRowModel().rows) +``` + +Raw data bypasses Table filtering, sorting, expansion, grouping, and pagination. + +Source: `docs/framework/angular/guide/virtualization.md` + +### HIGH Forgetting spacer and transforms + +Wrong: + +```html +@for (item of virtualRows(); track item.key) { +
{{ rows()[item.index].id }}
+} +``` + +Correct: + +```html +
+ @for (item of virtualRows(); track item.key) { +
+ {{ rows()[item.index]!.getValue('name') }} +
+ } +
+``` + +Virtual computes ranges and sizes but does not apply DOM geometry, sticky CSS, or column widths. + +Source: `examples/angular/virtualized-columns/src/app/app.ts` + +## API discovery + +Inspect installed `@tanstack/angular-table/dist/types/`, installed `@tanstack/angular-virtual/dist/`, and the maintained Angular examples for current row, column, measurement, and infinite patterns. + +## Sources + +- `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` diff --git a/packages/angular-table/skills/migrate-v8-to-v9/SKILL.md b/packages/angular-table/skills/migrate-v8-to-v9/SKILL.md index bc3eb8fd38..710ea12194 100644 --- a/packages/angular-table/skills/migrate-v8-to-v9/SKILL.md +++ b/packages/angular-table/skills/migrate-v8-to-v9/SKILL.md @@ -1,194 +1,47 @@ --- name: migrate-v8-to-v9 -description: > - Complete Angular v8-to-v9 migration reference: injectTable and injection context, explicit features and row-model slots, signal/atom state, FlexRender directives, type generics, prototype methods, sorting, sizing, selection, and logical pinning. +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.2.5' + library_version: 9.2.5 requires: - '@tanstack/table-core#migrate-v8-to-v9' - - getting-started - - table-state sources: - - 'TanStack/table:docs/framework/angular/guide/migrating.md' - - 'TanStack/table:packages/angular-table/src/index.ts' - - 'TanStack/table:examples/angular/basic-inject-table' + - TanStack/table:docs/framework/angular/guide/migrating.md + - TanStack/table:packages/angular-table/src/index.ts + - TanStack/table:examples/angular/basic-inject-table --- -Use this as the complete breaking-change checklist. V9 is the current API; construction, feature registration, state, rendering, and types must migrate together. +Load `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. -Framework prerequisite: Angular 19 or newer (`@angular/core >=19`). +## Framework prerequisites -## Recommended Migration Order +Angular 19 or newer is required (`@angular/core >=19`). -1. Replace `createAngularTable` with `injectTable` inside an Angular injection context. -2. Hoist static/expensive features and columns outside the reactive initializer. -3. Move features, row models, and function registries into `tableFeatures`. -4. Update signal/atom state reads and FlexRender usage. -5. Apply every shared API and type rename below. -6. Treat `stockFeatures` as a temporary audit bridge; explicit features are the production target. +## Angular migration checklist -```ts -const features = tableFeatures({ - rowSortingFeature, - sortedRowModel: createSortedRowModel(), - sortFns: { alphanumeric: sortFn_alphanumeric }, -}) +- [ ] Replace `createAngularTable` with `injectTable` in a valid Angular injection context. +- [ ] Hoist features, columns, and factories outside the signal-tracked initializer. +- [ ] Read state through signal-backed atoms; wire controlled signals with value-or-updater callbacks or stable Angular Store atoms. +- [ ] Import current FlexRender directives, distinguish render functions from component types, and preserve instance-method receivers. +- [ ] Audit repeated options and component registries for the optional `createTableHook`/`injectAppTable` path. -class TableCmp { - readonly table = injectTable(() => ({ - features, - columns, - data: this.data(), - })) -} -``` +## Apply the affected mappings -## Construction and Feature Registration +Read [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. -| v8 | v9 | -| ----------------------------------- | ---------------------------------------------------------- | -| `createAngularTable(() => options)` | `injectTable(() => options)` in injection context | -| All features bundled | Required `features: tableFeatures({...})` | -| `getCoreRowModel()` option | Remove; core row model is automatic | -| `get*RowModel()` table options | `create*RowModel()` slots in `tableFeatures` | -| `sortingFns` table option | `sortFns` feature slot | -| Top-level `onStateChange` | Per-slice callbacks, external atoms, or store subscription | +For complete v9 construction examples, read [getting-started](../getting-started/SKILL.md). For reactive state repairs, read [table-state](../table-state/SKILL.md). -The initializer reruns when signals read inside it change and calls `setOptions`; do not rebuild columns or features there. +## Final checks -Feature imports are `cellSelectionFeature`, `columnFilteringFeature`, `globalFilteringFeature`, `rowSortingFeature`, `rowPaginationFeature`, `rowSelectionFeature`, `rowExpandingFeature`, `rowPinningFeature`, `columnPinningFeature`, `columnVisibilityFeature`, `columnOrderingFeature`, `columnSizingFeature`, `columnResizingFeature`, `rowAggregationFeature`, `columnGroupingFeature`, and `columnFacetingFeature`. APIs are feature-gated. Put a feature before its dependent slot in the same `tableFeatures` call. Aggregation is independent from grouping: register `rowAggregationFeature` for aggregation APIs and add `columnGroupingFeature` only for grouped rows. +- [ ] All shared core migration checks and affected mappings have been applied. +- [ ] The framework checklist above passes with the current adapter declarations. +- [ ] Model inputs remain stable and state changes reach their reactive owner. -### Row-model mapping +## API discovery -| v8 option | v9 slot and factory | -| -------------------------- | ------------------------------------------------------------------- | -| `getFilteredRowModel()` | `filteredRowModel: createFilteredRowModel()` after column filtering | -| `getSortedRowModel()` | `sortedRowModel: createSortedRowModel()` after row sorting | -| `getPaginationRowModel()` | `paginatedRowModel: createPaginatedRowModel()` after pagination | -| `getExpandedRowModel()` | `expandedRowModel: createExpandedRowModel()` after expanding | -| `getGroupedRowModel()` | `groupedRowModel: createGroupedRowModel()` after grouping | -| `getFacetedRowModel()` | `facetedRowModel: createFacetedRowModel()` after faceting | -| `getFacetedMinMaxValues()` | `facetedMinMaxValues: createFacetedMinMaxValues()` | -| `getFacetedUniqueValues()` | `facetedUniqueValues: createFacetedUniqueValues()` | - -Factories take no arguments. `filterFns`, `sortFns`, and `aggregationFns` are sibling feature slots; register individually imported built-ins (`filterFn_includesString`, `sortFn_alphanumeric`, `aggregationFn_sum`) under their conventional keys. The full registry objects still work but bundle every built-in. - -## Angular State Migration - -- `table.getState().sorting` becomes `table.atoms.sorting.get()` for narrow signal-backed reads. -- Use `table.store.get()` only for a full flat snapshot/debug output. -- Derive selected slices with Angular `computed`; use `shallow` equality for recreated object/array slices when appropriate. -- Controlled Angular signals are read in `state` and updated through matching `on[State]Change` callbacks; resolve value-or-function updaters. -- Top-level `onStateChange` is removed. Use per-slice callbacks, external atoms, or `table.store.subscribe` for all changes. -- Prefer external atoms from `@tanstack/angular-store` through `atoms` for app-owned shared slices. Never provide both an atom and `state` for one slice. -- Treat `table.baseAtoms` as internal; prefer feature APIs or external atoms. - -## Angular Rendering and Composition - -- Import `FlexRender`/the current `*flexRender` directives from the adapter. -- Prefer `*flexRenderCell="cell; let value"`, `*flexRenderHeader="header; let value"`, and `*flexRenderFooter="footer; let value"`; they choose the definition and context automatically. -- General `*flexRender` supports primitives, `TemplateRef`, component types, and `flexRenderComponent(...)` wrappers. -- Column render functions run in an Angular injection context and may call `inject()` or use signals. -- Components mounted by FlexRender can call `injectFlexRenderContext()` for the render props. -- Use `flexRenderComponent(Component, { inputs, outputs, injector, bindings, directives })` for explicit component configuration; creation-time `bindings`/`directives` require the supported Angular version. -- `tableOptions(...)` composes partial options and may omit data, columns, or features until final assembly. -- `createTableHook` is optional for repeated application conventions; it returns `injectAppTable` and a feature-bound `createAppColumnHelper`. - -## Complete Shared Breaking-Change Map - -### Instance methods - -Row, cell, column, header, and related methods now live on shared prototypes and use `this`. Call them on their instances. Do not destructure/pass them bare or expect them in object spread, `Object.keys`, or JSON. Table methods are not affected. - -### Logical column pinning - -V9 has no physical aliases. - -| old | new | -| -------------------------------------------------------------- | ------------------------------------------------------------- | -| `columnPinning.left` / `.right` | `.start` / `.end` | -| `column.pin('left' \| 'right')` | `column.pin('start' \| 'end')` | -| `getIsPinned() === 'left' \| 'right'` | `'start' \| 'end'` | -| `row.getLeftVisibleCells()` / `getRightVisibleCells()` | `getStartVisibleCells()` / `getEndVisibleCells()` | -| `getLeftHeaderGroups()` / `getRightHeaderGroups()` | `getStartHeaderGroups()` / `getEndHeaderGroups()` | -| `getLeftFooterGroups()` / `getRightFooterGroups()` | `getStartFooterGroups()` / `getEndFooterGroups()` | -| `getLeftFlatHeaders()` / `getRightFlatHeaders()` | `getStartFlatHeaders()` / `getEndFlatHeaders()` | -| `getLeftLeafHeaders()` / `getRightLeafHeaders()` | `getStartLeafHeaders()` / `getEndLeafHeaders()` | -| `getLeftLeafColumns()` / `getRightLeafColumns()` | `getStartLeafColumns()` / `getEndLeafColumns()` | -| `getLeftVisibleLeafColumns()` / `getRightVisibleLeafColumns()` | `getStartVisibleLeafColumns()` / `getEndVisibleLeafColumns()` | -| `getLeftTotalSize()` / `getRightTotalSize()` | `getStartTotalSize()` / `getEndTotalSize()` | -| `column.getStart('left')` | `column.getStart('start')` | -| `column.getAfter('right')` | `column.getAfter('end')` | -| `column.getIndex('left' \| 'right')` | `column.getIndex('start' \| 'end')` | - -Prefer CSS logical inset properties. Logical names do not set DOM direction. `columnResizeDirection` is unchanged. - -### Pinning, sizing, and resizing - -- `enablePinning` splits into `enableColumnPinning` and `enableRowPinning`. -- Interactive resizing requires `columnSizingFeature` and `columnResizingFeature`; fixed sizing needs only sizing. -- `columnSizingInfo` becomes `columnResizing`. -- `setColumnSizingInfo()` becomes `setColumnResizing()`. -- `onColumnSizingInfoChange` becomes `onColumnResizingChange`. - -### Sorting, rows, and selection - -| v8 | v9 | -| ------------------------------ | ----------------------------- | -| `sortingFn` | `sortFn` | -| `sortingFns` | `sortFns` | -| `getSortingFn()` | `getSortFn()` | -| `getAutoSortingFn()` | `getAutoSortFn()` | -| `SortingFn` / `SortingFns` | `SortFn` / `SortFns` | -| `row._getAllCellsByColumnId()` | `row.getAllCellsByColumnId()` | - -Other `_`-prefixed internals are removed, including `_getPinnedRows`, `_getFacetedRowModel`, `_getFacetedMinMaxValues`, and `_getFacetedUniqueValues`. - -`getIsSomeRowsSelected()` and `getIsSomePageRowsSelected()` mean at least one, including all. Use `getIsSomeRowsSelected() && !getIsAllRowsSelected()` or `getIsSomePageRowsSelected() && !getIsAllPageRowsSelected()` for indeterminate UI. - -## TypeScript Migration - -- Most types add `TFeatures` first: `Column`, `ColumnDef`, `Table`, `Row`, and `Cell`. -- Replace `createColumnHelper()` with `createColumnHelper()`; use `columnHelper.columns([...])` for inference. -- A `createTableHook` column helper already binds features and needs only ``. -- Use `StockFeatures` when using `stockFeatures`. -- Existing `TableMeta`/`ColumnMeta` declaration merging must add `TFeatures` first. Prefer per-table meta slots using `metaHelper`. -- Replace global `FilterFns`, `SortFns`, `AggregationFns`, and `FilterMeta` augmentation with registry slots and `filterMeta`; registered keys become typed string references. -- `RowData` is now `Record | Array` rather than `unknown`. - -## Common Migration Failures - -### CRITICAL: Calling injectTable outside injection context - -Create it in a component/directive/service field initializer or another valid Angular injection context so ownership and cleanup bind correctly. - -### HIGH: Rebuilding static inputs reactively - -Hoist `features` and `columns`; the initializer reruns for tracked signals. - -### HIGH: Leaving row models on table options - -Move each row model beside its prerequisite feature in `tableFeatures`. - -### HIGH: Destructuring instance methods - -Use `row.getValue('name')`; prototype methods require the original instance and are absent from shallow clones. - -## Final Checklist - -- [ ] `createAngularTable` is replaced by `injectTable` in injection context. -- [ ] Static inputs are stable outside the signal-tracked initializer. -- [ ] Features, row models, and registries are in `tableFeatures`; core row model is removed. -- [ ] State reads use atom-backed signals or store intentionally; `onStateChange` is gone. -- [ ] Controlled state and external atom ownership do not overlap. -- [ ] FlexRender directives/helpers are migrated and imported. -- [ ] Prototype methods, pinning, sizing/resizing, sorting, row, and selection changes are audited. -- [ ] Helpers, types, meta, registries, and `RowData` use v9 shapes. -- [ ] Temporary `stockFeatures` usage has an explicit removal plan. - -## API Discovery - -Inspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public API; do not reconstruct v9 from v8 memory. +Inspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`. diff --git a/packages/angular-table/skills/migrate-v8-to-v9/references/adapter-migration.md b/packages/angular-table/skills/migrate-v8-to-v9/references/adapter-migration.md new file mode 100644 index 0000000000..c3fec1f8dd --- /dev/null +++ b/packages/angular-table/skills/migrate-v8-to-v9/references/adapter-migration.md @@ -0,0 +1,51 @@ +# Angular v8-to-v9 adapter migration + +Read 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. + +This reference inherits the version of its owning skill. + +## Framework requirements + +Angular 19 or newer is required (`@angular/core >=19`). + +## Construction + +| v8 | v9 | +| ----------------------------------- | -------------------------------------------------------------- | +| `createAngularTable(() => options)` | `injectTable(() => options)` in injection context | +| `table.getState().sorting` | `table.atoms.sorting.get()` inside tracked Angular consumption | + +The 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. + +## Angular state migration + +- `table.getState().sorting` becomes `table.atoms.sorting.get()` for narrow signal-backed reads. +- Use `table.store.get()` only for a full flat snapshot/debug output. +- Derive selected slices with Angular `computed`; use `shallow` equality for recreated object/array slices when appropriate. +- Controlled Angular signals are read in `state` and updated through matching `on[State]Change` callbacks; resolve value-or-function updaters. +- Prefer external atoms from `@tanstack/angular-store` through `atoms` for app-owned shared slices. Never provide both an atom and `state` for one slice. + +## Angular rendering and composition + +- Import `FlexRender`/the current `*flexRender` directives from the adapter. +- Prefer `*flexRenderCell="cell; let value"`, `*flexRenderHeader="header; let value"`, and `*flexRenderFooter="footer; let value"`; they choose the definition and context automatically. +- General `*flexRender` supports primitives, `TemplateRef`, component types, and `flexRenderComponent(...)` wrappers. +- Column render functions run in an Angular injection context and may call `inject()` or use signals. +- Components mounted by FlexRender can call `injectFlexRenderContext()` for the render props. +- Use `flexRenderComponent(Component, { inputs, outputs, injector, bindings, directives })` for explicit component configuration; creation-time `bindings`/`directives` require the supported Angular version. +- `tableOptions(...)` composes partial options and may omit data, columns, or features until final assembly. +- `createTableHook` is optional for repeated application conventions; it returns `injectAppTable` and a feature-bound `createAppColumnHelper`. + +## Related task guidance + +For 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). + +## API discovery + +Inspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`. + +## Sources + +- `TanStack/table:docs/framework/angular/guide/migrating.md` +- `TanStack/table:packages/angular-table/src/index.ts` +- `TanStack/table:examples/angular/basic-inject-table` diff --git a/packages/angular-table/skills/table-state/SKILL.md b/packages/angular-table/skills/table-state/SKILL.md index e4bf9d5dd4..e889dd02ec 100644 --- a/packages/angular-table/skills/table-state/SKILL.md +++ b/packages/angular-table/skills/table-state/SKILL.md @@ -1,37 +1,31 @@ --- name: table-state -description: > - Use Angular-signal-backed table.atoms, direct template reads, computed selectors, controlled signals, value-or-updater callbacks, and external Angular Store atoms while accounting for injectTable initializer reruns. +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.2.5' + library_version: 9.2.5 requires: - - '@tanstack/table-core#core' - - getting-started + - '@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' + - TanStack/table:docs/framework/angular/guide/table-state.md + - TanStack/table:examples/angular/basic-external-state + - TanStack/table:packages/angular-table/src/injectTable.ts --- -This skill builds on `@tanstack/table-core#core` and `getting-started`. Read them first for state ownership and Angular construction. +Load `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules. -## State Mental Model +Angular-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. -TanStack Table is primarily a state coordinator. Keep state internal unless another system must read, persist, or drive it. Without `initialState`, `atoms`, `state`, or `on[State]Change`, the table owns all registered slices. +## Controlled signal setup -- `table.baseAtoms` are internal writable atoms initialized from resolved initial state. -- `table.atoms` are readonly derived atoms for the active owner of each registered slice. -- `table.store` combines those atoms into one readonly flat store. - -The Angular adapter backs atoms with Angular signals. Reads participate in tracking inside templates, `computed`, and `effect`; signal reads inside the `injectTable` initializer also rerun that initializer and call `setOptions`. State is feature-based: missing pagination state or APIs indicate a missing `rowPaginationFeature`. Hoist stable `features` and `columns` outside the initializer, and return signal-backed `data` without mapping or slicing inline. - -## Setup + ```ts -import { computed, signal } from '@angular/core' +import { Component, signal } from '@angular/core' import { injectTable, rowPaginationFeature, @@ -40,158 +34,40 @@ import { const features = tableFeatures({ rowPaginationFeature }) const columns = [{ accessorKey: 'name' }] - -export class TableComponent { - readonly data = signal([{ name: 'Ada' }]) - readonly table = injectTable(() => ({ features, columns, data: this.data() })) - readonly pageIndex = computed( - () => this.table.atoms.pagination.get().pageIndex, - ) +const data = [{ name: 'Ada' }] + +@Component({ + selector: 'page-status', + template: ``, +}) +export class PageStatus { + readonly pagination = signal({ pageIndex: 0, pageSize: 20 }) + readonly table = injectTable(() => ({ + features, + columns, + data, + state: { pagination: this.pagination() }, + onPaginationChange: (next) => + typeof next === 'function' + ? this.pagination.update(next) + : this.pagination.set(next), + })) } ``` -Angular-backed table atom reads are signal reads. Templates, `computed`, and `effect` track them directly. - -## Core Patterns - -### Prefer external atoms for cross-system state - -```ts -import { createAtom } from '@tanstack/angular-store' -import type { PaginationState } from '@tanstack/angular-table' - -readonly paginationAtom = createAtom({ pageIndex: 0, pageSize: 20 }) -readonly table = injectTable(() => ({ - features, columns, data: this.data(), atoms: { pagination: this.paginationAtom }, -})) -``` - -The atom can feed Query without making every state write rerun the Table initializer. - -### Resolve controlled signal updaters - -```ts -readonly pagination = signal({ pageIndex: 0, pageSize: 20 }) -readonly table = injectTable(() => ({ - features, columns, data: this.data(), state: { pagination: this.pagination() }, - onPaginationChange: next => typeof next === 'function' ? this.pagination.update(next) : this.pagination.set(next), -})) -``` - -## Choose State Ownership - -Use one owner for each slice: - -- Prefer internal state and feature APIs for local interaction. -- Use `initialState` for starting/reset values; later changes do not reset current state. -- Prefer a stable atom from `@tanstack/angular-store` in `atoms` for Query or other cross-system state. Table APIs update it without a change callback. -- Use an Angular signal read in `state.` plus the matching callback for simple controlled state. Handle raw values and updater functions. - -External atoms win over controlled `state`, which syncs into the internal base atom. Do not give a slice two owners. The global v8 `onStateChange` option is gone; subscribe to `table.store` when all state changes must be observed. - -## Initialize, Update, and Reset - -Prefer feature methods such as `setSorting`, `nextPage`, `toggleVisibility`, and `toggleSelected`. Direct base-atom writes are a rare escape hatch for internal state; write the external atom when it owns a slice. - -```ts -this.table.resetSorting() -this.table.resetPagination() -this.table.resetPagination(true) -``` - -Feature resets use `table.initialState` unless `true` requests the feature default, and can update external owners. Core `table.reset()` resets internal base atoms only. Use feature-specific types such as `PaginationState`; use `TableState` when the complete registered state type is needed. - -## Common Mistakes - -### MEDIUM Wrapping atoms redundantly - -Wrong: - -```ts -readonly pagination = computed(() => computed(() => this.table.atoms.pagination.get())()) -``` - -Correct: - -```ts -readonly pagination = computed(() => this.table.atoms.pagination.get()) -``` +## Reactive boundaries -Table atoms already bridge to Angular signals; one tracked read is sufficient. - -Source: `docs/framework/angular/guide/table-state.md` - -### HIGH Ignoring initializer reruns - -Wrong: - -```ts -injectTable(() => ({ - features: tableFeatures({ rowPaginationFeature }), - columns: makeColumns(), - state: { pagination: this.pagination() }, - data, -})) -``` - -Correct: - -```ts -injectTable(() => ({ - features, - columns, - state: { pagination: this.pagination() }, - data, -})) -``` - -Controlled signal writes rerun the initializer, so static work must remain outside it. - -Source: `packages/angular-table/src/injectTable.ts` - -### HIGH Storing updater functions - -Wrong: - -```ts -onPaginationChange: (next) => this.pagination.set(next) -``` - -Correct: - -```ts -onPaginationChange: (next) => - typeof next === 'function' - ? this.pagination.update(next) - : this.pagination.set(next) -``` - -Callbacks receive a value or updater; assigning the function corrupts owned state. - -Source: `examples/angular/basic-external-state/src/app/app.ts` - -### MEDIUM Giving one slice multiple owners - -Wrong: - -```ts -{ initialState: { pagination: start }, atoms: { pagination: this.paginationAtom } } -``` - -Correct: - -```ts -{ - atoms: { - pagination: this.paginationAtom - } -} -``` +- 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. +- 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)`. +- 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. +- Use `table.store.get()` for the flat state. Prefer `table.atoms..get()` for narrow tracked reads. -External atoms/state override initial state; choose one owner for each slice. +## Read for the task -Source: `docs/framework/angular/guide/table-state.md` +For 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). -## API Discovery +## API discovery -Inspect `node_modules/@tanstack/angular-table/dist/types/` and `reactivity.d.ts`; inspect `@tanstack/angular-store/dist/` for external atoms and installed core feature source for state APIs. +Inspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`. diff --git a/packages/angular-table/skills/table-state/references/reactivity.md b/packages/angular-table/skills/table-state/references/reactivity.md new file mode 100644 index 0000000000..9950d22f16 --- /dev/null +++ b/packages/angular-table/skills/table-state/references/reactivity.md @@ -0,0 +1,67 @@ +# Angular Table reactivity + +Read for Angular subscription boundaries, shared state, or updates that require more than the default rendering behavior. + +This reference inherits the version of its owning skill. + +## Share state through an external atom + + + +```ts +import { Component, computed } from '@angular/core' +import { createAtom } from '@tanstack/angular-store' +import { + injectTable, + rowPaginationFeature, + tableFeatures, + type PaginationState, +} from '@tanstack/angular-table' + +const features = tableFeatures({ rowPaginationFeature }) +const columns = [{ accessorKey: 'name' }] +const data = [{ name: 'Ada' }] + +@Component({ selector: 'page-status', template: `Page {{ pageIndex() + 1 }}` }) +export class PageStatus { + readonly paginationAtom = createAtom({ + pageIndex: 0, + pageSize: 20, + }) + readonly table = injectTable(() => ({ + features, + columns, + data, + atoms: { pagination: this.paginationAtom }, + })) + readonly pageIndex = computed( + () => this.table.atoms.pagination.get().pageIndex, + ) +} +``` + +The 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. + +## Derive values with equality control + +Use 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. + +Keep 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`. + +## Controlled updater mistakes + +Wrong: `onPaginationChange: next => this.pagination.set(next)`. + +Correct: use `typeof next === 'function' ? this.pagination.update(next) : this.pagination.set(next)`. Storing the updater itself corrupts the signal's state shape. + +Use one owner for each slice. An external atom takes precedence over `state` and starting values; those options are not synchronized fallback owners. + +## API discovery + +Inspect `node_modules/@tanstack/angular-table/dist/types/` for the bundled public declarations. Inspect feature APIs under `node_modules/@tanstack/table-core/dist/features/`. + +## 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` diff --git a/packages/angular-table/skills/with-tanstack-virtual/SKILL.md b/packages/angular-table/skills/with-tanstack-virtual/SKILL.md deleted file mode 100644 index fee5c6b569..0000000000 --- a/packages/angular-table/skills/with-tanstack-virtual/SKILL.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -name: with-tanstack-virtual -description: > - Virtualize Angular Table final row or column models inside the correct injection and reactive lifecycle with signal counts, scroll elements, keys, measurement, transforms, sticky regions, grid/flex sizing, and infinite data. -metadata: - type: composition - library: '@tanstack/angular-table' - framework: angular - library_version: '9.2.5' -requires: - - '@tanstack/table-core#core' - - getting-started - - table-state -sources: - - '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' ---- - -This skill builds on `@tanstack/table-core#core`, `getting-started`, and `table-state`. Virtual is a rendering concern over final Table models, not a feature plugin. - -## Setup - -```ts -import { computed, viewChild } from '@angular/core' -import { injectVirtualizer } from '@tanstack/angular-virtual' -import type { ElementRef } from '@angular/core' - -export class VirtualTable { - readonly scrollElement = - viewChild>('scrollElement') - readonly rows = computed(() => this.table.getRowModel().rows) - readonly rowVirtualizer = injectVirtualizer(() => ({ - count: this.rows().length, - scrollElement: this.scrollElement()?.nativeElement, - estimateSize: () => 34, - getItemKey: (index) => this.rows()[index]!.id, - overscan: 5, - })) - readonly virtualRows = computed(() => this.rowVirtualizer.getVirtualItems()) - readonly totalSize = computed(() => this.rowVirtualizer.getTotalSize()) -} -``` - -## Core Patterns - -### Derive reactive models - -Use `computed(() => table.getRowModel().rows)` and `computed(() => table.getVisibleLeafColumns())`. `injectVirtualizer` tracks signal reads in its initializer and requires injection context. - -### Own the layout contract - -Give 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. - -### Gate infinite fetches - -When 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. - -## Common Mistakes - -### CRITICAL Constructing outside injection context - -Wrong: - -```ts -export function virtualize(options) { - return injectVirtualizer(() => options) -} -``` - -Correct: - -```ts -export class VirtualTable { - readonly virtualizer = injectVirtualizer(() => options()) -} -``` - -The Angular virtualizer follows DI lifecycle rules just like `injectTable`. - -Source: `examples/angular/virtualized-rows/src/app/app.ts` - -### HIGH Virtualizing raw data - -Wrong: - -```ts -readonly rows = computed(() => this.data()) -``` - -Correct: - -```ts -readonly rows = computed(() => this.table.getRowModel().rows) -``` - -Raw data bypasses Table filtering, sorting, expansion, grouping, and pagination. - -Source: `docs/framework/angular/guide/virtualization.md` - -### HIGH Forgetting spacer and transforms - -Wrong: - -```html -@for (item of virtualRows(); track item.key) { -
{{ rows()[item.index].id }}
-} -``` - -Correct: - -```html -
-
-
-``` - -Virtual computes ranges and sizes but does not apply DOM geometry, sticky CSS, or column widths. - -Source: `examples/angular/virtualized-columns/src/app/app.ts` - -## API Discovery - -Inspect installed `@tanstack/angular-table/dist/types/`, installed `@tanstack/angular-virtual/dist/`, and the maintained Angular examples for current row, column, measurement, and infinite patterns. diff --git a/packages/ember-table/skills/getting-started/SKILL.md b/packages/ember-table/skills/getting-started/SKILL.md index 3a2c98b399..ca550d4b8c 100644 --- a/packages/ember-table/skills/getting-started/SKILL.md +++ b/packages/ember-table/skills/getting-started/SKILL.md @@ -1,36 +1,37 @@ --- name: getting-started -description: > - Create a TanStack Ember Table v9 table with useTable, a tracked options thunk, stable tableFeatures and columns, .gts templates, FlexRenderCell/Header/Footer, and correctly bound template helpers. Load for first-table setup, Glimmer reactivity, component cell renderers, or adapting another framework's example to Ember. +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.2.5' + library_version: 9.2.5 requires: - '@tanstack/table-core#core' - - '@tanstack/table-core#table-features' 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/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 --- -This skill builds on `@tanstack/table-core#core` and `@tanstack/table-core#table-features`. Ember Table is headless: it supplies reactive table models and renderer helpers, while the application owns semantic markup, CSS, accessibility, and design-system components. +Load `intent load @tanstack/table-core#core` first for the headless model, stable inputs, and column inference. -The v9 addon requires Ember 5.8 or newer with Embroider or ember-auto-import v2. Prefer `.gts`/`.gjs` template-tag components with Glint. +Ember 5.8 or newer requires Embroider or ember-auto-import v2. Prefer `.gts` or `.gjs` template-tag components with Glint. ## Setup ```gts import Component from '@glimmer/component' import { tracked } from '@glimmer/tracking' -import { on } from '@ember/modifier' import { FlexRenderCell, - FlexRenderHeader, createColumnHelper, tableFeatures, useTable, @@ -55,41 +56,19 @@ const getAllCells = ( export default class PeopleTable extends Component { @tracked data = initialData - table = useTable(() => ({ + table = useTable(this, () => ({ features, columns, data: this.data, getRowId, })) - get headerGroups() { - return this.table.getHeaderGroups() - } - get rows() { return this.table.getRowModel().rows } - addPerson = () => { - this.data = [...this.data, { id: '2', name: 'Grace' }] - } - ``` -## Core Patterns - -### Preserve Vue option shapes - -`useTable` accepts refs/computed values and unwraps them while watching dependencies. Keep `data`, controlled state, and other reactive options as refs or computed values; keep static columns/features stable. - -### Add a client row model explicitly - -```ts -import { - createSortedRowModel, - rowSortingFeature, - sortFn_alphanumeric, - tableFeatures, -} from '@tanstack/vue-table' - -const features = tableFeatures({ - rowSortingFeature, - sortedRowModel: createSortedRowModel(), - sortFns: { alphanumeric: sortFn_alphanumeric }, -}) -``` - -The slot follows its prerequisite feature in the same call. Import individual `sortFn_*` built-ins and register only the ones your columns reference; the full `sortFns` registry object still works but bundles every built-in. - -## Common Mistakes - -### HIGH Flattening a ref into a snapshot - -Wrong: - -```ts -const table = useTable({ features, columns, data: data.value }) -``` - -Correct: - -```ts -const table = useTable({ features, columns, data }) -``` - -Passing `.value` captures one array instead of letting the adapter watch the ref. +## Essential constraints -Source: `packages/vue-table/src/useTable.ts` +Use `useTable` with a ref, computed value, or reactive getter for changing data. Passing `data.value` captures one array and loses later updates. Keep static features and columns stable; derive transformed arrays with `computed`. -### HIGH Using the v8 entrypoint - -Wrong: - -```ts -const table = useVueTable({ data, columns, getCoreRowModel: getCoreRowModel() }) -``` - -Correct: - -```ts -const table = useTable({ features, columns, data }) -``` - -V9 uses `useTable`; core processing is automatic and optional row models live in `tableFeatures`. - -Source: `docs/framework/vue/guide/migrating.md` - -### HIGH Assuming headless means prebuilt UI - -Wrong: - -```vue - -``` - -Correct: - -```vue - -``` +Table 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()`. -The adapter renders definitions but owns no table component, CSS, or design-system integration. +## Load by task -Source: `examples/vue/basic-use-table/src/App.tsx` +- For repeated features, defaults, typed contexts, or component registries, read [reusable app hooks](references/create-table-hook.md). +- For Query-backed data, server pages, sorting, filtering, or request keys, read [TanStack Query integration](references/with-tanstack-query.md). +- For virtual rows, columns, dynamic measurement, or infinite scrolling, read [TanStack Virtual integration](references/with-tanstack-virtual.md). +- For controlled state, tracked reads, or render subscriptions, read [table state](../table-state/SKILL.md). +- 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. +- For v8 code, read the [migration checklist](../migrate-v8-to-v9/SKILL.md). -## API Discovery +## API discovery -Inspect `node_modules/@tanstack/vue-table/dist/index.d.ts`, then `useTable.d.ts` and `FlexRender.d.ts`. Inspect core feature APIs in `node_modules/@tanstack/table-core/dist/features//`. +Inspect `node_modules/@tanstack/vue-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/`. diff --git a/packages/vue-table/skills/create-table-hook/SKILL.md b/packages/vue-table/skills/getting-started/references/create-table-hook.md similarity index 74% rename from packages/vue-table/skills/create-table-hook/SKILL.md rename to packages/vue-table/skills/getting-started/references/create-table-hook.md index 9842f5edec..993a26362e 100644 --- a/packages/vue-table/skills/create-table-hook/SKILL.md +++ b/packages/vue-table/skills/getting-started/references/create-table-hook.md @@ -1,23 +1,6 @@ ---- -name: create-table-hook -description: > - Create a reusable Vue useAppTable/createAppColumnHelper with shared features/defaults, reactive per-table options, optional component registries, dynamic App wrappers, typed context hooks, and explicit types that break circular inference. -metadata: - type: framework - library: '@tanstack/vue-table' - framework: vue - library_version: '9.2.5' -requires: - - '@tanstack/table-core#core' - - getting-started - - table-state -sources: - - 'TanStack/table:docs/framework/vue/guide/composable-tables.md' - - 'TanStack/table:examples/vue/composable-tables' - - 'TanStack/table:packages/vue-table/src/createTableHook.ts' ---- - -This skill builds on `@tanstack/table-core#core`, `getting-started`, and `table-state`. Use it for recurring app conventions; use `useTable` for a one-off. +# Reusable Vue table hooks + +Use this reference when multiple Vue 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). ## Setup @@ -41,7 +24,7 @@ export const useTableContext: () => VueTable< The explicit exported context-hook types are important when registered components import the hook module that also imports those components. -## Core Patterns +## Core patterns ### Keep per-table values reactive @@ -57,7 +40,7 @@ Pass refs/computed options through unchanged. Render through `table.AppTable`, `table.AppCell`, or `table.AppHeader`; inside registered components call the corresponding typed context hook instead of prop drilling. -## Common Mistakes +## Common mistakes ### HIGH Creating circular inferred exports @@ -72,7 +55,7 @@ export const { useAppTable, useTableContext } = createTableHook({ Correct: ```ts -const hook = createTableHook({ tableComponents: { Pager } }) +const hook = createTableHook({ features, tableComponents: { Pager } }) export const useTableContext: () => VueTable< typeof features, TData @@ -141,6 +124,12 @@ Vue’s adapter expects an explicit `children` prop in JSX. Source: `packages/vue-table/src/useTable.ts` -## API Discovery +## API discovery Inspect `node_modules/@tanstack/vue-table/dist/createTableHook.d.ts` for the returned helpers, wrapper props, registry types, and context contracts. + +## Sources + +- `TanStack/table:docs/framework/vue/guide/composable-tables.md` +- `TanStack/table:examples/vue/composable-tables` +- `TanStack/table:packages/vue-table/src/createTableHook.ts` diff --git a/packages/vue-table/skills/with-tanstack-query/SKILL.md b/packages/vue-table/skills/getting-started/references/with-tanstack-query.md similarity index 68% rename from packages/vue-table/skills/with-tanstack-query/SKILL.md rename to packages/vue-table/skills/getting-started/references/with-tanstack-query.md index 4aaf319db5..7f6b176db8 100644 --- a/packages/vue-table/skills/with-tanstack-query/SKILL.md +++ b/packages/vue-table/skills/getting-started/references/with-tanstack-query.md @@ -1,22 +1,6 @@ ---- -name: with-tanstack-query -description: > - Compose reactive Vue Query keys and results with Vue Table manual row processing, refs/computed state, server counts, and already-processed pages without duplicating query data into a drifting local ref. -metadata: - type: composition - library: '@tanstack/vue-table' - framework: vue - library_version: '9.2.5' -requires: - - '@tanstack/table-core#client-vs-server' - - getting-started - - table-state -sources: - - 'TanStack/table:examples/vue/with-tanstack-query' - - 'TanStack/table:docs/framework/vue/guide/pagination.md' ---- - -This skill builds on `@tanstack/table-core#client-vs-server`, `getting-started`, and `table-state`. Name each client- and server-owned processing stage first. +# Vue Table with TanStack Query + +Use this reference when Query owns server data for a Vue 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. ## Setup @@ -29,6 +13,8 @@ import { useTable, } from '@tanstack/vue-table' +const features = tableFeatures({ rowPaginationFeature }) +const emptyRows: Array<{ name: string }> = [] const pagination = ref({ pageIndex: 0, pageSize: 20 }) const query = useQuery(() => ({ queryKey: ['people', pagination.value.pageIndex, pagination.value.pageSize], @@ -38,11 +24,11 @@ const query = useQuery(() => ({ ).then((r) => r.json()), placeholderData: keepPreviousData, })) -const data = computed(() => query.data.value?.rows ?? []) +const data = computed(() => query.data.value?.rows ?? emptyRows) const rowCount = computed(() => query.data.value?.rowCount ?? 0) const state = computed(() => ({ pagination: pagination.value })) const table = useTable({ - features: tableFeatures({ rowPaginationFeature }), + features, columns, data, rowCount, @@ -55,7 +41,7 @@ const table = useTable({ }) ``` -## Core Patterns +## Core patterns ### Keep query dependencies reactive @@ -65,7 +51,7 @@ Use the Vue Query options function and read refs inside it. Include every manual Expose result fields as computed refs. Introduce a second local data ref only for an explicit editing workflow with a cache-write policy. -## Common Mistakes +## Common mistakes ### HIGH Unwrapping before query construction @@ -97,7 +83,7 @@ const rows = ref(query.data.value?.rows ?? []) Correct: ```ts -const rows = computed(() => query.data.value?.rows ?? []) +const rows = computed(() => query.data.value?.rows ?? emptyRows) ``` A one-time copy drifts from subsequent cache results. @@ -122,6 +108,11 @@ One returned page cannot tell Table how many pages the server has. Source: `docs/framework/vue/guide/pagination.md` -## API Discovery +## API discovery + +Inspect installed `@tanstack/vue-table/dist/useTable.d.ts`, installed `@tanstack/vue-query/dist/`, and the relevant manual installed Table feature declarations for exact option types. + +## Sources -Inspect installed `@tanstack/vue-table/dist/useTable.d.ts`, installed `@tanstack/vue-query/dist/`, and the relevant manual Table feature source for exact option types. +- `TanStack/table:examples/vue/with-tanstack-query` +- `TanStack/table:docs/framework/vue/guide/pagination.md` diff --git a/packages/vue-table/skills/with-tanstack-virtual/SKILL.md b/packages/vue-table/skills/getting-started/references/with-tanstack-virtual.md similarity index 74% rename from packages/vue-table/skills/with-tanstack-virtual/SKILL.md rename to packages/vue-table/skills/getting-started/references/with-tanstack-virtual.md index cd0097c787..b0c4f4cbe9 100644 --- a/packages/vue-table/skills/with-tanstack-virtual/SKILL.md +++ b/packages/vue-table/skills/getting-started/references/with-tanstack-virtual.md @@ -1,24 +1,6 @@ ---- -name: with-tanstack-virtual -description: > - Virtualize Vue Table final row or column models with reactive counts and scroll targets, stable keys, measurement, spacer geometry, sticky CSS, grid/flex widths, and infinite server data. -metadata: - type: composition - library: '@tanstack/vue-table' - framework: vue - library_version: '9.2.5' -requires: - - '@tanstack/table-core#core' - - getting-started - - table-state -sources: - - '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' ---- - -This skill builds on `@tanstack/table-core#core`, `getting-started`, and `table-state`. Virtual consumes final Table models; it is not registered in `tableFeatures`. +# Vue Table with TanStack Virtual + +Use this reference when virtualizing Vue 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. ## Setup @@ -41,7 +23,7 @@ const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems()) const totalSize = computed(() => rowVirtualizer.value.getTotalSize()) ``` -## Core Patterns +## Core patterns ### Derive from current visible models @@ -55,7 +37,7 @@ Give the scroll container a bounded height and positioning context, create a spa Fetch near the last virtual item only while `totalFetched < serverRowCount` and no request is active. Manual sorting means the server must return the sorted order and a sort change normally resets pages. -## Common Mistakes +## Common mistakes ### HIGH Passing a plain options snapshot @@ -111,6 +93,13 @@ Virtual provides measurements, not spacer layout, transforms, sticky positioning Source: `examples/vue/virtualized-columns/src/App.vue` -## API Discovery +## API discovery Inspect installed `@tanstack/vue-table/dist/` and `@tanstack/vue-virtual/dist/`; use the maintained Vue examples for exact row, column, and infinite layout combinations. + +## Sources + +- `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` diff --git a/packages/vue-table/skills/migrate-v8-to-v9/SKILL.md b/packages/vue-table/skills/migrate-v8-to-v9/SKILL.md index 83facab1be..a8ab8e337f 100644 --- a/packages/vue-table/skills/migrate-v8-to-v9/SKILL.md +++ b/packages/vue-table/skills/migrate-v8-to-v9/SKILL.md @@ -1,185 +1,48 @@ --- name: migrate-v8-to-v9 -description: > - Complete Vue v8-to-v9 migration reference: useTable, explicit features and row-model slots, ref/atom state, FlexRender shorthand, prototype methods, type generics, sorting, sizing, selection, and logical pinning. +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.2.5' + library_version: 9.2.5 requires: - '@tanstack/table-core#migrate-v8-to-v9' - - getting-started - - table-state sources: - - 'TanStack/table:docs/framework/vue/guide/migrating.md' - - 'TanStack/table:packages/vue-table/src/index.ts' - - 'TanStack/table:examples/vue/basic-use-table' + - TanStack/table:docs/framework/vue/guide/migrating.md + - TanStack/table:packages/vue-table/src/index.ts + - TanStack/table:examples/vue/basic-use-table --- -Use this as the complete breaking-change checklist. V9 is the current API; do not stop after renaming the Vue composable. +# Vue v8-to-v9 migration checklist -Framework prerequisite: Vue 3.2 or newer (`vue >=3.2`). - -## Recommended Migration Order - -1. Replace `useVueTable` with `useTable` while preserving reactive inputs. -2. Define explicit features, then move row models and registries into `tableFeatures`. -3. Update state reads, controlled ownership, and rendering. -4. Apply every shared API and type rename below. -5. Use `stockFeatures` only as a temporary audit bridge; explicit features are the production target. - -```ts -const features = tableFeatures({ - rowSortingFeature, - sortedRowModel: createSortedRowModel(), - sortFns: { alphanumeric: sortFn_alphanumeric }, -}) -const data = ref(makeData()) -const table = useTable({ features, columns, data }) -``` - -## Construction and Feature Registration - -| v8 | v9 | -| -------------------------------------------- | ---------------------------------------------------------- | -| `useVueTable(options)` | `useTable(options)` | -| All features bundled | Required `features: tableFeatures({...})` | -| `getCoreRowModel()` option | Remove; core row model is automatic | -| `get*RowModel()` table options | `create*RowModel()` slots in `tableFeatures` | -| `sortingFns` table option | `sortFns` feature slot | -| `filterFns` / `aggregationFns` table options | Same-named feature slots | -| Top-level `onStateChange` | Per-slice callbacks, external atoms, or store subscription | - -Available feature imports are `cellSelectionFeature`, `columnFilteringFeature`, `globalFilteringFeature`, `rowSortingFeature`, `rowPaginationFeature`, `rowSelectionFeature`, `rowExpandingFeature`, `rowPinningFeature`, `columnPinningFeature`, `columnVisibilityFeature`, `columnOrderingFeature`, `columnSizingFeature`, `columnResizingFeature`, `rowAggregationFeature`, `columnGroupingFeature`, and `columnFacetingFeature`. APIs are feature-gated. Put every feature before its dependent slot in the same `tableFeatures` call. Aggregation is independent from grouping: register `rowAggregationFeature` for aggregation APIs and add `columnGroupingFeature` only for grouped rows. - -### Row-model mapping - -| v8 option | v9 slot and factory | -| -------------------------- | ------------------------------------------------------------------- | -| `getFilteredRowModel()` | `filteredRowModel: createFilteredRowModel()` after column filtering | -| `getSortedRowModel()` | `sortedRowModel: createSortedRowModel()` after row sorting | -| `getPaginationRowModel()` | `paginatedRowModel: createPaginatedRowModel()` after pagination | -| `getExpandedRowModel()` | `expandedRowModel: createExpandedRowModel()` after expanding | -| `getGroupedRowModel()` | `groupedRowModel: createGroupedRowModel()` after grouping | -| `getFacetedRowModel()` | `facetedRowModel: createFacetedRowModel()` after faceting | -| `getFacetedMinMaxValues()` | `facetedMinMaxValues: createFacetedMinMaxValues()` | -| `getFacetedUniqueValues()` | `facetedUniqueValues: createFacetedUniqueValues()` | - -Factories take no arguments. Register `filterFns`, `sortFns`, and `aggregationFns` as sibling feature slots holding individually imported built-ins (`filterFn_includesString`, `sortFn_alphanumeric`, `aggregationFn_sum`) under their conventional keys. The full registry objects still work but bundle every built-in. - -## Vue State Migration - -- Pass a `ref` or `computed` as `data`; the adapter unwraps and syncs it. Do not pass `data.value`, which is only a snapshot. A getter returning `data.value` is also supported. -- `table.getState().sorting` becomes the narrow `table.atoms.sorting.get()`. Use `table.store.get()` only for a full snapshot/debug output. -- Wrap atom reads in Vue `computed` when deriving template values. -- In JSX/render functions, `table.Subscribe` provides a fine-grained boundary. Pass the callback as the explicit `children` prop because Vue JSX element children become slots. -- Controlled refs need getter-backed state slices plus per-slice callbacks that resolve value-or-function `Updater`s. -- The top-level `onStateChange` is removed. Use per-slice callbacks, external atoms, or `table.store.subscribe` to observe everything. -- External atoms come from `@tanstack/vue-store` and are supplied through `atoms`. Never provide both `atoms.pagination` and `state.pagination`. -- `table.baseAtoms` is internal writable state; prefer feature APIs or external atoms. - -## Rendering and Composition - -| v8 | v9 target | -| -------------------------------------------------------------------------------- | ---------------------------------------------------------- | -| `` | `` | -| Manual header/footer render props | `` / `:footer="footer"` | -| Repeated raw options | `tableOptions(...)` composition | -| Repeated table conventions | `createTableHook({ features, ... })` and pre-bound helpers | - -The old `render`/`props` FlexRender shape still compiles, but shorthand is the migration target. `createTableHook` is optional and intended for application-wide conventions. - -## Complete Shared Breaking-Change Map - -### Instance methods +Before 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 Vue-specific changes. -Row, cell, column, header, and related methods now live on shared prototypes and use `this`. Call them on their instances. Do not destructure them, pass them bare, or expect them in object spread, `Object.keys`, or JSON. Table methods are not affected. - -### Logical column pinning - -V9 has no `left`/`right` aliases. - -| old | new | -| -------------------------------------------------------------- | ------------------------------------------------------------- | -| `columnPinning.left` / `.right` | `.start` / `.end` | -| `column.pin('left' \| 'right')` | `column.pin('start' \| 'end')` | -| `getIsPinned() === 'left' \| 'right'` | `'start' \| 'end'` | -| `row.getLeftVisibleCells()` / `getRightVisibleCells()` | `getStartVisibleCells()` / `getEndVisibleCells()` | -| `getLeftHeaderGroups()` / `getRightHeaderGroups()` | `getStartHeaderGroups()` / `getEndHeaderGroups()` | -| `getLeftFooterGroups()` / `getRightFooterGroups()` | `getStartFooterGroups()` / `getEndFooterGroups()` | -| `getLeftFlatHeaders()` / `getRightFlatHeaders()` | `getStartFlatHeaders()` / `getEndFlatHeaders()` | -| `getLeftLeafHeaders()` / `getRightLeafHeaders()` | `getStartLeafHeaders()` / `getEndLeafHeaders()` | -| `getLeftLeafColumns()` / `getRightLeafColumns()` | `getStartLeafColumns()` / `getEndLeafColumns()` | -| `getLeftVisibleLeafColumns()` / `getRightVisibleLeafColumns()` | `getStartVisibleLeafColumns()` / `getEndVisibleLeafColumns()` | -| `getLeftTotalSize()` / `getRightTotalSize()` | `getStartTotalSize()` / `getEndTotalSize()` | -| `column.getStart('left')` | `column.getStart('start')` | -| `column.getAfter('right')` | `column.getAfter('end')` | -| `column.getIndex('left' \| 'right')` | `column.getIndex('start' \| 'end')` | - -Use CSS `inset-inline-start`/`inset-inline-end`; logical names do not automatically set DOM direction. `columnResizeDirection` is unchanged. - -### Pinning, sizing, and resizing - -- `enablePinning` splits into `enableColumnPinning` and `enableRowPinning`. -- Interactive resizing requires `columnSizingFeature` plus `columnResizingFeature`; fixed sizing needs only the former. -- `columnSizingInfo` becomes `columnResizing`. -- `setColumnSizingInfo()` becomes `setColumnResizing()`. -- `onColumnSizingInfoChange` becomes `onColumnResizingChange`. - -### Sorting, rows, and selection - -| v8 | v9 | -| ------------------------------ | ----------------------------- | -| `sortingFn` | `sortFn` | -| `sortingFns` | `sortFns` | -| `getSortingFn()` | `getSortFn()` | -| `getAutoSortingFn()` | `getAutoSortFn()` | -| `SortingFn` / `SortingFns` | `SortFn` / `SortFns` | -| `row._getAllCellsByColumnId()` | `row.getAllCellsByColumnId()` | - -Other `_`-prefixed internals are removed, including `_getPinnedRows`, `_getFacetedRowModel`, `_getFacetedMinMaxValues`, and `_getFacetedUniqueValues`. - -`getIsSomeRowsSelected()` and `getIsSomePageRowsSelected()` now mean at least one, including all. Indeterminate UI must also check `!getIsAllRowsSelected()` or `!getIsAllPageRowsSelected()`. - -## TypeScript Migration - -- Add `TFeatures` first: `ColumnDef`, `Column`, `Row`, `Table`. -- Replace `createColumnHelper()` with `createColumnHelper()`; use `columnHelper.columns([...])` for nested-array inference. -- Use `StockFeatures` when `stockFeatures` is the configuration. -- Existing `TableMeta`/`ColumnMeta` declaration merging must add `TFeatures` first. Prefer per-table `tableMeta`/`columnMeta: metaHelper<...>()` slots. -- Replace global `FilterFns`, `SortFns`, `AggregationFns`, and `FilterMeta` augmentation with registry slots and `filterMeta: metaHelper<...>()`; registered keys become valid strings in column defs. -- `RowData` is restricted to records or arrays; prefer explicit object row types. - -## Common Migration Failures - -### HIGH: Renaming only the composable - -`useTable({ getSortedRowModel: ... })` is still a v8 configuration. Move the row model and its prerequisite feature into `tableFeatures`. - -### HIGH: Unwrapping refs before useTable +Framework prerequisite: Vue 3.2 or newer (`vue >=3.2`). -Pass `data`, not `data.value`, or use a getter. Preserve the reactive source. +## Adapter audit -### HIGH: Passing prototype methods bare +- [ ] Replace `useVueTable` with `useTable` and preserve ref/computed/getter inputs. +- [ ] Keep features and columns stable, configure explicit features/row-model slots, and complete the shared core checklist. +- [ ] Replace `getState()` with tracked atom reads or intentional whole-store reads. Use `computed` for derived template values. +- [ ] Pair controlled reactive values with callbacks that resolve both updater forms, or supply stable Vue Store atoms. Remove global `onStateChange`. +- [ ] Pass `table.Subscribe` callbacks as the explicit `children` prop in JSX. +- [ ] Adopt FlexRender cell/header/footer shorthand; the old render/props shape remains supported. +- [ ] Use `tableOptions` or `createTableHook` only for repeated conventions and explicit context-hook export types when needed to break circular inference. -Use `row.getValue('name')`, not `const read = row.getValue`; shallow copies also lose methods. +## Load the affected details -### MEDIUM: JSX children as slots +When the audit finds old Vue 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). -For `table.Subscribe`, use `children={(atoms) => ...}` explicitly. +Shared pinning, sizing, sorting, selection, prototype-method, type, and registry changes stay in the core migration references. Renaming `useVueTable` alone does not complete the migration. -## Final Checklist +## Verify the migration -- [ ] `useVueTable` is replaced with `useTable`; refs/computed inputs remain reactive. -- [ ] Features, row models, and registries are in `tableFeatures`; core row model is removed. -- [ ] State reads use atoms/computed or the store intentionally; `onStateChange` is removed. -- [ ] External atom and controlled state ownership do not overlap. -- [ ] FlexRender shorthand is adopted where applicable. -- [ ] Prototype methods, pinning, sizing/resizing, sorting, row, and selection changes are audited. -- [ ] Helpers, types, meta, registries, and `RowData` use v9 shapes. -- [ ] Temporary `stockFeatures` usage has an explicit removal plan. +- [ ] Type-check against the installed v9 adapter and exercise every enabled client/manual feature flow. +- [ ] Verify external state writes, reactive data replacement, and the framework rendering paths changed above. +- [ ] Complete the core checklist, including layout and selection behavior when those features are used. +- [ ] Replace temporary `stockFeatures` when the target is explicit feature tree-shaking. -## API Discovery +## API discovery -Inspect `node_modules/@tanstack/vue-table/dist/index.d.ts` and `useTable.d.ts`; verify feature slots and the exact installed v9 APIs in `node_modules/@tanstack/table-core/dist/`. Do not reconstruct v9 from v8 memory. +Inspect `node_modules/@tanstack/vue-table/dist/index.d.ts` and the exported adapter declarations. Use `node_modules/@tanstack/table-core/dist/index.d.ts` for shared APIs. diff --git a/packages/vue-table/skills/migrate-v8-to-v9/references/adapter-migration.md b/packages/vue-table/skills/migrate-v8-to-v9/references/adapter-migration.md new file mode 100644 index 0000000000..673795897c --- /dev/null +++ b/packages/vue-table/skills/migrate-v8-to-v9/references/adapter-migration.md @@ -0,0 +1,51 @@ +# Vue adapter migration details + +Read when replacing Vue 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. + +## Replace `useVueTable` with `useTable` + +Preserve reactive option wrappers while replacing the composable. `data: data.value` captures one array; pass the ref or a getter returning its current value. + +```ts +const features = tableFeatures({ + rowSortingFeature, + sortedRowModel: createSortedRowModel(), + sortFns: { alphanumeric: sortFn_alphanumeric }, +}) +const data = ref(makeData()) +const table = useTable({ features, columns, data }) +``` + +## Vue state migration + +- Pass a `ref` or `computed` as `data`; the adapter unwraps and syncs it. Do not pass `data.value`, which is only a snapshot. A getter returning `data.value` is also supported. +- `table.getState().sorting` becomes the narrow `table.atoms.sorting.get()`. Use `table.store.get()` only for a full snapshot/debug output. +- Wrap atom reads in Vue `computed` when deriving template values. +- In JSX/render functions, `table.Subscribe` provides a fine-grained boundary. Pass the callback as the explicit `children` prop because Vue JSX element children become slots. +- Controlled refs need getter-backed state slices plus per-slice callbacks that resolve value-or-function `Updater`s. +- The top-level `onStateChange` is removed. Use per-slice callbacks, external atoms, or `table.store.subscribe` to observe everything. +- External atoms come from `@tanstack/vue-store` and are supplied through `atoms`. Never provide both `atoms.pagination` and `state.pagination`. +- `table.baseAtoms` is internal writable state; prefer feature APIs or external atoms. + +## Rendering and composition + +| v8 | v9 target | +| -------------------------------------------------------------------------------- | ---------------------------------------------------------- | +| `` | `` | +| Manual header/footer render props | `` / `:footer="footer"` | +| Repeated raw options | `tableOptions(...)` composition | +| Repeated table conventions | `createTableHook({ features, ... })` and pre-bound helpers | + +The old `render`/`props` FlexRender shape still compiles, but shorthand is the migration target. `createTableHook` is optional and intended for application-wide conventions. + +For 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). + +## API discovery + +Inspect `node_modules/@tanstack/vue-table/dist/index.d.ts` and its exported declarations for construction, rendering, and app hooks. + +## Sources + +- `TanStack/table:docs/framework/vue/guide/migrating.md` +- `TanStack/table:packages/vue-table/src/index.ts` +- `TanStack/table:examples/vue/basic-use-table` diff --git a/packages/vue-table/skills/table-state/SKILL.md b/packages/vue-table/skills/table-state/SKILL.md index c443fbe119..8b0675a797 100644 --- a/packages/vue-table/skills/table-state/SKILL.md +++ b/packages/vue-table/skills/table-state/SKILL.md @@ -1,34 +1,32 @@ --- name: table-state -description: > - Read Vue-backed table.atoms/store in templates, computed, watch, or table.Subscribe; own slices with refs/computed or external Vue Store atoms; and apply updater callbacks while preserving reactive option shapes. +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.2.5' + library_version: 9.2.5 requires: - - '@tanstack/table-core#core' - - getting-started + - '@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' + - TanStack/table:docs/framework/vue/guide/table-state.md + - TanStack/table:examples/vue/basic-external-state + - TanStack/table:packages/vue-table/src/useTable.ts --- -This skill builds on `@tanstack/table-core#core` and `getting-started`. Read them first for state ownership and Vue construction. +# Vue table state -## State Mental Model +Before starting, run `intent load @tanstack/table-core#table-state` for shared ownership, initialization, updates, and resets. -TanStack Table is primarily a state coordinator. Keep state internal unless another system needs to read, persist, or drive it. Without `initialState`, `atoms`, `state`, or `on[State]Change`, the table owns every registered slice. +## Read reactive state -- `table.baseAtoms` are internal writable atoms created from resolved initial state. -- `table.atoms` are readonly derived atoms for the active owner of each registered slice. -- `table.store` combines those atoms into one readonly flat store. +Vue-backed atom reads track dependencies inside templates, `computed`, `watch`, or a render boundary. `const page = table.atoms.pagination.get()` outside tracking captures a snapshot. Keep reactive option inputs as refs, computed values, or getters; passing `.value` once breaks later synchronization. -The Vue adapter backs atoms with refs/computed values and tracks reactive table options. Atom reads become reactive inside templates, `computed`, `watch`, or `table.Subscribe`; a read cached outside tracking is only a snapshot. State is feature-based, so a missing pagination atom or option means `rowPaginationFeature` was not registered. Keep `features` and `columns` stable; pass reactive `data` as a ref/computed instead of recreating arrays in table options. +`table.Subscribe` receives atoms in an explicit `children` prop. Vue JSX children become slots, so use ` {atoms.pagination.get().pageIndex}} />`. -## Setup +## Control a slice + +Keep features and columns stable. Preserve both the reactive value and its matching callback: ```ts import { computed, ref } from 'vue' @@ -36,156 +34,32 @@ import { rowPaginationFeature, tableFeatures, useTable, + type PaginationState, + type Updater, } from '@tanstack/vue-table' const features = tableFeatures({ rowPaginationFeature }) -const data = ref([{ name: 'Ada' }]) const columns = [{ accessorKey: 'name' }] -const table = useTable({ features, columns, data }) -const pageIndex = computed(() => table.atoms.pagination.get().pageIndex) -``` - -Internal state is usually enough. Atom reads are reactive only when Vue evaluates them in a tracked template, computed, watch, or render boundary. - -## Core Patterns - -### Control a slice without losing updater semantics - -```ts -import { computed, ref } from 'vue' -import type { PaginationState } from '@tanstack/vue-table' - +const data = ref([{ name: 'Ada' }]) const pagination = ref({ pageIndex: 0, pageSize: 20 }) -const controlledState = computed(() => ({ pagination: pagination.value })) -const onPaginationChange = ( - next: PaginationState | ((old: PaginationState) => PaginationState), -) => { - pagination.value = typeof next === 'function' ? next(pagination.value) : next -} -``` - -Pass `state: controlledState` and `onPaginationChange` to `useTable`. - -### Use Subscribe as a render boundary - -```tsx -table.Subscribe({ - children: (atoms) => {atoms.pagination.get().pageIndex + 1}, -}) -``` - -In Vue JSX, `children` is an explicit prop, not a slot child. - -## Choose State Ownership - -Use exactly one owner per slice: - -- Prefer internal state and feature methods for table-local behavior. -- Use `initialState` for starting/reset values; changing it later does not reset current state. -- Prefer a stable `@tanstack/vue-store` atom in `atoms` for cross-system ownership. Feature APIs update it directly, so omit `on[State]Change`. -- Use a ref/computed `state` value plus the matching callback for simple controlled state. Preserve the reactive wrapper and resolve raw values and updater functions. - -External atoms take precedence over external `state`, which syncs into the internal base atom. Do not configure multiple owners. The global v8 `onStateChange` option is gone; observe `table.store` if all state changes matter. - -## Initialize, Update, and Reset - -Use feature methods such as `setSorting`, `nextPage`, `toggleVisibility`, and `toggleSelected`. Direct `baseAtoms` writes are a rare escape hatch for internally owned state; write the external atom when it owns the slice. - -```ts -table.resetSorting() -table.resetPagination() -table.resetPagination(true) -``` - -Feature resets use `table.initialState` unless `true` requests the feature default and can update external owners. Core `table.reset()` only resets internal base atoms. Use slice types such as `PaginationState`; use `TableState` for the complete feature-inferred state. - -## Common Mistakes - -### HIGH Reading an untracked snapshot - -Wrong: - -```ts -const pageIndex = table.atoms.pagination.get().pageIndex -``` - -Correct: - -```ts -const pageIndex = computed(() => table.atoms.pagination.get().pageIndex) -``` - -The first read is current but does not make its consumer reactive. - -Source: `docs/framework/vue/guide/table-state.md` - -### HIGH Passing state.value once - -Wrong: - -```ts +const state = computed(() => ({ pagination: pagination.value })) const table = useTable({ features, columns, data, - state: controlledState.value, + state, + onPaginationChange: (next: Updater) => { + pagination.value = + typeof next === 'function' ? next(pagination.value) : next + }, }) +const pageSize = computed(() => table.atoms.pagination.get().pageSize) ``` -Correct: - -```ts -const table = useTable({ features, columns, data, state: controlledState }) -``` - -The adapter watches the computed ref; a one-time `.value` breaks future option synchronization. - -Source: `packages/vue-table/src/useTable.ts` - -### HIGH Assigning updater functions as values - -Wrong: - -```ts -const onPaginationChange = (next) => { - pagination.value = next -} -``` - -Correct: - -```ts -const onPaginationChange = (next) => { - pagination.value = typeof next === 'function' ? next(pagination.value) : next -} -``` - -Table callbacks accept either a value or a function of the previous value. - -Source: `examples/vue/basic-external-state/src/App.tsx` - -### MEDIUM Supplying JSX children as a slot - -Wrong: - -```tsx - - {(atoms) => {atoms.pagination.get().pageIndex}} - -``` - -Correct: - -```tsx - {atoms.pagination.get().pageIndex}} -/> -``` - -The Vue adapter declares `Subscribe(props: { children })` and expects the explicit prop. +Assign the resolved updater result to the ref. For shared atom ownership, use a stable `@tanstack/vue-store` atom in `atoms.` instead of mirroring the same slice in controlled refs. -Source: `packages/vue-table/src/useTable.ts` +For computed-state synchronization failures, updater mistakes, or JSX subscription 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. -## API Discovery +## API discovery -Inspect `node_modules/@tanstack/vue-table/dist/useTable.d.ts` and `reactivity.d.ts`; inspect the exact state slice in the installed core feature directory. +Inspect `node_modules/@tanstack/vue-table/dist/useTable.d.ts` and `reactivity.d.ts`; inspect the matching core feature declarations for the controlled slice. diff --git a/packages/vue-table/skills/table-state/references/reactivity.md b/packages/vue-table/skills/table-state/references/reactivity.md new file mode 100644 index 0000000000..c53225ee02 --- /dev/null +++ b/packages/vue-table/skills/table-state/references/reactivity.md @@ -0,0 +1,148 @@ +# Vue table reactive boundaries + +Read when optimizing subscriptions, composing external atoms, or debugging Vue-specific tracking and controlled updates. Shared ownership, initialization, and reset rules remain in `intent load @tanstack/table-core#table-state`. + +## Example context + +```ts +import { computed, ref } from 'vue' +import { + rowPaginationFeature, + tableFeatures, + useTable, +} from '@tanstack/vue-table' + +const features = tableFeatures({ rowPaginationFeature }) +const data = ref([{ name: 'Ada' }]) +const columns = [{ accessorKey: 'name' }] +const table = useTable({ features, columns, data }) +const pageIndex = computed(() => table.atoms.pagination.get().pageIndex) +``` + +Internal state is usually enough. Atom reads are reactive only when Vue evaluates them in a tracked template, computed, watch, or render boundary. + +## State patterns + +### Control a slice without losing updater semantics + +```ts +import { computed, ref } from 'vue' +import type { PaginationState } from '@tanstack/vue-table' + +const pagination = ref({ pageIndex: 0, pageSize: 20 }) +const controlledState = computed(() => ({ pagination: pagination.value })) +const onPaginationChange = ( + next: PaginationState | ((old: PaginationState) => PaginationState), +) => { + pagination.value = typeof next === 'function' ? next(pagination.value) : next +} +``` + +Pass `state: controlledState` and `onPaginationChange` to `useTable`. + +### Use Subscribe as a render boundary + +```tsx +table.Subscribe({ + children: (atoms) => {atoms.pagination.get().pageIndex + 1}, +}) +``` + +In Vue JSX, `children` is an explicit prop, not a slot child. + +## Common mistakes + +### HIGH Reading an untracked snapshot + +Wrong: + +```ts +const pageIndex = table.atoms.pagination.get().pageIndex +``` + +Correct: + +```ts +const pageIndex = computed(() => table.atoms.pagination.get().pageIndex) +``` + +The first read is current but does not make its consumer reactive. + +Source: `docs/framework/vue/guide/table-state.md` + +### HIGH Passing state.value once + +Wrong: + +```ts +const table = useTable({ + features, + columns, + data, + state: controlledState.value, +}) +``` + +Correct: + +```ts +const table = useTable({ features, columns, data, state: controlledState }) +``` + +The adapter watches the computed ref; a one-time `.value` breaks future option synchronization. + +Source: `packages/vue-table/src/useTable.ts` + +### HIGH Assigning updater functions as values + +Wrong: + +```ts +const onPaginationChange = (next) => { + pagination.value = next +} +``` + +Correct: + +```ts +const onPaginationChange = (next) => { + pagination.value = typeof next === 'function' ? next(pagination.value) : next +} +``` + +Table callbacks accept either a value or a function of the previous value. + +Source: `examples/vue/basic-external-state/src/App.tsx` + +### MEDIUM Supplying JSX children as a slot + +Wrong: + +```tsx + + {(atoms) => {atoms.pagination.get().pageIndex}} + +``` + +Correct: + +```tsx + {atoms.pagination.get().pageIndex}} +/> +``` + +The Vue adapter declares `Subscribe(props: { children })` and expects the explicit prop. + +Source: `packages/vue-table/src/useTable.ts` + +## API discovery + +Inspect `node_modules/@tanstack/vue-table/dist/useTable.d.ts` and `reactivity.d.ts`; inspect the exact state slice in the installed core feature directory. + +## 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` diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b1da5b6da1..8ef8a11894 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -301,6 +301,9 @@ importers: vitest: specifier: ^4.1.11 version: 4.1.11(@types/node@26.6.4)(@vitest/coverage-v8@4.1.11)(jsdom@30.1.1(@noble/hashes@2.2.0))(vite@8.3.2(@types/node@26.6.4)(esbuild@0.28.2)(jiti@2.7.0)(less@4.6.7)(sass-embedded@1.105.1)(sass@1.101.0)(sugarss@5.0.1(postcss@8.5.28))(terser@5.49.0)(yaml@2.9.0)) + yaml: + specifier: 2.9.0 + version: 2.9.0 examples/alpine/aggregation: dependencies: diff --git a/scripts/skill-snippets-angular.tsconfig.json b/scripts/skill-snippets-angular.tsconfig.json new file mode 100644 index 0000000000..235f9b1ab9 --- /dev/null +++ b/scripts/skill-snippets-angular.tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "../packages/angular-table/tsconfig.json", + "compilerOptions": { + // Snippets resolve core source, which does not enable this Angular-only rule. + "noPropertyAccessFromIndexSignature": false + } +} diff --git a/scripts/skill-tree.mjs b/scripts/skill-tree.mjs new file mode 100644 index 0000000000..fb21ae4320 --- /dev/null +++ b/scripts/skill-tree.mjs @@ -0,0 +1,197 @@ +import { access, readFile } from 'node:fs/promises' +import { dirname, relative, resolve, sep } from 'node:path' +import markdownLinks from 'markdown-link-extractor' +import { glob } from 'tinyglobby' +import { parse } from 'yaml' + +const posix = (path) => path.split(sep).join('/') +const sameMembers = (a = [], b = []) => + a.length === b.length && a.every((value) => b.includes(value)) + +export async function validateSkillTree(rootDir) { + const errors = [] + const read = (path) => readFile(resolve(rootDir, path), 'utf8') + const tree = parse(await read('_artifacts/skill_tree.yaml')) + const domain = parse(await read('_artifacts/domain_map.yaml')) + const documents = new Map( + await Promise.all( + (await glob('packages/*/skills/**/*.md', { cwd: rootDir })).map( + async (path) => [path, await read(path)], + ), + ), + ) + const domainSkills = new Map() + for (const skill of domain.skills) { + const id = `${skill.package}#${skill.slug}` + if (domainSkills.has(id)) errors.push(`Duplicate domain skill: ${id}`) + domainSkills.set(id, skill) + } + const expected = new Set() + const dependencies = new Map() + const packageNames = new Set() + const sourcePaths = new Set() + let referenceCount = 0 + + for (const skill of tree.skills) { + const manifest = JSON.parse(await read(`${skill.package}/package.json`)) + const id = `${manifest.name}#${skill.slug}` + packageNames.add(manifest.name) + if (dependencies.has(id)) errors.push(`Duplicate tree skill: ${id}`) + dependencies.set(id, skill.requires ?? []) + if (skill.path !== `${skill.package}/skills/${skill.slug}/SKILL.md`) { + errors.push( + `${id}: entry point must be inside its package skills directory`, + ) + } + if (!manifest.files?.includes('skills')) { + errors.push(`${manifest.name}: package files must include skills`) + } + const inventory = domainSkills.get(id) + if (!inventory) errors.push(`${id}: missing from domain map`) + if ( + inventory && + !sameMembers( + skill.references, + inventory.references?.map((reference) => reference.path), + ) + ) { + errors.push(`${id}: tree references differ from domain map`) + } + if (inventory && !sameMembers(skill.requires, inventory.requires)) { + errors.push(`${id}: tree prerequisites differ from domain map`) + } + + expected.add(skill.path) + const content = documents.get(skill.path) + if (content === undefined) { + errors.push(`Missing declared document: ${skill.path}`) + continue + } + const frontmatter = parse( + content.match(/^---\r?\n([\s\S]*?)\r?\n---/)?.[1] ?? '', + ) + if (!frontmatter) { + errors.push(`${skill.path}: missing skill frontmatter`) + continue + } + if (!sameMembers(frontmatter.requires, skill.requires)) { + errors.push(`${id}: frontmatter prerequisites differ from tree`) + } + const body = content.replace(/^---\r?\n[\s\S]*?\r?\n---/, '') + const links = new Set( + markdownLinks(body).map((link) => + resolve(rootDir, dirname(skill.path), link.split('#')[0]), + ), + ) + const refs = skill.references ?? [] + if (new Set(refs).size !== refs.length) + errors.push(`${id}: duplicate references`) + for (const reference of refs) { + const path = posix( + relative(rootDir, resolve(rootDir, dirname(skill.path), reference)), + ) + if ( + !reference.startsWith('references/') || + !reference.endsWith('.md') || + reference.split('/').includes('..') + ) { + errors.push(`${id}: invalid reference path ${reference}`) + } + referenceCount++ + expected.add(path) + const referenceContent = documents.get(path) + if (referenceContent === undefined) + errors.push(`Missing declared document: ${path}`) + else if (/^---\r?\n/.test(referenceContent)) + errors.push( + `${path}: references must be plain Markdown without skill frontmatter`, + ) + if (!links.has(resolve(rootDir, path))) + errors.push( + `${id}: reference needs a direct Markdown link: ${reference}`, + ) + const evidence = inventory?.references?.find( + (item) => item.path === reference, + ) + if (!evidence?.sources?.length) + errors.push(`${path}: domain reference has no sources`) + for (const source of evidence?.sources ?? []) { + if (!skill.sources?.includes(source)) + errors.push(`${id}: tree sources omit reference evidence ${source}`) + } + } + for (const source of skill.sources ?? []) { + if (!frontmatter.sources?.includes(source)) + errors.push(`${id}: frontmatter sources omit tree evidence ${source}`) + sourcePaths.add(source) + } + } + + for (const id of domainSkills.keys()) { + if (!dependencies.has(id)) + errors.push(`${id}: domain skill missing from tree`) + } + for (const [path, content] of documents) { + if (!expected.has(path)) errors.push(`Undeclared skill document: ${path}`) + const packageDir = path.slice(0, path.indexOf('/skills/')) + const body = content.replace(/^---\r?\n[\s\S]*?\r?\n---/, '') + for (const link of markdownLinks(body)) { + if (/^(?:[a-z][a-z\d+.-]*:|#|\/\/)/i.test(link)) continue + const target = resolve( + rootDir, + dirname(path), + decodeURIComponent(link.split(/[?#]/)[0]), + ) + const inside = relative(resolve(rootDir, packageDir), target) + if (inside.startsWith('..') || !inside) { + errors.push(`${path}: local link leaves its published package: ${link}`) + continue + } + try { + await access(target) + } catch { + errors.push(`${path}: broken local link: ${link}`) + } + } + for (const [id] of content.matchAll(/@tanstack\/[\w-]+#[\w/-]+/g)) { + if (packageNames.has(id.split('#')[0]) && !dependencies.has(id)) + errors.push(`${path}: unknown skill identity ${id}`) + } + } + for (const source of sourcePaths) { + if (!source.startsWith('TanStack/table:')) continue + const path = source.slice('TanStack/table:'.length).split('#')[0] + if (/[*?{]/.test(path)) { + if (!(await glob(path, { cwd: rootDir })).length) + errors.push(`Source has no matches: ${source}`) + } else { + try { + await access(resolve(rootDir, path)) + } catch { + errors.push(`Missing source: ${source}`) + } + } + } + + const visited = new Set() + const visit = (id, ancestors = []) => { + if (ancestors.includes(id)) { + errors.push( + `Cyclic skill prerequisites: ${[...ancestors, id].join(' -> ')}`, + ) + return + } + if (visited.has(id)) return + for (const requirement of dependencies.get(id) ?? []) { + const target = requirement.includes('#') + ? requirement + : `${id.split('#')[0]}#${requirement}` + if (!dependencies.has(target)) + errors.push(`${id}: missing prerequisite ${target}`) + else visit(target, [...ancestors, id]) + } + visited.add(id) + } + for (const id of dependencies.keys()) visit(id) + return { errors, skillCount: tree.skills.length, referenceCount } +} diff --git a/scripts/tests/skill-tree.test.mjs b/scripts/tests/skill-tree.test.mjs new file mode 100644 index 0000000000..ec1c6e999b --- /dev/null +++ b/scripts/tests/skill-tree.test.mjs @@ -0,0 +1,288 @@ +import assert from 'node:assert/strict' +import { execFileSync } from 'node:child_process' +import { cp, mkdir, mkdtemp, readFile, rm, writeFile } from 'node:fs/promises' +import { tmpdir } from 'node:os' +import { dirname, join, relative, resolve } from 'node:path' +import test from 'node:test' +import { fileURLToPath } from 'node:url' +import { listIntentSkills, loadIntentSkill } from '@tanstack/intent/core' +import markdownLinks from 'markdown-link-extractor' +import { parse, stringify } from 'yaml' +import { rootDir } from '../config.js' +import { validateSkillTree } from '../skill-tree.mjs' + +async function temporaryDirectory(t) { + const directory = await mkdtemp(join(tmpdir(), 'table-skill-test-')) + t.after(() => rm(directory, { recursive: true, force: true })) + return directory +} + +async function write(directory, path, content) { + const target = join(directory, path) + await mkdir(dirname(target), { recursive: true }) + await writeFile(target, content) +} + +async function artifactFixture(t) { + const directory = await temporaryDirectory(t) + const skill = { + slug: 'core', + package: 'packages/sample', + path: 'packages/sample/skills/core/SKILL.md', + sources: ['TanStack/table:packages/sample/src/index.ts'], + references: ['references/selection.md'], + } + await write( + directory, + 'packages/sample/package.json', + JSON.stringify({ name: '@tanstack/sample', files: ['skills'] }), + ) + await write(directory, 'packages/sample/src/index.ts', 'export {}\n') + await write( + directory, + '_artifacts/skill_tree.yaml', + stringify({ skills: [skill] }), + ) + await write( + directory, + '_artifacts/domain_map.yaml', + stringify({ + skills: [ + { + ...skill, + package: '@tanstack/sample', + references: [ + { path: 'references/selection.md', sources: skill.sources }, + ], + }, + ], + }), + ) + await write( + directory, + skill.path, + `---\n${stringify({ name: 'core', description: 'Sample skill', sources: skill.sources })}---\n# Sample\n\nFor selection, read [selection](references/selection.md).\n`, + ) + await write( + directory, + 'packages/sample/skills/core/references/selection.md', + '# Selection\n\nSelection details.\n', + ) + return directory +} + +test('artifact validation accepts a directly linked reference', async (t) => { + const result = await validateSkillTree(await artifactFixture(t)) + assert.deepEqual(result, { errors: [], skillCount: 1, referenceCount: 1 }) +}) + +test('missing and undiscoverable references fail validation', async (t) => { + const directory = await artifactFixture(t) + await rm( + join(directory, 'packages/sample/skills/core/references/selection.md'), + ) + let result = await validateSkillTree(directory) + assert( + result.errors.some((error) => error.includes('Missing declared document')), + ) + await write( + directory, + 'packages/sample/skills/core/references/selection.md', + '# Selection\n', + ) + const entry = join(directory, 'packages/sample/skills/core/SKILL.md') + await writeFile( + entry, + (await readFile(entry, 'utf8')).replace( + '[selection](references/selection.md)', + 'selection', + ), + ) + result = await validateSkillTree(directory) + assert( + result.errors.some((error) => + error.includes('needs a direct Markdown link'), + ), + ) +}) + +test('undeclared files and references disguised as skills fail validation', async (t) => { + const directory = await artifactFixture(t) + await write( + directory, + 'packages/sample/skills/selection/SKILL.md', + '---\nname: selection\ndescription: Accidental extra catalog entry\n---\n', + ) + await write( + directory, + 'packages/sample/skills/core/references/selection.md', + '---\nname: selection\n---\n# Selection\n', + ) + const { errors } = await validateSkillTree(directory) + assert(errors.some((error) => error.includes('Undeclared skill document'))) + assert( + errors.some((error) => error.includes('references must be plain Markdown')), + ) +}) + +test('removed identities and cyclic prerequisites fail validation', async (t) => { + const directory = await artifactFixture(t) + const treePath = join(directory, '_artifacts/skill_tree.yaml') + const tree = parse(await readFile(treePath, 'utf8')) + tree.skills[0].requires = ['core', 'removed'] + await writeFile(treePath, stringify(tree)) + const entryPath = join(directory, tree.skills[0].path) + await writeFile( + entryPath, + `${await readFile(entryPath, 'utf8')}\nLoad @tanstack/sample#removed.\n`, + ) + const { errors } = await validateSkillTree(directory) + assert(errors.some((error) => error.includes('Cyclic skill prerequisites'))) + assert( + errors.some((error) => + error.includes('missing prerequisite @tanstack/sample#removed'), + ), + ) + assert( + errors.some((error) => + error.includes('unknown skill identity @tanstack/sample#removed'), + ), + ) +}) + +test('reference evidence must remain in the owning skill for staleness checks', async (t) => { + const directory = await artifactFixture(t) + const entryPath = join(directory, 'packages/sample/skills/core/SKILL.md') + await writeFile( + entryPath, + (await readFile(entryPath, 'utf8')).replace( + 'sources:\n - TanStack/table:packages/sample/src/index.ts\n', + '', + ), + ) + const { errors } = await validateSkillTree(directory) + assert( + errors.some((error) => + error.includes('frontmatter sources omit tree evidence'), + ), + ) +}) + +test('Intent discovers eight React/core entry points and leaves references unloaded', async (t) => { + const directory = await temporaryDirectory(t) + const adapter = JSON.parse( + await readFile(join(rootDir, 'packages/react-table/package.json'), 'utf8'), + ) + await write( + directory, + 'package.json', + JSON.stringify({ + name: 'skill-consumer', + version: '1.0.0', + dependencies: { '@tanstack/react-table': adapter.version }, + intent: { skills: ['@tanstack/react-table', '@tanstack/table-core'] }, + }), + ) + for (const name of ['table-core', 'react-table']) { + const target = join(directory, 'node_modules/@tanstack', name) + await mkdir(target, { recursive: true }) + await cp( + join(rootDir, 'packages', name, 'package.json'), + join(target, 'package.json'), + ) + await cp( + join(rootDir, 'packages', name, 'skills'), + join(target, 'skills'), + { recursive: true }, + ) + } + const listed = listIntentSkills({ cwd: directory }) + assert.deepEqual(listed.skills.map((skill) => skill.use).sort(), [ + '@tanstack/react-table#getting-started', + '@tanstack/react-table#migrate-v8-to-v9', + '@tanstack/react-table#table-state', + '@tanstack/table-core#core', + '@tanstack/table-core#custom-features', + '@tanstack/table-core#migrate-v8-to-v9', + '@tanstack/table-core#table-features', + '@tanstack/table-core#table-state', + ]) + const referencePath = + 'node_modules/@tanstack/table-core/skills/table-features/references/row-selection.md' + await write( + directory, + referencePath, + '# Reference sentinel: read only for selection\n', + ) + const corePath = join( + directory, + 'node_modules/@tanstack/table-core/skills/core/SKILL.md', + ) + await writeFile( + corePath, + `${await readFile(corePath, 'utf8')}\nPrerequisite sentinel: separate core read\n`, + ) + const loaded = loadIntentSkill('@tanstack/table-core#table-features', { + cwd: directory, + }) + assert(!loaded.content.includes('Reference sentinel')) + assert(!loaded.content.includes('Prerequisite sentinel')) + const referenceLink = markdownLinks(loaded.content).find((link) => + link.endsWith('/references/row-selection.md'), + ) + assert(referenceLink, 'Intent load must preserve the reference link') + assert.match( + await readFile(resolve(directory, referenceLink), 'utf8'), + /Reference sentinel/, + ) + + const cli = fileURLToPath( + new URL('cli.mjs', import.meta.resolve('@tanstack/intent')), + ) + const run = (...args) => + execFileSync(process.execPath, [cli, ...args], { + cwd: directory, + encoding: 'utf8', + }) + const defaults = run('install', '--dry-run') + assert(!defaults.includes(' - id:')) + const mappings = run('install', '--map', '--dry-run') + const block = mappings.match( + /\n([\s\S]*?)/, + )[1] + const mappedIds = parse(block) + .tanstackIntent.map((mapping) => mapping.id) + .sort() + assert.deepEqual(mappedIds, listed.skills.map((skill) => skill.use).sort()) + t.diagnostic( + `React/core: ${listed.skills.length} catalog entries; ${block.length} characters in mapped guidance`, + ) +}) + +test('every declared reference ships in its npm package', async () => { + const tree = parse( + await readFile(join(rootDir, '_artifacts/skill_tree.yaml'), 'utf8'), + ) + for (const packageDir of new Set( + tree.skills + .filter((skill) => skill.references?.length) + .map((skill) => skill.package), + )) { + const packed = JSON.parse( + execFileSync('npm', ['pack', '--dry-run', '--json', '--ignore-scripts'], { + cwd: join(rootDir, packageDir), + encoding: 'utf8', + stdio: ['ignore', 'pipe', 'pipe'], + }), + )[0] + const paths = new Set(packed.files.map((file) => file.path)) + for (const skill of tree.skills.filter( + (entry) => entry.package === packageDir, + )) { + for (const reference of skill.references ?? []) { + const path = relative(packageDir, join(dirname(skill.path), reference)) + assert(paths.has(path), `${packageDir} tarball is missing ${path}`) + } + } + } +}) diff --git a/scripts/typecheck-skill-snippets.mjs b/scripts/typecheck-skill-snippets.mjs index 59de50a137..52528a8d60 100644 --- a/scripts/typecheck-skill-snippets.mjs +++ b/scripts/typecheck-skill-snippets.mjs @@ -7,7 +7,7 @@ import { glob } from 'tinyglobby' import { packages, rootDir } from './config.js' const markerPattern = // -const skillPaths = await glob('packages/*/skills/**/SKILL.md', { +const skillPaths = await glob('packages/*/skills/**/*.md', { cwd: rootDir, absolute: true, }) diff --git a/scripts/validate-skill-content.mjs b/scripts/validate-skill-content.mjs index a55779f155..b7580099c0 100644 --- a/scripts/validate-skill-content.mjs +++ b/scripts/validate-skill-content.mjs @@ -4,7 +4,7 @@ import { glob } from 'tinyglobby' import { packages, rootDir } from './config.js' -const skillPaths = await glob('packages/*/skills/**/SKILL.md', { +const skillPaths = await glob('packages/*/skills/**/*.md', { cwd: rootDir, absolute: true, }) @@ -139,7 +139,8 @@ for (const skillPath of skillPaths) { ) } if ( - relativePath.includes('lit-table/skills/with-tanstack-virtual') && + relativePath.startsWith('packages/lit-table/skills/') && + relativePath.endsWith('/with-tanstack-virtual.md') && /columns:\s*\[\.\.\./.test(block.body) ) { errors.push( @@ -169,5 +170,7 @@ if (errors.length) { console.error(errors.join('\n')) process.exitCode = 1 } else { - console.log(`Validated content invariants for ${skillPaths.length} skills`) + console.log( + `Validated content invariants for ${skillPaths.length} skill documents`, + ) } diff --git a/scripts/validate-skill-tree.mjs b/scripts/validate-skill-tree.mjs new file mode 100644 index 0000000000..58bea7ea7d --- /dev/null +++ b/scripts/validate-skill-tree.mjs @@ -0,0 +1,12 @@ +import { rootDir } from './config.js' +import { validateSkillTree } from './skill-tree.mjs' + +const { errors, skillCount, referenceCount } = await validateSkillTree(rootDir) +if (errors.length) { + console.error(errors.join('\n')) + process.exitCode = 1 +} else { + console.log( + `Validated ${skillCount} skill entry points and ${referenceCount} references against Intent artifacts`, + ) +}