Skip to content

Commit 5110aa9

Browse files
authored
fix: make normal JS-getter work, make reactivity a non-breaking change (#5702)
1 parent 4685962 commit 5110aa9

File tree

1 file changed

+51
-23
lines changed

1 file changed

+51
-23
lines changed

packages/vue-table/src/index.ts

+51-23
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import { TableOptions, createTable, RowData } from '@tanstack/table-core'
1+
import {
2+
TableOptions,
3+
createTable,
4+
RowData,
5+
TableOptionsResolved,
6+
} from '@tanstack/table-core'
27
import {
38
h,
49
watchEffect,
@@ -8,6 +13,7 @@ import {
813
unref,
914
MaybeRef,
1015
watch,
16+
shallowRef,
1117
} from 'vue'
1218
import { mergeProxy } from './merge-proxy'
1319

@@ -47,28 +53,44 @@ function getOptionsWithReactiveData<TData extends RowData>(
4753
export function useVueTable<TData extends RowData>(
4854
initialOptions: TableOptionsWithReactiveData<TData>
4955
) {
56+
const IS_REACTIVE = isRef(initialOptions.data)
57+
5058
const resolvedOptions = mergeProxy(
5159
{
5260
state: {}, // Dummy state
5361
onStateChange: () => {}, // noop
5462
renderFallbackValue: null,
63+
mergeOptions(
64+
defaultOptions: TableOptions<TData>,
65+
options: TableOptions<TData>
66+
) {
67+
return IS_REACTIVE
68+
? {
69+
...defaultOptions,
70+
...options,
71+
}
72+
: mergeProxy(defaultOptions, options)
73+
},
5574
},
56-
getOptionsWithReactiveData(initialOptions)
75+
IS_REACTIVE ? getOptionsWithReactiveData(initialOptions) : initialOptions
5776
)
5877

59-
const table = createTable<TData>(resolvedOptions)
78+
const table = createTable<TData>(
79+
resolvedOptions as TableOptionsResolved<TData>
80+
)
6081

6182
// Add reactivity support
62-
if (isRef(initialOptions.data)) {
83+
if (IS_REACTIVE) {
84+
const dataRef = shallowRef(initialOptions.data)
6385
watch(
64-
initialOptions.data,
86+
dataRef,
6587
() => {
6688
table.setState(prev => ({
6789
...prev,
68-
data: unref(initialOptions.data),
90+
data: dataRef.value,
6991
}))
7092
},
71-
{ immediate: true, deep: true }
93+
{ immediate: true }
7294
)
7395
}
7496

@@ -81,23 +103,29 @@ export function useVueTable<TData extends RowData>(
81103
get: (_, prop) => state.value[prop as keyof typeof state.value],
82104
})
83105

84-
return mergeProxy(prev, getOptionsWithReactiveData(initialOptions), {
85-
// merge the initialState and `options.state`
86-
// create a new proxy on each `setOptions` call
87-
// and get the value from state on each property access
88-
state: mergeProxy(stateProxy, initialOptions.state ?? {}),
89-
// Similarly, we'll maintain both our internal state and any user-provided
90-
// state.
91-
onStateChange: (updater: any) => {
92-
if (updater instanceof Function) {
93-
state.value = updater(state.value)
94-
} else {
95-
state.value = updater
96-
}
106+
return mergeProxy(
107+
prev,
108+
IS_REACTIVE
109+
? getOptionsWithReactiveData(initialOptions)
110+
: initialOptions,
111+
{
112+
// merge the initialState and `options.state`
113+
// create a new proxy on each `setOptions` call
114+
// and get the value from state on each property access
115+
state: mergeProxy(stateProxy, initialOptions.state ?? {}),
116+
// Similarly, we'll maintain both our internal state and any user-provided
117+
// state.
118+
onStateChange: (updater: any) => {
119+
if (updater instanceof Function) {
120+
state.value = updater(state.value)
121+
} else {
122+
state.value = updater
123+
}
97124

98-
initialOptions.onStateChange?.(updater)
99-
},
100-
})
125+
initialOptions.onStateChange?.(updater)
126+
},
127+
}
128+
)
101129
})
102130
})
103131

0 commit comments

Comments
 (0)