@tanstack/vue-table 8.20.2 → 8.20.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-table",
-  "version": "8.20.2",
+  "version": "8.20.4",
   "description": "Headless UI for building powerful tables & datagrids for Vue.",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/index.ts

@@ -1,4 +1,9 @@
-import { TableOptions, createTable, RowData } from '@tanstack/table-core'
+import {
+  TableOptions,
+  createTable,
+  RowData,
+  TableOptionsResolved,
+} from '@tanstack/table-core'
 import {
   h,
   watchEffect,
@@ -8,12 +13,13 @@ import {
   unref,
   MaybeRef,
   watch,
+  shallowRef,
 } from 'vue'
 import { mergeProxy } from './merge-proxy'
 
 export * from '@tanstack/table-core'
 
-type TableOptionsWithReactiveData<TData extends RowData> = Omit<
+export type TableOptionsWithReactiveData<TData extends RowData> = Omit<
   TableOptions<TData>,
   'data'
 > & {
@@ -47,6 +53,8 @@ function getOptionsWithReactiveData<TData extends RowData>(
 export function useVueTable<TData extends RowData>(
   initialOptions: TableOptionsWithReactiveData<TData>
 ) {
+  const IS_REACTIVE = isRef(initialOptions.data)
+
   const resolvedOptions = mergeProxy(
     {
       state: {}, // Dummy state
@@ -56,25 +64,33 @@ export function useVueTable<TData extends RowData>(
         defaultOptions: TableOptions<TData>,
         options: TableOptions<TData>
       ) {
-        return mergeProxy(defaultOptions, options)
+        return IS_REACTIVE
+          ? {
+              ...defaultOptions,
+              ...options,
+            }
+          : mergeProxy(defaultOptions, options)
       },
     },
-    getOptionsWithReactiveData(initialOptions)
+    IS_REACTIVE ? getOptionsWithReactiveData(initialOptions) : initialOptions
   )
 
-  const table = createTable<TData>(resolvedOptions)
+  const table = createTable<TData>(
+    resolvedOptions as TableOptionsResolved<TData>
+  )
 
   // Add reactivity support
-  if (isRef(initialOptions.data)) {
+  if (IS_REACTIVE) {
+    const dataRef = shallowRef(initialOptions.data)
     watch(
-      initialOptions.data,
+      dataRef,
       () => {
         table.setState(prev => ({
           ...prev,
-          data: unref(initialOptions.data),
+          data: dataRef.value,
         }))
       },
-      { immediate: true, deep: true }
+      { immediate: true }
     )
   }
 
@@ -87,23 +103,29 @@ export function useVueTable<TData extends RowData>(
         get: (_, prop) => state.value[prop as keyof typeof state.value],
       })
 
-      return mergeProxy(prev, getOptionsWithReactiveData(initialOptions), {
-        // merge the initialState and `options.state`
-        // create a new proxy on each `setOptions` call
-        // and get the value from state on each property access
-        state: mergeProxy(stateProxy, initialOptions.state ?? {}),
-        // Similarly, we'll maintain both our internal state and any user-provided
-        // state.
-        onStateChange: (updater: any) => {
-          if (updater instanceof Function) {
-            state.value = updater(state.value)
-          } else {
-            state.value = updater
-          }
+      return mergeProxy(
+        prev,
+        IS_REACTIVE
+          ? getOptionsWithReactiveData(initialOptions)
+          : initialOptions,
+        {
+          // merge the initialState and `options.state`
+          // create a new proxy on each `setOptions` call
+          // and get the value from state on each property access
+          state: mergeProxy(stateProxy, initialOptions.state ?? {}),
+          // Similarly, we'll maintain both our internal state and any user-provided
+          // state.
+          onStateChange: (updater: any) => {
+            if (updater instanceof Function) {
+              state.value = updater(state.value)
+            } else {
+              state.value = updater
+            }
 
-          initialOptions.onStateChange?.(updater)
-        },
-      })
+            initialOptions.onStateChange?.(updater)
+          },
+        }
+      )
     })
   })