@infinite-table/infinite-react 9.0.0-canary.0 → 9.0.1

package/README.md

@@ -21,6 +21,7 @@
 - [🤔 What is Infinite Table?](#-what-is-infinite-table)
 - [📦 Installation](#-installation)
 - [📄 Extensive documentation](#-extensive-documentation)
+- [⚖️ Compare](#-compare)
 - [❤️ TypeScript](#-typescript)
 - [🏢 Enterprise-ready](#-enterprise-ready)
   - [🔒 Secure by default](#-secure-by-default)
@@ -76,6 +77,15 @@ Our approach with the `InfiniteTable` is to go documentation first. From our dev
 
 **[Visit our docs and getting-started guide](https://infinite-table.com/docs)**
 
+## ⚖️ Compare
+
+Choosing a React DataGrid is a big decision. We've put together honest comparisons so you can see where Infinite Table fits — particularly if you value a component that feels native to React (hooks, controlled/uncontrolled props).
+
+- [Overview](https://infinite-table.com/docs/learn/compare)
+- [vs AG Grid](https://infinite-table.com/docs/learn/compare/ag-grid)
+- [vs TanStack Table](https://infinite-table.com/docs/learn/compare/tanstack-table)
+- [vs MUI X Data Grid](https://infinite-table.com/docs/learn/compare/mui-x-data-grid)
+
 ## ❤️ TypeScript
 
 It's fully typed and offers you great developer experience to help you get up and running quickly

package/index.dev.js

@@ -2552,6 +2552,30 @@ function FilterIcon(props) {
   );
 }
 
+// src/components/InfiniteTable/utils/getColumnComputedType.ts
+var emptyType = Object.freeze({});
+var defaultFilterTypes = {
+  string: emptyType,
+  number: {}
+};
+function getColumnComputedType(column, columnTypes) {
+  const defaultType = columnTypes["default"] || emptyType;
+  if (column.type === void 0) {
+    return defaultType;
+  }
+  if (column.type === null) {
+    return emptyType;
+  }
+  if (typeof column.type === "string") {
+    const type = columnTypes[column.type] || defaultFilterTypes[column.type] || emptyType;
+    return type;
+  }
+  return column.type.reduce(
+    (acc, columnType) => Object.assign(acc, columnTypes[columnType]),
+    {}
+  );
+}
+
 // src/components/flexbox/index.ts
 var computeFlex = (params) => {
   const {
@@ -2986,30 +3010,6 @@ function assignExcept(exceptKeys, target, ...rest) {
   return assignFiltered((_value, key) => !(key in exceptKeys), target, ...rest);
 }
 
-// src/components/InfiniteTable/utils/getColumnComputedType.ts
-var emptyType = Object.freeze({});
-var defaultFilterTypes = {
-  string: emptyType,
-  number: {}
-};
-function getColumnComputedType(column, columnTypes) {
-  const defaultType = columnTypes["default"] || emptyType;
-  if (column.type === void 0) {
-    return defaultType;
-  }
-  if (column.type === null) {
-    return emptyType;
-  }
-  if (typeof column.type === "string") {
-    const type = columnTypes[column.type] || defaultFilterTypes[column.type] || emptyType;
-    return type;
-  }
-  return column.type.reduce(
-    (acc, columnType) => Object.assign(acc, columnTypes[columnType]),
-    {}
-  );
-}
-
 // src/components/InfiniteTable/utils/getComputedColumns.ts
 var DEFAULT_SORTABLE = true;
 var DEFAULT_RESIZABLE = true;
@@ -3028,8 +3028,63 @@ var getComputedPinned = (colId, columnPinning) => {
   const computedPinned = pinned === "start" || pinned === true ? "start" : pinned === "end" ? "end" : false;
   return computedPinned;
 };
+function findColumnForField(columns, field) {
+  if (!columns) {
+    return void 0;
+  }
+  if (columns[field]) {
+    return columns[field];
+  }
+  return Object.values(columns).find((col) => col.field === field);
+}
+function getSortTypeFromUserColumn(column, columnTypes) {
+  const colType = getColumnComputedType(column, columnTypes);
+  if (column.sortType) {
+    return column.sortType;
+  }
+  if (colType.sortType) {
+    return colType.sortType;
+  }
+  if (typeof column.type === "string") {
+    return column.type;
+  }
+  return DEFAULT_DATA_TYPE;
+}
+function getSortTypeForGroupByFromUserColumns(groupByForColumn, userColumns, columnTypes) {
+  const list = Array.isArray(groupByForColumn) ? groupByForColumn : groupByForColumn ? [groupByForColumn] : [];
+  const types = list.flatMap((groupBy) => {
+    const field = groupBy.field ?? groupBy.groupField;
+    if (!field) {
+      return [UNKNOWN_SORT_TYPE];
+    }
+    const userCol = findColumnForField(userColumns, field);
+    if (!userCol) {
+      return [UNKNOWN_SORT_TYPE];
+    }
+    const sortType = getSortTypeFromUserColumn(userCol, columnTypes);
+    return Array.isArray(sortType) ? sortType : [sortType];
+  });
+  if (types.every((type) => type === UNKNOWN_SORT_TYPE)) {
+    return UNKNOWN_SORT_TYPE;
+  }
+  return types.length === 1 ? types[0] : types;
+}
+function getColumnComputedSortable(column, options) {
+  const { colType, sortable, columnDefaultSortable } = options;
+  let sortableColumnOrType = column.defaultSortable ?? colType.defaultSortable;
+  const isGroupColumn = !!column.groupByForColumn;
+  if (sortableColumnOrType == null && !isGroupColumn) {
+    const field = column.field ?? colType.field;
+    const valueGetter = column.valueGetter ?? colType.valueGetter;
+    if (field == null && valueGetter == null) {
+      sortableColumnOrType = false;
+    }
+  }
+  return sortable ?? sortableColumnOrType ?? columnDefaultSortable ?? DEFAULT_SORTABLE;
+}
 var getComputedColumns = ({
   columns,
+  userColumns,
   bodySize,
   columnMinWidth,
   columnMaxWidth,
@@ -3283,15 +3338,13 @@ var getComputedColumns = ({
     if (c.groupByForColumn) {
       computedGroupable = false;
     }
-    let sortableColumnOrType = c.defaultSortable ?? colType.defaultSortable;
-    if (sortableColumnOrType == null && !c.groupByForColumn) {
-      if (field == null && valueGetter == null) {
-        sortableColumnOrType = false;
-      }
-    }
     const computedGroupedBy = field ? groupByFields[field] !== void 0 : false;
     const computedGroupedByIndex = computedGroupedBy ? groupByFields[field] : void 0;
-    let computedSortable = sortable ?? sortableColumnOrType ?? columnDefaultSortable ?? DEFAULT_SORTABLE;
+    const computedSortable = getColumnComputedSortable(c, {
+      colType,
+      sortable,
+      columnDefaultSortable
+    });
     const computedResizable = c.resizable ?? colType.resizable ?? resizableColumns ?? DEFAULT_RESIZABLE;
     const result2 = {
       colType,
@@ -3381,7 +3434,11 @@ var getComputedColumns = ({
       prevPinned = computedPinned;
     }
     if (result2.groupByForColumn) {
-      result2.computedSortType = c.sortType || colType.sortType || UNKNOWN_SORT_TYPE;
+      result2.computedSortType = c.sortType || colType.sortType || getSortTypeForGroupByFromUserColumns(
+        result2.groupByForColumn,
+        userColumns,
+        columnTypes
+      );
       groupColumns.push(result2);
     }
     computedColumnsMap.set(result2.id, result2);
@@ -3393,6 +3450,8 @@ var getComputedColumns = ({
   groupColumns.forEach((col) => {
     col.computedSortable = isGroupColumnSortable(col, {
       fieldsToColumn,
+      userColumns,
+      columnTypes,
       sortable,
       columnDefaultSortable
     });
@@ -3441,7 +3500,13 @@ var getComputedColumns = ({
 
 // src/components/InfiniteTable/api/getColumnApi.ts
 function isGroupColumnSortable(column, options) {
-  const { sortable, fieldsToColumn, columnDefaultSortable } = options;
+  const {
+    sortable,
+    fieldsToColumn,
+    columnDefaultSortable,
+    userColumns,
+    columnTypes
+  } = options;
   if (sortable) {
     return sortable;
   }
@@ -3450,7 +3515,8 @@ function isGroupColumnSortable(column, options) {
     return sortableColumnOrType;
   }
   const defaultSortable = columnDefaultSortable ?? DEFAULT_SORTABLE;
-  if (column.computedSortType !== UNKNOWN_SORT_TYPE && defaultSortable) {
+  const explicitSortType = column.sortType ?? column.colType.sortType;
+  if (explicitSortType != null && explicitSortType !== UNKNOWN_SORT_TYPE && defaultSortable) {
     return true;
   }
   const isSortable = (params) => {
@@ -3471,7 +3537,17 @@ function isGroupColumnSortable(column, options) {
         if (foundCol && foundColApi) {
           colSortable = foundColApi.isSortable();
         } else {
-          colSortable = false;
+          const userCol = findColumnForField(userColumns, field);
+          if (userCol) {
+            const userSortable = getColumnComputedSortable(userCol, {
+              colType: getColumnComputedType(userCol, columnTypes ?? {}),
+              sortable,
+              columnDefaultSortable
+            });
+            colSortable = typeof userSortable === "boolean" ? userSortable : void 0;
+          } else {
+            colSortable = false;
+          }
         }
       }
       if (colSortable === void 0 && groupBy.valueGetter) {
@@ -6213,7 +6289,6 @@ var useColumnPointerEvents = ({
         const pointerId = e2.pointerId;
         requestAnimationFrame(() => {
           const { multiSortBehavior } = getState();
-          const target2 = domRef.current;
           const rootNode = rootRef.current;
           rootNode?.classList.remove(InfiniteClsShiftingColumns);
           dragger.stop();
@@ -6222,10 +6297,12 @@ var useColumnPointerEvents = ({
           });
           discardAlwaysRenderedColumn?.();
           restoreRenderRange?.();
-          target2.style.cursor = initialCursor;
-          target2.releasePointerCapture(pointerId);
-          target2.removeEventListener("pointermove", onPointerMove);
-          target2.removeEventListener("pointerup", onPointerUp);
+          target.style.cursor = initialCursor;
+          if (target.hasPointerCapture?.(pointerId)) {
+            target.releasePointerCapture(pointerId);
+          }
+          target.removeEventListener("pointermove", onPointerMove);
+          target.removeEventListener("pointerup", onPointerUp);
           setProxyPosition(null);
           const dragColumnSortable = api.getColumnApi(dragColumn.id)?.isSortable() ?? false;
           if (!didDragAtLeastOnce && dragColumnSortable) {
@@ -16182,7 +16259,6 @@ function getPivotColumnsAndColumnGroups({
           pivotGroupKey: keys[keys.length - 1],
           pivotIndex: keys.length - 1,
           pivotByAtIndex: pivotByForColumn,
-          defaultSortable: false,
           columnGroup: parentColumnGroupId,
           header,
           valueFormatter: ({ rowInfo }) => {
@@ -16238,7 +16314,6 @@ function getPivotColumnsAndColumnGroups({
             pivotByAtIndex: pivotByForColumn,
             pivotIndex: keys.length - 1,
             pivotBy,
-            defaultSortable: false,
             valueFormatter: ({ rowInfo }) => {
               if (!rowInfo.isGroupRow) {
                 return null;
@@ -20927,6 +21002,175 @@ function getDataSourceStateRestoreForDetails(state) {
   };
 }
 
+// src/components/DataSource/state/enrichSortInfoFromGroupBy.ts
+var GROUP_COLUMN_ID = "group-by";
+var GROUP_COLUMN_ID_PREFIX = "group-by-";
+function getSortFieldsForGroupBy(groupBy) {
+  const fields = groupBy.map((g) => {
+    if (g.valueGetter) {
+      return (item) => g.valueGetter({ data: item, field: g.field });
+    }
+    return g.field ?? g.groupField;
+  }).filter(Boolean);
+  if (!fields.length) {
+    return void 0;
+  }
+  if (fields.length === 1 && typeof fields[0] !== "function") {
+    return fields[0];
+  }
+  return fields;
+}
+function enrichSortInfoFromGroupBy(sortInfo, groupBy) {
+  if (!sortInfo?.length || !groupBy?.length) {
+    return sortInfo;
+  }
+  let changed = false;
+  const next = sortInfo.map((info) => {
+    if (info.field != null || !info.id) {
+      return info;
+    }
+    if (info.id === GROUP_COLUMN_ID) {
+      const field = getSortFieldsForGroupBy(groupBy);
+      if (field == null) {
+        return info;
+      }
+      changed = true;
+      return { ...info, field };
+    }
+    if (info.id.startsWith(GROUP_COLUMN_ID_PREFIX)) {
+      const key = info.id.slice(GROUP_COLUMN_ID_PREFIX.length);
+      const match = groupBy.find(
+        (g) => String(g.field) === key || g.groupField === key
+      );
+      if (!match) {
+        return info;
+      }
+      const field = getSortFieldsForGroupBy([match]);
+      if (field == null) {
+        return info;
+      }
+      changed = true;
+      return { ...info, field };
+    }
+    return info;
+  });
+  return changed ? next : sortInfo;
+}
+
+// src/components/DataSource/state/sortGroupedRowInfosByPivotColumns.ts
+function getRowNesting(row) {
+  return "groupNesting" in row ? row.groupNesting ?? 0 : 0;
+}
+function getPivotCellValue(row, sort) {
+  if (!row.isGroupRow || !sort.reducerId) {
+    return void 0;
+  }
+  if (sort.pivotTotalColumn && (!sort.pivotGroupKeys || sort.pivotGroupKeys.length === 0)) {
+    return row.reducerResults?.[sort.reducerId];
+  }
+  return row.pivotValuesMap?.get(sort.pivotGroupKeys)?.reducerResults?.[sort.reducerId];
+}
+function comparePivotValues(a, b, sort, sortTypes) {
+  if (a == null && b == null) {
+    return 0;
+  }
+  if (a == null) {
+    return 1;
+  }
+  if (b == null) {
+    return -1;
+  }
+  const type = Array.isArray(sort.type) ? sort.type[0] : sort.type;
+  const fn = sort.fn || type && sortTypes[type] || sortTypes.string || sortTypes_default.string;
+  const result = fn(a, b);
+  return result === 0 ? 0 : sort.dir * result;
+}
+function toPivotSorts(sortInfo, pivotColumns) {
+  if (!sortInfo?.length || !pivotColumns) {
+    return [];
+  }
+  const result = [];
+  for (const info of sortInfo) {
+    const col = info.id ? pivotColumns[info.id] : void 0;
+    if (!col?.pivotColumn || !col.pivotAggregator) {
+      continue;
+    }
+    result.push({
+      dir: info.dir,
+      type: info.type,
+      fn: info.fn,
+      pivotGroupKeys: col.pivotGroupKeys ?? [],
+      reducerId: col.pivotAggregator.id,
+      pivotTotalColumn: !!col.pivotTotalColumn
+    });
+  }
+  return result;
+}
+function buildTree(rows) {
+  const roots = [];
+  const stack = [];
+  for (const row of rows) {
+    const node = { row, children: [] };
+    const nesting = getRowNesting(row);
+    while (stack.length && getRowNesting(stack[stack.length - 1].row) >= nesting) {
+      stack.pop();
+    }
+    if (!stack.length) {
+      roots.push(node);
+    } else {
+      stack[stack.length - 1].children.push(node);
+    }
+    stack.push(node);
+  }
+  return roots;
+}
+function flattenSortedTree(roots) {
+  const result = [];
+  const walk = (nodes, parentIndexes) => {
+    nodes.forEach((node, indexInGroup) => {
+      const indexInParentGroups = [...parentIndexes, indexInGroup];
+      const row = node.row;
+      row.indexInGroup = indexInGroup;
+      row.indexInParentGroups = indexInParentGroups;
+      row.indexInAll = result.length;
+      result.push(row);
+      walk(node.children, indexInParentGroups);
+    });
+  };
+  walk(roots, []);
+  return result;
+}
+function sortGroupedRowInfosByPivotColumns(dataArray, sortInfo, pivotColumns, sortTypes) {
+  const pivotSorts = toPivotSorts(sortInfo, pivotColumns);
+  if (!pivotSorts.length || !dataArray.length) {
+    return dataArray;
+  }
+  const knownSortTypes = { ...sortTypes_default, ...sortTypes };
+  const roots = buildTree(dataArray);
+  const compareNodes = (a, b) => {
+    for (const sort of pivotSorts) {
+      const result = comparePivotValues(
+        getPivotCellValue(a.row, sort),
+        getPivotCellValue(b.row, sort),
+        sort,
+        knownSortTypes
+      );
+      if (result !== 0) {
+        return result;
+      }
+    }
+    return 0;
+  };
+  const sortTree = (nodes) => {
+    nodes.sort(compareNodes);
+    for (const node of nodes) {
+      sortTree(node.children);
+    }
+  };
+  sortTree(roots);
+  return flattenSortedTree(roots);
+}
+
 // src/components/DataSource/state/reducer.ts
 function cleanupEmptyFilterValues(filterValue, filterTypes) {
   if (!filterValue) {
@@ -21147,7 +21391,7 @@ function concludeReducer(params) {
     rootMarker = getMarker(debugId).track.DataSource.label.PrepareData.start();
   }
   const cacheAffectedParts = getCacheAffectedParts(state);
-  const sortInfo = state.sortInfo;
+  const sortInfo = enrichSortInfoFromGroupBy(state.sortInfo, state.groupBy);
   const sortMode = state.sortMode;
   let shouldSort = !!sortInfo?.length ? sortMode === "local" : false;
   if (state.lazyLoad || state.livePagination) {
@@ -21510,6 +21754,16 @@ function concludeReducer(params) {
       }) : void 0;
       state.pivotColumns = pivotGroupsAndCols?.columns;
       state.pivotColumnGroups = pivotGroupsAndCols?.columnGroups;
+      const pivotSortedRowInfos = sortGroupedRowInfosByPivotColumns(
+        rowInfoDataArray,
+        sortInfo,
+        state.pivotColumns,
+        state.sortTypes
+      );
+      if (pivotSortedRowInfos !== rowInfoDataArray) {
+        rowInfoDataArray = pivotSortedRowInfos;
+        state.groupRowsIndexesInDataArray = rowInfoDataArray.map((row, index) => row.isGroupRow ? index : -1).filter((index) => index >= 0);
+      }
       if (state.devToolsDetected) {
         state.debugTimings.set("group-and-pivot", Date.now() - groupTimestamp);
       }
@@ -21752,7 +22006,11 @@ var DATA_CHANGES_COMPARE_FUNCTIONS = {
   }
 };
 function buildDataSourceDataParams(componentState, overrides, masterContext) {
-  const sortInfo = componentState.multiSort ? componentState.sortInfo : componentState.sortInfo?.[0] ?? null;
+  const resolvedSortInfo = enrichSortInfoFromGroupBy(
+    componentState.sortInfo,
+    componentState.groupBy
+  );
+  const sortInfo = componentState.multiSort ? resolvedSortInfo : resolvedSortInfo?.[0] ?? null;
   const dataSourceParams = {
     append: false,
     originalDataArray: componentState.originalDataArray,
@@ -23497,8 +23755,9 @@ var InfiniteTableApiImpl = class {
       this.setSortInfoForColumn(columnId, null, options);
       return;
     }
+    const isPivotColumn = !!c.pivotColumn;
     const groupByForColumn = c.groupByForColumn;
-    let field = c.field;
+    let field = isPivotColumn ? void 0 : c.field;
     const groupByForCol = groupByForColumn ? Array.isArray(groupByForColumn) ? groupByForColumn : [groupByForColumn] : [];
     const fieldArr = groupByForCol.map((c2) => {
       return c2.valueGetter ? (item) => c2.valueGetter({ data: item, field: c2.field }) : c2.field ? c2.field : c2.groupField ?? void 0;
@@ -23508,23 +23767,32 @@ var InfiniteTableApiImpl = class {
     }
     let computedSortType = c.computedSortType;
     if (groupByForCol.length && computedSortType === UNKNOWN_SORT_TYPE) {
+      const userColumns = this.getState().initialColumns;
       const sortTypeForGroupCols = groupByForCol.flatMap((groupBy) => {
         const field2 = groupBy.field ?? groupBy.groupField;
         const col = field2 ? computedColumnsMap.get(field2) : null;
-        if (!col) {
-          return UNKNOWN_SORT_TYPE;
+        if (col) {
+          return col.computedSortType;
+        }
+        const userCol = field2 ? findColumnForField(userColumns, field2) : void 0;
+        if (userCol) {
+          const type = userCol.sortType || (typeof userCol.type === "string" ? userCol.type : "string");
+          return type;
         }
-        return col.computedSortType;
+        return [UNKNOWN_SORT_TYPE];
       });
       computedSortType = sortTypeForGroupCols;
     }
+    if (groupByForCol.length && !Array.isArray(computedSortType)) {
+      computedSortType = [computedSortType];
+    }
     const newColumnSortInfo = {
       dir,
       id: c.id,
       field,
       type: computedSortType
     };
-    if (c.valueGetter) {
+    if (!isPivotColumn && c.valueGetter) {
       newColumnSortInfo.valueGetter = (data) => c.valueGetter({ data, field: c.field });
     }
     this.setSortInfoForColumn(columnId, newColumnSortInfo, options);
@@ -26230,13 +26498,6 @@ function getColumnsWhenGrouping(params) {
     computedColumns[groupColumnId] = singleGroupColumn;
   }
   if (pivotColumns) {
-    const columnsByField = {};
-    Object.keys(columns).forEach((colId) => {
-      const col = columns[colId];
-      if (col.field) {
-        columnsByField[col.field] = col;
-      }
-    });
     Object.keys(pivotColumns).forEach((key) => {
       const col = pivotColumns[key];
       const isSimpleTotalColumn = col.pivotTotalColumn && col.columnGroup;
@@ -26266,7 +26527,7 @@ function getColumnsWhenGrouping(params) {
         }
       }
       if (column.inheritFromColumn !== false) {
-        const colToInheritFrom = typeof column.inheritFromColumn === "string" ? columns[column.inheritFromColumn] : column.pivotAggregator?.field ? columnsByField[column.pivotAggregator?.field] : void 0;
+        const colToInheritFrom = typeof column.inheritFromColumn === "string" ? columns[column.inheritFromColumn] : column.pivotAggregator?.field ? findColumnForField(columns, column.pivotAggregator.field) : void 0;
         column = { ...colToInheritFrom, ...column };
       }
       if (!column.render && column.renderValue) {
@@ -26644,6 +26905,7 @@ function useHideColumns(groupByMap, state, actions) {
 var import_react47 = require("react");
 var useComputedColumns = ({
   columns,
+  userColumns,
   bodySize,
   columnMinWidth,
   columnMaxWidth,
@@ -26699,6 +26961,7 @@ var useComputedColumns = ({
   } = (0, import_react47.useMemo)(() => {
     return getComputedColumns({
       columns,
+      userColumns,
       scrollbarWidth: scrollbarWidth2,
       bodySize,
       columnMinWidth,
@@ -26733,6 +26996,7 @@ var useComputedColumns = ({
     });
   }, [
     columns,
+    userColumns,
     bodySize.width,
     columnMinWidth,
     columnMaxWidth,
@@ -26964,6 +27228,7 @@ function useComputed(options) {
     onRowDetailHeightCSSVarChange,
     onColumnHeaderHeightCSSVarChange,
     computedColumns,
+    initialColumns,
     viewportReservedWidth,
     resizableColumns,
     sortable,
@@ -27040,6 +27305,7 @@ function useComputed(options) {
     fieldsToColumn
   } = useComputedColumns({
     columns,
+    userColumns: initialColumns,
     // scrollbarWidth: scrollbars.vertical ? getScrollbarWidth() : 0,
     // #scrollbarverticaltag
     // we use the default scrollbar width - using it dynamically causes issues
@@ -27355,7 +27621,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "9.0.0-canary.0"
+      version: "9.0.1"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;