@tanstack/vue-table 8.5.1 → 8.5.4

package/build/cjs/vue-table/src/index.js

@@ -16,15 +16,18 @@ var index = require('../../table-core/build/esm/index.js');
 var vue = require('vue');
 var mergeProxy = require('./merge-proxy.js');
 
-function flexRender(Comp, props) {
-  if (!Comp) return null;
+const FlexRender = {
+  props: ['render', 'props'],
+  setup: props => {
+    return () => {
+      if (typeof props.render === 'function' || typeof props.render === 'object') {
+        return vue.h(props.render, props.props);
+      }
 
-  if (typeof Comp === 'function') {
-    return vue.h(Comp, props);
+      return props.render;
+    };
   }
-
-  return Comp;
-}
+};
 function useVueTable(options) {
   const resolvedOptions = mergeProxy.mergeProxy({
     state: {},
@@ -66,10 +69,7 @@ function useVueTable(options) {
         }
       });
     });
-  }); // onBeforeUpdate(() => {
-  //   table.willUpdate()
-  // })
-
+  });
   return table;
 }
 
@@ -117,6 +117,6 @@ exports.reSplitAlphaNumeric = index.reSplitAlphaNumeric;
 exports.selectRowsFn = index.selectRowsFn;
 exports.shouldAutoRemoveFilter = index.shouldAutoRemoveFilter;
 exports.sortingFns = index.sortingFns;
-exports.flexRender = flexRender;
+exports.FlexRender = FlexRender;
 exports.useVueTable = useVueTable;
 //# sourceMappingURL=index.js.map

package/build/cjs/vue-table/src/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 { h, watchEffect, ref, VNode } from 'vue'\nimport { mergeProxy } from './merge-proxy'\n\nexport * from '@tanstack/table-core'\n\nexport function flexRender<TProps extends {}>(\n  Comp: any,\n  props: TProps\n): VNode | string | number | boolean | null {\n  if (!Comp) return null\n\n  if (typeof Comp === 'function') {\n    return h(Comp, props)\n  }\n\n  return Comp\n}\n\nexport function useVueTable<TData extends RowData>(\n  options: TableOptions<TData>\n) {\n  const resolvedOptions: TableOptionsResolved<TData> = 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  const table = createTable<TData>(resolvedOptions)\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, 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  })\n\n  // onBeforeUpdate(() => {\n  //   table.willUpdate()\n  // })\n\n  return table\n}\n"],"names":["flexRender","Comp","props","h","useVueTable","options","resolvedOptions","mergeProxy","state","onStateChange","renderFallbackValue","mergeOptions","defaultOptions","table","createTable","ref","initialState","watchEffect","setOptions","prev","stateProxy","Proxy","get","_","prop","value","updater","Function"],"mappings":";;;;;;;;;;;;;;;;;;AAWO,SAASA,UAAT,CACLC,IADK,EAELC,KAFK,EAGqC;AAC1C,EAAA,IAAI,CAACD,IAAL,EAAW,OAAO,IAAP,CAAA;;AAEX,EAAA,IAAI,OAAOA,IAAP,KAAgB,UAApB,EAAgC;AAC9B,IAAA,OAAOE,KAAC,CAACF,IAAD,EAAOC,KAAP,CAAR,CAAA;AACD,GAAA;;AAED,EAAA,OAAOD,IAAP,CAAA;AACD,CAAA;AAEM,SAASG,WAAT,CACLC,OADK,EAEL;EACA,MAAMC,eAA4C,GAAGC,qBAAU,CAC7D;AACEC,IAAAA,KAAK,EAAE,EADT;AACa;IACXC,aAAa,EAAE,MAAM,EAFvB;AAE2B;AACzBC,IAAAA,mBAAmB,EAAE,IAHvB;;AAIEC,IAAAA,YAAY,CACVC,cADU,EAEVP,OAFU,EAGV;AACA,MAAA,OAAOE,qBAAU,CAACK,cAAD,EAAiBP,OAAjB,CAAjB,CAAA;AACD,KAAA;;GAV0D,EAY7DA,OAZ6D,CAA/D,CAAA;AAeA,EAAA,MAAMQ,KAAK,GAAGC,iBAAW,CAAQR,eAAR,CAAzB,CAhBA;;AAkBA,EAAA,MAAME,KAAK,GAAGO,OAAG,CAACF,KAAK,CAACG,YAAP,CAAjB,CAAA;AAEAC,EAAAA,eAAW,CAAC,MAAM;AAChBJ,IAAAA,KAAK,CAACK,UAAN,CAAiBC,IAAI,IAAI;AAAA,MAAA,IAAA,cAAA,CAAA;;AACvB,MAAA,MAAMC,UAAU,GAAG,IAAIC,KAAJ,CAAU,EAAV,EAAoC;QACrDC,GAAG,EAAE,CAACC,CAAD,EAAIC,IAAJ,KAAahB,KAAK,CAACiB,KAAN,CAAYD,IAAZ,CAAA;AADmC,OAApC,CAAnB,CAAA;AAIA,MAAA,OAAOjB,qBAAU,CAACY,IAAD,EAAOd,OAAP,EAAgB;AAC/B;AACA;AACA;QACAG,KAAK,EAAED,qBAAU,CAACa,UAAD,EAAA,CAAA,cAAA,GAAaf,OAAO,CAACG,KAArB,KAA8B,IAAA,GAAA,cAAA,GAAA,EAA9B,CAJc;AAK/B;AACA;QACAC,aAAa,EAAGiB,OAAD,IAAkB;UAC/B,IAAIA,OAAO,YAAYC,QAAvB,EAAiC;YAC/BnB,KAAK,CAACiB,KAAN,GAAcC,OAAO,CAAClB,KAAK,CAACiB,KAAP,CAArB,CAAA;AACD,WAFD,MAEO;YACLjB,KAAK,CAACiB,KAAN,GAAcC,OAAd,CAAA;AACD,WAAA;;AAEDrB,UAAAA,OAAO,CAACI,aAAR,IAAA,IAAA,GAAA,KAAA,CAAA,GAAAJ,OAAO,CAACI,aAAR,CAAwBiB,OAAxB,CAAA,CAAA;AACD,SAAA;AAf8B,OAAhB,CAAjB,CAAA;KALF,CAAA,CAAA;GADS,CAAX,CApBA;AA+CA;AACA;;AAEA,EAAA,OAAOb,KAAP,CAAA;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 { h, watchEffect, ref } from 'vue'\nimport { mergeProxy } from './merge-proxy'\n\nexport * from '@tanstack/table-core'\n\nexport const FlexRender = {\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: TableOptions<TData>\n) {\n  const resolvedOptions: TableOptionsResolved<TData> = 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  const table = createTable<TData>(resolvedOptions)\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, 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  })\n\n  return table\n}\n"],"names":["FlexRender","props","setup","render","h","useVueTable","options","resolvedOptions","mergeProxy","state","onStateChange","renderFallbackValue","mergeOptions","defaultOptions","table","createTable","ref","initialState","watchEffect","setOptions","prev","stateProxy","Proxy","get","_","prop","value","updater","Function"],"mappings":";;;;;;;;;;;;;;;;;;AAWO,MAAMA,UAAU,GAAG;AACxBC,EAAAA,KAAK,EAAE,CAAC,QAAD,EAAW,OAAX,CADiB;EAExBC,KAAK,EAAGD,KAAD,IAAwC;AAC7C,IAAA,OAAO,MAAM;AACX,MAAA,IACE,OAAOA,KAAK,CAACE,MAAb,KAAwB,UAAxB,IACA,OAAOF,KAAK,CAACE,MAAb,KAAwB,QAF1B,EAGE;QACA,OAAOC,KAAC,CAACH,KAAK,CAACE,MAAP,EAAeF,KAAK,CAACA,KAArB,CAAR,CAAA;AACD,OAAA;;MAED,OAAOA,KAAK,CAACE,MAAb,CAAA;KARF,CAAA;AAUD,GAAA;AAbuB,EAAnB;AAgBA,SAASE,WAAT,CACLC,OADK,EAEL;EACA,MAAMC,eAA4C,GAAGC,qBAAU,CAC7D;AACEC,IAAAA,KAAK,EAAE,EADT;AACa;IACXC,aAAa,EAAE,MAAM,EAFvB;AAE2B;AACzBC,IAAAA,mBAAmB,EAAE,IAHvB;;AAIEC,IAAAA,YAAY,CACVC,cADU,EAEVP,OAFU,EAGV;AACA,MAAA,OAAOE,qBAAU,CAACK,cAAD,EAAiBP,OAAjB,CAAjB,CAAA;AACD,KAAA;;GAV0D,EAY7DA,OAZ6D,CAA/D,CAAA;AAeA,EAAA,MAAMQ,KAAK,GAAGC,iBAAW,CAAQR,eAAR,CAAzB,CAhBA;;AAkBA,EAAA,MAAME,KAAK,GAAGO,OAAG,CAACF,KAAK,CAACG,YAAP,CAAjB,CAAA;AAEAC,EAAAA,eAAW,CAAC,MAAM;AAChBJ,IAAAA,KAAK,CAACK,UAAN,CAAiBC,IAAI,IAAI;AAAA,MAAA,IAAA,cAAA,CAAA;;AACvB,MAAA,MAAMC,UAAU,GAAG,IAAIC,KAAJ,CAAU,EAAV,EAAoC;QACrDC,GAAG,EAAE,CAACC,CAAD,EAAIC,IAAJ,KAAahB,KAAK,CAACiB,KAAN,CAAYD,IAAZ,CAAA;AADmC,OAApC,CAAnB,CAAA;AAIA,MAAA,OAAOjB,qBAAU,CAACY,IAAD,EAAOd,OAAP,EAAgB;AAC/B;AACA;AACA;QACAG,KAAK,EAAED,qBAAU,CAACa,UAAD,EAAA,CAAA,cAAA,GAAaf,OAAO,CAACG,KAArB,KAA8B,IAAA,GAAA,cAAA,GAAA,EAA9B,CAJc;AAK/B;AACA;QACAC,aAAa,EAAGiB,OAAD,IAAkB;UAC/B,IAAIA,OAAO,YAAYC,QAAvB,EAAiC;YAC/BnB,KAAK,CAACiB,KAAN,GAAcC,OAAO,CAAClB,KAAK,CAACiB,KAAP,CAArB,CAAA;AACD,WAFD,MAEO;YACLjB,KAAK,CAACiB,KAAN,GAAcC,OAAd,CAAA;AACD,WAAA;;AAEDrB,UAAAA,OAAO,CAACI,aAAR,IAAA,IAAA,GAAA,KAAA,CAAA,GAAAJ,OAAO,CAACI,aAAR,CAAwBiB,OAAxB,CAAA,CAAA;AACD,SAAA;AAf8B,OAAhB,CAAjB,CAAA;KALF,CAAA,CAAA;AAuBD,GAxBU,CAAX,CAAA;AA0BA,EAAA,OAAOb,KAAP,CAAA;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/esm/index.js

@@ -2158,14 +2158,14 @@ const RowSelection = {
       //   return table.options.enableGroupingRowSelection ?? false
       // },
       getIsAllRowsSelected: () => {
-        const preFilteredFlatRows = table.getPreFilteredRowModel().flatRows;
+        const preGroupedFlatRows = table.getFilteredRowModel().flatRows;
         const {
           rowSelection
         } = table.getState();
-        let isAllRowsSelected = Boolean(preFilteredFlatRows.length && Object.keys(rowSelection).length);
+        let isAllRowsSelected = Boolean(preGroupedFlatRows.length && Object.keys(rowSelection).length);
 
         if (isAllRowsSelected) {
-          if (preFilteredFlatRows.some(row => row.getCanSelect() && !rowSelection[row.id])) {
+          if (preGroupedFlatRows.some(row => row.getCanSelect() && !rowSelection[row.id])) {
             isAllRowsSelected = false;
           }
         }
@@ -2189,7 +2189,7 @@ const RowSelection = {
         var _table$getState$rowSe;
 
         const totalSelected = Object.keys((_table$getState$rowSe = table.getState().rowSelection) != null ? _table$getState$rowSe : {}).length;
-        return totalSelected > 0 && totalSelected < table.getCoreRowModel().flatRows.length;
+        return totalSelected > 0 && totalSelected < table.getFilteredRowModel().flatRows.length;
       },
       getIsSomePageRowsSelected: () => {
         const paginationFlatRows = table.getPaginationRowModel().flatRows;
@@ -2935,8 +2935,20 @@ function createTable(options) {
 
       defaultColumn = (_defaultColumn = defaultColumn) != null ? _defaultColumn : {};
       return {
-        header: props => props.header.column.id,
-        footer: props => props.header.column.id,
+        header: props => {
+          const resolvedColumnDef = props.header.column.columnDef;
+
+          if (resolvedColumnDef.accessorKey) {
+            return resolvedColumnDef.accessorKey;
+          }
+
+          if (resolvedColumnDef.accessorFn) {
+            return resolvedColumnDef.id;
+          }
+
+          return null;
+        },
+        // footer: props => props.header.column.id,
         cell: props => {
           var _props$renderValue$to, _props$renderValue;
 
@@ -2964,7 +2976,8 @@ function createTable(options) {
 
         return columnDefs.map(columnDef => {
           const column = createColumn(table, columnDef, depth, parent);
-          column.columns = columnDef.columns ? recurseColumns(columnDef.columns, column, depth + 1) : [];
+          const groupingColumnDef = columnDef;
+          column.columns = groupingColumnDef.columns ? recurseColumns(groupingColumnDef.columns, column, depth + 1) : [];
           return column;
         });
       };
@@ -3948,15 +3961,18 @@ function mergeProxy() {
   }, propTraps);
 }
 
-function flexRender(Comp, props) {
-  if (!Comp) return null;
+const FlexRender = {
+  props: ['render', 'props'],
+  setup: props => {
+    return () => {
+      if (typeof props.render === 'function' || typeof props.render === 'object') {
+        return h(props.render, props.props);
+      }
 
-  if (typeof Comp === 'function') {
-    return h(Comp, props);
+      return props.render;
+    };
   }
-
-  return Comp;
-}
+};
 function useVueTable(options) {
   const resolvedOptions = mergeProxy({
     state: {},
@@ -3998,12 +4014,9 @@ function useVueTable(options) {
         }
       });
     });
-  }); // onBeforeUpdate(() => {
-  //   table.willUpdate()
-  // })
-
+  });
   return table;
 }
 
-export { ColumnSizing, Expanding, Filters, Grouping, Headers, Ordering, Pagination, Pinning, RowSelection, Sorting, Visibility, aggregationFns, buildHeaderGroups, createCell, createColumn, createColumnHelper, createRow, createTable, defaultColumnSizing, expandRows, filterFns, flattenBy, flexRender, functionalUpdate, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, isFunction, isRowSelected, isSubRowSelected, makeStateUpdater, memo, noop, orderColumns, passiveEventSupported, reSplitAlphaNumeric, selectRowsFn, shouldAutoRemoveFilter, sortingFns, useVueTable };
+export { ColumnSizing, Expanding, Filters, FlexRender, Grouping, Headers, Ordering, Pagination, Pinning, RowSelection, Sorting, Visibility, aggregationFns, buildHeaderGroups, createCell, createColumn, createColumnHelper, createRow, createTable, defaultColumnSizing, expandRows, filterFns, flattenBy, functionalUpdate, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, isFunction, isRowSelected, isSubRowSelected, makeStateUpdater, memo, noop, orderColumns, passiveEventSupported, reSplitAlphaNumeric, selectRowsFn, shouldAutoRemoveFilter, sortingFns, useVueTable };
 //# sourceMappingURL=index.js.map