@tanstack/vue-table 8.20.0 → 8.20.2

package/build/lib/index.d.ts

@@ -14,4 +14,4 @@ export declare const FlexRender: import("vue").DefineComponent<Readonly<{
     readonly props?: any;
     readonly render?: any;
 }, {}>;
-export declare function useVueTable<TData extends RowData>(options: TableOptionsWithReactiveData<TData>): import("@tanstack/table-core").Table<TData>;
+export declare function useVueTable<TData extends RowData>(initialOptions: TableOptionsWithReactiveData<TData>): import("@tanstack/table-core").Table<TData>;

package/build/lib/index.esm.js

@@ -10,7 +10,7 @@
    */
 import { createTable } from '@tanstack/table-core';
 export * from '@tanstack/table-core';
-import { defineComponent, h, isRef, unref, ref, watchEffect } from 'vue';
+import { defineComponent, h, isRef, watch, unref, ref, watchEffect } from 'vue';
 
 function trueFn() {
   return true;
@@ -82,7 +82,12 @@ const FlexRender = defineComponent({
     };
   }
 });
-function useVueTable(options) {
+function getOptionsWithReactiveData(options) {
+  return mergeProxy(options, {
+    data: unref(options.data)
+  });
+}
+function useVueTable(initialOptions) {
   const resolvedOptions = mergeProxy({
     state: {},
     // Dummy state
@@ -92,26 +97,35 @@ function useVueTable(options) {
     mergeOptions(defaultOptions, options) {
       return mergeProxy(defaultOptions, options);
     }
-  }, options);
+  }, getOptionsWithReactiveData(initialOptions));
+  const table = createTable(resolvedOptions);
 
-  // Add support for reactivity
-  if (isRef(options.data)) {
-    resolvedOptions.data = unref(options.data);
+  // Add reactivity support
+  if (isRef(initialOptions.data)) {
+    watch(initialOptions.data, () => {
+      table.setState(prev => ({
+        ...prev,
+        data: unref(initialOptions.data)
+      }));
+    }, {
+      immediate: true,
+      deep: true
+    });
   }
-  const table = createTable(resolvedOptions);
+
   // can't use `reactive` because update needs to be immutable
   const state = ref(table.initialState);
   watchEffect(() => {
     table.setOptions(prev => {
-      var _options$state;
+      var _initialOptions$state;
       const stateProxy = new Proxy({}, {
         get: (_, prop) => state.value[prop]
       });
-      const newOptions = mergeProxy(prev, options, {
+      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, (_options$state = options.state) != null ? _options$state : {}),
+        state: mergeProxy(stateProxy, (_initialOptions$state = initialOptions.state) != null ? _initialOptions$state : {}),
         // Similarly, we'll maintain both our internal state and any user-provided
         // state.
         onStateChange: updater => {
@@ -120,18 +134,9 @@ function useVueTable(options) {
           } else {
             state.value = updater;
           }
-          options.onStateChange == null || options.onStateChange(updater);
+          initialOptions.onStateChange == null || initialOptions.onStateChange(updater);
         }
       });
-
-      // Add support for reactivity
-      if (isRef(options.data)) {
-        return {
-          ...newOptions,
-          data: unref(options.data)
-        };
-      }
-      return newOptions;
     });
   });
   return table;

package/build/lib/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../src/merge-proxy.ts","../../src/index.ts"],"sourcesContent":["function trueFn() {\n  return true\n}\n\nconst $PROXY = Symbol('merge-proxy')\n\n// https://github.com/solidjs/solid/blob/c20ca4fd8c36bc0522fedb2c7f38a110b7ee2663/packages/solid/src/render/component.ts#L51-L118\nconst propTraps: ProxyHandler<{\n  get: (k: string | number | symbol) => any\n  has: (k: string | number | symbol) => boolean\n  keys: () => string[]\n}> = {\n  get(_, property, receiver) {\n    if (property === $PROXY) return receiver\n    return _.get(property)\n  },\n  has(_, property) {\n    return _.has(property)\n  },\n  set: trueFn,\n  deleteProperty: trueFn,\n  getOwnPropertyDescriptor(_, property) {\n    return {\n      configurable: true,\n      enumerable: true,\n      get() {\n        return _.get(property)\n      },\n      set: trueFn,\n      deleteProperty: trueFn,\n    }\n  },\n  ownKeys(_) {\n    return _.keys()\n  },\n}\n\ntype UnboxLazy<T> = T extends () => infer U ? U : T\ntype BoxedTupleTypes<T extends any[]> = {\n  [P in keyof T]: [UnboxLazy<T[P]>]\n}[Exclude<keyof T, keyof any[]>]\ntype UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (\n  k: infer I\n) => void\n  ? I\n  : never\ntype UnboxIntersection<T> = T extends { 0: infer U } ? U : never\ntype MergeProxy<T extends any[]> = UnboxIntersection<\n  UnionToIntersection<BoxedTupleTypes<T>>\n>\n\nfunction resolveSource(s: any) {\n  return 'value' in s ? s.value : s\n}\n\nexport function mergeProxy<T extends any[]>(...sources: T): MergeProxy<T>\nexport function mergeProxy(...sources: any): any {\n  return new Proxy(\n    {\n      get(property: string | number | symbol) {\n        for (let i = sources.length - 1; i >= 0; i--) {\n          const v = resolveSource(sources[i])[property]\n          if (v !== undefined) return v\n        }\n      },\n      has(property: string | number | symbol) {\n        for (let i = sources.length - 1; i >= 0; i--) {\n          if (property in resolveSource(sources[i])) return true\n        }\n        return false\n      },\n      keys() {\n        const keys = []\n        for (let i = 0; i < sources.length; i++)\n          keys.push(...Object.keys(resolveSource(sources[i])))\n        return [...Array.from(new Set(keys))]\n      },\n    },\n    propTraps\n  )\n}\n","import {\n  TableOptions,\n  createTable,\n  TableOptionsResolved,\n  RowData,\n} from '@tanstack/table-core'\nimport {\n  h,\n  watchEffect,\n  ref,\n  defineComponent,\n  isRef,\n  unref,\n  MaybeRef,\n} from 'vue'\nimport { mergeProxy } from './merge-proxy'\n\nexport * from '@tanstack/table-core'\n\ntype TableOptionsWithReactiveData<TData extends RowData> = Omit<\n  TableOptions<TData>,\n  'data'\n> & {\n  data: MaybeRef<TData[]>\n}\n\ntype TableOptionsResolvedWithReactiveData<TData extends RowData> = Omit<\n  TableOptionsResolved<TData>,\n  'data'\n> & {\n  data: MaybeRef<TData[]>\n}\n\nexport const FlexRender = defineComponent({\n  props: ['render', 'props'],\n  setup: (props: { render: any; props: any }) => {\n    return () => {\n      if (\n        typeof props.render === 'function' ||\n        typeof props.render === 'object'\n      ) {\n        return h(props.render, props.props)\n      }\n\n      return props.render\n    }\n  },\n})\n\nexport function useVueTable<TData extends RowData>(\n  options: TableOptionsWithReactiveData<TData>\n) {\n  const resolvedOptions: TableOptionsResolvedWithReactiveData<TData> =\n    mergeProxy(\n      {\n        state: {}, // Dummy state\n        onStateChange: () => {}, // noop\n        renderFallbackValue: null,\n        mergeOptions(\n          defaultOptions: TableOptions<TData>,\n          options: TableOptions<TData>\n        ) {\n          return mergeProxy(defaultOptions, options)\n        },\n      },\n      options\n    )\n\n  // Add support for reactivity\n  if (isRef(options.data)) {\n    resolvedOptions.data = unref(options.data)\n  }\n\n  const table = createTable<TData>(\n    resolvedOptions as TableOptionsResolved<TData>\n  )\n  // can't use `reactive` because update needs to be immutable\n  const state = ref(table.initialState)\n\n  watchEffect(() => {\n    table.setOptions(prev => {\n      const stateProxy = new Proxy({} as typeof state.value, {\n        get: (_, prop) => state.value[prop as keyof typeof state.value],\n      })\n\n      const newOptions = mergeProxy(prev, options, {\n        // merge the initialState and `options.state`\n        // create a new proxy on each `setOptions` call\n        // and get the value from state on each property access\n        state: mergeProxy(stateProxy, options.state ?? {}),\n        // Similarly, we'll maintain both our internal state and any user-provided\n        // state.\n        onStateChange: (updater: any) => {\n          if (updater instanceof Function) {\n            state.value = updater(state.value)\n          } else {\n            state.value = updater\n          }\n\n          options.onStateChange?.(updater)\n        },\n      })\n\n      // Add support for reactivity\n      if (isRef(options.data)) {\n        return {\n          ...newOptions,\n          data: unref(options.data),\n        }\n      }\n\n      return newOptions\n    })\n  })\n\n  return table\n}\n"],"names":["trueFn","$PROXY","Symbol","propTraps","get","_","property","receiver","has","set","deleteProperty","getOwnPropertyDescriptor","configurable","enumerable","ownKeys","keys","resolveSource","s","value","mergeProxy","_len","arguments","length","sources","Array","_key","Proxy","i","v","undefined","push","Object","from","Set","FlexRender","defineComponent","props","setup","render","h","useVueTable","options","resolvedOptions","state","onStateChange","renderFallbackValue","mergeOptions","defaultOptions","isRef","data","unref","table","createTable","ref","initialState","watchEffect","setOptions","prev","_options$state","stateProxy","prop","newOptions","updater","Function"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../src/merge-proxy.ts","../../src/index.ts"],"sourcesContent":["function trueFn() {\n  return true\n}\n\nconst $PROXY = Symbol('merge-proxy')\n\n// https://github.com/solidjs/solid/blob/c20ca4fd8c36bc0522fedb2c7f38a110b7ee2663/packages/solid/src/render/component.ts#L51-L118\nconst propTraps: ProxyHandler<{\n  get: (k: string | number | symbol) => any\n  has: (k: string | number | symbol) => boolean\n  keys: () => string[]\n}> = {\n  get(_, property, receiver) {\n    if (property === $PROXY) return receiver\n    return _.get(property)\n  },\n  has(_, property) {\n    return _.has(property)\n  },\n  set: trueFn,\n  deleteProperty: trueFn,\n  getOwnPropertyDescriptor(_, property) {\n    return {\n      configurable: true,\n      enumerable: true,\n      get() {\n        return _.get(property)\n      },\n      set: trueFn,\n      deleteProperty: trueFn,\n    }\n  },\n  ownKeys(_) {\n    return _.keys()\n  },\n}\n\ntype UnboxLazy<T> = T extends () => infer U ? U : T\ntype BoxedTupleTypes<T extends any[]> = {\n  [P in keyof T]: [UnboxLazy<T[P]>]\n}[Exclude<keyof T, keyof any[]>]\ntype UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (\n  k: infer I\n) => void\n  ? I\n  : never\ntype UnboxIntersection<T> = T extends { 0: infer U } ? U : never\ntype MergeProxy<T extends any[]> = UnboxIntersection<\n  UnionToIntersection<BoxedTupleTypes<T>>\n>\n\nfunction resolveSource(s: any) {\n  return 'value' in s ? s.value : s\n}\n\nexport function mergeProxy<T extends any[]>(...sources: T): MergeProxy<T>\nexport function mergeProxy(...sources: any): any {\n  return new Proxy(\n    {\n      get(property: string | number | symbol) {\n        for (let i = sources.length - 1; i >= 0; i--) {\n          const v = resolveSource(sources[i])[property]\n          if (v !== undefined) return v\n        }\n      },\n      has(property: string | number | symbol) {\n        for (let i = sources.length - 1; i >= 0; i--) {\n          if (property in resolveSource(sources[i])) return true\n        }\n        return false\n      },\n      keys() {\n        const keys = []\n        for (let i = 0; i < sources.length; i++)\n          keys.push(...Object.keys(resolveSource(sources[i])))\n        return [...Array.from(new Set(keys))]\n      },\n    },\n    propTraps\n  )\n}\n","import { TableOptions, createTable, RowData } from '@tanstack/table-core'\nimport {\n  h,\n  watchEffect,\n  ref,\n  defineComponent,\n  isRef,\n  unref,\n  MaybeRef,\n  watch,\n} from 'vue'\nimport { mergeProxy } from './merge-proxy'\n\nexport * from '@tanstack/table-core'\n\ntype TableOptionsWithReactiveData<TData extends RowData> = Omit<\n  TableOptions<TData>,\n  'data'\n> & {\n  data: MaybeRef<TData[]>\n}\n\nexport const FlexRender = defineComponent({\n  props: ['render', 'props'],\n  setup: (props: { render: any; props: any }) => {\n    return () => {\n      if (\n        typeof props.render === 'function' ||\n        typeof props.render === 'object'\n      ) {\n        return h(props.render, props.props)\n      }\n\n      return props.render\n    }\n  },\n})\n\nfunction getOptionsWithReactiveData<TData extends RowData>(\n  options: TableOptionsWithReactiveData<TData>\n) {\n  return mergeProxy(options, {\n    data: unref(options.data),\n  })\n}\n\nexport function useVueTable<TData extends RowData>(\n  initialOptions: TableOptionsWithReactiveData<TData>\n) {\n  const resolvedOptions = mergeProxy(\n    {\n      state: {}, // Dummy state\n      onStateChange: () => {}, // noop\n      renderFallbackValue: null,\n      mergeOptions(\n        defaultOptions: TableOptions<TData>,\n        options: TableOptions<TData>\n      ) {\n        return mergeProxy(defaultOptions, options)\n      },\n    },\n    getOptionsWithReactiveData(initialOptions)\n  )\n\n  const table = createTable<TData>(resolvedOptions)\n\n  // Add reactivity support\n  if (isRef(initialOptions.data)) {\n    watch(\n      initialOptions.data,\n      () => {\n        table.setState(prev => ({\n          ...prev,\n          data: unref(initialOptions.data),\n        }))\n      },\n      { immediate: true, deep: true }\n    )\n  }\n\n  // can't use `reactive` because update needs to be immutable\n  const state = ref(table.initialState)\n\n  watchEffect(() => {\n    table.setOptions(prev => {\n      const stateProxy = new Proxy({} as typeof state.value, {\n        get: (_, prop) => state.value[prop as keyof typeof state.value],\n      })\n\n      return mergeProxy(prev, getOptionsWithReactiveData(initialOptions), {\n        // merge the initialState and `options.state`\n        // create a new proxy on each `setOptions` call\n        // and get the value from state on each property access\n        state: mergeProxy(stateProxy, initialOptions.state ?? {}),\n        // Similarly, we'll maintain both our internal state and any user-provided\n        // state.\n        onStateChange: (updater: any) => {\n          if (updater instanceof Function) {\n            state.value = updater(state.value)\n          } else {\n            state.value = updater\n          }\n\n          initialOptions.onStateChange?.(updater)\n        },\n      })\n    })\n  })\n\n  return table\n}\n"],"names":["trueFn","$PROXY","Symbol","propTraps","get","_","property","receiver","has","set","deleteProperty","getOwnPropertyDescriptor","configurable","enumerable","ownKeys","keys","resolveSource","s","value","mergeProxy","_len","arguments","length","sources","Array","_key","Proxy","i","v","undefined","push","Object","from","Set","FlexRender","defineComponent","props","setup","render","h","getOptionsWithReactiveData","options","data","unref","useVueTable","initialOptions","resolvedOptions","state","onStateChange","renderFallbackValue","mergeOptions","defaultOptions","table","createTable","isRef","watch","setState","prev","immediate","deep","ref","initialState","watchEffect","setOptions","_initialOptions$state","stateProxy","prop","updater","Function"],"mappings":"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"}

package/build/lib/index.js

@@ -25,7 +25,12 @@ const FlexRender = vue.defineComponent({
     };
   }
 });
-function useVueTable(options) {
+function getOptionsWithReactiveData(options) {
+  return mergeProxy.mergeProxy(options, {
+    data: vue.unref(options.data)
+  });
+}
+function useVueTable(initialOptions) {
   const resolvedOptions = mergeProxy.mergeProxy({
     state: {},
     // Dummy state
@@ -35,26 +40,35 @@ function useVueTable(options) {
     mergeOptions(defaultOptions, options) {
       return mergeProxy.mergeProxy(defaultOptions, options);
     }
-  }, options);
+  }, getOptionsWithReactiveData(initialOptions));
+  const table = tableCore.createTable(resolvedOptions);
 
-  // Add support for reactivity
-  if (vue.isRef(options.data)) {
-    resolvedOptions.data = vue.unref(options.data);
+  // Add reactivity support
+  if (vue.isRef(initialOptions.data)) {
+    vue.watch(initialOptions.data, () => {
+      table.setState(prev => ({
+        ...prev,
+        data: vue.unref(initialOptions.data)
+      }));
+    }, {
+      immediate: true,
+      deep: true
+    });
   }
-  const table = tableCore.createTable(resolvedOptions);
+
   // can't use `reactive` because update needs to be immutable
   const state = vue.ref(table.initialState);
   vue.watchEffect(() => {
     table.setOptions(prev => {
-      var _options$state;
+      var _initialOptions$state;
       const stateProxy = new Proxy({}, {
         get: (_, prop) => state.value[prop]
       });
-      const newOptions = mergeProxy.mergeProxy(prev, options, {
+      return mergeProxy.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.mergeProxy(stateProxy, (_options$state = options.state) != null ? _options$state : {}),
+        state: mergeProxy.mergeProxy(stateProxy, (_initialOptions$state = initialOptions.state) != null ? _initialOptions$state : {}),
         // Similarly, we'll maintain both our internal state and any user-provided
         // state.
         onStateChange: updater => {
@@ -63,18 +77,9 @@ function useVueTable(options) {
           } else {
             state.value = updater;
           }
-          options.onStateChange == null || options.onStateChange(updater);
+          initialOptions.onStateChange == null || initialOptions.onStateChange(updater);
         }
       });
-
-      // Add support for reactivity
-      if (vue.isRef(options.data)) {
-        return {
-          ...newOptions,
-          data: vue.unref(options.data)
-        };
-      }
-      return newOptions;
     });
   });
   return table;

package/build/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["import {\n  TableOptions,\n  createTable,\n  TableOptionsResolved,\n  RowData,\n} from '@tanstack/table-core'\nimport {\n  h,\n  watchEffect,\n  ref,\n  defineComponent,\n  isRef,\n  unref,\n  MaybeRef,\n} from 'vue'\nimport { mergeProxy } from './merge-proxy'\n\nexport * from '@tanstack/table-core'\n\ntype TableOptionsWithReactiveData<TData extends RowData> = Omit<\n  TableOptions<TData>,\n  'data'\n> & {\n  data: MaybeRef<TData[]>\n}\n\ntype TableOptionsResolvedWithReactiveData<TData extends RowData> = Omit<\n  TableOptionsResolved<TData>,\n  'data'\n> & {\n  data: MaybeRef<TData[]>\n}\n\nexport const FlexRender = defineComponent({\n  props: ['render', 'props'],\n  setup: (props: { render: any; props: any }) => {\n    return () => {\n      if (\n        typeof props.render === 'function' ||\n        typeof props.render === 'object'\n      ) {\n        return h(props.render, props.props)\n      }\n\n      return props.render\n    }\n  },\n})\n\nexport function useVueTable<TData extends RowData>(\n  options: TableOptionsWithReactiveData<TData>\n) {\n  const resolvedOptions: TableOptionsResolvedWithReactiveData<TData> =\n    mergeProxy(\n      {\n        state: {}, // Dummy state\n        onStateChange: () => {}, // noop\n        renderFallbackValue: null,\n        mergeOptions(\n          defaultOptions: TableOptions<TData>,\n          options: TableOptions<TData>\n        ) {\n          return mergeProxy(defaultOptions, options)\n        },\n      },\n      options\n    )\n\n  // Add support for reactivity\n  if (isRef(options.data)) {\n    resolvedOptions.data = unref(options.data)\n  }\n\n  const table = createTable<TData>(\n    resolvedOptions as TableOptionsResolved<TData>\n  )\n  // can't use `reactive` because update needs to be immutable\n  const state = ref(table.initialState)\n\n  watchEffect(() => {\n    table.setOptions(prev => {\n      const stateProxy = new Proxy({} as typeof state.value, {\n        get: (_, prop) => state.value[prop as keyof typeof state.value],\n      })\n\n      const newOptions = mergeProxy(prev, options, {\n        // merge the initialState and `options.state`\n        // create a new proxy on each `setOptions` call\n        // and get the value from state on each property access\n        state: mergeProxy(stateProxy, options.state ?? {}),\n        // Similarly, we'll maintain both our internal state and any user-provided\n        // state.\n        onStateChange: (updater: any) => {\n          if (updater instanceof Function) {\n            state.value = updater(state.value)\n          } else {\n            state.value = updater\n          }\n\n          options.onStateChange?.(updater)\n        },\n      })\n\n      // Add support for reactivity\n      if (isRef(options.data)) {\n        return {\n          ...newOptions,\n          data: unref(options.data),\n        }\n      }\n\n      return newOptions\n    })\n  })\n\n  return table\n}\n"],"names":["FlexRender","defineComponent","props","setup","render","h","useVueTable","options","resolvedOptions","mergeProxy","state","onStateChange","renderFallbackValue","mergeOptions","defaultOptions","isRef","data","unref","table","createTable","ref","initialState","watchEffect","setOptions","prev","_options$state","stateProxy","Proxy","get","_","prop","value","newOptions","updater","Function"],"mappings":";;;;;;;;;;;;;;;;AAiCaA,MAAAA,UAAU,GAAGC,mBAAe,CAAC;AACxCC,EAAAA,KAAK,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;EAC1BC,KAAK,EAAGD,KAAkC,IAAK;AAC7C,IAAA,OAAO,MAAM;AACX,MAAA,IACE,OAAOA,KAAK,CAACE,MAAM,KAAK,UAAU,IAClC,OAAOF,KAAK,CAACE,MAAM,KAAK,QAAQ,EAChC;QACA,OAAOC,KAAC,CAACH,KAAK,CAACE,MAAM,EAAEF,KAAK,CAACA,KAAK,CAAC,CAAA;AACrC,OAAA;MAEA,OAAOA,KAAK,CAACE,MAAM,CAAA;KACpB,CAAA;AACH,GAAA;AACF,CAAC,EAAC;AAEK,SAASE,WAAWA,CACzBC,OAA4C,EAC5C;EACA,MAAMC,eAA4D,GAChEC,qBAAU,CACR;IACEC,KAAK,EAAE,EAAE;AAAE;AACXC,IAAAA,aAAa,EAAEA,MAAM,EAAE;AAAE;AACzBC,IAAAA,mBAAmB,EAAE,IAAI;AACzBC,IAAAA,YAAYA,CACVC,cAAmC,EACnCP,OAA4B,EAC5B;AACA,MAAA,OAAOE,qBAAU,CAACK,cAAc,EAAEP,OAAO,CAAC,CAAA;AAC5C,KAAA;GACD,EACDA,OACF,CAAC,CAAA;;AAEH;AACA,EAAA,IAAIQ,SAAK,CAACR,OAAO,CAACS,IAAI,CAAC,EAAE;IACvBR,eAAe,CAACQ,IAAI,GAAGC,SAAK,CAACV,OAAO,CAACS,IAAI,CAAC,CAAA;AAC5C,GAAA;AAEA,EAAA,MAAME,KAAK,GAAGC,qBAAW,CACvBX,eACF,CAAC,CAAA;AACD;AACA,EAAA,MAAME,KAAK,GAAGU,OAAG,CAACF,KAAK,CAACG,YAAY,CAAC,CAAA;AAErCC,EAAAA,eAAW,CAAC,MAAM;AAChBJ,IAAAA,KAAK,CAACK,UAAU,CAACC,IAAI,IAAI;AAAA,MAAA,IAAAC,cAAA,CAAA;AACvB,MAAA,MAAMC,UAAU,GAAG,IAAIC,KAAK,CAAC,EAAE,EAAwB;QACrDC,GAAG,EAAEA,CAACC,CAAC,EAAEC,IAAI,KAAKpB,KAAK,CAACqB,KAAK,CAACD,IAAI,CAAA;AACpC,OAAC,CAAC,CAAA;AAEF,MAAA,MAAME,UAAU,GAAGvB,qBAAU,CAACe,IAAI,EAAEjB,OAAO,EAAE;AAC3C;AACA;AACA;AACAG,QAAAA,KAAK,EAAED,qBAAU,CAACiB,UAAU,GAAAD,cAAA,GAAElB,OAAO,CAACG,KAAK,KAAAe,IAAAA,GAAAA,cAAA,GAAI,EAAE,CAAC;AAClD;AACA;QACAd,aAAa,EAAGsB,OAAY,IAAK;UAC/B,IAAIA,OAAO,YAAYC,QAAQ,EAAE;YAC/BxB,KAAK,CAACqB,KAAK,GAAGE,OAAO,CAACvB,KAAK,CAACqB,KAAK,CAAC,CAAA;AACpC,WAAC,MAAM;YACLrB,KAAK,CAACqB,KAAK,GAAGE,OAAO,CAAA;AACvB,WAAA;UAEA1B,OAAO,CAACI,aAAa,IAArBJ,IAAAA,IAAAA,OAAO,CAACI,aAAa,CAAGsB,OAAO,CAAC,CAAA;AAClC,SAAA;AACF,OAAC,CAAC,CAAA;;AAEF;AACA,MAAA,IAAIlB,SAAK,CAACR,OAAO,CAACS,IAAI,CAAC,EAAE;QACvB,OAAO;AACL,UAAA,GAAGgB,UAAU;AACbhB,UAAAA,IAAI,EAAEC,SAAK,CAACV,OAAO,CAACS,IAAI,CAAA;SACzB,CAAA;AACH,OAAA;AAEA,MAAA,OAAOgB,UAAU,CAAA;AACnB,KAAC,CAAC,CAAA;AACJ,GAAC,CAAC,CAAA;AAEF,EAAA,OAAOd,KAAK,CAAA;AACd;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["import { TableOptions, createTable, RowData } from '@tanstack/table-core'\nimport {\n  h,\n  watchEffect,\n  ref,\n  defineComponent,\n  isRef,\n  unref,\n  MaybeRef,\n  watch,\n} from 'vue'\nimport { mergeProxy } from './merge-proxy'\n\nexport * from '@tanstack/table-core'\n\ntype TableOptionsWithReactiveData<TData extends RowData> = Omit<\n  TableOptions<TData>,\n  'data'\n> & {\n  data: MaybeRef<TData[]>\n}\n\nexport const FlexRender = defineComponent({\n  props: ['render', 'props'],\n  setup: (props: { render: any; props: any }) => {\n    return () => {\n      if (\n        typeof props.render === 'function' ||\n        typeof props.render === 'object'\n      ) {\n        return h(props.render, props.props)\n      }\n\n      return props.render\n    }\n  },\n})\n\nfunction getOptionsWithReactiveData<TData extends RowData>(\n  options: TableOptionsWithReactiveData<TData>\n) {\n  return mergeProxy(options, {\n    data: unref(options.data),\n  })\n}\n\nexport function useVueTable<TData extends RowData>(\n  initialOptions: TableOptionsWithReactiveData<TData>\n) {\n  const resolvedOptions = mergeProxy(\n    {\n      state: {}, // Dummy state\n      onStateChange: () => {}, // noop\n      renderFallbackValue: null,\n      mergeOptions(\n        defaultOptions: TableOptions<TData>,\n        options: TableOptions<TData>\n      ) {\n        return mergeProxy(defaultOptions, options)\n      },\n    },\n    getOptionsWithReactiveData(initialOptions)\n  )\n\n  const table = createTable<TData>(resolvedOptions)\n\n  // Add reactivity support\n  if (isRef(initialOptions.data)) {\n    watch(\n      initialOptions.data,\n      () => {\n        table.setState(prev => ({\n          ...prev,\n          data: unref(initialOptions.data),\n        }))\n      },\n      { immediate: true, deep: true }\n    )\n  }\n\n  // can't use `reactive` because update needs to be immutable\n  const state = ref(table.initialState)\n\n  watchEffect(() => {\n    table.setOptions(prev => {\n      const stateProxy = new Proxy({} as typeof state.value, {\n        get: (_, prop) => state.value[prop as keyof typeof state.value],\n      })\n\n      return mergeProxy(prev, getOptionsWithReactiveData(initialOptions), {\n        // merge the initialState and `options.state`\n        // create a new proxy on each `setOptions` call\n        // and get the value from state on each property access\n        state: mergeProxy(stateProxy, initialOptions.state ?? {}),\n        // Similarly, we'll maintain both our internal state and any user-provided\n        // state.\n        onStateChange: (updater: any) => {\n          if (updater instanceof Function) {\n            state.value = updater(state.value)\n          } else {\n            state.value = updater\n          }\n\n          initialOptions.onStateChange?.(updater)\n        },\n      })\n    })\n  })\n\n  return table\n}\n"],"names":["FlexRender","defineComponent","props","setup","render","h","getOptionsWithReactiveData","options","mergeProxy","data","unref","useVueTable","initialOptions","resolvedOptions","state","onStateChange","renderFallbackValue","mergeOptions","defaultOptions","table","createTable","isRef","watch","setState","prev","immediate","deep","ref","initialState","watchEffect","setOptions","_initialOptions$state","stateProxy","Proxy","get","_","prop","value","updater","Function"],"mappings":"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"}

package/build/lib/index.mjs

@@ -10,7 +10,7 @@
    */
 import { createTable } from '@tanstack/table-core';
 export * from '@tanstack/table-core';
-import { defineComponent, h, isRef, unref, ref, watchEffect } from 'vue';
+import { defineComponent, h, isRef, watch, unref, ref, watchEffect } from 'vue';
 
 function trueFn() {
   return true;
@@ -82,7 +82,12 @@ const FlexRender = defineComponent({
     };
   }
 });
-function useVueTable(options) {
+function getOptionsWithReactiveData(options) {
+  return mergeProxy(options, {
+    data: unref(options.data)
+  });
+}
+function useVueTable(initialOptions) {
   const resolvedOptions = mergeProxy({
     state: {},
     // Dummy state
@@ -92,26 +97,35 @@ function useVueTable(options) {
     mergeOptions(defaultOptions, options) {
       return mergeProxy(defaultOptions, options);
     }
-  }, options);
+  }, getOptionsWithReactiveData(initialOptions));
+  const table = createTable(resolvedOptions);
 
-  // Add support for reactivity
-  if (isRef(options.data)) {
-    resolvedOptions.data = unref(options.data);
+  // Add reactivity support
+  if (isRef(initialOptions.data)) {
+    watch(initialOptions.data, () => {
+      table.setState(prev => ({
+        ...prev,
+        data: unref(initialOptions.data)
+      }));
+    }, {
+      immediate: true,
+      deep: true
+    });
   }
-  const table = createTable(resolvedOptions);
+
   // can't use `reactive` because update needs to be immutable
   const state = ref(table.initialState);
   watchEffect(() => {
     table.setOptions(prev => {
-      var _options$state;
+      var _initialOptions$state;
       const stateProxy = new Proxy({}, {
         get: (_, prop) => state.value[prop]
       });
-      const newOptions = mergeProxy(prev, options, {
+      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, (_options$state = options.state) != null ? _options$state : {}),
+        state: mergeProxy(stateProxy, (_initialOptions$state = initialOptions.state) != null ? _initialOptions$state : {}),
         // Similarly, we'll maintain both our internal state and any user-provided
         // state.
         onStateChange: updater => {
@@ -120,18 +134,9 @@ function useVueTable(options) {
           } else {
             state.value = updater;
           }
-          options.onStateChange == null || options.onStateChange(updater);
+          initialOptions.onStateChange == null || initialOptions.onStateChange(updater);
         }
       });
-
-      // Add support for reactivity
-      if (isRef(options.data)) {
-        return {
-          ...newOptions,
-          data: unref(options.data)
-        };
-      }
-      return newOptions;
     });
   });
   return table;

package/build/lib/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/merge-proxy.ts","../../src/index.ts"],"sourcesContent":["function trueFn() {\n  return true\n}\n\nconst $PROXY = Symbol('merge-proxy')\n\n// https://github.com/solidjs/solid/blob/c20ca4fd8c36bc0522fedb2c7f38a110b7ee2663/packages/solid/src/render/component.ts#L51-L118\nconst propTraps: ProxyHandler<{\n  get: (k: string | number | symbol) => any\n  has: (k: string | number | symbol) => boolean\n  keys: () => string[]\n}> = {\n  get(_, property, receiver) {\n    if (property === $PROXY) return receiver\n    return _.get(property)\n  },\n  has(_, property) {\n    return _.has(property)\n  },\n  set: trueFn,\n  deleteProperty: trueFn,\n  getOwnPropertyDescriptor(_, property) {\n    return {\n      configurable: true,\n      enumerable: true,\n      get() {\n        return _.get(property)\n      },\n      set: trueFn,\n      deleteProperty: trueFn,\n    }\n  },\n  ownKeys(_) {\n    return _.keys()\n  },\n}\n\ntype UnboxLazy<T> = T extends () => infer U ? U : T\ntype BoxedTupleTypes<T extends any[]> = {\n  [P in keyof T]: [UnboxLazy<T[P]>]\n}[Exclude<keyof T, keyof any[]>]\ntype UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (\n  k: infer I\n) => void\n  ? I\n  : never\ntype UnboxIntersection<T> = T extends { 0: infer U } ? U : never\ntype MergeProxy<T extends any[]> = UnboxIntersection<\n  UnionToIntersection<BoxedTupleTypes<T>>\n>\n\nfunction resolveSource(s: any) {\n  return 'value' in s ? s.value : s\n}\n\nexport function mergeProxy<T extends any[]>(...sources: T): MergeProxy<T>\nexport function mergeProxy(...sources: any): any {\n  return new Proxy(\n    {\n      get(property: string | number | symbol) {\n        for (let i = sources.length - 1; i >= 0; i--) {\n          const v = resolveSource(sources[i])[property]\n          if (v !== undefined) return v\n        }\n      },\n      has(property: string | number | symbol) {\n        for (let i = sources.length - 1; i >= 0; i--) {\n          if (property in resolveSource(sources[i])) return true\n        }\n        return false\n      },\n      keys() {\n        const keys = []\n        for (let i = 0; i < sources.length; i++)\n          keys.push(...Object.keys(resolveSource(sources[i])))\n        return [...Array.from(new Set(keys))]\n      },\n    },\n    propTraps\n  )\n}\n","import {\n  TableOptions,\n  createTable,\n  TableOptionsResolved,\n  RowData,\n} from '@tanstack/table-core'\nimport {\n  h,\n  watchEffect,\n  ref,\n  defineComponent,\n  isRef,\n  unref,\n  MaybeRef,\n} from 'vue'\nimport { mergeProxy } from './merge-proxy'\n\nexport * from '@tanstack/table-core'\n\ntype TableOptionsWithReactiveData<TData extends RowData> = Omit<\n  TableOptions<TData>,\n  'data'\n> & {\n  data: MaybeRef<TData[]>\n}\n\ntype TableOptionsResolvedWithReactiveData<TData extends RowData> = Omit<\n  TableOptionsResolved<TData>,\n  'data'\n> & {\n  data: MaybeRef<TData[]>\n}\n\nexport const FlexRender = defineComponent({\n  props: ['render', 'props'],\n  setup: (props: { render: any; props: any }) => {\n    return () => {\n      if (\n        typeof props.render === 'function' ||\n        typeof props.render === 'object'\n      ) {\n        return h(props.render, props.props)\n      }\n\n      return props.render\n    }\n  },\n})\n\nexport function useVueTable<TData extends RowData>(\n  options: TableOptionsWithReactiveData<TData>\n) {\n  const resolvedOptions: TableOptionsResolvedWithReactiveData<TData> =\n    mergeProxy(\n      {\n        state: {}, // Dummy state\n        onStateChange: () => {}, // noop\n        renderFallbackValue: null,\n        mergeOptions(\n          defaultOptions: TableOptions<TData>,\n          options: TableOptions<TData>\n        ) {\n          return mergeProxy(defaultOptions, options)\n        },\n      },\n      options\n    )\n\n  // Add support for reactivity\n  if (isRef(options.data)) {\n    resolvedOptions.data = unref(options.data)\n  }\n\n  const table = createTable<TData>(\n    resolvedOptions as TableOptionsResolved<TData>\n  )\n  // can't use `reactive` because update needs to be immutable\n  const state = ref(table.initialState)\n\n  watchEffect(() => {\n    table.setOptions(prev => {\n      const stateProxy = new Proxy({} as typeof state.value, {\n        get: (_, prop) => state.value[prop as keyof typeof state.value],\n      })\n\n      const newOptions = mergeProxy(prev, options, {\n        // merge the initialState and `options.state`\n        // create a new proxy on each `setOptions` call\n        // and get the value from state on each property access\n        state: mergeProxy(stateProxy, options.state ?? {}),\n        // Similarly, we'll maintain both our internal state and any user-provided\n        // state.\n        onStateChange: (updater: any) => {\n          if (updater instanceof Function) {\n            state.value = updater(state.value)\n          } else {\n            state.value = updater\n          }\n\n          options.onStateChange?.(updater)\n        },\n      })\n\n      // Add support for reactivity\n      if (isRef(options.data)) {\n        return {\n          ...newOptions,\n          data: unref(options.data),\n        }\n      }\n\n      return newOptions\n    })\n  })\n\n  return table\n}\n"],"names":["trueFn","$PROXY","Symbol","propTraps","get","_","property","receiver","has","set","deleteProperty","getOwnPropertyDescriptor","configurable","enumerable","ownKeys","keys","resolveSource","s","value","mergeProxy","_len","arguments","length","sources","Array","_key","Proxy","i","v","undefined","push","Object","from","Set","FlexRender","defineComponent","props","setup","render","h","useVueTable","options","resolvedOptions","state","onStateChange","renderFallbackValue","mergeOptions","defaultOptions","isRef","data","unref","table","createTable","ref","initialState","watchEffect","setOptions","prev","_options$state","stateProxy","prop","newOptions","updater","Function"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/merge-proxy.ts","../../src/index.ts"],"sourcesContent":["function trueFn() {\n  return true\n}\n\nconst $PROXY = Symbol('merge-proxy')\n\n// https://github.com/solidjs/solid/blob/c20ca4fd8c36bc0522fedb2c7f38a110b7ee2663/packages/solid/src/render/component.ts#L51-L118\nconst propTraps: ProxyHandler<{\n  get: (k: string | number | symbol) => any\n  has: (k: string | number | symbol) => boolean\n  keys: () => string[]\n}> = {\n  get(_, property, receiver) {\n    if (property === $PROXY) return receiver\n    return _.get(property)\n  },\n  has(_, property) {\n    return _.has(property)\n  },\n  set: trueFn,\n  deleteProperty: trueFn,\n  getOwnPropertyDescriptor(_, property) {\n    return {\n      configurable: true,\n      enumerable: true,\n      get() {\n        return _.get(property)\n      },\n      set: trueFn,\n      deleteProperty: trueFn,\n    }\n  },\n  ownKeys(_) {\n    return _.keys()\n  },\n}\n\ntype UnboxLazy<T> = T extends () => infer U ? U : T\ntype BoxedTupleTypes<T extends any[]> = {\n  [P in keyof T]: [UnboxLazy<T[P]>]\n}[Exclude<keyof T, keyof any[]>]\ntype UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (\n  k: infer I\n) => void\n  ? I\n  : never\ntype UnboxIntersection<T> = T extends { 0: infer U } ? U : never\ntype MergeProxy<T extends any[]> = UnboxIntersection<\n  UnionToIntersection<BoxedTupleTypes<T>>\n>\n\nfunction resolveSource(s: any) {\n  return 'value' in s ? s.value : s\n}\n\nexport function mergeProxy<T extends any[]>(...sources: T): MergeProxy<T>\nexport function mergeProxy(...sources: any): any {\n  return new Proxy(\n    {\n      get(property: string | number | symbol) {\n        for (let i = sources.length - 1; i >= 0; i--) {\n          const v = resolveSource(sources[i])[property]\n          if (v !== undefined) return v\n        }\n      },\n      has(property: string | number | symbol) {\n        for (let i = sources.length - 1; i >= 0; i--) {\n          if (property in resolveSource(sources[i])) return true\n        }\n        return false\n      },\n      keys() {\n        const keys = []\n        for (let i = 0; i < sources.length; i++)\n          keys.push(...Object.keys(resolveSource(sources[i])))\n        return [...Array.from(new Set(keys))]\n      },\n    },\n    propTraps\n  )\n}\n","import { TableOptions, createTable, RowData } from '@tanstack/table-core'\nimport {\n  h,\n  watchEffect,\n  ref,\n  defineComponent,\n  isRef,\n  unref,\n  MaybeRef,\n  watch,\n} from 'vue'\nimport { mergeProxy } from './merge-proxy'\n\nexport * from '@tanstack/table-core'\n\ntype TableOptionsWithReactiveData<TData extends RowData> = Omit<\n  TableOptions<TData>,\n  'data'\n> & {\n  data: MaybeRef<TData[]>\n}\n\nexport const FlexRender = defineComponent({\n  props: ['render', 'props'],\n  setup: (props: { render: any; props: any }) => {\n    return () => {\n      if (\n        typeof props.render === 'function' ||\n        typeof props.render === 'object'\n      ) {\n        return h(props.render, props.props)\n      }\n\n      return props.render\n    }\n  },\n})\n\nfunction getOptionsWithReactiveData<TData extends RowData>(\n  options: TableOptionsWithReactiveData<TData>\n) {\n  return mergeProxy(options, {\n    data: unref(options.data),\n  })\n}\n\nexport function useVueTable<TData extends RowData>(\n  initialOptions: TableOptionsWithReactiveData<TData>\n) {\n  const resolvedOptions = mergeProxy(\n    {\n      state: {}, // Dummy state\n      onStateChange: () => {}, // noop\n      renderFallbackValue: null,\n      mergeOptions(\n        defaultOptions: TableOptions<TData>,\n        options: TableOptions<TData>\n      ) {\n        return mergeProxy(defaultOptions, options)\n      },\n    },\n    getOptionsWithReactiveData(initialOptions)\n  )\n\n  const table = createTable<TData>(resolvedOptions)\n\n  // Add reactivity support\n  if (isRef(initialOptions.data)) {\n    watch(\n      initialOptions.data,\n      () => {\n        table.setState(prev => ({\n          ...prev,\n          data: unref(initialOptions.data),\n        }))\n      },\n      { immediate: true, deep: true }\n    )\n  }\n\n  // can't use `reactive` because update needs to be immutable\n  const state = ref(table.initialState)\n\n  watchEffect(() => {\n    table.setOptions(prev => {\n      const stateProxy = new Proxy({} as typeof state.value, {\n        get: (_, prop) => state.value[prop as keyof typeof state.value],\n      })\n\n      return mergeProxy(prev, getOptionsWithReactiveData(initialOptions), {\n        // merge the initialState and `options.state`\n        // create a new proxy on each `setOptions` call\n        // and get the value from state on each property access\n        state: mergeProxy(stateProxy, initialOptions.state ?? {}),\n        // Similarly, we'll maintain both our internal state and any user-provided\n        // state.\n        onStateChange: (updater: any) => {\n          if (updater instanceof Function) {\n            state.value = updater(state.value)\n          } else {\n            state.value = updater\n          }\n\n          initialOptions.onStateChange?.(updater)\n        },\n      })\n    })\n  })\n\n  return table\n}\n"],"names":["trueFn","$PROXY","Symbol","propTraps","get","_","property","receiver","has","set","deleteProperty","getOwnPropertyDescriptor","configurable","enumerable","ownKeys","keys","resolveSource","s","value","mergeProxy","_len","arguments","length","sources","Array","_key","Proxy","i","v","undefined","push","Object","from","Set","FlexRender","defineComponent","props","setup","render","h","getOptionsWithReactiveData","options","data","unref","useVueTable","initialOptions","resolvedOptions","state","onStateChange","renderFallbackValue","mergeOptions","defaultOptions","table","createTable","isRef","watch","setState","prev","immediate","deep","ref","initialState","watchEffect","setOptions","_initialOptions$state","stateProxy","prop","updater","Function"],"mappings":";;;;;;;;;;;;;;AAAA,SAASA,MAAMA,GAAG;AAChB,EAAA,OAAO,IAAI,CAAA;AACb,CAAA;AAEA,MAAMC,MAAM,GAAGC,MAAM,CAAC,aAAa,CAAC,CAAA;;AAEpC;AACA,MAAMC,SAIJ,GAAG;AACHC,EAAAA,GAAGA,CAACC,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAE;AACzB,IAAA,IAAID,QAAQ,KAAKL,MAAM,EAAE,OAAOM,QAAQ,CAAA;AACxC,IAAA,OAAOF,CAAC,CAACD,GAAG,CAACE,QAAQ,CAAC,CAAA;GACvB;AACDE,EAAAA,GAAGA,CAACH,CAAC,EAAEC,QAAQ,EAAE;AACf,IAAA,OAAOD,CAAC,CAACG,GAAG,CAACF,QAAQ,CAAC,CAAA;GACvB;AACDG,EAAAA,GAAG,EAAET,MAAM;AACXU,EAAAA,cAAc,EAAEV,MAAM;AACtBW,EAAAA,wBAAwBA,CAACN,CAAC,EAAEC,QAAQ,EAAE;IACpC,OAAO;AACLM,MAAAA,YAAY,EAAE,IAAI;AAClBC,MAAAA,UAAU,EAAE,IAAI;AAChBT,MAAAA,GAAGA,GAAG;AACJ,QAAA,OAAOC,CAAC,CAACD,GAAG,CAACE,QAAQ,CAAC,CAAA;OACvB;AACDG,MAAAA,GAAG,EAAET,MAAM;AACXU,MAAAA,cAAc,EAAEV,MAAAA;KACjB,CAAA;GACF;EACDc,OAAOA,CAACT,CAAC,EAAE;AACT,IAAA,OAAOA,CAAC,CAACU,IAAI,EAAE,CAAA;AACjB,GAAA;AACF,CAAC,CAAA;AAgBD,SAASC,aAAaA,CAACC,CAAM,EAAE;EAC7B,OAAO,OAAO,IAAIA,CAAC,GAAGA,CAAC,CAACC,KAAK,GAAGD,CAAC,CAAA;AACnC,CAAA;AAGO,SAASE,UAAUA,GAAuB;AAAA,EAAA,KAAA,IAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAnBC,OAAO,GAAAC,IAAAA,KAAA,CAAAJ,IAAA,GAAAK,IAAA,GAAA,CAAA,EAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,EAAA,EAAA;AAAPF,IAAAA,OAAO,CAAAE,IAAA,CAAAJ,GAAAA,SAAA,CAAAI,IAAA,CAAA,CAAA;AAAA,GAAA;EACnC,OAAO,IAAIC,KAAK,CACd;IACEtB,GAAGA,CAACE,QAAkC,EAAE;AACtC,MAAA,KAAK,IAAIqB,CAAC,GAAGJ,OAAO,CAACD,MAAM,GAAG,CAAC,EAAEK,CAAC,IAAI,CAAC,EAAEA,CAAC,EAAE,EAAE;QAC5C,MAAMC,CAAC,GAAGZ,aAAa,CAACO,OAAO,CAACI,CAAC,CAAC,CAAC,CAACrB,QAAQ,CAAC,CAAA;AAC7C,QAAA,IAAIsB,CAAC,KAAKC,SAAS,EAAE,OAAOD,CAAC,CAAA;AAC/B,OAAA;KACD;IACDpB,GAAGA,CAACF,QAAkC,EAAE;AACtC,MAAA,KAAK,IAAIqB,CAAC,GAAGJ,OAAO,CAACD,MAAM,GAAG,CAAC,EAAEK,CAAC,IAAI,CAAC,EAAEA,CAAC,EAAE,EAAE;QAC5C,IAAIrB,QAAQ,IAAIU,aAAa,CAACO,OAAO,CAACI,CAAC,CAAC,CAAC,EAAE,OAAO,IAAI,CAAA;AACxD,OAAA;AACA,MAAA,OAAO,KAAK,CAAA;KACb;AACDZ,IAAAA,IAAIA,GAAG;MACL,MAAMA,IAAI,GAAG,EAAE,CAAA;AACf,MAAA,KAAK,IAAIY,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGJ,OAAO,CAACD,MAAM,EAAEK,CAAC,EAAE,EACrCZ,IAAI,CAACe,IAAI,CAAC,GAAGC,MAAM,CAAChB,IAAI,CAACC,aAAa,CAACO,OAAO,CAACI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AACtD,MAAA,OAAO,CAAC,GAAGH,KAAK,CAACQ,IAAI,CAAC,IAAIC,GAAG,CAAClB,IAAI,CAAC,CAAC,CAAC,CAAA;AACvC,KAAA;GACD,EACDZ,SACF,CAAC,CAAA;AACH;;AC1Da+B,MAAAA,UAAU,GAAGC,eAAe,CAAC;AACxCC,EAAAA,KAAK,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;EAC1BC,KAAK,EAAGD,KAAkC,IAAK;AAC7C,IAAA,OAAO,MAAM;AACX,MAAA,IACE,OAAOA,KAAK,CAACE,MAAM,KAAK,UAAU,IAClC,OAAOF,KAAK,CAACE,MAAM,KAAK,QAAQ,EAChC;QACA,OAAOC,CAAC,CAACH,KAAK,CAACE,MAAM,EAAEF,KAAK,CAACA,KAAK,CAAC,CAAA;AACrC,OAAA;MAEA,OAAOA,KAAK,CAACE,MAAM,CAAA;KACpB,CAAA;AACH,GAAA;AACF,CAAC,EAAC;AAEF,SAASE,0BAA0BA,CACjCC,OAA4C,EAC5C;EACA,OAAOtB,UAAU,CAACsB,OAAO,EAAE;AACzBC,IAAAA,IAAI,EAAEC,KAAK,CAACF,OAAO,CAACC,IAAI,CAAA;AAC1B,GAAC,CAAC,CAAA;AACJ,CAAA;AAEO,SAASE,WAAWA,CACzBC,cAAmD,EACnD;EACA,MAAMC,eAAe,GAAG3B,UAAU,CAChC;IACE4B,KAAK,EAAE,EAAE;AAAE;AACXC,IAAAA,aAAa,EAAEA,MAAM,EAAE;AAAE;AACzBC,IAAAA,mBAAmB,EAAE,IAAI;AACzBC,IAAAA,YAAYA,CACVC,cAAmC,EACnCV,OAA4B,EAC5B;AACA,MAAA,OAAOtB,UAAU,CAACgC,cAAc,EAAEV,OAAO,CAAC,CAAA;AAC5C,KAAA;AACF,GAAC,EACDD,0BAA0B,CAACK,cAAc,CAC3C,CAAC,CAAA;AAED,EAAA,MAAMO,KAAK,GAAGC,WAAW,CAAQP,eAAe,CAAC,CAAA;;AAEjD;AACA,EAAA,IAAIQ,KAAK,CAACT,cAAc,CAACH,IAAI,CAAC,EAAE;AAC9Ba,IAAAA,KAAK,CACHV,cAAc,CAACH,IAAI,EACnB,MAAM;AACJU,MAAAA,KAAK,CAACI,QAAQ,CAACC,IAAI,KAAK;AACtB,QAAA,GAAGA,IAAI;AACPf,QAAAA,IAAI,EAAEC,KAAK,CAACE,cAAc,CAACH,IAAI,CAAA;AACjC,OAAC,CAAC,CAAC,CAAA;AACL,KAAC,EACD;AAAEgB,MAAAA,SAAS,EAAE,IAAI;AAAEC,MAAAA,IAAI,EAAE,IAAA;AAAK,KAChC,CAAC,CAAA;AACH,GAAA;;AAEA;AACA,EAAA,MAAMZ,KAAK,GAAGa,GAAG,CAACR,KAAK,CAACS,YAAY,CAAC,CAAA;AAErCC,EAAAA,WAAW,CAAC,MAAM;AAChBV,IAAAA,KAAK,CAACW,UAAU,CAACN,IAAI,IAAI;AAAA,MAAA,IAAAO,qBAAA,CAAA;AACvB,MAAA,MAAMC,UAAU,GAAG,IAAIvC,KAAK,CAAC,EAAE,EAAwB;QACrDtB,GAAG,EAAEA,CAACC,CAAC,EAAE6D,IAAI,KAAKnB,KAAK,CAAC7B,KAAK,CAACgD,IAAI,CAAA;AACpC,OAAC,CAAC,CAAA;MAEF,OAAO/C,UAAU,CAACsC,IAAI,EAAEjB,0BAA0B,CAACK,cAAc,CAAC,EAAE;AAClE;AACA;AACA;AACAE,QAAAA,KAAK,EAAE5B,UAAU,CAAC8C,UAAU,GAAAD,qBAAA,GAAEnB,cAAc,CAACE,KAAK,KAAAiB,IAAAA,GAAAA,qBAAA,GAAI,EAAE,CAAC;AACzD;AACA;QACAhB,aAAa,EAAGmB,OAAY,IAAK;UAC/B,IAAIA,OAAO,YAAYC,QAAQ,EAAE;YAC/BrB,KAAK,CAAC7B,KAAK,GAAGiD,OAAO,CAACpB,KAAK,CAAC7B,KAAK,CAAC,CAAA;AACpC,WAAC,MAAM;YACL6B,KAAK,CAAC7B,KAAK,GAAGiD,OAAO,CAAA;AACvB,WAAA;UAEAtB,cAAc,CAACG,aAAa,IAA5BH,IAAAA,IAAAA,cAAc,CAACG,aAAa,CAAGmB,OAAO,CAAC,CAAA;AACzC,SAAA;AACF,OAAC,CAAC,CAAA;AACJ,KAAC,CAAC,CAAA;AACJ,GAAC,CAAC,CAAA;AAEF,EAAA,OAAOf,KAAK,CAAA;AACd;;;;"}

package/build/umd/index.development.js

@@ -205,7 +205,7 @@
       ...columnDef
     };
     const accessorKey = resolvedColumnDef.accessorKey;
-    let id = (_ref = (_resolvedColumnDef$id = resolvedColumnDef.id) != null ? _resolvedColumnDef$id : accessorKey ? accessorKey.replace('.', '_') : undefined) != null ? _ref : typeof resolvedColumnDef.header === 'string' ? resolvedColumnDef.header : undefined;
+    let id = (_ref = (_resolvedColumnDef$id = resolvedColumnDef.id) != null ? _resolvedColumnDef$id : accessorKey ? typeof String.prototype.replaceAll === 'function' ? accessorKey.replaceAll('.', '_') : accessorKey.replace(/\./g, '_') : undefined) != null ? _ref : typeof resolvedColumnDef.header === 'string' ? resolvedColumnDef.header : undefined;
     let accessorFn;
     if (resolvedColumnDef.accessorFn) {
       accessorFn = resolvedColumnDef.accessorFn;
@@ -3602,7 +3602,12 @@
       };
     }
   });
-  function useVueTable(options) {
+  function getOptionsWithReactiveData(options) {
+    return mergeProxy(options, {
+      data: vue.unref(options.data)
+    });
+  }
+  function useVueTable(initialOptions) {
     const resolvedOptions = mergeProxy({
       state: {},
       // Dummy state
@@ -3612,26 +3617,35 @@
       mergeOptions(defaultOptions, options) {
         return mergeProxy(defaultOptions, options);
       }
-    }, options);
+    }, getOptionsWithReactiveData(initialOptions));
+    const table = createTable(resolvedOptions);
 
-    // Add support for reactivity
-    if (vue.isRef(options.data)) {
-      resolvedOptions.data = vue.unref(options.data);
+    // Add reactivity support
+    if (vue.isRef(initialOptions.data)) {
+      vue.watch(initialOptions.data, () => {
+        table.setState(prev => ({
+          ...prev,
+          data: vue.unref(initialOptions.data)
+        }));
+      }, {
+        immediate: true,
+        deep: true
+      });
     }
-    const table = createTable(resolvedOptions);
+
     // can't use `reactive` because update needs to be immutable
     const state = vue.ref(table.initialState);
     vue.watchEffect(() => {
       table.setOptions(prev => {
-        var _options$state;
+        var _initialOptions$state;
         const stateProxy = new Proxy({}, {
           get: (_, prop) => state.value[prop]
         });
-        const newOptions = mergeProxy(prev, options, {
+        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, (_options$state = options.state) != null ? _options$state : {}),
+          state: mergeProxy(stateProxy, (_initialOptions$state = initialOptions.state) != null ? _initialOptions$state : {}),
           // Similarly, we'll maintain both our internal state and any user-provided
           // state.
           onStateChange: updater => {
@@ -3640,18 +3654,9 @@
             } else {
               state.value = updater;
             }
-            options.onStateChange == null || options.onStateChange(updater);
+            initialOptions.onStateChange == null || initialOptions.onStateChange(updater);
           }
         });
-
-        // Add support for reactivity
-        if (vue.isRef(options.data)) {
-          return {
-            ...newOptions,
-            data: vue.unref(options.data)
-          };
-        }
-        return newOptions;
       });
     });
     return table;