@tanstack/vue-table 8.0.0-beta.3 → 8.0.0-beta.4

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

@@ -36,6 +36,7 @@ function useTableInstance(table, options) {
     onStateChange: () => {},
     // noop
     render,
+    renderFallbackValue: null,
 
     mergeOptions(defaultOptions, options) {
       return mergeProxy.mergeProxy(defaultOptions, options);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/index.ts"],"sourcesContent":["import {\n  TableGenerics,\n  TableOptions,\n  PartialKeys,\n  Table,\n  createTableInstance,\n  createTableFactory,\n  TableOptionsResolved,\n} from '@tanstack/table-core'\nimport { h, watchEffect, ref, VNode } from 'vue'\nimport { mergeProxy } from './merge-proxy'\n\nexport * from '@tanstack/table-core'\n\nfunction render<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 const createTable = createTableFactory({ render })\n\nexport function useTableInstance<TGenerics extends TableGenerics>(\n  table: Table<TGenerics>,\n  options: TableOptions<TGenerics>\n) {\n  const resolvedOptions: TableOptionsResolved<TGenerics> = mergeProxy(\n    {\n      ...table.options,\n      state: {}, // Dummy state\n      onStateChange: () => {}, // noop\n      render,\n      mergeOptions(\n        defaultOptions: TableOptions<TGenerics>,\n        options: TableOptions<TGenerics>\n      ) {\n        return mergeProxy(defaultOptions, options)\n      },\n    },\n    options\n  )\n\n  const instance = createTableInstance<TGenerics>(resolvedOptions)\n  // can't use `reactive` because update needs to be immutable\n  const state = ref(instance.initialState)\n\n  watchEffect(() => {\n    instance.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  //   instance.willUpdate()\n  // })\n\n  return instance\n}\n"],"names":["render","Comp","props","h","createTable","createTableFactory","useTableInstance","table","options","resolvedOptions","mergeProxy","state","onStateChange","mergeOptions","defaultOptions","instance","createTableInstance","ref","initialState","watchEffect","setOptions","prev","stateProxy","Proxy","get","_","prop","value","updater","Function"],"mappings":";;;;;;;;;;;;;;;;;;AAcA,SAASA,MAAT,CACEC,IADF,EAEEC,KAFF,EAG4C;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;;AAEYG,MAAAA,WAAW,GAAGC,wBAAkB,CAAC;AAAEL,EAAAA,MAAAA;AAAF,CAAD,EAAtC;AAEA,SAASM,gBAAT,CACLC,KADK,EAELC,OAFK,EAGL;AACA,EAAMC,MAAAA,eAAgD,GAAGC,qBAAU,CACjE,EACE,GAAGH,KAAK,CAACC,OADX;AAEEG,IAAAA,KAAK,EAAE,EAFT;AAEa;AACXC,IAAAA,aAAa,EAAE,MAAM,EAHvB;AAG2B;AACzBZ,IAAAA,MAJF;;AAKEa,IAAAA,YAAY,CACVC,cADU,EAEVN,OAFU,EAGV;AACA,MAAA,OAAOE,qBAAU,CAACI,cAAD,EAAiBN,OAAjB,CAAjB,CAAA;AACD,KAAA;;AAVH,GADiE,EAajEA,OAbiE,CAAnE,CAAA;AAgBA,EAAA,MAAMO,QAAQ,GAAGC,yBAAmB,CAAYP,eAAZ,CAApC,CAjBA;;AAmBA,EAAA,MAAME,KAAK,GAAGM,OAAG,CAACF,QAAQ,CAACG,YAAV,CAAjB,CAAA;AAEAC,EAAAA,eAAW,CAAC,MAAM;AAChBJ,IAAAA,QAAQ,CAACK,UAAT,CAAoBC,IAAI,IAAI;AAAA,MAAA,IAAA,cAAA,CAAA;;AAC1B,MAAA,MAAMC,UAAU,GAAG,IAAIC,KAAJ,CAAU,EAAV,EAAoC;AACrDC,QAAAA,GAAG,EAAE,CAACC,CAAD,EAAIC,IAAJ,KAAaf,KAAK,CAACgB,KAAN,CAAYD,IAAZ,CAAA;AADmC,OAApC,CAAnB,CAAA;AAIA,MAAA,OAAOhB,qBAAU,CAACW,IAAD,EAAOb,OAAP,EAAgB;AAC/B;AACA;AACA;AACAG,QAAAA,KAAK,EAAED,qBAAU,CAACY,UAAD,EAAad,CAAAA,cAAAA,GAAAA,OAAO,CAACG,KAArB,KAA8B,IAAA,GAAA,cAAA,GAAA,EAA9B,CAJc;AAK/B;AACA;AACAC,QAAAA,aAAa,EAAGgB,OAAD,IAAkB;AAC/B,UAAIA,IAAAA,OAAO,YAAYC,QAAvB,EAAiC;AAC/BlB,YAAAA,KAAK,CAACgB,KAAN,GAAcC,OAAO,CAACjB,KAAK,CAACgB,KAAP,CAArB,CAAA;AACD,WAFD,MAEO;AACLhB,YAAAA,KAAK,CAACgB,KAAN,GAAcC,OAAd,CAAA;AACD,WAAA;;AAEDpB,UAAAA,OAAO,CAACI,aAAR,IAAA,IAAA,GAAA,KAAA,CAAA,GAAAJ,OAAO,CAACI,aAAR,CAAwBgB,OAAxB,CAAA,CAAA;AACD,SAAA;AAf8B,OAAhB,CAAjB,CAAA;AAiBD,KAtBD,CAAA,CAAA;AAuBD,GAxBU,CAAX,CArBA;AAgDA;AACA;;AAEA,EAAA,OAAOb,QAAP,CAAA;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/index.ts"],"sourcesContent":["import {\n  TableGenerics,\n  TableOptions,\n  PartialKeys,\n  Table,\n  createTableInstance,\n  createTableFactory,\n  TableOptionsResolved,\n} from '@tanstack/table-core'\nimport { h, watchEffect, ref, VNode } from 'vue'\nimport { mergeProxy } from './merge-proxy'\n\nexport * from '@tanstack/table-core'\n\nfunction render<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 const createTable = createTableFactory({ render })\n\nexport function useTableInstance<TGenerics extends TableGenerics>(\n  table: Table<TGenerics>,\n  options: TableOptions<TGenerics>\n) {\n  const resolvedOptions: TableOptionsResolved<TGenerics> = mergeProxy(\n    {\n      ...table.options,\n      state: {}, // Dummy state\n      onStateChange: () => {}, // noop\n      render,\n      renderFallbackValue: null,\n      mergeOptions(\n        defaultOptions: TableOptions<TGenerics>,\n        options: TableOptions<TGenerics>\n      ) {\n        return mergeProxy(defaultOptions, options)\n      },\n    },\n    options\n  )\n\n  const instance = createTableInstance<TGenerics>(resolvedOptions)\n  // can't use `reactive` because update needs to be immutable\n  const state = ref(instance.initialState)\n\n  watchEffect(() => {\n    instance.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  //   instance.willUpdate()\n  // })\n\n  return instance\n}\n"],"names":["render","Comp","props","h","createTable","createTableFactory","useTableInstance","table","options","resolvedOptions","mergeProxy","state","onStateChange","renderFallbackValue","mergeOptions","defaultOptions","instance","createTableInstance","ref","initialState","watchEffect","setOptions","prev","stateProxy","Proxy","get","_","prop","value","updater","Function"],"mappings":";;;;;;;;;;;;;;;;;;AAcA,SAASA,MAAT,CACEC,IADF,EAEEC,KAFF,EAG4C;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;;AAEYG,MAAAA,WAAW,GAAGC,wBAAkB,CAAC;AAAEL,EAAAA,MAAAA;AAAF,CAAD,EAAtC;AAEA,SAASM,gBAAT,CACLC,KADK,EAELC,OAFK,EAGL;AACA,EAAMC,MAAAA,eAAgD,GAAGC,qBAAU,CACjE,EACE,GAAGH,KAAK,CAACC,OADX;AAEEG,IAAAA,KAAK,EAAE,EAFT;AAEa;AACXC,IAAAA,aAAa,EAAE,MAAM,EAHvB;AAG2B;AACzBZ,IAAAA,MAJF;AAKEa,IAAAA,mBAAmB,EAAE,IALvB;;AAMEC,IAAAA,YAAY,CACVC,cADU,EAEVP,OAFU,EAGV;AACA,MAAA,OAAOE,qBAAU,CAACK,cAAD,EAAiBP,OAAjB,CAAjB,CAAA;AACD,KAAA;;AAXH,GADiE,EAcjEA,OAdiE,CAAnE,CAAA;AAiBA,EAAA,MAAMQ,QAAQ,GAAGC,yBAAmB,CAAYR,eAAZ,CAApC,CAlBA;;AAoBA,EAAA,MAAME,KAAK,GAAGO,OAAG,CAACF,QAAQ,CAACG,YAAV,CAAjB,CAAA;AAEAC,EAAAA,eAAW,CAAC,MAAM;AAChBJ,IAAAA,QAAQ,CAACK,UAAT,CAAoBC,IAAI,IAAI;AAAA,MAAA,IAAA,cAAA,CAAA;;AAC1B,MAAA,MAAMC,UAAU,GAAG,IAAIC,KAAJ,CAAU,EAAV,EAAoC;AACrDC,QAAAA,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;AACAG,QAAAA,KAAK,EAAED,qBAAU,CAACa,UAAD,EAAaf,CAAAA,cAAAA,GAAAA,OAAO,CAACG,KAArB,KAA8B,IAAA,GAAA,cAAA,GAAA,EAA9B,CAJc;AAK/B;AACA;AACAC,QAAAA,aAAa,EAAGiB,OAAD,IAAkB;AAC/B,UAAIA,IAAAA,OAAO,YAAYC,QAAvB,EAAiC;AAC/BnB,YAAAA,KAAK,CAACiB,KAAN,GAAcC,OAAO,CAAClB,KAAK,CAACiB,KAAP,CAArB,CAAA;AACD,WAFD,MAEO;AACLjB,YAAAA,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;AAiBD,KAtBD,CAAA,CAAA;AAuBD,GAxBU,CAAX,CAtBA;AAiDA;AACA;;AAEA,EAAA,OAAOb,QAAP,CAAA;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/esm/index.js

@@ -1533,6 +1533,12 @@ const Grouping = {
     };
   },
   createCell: (cell, column, row, instance) => {
+    const getRenderValue = () => {
+      var _cell$getValue;
+
+      return (_cell$getValue = cell.getValue()) != null ? _cell$getValue : instance.options.renderFallbackValue;
+    };
+
     return {
       getIsGrouped: () => column.getIsGrouped() && column.id === row.groupingColumnId,
       getIsPlaceholder: () => !cell.getIsGrouped() && column.getIsGrouped(),
@@ -1542,15 +1548,19 @@ const Grouping = {
         return !cell.getIsGrouped() && !cell.getIsPlaceholder() && ((_row$subRows = row.subRows) == null ? void 0 : _row$subRows.length) > 1;
       },
       renderAggregatedCell: () => {
-        var _column$columnDef$agg;
+        if (process.env.NODE_ENV === 'development') {
+          if (!column.columnDef.aggregatedCell) {
+            console.warn('A columnDef.aggregatedCell template is recommended for displaying aggregated values.');
+          }
+        }
 
-        const template = (_column$columnDef$agg = column.columnDef.aggregatedCell) != null ? _column$columnDef$agg : column.columnDef.cell;
+        const template = column.columnDef.aggregatedCell || column.columnDef.cell;
         return template ? instance._render(template, {
           instance,
           column,
           row,
           cell,
-          getValue: cell.getValue
+          getValue: getRenderValue
         }) : null;
       }
     };
@@ -2533,8 +2543,10 @@ const Sorting = {
         //   })
         //   return
         // }
+        // this needs to be outside of instance.setSorting to be in sync with rerender
+        const nextSortingOrder = column.getNextSortingOrder();
         instance.setSorting(old => {
-          var _ref2, _column$columnDef$sor, _instance$options$ena, _instance$options$ena2;
+          var _instance$options$ena, _instance$options$ena2;
 
           // Find any existing sorting for this column
           const existingSorting = old == null ? void 0 : old.find(d => d.id === column.id);
@@ -2559,30 +2571,29 @@ const Sorting = {
             } else {
               sortAction = 'replace';
             }
-          }
+          } // Handle toggle states that will remove the sorting
 
-          const sortDescFirst = (_ref2 = (_column$columnDef$sor = column.columnDef.sortDescFirst) != null ? _column$columnDef$sor : instance.options.sortDescFirst) != null ? _ref2 : column.getAutoSortDir() === 'desc'; // Handle toggle states that will remove the sorting
 
           if (sortAction === 'toggle' && ( // Must be toggling
           (_instance$options$ena = instance.options.enableSortingRemoval) != null ? _instance$options$ena : true) && // If enableSortRemove, enable in general
           !hasDescDefined && ( // Must not be setting desc
-          multi ? (_instance$options$ena2 = instance.options.enableMultiRemove) != null ? _instance$options$ena2 : true : true) && ( // If multi, don't allow if enableMultiRemove
-          existingSorting != null && existingSorting.desc // Finally, detect if it should indeed be removed
-          ? !sortDescFirst : sortDescFirst)) {
+          multi ? (_instance$options$ena2 = instance.options.enableMultiRemove) != null ? _instance$options$ena2 : true : true) && // If multi, don't allow if enableMultiRemove
+          !nextSortingOrder // Finally, detect if it should indeed be removed
+          ) {
             sortAction = 'remove';
           }
 
           if (sortAction === 'replace') {
             newSorting = [{
               id: column.id,
-              desc: hasDescDefined ? desc : !!sortDescFirst
+              desc: hasDescDefined ? desc : nextSortingOrder === 'desc'
             }];
           } else if (sortAction === 'add' && old != null && old.length) {
             var _instance$options$max;
 
             newSorting = [...old, {
               id: column.id,
-              desc: hasDescDefined ? desc : !!sortDescFirst
+              desc: hasDescDefined ? desc : nextSortingOrder === 'desc'
             }]; // Take latest n columns
 
             newSorting.splice(0, newSorting.length - ((_instance$options$max = instance.options.maxMultiSortColCount) != null ? _instance$options$max : Number.MAX_SAFE_INTEGER));
@@ -2591,7 +2602,7 @@ const Sorting = {
             newSorting = old.map(d => {
               if (d.id === column.id) {
                 return { ...d,
-                  desc: hasDescDefined ? desc : !(existingSorting != null && existingSorting.desc)
+                  desc: hasDescDefined ? desc : nextSortingOrder === 'desc'
                 };
               }
 
@@ -2604,6 +2615,23 @@ const Sorting = {
           return newSorting;
         });
       },
+      getNextSortingOrder: () => {
+        var _ref2, _column$columnDef$sor;
+
+        const sortDescFirst = (_ref2 = (_column$columnDef$sor = column.columnDef.sortDescFirst) != null ? _column$columnDef$sor : instance.options.sortDescFirst) != null ? _ref2 : column.getAutoSortDir() === 'desc';
+        const firstSortDirection = sortDescFirst ? 'desc' : 'asc';
+        const isSorted = column.getIsSorted();
+
+        if (!isSorted) {
+          return firstSortDirection;
+        }
+
+        if (isSorted === firstSortDirection) {
+          return isSorted === 'desc' ? 'asc' : 'desc';
+        } else {
+          return false;
+        }
+      },
       getCanSort: () => {
         var _column$columnDef$ena, _instance$options$ena3;
 
@@ -3053,6 +3081,12 @@ function createTable$1(_, __, options) {
 }
 
 function createCell(instance, row, column, columnId) {
+  const getRenderValue = () => {
+    var _cell$getValue;
+
+    return (_cell$getValue = cell.getValue()) != null ? _cell$getValue : instance.options.renderFallbackValue;
+  };
+
   const cell = {
     id: row.id + "_" + column.id,
     row,
@@ -3064,7 +3098,7 @@ function createCell(instance, row, column, columnId) {
         column,
         row,
         cell: cell,
-        getValue: cell.getValue
+        getValue: getRenderValue
       }) : null;
     }
   };
@@ -3912,6 +3946,7 @@ function useTableInstance(table, options) {
     onStateChange: () => {},
     // noop
     render,
+    renderFallbackValue: null,
 
     mergeOptions(defaultOptions, options) {
       return mergeProxy(defaultOptions, options);