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

package/skills/vue/client-to-server/SKILL.md

@@ -3,7 +3,7 @@ name: vue/client-to-server
 description: >
   Convert a client-side `@tanstack/vue-table` to server-side. Set `manualPagination` /
   `manualSorting` / `manualFiltering` / `manualGrouping` / `manualExpanding` for whichever
-  slices the server owns; drop the matching `rowModels` factories (don't ship
+  slices the server owns; omit the matching row model factory from `tableFeatures` (don't ship
   `paginatedRowModel` when the server paginates); supply `rowCount` so `table.getPageCount()`
   works; own the relevant state slices via either external atoms (`@tanstack/vue-store`
   `createAtom` + `options.atoms`) or `state` + `on[State]Change` with getter wrappers. Key any
@@ -87,10 +87,9 @@ watchEffect(() => {
   if (next != null) rowCount.value = next // keep last known total for pager UI
 })
 
-// 3) Manual pagination + `rowCount`. NO paginatedRowModel in `rowModels` — server paginates.
+// 3) Manual pagination + `rowCount`. No paginatedRowModel in features — server paginates.
 const table = useTable({
   features,
-  rowModels: {},
   columns,
   data: tableData,
   rowCount,
@@ -104,18 +103,19 @@ Source: `examples/vue/with-tanstack-query/src/App.tsx`, `examples/vue/basic-exte
 
 ## Core Patterns
 
-### 1. The `manual*` flag + `rowModels` drop pair
+### 1. The `manual*` flag + factory omission pair
 
-Pick which slices live server-side and flip the matching `manual*` flag. **Also drop the
-matching `rowModels` factory** — otherwise the table re-processes server-processed rows.
+Pick which slices live server-side and flip the matching `manual*` flag. **Also omit the
+matching row model factory from `tableFeatures`** — otherwise the table re-processes
+server-processed rows.
 
-| Server owns | Set                      | Drop from `rowModels` |
-| ----------- | ------------------------ | --------------------- |
-| Pagination  | `manualPagination: true` | `paginatedRowModel`   |
-| Sorting     | `manualSorting: true`    | `sortedRowModel`      |
-| Filtering   | `manualFiltering: true`  | `filteredRowModel`    |
-| Grouping    | `manualGrouping: true`   | `groupedRowModel`     |
-| Expanding   | `manualExpanding: true`  | `expandedRowModel`    |
+| Server owns | Set                      | Omit from `tableFeatures` |
+| ----------- | ------------------------ | ------------------------- |
+| Pagination  | `manualPagination: true` | `paginatedRowModel`       |
+| Sorting     | `manualSorting: true`    | `sortedRowModel`          |
+| Filtering   | `manualFiltering: true`  | `filteredRowModel`        |
+| Grouping    | `manualGrouping: true`   | `groupedRowModel`         |
+| Expanding   | `manualExpanding: true`  | `expandedRowModel`        |
 
 Column visibility / ordering / pinning / row selection are client-side state and stay as-is.
 
@@ -127,7 +127,6 @@ Without `rowCount`, `getPageCount()` falls back to `Math.ceil(data.length / page
 ```ts
 useTable({
   features,
-  rowModels: {},
   columns,
   data: tableData,
   rowCount: dataQuery.data.value?.rowCount, // or a stable ref/computed
@@ -151,7 +150,6 @@ const paginationAtom = createAtom<PaginationState>({
 })
 useTable({
   features,
-  rowModels: {},
   columns,
   data,
   rowCount,
@@ -169,7 +167,6 @@ const pagination = ref<PaginationState>({ pageIndex: 0, pageSize: 10 })
 
 useTable({
   features,
-  rowModels: {},
   columns,
   data,
   rowCount,
@@ -230,7 +227,6 @@ the table will paginate that 10-row slice again and show "Page 1 of 1".
 // ❌
 useTable({
   features,
-  rowModels: {},
   columns,
   data: serverPage.rows,
   rowCount,
@@ -243,13 +239,13 @@ useTable({
 
 ```ts
 // ❌ Factory ships for nothing AND the table re-paginates server-sliced data.
-rowModels: {
-  paginatedRowModel: createPaginatedRowModel()
-}
+const features = tableFeatures({
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+})
 
-// ✅
-rowModels: {
-}
+// ✅ Omit the factory when the server paginates; keep the feature for its API.
+const features = tableFeatures({ rowPaginationFeature })
 ```
 
 Same applies to `sortedRowModel`, `filteredRowModel`, `groupedRowModel`, `expandedRowModel`
@@ -267,7 +263,6 @@ when the server owns the slice.
 const pagination = ref({ pageIndex: 0, pageSize: 10 })
 useTable({
   features,
-  rowModels: {},
   columns,
   data,
   rowCount,
@@ -350,8 +345,8 @@ table.setColumnFilters(/* ... */)
 ### "API missing" because the feature isn't in `features` (CRITICAL — v9-specific)
 
 Server-side pagination still needs `rowPaginationFeature` in `tableFeatures({...})` — that's
-what surfaces `table.setPageIndex`, `table.nextPage`, `table.getPageCount`. The factory in
-`rowModels` is what you drop; the feature stays.
+what surfaces `table.setPageIndex`, `table.nextPage`, `table.getPageCount`. The row model
+factory (`paginatedRowModel`) is what you omit; the feature stays.
 
 ```ts
 const features = tableFeatures({ rowPaginationFeature }) // ✅ even with manualPagination

package/skills/vue/compose-with-tanstack-form/SKILL.md

@@ -60,7 +60,10 @@ type Person = {
 }
 type FormRow = Omit<Person, 'subRows'> // <-- avoid TS2589 in form DeepKeys
 
-const features = tableFeatures({ rowPaginationFeature })
+const features = tableFeatures({
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+})
 const columnHelper = createColumnHelper<typeof features, FormRow>()
 
 // 2) Form owns the data array. The table reads it.
@@ -99,7 +102,6 @@ const columns = computed(() =>
 
 const table = useTable({
   features,
-  rowModels: { paginatedRowModel: createPaginatedRowModel() },
   get columns() {
     return columns.value
   },
@@ -191,7 +193,6 @@ const form = useForm({ defaultValues: { data: makeData(100) } })
 
 const table = useTable({
   features,
-  rowModels: { paginatedRowModel: createPaginatedRowModel() },
   columns,
   get data() {
     return form.state.values.data
@@ -324,7 +325,6 @@ const columns = computed(() =>
 )
 const table = useTable({
   features,
-  rowModels: {},
   get columns() {
     return columns.value
   },

package/skills/vue/compose-with-tanstack-pacer/SKILL.md

@@ -150,7 +150,6 @@ const throttler = new Throttler(
 
 useTable({
   features,
-  rowModels: {},
   columns,
   data,
   state: {
@@ -301,8 +300,12 @@ useTable({ ..., data: filtered })
 ```ts
 // ✅ Use the table's filter feature; debounce the writer.
 useTable({
-  features: tableFeatures({ columnFilteringFeature, globalFilteringFeature }),
-  rowModels: { filteredRowModel: createFilteredRowModel(filterFns) },
+  features: tableFeatures({
+    columnFilteringFeature,
+    globalFilteringFeature,
+    filteredRowModel: createFilteredRowModel(),
+    filterFns,
+  }),
   columns,
   data,
 })

package/skills/vue/compose-with-tanstack-query/SKILL.md

@@ -4,12 +4,12 @@ description: >
   Server-side / async data flow for `@tanstack/vue-table` v9 + `@tanstack/vue-query`. Key the
   `useQuery` query on the table state that drives the request (pagination + sorting + filters).
   Set `manualPagination` / `manualSorting` / `manualFiltering` for slices the server owns.
-  Drop the matching `rowModels` factory (don't ship `paginatedRowModel` when the server
-  paginates). Pass `rowCount` so `table.getPageCount()` works without all rows in memory. Pass
-  `placeholderData: keepPreviousData` to avoid a "0 rows flash" between pages. The cleanest
-  wiring uses external `createAtom`s + `options.atoms` so the table writes through to the atom
-  and the query refetches with no `on[State]Change` plumbing. The canonical Vue example is at
-  `examples/vue/with-tanstack-query/`.
+  Omit the matching row model factory from `tableFeatures` (don't ship `paginatedRowModel` when
+  the server paginates). Pass `rowCount` so `table.getPageCount()` works without all rows in
+  memory. Pass `placeholderData: keepPreviousData` to avoid a "0 rows flash" between pages. The
+  cleanest wiring uses external `createAtom`s + `options.atoms` so the table writes through to
+  the atom and the query refetches with no `on[State]Change` plumbing. The canonical Vue example
+  is at `examples/vue/with-tanstack-query/`.
 type: composition
 library: tanstack-table
 framework: vue
@@ -87,10 +87,9 @@ watchEffect(() => {
   if (next != null) rowCount.value = next
 })
 
-// 5) Manual pagination. No paginatedRowModel — server paginates.
+// 5) Manual pagination. No paginatedRowModel in features — server paginates.
 const table = useTable({
   features,
-  rowModels: {},
   columns,
   data: tableData,
   rowCount,
@@ -219,12 +218,12 @@ const dataQuery = useQuery(() => ({
 }))
 
 const table = useTable({
+  // server owns all three slices — no row model factories registered
   features: tableFeatures({
     rowSortingFeature,
     rowPaginationFeature,
     columnFilteringFeature,
   }),
-  rowModels: {}, // server owns all three
   columns,
   data: computed(() => dataQuery.data.value?.rows ?? EMPTY),
   rowCount,
@@ -265,7 +264,6 @@ Query tells it. Always invalidate on writes.
 // ❌ Table re-paginates the already-paginated server response.
 useTable({
   features,
-  rowModels: {},
   columns,
   data: tableData,
   rowCount,
@@ -286,13 +284,13 @@ server already paginated. The pager locks at "Page 1 of 1".
 
 ```ts
 // ❌ Ships the factory for nothing AND it tries to paginate server-paginated data.
-rowModels: {
-  paginatedRowModel: createPaginatedRowModel()
-}
+const features = tableFeatures({
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+})
 
-// ✅
-rowModels: {
-}
+// ✅ Omit the factory when the server paginates.
+const features = tableFeatures({ rowPaginationFeature })
 ```
 
 ### Forgetting controlled state in `queryKey` (CRITICAL)
@@ -350,14 +348,14 @@ Same hooks names, different reactivity model (function-returning-options instead
 
 ### Hallucinating pre-v9 table APIs (CRITICAL)
 
-`useVueTable` + `getCoreRowModel: getCoreRowModel()` is v8. v9 uses `useTable` +
-`features` + `rowModels`. See `tanstack-table/vue/migrate-v8-to-v9`.
+`useVueTable` + `getCoreRowModel: getCoreRowModel()` is v8. v9 uses `useTable` + `features`
+with row model factories as slots. See `tanstack-table/vue/migrate-v8-to-v9`.
 
 ### "API missing" because feature not in `features` (CRITICAL — v9-specific)
 
 Server-side pagination still needs `rowPaginationFeature` in `tableFeatures({...})`. The
-feature gives you `table.nextPage` / `table.setPageIndex` / `table.getPageCount`. The
-`rowModels` factory is what you drop; the feature stays.
+feature gives you `table.nextPage` / `table.setPageIndex` / `table.getPageCount`. The row
+model factory (`paginatedRowModel`) is what you omit; the feature stays.
 
 ### Reimplementing pagination loop manually (CRITICAL — #1 AI tell)
 

package/skills/vue/compose-with-tanstack-store/SKILL.md

@@ -57,7 +57,13 @@ import {
 
 type Person = { firstName: string; lastName: string; age: number }
 
-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('firstName', { header: 'First' }),
@@ -82,10 +88,6 @@ const data = ref<Person[]>([])
 //    `table.setSorting()` writes through to your atom.
 const table = useTable({
   features,
-  rowModels: {
-    sortedRowModel: createSortedRowModel(sortFns),
-    paginatedRowModel: createPaginatedRowModel(),
-  },
   columns,
   data,
   atoms: {
@@ -141,7 +143,6 @@ options.atoms[slice]    >  options.state[slice]  >  table.baseAtoms[slice]
 // ❌ Passing both for the SAME slice. `atoms.sorting` wins; `state.sorting` is silently dead.
 useTable({
   features,
-  rowModels: {},
   columns,
   data,
   state: {

package/skills/vue/compose-with-tanstack-virtual/SKILL.md

@@ -56,7 +56,12 @@ import {
 import { useVirtualizer } from '@tanstack/vue-virtual'
 import { makeData, type Person } from './makeData'
 
-const features = tableFeatures({ columnSizingFeature, rowSortingFeature })
+const features = tableFeatures({
+  columnSizingFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns,
+})
 
 const columns: ColumnDef<typeof features, Person>[] = [
   { accessorKey: 'firstName' },
@@ -68,7 +73,6 @@ const data = ref<Person[]>(makeData(50_000))
 
 const table = useTable({
   features,
-  rowModels: { sortedRowModel: createSortedRowModel(sortFns) },
   columns,
   data,
 })
@@ -322,8 +326,8 @@ in Vue, not a plain object.
 ### "API missing" — `getRowModel` returns nothing (CRITICAL — v9-specific)
 
 If `table.getRowModel().rows` is empty when data is loaded, the row-model feature for whatever
-slice you need (filtering/sorting/grouping) isn't registered. Add it to `tableFeatures({...})`
-and `rowModels`.
+slice you need (filtering/sorting/grouping) isn't registered. Add the feature, its factory, and
+its fn registry to `tableFeatures({...})`.
 
 ### Reimplementing virtualization manually (CRITICAL — #1 AI tell)
 

package/skills/vue/getting-started/SKILL.md

@@ -2,11 +2,11 @@
 name: vue/getting-started
 description: >
   End-to-end first-table walkthrough for `@tanstack/vue-table` v9. Install the adapter, declare
-  `features` via `tableFeatures({})`, declare `rowModels` with their `*Fns` parameters
-  (`createSortedRowModel(sortFns)`, `createPaginatedRowModel()`, …), build a column helper with
-  both `TFeatures` and `TData` generics, instantiate `useTable(options, selector?)` from a
-  `<script setup>` block, and render with `<FlexRender :cell="cell" />` / `:header="header"`.
-  New users land here, not on legacy v8 names like `useVueTable`.
+  `features` via `tableFeatures({})` (row model factories and fn registries live here as slots),
+  build a column helper with both `TFeatures` and `TData` generics, instantiate
+  `useTable(options, selector?)` from a `<script setup>` block, and render with
+  `<FlexRender :cell="cell" />` / `:header="header"`. New users land here, not on legacy v8
+  names like `useVueTable`.
 type: lifecycle
 library: tanstack-table
 framework: vue
@@ -69,7 +69,6 @@ const data = ref<Person[]>([
 
 const table = useTable({
   features,
-  rowModels: {}, // required — core row model is automatic
   columns,
   data,
 })
@@ -100,8 +99,8 @@ Source: `examples/vue/basic-use-table/src/App.tsx`, `docs/framework/vue/vue-tabl
 ### What's mandatory in v9
 
 - `features` — built via `tableFeatures({...})`. Empty object is fine for a no-features table,
-  but the option key must exist.
-- `rowModels` — `{}` is fine (core row model is automatic). Register factories per feature.
+  but the option key must exist. Row model factories and fn registries go here as slots, not
+  as a separate `rowModels` option.
 - `createColumnHelper<typeof features, Person>()` — two generics, in that order. The v8 single
   generic does not compile.
 
@@ -122,7 +121,11 @@ import {
   useTable,
 } from '@tanstack/vue-table'
 
-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' }),
@@ -133,7 +136,6 @@ const data = ref<Person[]>([])
 
 const table = useTable({
   features,
-  rowModels: { sortedRowModel: createSortedRowModel(sortFns) },
   columns,
   data,
 })
@@ -159,10 +161,10 @@ const table = useTable({
 
 Three rules:
 
-1. Register the feature in `features` (`rowSortingFeature`).
-2. Provide the matching row model factory in `rowModels`
-   (`sortedRowModel: createSortedRowModel(sortFns)`). The factory **requires its `*Fns`
-   parameter** in v9 — this is what makes filter/sort registries tree-shakeable.
+1. Register the feature in `features` (`rowSortingFeature`) along with its row model factory
+   and fn registry as slots on the same object.
+2. The fn registry (`sortFns`) is what makes filter/sort registries tree-shakeable in v9 — do
+   not drop it.
 3. Wire UI to the built-in API: `column.getToggleSortingHandler()`, `column.getIsSorted()`.
    Do not reimplement sort logic.
 
@@ -187,13 +189,12 @@ const features = tableFeatures({
   rowSortingFeature,
   rowPaginationFeature,
   columnFilteringFeature,
-})
-
-const rowModels = {
-  sortedRowModel: createSortedRowModel(sortFns),
-  filteredRowModel: createFilteredRowModel(filterFns),
+  sortedRowModel: createSortedRowModel(),
+  filteredRowModel: createFilteredRowModel(),
   paginatedRowModel: createPaginatedRowModel(),
-}
+  sortFns,
+  filterFns,
+})
 ```
 
 Then use `table.nextPage()`, `table.setPageIndex(0)`, `table.setColumnFilters(...)`,
@@ -201,7 +202,7 @@ Then use `table.nextPage()`, `table.setPageIndex(0)`, `table.setColumnFilters(..
 
 ### 3. App-scoped tables with `createTableHook`
 
-If multiple tables in your app share `features`, `rowModels`, and conventions, prefer
+If multiple tables in your app share a `features` object (with its row model factories and conventions), prefer
 `createTableHook`. The hook factory returns `useAppTable`, `createAppColumnHelper`, plus
 context helpers (`useTableContext`, `useCellContext`, `useHeaderContext`).
 
@@ -217,14 +218,16 @@ import {
   tableFeatures,
 } from '@tanstack/vue-table'
 
-const features = tableFeatures({ rowSortingFeature, rowPaginationFeature })
+const features = tableFeatures({
+  rowSortingFeature,
+  rowPaginationFeature,
+  sortedRowModel: createSortedRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+  sortFns,
+})
 
 export const { useAppTable, createAppColumnHelper } = createTableHook({
   features,
-  rowModels: {
-    sortedRowModel: createSortedRowModel(sortFns),
-    paginatedRowModel: createPaginatedRowModel(),
-  },
 })
 ```
 
@@ -274,7 +277,6 @@ export default defineComponent({
     const data = ref<Person[]>([])
     const table = useTable({
       features,
-      rowModels: {},
       columns,
       get data() {
         return data.value
@@ -304,7 +306,7 @@ Source: `examples/vue/basic-use-table/src/App.tsx`.
 
 ## Common Mistakes
 
-### Omitting `features` or `rowModels` (CRITICAL)
+### Omitting `features` (CRITICAL)
 
 ```ts
 // ❌ TS error: Property 'features' is missing in type ...
@@ -312,10 +314,10 @@ const table = useTable({ columns, data })
 
 // ✅
 const features = tableFeatures({})
-const table = useTable({ features, rowModels: {}, columns, data })
+const table = useTable({ features, columns, data })
 ```
 
-Both keys are required even for the simplest table.
+`features` is required even for the simplest table.
 
 ### Wrong `createColumnHelper` arity (CRITICAL)
 
@@ -327,20 +329,25 @@ const columnHelper = createColumnHelper<Person>()
 const columnHelper = createColumnHelper<typeof features, Person>()
 ```
 
-### Calling row-model factories without their `*Fns` parameter (CRITICAL)
+### Omitting the `*Fns` registry from `tableFeatures` (CRITICAL)
 
 ```ts
-// ❌ TS error / runtime missing fns.
-rowModels: {
-  sortedRowModel:   createSortedRowModel(),
-  filteredRowModel: createFilteredRowModel(),
-}
+// ❌ TS error / runtime missing fns — sort is a no-op.
+const features = tableFeatures({
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  // sortFns missing!
+})
 
-// ✅ Pass the matching registry.
-rowModels: {
-  sortedRowModel:   createSortedRowModel(sortFns),
-  filteredRowModel: createFilteredRowModel(filterFns),
-}
+// ✅ Register the fn map as a slot alongside the factory.
+const features = tableFeatures({
+  rowSortingFeature,
+  columnFilteringFeature,
+  sortedRowModel: createSortedRowModel(),
+  filteredRowModel: createFilteredRowModel(),
+  sortFns,
+  filterFns,
+})
 ```
 
 This is what makes v9 tree-shakeable. Filter/sort/aggregation registries are open-ended — do
@@ -351,17 +358,16 @@ not cite a number of built-in fns; just pass `filterFns` / `sortFns` / `aggregat
 ```ts
 // ❌ `rowSortingFeature` not registered → `table.setSorting` is `undefined` and a TS error.
 const features = tableFeatures({})
-const table = useTable({ features, rowModels: {}, columns, data })
+const table = useTable({ features, columns, data })
 table.setSorting([{ id: 'age', desc: true }]) // missing
 
-// ✅ Register the feature AND its row model.
-const features = tableFeatures({ rowSortingFeature })
-const table = useTable({
-  features,
-  rowModels: { sortedRowModel: createSortedRowModel(sortFns) },
-  columns,
-  data,
+// ✅ Register the feature, its row model factory, and its fn registry in tableFeatures.
+const features = tableFeatures({
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns,
 })
+const table = useTable({ features, columns, data })
 ```
 
 This is the #1 v9-specific failure mode — features must be declared to surface their APIs.