Skip to content

Commit ab8e318

Browse files
OlaAlsakerKevinVandyautofix-ci[bot]
authored
feat: add support for reactivity in Vue-adapter (#5687)
* feat: add support for reactive data in Vue-adapter * docs: update example to use reactivity * add new in 8 20 callout to new docs * ci: apply automated fixes --------- Co-authored-by: Kevin Van Cott <kevinvandy656@gmail.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent f8a018d commit ab8e318

4 files changed

Lines changed: 96 additions & 27 deletions

File tree

‎docs/framework/vue/guide/table-state.md‎

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,44 @@ You do not need to set up anything special in order for the table state to work.
1313
```ts
1414
const table = useVueTable({
1515
columns,
16-
get data() {
17-
return data.value
18-
},
16+
data: dataRef, // Reactive data support
1917
//...
2018
})
2119

2220
console.log(table.getState()) //access the entire internal state
2321
console.log(table.getState().rowSelection) //access just the row selection state
2422
```
2523

24+
### Using Reactive Data
25+
26+
> **New in v8.20.0**
27+
28+
The `useVueTable` hook now supports reactive data. This means you can pass a Vue `ref` or `computed` containing your data to the `data`-option. The table will automatically react to changes in the data.
29+
30+
```ts
31+
const columns = [
32+
{ accessor: 'id', Header: 'ID' },
33+
{ accessor: 'name', Header: 'Name' }
34+
]
35+
36+
const dataRef = ref([
37+
{ id: 1, name: 'John' },
38+
{ id: 2, name: 'Jane' }
39+
])
40+
41+
const table = useVueTable({
42+
columns,
43+
data: dataRef, // Pass the reactive data ref
44+
})
45+
46+
// Later, updating dataRef will automatically update the table
47+
dataRef.value = [
48+
{ id: 1, name: 'John' },
49+
{ id: 2, name: 'Jane' },
50+
{ id: 3, name: 'Doe' }
51+
]
52+
```
53+
2654
### Custom Initial State
2755

2856
If all you need to do for certain states is customize their initial default values, you still do not need to manage any of the state yourself. You can simply set values in the `initialState` option of the table instance.
@@ -126,9 +154,7 @@ const table = useVueTable({
126154
get columns() {
127155
return columns.value
128156
},
129-
get data() {
130-
return data.value
131-
},
157+
data,
132158
//... Note: `state` values are NOT passed in yet
133159
})
134160
@@ -201,4 +227,4 @@ const sorting = ref<SortingState[]>([
201227
desc: true,
202228
}
203229
])
204-
```
230+
```

‎examples/vue/column-ordering/src/App.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,8 @@ const table = useVueTable({
8383
},
8484
8585
onColumnOrderChange: order => {
86-
columnOrder.value = order
86+
columnOrder.value =
87+
order instanceof Function ? order(columnOrder.value) : order
8788
},
8889
getCoreRowModel: getCoreRowModel(),
8990
debugTable: true,

‎examples/vue/column-pinning/src/App.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,10 +94,12 @@ const table = useVueTable({
9494
},
9595
9696
onColumnOrderChange: order => {
97-
columnOrder.value = order
97+
columnOrder.value =
98+
order instanceof Function ? order(columnOrder.value) : order
9899
},
99100
onColumnPinningChange: pinning => {
100-
columnPinning.value = pinning()
101+
columnPinning.value =
102+
pinning instanceof Function ? pinning(columnPinning.value) : pinning
101103
},
102104
getCoreRowModel: getCoreRowModel(),
103105
debugTable: true,

‎packages/vue-table/src/index.ts‎

Lines changed: 57 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,33 @@ import {
44
TableOptionsResolved,
55
RowData,
66
} from '@tanstack/table-core'
7-
import { h, watchEffect, ref, defineComponent } from 'vue'
7+
import {
8+
h,
9+
watchEffect,
10+
ref,
11+
defineComponent,
12+
isRef,
13+
unref,
14+
MaybeRef,
15+
} from 'vue'
816
import { mergeProxy } from './merge-proxy'
917

1018
export * from '@tanstack/table-core'
1119

20+
type TableOptionsWithReactiveData<TData extends RowData> = Omit<
21+
TableOptions<TData>,
22+
'data'
23+
> & {
24+
data: MaybeRef<TData[]>
25+
}
26+
27+
type TableOptionsResolvedWithReactiveData<TData extends RowData> = Omit<
28+
TableOptionsResolved<TData>,
29+
'data'
30+
> & {
31+
data: MaybeRef<TData[]>
32+
}
33+
1234
export const FlexRender = defineComponent({
1335
props: ['render', 'props'],
1436
setup: (props: { render: any; props: any }) => {
@@ -26,24 +48,32 @@ export const FlexRender = defineComponent({
2648
})
2749

2850
export function useVueTable<TData extends RowData>(
29-
options: TableOptions<TData>
51+
options: TableOptionsWithReactiveData<TData>
3052
) {
31-
const resolvedOptions: TableOptionsResolved<TData> = mergeProxy(
32-
{
33-
state: {}, // Dummy state
34-
onStateChange: () => {}, // noop
35-
renderFallbackValue: null,
36-
mergeOptions(
37-
defaultOptions: TableOptions<TData>,
38-
options: TableOptions<TData>
39-
) {
40-
return mergeProxy(defaultOptions, options)
53+
const resolvedOptions: TableOptionsResolvedWithReactiveData<TData> =
54+
mergeProxy(
55+
{
56+
state: {}, // Dummy state
57+
onStateChange: () => {}, // noop
58+
renderFallbackValue: null,
59+
mergeOptions(
60+
defaultOptions: TableOptions<TData>,
61+
options: TableOptions<TData>
62+
) {
63+
return mergeProxy(defaultOptions, options)
64+
},
4165
},
42-
},
43-
options
44-
)
66+
options
67+
)
68+
69+
// Add support for reactivity
70+
if (isRef(options.data)) {
71+
resolvedOptions.data = unref(options.data)
72+
}
4573

46-
const table = createTable<TData>(resolvedOptions)
74+
const table = createTable<TData>(
75+
resolvedOptions as TableOptionsResolved<TData>
76+
)
4777
// can't use `reactive` because update needs to be immutable
4878
const state = ref(table.initialState)
4979

@@ -53,7 +83,7 @@ export function useVueTable<TData extends RowData>(
5383
get: (_, prop) => state.value[prop as keyof typeof state.value],
5484
})
5585

56-
return mergeProxy(prev, options, {
86+
const newOptions = mergeProxy(prev, options, {
5787
// merge the initialState and `options.state`
5888
// create a new proxy on each `setOptions` call
5989
// and get the value from state on each property access
@@ -70,6 +100,16 @@ export function useVueTable<TData extends RowData>(
70100
options.onStateChange?.(updater)
71101
},
72102
})
103+
104+
// Add support for reactivity
105+
if (isRef(options.data)) {
106+
return {
107+
...newOptions,
108+
data: unref(options.data),
109+
}
110+
}
111+
112+
return newOptions
73113
})
74114
})
75115

0 commit comments

Comments
 (0)