@tanstack/svelte-table 8.0.0-beta.2 → 8.0.0-beta.5

package/build/esm/index.js

@@ -8,7 +8,7 @@
  *
  * @license MIT
  */
-import { SvelteComponent, init, safe_not_equal, text as text$1, insert, set_data, noop as noop$1, detach, create_component, mount_component, transition_in, transition_out, destroy_component, create_ssr_component, validate_component } from 'svelte/internal';
+import { SvelteComponent, init, safe_not_equal, text as text$1, claim_text, insert_hydration, set_data, noop as noop$1, detach, create_ssr_component, escape, create_component, claim_component, mount_component, transition_in, transition_out, destroy_component, validate_component } from 'svelte/internal';
 import { readable, get, writable, derived } from 'svelte/store';
 
 /**
@@ -1107,7 +1107,6 @@ const Filters = {
   },
   createColumn: (column, instance) => {
     return {
-      filterFn: column.filterFn,
       getAutoFilterFn: () => {
         const firstRow = instance.getCoreRowModel().flatRows[0];
         const value = firstRow == null ? void 0 : firstRow.getValue(column.id);
@@ -1138,7 +1137,7 @@ const Filters = {
         var _ref;
 
         const userFilterFns = instance.options.filterFns;
-        return isFunction(column.filterFn) ? column.filterFn : column.filterFn === 'auto' ? column.getAutoFilterFn() : (_ref = userFilterFns == null ? void 0 : userFilterFns[column.filterFn]) != null ? _ref : filterFns[column.filterFn];
+        return isFunction(column.columnDef.filterFn) ? column.columnDef.filterFn : column.columnDef.filterFn === 'auto' ? column.getAutoFilterFn() : (_ref = userFilterFns == null ? void 0 : userFilterFns[column.columnDef.filterFn]) != null ? _ref : filterFns[column.columnDef.filterFn];
       },
       getCanFilter: () => {
         var _column$columnDef$ena, _instance$options$ena, _instance$options$ena2;
@@ -1427,6 +1426,11 @@ const aggregationFns = {
 const Grouping = {
   getDefaultColumnDef: () => {
     return {
+      aggregatedCell: props => {
+        var _props$getValue$toStr, _props$getValue;
+
+        return (_props$getValue$toStr = (_props$getValue = props.getValue()) == null ? void 0 : _props$getValue.toString == null ? void 0 : _props$getValue.toString()) != null ? _props$getValue$toStr : null;
+      },
       aggregationFn: 'auto'
     };
   },
@@ -1487,8 +1491,6 @@ const Grouping = {
         if (Object.prototype.toString.call(value) === '[object Date]') {
           return aggregationFns.extent;
         }
-
-        return aggregationFns.count;
       },
       getAggregationFn: () => {
         var _ref4;
@@ -1499,7 +1501,7 @@ const Grouping = {
           throw new Error();
         }
 
-        return isFunction(column.aggregationFn) ? column.aggregationFn : column.aggregationFn === 'auto' ? column.getAutoAggregationFn() : (_ref4 = userAggregationFns == null ? void 0 : userAggregationFns[column.aggregationFn]) != null ? _ref4 : aggregationFns[column.aggregationFn];
+        return isFunction(column.columnDef.aggregationFn) ? column.columnDef.aggregationFn : column.columnDef.aggregationFn === 'auto' ? column.getAutoAggregationFn() : (_ref4 = userAggregationFns == null ? void 0 : userAggregationFns[column.columnDef.aggregationFn]) != null ? _ref4 : aggregationFns[column.columnDef.aggregationFn];
       }
     };
   },
@@ -1532,6 +1534,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(),
@@ -1541,15 +1549,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;
       }
     };
@@ -2019,11 +2031,11 @@ const RowSelection = {
         });
       },
       toggleAllPageRowsSelected: value => instance.setRowSelection(old => {
-        typeof value !== 'undefined' ? value : !instance.getIsAllPageRowsSelected();
+        const resolvedValue = typeof value !== 'undefined' ? value : !instance.getIsAllPageRowsSelected();
         const rowSelection = { ...old
         };
         instance.getRowModel().rows.forEach(row => {
-          mutateRowIsSelected(rowSelection, row.id, value, instance);
+          mutateRowIsSelected(rowSelection, row.id, resolvedValue, instance);
         });
         return rowSelection;
       }),
@@ -2178,7 +2190,7 @@ const RowSelection = {
       },
       getIsSomePageRowsSelected: () => {
         const paginationFlatRows = instance.getPaginationRowModel().flatRows;
-        return instance.getIsAllPageRowsSelected() ? false : !!(paginationFlatRows != null && paginationFlatRows.length);
+        return instance.getIsAllPageRowsSelected() ? false : paginationFlatRows.some(d => d.getIsSelected() || d.getIsSomeSelected());
       },
       getToggleAllRowsSelectedHandler: () => {
         return e => {
@@ -2532,8 +2544,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);
@@ -2558,30 +2572,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));
@@ -2590,7 +2603,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'
                 };
               }
 
@@ -2603,6 +2616,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;
 
@@ -2896,9 +2926,9 @@ function createTableInstance$1(options) {
         header: props => props.header.column.id,
         footer: props => props.header.column.id,
         cell: props => {
-          var _props$getValue$toStr, _props$getValue$toStr2, _props$getValue;
+          var _props$getValue$toStr, _props$getValue;
 
-          return (_props$getValue$toStr = (_props$getValue$toStr2 = (_props$getValue = props.getValue()).toString) == null ? void 0 : _props$getValue$toStr2.call(_props$getValue)) != null ? _props$getValue$toStr : null;
+          return (_props$getValue$toStr = (_props$getValue = props.getValue()) == null ? void 0 : _props$getValue.toString == null ? void 0 : _props$getValue.toString()) != null ? _props$getValue$toStr : null;
         },
         ...instance._features.reduce((obj, feature) => {
           return Object.assign(obj, feature.getDefaultColumnDef == null ? void 0 : feature.getDefaultColumnDef());
@@ -3052,6 +3082,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,
@@ -3063,7 +3099,7 @@ function createCell(instance, row, column, columnId) {
         column,
         row,
         cell: cell,
-        getValue: cell.getValue
+        getValue: getRenderValue
       }) : null;
     }
   };
@@ -3669,11 +3705,6 @@ function getGroupedRowModel() {
             if (aggregateFn) {
               row._groupingValuesCache[columnId] = aggregateFn(columnId, leafRows, groupedRows);
               return row._groupingValuesCache[columnId];
-            } else if (column.aggregationFn) {
-              console.info({
-                column
-              });
-              throw new Error(process.env.NODE_ENV !== 'production' ? "Table: Invalid column.aggregateType option for column listed above" : '');
             }
           }
         });
@@ -3797,20 +3828,34 @@ function getPaginationRowModel(opts) {
     const pageStart = pageSize * pageIndex;
     const pageEnd = pageStart + pageSize;
     rows = rows.slice(pageStart, pageEnd);
+    let paginatedRowModel;
 
     if (!instance.options.paginateExpandedRows) {
-      return expandRows({
+      paginatedRowModel = expandRows({
         rows,
         flatRows,
         rowsById
       });
+    } else {
+      paginatedRowModel = {
+        rows,
+        flatRows,
+        rowsById
+      };
     }
 
-    return {
-      rows,
-      flatRows,
-      rowsById
+    paginatedRowModel.flatRows = [];
+
+    const handleRow = row => {
+      paginatedRowModel.flatRows.push(row);
+
+      if (row.subRows.length) {
+        row.subRows.forEach(handleRow);
+      }
     };
+
+    paginatedRowModel.rows.forEach(handleRow);
+    return paginatedRowModel;
   }, {
     key: process.env.NODE_ENV === 'development' && 'getPaginationRowModel',
     debug: () => {
@@ -3830,8 +3875,11 @@ function create_fragment$1(ctx) {
 		c() {
 			t = text$1(/*content*/ ctx[0]);
 		},
+		l(nodes) {
+			t = claim_text(nodes, /*content*/ ctx[0]);
+		},
 		m(target, anchor) {
-			insert(target, t, anchor);
+			insert_hydration(target, t, anchor);
 		},
 		p(ctx, [dirty]) {
 			if (dirty & /*content*/ 1) set_data(t, /*content*/ ctx[0]);
@@ -3854,13 +3902,18 @@ function instance($$self, $$props, $$invalidate) {
 	return [content];
 }
 
-class Placeholder extends SvelteComponent {
+class Placeholder$1 extends SvelteComponent {
 	constructor(options) {
 		super();
 		init(this, options, instance, create_fragment$1, safe_not_equal, { content: 0 });
 	}
 }
 
+const PlaceholderServer = create_ssr_component(($$result, $$props, $$bindings, slots) => {
+  return "" + escape($$props.content);
+});
+var Placeholder = typeof document === 'undefined' ? PlaceholderServer : Placeholder$1;
+
 function create_fragment(ctx, Comp, props) {
   let c;
   let current;
@@ -3873,6 +3926,10 @@ function create_fragment(ctx, Comp, props) {
       create_component(c.$$.fragment);
     },
 
+    l(nodes) {
+      claim_component(c.$$.fragment, nodes);
+    },
+
     m(target, anchor) {
       // @ts-ignore
       mount_component(c, target, anchor);
@@ -3911,7 +3968,7 @@ function renderClient(Comp, props) {
 
 function renderServer(Comp, props) {
   const WrapperComp = create_ssr_component(($$result, $$props, $$bindings, slots) => {
-    return "" + validate_component(Comp, 'Comp').$$render($$result, props, {}, {});
+    return "" + validate_component(Comp, 'TableComponent').$$render($$result, props, {}, {});
   });
   return WrapperComp;
 }
@@ -3923,7 +3980,10 @@ function isSvelteServerComponent(component) {
 }
 
 function isSvelteClientComponent(component) {
-  return component.prototype instanceof SvelteComponent;
+  var _component$name, _component$name2;
+
+  let isHMR = ('__SVELTE_HMR' in window);
+  return component.prototype instanceof SvelteComponent || isHMR && ((_component$name = component.name) == null ? void 0 : _component$name.startsWith('Proxy<')) && ((_component$name2 = component.name) == null ? void 0 : _component$name2.endsWith('>'));
 }
 
 function isSvelteComponent(component) {
@@ -3977,6 +4037,7 @@ function createTableInstance(table, options) {
     onStateChange: () => {},
     // noop
     render,
+    renderFallbackValue: null,
     ...get(optionsStore)
   };
   let instance = createTableInstance$1(resolvedOptions);