@infinite-table/infinite-react 0.0.2-canary.6 → 0.0.5

package/index.esm.js

@@ -658,7 +658,7 @@ function computeColumnGroupsDepths(columnGroups) {
     while (parentGroupId) {
       const parent = columnGroups.get(parentGroupId);
       if (!parent) {
-        if (false) {
+        if (true) {
           console.warn(`Cannot find column group ${parentGroupId}`);
         }
         break;
@@ -1075,7 +1075,7 @@ var Logger = class {
   constructor(channelName) {
     this.debug = emptyLogFn;
     this.error = emptyLogFn;
-    if (false) {
+    if (true) {
       this.debug = dbg(channelName);
       this.error = err(channelName);
     }
@@ -1677,16 +1677,16 @@ function getComponentStateRoot(config) {
             return [__spreadProps(__spreadValues({}, initialArg), { props: props2 })];
           }
         });
-        propsToStateSetRef.current = new Set([
-          ...propsToStateSetRef.current,
-          ...propertyReads
-        ]);
         const stateFromProps = mapPropsToState3({
           props,
           state: state2,
           oldState: null,
           parentState
         });
+        propsToStateSetRef.current = new Set([
+          ...propsToStateSetRef.current,
+          ...propertyReads
+        ]);
         return __spreadValues(__spreadValues({}, state2), stateFromProps);
       }
       return state2;
@@ -1708,16 +1708,16 @@ function getComponentStateRoot(config) {
             return [__spreadProps(__spreadValues({}, initialArg), { props: props2 })];
           }
         });
-        propsToStateSetRef.current = new Set([
-          ...propsToStateSetRef.current,
-          ...propertyReads
-        ]);
         const stateFromProps = mapPropsToState3({
           props: getProps(),
           state: newState,
           oldState: previousState,
           parentState: parentState2
         });
+        propsToStateSetRef.current = new Set([
+          ...propsToStateSetRef.current,
+          ...propertyReads
+        ]);
         Object.assign(newState, stateFromProps);
       }
       const result = config.concludeReducer ? config.concludeReducer({
@@ -1919,31 +1919,28 @@ import {
 import { useState as useState3 } from "react";
 
 // src/components/InfiniteTable/utilities.css.ts
-var alignItems = { center: "_16lm1iwz", stretch: "_16lm1iw10" };
-var cssEllipsisClassName = "_16lm1iw18 _16lm1iw19 _16lm1iw14";
-var cursor = { pointer: "_16lm1iw9" };
-var display = { flex: "_16lm1iwh", block: "_16lm1iwi", inlineBlock: "_16lm1iwj" };
+var alignItems = { center: "_16lm1iw11", stretch: "_16lm1iw12" };
+var cssEllipsisClassName = "_16lm1iw1a _16lm1iw1b _16lm1iw16";
+var cursor = { pointer: "_16lm1iwb" };
+var display = { flex: "_16lm1iwj", block: "_16lm1iwk", inlineBlock: "_16lm1iwl" };
 var fill = { currentColor: "_16lm1iw5", accentColor: "_16lm1iw6" };
-var flex = { "1": "_16lm1iwa", none: "_16lm1iwb" };
-var flexFlow = { column: "_16lm1iwx", row: "_16lm1iwy" };
-var justifyContent = { center: "_16lm1iw11", start: "_16lm1iw12", end: "_16lm1iw13" };
-var left = { "0": "_16lm1iwr", "100%": "_16lm1iws" };
+var flex = { "1": "_16lm1iwc", none: "_16lm1iwd" };
+var flexFlow = { column: "_16lm1iwz", row: "_16lm1iw10" };
+var justifyContent = { center: "_16lm1iw13", start: "_16lm1iw14", end: "_16lm1iw15" };
+var left = { "0": "_16lm1iwt", "100%": "_16lm1iwu" };
 var position = { relative: "_16lm1iw1", absolute: "_16lm1iw2", sticky: "_16lm1iw3", fixed: "_16lm1iw4" };
-var top = { "0": "_16lm1iwp", "100%": "_16lm1iwq" };
+var top = { "0": "_16lm1iwr", "100%": "_16lm1iws" };
+var transform = { translateZero: "_16lm1iw9", rotate90: "_16lm1iwa" };
 var transformTranslateZero = "_16lm1iw8";
-var userSelect = { none: "_16lm1iwk" };
-var willChange = { transform: "_16lm1iw17" };
-var zIndex = { "1": "_16lm1iwc", "10": "_16lm1iwd", "1000": "_16lm1iwe", "10000": "_16lm1iwf", "100000": "_16lm1iwg" };
+var userSelect = { none: "_16lm1iwm" };
+var willChange = { transform: "_16lm1iw19" };
+var zIndex = { "1": "_16lm1iwe", "10": "_16lm1iwf", "1000": "_16lm1iwg", "10000": "_16lm1iwh", "100000": "_16lm1iwi" };
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
 function ExpanderIcon(props) {
   var _a;
   const { size = 24 } = props;
-  const style = __spreadValues({}, props.style);
   const [expanded, setExpanded] = useState3((_a = props.expanded) != null ? _a : props.defaultExpanded);
-  if (expanded) {
-    style.transform = `rotate(90deg)`;
-  }
   const onClick = () => {
     var _a2;
     (_a2 = props.onChange) == null ? void 0 : _a2.call(props, !expanded);
@@ -1962,94 +1959,14 @@ function ExpanderIcon(props) {
     height: `${size}px`,
     viewBox: "0 0 24 24",
     width: `${size}px`,
-    style,
+    style: props.style,
     onClick,
-    className: join(props.className, fill.currentColor, flex.none, cursor.pointer, expanded ? fill.accentColor : "", "InfiniteIcon", "InfiniteIcon-expander", `InfiniteIcon-expander--${expanded ? "expanded" : "collapsed"}`)
+    className: join(props.className, fill.accentColor, flex.none, cursor.pointer, expanded ? fill.accentColor : "", expanded ? transform.rotate90 : "", "InfiniteIcon", "InfiniteIcon-expander", `InfiniteIcon-expander--${expanded ? "expanded" : "collapsed"}`)
   }, /* @__PURE__ */ createElement3("path", {
     d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
   }));
 }
 
-// src/components/InfiniteTable/state/getComputedPivotColumnsFromDataSourcePivotColumns.tsx
-function getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, params) {
-  if (!pivotColumns) {
-    return void 0;
-  }
-  const {
-    pivotColumn,
-    pivotRowLabelsColumn,
-    pivotBy,
-    groupRowsBy,
-    pivotTotalColumnPosition,
-    toggleGroupRow
-  } = params;
-  const computedPivotColumns = new Map();
-  pivotColumns.forEach((col, key) => {
-    if (col.pivotTotalColumn && pivotTotalColumnPosition === false) {
-      return;
-    }
-    let column = __spreadValues({}, col);
-    if (pivotColumn) {
-      if (typeof pivotColumn === "function") {
-        column = __spreadValues(__spreadValues({}, column), pivotColumn({
-          column,
-          pivotBy,
-          groupRowsBy
-        }));
-      } else {
-        column = __spreadValues(__spreadValues({}, column), pivotColumn);
-      }
-    }
-    const isPivotRowLabelsColumn = !column.pivotColumn && !column.pivotTotalColumn;
-    if (pivotRowLabelsColumn && isPivotRowLabelsColumn) {
-      if (typeof pivotRowLabelsColumn === "function") {
-        column = __spreadValues(__spreadValues({}, column), pivotRowLabelsColumn({
-          column,
-          pivotBy,
-          groupRowsBy
-        }));
-      } else {
-        column = __spreadValues(__spreadValues({}, column), pivotRowLabelsColumn);
-      }
-    }
-    if (isPivotRowLabelsColumn && !column.render) {
-      column.render = (renderOptions) => {
-        var _a;
-        let { value, rowInfo, column: column2, groupRowsBy: groupRowsBy2 } = renderOptions;
-        if (column2.renderValue) {
-          value = column2.renderValue(renderOptions);
-        }
-        const showExpanderIcon = (((_a = rowInfo.groupKeys) == null ? void 0 : _a.length) || 0) < groupRowsBy2.length;
-        return /* @__PURE__ */ createElement4("div", {
-          className: join(display.flex, alignItems.center),
-          style: {
-            paddingInlineStart: `calc(${rowInfo.groupNesting - 1} * var(--ITableRow-group-column-nesting))`
-          }
-        }, showExpanderIcon ? /* @__PURE__ */ createElement4(ExpanderIcon, {
-          expanded: !rowInfo.collapsed,
-          onChange: () => {
-            toggleGroupRow(rowInfo.groupKeys);
-          }
-        }) : null, /* @__PURE__ */ createElement4("div", {
-          className: cssEllipsisClassName
-        }, value != null ? value : null));
-      };
-    }
-    if (!column.render && column.renderValue) {
-      column.render = (renderOptions) => {
-        return column.renderValue(renderOptions);
-      };
-    }
-    computedPivotColumns.set(key, column);
-  });
-  return computedPivotColumns;
-}
-
-// src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
-import {
-  createElement as createElement5
-} from "react";
-
 // node_modules/@vanilla-extract/recipes/createRuntimeFn/dist/vanilla-extract-recipes-createRuntimeFn.esm.js
 var shouldApplyCompound = (compoundCheck, selections) => {
   for (const key of Object.keys(compoundCheck)) {
@@ -2089,9 +2006,87 @@ var GroupRowExpanderCls = "_7pupv0b";
 var RowClsRecipe = createRuntimeFn({ defaultClassName: "_7pupv00", variantClassNames: { zebra: { false: "_7pupv02", even: "_7pupv03", odd: "_7pupv04" }, groupRow: { true: "_7pupv05", false: "_7pupv06" }, inlineGroupRow: { true: "_7pupv07", false: "_7pupv08" }, showHoverRows: { true: "_7pupv09", false: "_7pupv0a" } }, defaultVariants: {}, compoundVariants: [] });
 var RowHoverCls = "_7pupv01";
 
+// src/components/InfiniteTable/state/getComputedPivotColumnsFromDataSourcePivotColumns.tsx
+function getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, params) {
+  if (!pivotColumns) {
+    return void 0;
+  }
+  const {
+    pivotColumn,
+    pivotRowLabelsColumn,
+    pivotBy,
+    groupRowsBy,
+    pivotTotalColumnPosition,
+    toggleGroupRow
+  } = params;
+  const computedPivotColumns = new Map();
+  pivotColumns.forEach((col, key) => {
+    if (col.pivotTotalColumn && pivotTotalColumnPosition === false) {
+      return;
+    }
+    let column = __spreadValues({}, col);
+    const isPivotRowLabelsColumn = !column.pivotColumn && !column.pivotTotalColumn;
+    if (!isPivotRowLabelsColumn) {
+      if (pivotColumn) {
+        if (typeof pivotColumn === "function") {
+          column = __spreadValues(__spreadValues({}, column), pivotColumn({
+            column,
+            pivotBy,
+            groupRowsBy
+          }));
+        } else {
+          column = __spreadValues(__spreadValues({}, column), pivotColumn);
+        }
+      }
+    } else {
+      if (pivotRowLabelsColumn) {
+        if (typeof pivotRowLabelsColumn === "function") {
+          column = __spreadValues(__spreadValues({}, column), pivotRowLabelsColumn({
+            column,
+            pivotBy,
+            groupRowsBy
+          }));
+        } else {
+          column = __spreadValues(__spreadValues({}, column), pivotRowLabelsColumn);
+        }
+      }
+      if (!column.render) {
+        column.render = (renderOptions) => {
+          var _a;
+          let { value, rowInfo, column: column2, groupRowsBy: groupRowsBy2 } = renderOptions;
+          if (column2.renderValue) {
+            value = column2.renderValue(renderOptions);
+          }
+          const showExpanderIcon = (((_a = rowInfo.groupKeys) == null ? void 0 : _a.length) || 0) < groupRowsBy2.length;
+          return /* @__PURE__ */ createElement4("div", {
+            className: join(display.flex, alignItems.center, GroupRowExpanderCls)
+          }, showExpanderIcon ? /* @__PURE__ */ createElement4(ExpanderIcon, {
+            expanded: !rowInfo.collapsed,
+            onChange: () => {
+              toggleGroupRow(rowInfo.groupKeys);
+            }
+          }) : null, /* @__PURE__ */ createElement4("div", {
+            className: cssEllipsisClassName
+          }, value != null ? value : null));
+        };
+      }
+    }
+    if (!column.render && column.renderValue) {
+      column.render = (renderOptions) => {
+        return column.renderValue(renderOptions);
+      };
+    }
+    computedPivotColumns.set(key, column);
+  });
+  return computedPivotColumns;
+}
+
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
+import {
+  createElement as createElement5
+} from "react";
 function getGroupColumnRender({
-  groupIndex,
+  groupIndexForColumn,
   groupRenderStrategy,
   toggleGroupRow
 }) {
@@ -2101,7 +2096,7 @@ function getGroupColumnRender({
     if (column.renderValue) {
       value = column.renderValue(renderOptions);
     }
-    let groupRowInfo = groupRenderStrategy !== "inline" ? rowInfo : ((_a = rowInfo.parents) == null ? void 0 : _a[groupIndex]) || rowInfo;
+    let groupRowInfo = groupRenderStrategy !== "inline" ? rowInfo : ((_a = rowInfo.parents) == null ? void 0 : _a[groupIndexForColumn]) || rowInfo;
     if (!groupRowInfo) {
       return null;
     }
@@ -2111,14 +2106,14 @@ function getGroupColumnRender({
       if (groupRowInfo.groupCount === 1) {
         return value;
       }
-      if (groupRowInfo.groupNesting === groupIndex && collapsed) {
+      if (groupRowInfo.groupNesting === groupIndexForColumn && collapsed) {
         return null;
       }
     } else {
       if (!groupRowInfo.isGroupRow) {
         return null;
       }
-      if (groupIndex + 1 !== groupRowInfo.groupNesting) {
+      if (groupIndexForColumn + 1 !== groupRowInfo.groupNesting) {
         return null;
       }
     }
@@ -2135,17 +2130,21 @@ function getGroupColumnRender({
   };
 }
 function getColumnForGroupBy(options, toggleGroupRow, groupColumnFromProps) {
-  const { groupBy, groupIndex, groupRenderStrategy } = options;
+  const {
+    groupByForColumn,
+    groupIndexForColumn,
+    groupRenderStrategy
+  } = options;
   let generatedGroupColumn = __spreadValues({
-    header: `Group by ${groupBy.field}`,
-    groupByField: groupBy.field,
+    header: `Group by ${groupByForColumn.field}`,
+    groupByField: groupByForColumn.field,
     sortable: false,
     render: getGroupColumnRender({
-      groupIndex,
+      groupIndexForColumn,
       toggleGroupRow,
       groupRenderStrategy
     })
-  }, groupBy.column);
+  }, groupByForColumn.column);
   if (groupColumnFromProps) {
     if (typeof groupColumnFromProps === "function") {
       generatedGroupColumn = __spreadValues(__spreadValues({}, generatedGroupColumn), groupColumnFromProps(options, toggleGroupRow));
@@ -2689,78 +2688,6 @@ function mapPropsToState2(params) {
   };
 }
 
-// src/utils/multisort/sortTypes.ts
-var sortTypes = {
-  number: function(first, second) {
-    return first - second;
-  },
-  string: function(first, second) {
-    first = `${first}`;
-    second = `${second}`;
-    return first.localeCompare(second);
-  }
-};
-var sortTypes_default = sortTypes;
-
-// src/utils/multisort/index.ts
-var multisort = (sortInfo, array, get) => {
-  array.sort(getMultisortFunction(sortInfo, get));
-  return array;
-};
-multisort.knownTypes = sortTypes_default;
-var getSingleSortFunction = (info) => {
-  if (!info) {
-    return;
-  }
-  const field = info.field;
-  var dir = info.dir < 0 ? -1 : info.dir > 0 ? 1 : 0;
-  if (!dir) {
-    return;
-  }
-  let fn = info.fn;
-  if (!fn && info.type) {
-    fn = multisort.knownTypes[info.type];
-    if (!fn) {
-      console.warn(`Unknown sort type "${info.type}" - please pass one of ${Object.keys(multisort.knownTypes).join(", ")}`);
-    }
-  }
-  if (!fn) {
-    fn = sortTypes_default.string;
-  }
-  return (first, second) => {
-    const a = field ? first[field] : first;
-    const b = field ? second[field] : second;
-    return dir * fn(a, b);
-  };
-};
-var getSortFunctions = (sortInfo) => {
-  return sortInfo.map(getSingleSortFunction).filter((fn) => fn instanceof Function);
-};
-var getMultisortFunction = (sortInfo, get) => {
-  const fns = getSortFunctions(sortInfo);
-  return (first, second) => {
-    if (get) {
-      first = get(first);
-      second = get(second);
-    }
-    let result = 0;
-    let i = 0;
-    let fn;
-    const len = fns.length;
-    for (; i < len; i++) {
-      fn = fns[i];
-      if (!fn) {
-        continue;
-      }
-      result = fn(first, second);
-      if (result !== 0) {
-        return result;
-      }
-    }
-    return result;
-  };
-};
-
 // src/utils/groupAndPivot/index.ts
 function DEFAULT_TO_KEY(value) {
   return value;
@@ -2990,6 +2917,80 @@ function enhancedFlatten(param) {
     data: result
   };
 }
+
+// src/utils/multisort/sortTypes.ts
+var sortTypes = {
+  number: function(first, second) {
+    return first - second;
+  },
+  string: function(first, second) {
+    first = `${first}`;
+    second = `${second}`;
+    return first.localeCompare(second);
+  }
+};
+var sortTypes_default = sortTypes;
+
+// src/utils/multisort/index.ts
+var multisort = (sortInfo, array, get) => {
+  array.sort(getMultisortFunction(sortInfo, get));
+  return array;
+};
+multisort.knownTypes = sortTypes_default;
+var getSingleSortFunction = (info) => {
+  if (!info) {
+    return;
+  }
+  const field = info.field;
+  var dir = info.dir < 0 ? -1 : info.dir > 0 ? 1 : 0;
+  if (!dir) {
+    return;
+  }
+  let fn = info.fn;
+  if (!fn && info.type) {
+    fn = multisort.knownTypes[info.type];
+    if (!fn) {
+      console.warn(`Unknown sort type "${info.type}" - please pass one of ${Object.keys(multisort.knownTypes).join(", ")}`);
+    }
+  }
+  if (!fn) {
+    fn = sortTypes_default.string;
+  }
+  return (first, second) => {
+    const a = field ? first[field] : first;
+    const b = field ? second[field] : second;
+    return dir * fn(a, b);
+  };
+};
+var getSortFunctions = (sortInfo) => {
+  return sortInfo.map(getSingleSortFunction).filter((fn) => fn instanceof Function);
+};
+var getMultisortFunction = (sortInfo, get) => {
+  const fns = getSortFunctions(sortInfo);
+  return (first, second) => {
+    if (get) {
+      first = get(first);
+      second = get(second);
+    }
+    let result = 0;
+    let i = 0;
+    let fn;
+    const len = fns.length;
+    for (; i < len; i++) {
+      fn = fns[i];
+      if (!fn) {
+        continue;
+      }
+      result = fn(first, second);
+      if (result !== 0) {
+        return result;
+      }
+    }
+    return result;
+  };
+};
+
+// src/utils/groupAndPivot/getPivotColumnsAndColumnGroups.ts
 function getPivotColumnsAndColumnGroups(deepMap, pivotBy, pivotTotalColumnPosition) {
   const pivotLength = pivotBy.length;
   const columns = new Map([
@@ -3014,10 +3015,14 @@ function getPivotColumnsAndColumnGroups(deepMap, pivotBy, pivotTotalColumnPositi
     if (keys.length === pivotLength) {
       const parentKeys = keys.slice(0, -1);
       let columnGroupId = parentKeys.join("/");
-      columns.set(`${keys.join("/")}`, {
+      const pivotByForColumn = pivotBy[keys.length - 1];
+      let computedPivotColumn = __spreadValues({
         pivotBy,
         pivotColumn: true,
         pivotGroupKeys: keys,
+        pivotGroupKeyForColumn: keys[keys.length - 1],
+        pivotIndexForColumn: keys.length - 1,
+        pivotByForColumn,
         sortable: false,
         columnGroup: parentKeys.length ? `${columnGroupId}` : void 0,
         header: keys[keys.length - 1],
@@ -3026,7 +3031,15 @@ function getPivotColumnsAndColumnGroups(deepMap, pivotBy, pivotTotalColumnPositi
           const value = (_c = (_b = (_a = rowInfo.pivotValuesMap) == null ? void 0 : _a.get(keys)) == null ? void 0 : _b.reducerResults[0]) != null ? _c : null;
           return value;
         }
-      });
+      }, pivotByForColumn.column);
+      if (pivotByForColumn.column) {
+        if (typeof pivotByForColumn.column === "function") {
+          Object.assign(computedPivotColumn, pivotByForColumn.column({ column: computedPivotColumn }));
+        } else {
+          Object.assign(computedPivotColumn, pivotByForColumn.column);
+        }
+      }
+      columns.set(`${keys.join("/")}`, computedPivotColumn);
     } else {
       const colGroupId = keys.join("/");
       const parentKeys = keys.slice(0, -1);
@@ -3035,11 +3048,15 @@ function getPivotColumnsAndColumnGroups(deepMap, pivotBy, pivotTotalColumnPositi
         header: keys.join(" >> ")
       });
       if (pivotTotalColumnPosition !== false) {
-        columns.set(`${keys.join("/")}-total`, {
+        const pivotByForColumn = pivotBy[keys.length - 1];
+        let computedPivotColumn = __spreadValues({
           columnGroup: parentKeys.length ? parentKeys.join("/") : void 0,
           header: `${keys.join("/")} total `,
           pivotTotalColumn: true,
           pivotGroupKeys: keys,
+          pivotGroupKeyForColumn: keys[keys.length - 1],
+          pivotByForColumn,
+          pivotIndexForColumn: keys.length - 1,
           pivotBy,
           sortable: false,
           valueGetter: ({ rowInfo }) => {
@@ -3047,7 +3064,15 @@ function getPivotColumnsAndColumnGroups(deepMap, pivotBy, pivotTotalColumnPositi
             const value = (_c = (_b = (_a = rowInfo.pivotValuesMap) == null ? void 0 : _a.get(keys)) == null ? void 0 : _b.reducerResults[0]) != null ? _c : null;
             return value;
           }
-        });
+        }, pivotByForColumn.column);
+        if (pivotByForColumn.column) {
+          if (typeof pivotByForColumn.column === "function") {
+            Object.assign(computedPivotColumn, pivotByForColumn.column({ column: computedPivotColumn }));
+          } else {
+            Object.assign(computedPivotColumn, pivotByForColumn.column);
+          }
+        }
+        columns.set(`${keys.join("/")}-total`, computedPivotColumn);
       }
     }
     if (pivotTotalColumnPosition === "start" || pivotTotalColumnPosition === false) {
@@ -3193,7 +3218,7 @@ function DataSourceCmp({ children }) {
     componentActions,
     getState
   };
-  if (false) {
+  if (true) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
@@ -3297,7 +3322,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupRowsMap) {
             return rowspan;
           },
           render: getGroupColumnRender({
-            groupIndex,
+            groupIndexForColumn: groupIndex,
             groupRenderStrategy: groupRenderStrategy2,
             toggleGroupRow: toggleGroupRow2
           })
@@ -3360,7 +3385,7 @@ function useColumnsWhenGrouping() {
       return;
     }
     const update = () => {
-      componentActions.columnsWhenGrouping = getColumnsWhenGrouping({
+      const columnsWhenGrouping = getColumnsWhenGrouping({
         columns,
         groupColumn,
         groupRenderStrategy,
@@ -3368,6 +3393,7 @@ function useColumnsWhenGrouping() {
         pivotColumns,
         toggleGroupRow
       });
+      componentActions.columnsWhenGrouping = columnsWhenGrouping;
     };
     update();
     return interceptMap(columns, {
@@ -3455,11 +3481,11 @@ function getColumnsWhenGrouping(params) {
   }
   const computedColumns = new Map();
   if (groupRenderStrategy === "multi-column") {
-    groupRowsBy.forEach((groupBy, index, arr) => {
-      computedColumns.set(`group-by-${groupBy.field}`, getColumnForGroupBy({
-        groupBy,
+    groupRowsBy.forEach((groupByForColumn, groupIndexForColumn, arr) => {
+      computedColumns.set(`group-by-${groupByForColumn.field}`, getColumnForGroupBy({
+        groupByForColumn,
         groupRowsBy,
-        groupIndex: index,
+        groupIndexForColumn,
         groupCount: arr.length,
         groupRenderStrategy
       }, toggleGroupRow, groupColumn));
@@ -3467,7 +3493,8 @@ function getColumnsWhenGrouping(params) {
   } else if (groupRenderStrategy === "single-column") {
     computedColumns.set("group-by", getSingleGroupColumn({
       groupCount: groupRowsBy.length,
-      groupRowsBy
+      groupRowsBy,
+      groupRenderStrategy
     }, toggleGroupRow, groupColumn));
   }
   columns.forEach((col, colId) => {
@@ -3679,15 +3706,15 @@ function VerticalScrollbarPlaceholderFn(props) {
 var VerticalScrollbarPlaceholder = memo2(VerticalScrollbarPlaceholderFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
-var CellCls = "_1eexc2a5 _16lm1iwh _16lm1iwy _16lm1iwz _16lm1iw2 _16lm1iw17 _16lm1iw18";
+var CellCls = "_1eexc2a5 _16lm1iwj _16lm1iw10 _16lm1iw11 _16lm1iw2 _16lm1iw19 _16lm1iw1a";
 var HeaderCellProxy = "_12zfob10";
 var HeaderCellRecipe = createRuntimeFn({ defaultClassName: "_12zfob1c", variantClassNames: { dragging: { true: "_12zfob1d", false: "_12zfob1e" }, first: { true: "_12zfob1f", false: "_12zfob1g" }, last: { true: "_12zfob1h", false: "_12zfob1i" }, groupByField: { true: "_12zfob1j", false: "_12zfob1k" }, firstInCategory: { true: "_12zfob1l", false: "_12zfob1m" }, lastInCategory: { true: "_12zfob1n", false: "_12zfob1o" }, pinned: { start: "_12zfob1p", end: "_12zfob1q", false: "_12zfob1r" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob1s"], [{ pinned: "end", firstInCategory: true }, "_12zfob1t"], [{ pinned: false, lastInCategory: true }, "_12zfob1u"]] });
-var HeaderClsRecipe = createRuntimeFn({ defaultClassName: "_12zfob12 _16lm1iwy", variantClassNames: { pinned: { start: "_12zfob13", end: "_12zfob14", false: "_12zfob15" }, virtualized: { true: "_12zfob16", false: "_12zfob17" }, overflow: { true: "_12zfob18", false: "_12zfob19" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1a"], [{ overflow: true, pinned: "end" }, "_12zfob1b"]] });
-var HeaderGroupCls = "_16lm1iwx _16lm1iwh";
-var HeaderGroup_Children = "_16lm1iwh _16lm1iwy _16lm1iw10 _16lm1iwa";
-var HeaderGroup_Header = "_12zfob1x _16lm1iwh _16lm1iwy _16lm1iwz";
+var HeaderClsRecipe = createRuntimeFn({ defaultClassName: "_12zfob12 _16lm1iw10", variantClassNames: { pinned: { start: "_12zfob13", end: "_12zfob14", false: "_12zfob15" }, virtualized: { true: "_12zfob16", false: "_12zfob17" }, overflow: { true: "_12zfob18", false: "_12zfob19" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1a"], [{ overflow: true, pinned: "end" }, "_12zfob1b"]] });
+var HeaderGroupCls = "_16lm1iwz _16lm1iwj";
+var HeaderGroup_Children = "_16lm1iwj _16lm1iw10 _16lm1iw12 _16lm1iwc";
+var HeaderGroup_Header = "_12zfob1x _16lm1iwj _16lm1iw10 _16lm1iw11";
 var HeaderSortIconCls = "_12zfob11 _16lm1iw1";
-var HeaderWrapperCls = "_12zfob1v _16lm1iw14 _16lm1iw1 _16lm1iwh _16lm1iwy";
+var HeaderWrapperCls = "_12zfob1v _16lm1iw16 _16lm1iw1 _16lm1iwj _16lm1iw10";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 import {
@@ -3718,9 +3745,9 @@ var useInfiniteTableState = () => {
 };
 
 // src/components/InfiniteTable/components/cell.css.ts
-var CellCls2 = "_1eexc2a5 _16lm1iwh _16lm1iwy _16lm1iwz _16lm1iw2 _16lm1iw17 _16lm1iw18";
+var CellCls2 = "_1eexc2a5 _16lm1iwj _16lm1iw10 _16lm1iw11 _16lm1iw2 _16lm1iw19 _16lm1iw1a";
 var CellClsVariants = { shifting: "_1eexc2a3", dragging: "_1eexc2a4" };
-var ColumnCellRecipe = createRuntimeFn({ defaultClassName: "_16lm1iw2 _16lm1iwm _16lm1iw7 _16lm1iwp", variantClassNames: { dragging: { false: "_1eexc2a7" }, first: { true: "_1eexc2a8", false: "_1eexc2a9" }, last: { true: "_1eexc2aa", false: "_1eexc2ab" }, groupByField: { true: "_1eexc2ac", false: "_1eexc2ad" }, firstInCategory: { true: "_1eexc2ae", false: "_1eexc2af" }, lastInCategory: { true: "_1eexc2ag", false: "_1eexc2ah" }, pinned: { start: "_1eexc2ai", end: "_1eexc2aj", false: "_1eexc2ak" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2al"], [{ pinned: "end", firstInCategory: true }, "_1eexc2am"]] });
+var ColumnCellRecipe = createRuntimeFn({ defaultClassName: "_16lm1iw2 _16lm1iwo _16lm1iw7 _16lm1iwr", variantClassNames: { dragging: { false: "_1eexc2a7" }, first: { true: "_1eexc2a8", false: "_1eexc2a9" }, last: { true: "_1eexc2aa", false: "_1eexc2ab" }, groupByField: { true: "_1eexc2ac", false: "_1eexc2ad" }, firstInCategory: { true: "_1eexc2ae", false: "_1eexc2af" }, lastInCategory: { true: "_1eexc2ag", false: "_1eexc2ah" }, pinned: { start: "_1eexc2ai", end: "_1eexc2aj", false: "_1eexc2ak" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2al"], [{ pinned: "end", firstInCategory: true }, "_1eexc2am"]] });
 var columnAlignCellStyle = { center: "_1eexc2a0", start: "_1eexc2a1", end: "_1eexc2a2" };
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
@@ -4247,7 +4274,7 @@ var MappedItems = class extends Logger {
     this.init();
   }
   renderItemAtElement(itemIndex, elementIndex, renderNode) {
-    if (false) {
+    if (true) {
       this.debug(`Render item ${itemIndex} at element ${elementIndex}`);
     }
     const currentItemIndex = this.elementIndexToItemIndex[elementIndex];
@@ -4306,7 +4333,7 @@ var ReactVirtualRenderer = class extends Logger {
       }
       const { mappedItems } = this;
       const { renderStartIndex, renderEndIndex } = range;
-      if (false) {
+      if (true) {
         this.debug(`Render range ${renderStartIndex}-${renderEndIndex}. Force ${force}`);
       }
       const renderCount = renderEndIndex === -1 ? 0 : renderEndIndex - renderStartIndex + 1;
@@ -4319,7 +4346,7 @@ var ReactVirtualRenderer = class extends Logger {
             delete this.updaters[elementIndex];
           }
           delete this.items[elementIndex];
-          if (false) {
+          if (true) {
             this.debug(`Discard element ${elementIndex}`);
           }
         });
@@ -4341,7 +4368,7 @@ var ReactVirtualRenderer = class extends Logger {
         }
         const elementIndex = elementsOutsideItemRange.pop();
         if (elementIndex == null) {
-          if (false) {
+          if (true) {
             this.error(`Cannot find element to render item ${i}`);
           }
           continue;
@@ -4363,7 +4390,7 @@ var ReactVirtualRenderer = class extends Logger {
       const itemIndex = this.mappedItems.getItemRenderedAtElementIndex(elementIndex);
       const options = this.brain.getOptions();
       if (itemIndex == null) {
-        if (false) {
+        if (true) {
           this.error(`Cannot find item for element ${elementIndex}`);
         }
         return;
@@ -4373,7 +4400,7 @@ var ReactVirtualRenderer = class extends Logger {
         return;
       }
       if (itemElement) {
-        if (false) {
+        if (true) {
           itemElement.dataset.elementIndex = elementIndex;
           itemElement.dataset.itemIndex = itemIndex;
         }
@@ -4387,6 +4414,9 @@ var ReactVirtualRenderer = class extends Logger {
       }
     };
     this.destroy = () => {
+      if (true) {
+        return;
+      }
       this.destroyed = true;
       this.mappedItems.destroy();
       this.itemDOMElements = [];
@@ -4446,7 +4476,7 @@ var ReactVirtualRenderer = class extends Logger {
       return;
     }
     this.mappedItems.renderItemAtElement(itemIndex, elementIndex, renderedNode);
-    if (false) {
+    if (true) {
       this.debug(`Render item ${itemIndex} at element ${elementIndex}`);
     }
     itemUpdater(renderedNode);
@@ -4509,7 +4539,7 @@ function InfiniteTableHeaderFn(props) {
   const renderColumn = useCallback8(({ domRef: domRef2, itemIndex: columnIndex }) => {
     const column = columns[columnIndex];
     if (!column) {
-      if (false) {
+      if (true) {
         debug3("Cannot find column to render at ", columnIndex);
       }
       return null;
@@ -4954,7 +4984,7 @@ var getScrollableClassName = (scrollable) => {
 };
 
 // src/components/VirtualScrollContainer/index.tsx
-var rootClassName6 = "Infinite-VirtualScrollContainer";
+var rootClassName6 = "InfiniteVirtualScrollContainer";
 var VirtualScrollContainer = forwardRef2(function VirtualScrollContainer2(props, ref) {
   const {
     children,
@@ -4988,8 +5018,8 @@ function SpacePlaceholderFn(props) {
   };
   return /* @__PURE__ */ createElement21("div", {
     "data-count": count,
-    "data-width": width,
-    "data-height": height,
+    "data-placeholder-width": true ? width : void 0,
+    "data-placeholder-height": true ? height : void 0,
     "data-name": "SpacePlaceholder",
     style
   });
@@ -5066,7 +5096,7 @@ var VirtualList = (props) => {
   useEffect15(() => {
     const removeOnRenderCount = virtualBrain.onRenderCountChange((renderCount) => {
       renderCountRef.current = renderCount;
-      if (false) {
+      if (true) {
         debug4.extend(mainAxis)(`Render count change ${renderCount}`);
       }
       rerender();
@@ -5094,7 +5124,7 @@ var VirtualList = (props) => {
   const domProps = __spreadProps(__spreadValues({}, restDOMProps), {
     className: join(props.className, rootClassName7, `${rootClassName7}--${mainAxis}`, VirtualListCls, VirtualListClsOrientation[mainAxis])
   });
-  if (false) {
+  if (true) {
     domProps["data-cmp-name"] = `VirtualList`;
   }
   return /* @__PURE__ */ createElement22(Fragment4, null, /* @__PURE__ */ createElement22("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement22(VirtualScrollContainer, {
@@ -5336,7 +5366,7 @@ function useRowDOMProps(props, rowProps, rowStyle, rowClassName, groupRenderStra
     const rows = parentNode.querySelectorAll(hoverSelector.join(","));
     rows.forEach((row) => row.classList.remove(InfiniteTableRowClassName__hover, RowHoverCls));
   }, [initialMouseLeave, showHoverRows]);
-  if (rowInfo.isGroupRow && groupRenderStrategy === "single-column") {
+  if (rowInfo.isGroupRow) {
     style = style || {};
     style[stripVar(ThemeVars.components.Row.groupNesting)] = rowInfo.groupNesting - 1;
   }
@@ -5408,7 +5438,7 @@ function InfiniteTableRowFn(props) {
   if (renderCellRef.current !== renderCell) {
     renderCellRef.current = renderCell;
   }
-  if (false) {
+  if (true) {
     domProps["data-cmp-name"] = "ITableRow";
   }
   return /* @__PURE__ */ createElement25("div", __spreadProps(__spreadValues({}, domProps), {
@@ -5555,10 +5585,10 @@ import { useCallback as useCallback13, useEffect as useEffect16, useRef as useRe
 
 // src/components/InfiniteTable/InfiniteCls.css.ts
 var FooterCls = "_16lm1iw1";
-var InfiniteCls = "_1yeub2v0 _16lm1iw1 _16lm1iwh _16lm1iwx _16lm1iw0";
+var InfiniteCls = "_1yeub2v0 _16lm1iw1 _16lm1iwj _16lm1iwz _16lm1iw0";
 var InfiniteClsRecipe = createRuntimeFn({ defaultClassName: "", variantClassNames: { focused: { true: "_1yeub2v2", false: "_1yeub2v3" }, focusedWithin: { true: "_1yeub2v4", false: "_1yeub2v5" }, hasPinnedStart: { true: "_1yeub2v6", false: "_1yeub2v7" }, hasPinnedEnd: { true: "_1yeub2v8", false: "_1yeub2v9" }, hasPinnedStartOverflow: { true: "_1yeub2va", false: "_1yeub2vb" }, hasPinnedEndOverflow: { true: "_1yeub2vc", false: "_1yeub2vd" } }, defaultVariants: {}, compoundVariants: [] });
 var InfiniteClsScrolling = "_1yeub2v1";
-var InfiniteClsShiftingColumns = "_16lm1iwk";
+var InfiniteClsShiftingColumns = "_16lm1iwm";
 var PinnedRowsClsVariants = { pinnedStart: "_1yeub2ve", pinnedEnd: "_1yeub2vf", overflow: "_1yeub2vg" };
 var PinnedRowsContainerClsVariants = createRuntimeFn({ defaultClassName: "", variantClassNames: { pinned: { start: "_1yeub2vh", end: "_1yeub2vi", false: "_1yeub2vj" } }, defaultVariants: {}, compoundVariants: [] });
 
@@ -5684,7 +5714,7 @@ var rootClassName10 = InfiniteListRootClassName;
 var defaultClasses = [
   willChange.transform,
   position.relative,
-  transformTranslateZero
+  transform.translateZero
 ];
 var RowListWithExternalScrolling = (props) => {
   const {
@@ -5711,7 +5741,7 @@ var RowListWithExternalScrolling = (props) => {
     const onScroll = (scrollPosition) => {
       const node = domRef.current;
       if (node) {
-        if (false) {
+        if (true) {
           const { renderStartIndex, renderEndIndex } = brain.getRenderRange();
           node.dataset.renderStartIndex = renderStartIndex;
           node.dataset.renderEndIndex = renderEndIndex;
@@ -5733,7 +5763,7 @@ var RowListWithExternalScrolling = (props) => {
     style,
     className: join(className, rootClassName10, `${rootClassName10}--vertical`, VirtualListCls, VirtualListClsOrientation.vertical, ...defaultClasses)
   };
-  if (false) {
+  if (true) {
     domProps["data-cmp-name"] = "RowListWithExternalScrolling";
   }
   return /* @__PURE__ */ createElement28("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement28(RawList, {
@@ -5959,7 +5989,7 @@ var VirtualBrain = class extends Logger {
     this.availableSize = { width: 0, height: 0 };
     this.setAvailableSize = (size) => {
       this.availableSize = size;
-      if (false) {
+      if (true) {
         this.debug("New available size %d", size[this.options.mainAxis === "vertical" ? "height" : "width"]);
       }
       this.updateRenderCount();
@@ -5996,7 +6026,7 @@ var VirtualBrain = class extends Logger {
         this.notifyTotalSizeChange();
         return;
       }
-      if (false) {
+      if (true) {
         this.debug("set renderCount to %d", renderCount);
       }
       this.renderCount = renderCount;
@@ -6070,7 +6100,7 @@ var VirtualBrain = class extends Logger {
           return;
         }
       }
-      if (false) {
+      if (true) {
         if (itemSizeChange && countChange) {
           this.debug(`Reset brain: reason itemSize changed and count changed (old ${count}, new ${newCount})`, {
             oldItemSize: itemSize,
@@ -6110,7 +6140,7 @@ var VirtualBrain = class extends Logger {
           if (cache[i] === void 0) {
             ItemIndexBag.itemIndex = i;
             let spanValue = itemSpan(ItemIndexBag);
-            if (false) {
+            if (spanValue < 1) {
               this.debug("itemSpan cannot be less than 1 - got %d for index %d", spanValue, i);
             }
             cache[i] = i;
@@ -6310,7 +6340,7 @@ var VirtualBrain = class extends Logger {
     const { renderStartIndex, renderEndIndex } = this.renderRange;
     if (renderEndIndex !== renderRange.renderEndIndex || renderStartIndex !== renderRange.renderStartIndex) {
       this.renderRange = renderRange;
-      if (false) {
+      if (true) {
         this.debug("Set renderRange to %d-%d", renderRange.renderStartIndex, renderRange.renderEndIndex);
       }
       this.notifyRenderRangeChange();
@@ -6827,7 +6857,7 @@ var useLicense = (licenseKey) => {
   const valid = useMemo11(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.0.2-canary.6"
+      version: "0.0.5"
     });
     if (!licenseKey && !valid2 && isInsideSandbox) {
       return true;
@@ -6983,8 +7013,8 @@ import {
 } from "react";
 
 // src/components/InfiniteTable/components/LoadMask.css.ts
-var LoadMaskCls = { visible: "qy58ya1 qy58ya0 _16lm1iw2 _16lm1iwp _16lm1iwr _16lm1iwv _16lm1iwt", hidden: "qy58ya2 qy58ya0 _16lm1iw2 _16lm1iwp _16lm1iwr _16lm1iwv _16lm1iwt" };
-var LoadMaskOverlayCls = "qy58ya3 _16lm1iw2 _16lm1iwp _16lm1iwr _16lm1iwv _16lm1iwt";
+var LoadMaskCls = { visible: "qy58ya1 qy58ya0 _16lm1iw2 _16lm1iwr _16lm1iwt _16lm1iwx _16lm1iwv", hidden: "qy58ya2 qy58ya0 _16lm1iw2 _16lm1iwr _16lm1iwt _16lm1iwx _16lm1iwv" };
+var LoadMaskOverlayCls = "qy58ya3 _16lm1iw2 _16lm1iwr _16lm1iwt _16lm1iwx _16lm1iwv";
 var LoadMaskTextCls = "qy58ya4";
 
 // src/components/InfiniteTable/components/LoadMask.tsx
@@ -7016,7 +7046,8 @@ var InfiniteTableRoot = getComponentStateRoot({
     rowHeight: true,
     headerHeight: true
   },
-  getParentState: () => useDataSource()
+  getParentState: () => useDataSource(),
+  debugName: "InfiniteTable"
 });
 var InfiniteTableComponent = memo13(function InfiniteTableComponent2() {
   var _a;
@@ -7094,7 +7125,7 @@ function InfiniteTableContextProvider() {
   const computed = useComputed();
   const getComputed = useLatest(computed);
   const getState = useLatest(componentState);
-  if (false) {
+  if (true) {
     globalThis.getState = getState;
     globalThis.getComputed = getComputed;
   }