@tanstack/table-core 9.0.0-beta.2 → 9.0.0-beta.21

package/skills/grouping/SKILL.md

@@ -2,7 +2,7 @@
 name: grouping
 description: >
   Group rows by column values in TanStack Table v9 with the `groupedRowModel`
-  stage. Covers `columnGroupingFeature` + `createGroupedRowModel(aggregationFns)`,
+  stage. Covers `columnGroupingFeature` + `createGroupedRowModel()` (registered on `features` with `aggregationFns` slot),
   `state.grouping` (GroupingState = Array<string>), `onGroupingChange`,
   `columnDef.aggregationFn` ('auto'|name|fn) — distinct signature
   `(columnId, leafRows, childRows)` — `columnDef.aggregatedCell`,
@@ -49,6 +49,10 @@ const features = tableFeatures({
   columnGroupingFeature,
   rowExpandingFeature,
   rowPaginationFeature,
+  groupedRowModel: createGroupedRowModel(),
+  expandedRowModel: createExpandedRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+  aggregationFns,
 })
 
 const columnHelper = createColumnHelper<typeof features, Person>()
@@ -66,11 +70,6 @@ const columns = columnHelper.columns([
 
 const table = constructTable({
   features,
-  rowModels: {
-    groupedRowModel: createGroupedRowModel(aggregationFns),
-    expandedRowModel: createExpandedRowModel(),
-    paginatedRowModel: createPaginatedRowModel(),
-  },
   columns,
   data,
   initialState: { grouping: [] satisfies GroupingState },
@@ -144,15 +143,16 @@ const weightedAverage: AggregationFn<typeof features, Person> = (
   return totalWeight === 0 ? 0 : weightedSum / totalWeight
 }
 
+const customFeatures = tableFeatures({
+  columnGroupingFeature,
+  rowExpandingFeature,
+  groupedRowModel: createGroupedRowModel(),
+  expandedRowModel: createExpandedRowModel(),
+  aggregationFns: { ...aggregationFns, weightedAverage },
+})
+
 const table = constructTable({
-  features,
-  rowModels: {
-    groupedRowModel: createGroupedRowModel({
-      ...aggregationFns,
-      weightedAverage,
-    }),
-    expandedRowModel: createExpandedRowModel(),
-  },
+  features: customFeatures,
   columns: columnHelper.columns([
     columnHelper.accessor('progress', {
       aggregationFn: 'weightedAverage',
@@ -177,10 +177,6 @@ columnHelper.accessor('firstName', {
 ```ts
 const table = constructTable({
   features,
-  rowModels: {
-    groupedRowModel: createGroupedRowModel(aggregationFns),
-    expandedRowModel: createExpandedRowModel(),
-  },
   columns,
   data,
   groupedColumnMode: 'reorder', // default — grouped columns lead
@@ -197,13 +193,12 @@ Wrong:
 
 ```ts
 // grouped rows show aggregates but can't be expanded
-const features = tableFeatures({ columnGroupingFeature })
-const table = useTable({
-  features,
-  rowModels: { groupedRowModel: createGroupedRowModel(aggregationFns) },
-  columns,
-  data,
+const features = tableFeatures({
+  columnGroupingFeature,
+  groupedRowModel: createGroupedRowModel(),
+  aggregationFns,
 })
+const table = useTable({ features, columns, data })
 // row.getToggleExpandedHandler() → TS error or undefined
 ```
 
@@ -221,16 +216,12 @@ import {
 const features = tableFeatures({
   columnGroupingFeature,
   rowExpandingFeature,
+  groupedRowModel: createGroupedRowModel(),
+  expandedRowModel: createExpandedRowModel(),
+  aggregationFns,
 })
 
-const table = useTable({
-  features,
-  rowModels: {
-    groupedRowModel: createGroupedRowModel(aggregationFns),
-    expandedRowModel: createExpandedRowModel(),
-  },
-  columns, data,
-})
+const table = useTable({ features, columns, data })
 
 // In cell renderer:
 {cell.getIsGrouped() && (
@@ -250,8 +241,11 @@ Wrong:
 
 ```ts
 const table = useTable({
-  features: tableFeatures({ columnGroupingFeature }),
-  rowModels: { groupedRowModel: createGroupedRowModel(aggregationFns) },
+  features: tableFeatures({
+    columnGroupingFeature,
+    groupedRowModel: createGroupedRowModel(),
+    aggregationFns,
+  }),
   columns, data,
   // @ts-ignore - this property doesn't exist on v9 TableOptions
   aggregationFns: {
@@ -265,26 +259,26 @@ Correct:
 ```ts
 import { aggregationFns, createGroupedRowModel } from '@tanstack/react-table'
 
-const table = useTable({
-  features: tableFeatures({ columnGroupingFeature, rowExpandingFeature }),
-  rowModels: {
-    groupedRowModel: createGroupedRowModel({
-      ...aggregationFns,
-      myCustomAggregation: (columnId, leafRows, childRows) => {
-        return /* aggregated value */
-      },
-    }),
-    expandedRowModel: createExpandedRowModel(),
+const features = tableFeatures({
+  columnGroupingFeature,
+  rowExpandingFeature,
+  groupedRowModel: createGroupedRowModel(),
+  expandedRowModel: createExpandedRowModel(),
+  aggregationFns: {
+    ...aggregationFns,
+    myCustomAggregation: (columnId, leafRows, childRows) => {
+      return /* aggregated value */
+    },
   },
-  columns,
-  data,
 })
 
+const table = useTable({ features, columns, data })
+
 // Then on a column:
 columnHelper.accessor('sales', { aggregationFn: 'myCustomAggregation' })
 ```
 
-In v9, the aggregation registry is the FIRST argument to `createGroupedRowModel`. There is no top-level `tableOptions.aggregationFns`.
+In v9, the aggregation registry is the `aggregationFns` slot on `features`. There is no top-level `tableOptions.aggregationFns`.
 
 Source: packages/table-core/src/features/column-grouping/createGroupedRowModel.ts
 
@@ -345,7 +339,6 @@ Wrong:
 ```ts
 const table = useTable({
   features,
-  rowModels: { groupedRowModel: createGroupedRowModel(aggregationFns) },
   columns,
   data,
   initialState: {
@@ -361,7 +354,6 @@ Correct:
 ```ts
 const table = useTable({
   features,
-  rowModels: { groupedRowModel: createGroupedRowModel(aggregationFns) },
   columns,
   data,
   initialState: {
@@ -424,12 +416,15 @@ const grouped = useMemo(() => {
 Correct:
 
 ```ts
+const features = tableFeatures({
+  columnGroupingFeature,
+  rowExpandingFeature,
+  groupedRowModel: createGroupedRowModel(),
+  expandedRowModel: createExpandedRowModel(),
+  aggregationFns,
+})
 const table = useTable({
-  features: tableFeatures({ columnGroupingFeature, rowExpandingFeature }),
-  rowModels: {
-    groupedRowModel: createGroupedRowModel(aggregationFns),
-    expandedRowModel: createExpandedRowModel(),
-  },
+  features,
   columns: columnHelper.columns([
     columnHelper.accessor('status', { enableGrouping: true }),
     columnHelper.accessor('age', { aggregationFn: 'mean' }),

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

@@ -4,11 +4,12 @@ description: >
   Mechanical breaking-change migration from TanStack Table v8 to v9 at the
   `@tanstack/table-core` level. Covers hook/entry rename
   (`useReactTable`/`createSolidTable`/… → `useTable`/`injectTable`/`createTable`/
-  `constructTable`), the new required `features` + `rowModels` options,
+  `constructTable`), the new required `features` option (which now carries row
+  model factories and fn registries — `rowModels` option is removed),
   `createColumnHelper<TData>()` → `createColumnHelper<typeof features, TData>()`,
   row-model factory rename (`getCoreRowModel()` → automatic; `getSortedRowModel()`
-  → `createSortedRowModel(sortFns)`; same for filtered/paginated/grouped/expanded/
-  faceted), `table.getState()` → `table.store.state` / `table.atoms.<slice>.get()`,
+  → `createSortedRowModel()` as a slot on `tableFeatures({...})` with `sortFns` also
+  a slot; same for filtered/paginated/grouped/expanded/faceted), `table.getState()` → `table.store.state` / `table.atoms.<slice>.get()`,
   sorting renames (`sortingFn` → `sortFn`, etc.), `enablePinning` split, column
   sizing/resizing split, underscore-prefixed APIs becoming public, `RowData`
   type tightening, TFeatures-first generics, the `useLegacyTable` React escape
@@ -32,9 +33,9 @@ sources:
 v9 is a substantial reshape, not a tweak. The breaking changes group into:
 
 1. **Hook/entry rename** per adapter.
-2. **`features` + `rowModels` are required** — features are tree-shaken.
+2. **`features` is required** — features are tree-shaken. Row model factories and fn registries (`sortFns`, `filterFns`, `aggregationFns`) now live as slots on the `features` object; the `rowModels` option is gone.
 3. **Column helper generic order** — `<TFeatures, TData>` not `<TData>`.
-4. **Row-model factories** moved out of root options, into `rowModels`, and now take their `*Fns` argument.
+4. **Row-model factories** moved out of root options and into `tableFeatures({...})` as named slots; factory args for `*Fns` are replaced by dedicated fn-registry slots on `features`.
 5. **State surface renamed** — `table.getState()` → `table.store.state` / `table.atoms.<slice>.get()` / `table.state` (selector).
 6. **Sorting names**: `sortingFn` → `sortFn`, `sortingFns` → `sortFns`, `getSortingFn()` → `getSortFn()`, type `SortingFn` → `SortFn`.
 7. **`enablePinning` split** into `enableColumnPinning` + `enableRowPinning` (table-level); per-column `enablePinning` stays.
@@ -75,6 +76,12 @@ const features = tableFeatures({
   columnFilteringFeature,
   columnSizingFeature,
   columnResizingFeature, // explicit — formerly part of ColumnSizing
+  // Row model factories and fn registries are slots on features, not rowModels.
+  sortedRowModel: createSortedRowModel(),
+  filteredRowModel: createFilteredRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+  sortFns,
+  filterFns,
 })
 
 const columnHelper = createColumnHelper<typeof features, Person>()
@@ -88,11 +95,6 @@ const columns: ColumnDef<typeof features, Person>[] = columnHelper.columns([
 
 const table = useTable({
   features,
-  rowModels: {
-    sortedRowModel: createSortedRowModel(sortFns),
-    filteredRowModel: createFilteredRowModel(filterFns),
-    paginatedRowModel: createPaginatedRowModel(),
-  },
   columns,
   data,
   enableColumnPinning: true, // split from enablePinning
@@ -200,13 +202,12 @@ import {
   sortFns,
 } from '@tanstack/react-table'
 
-const features = tableFeatures({ rowSortingFeature })
-const table = useTable({
-  features,
-  rowModels: { sortedRowModel: createSortedRowModel(sortFns) },
-  columns,
-  data,
+const features = tableFeatures({
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns,
 })
+const table = useTable({ features, columns, data })
 ```
 
 Every major release of TanStack Table has been a substantial upgrade. Agents trained on v7 or v8 will confidently emit shapes that no longer exist. This is the #2 AI failure (after reimplementing built-ins).
@@ -239,18 +240,15 @@ import {
   sortFns,
 } from '@tanstack/react-table'
 
-const features = tableFeatures({ rowSortingFeature })
-const table = useTable({
-  features,
-  rowModels: {
-    sortedRowModel: createSortedRowModel(sortFns), // factory takes sortFns argument
-  },
-  columns,
-  data,
+const features = tableFeatures({
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns,
 })
+const table = useTable({ features, columns, data })
 ```
 
-In v9, row models live under `rowModels` and the factories REQUIRE their \*Fns argument for tree-shaking: `createFilteredRowModel(filterFns)`, `createSortedRowModel(sortFns)`, `createGroupedRowModel(aggregationFns)`. Core is automatic.
+In v9, row model factories are slots on `features`: `filteredRowModel: createFilteredRowModel()`, `sortedRowModel: createSortedRowModel()`, `groupedRowModel: createGroupedRowModel()`. The fn registries move too: `filterFns`, `sortFns`, `aggregationFns` are named slots on `features`. Core is automatic.
 
 Source: PR #6234 (atoms refactor); packages/table-core/src/index.ts
 
@@ -307,11 +305,11 @@ Correct:
 
 ```ts
 columnHelper.accessor('age', { sortFn: 'alphanumeric' })
-createSortedRowModel(sortFns) // pass registry to the factory
+// sortFns is a slot on features: tableFeatures({ rowSortingFeature, sortedRowModel: createSortedRowModel(), sortFns })
 column.getSortFn()
 ```
 
-v9 renamed every sorting API: `sortingFn` → `sortFn`, `sortingFns` → `sortFns`, type `SortingFn` → `SortFn`, `getSortingFn()` → `getSortFn()`. TypeScript surfaces these but agents try v8 names first.
+v9 renamed every sorting API: `sortingFn` → `sortFn`, `sortingFns` → `sortFns` (now a features slot, not a factory arg), type `SortingFn` → `SortFn`, `getSortingFn()` → `getSortFn()`. TypeScript surfaces these but agents try v8 names first.
 
 Source: packages/table-core/src/features/row-sorting/rowSortingFeature.types.ts
 
@@ -475,13 +473,12 @@ import {
   createSortedRowModel,
   sortFns,
 } from '@tanstack/react-table'
-const features = tableFeatures({ rowSortingFeature })
-const table = useTable({
-  features,
-  rowModels: { sortedRowModel: createSortedRowModel(sortFns) },
-  columns,
-  data,
+const features = tableFeatures({
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns,
 })
+const table = useTable({ features, columns, data })
 ```
 
 `useLegacyTable` is React-only, deprecated, bundles every feature, doesn't support `table.Subscribe`, and is removed in v10. It exists to unblock incremental migration — not as a long-term API.

package/skills/pagination/SKILL.md

@@ -34,13 +34,13 @@ import {
 } from '@tanstack/table-core'
 import type { PaginationState } from '@tanstack/table-core'
 
-const features = tableFeatures({ rowPaginationFeature })
+const features = tableFeatures({
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+})
 
 const table = constructTable({
   features,
-  rowModels: {
-    paginatedRowModel: createPaginatedRowModel(),
-  },
   columns,
   data,
   initialState: {
@@ -126,7 +126,7 @@ const { data: dataQuery } = useQuery({
 
 const table = useTable({
   features: tableFeatures({ rowPaginationFeature }),
-  rowModels: {}, // no paginatedRowModel — server paginates
+  // no paginatedRowModel registered — server paginates
   data: dataQuery?.rows ?? EMPTY,
   columns,
   manualPagination: true,
@@ -141,12 +141,15 @@ const table = useTable({
 ### Disable auto page reset when filters change
 
 ```ts
+const features = tableFeatures({
+  rowPaginationFeature,
+  columnFilteringFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+  filteredRowModel: createFilteredRowModel(),
+  filterFns,
+})
 const table = constructTable({
-  features: tableFeatures({ rowPaginationFeature, columnFilteringFeature }),
-  rowModels: {
-    paginatedRowModel: createPaginatedRowModel(),
-    filteredRowModel: createFilteredRowModel(filterFns),
-  },
+  features,
   columns,
   data,
   autoResetPageIndex: false, // keep current page while user types in a filter
@@ -174,7 +177,6 @@ Wrong:
 // getPageCount() returns 1, next/prev buttons are disabled
 const table = useTable({
   features: tableFeatures({ rowPaginationFeature }),
-  rowModels: {},
   data, // only 10 rows for the current page
   columns,
   manualPagination: true,
@@ -189,7 +191,6 @@ Correct:
 ```tsx
 const table = useTable({
   features: tableFeatures({ rowPaginationFeature }),
-  rowModels: {},
   data: dataQuery.rows,
   columns,
   manualPagination: true,
@@ -223,8 +224,10 @@ Correct:
 ```tsx
 const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 25 })
 const table = useTable({
-  features: tableFeatures({ rowPaginationFeature }),
-  rowModels: { paginatedRowModel: createPaginatedRowModel() },
+  features: tableFeatures({
+    rowPaginationFeature,
+    paginatedRowModel: createPaginatedRowModel(),
+  }),
   columns,
   data,
   state: { pagination },
@@ -241,12 +244,9 @@ Source: docs/guide/pagination.md
 Wrong:
 
 ```ts
+// features already has paginatedRowModel + filteredRowModel registered
 const table = useTable({
   features,
-  rowModels: {
-    paginatedRowModel: createPaginatedRowModel(),
-    filteredRowModel: createFilteredRowModel(filterFns),
-  },
   columns,
   data,
   autoResetPageIndex: false, // user on page 5, then filters down to 2 pages
@@ -366,8 +366,10 @@ Correct:
 
 ```ts
 const table = useTable({
-  features: tableFeatures({ rowPaginationFeature }),
-  rowModels: { paginatedRowModel: createPaginatedRowModel() },
+  features: tableFeatures({
+    rowPaginationFeature,
+    paginatedRowModel: createPaginatedRowModel(),
+  }),
   columns,
   data,
 })

package/skills/row-expanding/SKILL.md

@@ -35,12 +35,14 @@ import {
 } from '@tanstack/table-core'
 import type { ExpandedState } from '@tanstack/table-core'
 
-const features = tableFeatures({ rowExpandingFeature })
+const features = tableFeatures({
+  rowExpandingFeature,
+  expandedRowModel: createExpandedRowModel(),
+})
 
 // Tree mode — data has nested subRows
 const table = constructTable({
   features,
-  rowModels: { expandedRowModel: createExpandedRowModel() },
   columns,
   data,
   getSubRows: (row) => row.subRows,
@@ -50,7 +52,6 @@ const table = constructTable({
 // Or detail-panel mode — every row can expand to a sub-component
 const detailTable = constructTable({
   features,
-  rowModels: { expandedRowModel: createExpandedRowModel() },
   columns,
   data,
   getRowCanExpand: () => true,
@@ -120,11 +121,12 @@ const detailTable = constructTable({
 
 ```ts
 const table = constructTable({
-  features: tableFeatures({ rowExpandingFeature, rowPaginationFeature }),
-  rowModels: {
+  features: tableFeatures({
+    rowExpandingFeature,
+    rowPaginationFeature,
     expandedRowModel: createExpandedRowModel(),
     paginatedRowModel: createPaginatedRowModel(),
-  },
+  }),
   columns,
   data,
   getSubRows: (r) => r.subRows,
@@ -138,11 +140,13 @@ const table = constructTable({
 
 ```ts
 const table = constructTable({
-  features: tableFeatures({ rowExpandingFeature, columnFilteringFeature }),
-  rowModels: {
+  features: tableFeatures({
+    rowExpandingFeature,
+    columnFilteringFeature,
     expandedRowModel: createExpandedRowModel(),
-    filteredRowModel: createFilteredRowModel(filterFns),
-  },
+    filteredRowModel: createFilteredRowModel(),
+    filterFns,
+  }),
   columns,
   data,
   getSubRows: (r) => r.subRows,
@@ -171,7 +175,6 @@ Correct:
 // For pure tree data, omit getRowCanExpand and let it auto-detect:
 const table = useTable({
   features,
-  rowModels: { expandedRowModel: createExpandedRowModel() },
   columns,
   data,
   getSubRows: (row) => row.subRows,
@@ -180,8 +183,10 @@ const table = useTable({
 
 // For pure detail panels, override and skip getSubRows:
 const table = useTable({
-  features: tableFeatures({ rowExpandingFeature }),
-  rowModels: { expandedRowModel: createExpandedRowModel() },
+  features: tableFeatures({
+    rowExpandingFeature,
+    expandedRowModel: createExpandedRowModel(),
+  }),
   columns,
   data,
   getRowCanExpand: () => true,
@@ -210,10 +215,6 @@ Correct:
 // Default behavior — children flow through pagination, pageSize is enforced:
 const table = useTable({
   features,
-  rowModels: {
-    expandedRowModel: createExpandedRowModel(),
-    paginatedRowModel: createPaginatedRowModel(),
-  },
   columns,
   data,
   getSubRows: (r) => r.subRows,
@@ -268,8 +269,10 @@ Wrong:
 ```ts
 // manualExpanding bypasses the expanded row model; sub-rows are never flattened
 const table = useTable({
-  features: tableFeatures({ rowExpandingFeature }),
-  rowModels: { expandedRowModel: createExpandedRowModel() }, // ignored
+  features: tableFeatures({
+    rowExpandingFeature,
+    expandedRowModel: createExpandedRowModel(), // ignored when manualExpanding: true
+  }),
   columns,
   data,
   getSubRows: (r) => r.subRows,
@@ -284,7 +287,7 @@ Correct:
 // a pre-flattened view based on which rows are expanded.
 const table = useTable({
   features: tableFeatures({ rowExpandingFeature }),
-  rowModels: {}, // no expandedRowModel for manual mode
+  // no expandedRowModel registered for manual mode
   columns,
   data: dataQuery.data, // server returns flattened rows when expanded
   manualExpanding: true,
@@ -294,8 +297,10 @@ const table = useTable({
 
 // For client-side tree, omit manualExpanding:
 const clientTable = useTable({
-  features: tableFeatures({ rowExpandingFeature }),
-  rowModels: { expandedRowModel: createExpandedRowModel() },
+  features: tableFeatures({
+    rowExpandingFeature,
+    expandedRowModel: createExpandedRowModel(),
+  }),
   columns,
   data,
   getSubRows: (r) => r.subRows,
@@ -329,9 +334,12 @@ Correct:
 
 ```ts
 const table = useTable({
-  features: tableFeatures({ rowExpandingFeature }),
-  rowModels: { expandedRowModel: createExpandedRowModel() },
-  columns, data,
+  features: tableFeatures({
+    rowExpandingFeature,
+    expandedRowModel: createExpandedRowModel(),
+  }),
+  columns,
+  data,
   getSubRows: (r) => r.subRows,
 })
 

package/skills/row-pinning/SKILL.md

@@ -35,13 +35,14 @@ import {
 } from '@tanstack/table-core'
 import type { RowPinningState } from '@tanstack/table-core'
 
-const features = tableFeatures({ rowPinningFeature, rowPaginationFeature })
+const features = tableFeatures({
+  rowPinningFeature,
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+})
 
 const table = constructTable({
   features,
-  rowModels: {
-    paginatedRowModel: createPaginatedRowModel(),
-  },
   columns,
   data,
   getRowId: (row) => row.userId, // ← essentially mandatory
@@ -97,8 +98,12 @@ row.pin('top', /* includeLeafRows */ true, /* includeParentRows */ false)
 
 ```ts
 const table = constructTable({
-  features: tableFeatures({ rowPinningFeature, columnFilteringFeature }),
-  rowModels: { filteredRowModel: createFilteredRowModel(filterFns) },
+  features: tableFeatures({
+    rowPinningFeature,
+    columnFilteringFeature,
+    filteredRowModel: createFilteredRowModel(),
+    filterFns,
+  }),
   columns,
   data,
   getRowId: (row) => row.id,
@@ -247,7 +252,6 @@ Correct:
 ```ts
 const table = useTable({
   features: tableFeatures({ rowPinningFeature }),
-  rowModels: {},
   columns,
   data,
   getRowId: (row) => row.id,

package/skills/row-selection/SKILL.md

@@ -40,7 +40,6 @@ const features = tableFeatures({ rowSelectionFeature })
 
 const table = constructTable({
   features,
-  rowModels: {},
   columns,
   data,
   getRowId: (row) => row.id, // ← essentially mandatory
@@ -80,7 +79,6 @@ columnHelper.display({
 ```tsx
 const table = useTable({
   features: tableFeatures({ rowSelectionFeature }),
-  rowModels: {},
   columns,
   data,
   getRowId: (row) => row.id,
@@ -370,7 +368,6 @@ Correct:
 ```ts
 const table = useTable({
   features: tableFeatures({ rowSelectionFeature }),
-  rowModels: {},
   columns,
   data,
   getRowId: (row) => row.id,