1
- import { TableOptions , createTable , RowData } from '@tanstack/table-core'
1
+ import {
2
+ TableOptions ,
3
+ createTable ,
4
+ RowData ,
5
+ TableOptionsResolved ,
6
+ } from '@tanstack/table-core'
2
7
import {
3
8
h ,
4
9
watchEffect ,
@@ -8,6 +13,7 @@ import {
8
13
unref ,
9
14
MaybeRef ,
10
15
watch ,
16
+ shallowRef ,
11
17
} from 'vue'
12
18
import { mergeProxy } from './merge-proxy'
13
19
@@ -47,28 +53,44 @@ function getOptionsWithReactiveData<TData extends RowData>(
47
53
export function useVueTable < TData extends RowData > (
48
54
initialOptions : TableOptionsWithReactiveData < TData >
49
55
) {
56
+ const IS_REACTIVE = isRef ( initialOptions . data )
57
+
50
58
const resolvedOptions = mergeProxy (
51
59
{
52
60
state : { } , // Dummy state
53
61
onStateChange : ( ) => { } , // noop
54
62
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
+ } ,
55
74
} ,
56
- getOptionsWithReactiveData ( initialOptions )
75
+ IS_REACTIVE ? getOptionsWithReactiveData ( initialOptions ) : initialOptions
57
76
)
58
77
59
- const table = createTable < TData > ( resolvedOptions )
78
+ const table = createTable < TData > (
79
+ resolvedOptions as TableOptionsResolved < TData >
80
+ )
60
81
61
82
// Add reactivity support
62
- if ( isRef ( initialOptions . data ) ) {
83
+ if ( IS_REACTIVE ) {
84
+ const dataRef = shallowRef ( initialOptions . data )
63
85
watch (
64
- initialOptions . data ,
86
+ dataRef ,
65
87
( ) => {
66
88
table . setState ( prev => ( {
67
89
...prev ,
68
- data : unref ( initialOptions . data ) ,
90
+ data : dataRef . value ,
69
91
} ) )
70
92
} ,
71
- { immediate : true , deep : true }
93
+ { immediate : true }
72
94
)
73
95
}
74
96
@@ -81,23 +103,29 @@ export function useVueTable<TData extends RowData>(
81
103
get : ( _ , prop ) => state . value [ prop as keyof typeof state . value ] ,
82
104
} )
83
105
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
+ }
97
124
98
- initialOptions . onStateChange ?.( updater )
99
- } ,
100
- } )
125
+ initialOptions . onStateChange ?.( updater )
126
+ } ,
127
+ }
128
+ )
101
129
} )
102
130
} )
103
131
0 commit comments