@tanstack/vue-table 9.0.0-beta.4 → 9.0.0-beta.40

package/skills/vue/migrate-v8-to-v9/SKILL.md

@@ -2,12 +2,12 @@
 name: vue/migrate-v8-to-v9
 description: >
   Mechanical breaking-change migration from `@tanstack/vue-table` v8 to v9. Rename `useVueTable`
-  → `useTable`, move `getCoreRowModel`/`getSortedRowModel`/etc. options into `rowModels`
-  factories, add the mandatory `features` via `tableFeatures({...})`, update
-  `createColumnHelper<TData>()` → `createColumnHelper<typeof features, TData>()`, rename
+  → `useTable`, move `getCoreRowModel`/`getSortedRowModel`/etc. options into the `tableFeatures`
+  object as row model factory slots, add the mandatory `features` via `tableFeatures({...})`,
+  update `createColumnHelper<TData>()` → `createColumnHelper<typeof features, TData>()`, rename
   `sortingFn`/`sortingFns` → `sortFn`/`sortFns`, swap `table.getState()` for `table.state`
-  / `table.state` / `table.atoms.<slice>.get()`, and prefer `<FlexRender :cell="cell" />` over the
-  legacy `:render`/`:props` shape. Vue has NO `/legacy` entrypoint — migration is a direct
+  / `table.state` / `table.atoms.<slice>.get()`, and prefer `<FlexRender :cell="cell" />` over
+  the legacy `:render`/`:props` shape. Vue has NO `/legacy` entrypoint — migration is a direct
   rewrite. The Vue adapter installs `vueReactivity()` automatically.
 type: lifecycle
 library: tanstack-table
@@ -89,7 +89,13 @@ import {
   useTable,
 } from '@tanstack/vue-table'
 
-const features = tableFeatures({ rowSortingFeature, rowPaginationFeature })
+const features = tableFeatures({
+  rowSortingFeature,
+  rowPaginationFeature,
+  sortedRowModel: createSortedRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+  sortFns,
+})
 const columnHelper = createColumnHelper<typeof features, Person>()
 const columns = columnHelper.columns([
   columnHelper.accessor('age', { header: 'Age', sortFn: 'alphanumeric' }), // sortingFn → sortFn
@@ -97,10 +103,6 @@ const columns = columnHelper.columns([
 
 const table = useTable({
   features,
-  rowModels: {
-    sortedRowModel: createSortedRowModel(sortFns),
-    paginatedRowModel: createPaginatedRowModel(),
-  },
   columns,
   data,
 })
@@ -118,10 +120,10 @@ const table = useTable({
 | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
 | `useVueTable(opts)`                                                                       | `useTable(opts, selector?)`                                                           |
 | `getCoreRowModel: getCoreRowModel()`                                                      | implicit; not an option                                                               |
-| `getSortedRowModel: getSortedRowModel()`                                                  | `rowModels: { sortedRowModel: createSortedRowModel(sortFns) }`                        |
-| `getFilteredRowModel: getFilteredRowModel()`                                              | `rowModels: { filteredRowModel: createFilteredRowModel(filterFns) }`                  |
-| `getPaginationRowModel: getPaginationRowModel()`                                          | `rowModels: { paginatedRowModel: createPaginatedRowModel() }`                         |
-| `getGroupedRowModel: getGroupedRowModel()`                                                | `rowModels: { groupedRowModel: createGroupedRowModel(aggregationFns) }`               |
+| `getSortedRowModel: getSortedRowModel()`                                                  | `tableFeatures({ sortedRowModel: createSortedRowModel(), sortFns })`                  |
+| `getFilteredRowModel: getFilteredRowModel()`                                              | `tableFeatures({ filteredRowModel: createFilteredRowModel(), filterFns })`            |
+| `getPaginationRowModel: getPaginationRowModel()`                                          | `tableFeatures({ paginatedRowModel: createPaginatedRowModel() })`                     |
+| `getGroupedRowModel: getGroupedRowModel()`                                                | `tableFeatures({ groupedRowModel: createGroupedRowModel(), aggregationFns })`         |
 | `createColumnHelper<TData>()`                                                             | `createColumnHelper<typeof features, TData>()`                                        |
 | `ColumnDef<TData, TValue>`                                                                | `ColumnDef<TFeatures, TData, TValue>`                                                 |
 | `Column<TData, TValue>` / `Row<TData>` / `Cell<TData, TValue>`                            | `…<TFeatures, TData, TValue>`                                                         |
@@ -143,19 +145,28 @@ non-Vue-specific renames are shared across adapters).
 
 ## Core Patterns
 
-### 1. Convert `getXRowModel` options to `rowModels` factories
+### 1. Convert `getXRowModel` options to features-slot factories
 
-Every row-model factory now requires its `*Fns` parameter — this is what makes the registries
-tree-shakeable in v9.
+Row model factories now live on the `tableFeatures({...})` object alongside the feature
+they belong to. The `*Fns` registries move there too — this is what makes them tree-shakeable
+in v9.
 
 ```ts
-rowModels: {
-  sortedRowModel:    createSortedRowModel(sortFns),
-  filteredRowModel:  createFilteredRowModel(filterFns),
+const features = tableFeatures({
+  rowSortingFeature,
+  columnFilteringFeature,
+  rowPaginationFeature,
+  rowGroupingFeature,
+  rowExpandingFeature,
+  sortedRowModel: createSortedRowModel(),
+  filteredRowModel: createFilteredRowModel(),
   paginatedRowModel: createPaginatedRowModel(),
-  groupedRowModel:   createGroupedRowModel(aggregationFns),
-  expandedRowModel:  createExpandedRowModel(),
-}
+  groupedRowModel: createGroupedRowModel(),
+  expandedRowModel: createExpandedRowModel(),
+  sortFns,
+  filterFns,
+  aggregationFns,
+})
 ```
 
 The `*Fns` registries are open-ended; do not cite a number of built-in fns.
@@ -214,7 +225,6 @@ const sorting = ref<SortingState>([])
 
 const table = useTable({
   features,
-  rowModels: { sortedRowModel: createSortedRowModel(sortFns) },
   columns,
   data,
   state: {
@@ -276,14 +286,15 @@ const table = useTable({
   getCoreRowModel: getCoreRowModel(),
 })
 
-// ✅ Core row model is implicit. `rowModels: {}` is fine.
-const table = useTable({ features, rowModels: {}, columns, data })
+// ✅ Core row model is implicit. No `rowModels` option needed.
+const table = useTable({ features, columns, data })
 ```
 
 ### Forgetting `features` (CRITICAL)
 
 `features` is required even for a no-features migration. Pass `tableFeatures({})` for empty,
-or list everything you use. Without it: `'features' is missing in type`.
+or list everything you use (features + row model factories + fn registries). Without it:
+`'features' is missing in type`.
 
 ### Wrong `createColumnHelper` generic arity (CRITICAL)
 
@@ -298,14 +309,21 @@ const columnHelper = createColumnHelper<typeof features, Person>()
 Same applies to type annotations: `ColumnDef<typeof features, Person>`,
 `Row<typeof features, Person>`, `Cell<typeof features, Person, unknown>`.
 
-### Forgetting to pass `sortFns` / `filterFns` to row-model factories (CRITICAL)
+### Forgetting to register `sortFns` / `filterFns` in the features object (CRITICAL)
 
 ```ts
 // ❌ Runtime: no sort fns registered, sort is a no-op.
-sortedRowModel: createSortedRowModel()
+const features = tableFeatures({
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+})
 
-// ✅
-sortedRowModel: createSortedRowModel(sortFns)
+// ✅ Register the fn map as a slot on the features object.
+const features = tableFeatures({
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns,
+})
 ```
 
 ### Missed `sortingFn` → `sortFn` rename (HIGH)
@@ -371,5 +389,5 @@ etc.
 - `tanstack-table/vue/getting-started` — the v9 minimum-viable shape
 - `tanstack-table/vue/table-state` — reactivity model + reading state
 - `tanstack-table/vue/production-readiness` — finish the migration with bundle + identity audits
-- `tanstack-table/table-core/setup` — `features` / `rowModels` deep dive
+- `tanstack-table/table-core/setup` — `features` / row model factory slots deep dive
 - `tanstack-table/table-core/column-definitions` — column helper + generics

package/skills/vue/production-readiness/SKILL.md

@@ -3,13 +3,14 @@ name: vue/production-readiness
 description: >
   Ship-ready optimizations for `@tanstack/vue-table` v9. Tree-shake by listing ONLY the
   `features` you actually render — never default to `stockFeatures`. Keep `features`,
-  `rowModels`, `columnHelper`, and `columns` at module scope for stable identity (Vue
-  re-evaluates the `<script setup>` block per component instance — declare these outside or in
-  a const). Use the `useTable(opts, selector)` second argument or per-slice `computed(() =>
-  table.atoms.<slice>.get())` / `useSelector(table.atoms.<slice>)` from `@tanstack/vue-store`
-  to narrow re-renders. Vue's reactivity already evaluates only dirty computed deps, so
-  `table.Subscribe` is NOT the React-Compiler workaround it is in React — reach for
-  fine-grained reads (`computed`, `useSelector`) first.
+  `columnHelper`, and `columns` at module scope for stable identity (Vue re-evaluates the
+  `<script setup>` block per component instance — declare these outside or in a const). Row
+  model factories and fn registries live as slots on the `tableFeatures({...})` object, not as
+  a separate `rowModels` option. Use the `useTable(opts, selector)` second argument or per-slice
+  `computed(() => table.atoms.<slice>.get())` / `useSelector(table.atoms.<slice>)` from
+  `@tanstack/vue-store` to narrow re-renders. Vue's reactivity already evaluates only dirty
+  computed deps, so `table.Subscribe` is NOT the React-Compiler workaround it is in React;
+  reach for fine-grained reads (`computed`, `useSelector`) first.
 type: lifecycle
 library: tanstack-table
 framework: vue
@@ -52,26 +53,24 @@ import {
 export const features = tableFeatures({
   rowSortingFeature,
   rowPaginationFeature,
-})
-
-export const rowModels = {
-  sortedRowModel: createSortedRowModel(sortFns),
+  sortedRowModel: createSortedRowModel(),
   paginatedRowModel: createPaginatedRowModel(),
-}
+  sortFns,
+})
 ```
 
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useTable } from '@tanstack/vue-table'
-import { features, rowModels } from './table-setup'
+import { features } from './table-setup'
 import { columns } from './columns'
 
 const props = defineProps<{ data: Person[] }>()
 const data = ref(props.data)
 
 // Narrow selector — table.state only carries what we actually render at this level.
-const table = useTable({ features, rowModels, columns, data }, (state) => ({
+const table = useTable({ features, columns, data }, (state) => ({
   pagination: state.pagination,
   sorting: state.sorting,
 }))
@@ -95,12 +94,16 @@ const features = tableFeatures({ rowSortingFeature })
 isn't wired into a column def or UI handler, drop it. v9 is tree-shakeable specifically so you
 only pay for what you use.
 
-### 2. Module-scope `features` / `rowModels` / `columnHelper` / `columns`
+### 2. Module-scope `features` / `columnHelper` / `columns`
 
 ```ts
 // ❌ Inside <script setup> — every component instance creates new identities, which churns
 //    the table's option-watcher and triggers a `setOptions` on every reactive tick.
-const features = tableFeatures({ rowSortingFeature })
+const features = tableFeatures({
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns,
+})
 const columnHelper = createColumnHelper<typeof features, Person>()
 const columns = columnHelper.columns([
   /* ... */
@@ -109,7 +112,11 @@ const columns = columnHelper.columns([
 
 ```ts
 // ✅ Module scope — one identity, shared across instances, GC-friendly.
-const features = tableFeatures({ rowSortingFeature })
+const features = tableFeatures({
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns,
+})
 const columnHelper = createColumnHelper<typeof features, Person>()
 export const columns = columnHelper.columns([
   /* ... */
@@ -124,11 +131,11 @@ write `data: ref([...])` inline in the table options (a fresh ref each render).
 ```ts
 // ❌ Default selector — table.state contains every registered slice; any state change re-renders
 //    every consumer of table.state.
-const table = useTable({ features, rowModels, columns, data })
+const table = useTable({ features, columns, data })
 
 // ✅ Project only what THIS component renders. Other slices still drive table internals; you
 //    just don't subscribe to them at the component level.
-const table = useTable({ features, rowModels, columns, data }, (state) => ({
+const table = useTable({ features, columns, data }, (state) => ({
   pagination: state.pagination,
   sorting: state.sorting,
 }))
@@ -191,7 +198,7 @@ Use `table.Subscribe` only for cross-store source subscription (`<table.Subscrib
 Defeats the entire reason v9 is tree-shakeable. Replace with an explicit
 `tableFeatures({...})` listing only the features your UI renders.
 
-### Re-declaring `features` / `rowModels` / `columns` inside `<script setup>` (HIGH)
+### Re-declaring `features` / `columns` inside `<script setup>` (HIGH)
 
 Vue runs `<script setup>` once per component instance, but that's still per-page-navigation in
 SPAs and per-instance in any reusable component. Module scope is cheapest and shared.
@@ -217,7 +224,7 @@ watchEffect(() => {
 
 ```ts
 // ❌ Whole table re-evaluates table.state on every keystroke in a column filter.
-const table = useTable({ features, rowModels, columns, data })
+const table = useTable({ features, columns, data })
 
 // ✅
 const table = useTable(opts, (s) => ({ pagination: s.pagination }))

package/skills/vue/table-state/SKILL.md

@@ -41,9 +41,10 @@ v8 name `useVueTable` no longer exists.
 
 ## Setup
 
-Every Vue table call requires `features` (built from `tableFeatures({...})`) and `rowModels`.
-Core row model is automatic; only register `paginatedRowModel`, `sortedRowModel`, etc. when you
-use the matching feature.
+Every Vue table call requires `features` (built from `tableFeatures({...})`). Row model
+factories now live on the features object alongside the feature itself. Core row model is
+automatic; only register `paginatedRowModel`, `sortedRowModel`, etc. when you use the matching
+feature.
 
 ```vue
 <script setup lang="ts">
@@ -61,7 +62,11 @@ import {
 type Person = { firstName: string; lastName: string; age: number }
 
 // Stable identity — declare outside the component or at module scope.
-const features = tableFeatures({ rowSortingFeature })
+const features = tableFeatures({
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns,
+})
 const columnHelper = createColumnHelper<typeof features, Person>()
 const columns = columnHelper.columns([
   columnHelper.accessor('firstName', { header: 'First' }),
@@ -73,7 +78,6 @@ const data = ref<Person[]>([])
 
 const table = useTable({
   features,
-  rowModels: { sortedRowModel: createSortedRowModel(sortFns) },
   columns,
   // Reactive data: pass the ref directly OR a getter — the adapter unwraps.
   data,
@@ -102,7 +106,7 @@ const table = useTable({
 
 ### Why this works
 
-The Vue adapter calls `vueReactivity()` and installs it as `coreReativityFeature` automatically
+The Vue adapter calls `vueReactivity()` and installs it as `coreReactivityFeature` automatically
 (see `packages/vue-table/src/useTable.ts`):
 
 - Readonly atoms back onto `computed()` refs.
@@ -133,7 +137,6 @@ const snapshot = table.state
 const table = useTable(
   {
     features,
-    rowModels: { sortedRowModel: createSortedRowModel(sortFns) },
     columns,
     data,
   },
@@ -155,12 +158,11 @@ The adapter accepts a `ref`/`computed` for any option. The idiomatic shapes are:
 ```ts
 // (a) Pass the ref directly — adapter unwraps via `unref()`
 const data = ref(makeData(100))
-const table = useTable({ features, rowModels: {}, columns, data })
+const table = useTable({ features, columns, data })
 
 // (b) Use a getter when `data` is owned by a parent object
 const table = useTable({
   features,
-  rowModels: {},
   columns,
   get data() {
     return data.value
@@ -171,7 +173,6 @@ const table = useTable({
 const filtered = computed(() => data.value.filter(/* … */))
 const table = useTable({
   features,
-  rowModels: {},
   columns,
   get data() {
     return filtered.value
@@ -199,7 +200,10 @@ import {
   type PaginationState,
 } from '@tanstack/vue-table'
 
-const features = tableFeatures({ rowPaginationFeature })
+const features = tableFeatures({
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+})
 
 const paginationAtom = createAtom<PaginationState>({
   pageIndex: 0,
@@ -210,7 +214,6 @@ const pagination = useSelector(paginationAtom) // reactive ref-like
 const data = ref([] as Person[])
 const table = useTable({
   features,
-  rowModels: { paginatedRowModel: createPaginatedRowModel() },
   columns,
   data,
   atoms: { pagination: paginationAtom },
@@ -240,10 +243,6 @@ const pagination = ref<PaginationState>({ pageIndex: 0, pageSize: 10 })
 
 const table = useTable({
   features,
-  rowModels: {
-    sortedRowModel: createSortedRowModel(sortFns),
-    paginatedRowModel: createPaginatedRowModel(),
-  },
   columns,
   data,
   state: {
@@ -302,7 +301,6 @@ return () => (
 const pagination = ref<PaginationState>({ pageIndex: 0, pageSize: 10 })
 const table = useTable({
   features,
-  rowModels: {},
   columns,
   data,
   state: { pagination },
@@ -311,7 +309,6 @@ const table = useTable({
 // ✅ Use a getter so Vue tracks `.value`.
 const table = useTable({
   features,
-  rowModels: {},
   columns,
   data,
   state: {
@@ -355,17 +352,16 @@ import { useTable } from '@tanstack/vue-table'
 ```ts
 // ❌ `rowSortingFeature` not registered → `table.setSorting` and `table.atoms.sorting` do not exist.
 const features = tableFeatures({})
-const table = useTable({ features, rowModels: {}, columns, data })
+const table = useTable({ features, columns, data })
 table.setSorting([{ id: 'age', desc: true }]) // TS error / runtime no-op
 
-// ✅ Register the feature; add the matching row model factory if it's a row-model feature.
-const features = tableFeatures({ rowSortingFeature })
-const table = useTable({
-  features,
-  rowModels: { sortedRowModel: createSortedRowModel(sortFns) },
-  columns,
-  data,
+// ✅ Register the feature and its matching row model factory inside tableFeatures.
+const features = tableFeatures({
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns,
 })
+const table = useTable({ features, columns, data })
 ```
 
 ### Reimplementing built-in state transitions (CRITICAL — #1 AI tell)

package/src/FlexRender.ts

@@ -1,12 +1,27 @@
 import { defineComponent, h, isVNode } from 'vue'
 import type { PropType } from 'vue'
-import type {
-  Cell,
-  CellData,
-  Header,
-  RowData,
-  TableFeatures,
-} from '@tanstack/table-core'
+
+export interface FlexRenderCell {
+  column: {
+    columnDef: {
+      aggregatedCell?: any
+      cell?: any
+    }
+  }
+  getContext: () => any
+  getIsAggregated?: () => boolean
+  getIsPlaceholder?: () => boolean
+}
+
+export interface FlexRenderHeader {
+  column: {
+    columnDef: {
+      footer?: any
+      header?: any
+    }
+  }
+  getContext: () => any
+}
 
 /**
  * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
@@ -60,24 +75,24 @@ export const FlexRender = defineComponent({
       default: undefined,
     },
     cell: {
-      type: Object as PropType<Cell<any, any, any>>,
+      type: Object as PropType<FlexRenderCell>,
       default: undefined,
     },
     header: {
-      type: Object as PropType<Header<any, any, any>>,
+      type: Object as PropType<FlexRenderHeader>,
       default: undefined,
     },
     footer: {
-      type: Object as PropType<Header<any, any, any>>,
+      type: Object as PropType<FlexRenderHeader>,
       default: undefined,
     },
   },
   setup: (props: {
     render?: any
     props?: any
-    cell?: Cell<any, any, any>
-    header?: Header<any, any, any>
-    footer?: Header<any, any, any>
+    cell?: FlexRenderCell
+    header?: FlexRenderHeader
+    footer?: FlexRenderHeader
   }) => {
     return () => {
       // New shorthand pattern: extract render and props from cell/header/footer