@tanstack/vue-table 9.0.0-beta.2 → 9.0.0-beta.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/FlexRender.cjs.map +1 -1
  2. package/dist/FlexRender.d.cts +30 -12
  3. package/dist/FlexRender.d.ts +30 -12
  4. package/dist/FlexRender.js.map +1 -1
  5. package/dist/createTableHook.cjs +23 -64
  6. package/dist/createTableHook.cjs.map +1 -1
  7. package/dist/createTableHook.d.cts +16 -20
  8. package/dist/createTableHook.d.ts +16 -20
  9. package/dist/createTableHook.js +23 -64
  10. package/dist/createTableHook.js.map +1 -1
  11. package/dist/flex-render.d.cts +2 -2
  12. package/dist/flex-render.d.ts +2 -2
  13. package/dist/index.d.cts +3 -3
  14. package/dist/index.d.ts +3 -3
  15. package/dist/reactivity.cjs +10 -19
  16. package/dist/reactivity.cjs.map +1 -1
  17. package/dist/reactivity.js +10 -19
  18. package/dist/reactivity.js.map +1 -1
  19. package/dist/useTable.cjs +12 -20
  20. package/dist/useTable.cjs.map +1 -1
  21. package/dist/useTable.d.cts +14 -48
  22. package/dist/useTable.d.ts +14 -48
  23. package/dist/useTable.js +13 -21
  24. package/dist/useTable.js.map +1 -1
  25. package/package.json +4 -4
  26. package/skills/vue/client-to-server/SKILL.md +21 -26
  27. package/skills/vue/compose-with-tanstack-form/SKILL.md +4 -4
  28. package/skills/vue/compose-with-tanstack-pacer/SKILL.md +6 -3
  29. package/skills/vue/compose-with-tanstack-query/SKILL.md +18 -20
  30. package/skills/vue/compose-with-tanstack-store/SKILL.md +7 -6
  31. package/skills/vue/compose-with-tanstack-virtual/SKILL.md +8 -4
  32. package/skills/vue/getting-started/SKILL.md +55 -49
  33. package/skills/vue/migrate-v8-to-v9/SKILL.md +50 -32
  34. package/skills/vue/production-readiness/SKILL.md +28 -21
  35. package/skills/vue/table-state/SKILL.md +22 -26
  36. package/src/FlexRender.ts +28 -13
  37. package/src/createTableHook.ts +18 -82
  38. package/src/reactivity.ts +17 -43
  39. package/src/useTable.ts +25 -96
@@ -56,7 +56,12 @@ import {
56
56
  import { useVirtualizer } from '@tanstack/vue-virtual'
57
57
  import { makeData, type Person } from './makeData'
58
58
 
59
- const features = tableFeatures({ columnSizingFeature, rowSortingFeature })
59
+ const features = tableFeatures({
60
+ columnSizingFeature,
61
+ rowSortingFeature,
62
+ sortedRowModel: createSortedRowModel(),
63
+ sortFns,
64
+ })
60
65
 
61
66
  const columns: ColumnDef<typeof features, Person>[] = [
62
67
  { accessorKey: 'firstName' },
@@ -68,7 +73,6 @@ const data = ref<Person[]>(makeData(50_000))
68
73
 
69
74
  const table = useTable({
70
75
  features,
71
- rowModels: { sortedRowModel: createSortedRowModel(sortFns) },
72
76
  columns,
73
77
  data,
74
78
  })
@@ -322,8 +326,8 @@ in Vue, not a plain object.
322
326
  ### "API missing" — `getRowModel` returns nothing (CRITICAL — v9-specific)
323
327
 
324
328
  If `table.getRowModel().rows` is empty when data is loaded, the row-model feature for whatever
325
- slice you need (filtering/sorting/grouping) isn't registered. Add it to `tableFeatures({...})`
326
- and `rowModels`.
329
+ slice you need (filtering/sorting/grouping) isn't registered. Add the feature, its factory, and
330
+ its fn registry to `tableFeatures({...})`.
327
331
 
328
332
  ### Reimplementing virtualization manually (CRITICAL — #1 AI tell)
329
333
 
@@ -2,11 +2,11 @@
2
2
  name: vue/getting-started
3
3
  description: >
4
4
  End-to-end first-table walkthrough for `@tanstack/vue-table` v9. Install the adapter, declare
5
- `features` via `tableFeatures({})`, declare `rowModels` with their `*Fns` parameters
6
- (`createSortedRowModel(sortFns)`, `createPaginatedRowModel()`, …), build a column helper with
7
- both `TFeatures` and `TData` generics, instantiate `useTable(options, selector?)` from a
8
- `<script setup>` block, and render with `<FlexRender :cell="cell" />` / `:header="header"`.
9
- New users land here, not on legacy v8 names like `useVueTable`.
5
+ `features` via `tableFeatures({})` (row model factories and fn registries live here as slots),
6
+ build a column helper with both `TFeatures` and `TData` generics, instantiate
7
+ `useTable(options, selector?)` from a `<script setup>` block, and render with
8
+ `<FlexRender :cell="cell" />` / `:header="header"`. New users land here, not on legacy v8
9
+ names like `useVueTable`.
10
10
  type: lifecycle
11
11
  library: tanstack-table
12
12
  framework: vue
@@ -69,7 +69,6 @@ const data = ref<Person[]>([
69
69
 
70
70
  const table = useTable({
71
71
  features,
72
- rowModels: {}, // required — core row model is automatic
73
72
  columns,
74
73
  data,
75
74
  })
@@ -100,8 +99,8 @@ Source: `examples/vue/basic-use-table/src/App.tsx`, `docs/framework/vue/vue-tabl
100
99
  ### What's mandatory in v9
101
100
 
102
101
  - `features` — built via `tableFeatures({...})`. Empty object is fine for a no-features table,
103
- but the option key must exist.
104
- - `rowModels` — `{}` is fine (core row model is automatic). Register factories per feature.
102
+ but the option key must exist. Row model factories and fn registries go here as slots, not
103
+ as a separate `rowModels` option.
105
104
  - `createColumnHelper<typeof features, Person>()` — two generics, in that order. The v8 single
106
105
  generic does not compile.
107
106
 
@@ -122,7 +121,11 @@ import {
122
121
  useTable,
123
122
  } from '@tanstack/vue-table'
124
123
 
125
- const features = tableFeatures({ rowSortingFeature })
124
+ const features = tableFeatures({
125
+ rowSortingFeature,
126
+ sortedRowModel: createSortedRowModel(),
127
+ sortFns,
128
+ })
126
129
  const columnHelper = createColumnHelper<typeof features, Person>()
127
130
  const columns = columnHelper.columns([
128
131
  columnHelper.accessor('firstName', { header: 'First' }),
@@ -133,7 +136,6 @@ const data = ref<Person[]>([])
133
136
 
134
137
  const table = useTable({
135
138
  features,
136
- rowModels: { sortedRowModel: createSortedRowModel(sortFns) },
137
139
  columns,
138
140
  data,
139
141
  })
@@ -159,10 +161,10 @@ const table = useTable({
159
161
 
160
162
  Three rules:
161
163
 
162
- 1. Register the feature in `features` (`rowSortingFeature`).
163
- 2. Provide the matching row model factory in `rowModels`
164
- (`sortedRowModel: createSortedRowModel(sortFns)`). The factory **requires its `*Fns`
165
- parameter** in v9 — this is what makes filter/sort registries tree-shakeable.
164
+ 1. Register the feature in `features` (`rowSortingFeature`) along with its row model factory
165
+ and fn registry as slots on the same object.
166
+ 2. The fn registry (`sortFns`) is what makes filter/sort registries tree-shakeable in v9 — do
167
+ not drop it.
166
168
  3. Wire UI to the built-in API: `column.getToggleSortingHandler()`, `column.getIsSorted()`.
167
169
  Do not reimplement sort logic.
168
170
 
@@ -187,13 +189,12 @@ const features = tableFeatures({
187
189
  rowSortingFeature,
188
190
  rowPaginationFeature,
189
191
  columnFilteringFeature,
190
- })
191
-
192
- const rowModels = {
193
- sortedRowModel: createSortedRowModel(sortFns),
194
- filteredRowModel: createFilteredRowModel(filterFns),
192
+ sortedRowModel: createSortedRowModel(),
193
+ filteredRowModel: createFilteredRowModel(),
195
194
  paginatedRowModel: createPaginatedRowModel(),
196
- }
195
+ sortFns,
196
+ filterFns,
197
+ })
197
198
  ```
198
199
 
199
200
  Then use `table.nextPage()`, `table.setPageIndex(0)`, `table.setColumnFilters(...)`,
@@ -201,7 +202,7 @@ Then use `table.nextPage()`, `table.setPageIndex(0)`, `table.setColumnFilters(..
201
202
 
202
203
  ### 3. App-scoped tables with `createTableHook`
203
204
 
204
- If multiple tables in your app share `features`, `rowModels`, and conventions, prefer
205
+ If multiple tables in your app share a `features` object (with its row model factories and conventions), prefer
205
206
  `createTableHook`. The hook factory returns `useAppTable`, `createAppColumnHelper`, plus
206
207
  context helpers (`useTableContext`, `useCellContext`, `useHeaderContext`).
207
208
 
@@ -217,14 +218,16 @@ import {
217
218
  tableFeatures,
218
219
  } from '@tanstack/vue-table'
219
220
 
220
- const features = tableFeatures({ rowSortingFeature, rowPaginationFeature })
221
+ const features = tableFeatures({
222
+ rowSortingFeature,
223
+ rowPaginationFeature,
224
+ sortedRowModel: createSortedRowModel(),
225
+ paginatedRowModel: createPaginatedRowModel(),
226
+ sortFns,
227
+ })
221
228
 
222
229
  export const { useAppTable, createAppColumnHelper } = createTableHook({
223
230
  features,
224
- rowModels: {
225
- sortedRowModel: createSortedRowModel(sortFns),
226
- paginatedRowModel: createPaginatedRowModel(),
227
- },
228
231
  })
229
232
  ```
230
233
 
@@ -274,7 +277,6 @@ export default defineComponent({
274
277
  const data = ref<Person[]>([])
275
278
  const table = useTable({
276
279
  features,
277
- rowModels: {},
278
280
  columns,
279
281
  get data() {
280
282
  return data.value
@@ -304,7 +306,7 @@ Source: `examples/vue/basic-use-table/src/App.tsx`.
304
306
 
305
307
  ## Common Mistakes
306
308
 
307
- ### Omitting `features` or `rowModels` (CRITICAL)
309
+ ### Omitting `features` (CRITICAL)
308
310
 
309
311
  ```ts
310
312
  // ❌ TS error: Property 'features' is missing in type ...
@@ -312,10 +314,10 @@ const table = useTable({ columns, data })
312
314
 
313
315
  // ✅
314
316
  const features = tableFeatures({})
315
- const table = useTable({ features, rowModels: {}, columns, data })
317
+ const table = useTable({ features, columns, data })
316
318
  ```
317
319
 
318
- Both keys are required even for the simplest table.
320
+ `features` is required even for the simplest table.
319
321
 
320
322
  ### Wrong `createColumnHelper` arity (CRITICAL)
321
323
 
@@ -327,20 +329,25 @@ const columnHelper = createColumnHelper<Person>()
327
329
  const columnHelper = createColumnHelper<typeof features, Person>()
328
330
  ```
329
331
 
330
- ### Calling row-model factories without their `*Fns` parameter (CRITICAL)
332
+ ### Omitting the `*Fns` registry from `tableFeatures` (CRITICAL)
331
333
 
332
334
  ```ts
333
- // ❌ TS error / runtime missing fns.
334
- rowModels: {
335
- sortedRowModel: createSortedRowModel(),
336
- filteredRowModel: createFilteredRowModel(),
337
- }
335
+ // ❌ TS error / runtime missing fns — sort is a no-op.
336
+ const features = tableFeatures({
337
+ rowSortingFeature,
338
+ sortedRowModel: createSortedRowModel(),
339
+ // sortFns missing!
340
+ })
338
341
 
339
- // ✅ Pass the matching registry.
340
- rowModels: {
341
- sortedRowModel: createSortedRowModel(sortFns),
342
- filteredRowModel: createFilteredRowModel(filterFns),
343
- }
342
+ // ✅ Register the fn map as a slot alongside the factory.
343
+ const features = tableFeatures({
344
+ rowSortingFeature,
345
+ columnFilteringFeature,
346
+ sortedRowModel: createSortedRowModel(),
347
+ filteredRowModel: createFilteredRowModel(),
348
+ sortFns,
349
+ filterFns,
350
+ })
344
351
  ```
345
352
 
346
353
  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
351
358
  ```ts
352
359
  // ❌ `rowSortingFeature` not registered → `table.setSorting` is `undefined` and a TS error.
353
360
  const features = tableFeatures({})
354
- const table = useTable({ features, rowModels: {}, columns, data })
361
+ const table = useTable({ features, columns, data })
355
362
  table.setSorting([{ id: 'age', desc: true }]) // missing
356
363
 
357
- // ✅ Register the feature AND its row model.
358
- const features = tableFeatures({ rowSortingFeature })
359
- const table = useTable({
360
- features,
361
- rowModels: { sortedRowModel: createSortedRowModel(sortFns) },
362
- columns,
363
- data,
364
+ // ✅ Register the feature, its row model factory, and its fn registry in tableFeatures.
365
+ const features = tableFeatures({
366
+ rowSortingFeature,
367
+ sortedRowModel: createSortedRowModel(),
368
+ sortFns,
364
369
  })
370
+ const table = useTable({ features, columns, data })
365
371
  ```
366
372
 
367
373
  This is the #1 v9-specific failure mode — features must be declared to surface their APIs.
@@ -2,12 +2,12 @@
2
2
  name: vue/migrate-v8-to-v9
3
3
  description: >
4
4
  Mechanical breaking-change migration from `@tanstack/vue-table` v8 to v9. Rename `useVueTable`
5
- → `useTable`, move `getCoreRowModel`/`getSortedRowModel`/etc. options into `rowModels`
6
- factories, add the mandatory `features` via `tableFeatures({...})`, update
7
- `createColumnHelper<TData>()` → `createColumnHelper<typeof features, TData>()`, rename
5
+ → `useTable`, move `getCoreRowModel`/`getSortedRowModel`/etc. options into the `tableFeatures`
6
+ object as row model factory slots, add the mandatory `features` via `tableFeatures({...})`,
7
+ update `createColumnHelper<TData>()` → `createColumnHelper<typeof features, TData>()`, rename
8
8
  `sortingFn`/`sortingFns` → `sortFn`/`sortFns`, swap `table.getState()` for `table.state`
9
- / `table.state` / `table.atoms.<slice>.get()`, and prefer `<FlexRender :cell="cell" />` over the
10
- legacy `:render`/`:props` shape. Vue has NO `/legacy` entrypoint — migration is a direct
9
+ / `table.state` / `table.atoms.<slice>.get()`, and prefer `<FlexRender :cell="cell" />` over
10
+ the legacy `:render`/`:props` shape. Vue has NO `/legacy` entrypoint — migration is a direct
11
11
  rewrite. The Vue adapter installs `vueReactivity()` automatically.
12
12
  type: lifecycle
13
13
  library: tanstack-table
@@ -89,7 +89,13 @@ import {
89
89
  useTable,
90
90
  } from '@tanstack/vue-table'
91
91
 
92
- const features = tableFeatures({ rowSortingFeature, rowPaginationFeature })
92
+ const features = tableFeatures({
93
+ rowSortingFeature,
94
+ rowPaginationFeature,
95
+ sortedRowModel: createSortedRowModel(),
96
+ paginatedRowModel: createPaginatedRowModel(),
97
+ sortFns,
98
+ })
93
99
  const columnHelper = createColumnHelper<typeof features, Person>()
94
100
  const columns = columnHelper.columns([
95
101
  columnHelper.accessor('age', { header: 'Age', sortFn: 'alphanumeric' }), // sortingFn → sortFn
@@ -97,10 +103,6 @@ const columns = columnHelper.columns([
97
103
 
98
104
  const table = useTable({
99
105
  features,
100
- rowModels: {
101
- sortedRowModel: createSortedRowModel(sortFns),
102
- paginatedRowModel: createPaginatedRowModel(),
103
- },
104
106
  columns,
105
107
  data,
106
108
  })
@@ -118,10 +120,10 @@ const table = useTable({
118
120
  | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
119
121
  | `useVueTable(opts)` | `useTable(opts, selector?)` |
120
122
  | `getCoreRowModel: getCoreRowModel()` | implicit; not an option |
121
- | `getSortedRowModel: getSortedRowModel()` | `rowModels: { sortedRowModel: createSortedRowModel(sortFns) }` |
122
- | `getFilteredRowModel: getFilteredRowModel()` | `rowModels: { filteredRowModel: createFilteredRowModel(filterFns) }` |
123
- | `getPaginationRowModel: getPaginationRowModel()` | `rowModels: { paginatedRowModel: createPaginatedRowModel() }` |
124
- | `getGroupedRowModel: getGroupedRowModel()` | `rowModels: { groupedRowModel: createGroupedRowModel(aggregationFns) }` |
123
+ | `getSortedRowModel: getSortedRowModel()` | `tableFeatures({ sortedRowModel: createSortedRowModel(), sortFns })` |
124
+ | `getFilteredRowModel: getFilteredRowModel()` | `tableFeatures({ filteredRowModel: createFilteredRowModel(), filterFns })` |
125
+ | `getPaginationRowModel: getPaginationRowModel()` | `tableFeatures({ paginatedRowModel: createPaginatedRowModel() })` |
126
+ | `getGroupedRowModel: getGroupedRowModel()` | `tableFeatures({ groupedRowModel: createGroupedRowModel(), aggregationFns })` |
125
127
  | `createColumnHelper<TData>()` | `createColumnHelper<typeof features, TData>()` |
126
128
  | `ColumnDef<TData, TValue>` | `ColumnDef<TFeatures, TData, TValue>` |
127
129
  | `Column<TData, TValue>` / `Row<TData>` / `Cell<TData, TValue>` | `…<TFeatures, TData, TValue>` |
@@ -143,19 +145,28 @@ non-Vue-specific renames are shared across adapters).
143
145
 
144
146
  ## Core Patterns
145
147
 
146
- ### 1. Convert `getXRowModel` options to `rowModels` factories
148
+ ### 1. Convert `getXRowModel` options to features-slot factories
147
149
 
148
- Every row-model factory now requires its `*Fns` parameter — this is what makes the registries
149
- tree-shakeable in v9.
150
+ Row model factories now live on the `tableFeatures({...})` object alongside the feature
151
+ they belong to. The `*Fns` registries move there too — this is what makes them tree-shakeable
152
+ in v9.
150
153
 
151
154
  ```ts
152
- rowModels: {
153
- sortedRowModel: createSortedRowModel(sortFns),
154
- filteredRowModel: createFilteredRowModel(filterFns),
155
+ const features = tableFeatures({
156
+ rowSortingFeature,
157
+ columnFilteringFeature,
158
+ rowPaginationFeature,
159
+ rowGroupingFeature,
160
+ rowExpandingFeature,
161
+ sortedRowModel: createSortedRowModel(),
162
+ filteredRowModel: createFilteredRowModel(),
155
163
  paginatedRowModel: createPaginatedRowModel(),
156
- groupedRowModel: createGroupedRowModel(aggregationFns),
157
- expandedRowModel: createExpandedRowModel(),
158
- }
164
+ groupedRowModel: createGroupedRowModel(),
165
+ expandedRowModel: createExpandedRowModel(),
166
+ sortFns,
167
+ filterFns,
168
+ aggregationFns,
169
+ })
159
170
  ```
160
171
 
161
172
  The `*Fns` registries are open-ended; do not cite a number of built-in fns.
@@ -214,7 +225,6 @@ const sorting = ref<SortingState>([])
214
225
 
215
226
  const table = useTable({
216
227
  features,
217
- rowModels: { sortedRowModel: createSortedRowModel(sortFns) },
218
228
  columns,
219
229
  data,
220
230
  state: {
@@ -276,14 +286,15 @@ const table = useTable({
276
286
  getCoreRowModel: getCoreRowModel(),
277
287
  })
278
288
 
279
- // ✅ Core row model is implicit. `rowModels: {}` is fine.
280
- const table = useTable({ features, rowModels: {}, columns, data })
289
+ // ✅ Core row model is implicit. No `rowModels` option needed.
290
+ const table = useTable({ features, columns, data })
281
291
  ```
282
292
 
283
293
  ### Forgetting `features` (CRITICAL)
284
294
 
285
295
  `features` is required even for a no-features migration. Pass `tableFeatures({})` for empty,
286
- or list everything you use. Without it: `'features' is missing in type`.
296
+ or list everything you use (features + row model factories + fn registries). Without it:
297
+ `'features' is missing in type`.
287
298
 
288
299
  ### Wrong `createColumnHelper` generic arity (CRITICAL)
289
300
 
@@ -298,14 +309,21 @@ const columnHelper = createColumnHelper<typeof features, Person>()
298
309
  Same applies to type annotations: `ColumnDef<typeof features, Person>`,
299
310
  `Row<typeof features, Person>`, `Cell<typeof features, Person, unknown>`.
300
311
 
301
- ### Forgetting to pass `sortFns` / `filterFns` to row-model factories (CRITICAL)
312
+ ### Forgetting to register `sortFns` / `filterFns` in the features object (CRITICAL)
302
313
 
303
314
  ```ts
304
315
  // ❌ Runtime: no sort fns registered, sort is a no-op.
305
- sortedRowModel: createSortedRowModel()
316
+ const features = tableFeatures({
317
+ rowSortingFeature,
318
+ sortedRowModel: createSortedRowModel(),
319
+ })
306
320
 
307
- // ✅
308
- sortedRowModel: createSortedRowModel(sortFns)
321
+ // ✅ Register the fn map as a slot on the features object.
322
+ const features = tableFeatures({
323
+ rowSortingFeature,
324
+ sortedRowModel: createSortedRowModel(),
325
+ sortFns,
326
+ })
309
327
  ```
310
328
 
311
329
  ### Missed `sortingFn` → `sortFn` rename (HIGH)
@@ -371,5 +389,5 @@ etc.
371
389
  - `tanstack-table/vue/getting-started` — the v9 minimum-viable shape
372
390
  - `tanstack-table/vue/table-state` — reactivity model + reading state
373
391
  - `tanstack-table/vue/production-readiness` — finish the migration with bundle + identity audits
374
- - `tanstack-table/table-core/setup` — `features` / `rowModels` deep dive
392
+ - `tanstack-table/table-core/setup` — `features` / row model factory slots deep dive
375
393
  - `tanstack-table/table-core/column-definitions` — column helper + generics
@@ -3,13 +3,14 @@ name: vue/production-readiness
3
3
  description: >
4
4
  Ship-ready optimizations for `@tanstack/vue-table` v9. Tree-shake by listing ONLY the
5
5
  `features` you actually render — never default to `stockFeatures`. Keep `features`,
6
- `rowModels`, `columnHelper`, and `columns` at module scope for stable identity (Vue
7
- re-evaluates the `<script setup>` block per component instance — declare these outside or in
8
- a const). Use the `useTable(opts, selector)` second argument or per-slice `computed(() =>
9
- table.atoms.<slice>.get())` / `useSelector(table.atoms.<slice>)` from `@tanstack/vue-store`
10
- to narrow re-renders. Vue's reactivity already evaluates only dirty computed deps, so
11
- `table.Subscribe` is NOT the React-Compiler workaround it is in React — reach for
12
- fine-grained reads (`computed`, `useSelector`) first.
6
+ `columnHelper`, and `columns` at module scope for stable identity (Vue re-evaluates the
7
+ `<script setup>` block per component instance — declare these outside or in a const). Row
8
+ model factories and fn registries live as slots on the `tableFeatures({...})` object, not as
9
+ a separate `rowModels` option. Use the `useTable(opts, selector)` second argument or per-slice
10
+ `computed(() => table.atoms.<slice>.get())` / `useSelector(table.atoms.<slice>)` from
11
+ `@tanstack/vue-store` to narrow re-renders. Vue's reactivity already evaluates only dirty
12
+ computed deps, so `table.Subscribe` is NOT the React-Compiler workaround it is in React;
13
+ reach for fine-grained reads (`computed`, `useSelector`) first.
13
14
  type: lifecycle
14
15
  library: tanstack-table
15
16
  framework: vue
@@ -52,26 +53,24 @@ import {
52
53
  export const features = tableFeatures({
53
54
  rowSortingFeature,
54
55
  rowPaginationFeature,
55
- })
56
-
57
- export const rowModels = {
58
- sortedRowModel: createSortedRowModel(sortFns),
56
+ sortedRowModel: createSortedRowModel(),
59
57
  paginatedRowModel: createPaginatedRowModel(),
60
- }
58
+ sortFns,
59
+ })
61
60
  ```
62
61
 
63
62
  ```vue
64
63
  <script setup lang="ts">
65
64
  import { ref } from 'vue'
66
65
  import { useTable } from '@tanstack/vue-table'
67
- import { features, rowModels } from './table-setup'
66
+ import { features } from './table-setup'
68
67
  import { columns } from './columns'
69
68
 
70
69
  const props = defineProps<{ data: Person[] }>()
71
70
  const data = ref(props.data)
72
71
 
73
72
  // Narrow selector — table.state only carries what we actually render at this level.
74
- const table = useTable({ features, rowModels, columns, data }, (state) => ({
73
+ const table = useTable({ features, columns, data }, (state) => ({
75
74
  pagination: state.pagination,
76
75
  sorting: state.sorting,
77
76
  }))
@@ -95,12 +94,16 @@ const features = tableFeatures({ rowSortingFeature })
95
94
  isn't wired into a column def or UI handler, drop it. v9 is tree-shakeable specifically so you
96
95
  only pay for what you use.
97
96
 
98
- ### 2. Module-scope `features` / `rowModels` / `columnHelper` / `columns`
97
+ ### 2. Module-scope `features` / `columnHelper` / `columns`
99
98
 
100
99
  ```ts
101
100
  // ❌ Inside <script setup> — every component instance creates new identities, which churns
102
101
  // the table's option-watcher and triggers a `setOptions` on every reactive tick.
103
- const features = tableFeatures({ rowSortingFeature })
102
+ const features = tableFeatures({
103
+ rowSortingFeature,
104
+ sortedRowModel: createSortedRowModel(),
105
+ sortFns,
106
+ })
104
107
  const columnHelper = createColumnHelper<typeof features, Person>()
105
108
  const columns = columnHelper.columns([
106
109
  /* ... */
@@ -109,7 +112,11 @@ const columns = columnHelper.columns([
109
112
 
110
113
  ```ts
111
114
  // ✅ Module scope — one identity, shared across instances, GC-friendly.
112
- const features = tableFeatures({ rowSortingFeature })
115
+ const features = tableFeatures({
116
+ rowSortingFeature,
117
+ sortedRowModel: createSortedRowModel(),
118
+ sortFns,
119
+ })
113
120
  const columnHelper = createColumnHelper<typeof features, Person>()
114
121
  export const columns = columnHelper.columns([
115
122
  /* ... */
@@ -124,11 +131,11 @@ write `data: ref([...])` inline in the table options (a fresh ref each render).
124
131
  ```ts
125
132
  // ❌ Default selector — table.state contains every registered slice; any state change re-renders
126
133
  // every consumer of table.state.
127
- const table = useTable({ features, rowModels, columns, data })
134
+ const table = useTable({ features, columns, data })
128
135
 
129
136
  // ✅ Project only what THIS component renders. Other slices still drive table internals; you
130
137
  // just don't subscribe to them at the component level.
131
- const table = useTable({ features, rowModels, columns, data }, (state) => ({
138
+ const table = useTable({ features, columns, data }, (state) => ({
132
139
  pagination: state.pagination,
133
140
  sorting: state.sorting,
134
141
  }))
@@ -191,7 +198,7 @@ Use `table.Subscribe` only for cross-store source subscription (`<table.Subscrib
191
198
  Defeats the entire reason v9 is tree-shakeable. Replace with an explicit
192
199
  `tableFeatures({...})` listing only the features your UI renders.
193
200
 
194
- ### Re-declaring `features` / `rowModels` / `columns` inside `<script setup>` (HIGH)
201
+ ### Re-declaring `features` / `columns` inside `<script setup>` (HIGH)
195
202
 
196
203
  Vue runs `<script setup>` once per component instance, but that's still per-page-navigation in
197
204
  SPAs and per-instance in any reusable component. Module scope is cheapest and shared.
@@ -217,7 +224,7 @@ watchEffect(() => {
217
224
 
218
225
  ```ts
219
226
  // ❌ Whole table re-evaluates table.state on every keystroke in a column filter.
220
- const table = useTable({ features, rowModels, columns, data })
227
+ const table = useTable({ features, columns, data })
221
228
 
222
229
  // ✅
223
230
  const table = useTable(opts, (s) => ({ pagination: s.pagination }))
@@ -41,9 +41,10 @@ v8 name `useVueTable` no longer exists.
41
41
 
42
42
  ## Setup
43
43
 
44
- Every Vue table call requires `features` (built from `tableFeatures({...})`) and `rowModels`.
45
- Core row model is automatic; only register `paginatedRowModel`, `sortedRowModel`, etc. when you
46
- use the matching feature.
44
+ Every Vue table call requires `features` (built from `tableFeatures({...})`). Row model
45
+ factories now live on the features object alongside the feature itself. Core row model is
46
+ automatic; only register `paginatedRowModel`, `sortedRowModel`, etc. when you use the matching
47
+ feature.
47
48
 
48
49
  ```vue
49
50
  <script setup lang="ts">
@@ -61,7 +62,11 @@ import {
61
62
  type Person = { firstName: string; lastName: string; age: number }
62
63
 
63
64
  // Stable identity — declare outside the component or at module scope.
64
- const features = tableFeatures({ rowSortingFeature })
65
+ const features = tableFeatures({
66
+ rowSortingFeature,
67
+ sortedRowModel: createSortedRowModel(),
68
+ sortFns,
69
+ })
65
70
  const columnHelper = createColumnHelper<typeof features, Person>()
66
71
  const columns = columnHelper.columns([
67
72
  columnHelper.accessor('firstName', { header: 'First' }),
@@ -73,7 +78,6 @@ const data = ref<Person[]>([])
73
78
 
74
79
  const table = useTable({
75
80
  features,
76
- rowModels: { sortedRowModel: createSortedRowModel(sortFns) },
77
81
  columns,
78
82
  // Reactive data: pass the ref directly OR a getter — the adapter unwraps.
79
83
  data,
@@ -102,7 +106,7 @@ const table = useTable({
102
106
 
103
107
  ### Why this works
104
108
 
105
- The Vue adapter calls `vueReactivity()` and installs it as `coreReativityFeature` automatically
109
+ The Vue adapter calls `vueReactivity()` and installs it as `coreReactivityFeature` automatically
106
110
  (see `packages/vue-table/src/useTable.ts`):
107
111
 
108
112
  - Readonly atoms back onto `computed()` refs.
@@ -133,7 +137,6 @@ const snapshot = table.state
133
137
  const table = useTable(
134
138
  {
135
139
  features,
136
- rowModels: { sortedRowModel: createSortedRowModel(sortFns) },
137
140
  columns,
138
141
  data,
139
142
  },
@@ -155,12 +158,11 @@ The adapter accepts a `ref`/`computed` for any option. The idiomatic shapes are:
155
158
  ```ts
156
159
  // (a) Pass the ref directly — adapter unwraps via `unref()`
157
160
  const data = ref(makeData(100))
158
- const table = useTable({ features, rowModels: {}, columns, data })
161
+ const table = useTable({ features, columns, data })
159
162
 
160
163
  // (b) Use a getter when `data` is owned by a parent object
161
164
  const table = useTable({
162
165
  features,
163
- rowModels: {},
164
166
  columns,
165
167
  get data() {
166
168
  return data.value
@@ -171,7 +173,6 @@ const table = useTable({
171
173
  const filtered = computed(() => data.value.filter(/* … */))
172
174
  const table = useTable({
173
175
  features,
174
- rowModels: {},
175
176
  columns,
176
177
  get data() {
177
178
  return filtered.value
@@ -199,7 +200,10 @@ import {
199
200
  type PaginationState,
200
201
  } from '@tanstack/vue-table'
201
202
 
202
- const features = tableFeatures({ rowPaginationFeature })
203
+ const features = tableFeatures({
204
+ rowPaginationFeature,
205
+ paginatedRowModel: createPaginatedRowModel(),
206
+ })
203
207
 
204
208
  const paginationAtom = createAtom<PaginationState>({
205
209
  pageIndex: 0,
@@ -210,7 +214,6 @@ const pagination = useSelector(paginationAtom) // reactive ref-like
210
214
  const data = ref([] as Person[])
211
215
  const table = useTable({
212
216
  features,
213
- rowModels: { paginatedRowModel: createPaginatedRowModel() },
214
217
  columns,
215
218
  data,
216
219
  atoms: { pagination: paginationAtom },
@@ -240,10 +243,6 @@ const pagination = ref<PaginationState>({ pageIndex: 0, pageSize: 10 })
240
243
 
241
244
  const table = useTable({
242
245
  features,
243
- rowModels: {
244
- sortedRowModel: createSortedRowModel(sortFns),
245
- paginatedRowModel: createPaginatedRowModel(),
246
- },
247
246
  columns,
248
247
  data,
249
248
  state: {
@@ -302,7 +301,6 @@ return () => (
302
301
  const pagination = ref<PaginationState>({ pageIndex: 0, pageSize: 10 })
303
302
  const table = useTable({
304
303
  features,
305
- rowModels: {},
306
304
  columns,
307
305
  data,
308
306
  state: { pagination },
@@ -311,7 +309,6 @@ const table = useTable({
311
309
  // ✅ Use a getter so Vue tracks `.value`.
312
310
  const table = useTable({
313
311
  features,
314
- rowModels: {},
315
312
  columns,
316
313
  data,
317
314
  state: {
@@ -355,17 +352,16 @@ import { useTable } from '@tanstack/vue-table'
355
352
  ```ts
356
353
  // ❌ `rowSortingFeature` not registered → `table.setSorting` and `table.atoms.sorting` do not exist.
357
354
  const features = tableFeatures({})
358
- const table = useTable({ features, rowModels: {}, columns, data })
355
+ const table = useTable({ features, columns, data })
359
356
  table.setSorting([{ id: 'age', desc: true }]) // TS error / runtime no-op
360
357
 
361
- // ✅ Register the feature; add the matching row model factory if it's a row-model feature.
362
- const features = tableFeatures({ rowSortingFeature })
363
- const table = useTable({
364
- features,
365
- rowModels: { sortedRowModel: createSortedRowModel(sortFns) },
366
- columns,
367
- data,
358
+ // ✅ Register the feature and its matching row model factory inside tableFeatures.
359
+ const features = tableFeatures({
360
+ rowSortingFeature,
361
+ sortedRowModel: createSortedRowModel(),
362
+ sortFns,
368
363
  })
364
+ const table = useTable({ features, columns, data })
369
365
  ```
370
366
 
371
367
  ### Reimplementing built-in state transitions (CRITICAL — #1 AI tell)