@tanstack/vue-table 9.0.0-beta.2 → 9.0.0-beta.21
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.
- package/dist/FlexRender.cjs.map +1 -1
- package/dist/FlexRender.d.cts +30 -12
- package/dist/FlexRender.d.ts +30 -12
- package/dist/FlexRender.js.map +1 -1
- package/dist/createTableHook.cjs +23 -64
- package/dist/createTableHook.cjs.map +1 -1
- package/dist/createTableHook.d.cts +16 -20
- package/dist/createTableHook.d.ts +16 -20
- package/dist/createTableHook.js +23 -64
- package/dist/createTableHook.js.map +1 -1
- package/dist/flex-render.d.cts +2 -2
- package/dist/flex-render.d.ts +2 -2
- package/dist/index.d.cts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/reactivity.cjs +10 -19
- package/dist/reactivity.cjs.map +1 -1
- package/dist/reactivity.js +10 -19
- package/dist/reactivity.js.map +1 -1
- package/dist/useTable.cjs +12 -20
- package/dist/useTable.cjs.map +1 -1
- package/dist/useTable.d.cts +14 -48
- package/dist/useTable.d.ts +14 -48
- package/dist/useTable.js +13 -21
- package/dist/useTable.js.map +1 -1
- package/package.json +4 -4
- package/skills/vue/client-to-server/SKILL.md +21 -26
- package/skills/vue/compose-with-tanstack-form/SKILL.md +4 -4
- package/skills/vue/compose-with-tanstack-pacer/SKILL.md +6 -3
- package/skills/vue/compose-with-tanstack-query/SKILL.md +18 -20
- package/skills/vue/compose-with-tanstack-store/SKILL.md +7 -6
- package/skills/vue/compose-with-tanstack-virtual/SKILL.md +8 -4
- package/skills/vue/getting-started/SKILL.md +55 -49
- package/skills/vue/migrate-v8-to-v9/SKILL.md +50 -32
- package/skills/vue/production-readiness/SKILL.md +28 -21
- package/skills/vue/table-state/SKILL.md +22 -26
- package/src/FlexRender.ts +28 -13
- package/src/createTableHook.ts +18 -82
- package/src/reactivity.ts +17 -43
- 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({
|
|
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
|
|
326
|
-
|
|
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({})
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
`<
|
|
9
|
-
|
|
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
|
-
|
|
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({
|
|
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
|
-
|
|
164
|
-
|
|
165
|
-
|
|
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
|
|
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({
|
|
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`
|
|
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,
|
|
317
|
+
const table = useTable({ features, columns, data })
|
|
316
318
|
```
|
|
317
319
|
|
|
318
|
-
|
|
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
|
-
###
|
|
332
|
+
### Omitting the `*Fns` registry from `tableFeatures` (CRITICAL)
|
|
331
333
|
|
|
332
334
|
```ts
|
|
333
|
-
// ❌ TS error / runtime missing fns.
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
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
|
-
// ✅
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
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,
|
|
361
|
+
const table = useTable({ features, columns, data })
|
|
355
362
|
table.setSorting([{ id: 'age', desc: true }]) // missing
|
|
356
363
|
|
|
357
|
-
// ✅ Register the feature
|
|
358
|
-
const features = tableFeatures({
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
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 `
|
|
6
|
-
|
|
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
|
|
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({
|
|
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()` | `
|
|
122
|
-
| `getFilteredRowModel: getFilteredRowModel()` | `
|
|
123
|
-
| `getPaginationRowModel: getPaginationRowModel()` | `
|
|
124
|
-
| `getGroupedRowModel: getGroupedRowModel()` | `
|
|
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
|
|
148
|
+
### 1. Convert `getXRowModel` options to features-slot factories
|
|
147
149
|
|
|
148
|
-
|
|
149
|
-
tree-shakeable
|
|
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
|
-
|
|
153
|
-
|
|
154
|
-
|
|
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:
|
|
157
|
-
expandedRowModel:
|
|
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
|
|
280
|
-
const table = useTable({ features,
|
|
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
|
|
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
|
|
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
|
-
|
|
316
|
+
const features = tableFeatures({
|
|
317
|
+
rowSortingFeature,
|
|
318
|
+
sortedRowModel: createSortedRowModel(),
|
|
319
|
+
})
|
|
306
320
|
|
|
307
|
-
// ✅
|
|
308
|
-
|
|
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` /
|
|
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
|
-
`
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
`
|
|
12
|
-
|
|
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
|
|
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,
|
|
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` / `
|
|
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({
|
|
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({
|
|
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,
|
|
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,
|
|
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` / `
|
|
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,
|
|
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({...})`)
|
|
45
|
-
|
|
46
|
-
use the matching
|
|
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({
|
|
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 `
|
|
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,
|
|
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({
|
|
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,
|
|
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
|
|
362
|
-
const features = tableFeatures({
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
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)
|