npm - @infinite-table/infinite-react - Versions diffs - 0.3.0-canary.0 → 0.3.2 - Mend

@infinite-table/infinite-react 0.3.0-canary.0 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/index.js CHANGED Viewed

@@ -660,7 +660,7 @@ function debounce(fn, { wait }) {
 }
 // src/components/InfiniteTable/index.tsx
-var React26 = __toModule(require("react"));
+var React27 = __toModule(require("react"));
 // src/utils/join.ts
 var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
@@ -997,13 +997,30 @@ function AvoidReactDiffFn(props) {
 var AvoidReactDiff = React7.memo(AvoidReactDiffFn);
 // src/components/utils/buildSubscriptionCallback.tsx
-function buildSubscriptionCallback() {
+function buildSubscriptionCallback(withRaf = false) {
   let result = null;
   let fns = [];
-  const updater = (items) => {
-    result = items;
-    for (let i = 0, len = fns.length; i < len; i++) {
-      fns[i](items);
+  let rafId = null;
+  const updater = (items, callback) => {
+    if (withRaf) {
+      if (rafId != null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+      requestAnimationFrame(() => {
+        result = items;
+        rafId = null;
+        for (let i = 0, len = fns.length; i < len; i++) {
+          fns[i](items);
+        }
+        callback == null ? void 0 : callback();
+      });
+    } else {
+      result = items;
+      for (let i = 0, len = fns.length; i < len; i++) {
+        fns[i](items);
+      }
+      callback == null ? void 0 : callback();
     }
   };
   updater.get = () => result;
@@ -1044,6 +1061,19 @@ function arrayIntersection(...arrays) {
   });
 }
+// src/utils/getGlobal.ts
+function getGlobal() {
+  return globalThis;
+}
+// src/utils/raf.ts
+var raf = getGlobal().requestAnimationFrame || ((fn) => {
+  return setTimeout(fn, 16);
+});
+var cancelRaf = getGlobal().cancelAnimationFrame || ((timeoutId) => {
+  return clearTimeout(timeoutId);
+});
 // src/components/VirtualBrain/MatrixBrain.ts
 var import_binary_search = __toModule(require_binary_search());
 var getRenderRangeCellCount = (range) => {
@@ -1056,7 +1086,7 @@ var getRenderRangeCellCount = (range) => {
 };
 var ALL_DIRECTIONS = { horizontal: true, vertical: true };
 var SORT_ASC = (a, b) => a - b;
-var raf = typeof window !== "undefined" ? requestAnimationFrame : (fn) => setTimeout(fn, 0);
+var raf2 = typeof window !== "undefined" ? requestAnimationFrame : (fn) => setTimeout(fn, 0);
 var MatrixBrain = class extends Logger {
   constructor() {
     super(`MatrixBrain`);
@@ -1241,7 +1271,7 @@ var MatrixBrain = class extends Logger {
       const fns = this.onAvailableSizeChangeFns;
       const range = this.getAvailableSize();
       for (let i = 0, len = fns.length; i < len; i++) {
-        raf(() => {
+        raf2(() => {
           fns[i](range);
         });
       }
@@ -1250,7 +1280,7 @@ var MatrixBrain = class extends Logger {
       const fns = this.onRenderRangeChangeFns;
       const range = this.getRenderRange();
       for (let i = 0, len = fns.length; i < len; i++) {
-        raf(() => {
+        raf2(() => {
           fns[i](range);
         });
       }
@@ -1259,7 +1289,7 @@ var MatrixBrain = class extends Logger {
       const fns = this.onVerticalRenderRangeChangeFns;
       const range = this.verticalRenderRange;
       for (let i = 0, len = fns.length; i < len; i++) {
-        raf(() => {
+        raf2(() => {
           fns[i]([range.startIndex, range.endIndex]);
         });
       }
@@ -1268,7 +1298,7 @@ var MatrixBrain = class extends Logger {
       const fns = this.onHorizontalRenderRangeChangeFns;
       const range = this.horizontalRenderRange;
       for (let i = 0, len = fns.length; i < len; i++) {
-        raf(() => {
+        raf2(() => {
           fns[i]([range.startIndex, range.endIndex]);
         });
       }
@@ -1968,7 +1998,7 @@ var MatrixBrain = class extends Logger {
     };
     const fns = this.onRenderCountChangeFns;
     for (let i = 0, len = fns.length; i < len; i++) {
-      raf(() => {
+      raf2(() => {
         fns[i](renderCount);
       });
     }
@@ -2064,6 +2094,20 @@ var DeepMap = class {
     return clone;
   }
   getValuesStartingWith(keys) {
+    const result = [];
+    this.getStartingWith(keys, (_keys, value) => {
+      result.push(value);
+    });
+    return result;
+  }
+  getKeysStartingWith(keys) {
+    const result = [];
+    this.getStartingWith(keys, (keys2) => {
+      result.push(keys2);
+    });
+    return result;
+  }
+  getStartingWith(keys, fn) {
     let currentMap = this.map;
     let pair;
     if (!keys.length) {
@@ -2073,16 +2117,37 @@ var DeepMap = class {
       const key = keys[i];
       pair = currentMap.get(key);
       if (!pair || !pair.map) {
-        return [];
+        return;
       }
       currentMap = pair.map;
     }
-    const result = pair && pair.value !== void 0 ? [pair.value] : [];
-    this.visitWithNext(keys, (value, _key, _i, next) => {
-      result.push(value);
+    if (pair && pair.value !== void 0) {
+      fn(keys, pair.value);
+    }
+    this.visitWithNext(keys, (value, keys2, _i, next) => {
+      fn(keys2, value);
       next == null ? void 0 : next();
     }, currentMap);
-    return result;
+  }
+  getDirectChildrenSizeFor(keys) {
+    var _a;
+    let currentMap = this.map;
+    if (!keys.length) {
+      keys = [this.emptyKey];
+    }
+    for (let i = 0, len = keys.length; i < len; i++) {
+      const key = keys[i];
+      const last = i === len - 1;
+      const pair = currentMap.get(key);
+      if (!pair || !pair.map) {
+        return 0;
+      }
+      currentMap = pair.map;
+      if (last) {
+        return (_a = currentMap == null ? void 0 : currentMap.size) != null ? _a : 0;
+      }
+    }
+    return 0;
   }
   set(keys, value) {
     let currentMap = this.map;
@@ -2152,7 +2217,7 @@ var DeepMap = class {
     } else {
       keys = [...keys];
     }
-    let maps = [currentMap];
+    const maps = [currentMap];
     let result = false;
     for (let i = 0, len = keys.length; i < len; i++) {
       const key = keys[i];
@@ -2441,6 +2506,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
     this.updaters = [];
     this.items = [];
     this.currentHoveredRow = -1;
+    this.hoverRowUpdatesInProgress = new Map();
     this.getExtraSpanCellsForRange = (range) => {
       const { start, end } = range;
       const [startRow, startCol] = start;
@@ -2719,7 +2785,29 @@ var ReactHeadlessTableRenderer = class extends Logger {
         }
       });
     };
-    this.updateElementPosition = (elementIndex) => {
+    this.updateHoverClassNamesForRow = (rowIndex) => {
+      if (this.scrolling) {
+        return;
+      }
+      if (this.hoverRowUpdatesInProgress.has(rowIndex)) {
+        return;
+      }
+      this.hoverRowUpdatesInProgress.set(rowIndex, true);
+      const checkHoverClass = () => {
+        if (this.currentHoveredRow != -1 && !this.scrolling) {
+          if (this.currentHoveredRow === rowIndex) {
+            this.addHoverClass(rowIndex);
+          } else {
+            this.removeHoverClass(rowIndex);
+          }
+        }
+      };
+      raf(() => {
+        checkHoverClass();
+        this.hoverRowUpdatesInProgress.delete(rowIndex);
+      });
+    };
+    this.updateElementPosition = (elementIndex, options) => {
       const itemElement = this.itemDOMElements[elementIndex];
       const cell = this.mappedCells.getRenderedCellAtElement(elementIndex);
       if (cell == null) {
@@ -2735,17 +2823,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       }
       const { x, y } = itemPosition;
       if (itemElement) {
-        if (this.currentHoveredRow != -1 && !this.scrolling) {
-          if (this.currentHoveredRow === rowIndex) {
-            this.cellHoverClassNames.forEach((cls) => {
-              itemElement.classList.add(cls);
-            });
-          } else {
-            this.cellHoverClassNames.forEach((cls) => {
-              itemElement.classList.remove(cls);
-            });
-          }
-        }
+        this.updateHoverClassNamesForRow(rowIndex);
         if (true) {
           itemElement.dataset.rowIndex = rowIndex;
           itemElement.dataset.colIndex = colIndex;
@@ -2754,7 +2832,8 @@ var ReactHeadlessTableRenderer = class extends Logger {
           itemElement.style.transform = `translate3d(${x}px, ${y}px, 0)`;
           itemElement.style.willChange = "transform";
           itemElement.style.backfaceVisibility = "hidden";
-          itemElement.style.zIndex = "auto";
+          const hidden = options ? options.hidden : !!this.isCellCovered(rowIndex, colIndex);
+          itemElement.style.zIndex = hidden ? "-1" : "auto";
         } else {
           itemElement.style.display = "";
           itemElement.style.left = `${x}px`;
@@ -2894,6 +2973,8 @@ var ReactHeadlessTableRenderer = class extends Logger {
       this.destroyed = true;
       this.reset();
       this.onDestroy();
+      this.hoverRowUpdatesInProgress.clear();
+      this.hoverRowUpdatesInProgress = null;
       this.brain = null;
       this.mappedCells = null;
     };
@@ -2902,7 +2983,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
     const removeOnScroll = brain.onScroll(this.adjustFixedElementsOnScroll);
     const removeOnSizeChange = brain.onAvailableSizeChange(() => {
       this.adjustFixedElementsOnScroll();
-      requestAnimationFrame(() => {
+      raf(() => {
         this.adjustFixedElementsOnScroll();
       });
     });
@@ -2947,6 +3028,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
     const heightWithRowspan = rowspan === 1 ? height : this.brain.getRowHeightWithSpan(rowIndex, colIndex, rowspan);
     const widthWithColspan = colspan === 1 ? width : this.brain.getColWidthWithSpan(rowIndex, colIndex, colspan);
     const { row: rowFixed, col: colFixed } = this.isCellFixed(rowIndex, colIndex);
+    const hidden = !!covered;
     const renderedNode = renderCell({
       rowIndex,
       colIndex,
@@ -2956,7 +3038,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       colspan,
       rowFixed,
       colFixed,
-      hidden: !!covered,
+      hidden,
       heightWithRowspan,
       widthWithColspan,
       onMouseEnter: this.onMouseEnter.bind(null, rowIndex),
@@ -2973,7 +3055,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       this.debug(`Render cell ${rowIndex},${colIndex} at element ${elementIndex}`);
     }
     itemUpdater(renderedNode);
-    this.updateElementPosition(elementIndex);
+    this.updateElementPosition(elementIndex, { hidden, rowspan, colspan });
     return;
   }
   reset() {
@@ -3438,19 +3520,19 @@ var useInternalProps = () => {
 };
 // src/components/InfiniteTable/utilities.css.ts
-var alignItems = { center: "_16lm1iw11", stretch: "_16lm1iw12" };
-var cssEllipsisClassName = "_16lm1iw1a _16lm1iw1b _16lm1iw16";
-var cursor = { pointer: "_16lm1iwb" };
-var display = { flex: "_16lm1iwj", block: "_16lm1iwk", inlineBlock: "_16lm1iwl" };
-var flex = { "1": "_16lm1iwc", none: "_16lm1iwd" };
-var justifyContent = { center: "_16lm1iw13", start: "_16lm1iw14", end: "_16lm1iw15" };
-var left = { "0": "_16lm1iwt", "100%": "_16lm1iwu" };
-var overflow = { hidden: "_16lm1iw16", auto: "_16lm1iw17", visible: "_16lm1iw18" };
+var alignItems = { center: "_16lm1iw13", stretch: "_16lm1iw14" };
+var cssEllipsisClassName = "_16lm1iw1c _16lm1iw1d _16lm1iw18";
+var cursor = { pointer: "_16lm1iwd" };
+var display = { flex: "_16lm1iwl", block: "_16lm1iwm", inlineBlock: "_16lm1iwn" };
+var flex = { "1": "_16lm1iwe", none: "_16lm1iwf" };
+var justifyContent = { center: "_16lm1iw15", start: "_16lm1iw16", end: "_16lm1iw17" };
+var left = { "0": "_16lm1iwv", "100%": "_16lm1iww" };
+var overflow = { hidden: "_16lm1iw18", auto: "_16lm1iw19", visible: "_16lm1iw1a" };
 var position = { relative: "_16lm1iw1", absolute: "_16lm1iw2", sticky: "_16lm1iw3", fixed: "_16lm1iw4" };
-var top = { "0": "_16lm1iwr", "100%": "_16lm1iws" };
-var transformTranslateZero = "_16lm1iw8";
-var userSelect = { none: "_16lm1iwm" };
-var zIndex = { "1": "_16lm1iwe", "10": "_16lm1iwf", "1000": "_16lm1iwg", "10000": "_16lm1iwh", "100000": "_16lm1iwi" };
+var top = { "0": "_16lm1iwt", "100%": "_16lm1iwu" };
+var transformTranslateZero = "_16lm1iwa";
+var userSelect = { none: "_16lm1iwo" };
+var zIndex = { "1": "_16lm1iwg", "10": "_16lm1iwh", "1000": "_16lm1iwi", "10000": "_16lm1iwj", "100000": "_16lm1iwk" };
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
 var InfiniteTableBody = React12.forwardRef(function InfiniteTableBody2(props, ref) {
@@ -3493,7 +3575,7 @@ var useInfiniteTableState = () => {
 // src/components/InfiniteTable/components/cell.css.ts
 var import_createRuntimeFn = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var CellClsVariants = { shifting: "_1eexc2a3", dragging: "_1eexc2a4" };
-var ColumnCellCls = "_1eexc2a5 _16lm1iwj _16lm1iw10 _16lm1iw11 _16lm1iw2 _16lm1iw19 _16lm1iw1a";
+var ColumnCellCls = "_1eexc2a5 _16lm1iwl _16lm1iw12 _16lm1iw13 _16lm1iw2 _16lm1iw1b _16lm1iw1c";
 var ColumnCellRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1eexc2a7", variantClassNames: { dragging: { false: "_1eexc2a8", true: "_1eexc2a9" }, zebra: { false: "_1eexc2aa", even: "_1eexc2ab", odd: "_1eexc2ac" }, first: { true: "_1eexc2ad", false: "_1eexc2ae" }, last: { true: "_1eexc2af", false: "_1eexc2ag" }, groupByField: { true: "_1eexc2ah", false: "_1eexc2ai" }, firstInCategory: { true: "_1eexc2aj", false: "_1eexc2ak" }, lastInCategory: { true: "_1eexc2al", false: "_1eexc2am" }, pinned: { start: "_1eexc2an", end: "_1eexc2ao", false: "_1eexc2ap" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2aq"], [{ pinned: "end", firstInCategory: true }, "_1eexc2ar"]] });
 var columnAlignCellStyle = { center: "_1eexc2a0", start: "_1eexc2a1", end: "_1eexc2a2" };
@@ -3835,18 +3917,19 @@ function SortIcon(props) {
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
 var import_createRuntimeFn2 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
-var CellCls = "_1eexc2a5 _16lm1iwj _16lm1iw10 _16lm1iw11 _16lm1iw2 _16lm1iw19 _16lm1iw1a";
+var CellCls = "_1eexc2a5 _16lm1iwl _16lm1iw12 _16lm1iw13 _16lm1iw2 _16lm1iw1b _16lm1iw1c";
 var HeaderCellProxy = "_12zfob10";
 var HeaderCellRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob1d", variantClassNames: { zebra: { false: "_12zfob1e", even: "_12zfob1f", odd: "_12zfob1g" }, dragging: { true: "_12zfob1h", false: "_12zfob1i" }, first: { true: "_12zfob1j", false: "_12zfob1k" }, last: { true: "_12zfob1l", false: "_12zfob1m" }, groupByField: { true: "_12zfob1n", false: "_12zfob1o" }, firstInCategory: { true: "_12zfob1p", false: "_12zfob1q" }, lastInCategory: { true: "_12zfob1r", false: "_12zfob1s" }, pinned: { start: "_12zfob1t", end: "_12zfob1u", false: "_12zfob1v" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob1w"], [{ pinned: "end", firstInCategory: true }, "_12zfob1x"], [{ pinned: false, lastInCategory: true }, "_12zfob1y"]] });
-var HeaderClsRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob13 _16lm1iw10 _16lm1iw2", variantClassNames: { pinned: { start: "_12zfob14", end: "_12zfob15", false: "_12zfob16" }, virtualized: { true: "_12zfob17", false: "_12zfob18" }, overflow: { true: "_12zfob19", false: "_12zfob1a" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1b"], [{ overflow: true, pinned: "end" }, "_12zfob1c"]] });
-var HeaderGroupCls = "_12zfob110 _16lm1iwj _16lm1iw10 _16lm1iw11";
+var HeaderClsRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob13 _16lm1iw12 _16lm1iw2", variantClassNames: { pinned: { start: "_12zfob14", end: "_12zfob15", false: "_12zfob16" }, virtualized: { true: "_12zfob17", false: "_12zfob18" }, overflow: { true: "_12zfob19", false: "_12zfob1a" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1b"], [{ overflow: true, pinned: "end" }, "_12zfob1c"]] });
+var HeaderGroupCls = "_12zfob110 _16lm1iwl _16lm1iw12 _16lm1iw13";
 var HeaderScrollbarPlaceholderCls = "_12zfob12 _16lm1iw2";
 var HeaderSortIconCls = "_12zfob11 _16lm1iw1";
-var HeaderWrapperCls = "_12zfob1z _16lm1iw16 _16lm1iw1 _16lm1iwj _16lm1iw10";
+var HeaderWrapperCls = "_12zfob1z _16lm1iw18 _16lm1iw1 _16lm1iwl _16lm1iw12";
 // src/components/InfiniteTable/utils/RenderHookComponent.tsx
 function RenderHookComponent(props) {
-  return props.render(props.renderParam);
+  var _a;
+  return (_a = props.render(props.renderParam)) != null ? _a : null;
 }
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
@@ -3952,11 +4035,6 @@ function useInfiniteHeaderCell() {
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
 var React18 = __toModule(require("react"));
-// src/utils/getGlobal.ts
-function getGlobal() {
-  return globalThis;
-}
 // src/components/utils/getScrollbarWidth.ts
 var scrollbarWidth;
 function getScrollbarWidth() {
@@ -4298,9 +4376,9 @@ var ThemeVars = { color: { accent: "var(--infinite-accent-color)", color: "var(-
 // src/components/InfiniteTable/InfiniteCls.css.ts
 var import_createRuntimeFn3 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var FooterCls = "_16lm1iw1";
-var InfiniteCls = "_1yeub2v0 _16lm1iw1 _16lm1iwj _16lm1iwz _16lm1iw0";
+var InfiniteCls = "_1yeub2v0 _16lm1iw1 _16lm1iwl _16lm1iw11 _16lm1iw0";
 var InfiniteClsRecipe = (0, import_createRuntimeFn3.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 InfiniteClsShiftingColumns = "_16lm1iwm";
+var InfiniteClsShiftingColumns = "_16lm1iwo";
 var PinnedRowsContainerClsVariants = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "", variantClassNames: { pinned: { start: "_1yeub2vh", end: "_1yeub2vi", false: "_1yeub2vj" } }, defaultVariants: {}, compoundVariants: [] });
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
@@ -4384,6 +4462,8 @@ function InfiniteTableColumnCellFn(props) {
   var _a;
   const {
     rowInfo,
+    rowStyle,
+    rowClassName,
     width,
     column,
     onMouseLeave,
@@ -4402,40 +4482,51 @@ function InfiniteTableColumnCellFn(props) {
       ref: domRef
     }, "no column");
   }
-  const { data, isGroupRow, groupBy } = rowInfo;
+  const { data, isGroupRow, dataSourceHasGrouping } = rowInfo;
+  const groupBy = dataSourceHasGrouping ? rowInfo.groupBy : void 0;
   const groupRowInfo = null;
   let value = isGroupRow && groupBy && column.groupByField ? rowInfo.value : isColumnWithField(column) ? data == null ? void 0 : data[column.field] : null;
   if (column.valueGetter) {
     value = column.valueGetter(isGroupRow ? {
       data: rowInfo.data,
+      isGroupRow,
       rowInfo
     } : {
       data: rowInfo.data,
+      isGroupRow,
       rowInfo
     });
   }
   const { componentState: computedDataSource } = useDataSourceContextValue();
   const rest = rowInfo.isGroupRow ? {
     rowInfo,
+    isGroupRow: rowInfo.isGroupRow,
     data: rowInfo.data
   } : {
     rowInfo,
+    isGroupRow: rowInfo.isGroupRow,
     data: rowInfo.data
   };
   const stylingRenderParam = __spreadValues({
     value,
     column
   }, rest);
-  let renderValue = value;
+  const renderValue = value;
   const renderParam = __spreadProps(__spreadValues({
     value,
     column,
     domRef,
     groupRowInfo
   }, rest), {
+    isGroupRow,
     rowIndex,
     toggleGroupRow,
-    toggleCurrentGroupRow: () => toggleGroupRow(rowInfo.groupKeys),
+    toggleCurrentGroupRow: () => {
+      if (!rowInfo.isGroupRow) {
+        return;
+      }
+      toggleGroupRow(rowInfo.groupKeys);
+    },
     groupBy: computedDataSource.groupBy,
     pivotBy: computedDataSource.pivotBy
   });
@@ -4452,8 +4543,16 @@ function InfiniteTableColumnCellFn(props) {
     }
     return renderValue;
   };
+  const rowPropsAndStyleArgs = __spreadProps(__spreadValues({}, rest), {
+    rowIndex
+  });
+  const rowComputedClassName = typeof rowClassName === "function" ? rowClassName(rowPropsAndStyleArgs) : rowClassName;
   const colClassName = column.className ? typeof column.className === "function" ? column.className(stylingRenderParam) : column.className : void 0;
-  const style = column.style ? typeof column.style === "function" ? column.style(stylingRenderParam) || {} : __spreadValues({}, column.style) : {};
+  let style;
+  if (rowStyle) {
+    style = typeof rowStyle === "function" ? __spreadValues(__spreadValues({}, style), rowStyle(rowPropsAndStyleArgs)) : __spreadValues(__spreadValues({}, style), rowStyle);
+  }
+  style = column.style ? typeof column.style === "function" ? __spreadValues(__spreadValues({}, style), column.style(stylingRenderParam) || {}) : __spreadValues(__spreadValues({}, style), column.style) : style || {};
   style.width = width;
   style.height = rowHeight;
   const odd = (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
@@ -4469,7 +4568,7 @@ function InfiniteTableColumnCellFn(props) {
     onMouseLeave,
     onMouseEnter,
     cssEllipsis: (_a = column.cssEllipsis) != null ? _a : true,
-    className: join(useCellClassName(column, [InfiniteTableColumnCellClassName, InfiniteTableCellClassName], ColumnCellRecipe, { dragging: false, zebra }), colClassName),
+    className: join(useCellClassName(column, [InfiniteTableColumnCellClassName, InfiniteTableCellClassName], ColumnCellRecipe, { dragging: false, zebra }), colClassName, rowComputedClassName),
     renderChildren
   };
   const ContextProvider = InfiniteTableColumnCellContext.Provider;
@@ -4493,8 +4592,8 @@ var RowHoverCls = "_7pupv01";
 var React21 = __toModule(require("react"));
 // src/components/InfiniteTable/components/LoadMask.css.ts
-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 LoadMaskCls = { visible: "qy58ya1 qy58ya0 _16lm1iw2 _16lm1iwt _16lm1iwv _16lm1iwz _16lm1iwx", hidden: "qy58ya2 qy58ya0 _16lm1iw2 _16lm1iwt _16lm1iwv _16lm1iwz _16lm1iwx" };
+var LoadMaskOverlayCls = "qy58ya3 _16lm1iw2 _16lm1iwt _16lm1iwv _16lm1iwz _16lm1iwx";
 var LoadMaskTextCls = "qy58ya4";
 // src/components/InfiniteTable/components/LoadMask.tsx
@@ -4523,7 +4622,6 @@ function getColumnContentMaxWidths(domRef, options) {
   const measuredMaxWidths = {};
   const computedPaddingsForColumns = {};
   if (match && match.length) {
-    console.log(match);
     match.forEach((content) => {
       const cell = content.parentElement;
       const isHeader = cell.matches(`.${InfiniteTableHeaderCellClassName}`);
@@ -4700,6 +4798,8 @@ function useCellRendering(param) {
     groupRenderStrategy,
     brain,
     showZebraRows,
+    rowStyle,
+    rowClassName,
     onScrollToTop,
     onScrollToBottom,
     scrollToBottomOffset
@@ -4794,7 +4894,9 @@ function useCellRendering(param) {
       onMouseLeave,
       domRef,
       width,
-      column
+      column,
+      rowStyle,
+      rowClassName
     };
     return /* @__PURE__ */ import_react24.default.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
   }, [
@@ -4804,7 +4906,9 @@ function useCellRendering(param) {
     groupRenderStrategy,
     toggleGroupRow,
     showZebraRows,
-    repaintId
+    repaintId,
+    rowStyle,
+    rowClassName
   ]);
   return {
     renderCell
@@ -4960,6 +5064,9 @@ function useColumnRowspan(computedVisibleColumns) {
     return colsWithRowspan.length ? ({ rowIndex, colIndex }) => {
       const dataArray = getDataSourceState().dataArray;
       const rowInfo = dataArray[rowIndex];
+      if (!rowInfo) {
+        return 1;
+      }
       const data = rowInfo.data;
       const column = computedVisibleColumns[colIndex];
       if (!column || !column.rowspan) {
@@ -4995,7 +5102,20 @@ function useColumnSizeFn(columns) {
 var import_react34 = __toModule(require("react"));
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
-var React24 = __toModule(require("react"));
+var React25 = __toModule(require("react"));
+// src/utils/stripVar.ts
+function stripVar(cssVariableWithVarString) {
+  return cssVariableWithVarString.slice(4, -1);
+}
+// src/components/DataSource/state/rowInfoStatus.ts
+var showLoadingIcon = (rowInfo) => {
+  if (rowInfo.dataSourceHasGrouping) {
+    return rowInfo.isGroupRow ? rowInfo.childrenLoading || !rowInfo.selfLoaded : !rowInfo.selfLoaded;
+  }
+  return !rowInfo.selfLoaded;
+};
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
 var React23 = __toModule(require("react"));
@@ -5003,8 +5123,8 @@ var import_react29 = __toModule(require("react"));
 // src/components/InfiniteTable/components/icons/ExpanderIcon.css.ts
 var import_createRuntimeFn5 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
-var ExpanderIconCls = "_16lm1iw6 _16lm1iwd _16lm1iwb";
-var ExpanderIconClsVariants = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "", variantClassNames: { expanded: { true: "_16lm1iwa", false: "_198z9782" } }, defaultVariants: {}, compoundVariants: [] });
+var ExpanderIconCls = "_16lm1iw6 _16lm1iwf _16lm1iwd";
+var ExpanderIconClsVariants = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "", variantClassNames: { expanded: { true: "_16lm1iwc", false: "_198z9782" } }, defaultVariants: {}, compoundVariants: [] });
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
 function ExpanderIcon(props) {
@@ -5039,6 +5159,43 @@ function ExpanderIcon(props) {
   }));
 }
+// src/components/InfiniteTable/components/icons/LoadingIcon.tsx
+var React24 = __toModule(require("react"));
+// src/components/InfiniteTable/components/icons/LoadingIcon.css.ts
+var LoadingIconCls = "_16lm1iw8 _16lm1iwf _16lm1iwd";
+// src/components/InfiniteTable/components/icons/LoadingIcon.tsx
+var LoadingIcon = (props) => {
+  return /* @__PURE__ */ React24.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    style: {
+      margin: "auto",
+      display: "block",
+      shapeRendering: "auto"
+    },
+    width: "24px",
+    height: "24px",
+    viewBox: "0 0 100 100",
+    preserveAspectRatio: "xMidYMid",
+    className: join(props.className, LoadingIconCls, "InfiniteIcon", "InfiniteIcon-loading")
+  }, /* @__PURE__ */ React24.createElement("circle", {
+    cx: "50",
+    cy: "50",
+    fill: "none",
+    strokeWidth: "10",
+    r: "35",
+    strokeDasharray: "164.93361431346415 56.97787143782138"
+  }, /* @__PURE__ */ React24.createElement("animateTransform", {
+    attributeName: "transform",
+    type: "rotate",
+    repeatCount: "indefinite",
+    dur: "1s",
+    values: "0 50 50;360 50 50",
+    keyTimes: "0;1"
+  })));
+};
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
 function getGroupColumnRender({
   groupIndexForColumn,
@@ -5049,12 +5206,12 @@ function getGroupColumnRender({
     var _a, _b, _c;
     let { value, rowInfo, column, groupBy, pivotBy } = renderOptions;
     if (column.renderValue) {
-      value = /* @__PURE__ */ React24.createElement(RenderHookComponent, {
+      value = /* @__PURE__ */ React25.createElement(RenderHookComponent, {
         render: column.renderValue,
         renderParam: renderOptions
       });
     }
-    let groupRowInfo = groupRenderStrategy !== "inline" ? rowInfo : ((_a = rowInfo.parents) == null ? void 0 : _a[groupIndexForColumn]) || rowInfo;
+    const groupRowInfo = groupRenderStrategy !== "inline" ? rowInfo : rowInfo.isGroupRow && ((_a = rowInfo.parents) == null ? void 0 : _a[groupIndexForColumn]) || rowInfo;
     if (!groupRowInfo) {
       return null;
     }
@@ -5077,31 +5234,30 @@ function getGroupColumnRender({
     }
     let icon = null;
     const showExpanderIcon = pivotBy ? (((_b = groupRowInfo.groupKeys) == null ? void 0 : _b.length) || 0) < (groupBy == null ? void 0 : groupBy.length) : (((_c = groupRowInfo.groupKeys) == null ? void 0 : _c.length) || 0) <= (groupBy == null ? void 0 : groupBy.length);
-    if (showExpanderIcon) {
-      const defaultIcon = /* @__PURE__ */ React24.createElement(ExpanderIcon, {
+    const isLoading = showLoadingIcon(groupRowInfo);
+    if (isLoading) {
+      icon = /* @__PURE__ */ React25.createElement(LoadingIcon, null);
+    } else if (showExpanderIcon) {
+      const defaultIcon = /* @__PURE__ */ React25.createElement(ExpanderIcon, {
         expanded: !collapsed,
         onChange: () => {
           toggleGroupRow(groupKeys);
         }
       });
-      icon = column.renderGroupIcon ? /* @__PURE__ */ React24.createElement(RenderHookComponent, {
+      icon = column.renderGroupIcon ? /* @__PURE__ */ React25.createElement(RenderHookComponent, {
         render: column.renderGroupIcon,
         renderParam: Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)
       }) : defaultIcon;
     }
-    return /* @__PURE__ */ React24.createElement("div", {
+    return /* @__PURE__ */ React25.createElement("div", {
       className: join(display.flex, alignItems.center)
-    }, icon, /* @__PURE__ */ React24.createElement("div", {
+    }, icon, /* @__PURE__ */ React25.createElement("div", {
       className: cssEllipsisClassName
     }, value != null ? value : null));
   };
 }
 function getColumnForGroupBy(options, toggleGroupRow, groupColumnFromProps) {
-  const {
-    groupByForColumn,
-    groupIndexForColumn,
-    groupRenderStrategy
-  } = options;
+  const { groupByForColumn, groupIndexForColumn, groupRenderStrategy } = options;
   let generatedGroupColumn = __spreadValues({
     header: `Group by ${groupByForColumn.field}`,
     groupByField: groupByForColumn.field,
@@ -5126,30 +5282,40 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
     header: `Group`,
     groupByField: options.groupBy.map((g) => g.field),
     sortable: false,
+    style: ({ rowInfo }) => ({
+      [stripVar(ThemeVars.components.Row.groupNesting)]: rowInfo.isGroupRow ? rowInfo.groupNesting - 1 : 0
+    }),
     render: (renderOptions) => {
       var _a, _b;
       let { value, rowInfo, column, groupBy, pivotBy } = renderOptions;
-      if (!rowInfo.isGroupRow) {
-        return null;
-      }
       if (column.renderValue) {
         value = column.renderValue(renderOptions);
       }
-      const collapsed = rowInfo.collapsed;
+      const collapsed = rowInfo.isGroupRow ? rowInfo.collapsed : false;
       let icon = null;
-      const showExpanderIcon = pivotBy ? (((_a = rowInfo.groupKeys) == null ? void 0 : _a.length) || 0) < (groupBy == null ? void 0 : groupBy.length) : (((_b = rowInfo.groupKeys) == null ? void 0 : _b.length) || 0) <= (groupBy == null ? void 0 : groupBy.length);
-      if (showExpanderIcon) {
-        const defaultIcon = /* @__PURE__ */ React24.createElement(ExpanderIcon, {
+      const showExpanderIcon = rowInfo.isGroupRow ? pivotBy ? (((_a = rowInfo.groupKeys) == null ? void 0 : _a.length) || 0) < (groupBy == null ? void 0 : groupBy.length) : (((_b = rowInfo.groupKeys) == null ? void 0 : _b.length) || 0) <= (groupBy == null ? void 0 : groupBy.length) : false;
+      const isLoading = showLoadingIcon(rowInfo);
+      if (isLoading) {
+        icon = /* @__PURE__ */ React25.createElement(LoadingIcon, null);
+      } else if (showExpanderIcon) {
+        const defaultIcon = /* @__PURE__ */ React25.createElement(ExpanderIcon, {
           expanded: !collapsed,
           onChange: () => {
+            if (!rowInfo.isGroupRow) {
+              return;
+            }
             toggleGroupRow(rowInfo.groupKeys);
           }
         });
-        icon = column.renderGroupIcon ? column.renderGroupIcon(Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)) : defaultIcon;
+        icon = defaultIcon;
+        if (column.renderGroupIcon) {
+          const renderParam = Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions);
+          icon = column.renderGroupIcon(renderParam);
+        }
       }
-      return /* @__PURE__ */ React24.createElement("div", {
+      return /* @__PURE__ */ React25.createElement("div", {
         className: join(display.flex, alignItems.center, GroupRowExpanderCls)
-      }, icon, /* @__PURE__ */ React24.createElement("div", {
+      }, icon, /* @__PURE__ */ React25.createElement("div", {
         className: cssEllipsisClassName
       }, value != null ? value : null));
     }
@@ -5188,86 +5354,6 @@ function useEffectWithRaf(fn, deps) {
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
 var import_react33 = __toModule(require("react"));
-// src/components/DataSource/index.tsx
-var React25 = __toModule(require("react"));
-// src/utils/multisort/sortTypes.ts
-var numberComparator = function(first, second) {
-  return first - second;
-};
-var stringComparator = function(first, second) {
-  first = `${first}`;
-  second = `${second}`;
-  return first.localeCompare(second);
-};
-var sortTypes = {
-  number: numberComparator,
-  string: stringComparator
-};
-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/components/DataSource/privateHooks/useLoadData.ts
-var import_react32 = __toModule(require("react"));
 // src/utils/groupAndPivot/index.ts
 var LAZY_ROOT_KEY_FOR_GROUPS = "____root____";
 var NOT_LOADED_YET_KEY_PREFIX = "____not_loaded_yet____";
@@ -5279,7 +5365,7 @@ function initReducers(reducers) {
     return {};
   }
   const result = {};
-  for (let key in reducers)
+  for (const key in reducers)
     if (reducers.hasOwnProperty(key)) {
       result[key] = reducers[key].initialValue;
     }
@@ -5290,7 +5376,7 @@ function computeReducersFor(data, reducers, reducerResults) {
   if (!reducers || !Object.keys(reducers).length) {
     return;
   }
-  for (let key in reducers)
+  for (const key in reducers)
     if (reducers.hasOwnProperty(key)) {
       const reducer = reducers[key];
       if (typeof reducer.reducer !== "function") {
@@ -5312,7 +5398,7 @@ function lazyGroup(groupParams, rootData) {
   function traverseValues(pivotDeepMap, container, pivot2, pivotIndex = 0, currentPivotKeys2 = []) {
     const last = !pivot2.length || pivotIndex === pivot2.length - 1;
     const values = container[(mappings == null ? void 0 : mappings.values) || "values"] || {};
-    for (var k in values)
+    for (const k in values)
       if (values.hasOwnProperty(k)) {
         const pivotKey = k;
         currentPivotKeys2.push(pivotKey);
@@ -5328,12 +5414,12 @@ function lazyGroup(groupParams, rootData) {
       }
   }
   const topLevelPivotColumns = pivot ? new DeepMap() : void 0;
-  let currentPivotKeys = [];
+  const currentPivotKeys = [];
   const initialReducerValue = initReducers(reducers);
   const globalReducerResults = __spreadValues({}, initialReducerValue);
   rootData.visitDepthFirst((lazyGroupRowInfo, keys, _index, next) => {
     const [_rootKey, ...currentGroupKeys] = keys;
-    const dataArray = lazyGroupRowInfo.items;
+    const dataArray = lazyGroupRowInfo.children;
     if (currentGroupKeys.length == groupBy.length && groupBy.length) {
       const deepMapGroupValue = deepMap.get(currentGroupKeys);
       if (deepMapGroupValue) {
@@ -5341,11 +5427,23 @@ function lazyGroup(groupParams, rootData) {
       }
       return next == null ? void 0 : next();
     }
+    if (lazyGroupRowInfo) {
+      const current = deepMap.get(currentGroupKeys);
+      if (current) {
+        current.cache = lazyGroupRowInfo.cache;
+        current.childrenLoading = lazyGroupRowInfo.childrenLoading;
+        current.childrenAvailable = lazyGroupRowInfo.childrenAvailable;
+        current.error = lazyGroupRowInfo.error;
+      }
+    }
     for (let i = 0, len = dataArray.length; i < len; i++) {
       if (!dataArray[i]) {
         const deepMapGroupValue2 = {
           items: [],
-          reducerResults: {}
+          reducerResults: {},
+          cache: false,
+          childrenLoading: false,
+          childrenAvailable: false
         };
         deepMap.set([
           ...currentGroupKeys,
@@ -5355,14 +5453,15 @@ function lazyGroup(groupParams, rootData) {
       }
       const dataObject = dataArray[i].data;
       const dataKeys = dataArray[i].keys;
-      let item = dataObject;
       if (dataKeys.length) {
-        const { field: groupByProperty } = groupBy[dataKeys.length - 1];
-        const key = item[groupByProperty];
+        const key = dataKeys[dataKeys.length - 1];
         currentGroupKeys.push(key);
       }
       const deepMapGroupValue = {
         items: [],
+        cache: false,
+        childrenLoading: false,
+        childrenAvailable: false,
         commonData: dataObject,
         reducerResults: dataArray[i].aggregations || {}
       };
@@ -5431,13 +5530,16 @@ function group(groupParams, data) {
   const groupByLength = groupBy.length;
   const topLevelPivotColumns = pivot ? new DeepMap() : void 0;
   const deepMap = new DeepMap();
-  let currentGroupKeys = [];
-  let currentPivotKeys = [];
+  const currentGroupKeys = [];
+  const currentPivotKeys = [];
   const initialReducerValue = initReducers(reducers);
   const globalReducerResults = __spreadValues({}, initialReducerValue);
   if (!groupByLength) {
     const deepMapGroupValue = {
       items: [],
+      cache: false,
+      childrenLoading: false,
+      childrenAvailable: false,
       reducerResults: __spreadValues({}, initialReducerValue)
     };
     if (pivot) {
@@ -5446,7 +5548,7 @@ function group(groupParams, data) {
     deepMap.set(currentGroupKeys, deepMapGroupValue);
   }
   for (let i = 0, len = data.length; i < len; i++) {
-    let item = data[i];
+    const item = data[i];
     for (let groupByIndex = 0; groupByIndex < groupByLength; groupByIndex++) {
       const { field: groupByProperty, toKey: groupToKey } = groupBy[groupByIndex];
       const key = (groupToKey || defaultToKey)(item[groupByProperty], item);
@@ -5454,6 +5556,9 @@ function group(groupParams, data) {
       if (!deepMap.has(currentGroupKeys)) {
         const deepMapGroupValue = {
           items: [],
+          cache: false,
+          childrenLoading: false,
+          childrenAvailable: false,
           reducerResults: __spreadValues({}, initialReducerValue)
         };
         if (pivot) {
@@ -5512,7 +5617,8 @@ function flatten(groupResult) {
   return result;
 }
 function getEnhancedGroupData(options, deepMapValue) {
-  const { groupBy, groupKeys, collapsed, parents, reducers } = options;
+  var _a;
+  const { groupBy, groupKeys, collapsed, parents, reducers, lazyLoad } = options;
   const groupNesting = groupKeys.length;
   const {
     items: groupItems,
@@ -5520,10 +5626,10 @@ function getEnhancedGroupData(options, deepMapValue) {
     pivotDeepMap,
     commonData
   } = deepMapValue;
-  let data = null;
+  let data = commonData != null ? commonData : null;
   if (Object.keys(reducerResults).length > 0) {
-    data = commonData || {};
-    for (let key in reducers)
+    data = __spreadValues({}, commonData);
+    for (const key in reducers)
       if (reducers.hasOwnProperty(key)) {
         const reducer = reducers[key];
         const field = reducer.field;
@@ -5532,8 +5638,10 @@ function getEnhancedGroupData(options, deepMapValue) {
         }
       }
   }
-  let theValue = groupKeys[groupKeys.length - 1];
+  let selfLoaded = true;
+  let theValue = (_a = data != null ? data[groupBy[groupKeys.length - 1]] : null) != null ? _a : groupKeys[groupKeys.length - 1];
   if (typeof theValue === "string" && theValue.startsWith(NOT_LOADED_YET_KEY_PREFIX)) {
+    selfLoaded = false;
     theValue = null;
   }
   const enhancedGroupData = {
@@ -5543,13 +5651,20 @@ function getEnhancedGroupData(options, deepMapValue) {
     groupKeys,
     id: `${groupKeys}`,
     collapsed,
+    dataSourceHasGrouping: true,
+    selfLoaded,
+    error: options.error,
     parents,
-    flatRowInfoList: [],
+    deepRowInfoArray: [],
     collapsedChildrenCount: 0,
     collapsedGroupsCount: 0,
+    childrenAvailable: lazyLoad ? options.childrenAvailable : true,
+    childrenLoading: options.childrenLoading,
     indexInParentGroups: options.indexInParentGroups,
     indexInGroup: options.indexInGroup,
     indexInAll: options.indexInAll,
+    directChildrenCount: options.directChildrenCount,
+    directChildrenLoadedCount: lazyLoad ? options.directChildrenLoadedCount : options.directChildrenCount,
     value: theValue,
     rootGroupBy: groupBy,
     groupBy: groupNesting === groupBy.length ? groupBy : groupBy.slice(0, groupNesting),
@@ -5562,7 +5677,7 @@ function getEnhancedGroupData(options, deepMapValue) {
 }
 function completeReducers(reducers, reducerResults, items) {
   if (reducers) {
-    for (let key in reducers)
+    for (const key in reducers)
       if (reducers.hasOwnProperty(key)) {
         const reducer = reducers[key];
         if (reducer.done) {
@@ -5574,6 +5689,7 @@ function completeReducers(reducers, reducerResults, items) {
 }
 function enhancedFlatten(param) {
   const {
+    lazyLoad,
     groupResult,
     toPrimaryKey,
     groupRowsState,
@@ -5587,11 +5703,13 @@ function enhancedFlatten(param) {
   const parents = [];
   const indexInParentGroups = [];
   deepMap.visitDepthFirst((deepMapValue, groupKeys, indexInGroup, next) => {
-    var _a;
+    var _a, _b;
     const items = deepMapValue.items;
     const groupNesting = groupKeys.length;
     const collapsed = (_a = groupRowsState == null ? void 0 : groupRowsState.isGroupRowCollapsed(groupKeys)) != null ? _a : false;
+    indexInParentGroups.push(indexInGroup);
     const enhancedGroupData = getEnhancedGroupData({
+      lazyLoad,
       groupBy: groupByStrings,
       parents: Array.from(parents),
       reducers,
@@ -5599,35 +5717,60 @@ function enhancedFlatten(param) {
       indexInParentGroups: Array.from(indexInParentGroups),
       indexInAll: result.length,
       groupKeys,
+      error: deepMapValue.error,
+      childrenLoading: deepMapValue.childrenLoading,
+      childrenAvailable: deepMapValue.childrenAvailable,
+      directChildrenCount: groupKeys.length === groupByStrings.length ? deepMapValue.items.length : deepMap.getDirectChildrenSizeFor(groupKeys),
+      directChildrenLoadedCount: 0,
       collapsed
     }, deepMapValue);
-    const include = generateGroupRows || collapsed;
+    const parent = parents[parents.length - 1];
+    const parentCollapsed = (_b = parent == null ? void 0 : parent.collapsed) != null ? _b : false;
+    let include = generateGroupRows || collapsed;
+    if (parentCollapsed) {
+      include = false;
+    }
     if (include) {
       result.push(enhancedGroupData);
     }
     if (collapsed) {
-      parents.forEach((parent) => {
-        parent.flatRowInfoList.push(enhancedGroupData);
-        parent.collapsedChildrenCount += enhancedGroupData.groupCount;
-        parent.collapsedGroupsCount += 1;
+      enhancedGroupData.collapsedChildrenCount = enhancedGroupData.groupCount;
+      parents.forEach((parent2) => {
+        if (!parentCollapsed) {
+          parent2.deepRowInfoArray.push(enhancedGroupData);
+        }
+        parent2.collapsedChildrenCount += enhancedGroupData.groupCount;
+        parent2.collapsedGroupsCount += 1;
       });
     } else {
-      parents.forEach((parent) => {
-        parent.flatRowInfoList.push(enhancedGroupData);
-      });
+      if (!parentCollapsed) {
+        parents.forEach((parent2) => {
+          parent2.deepRowInfoArray.push(enhancedGroupData);
+        });
+      }
+    }
+    if (parent && enhancedGroupData.selfLoaded && lazyLoad) {
+      parent.directChildrenLoadedCount += 1;
     }
-    indexInParentGroups.push(indexInGroup);
     parents.push(enhancedGroupData);
-    if (!collapsed) {
+    const continueWithChildren = !collapsed || lazyLoad;
+    if (continueWithChildren) {
       if (!next) {
         if (!pivot) {
           const startIndex = result.length;
-          result.push(...items.map((item, index) => {
+          if (!collapsed) {
+            result.length += items.length;
+          }
+          for (let index = 0, len = items.length; index < len; index++) {
+            const item = items[index];
             const rowInfo = {
               id: item ? toPrimaryKey(item) : `${groupKeys}-${index}`,
               data: item,
+              dataSourceHasGrouping: true,
               isGroupRow: false,
-              collapsed: false,
+              selfLoaded: !!item,
+              rootGroupBy: groupByStrings,
+              collapsed,
               groupKeys,
               parents: Array.from(parents),
               indexInParentGroups: [...indexInParentGroups, index],
@@ -5637,11 +5780,19 @@ function enhancedFlatten(param) {
               groupNesting,
               groupCount: enhancedGroupData.groupCount
             };
-            parents.forEach((parent) => {
-              parent.flatRowInfoList.push(rowInfo);
+            parents.forEach((parent2, i) => {
+              const last = i === parents.length - 1;
+              if (last && item) {
+                parent2.directChildrenLoadedCount += 1;
+              }
+              if (!parentCollapsed) {
+                parent2.deepRowInfoArray.push(rowInfo);
+              }
             });
-            return rowInfo;
-          }));
+            if (!collapsed) {
+              result[startIndex + index] = rowInfo;
+            }
+          }
         }
       } else {
         next();
@@ -5655,49 +5806,151 @@ function enhancedFlatten(param) {
   };
 }
-// src/components/hooks/useEffectWithChanges.ts
-var import_react31 = __toModule(require("react"));
-function useEffectWithChanges(fn, deps) {
-  const prevRef = (0, import_react31.useRef)({});
-  const oldValuesRef = (0, import_react31.useRef)({});
-  const oldValues = oldValuesRef.current;
-  const changesRef = (0, import_react31.useRef)({});
-  const changes = changesRef.current;
-  const useEffectDeps = [];
-  for (const k in deps) {
-    if (deps.hasOwnProperty(k)) {
-      if (deps[k] !== prevRef.current[k]) {
-        changes[k] = deps[k];
-        oldValues[k] = prevRef.current[k];
-      }
-      useEffectDeps.push(deps[k]);
-    }
-  }
-  prevRef.current = deps;
-  (0, import_react31.useEffect)(() => {
-    const changes2 = changesRef.current;
-    const result = fn(changes2, oldValues);
-    changesRef.current = {};
-    oldValuesRef.current = {};
-    return result;
-  }, useEffectDeps);
-}
+// src/components/DataSource/index.tsx
+var React26 = __toModule(require("react"));
-// src/components/DataSource/privateHooks/useLoadData.ts
-var getRafPromise = () => new Promise((resolve) => {
-  requestAnimationFrame(resolve);
-});
-var SKIP_DATA_CHANGES_KEYS = {
-  originalDataArray: true,
-  changes: true
+// src/utils/multisort/sortTypes.ts
+var numberComparator = function(first, second) {
+  return first - second;
 };
-function getChangeDetect() {
-  var _a;
-  const perfNow = (_a = getGlobal().performance) == null ? void 0 : _a.now();
-  return `${Date.now()}:${perfNow}`;
-}
-function buildDataSourceDataParams(componentState, overrides) {
-  var _a, _b;
+var stringComparator = function(first, second) {
+  first = `${first}`;
+  second = `${second}`;
+  return first.localeCompare(second);
+};
+var sortTypes = {
+  number: numberComparator,
+  string: stringComparator
+};
+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/components/DataSource/privateHooks/useLoadData.ts
+var import_react32 = __toModule(require("react"));
+// src/components/hooks/useEffectWithChanges.ts
+var import_react31 = __toModule(require("react"));
+function useEffectWithChanges(fn, deps) {
+  const prevRef = (0, import_react31.useRef)({});
+  const oldValuesRef = (0, import_react31.useRef)({});
+  const oldValues = oldValuesRef.current;
+  const changesRef = (0, import_react31.useRef)({});
+  const changes = changesRef.current;
+  const useEffectDeps = [];
+  for (const k in deps) {
+    if (deps.hasOwnProperty(k)) {
+      if (deps[k] !== prevRef.current[k]) {
+        changes[k] = deps[k];
+        oldValues[k] = prevRef.current[k];
+      }
+      useEffectDeps.push(deps[k]);
+    }
+  }
+  prevRef.current = deps;
+  (0, import_react31.useEffect)(() => {
+    const changes2 = changesRef.current;
+    const result = fn(changes2, oldValues);
+    changesRef.current = {};
+    oldValuesRef.current = {};
+    return result;
+  }, useEffectDeps);
+}
+// src/components/InfiniteTable/utils/assignFiltered.ts
+function assignFiltered(filterFn, target, ...rest) {
+  const result = target;
+  rest.forEach((obj) => {
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key) && filterFn(obj[key], key)) {
+        result[key] = obj[key];
+      }
+    }
+  });
+  return result;
+}
+function assignNonNull(target, ...rest) {
+  return assignFiltered((value) => value != null, target, ...rest);
+}
+function assignExcept(exceptKeys, target, ...rest) {
+  return assignFiltered((_value, key) => !(key in exceptKeys), target, ...rest);
+}
+// src/components/DataSource/privateHooks/getChangeDetect.ts
+function getChangeDetect() {
+  var _a;
+  const perfNow = (_a = getGlobal().performance) == null ? void 0 : _a.now();
+  return `${Date.now()}:${perfNow}`;
+}
+// src/components/DataSource/privateHooks/useLoadData.ts
+var CACHE_DEFAULT = true;
+var getRafPromise = () => new Promise((resolve) => {
+  requestAnimationFrame(resolve);
+});
+var SKIP_DATA_CHANGES_KEYS = {
+  originalDataArray: true,
+  changes: true
+};
+function buildDataSourceDataParams(componentState, overrides) {
+  var _a, _b;
   const sortInfo = componentState.multiSort ? componentState.sortInfo : (_b = (_a = componentState.sortInfo) == null ? void 0 : _a[0]) != null ? _b : null;
   const dataSourceParams = {
     append: false,
@@ -5707,6 +5960,9 @@ function buildDataSourceDataParams(componentState, overrides) {
     pivotBy: componentState.pivotBy,
     aggregationReducers: componentState.aggregationReducers
   };
+  if (dataSourceParams.groupBy) {
+    dataSourceParams.groupRowsState = componentState.groupRowsState.getState();
+  }
   if (componentState.livePagination !== void 0) {
     dataSourceParams.livePaginationCursor = componentState.livePaginationCursor;
     dataSourceParams.__cursorId = componentState.cursorId;
@@ -5742,7 +5998,7 @@ function loadData(data, componentState, actions, overrides) {
     const key = [LAZY_ROOT_KEY_FOR_GROUPS, ...dataParams.groupKeys || []];
     const existingGroupRowInfo = lazyGroupData.get(key);
     if (existingGroupRowInfo && existingGroupRowInfo.cache && key.length > 1) {
-      const items = existingGroupRowInfo.items;
+      const items = existingGroupRowInfo.children;
       const len = items.length;
       let allLoaded = true;
       for (let i = 0; i < len; i++) {
@@ -5755,6 +6011,21 @@ function loadData(data, componentState, actions, overrides) {
         return Promise.resolve(true);
       }
     }
+    if (existingGroupRowInfo) {
+      if (!existingGroupRowInfo.childrenLoading) {
+        existingGroupRowInfo.childrenLoading = true;
+      }
+    } else {
+      lazyGroupData.set(key, {
+        error: void 0,
+        children: [],
+        childrenLoading: true,
+        childrenAvailable: false,
+        cache: CACHE_DEFAULT,
+        totalCount: 0
+      });
+    }
+    actions.originalLazyGroupDataChangeDetect = getChangeDetect();
   }
   if (typeof data === "function") {
     data = data(dataParams);
@@ -5764,7 +6035,6 @@ function loadData(data, componentState, actions, overrides) {
     actions.loading = true;
   }
   return Promise.resolve(data).then((dataParam) => {
-    var _a, _b, _c, _d;
     let dataArray = [];
     let skipAssign = false;
     if (Array.isArray(dataParam.data)) {
@@ -5777,57 +6047,87 @@ function loadData(data, componentState, actions, overrides) {
         actions.pivotMappings = remoteData.mappings;
       }
       if (componentState.lazyLoad) {
-        const lazyGroupData = componentState.originalLazyGroupData;
-        const key = [LAZY_ROOT_KEY_FOR_GROUPS, ...dataParams.groupKeys || []];
-        const newGroupRowInfo = {
-          cache: !!remoteData.cache,
-          totalCount: (_a = remoteData.totalCount) != null ? _a : dataArray.length,
-          items: dataArray
-        };
-        if (dataParams.lazyLoadBatchSize) {
-          const existingGroupRowInfo = lazyGroupData.get(key);
-          const currentGroupRowInfo = existingGroupRowInfo != null ? existingGroupRowInfo : {
-            items: [],
-            totalCount: newGroupRowInfo.totalCount,
-            cache: (_b = newGroupRowInfo.cache) != null ? _b : true
+        let resolveRemoteData = function(keys, remoteData2, parentKeys) {
+          var _a, _b, _c;
+          const theKey = [LAZY_ROOT_KEY_FOR_GROUPS, ...keys];
+          const dataArray2 = remoteData2.data;
+          const newGroupRowInfo = {
+            cache: !!remoteData2.cache,
+            childrenLoading: false,
+            childrenAvailable: true,
+            totalCount: (_a = remoteData2.totalCount) != null ? _a : dataArray2.length,
+            children: dataArray2,
+            error: remoteData2.error
           };
-          if (existingGroupRowInfo) {
-            existingGroupRowInfo.cache = newGroupRowInfo.cache;
-          }
-          currentGroupRowInfo.items.length = currentGroupRowInfo.totalCount;
-          const start = (_c = dataParams.lazyLoadStartIndex) != null ? _c : 0;
-          const end = Math.min((_d = remoteData.totalCount) != null ? _d : dataArray.length, start + dataParams.lazyLoadBatchSize);
-          for (let i = start; i < end; i++) {
-            const it = newGroupRowInfo.items[i - start];
-            if (!it) {
-              throw `lazily loaded item not found at index ${i - start}`;
+          const childDatasets = [];
+          if (dataParams.lazyLoadBatchSize && !parentKeys) {
+            const existingGroupRowInfo = lazyGroupData.get(theKey);
+            const isGroupNew = !existingGroupRowInfo;
+            const currentGroupRowInfo = assignExcept({
+              children: true
+            }, existingGroupRowInfo || {}, newGroupRowInfo);
+            if (isGroupNew) {
+              currentGroupRowInfo.chidren = [];
+            }
+            currentGroupRowInfo.children.length = currentGroupRowInfo.totalCount;
+            const start = (_b = dataParams.lazyLoadStartIndex) != null ? _b : 0;
+            const end = Math.min((_c = remoteData2.totalCount) != null ? _c : dataArray2.length, start + dataParams.lazyLoadBatchSize);
+            for (let i = start; i < end; i++) {
+              const it = newGroupRowInfo.children[i - start];
+              if (!it) {
+                throw `lazily loaded item not found at index ${i - start}`;
+              }
+              currentGroupRowInfo.children[i] = it;
+              if (it.dataset) {
+                childDatasets.push({
+                  keys: it.keys,
+                  dataset: it.dataset
+                });
+              }
+            }
+            if (isGroupNew) {
+              lazyGroupData.set(theKey, currentGroupRowInfo);
             }
-            currentGroupRowInfo.items[i] = it;
+          } else {
+            if (parentKeys) {
+              newGroupRowInfo.children.forEach((child) => {
+                if (child && child.dataset) {
+                  childDatasets.push({
+                    keys: child.keys,
+                    dataset: child.dataset
+                  });
+                }
+              });
+              newGroupRowInfo.children.length = newGroupRowInfo.totalCount;
+            }
+            lazyGroupData.set(theKey, newGroupRowInfo);
           }
-          if (!existingGroupRowInfo) {
-            lazyGroupData.set(key, currentGroupRowInfo);
+          let skipTriggerChangeAsAlreadyOriginalArrayWasUpdated = false;
+          if (!keys || !keys.length) {
+            const topLevelLazyGroupData = lazyGroupData.get([
+              LAZY_ROOT_KEY_FOR_GROUPS
+            ]);
+            actions.originalDataArray = [...topLevelLazyGroupData.children];
+            skipTriggerChangeAsAlreadyOriginalArrayWasUpdated = true;
           }
-        } else {
-          lazyGroupData.set(key, newGroupRowInfo);
-        }
+          if (!skipTriggerChangeAsAlreadyOriginalArrayWasUpdated) {
+            actions.originalLazyGroupDataChangeDetect = getChangeDetect();
+          }
+          if (childDatasets.length) {
+            const parentKeys2 = keys;
+            childDatasets.forEach(({ keys: keys2, dataset }) => {
+              resolveRemoteData(keys2, dataset, parentKeys2);
+            });
+          }
+        };
+        const lazyGroupData = componentState.originalLazyGroupData;
         skipAssign = true;
-        let skipTriggerChangeAsAlreadyOriginalArrayWasUpdated = false;
-        if (!dataParams.groupKeys || !dataParams.groupKeys.length) {
-          const topLevelItems = lazyGroupData.get([LAZY_ROOT_KEY_FOR_GROUPS]);
-          actions.originalDataArray = [...topLevelItems.items];
-          skipTriggerChangeAsAlreadyOriginalArrayWasUpdated = true;
-        }
-        if (!skipTriggerChangeAsAlreadyOriginalArrayWasUpdated) {
-          actions.originalLazyGroupDataChangeDetect = getChangeDetect();
-        }
+        resolveRemoteData(dataParams.groupKeys || [], remoteData);
       }
     } else {
       dataArray = dataParam;
     }
     if (!skipAssign) {
-      if (append) {
-        console.log("appending", dataArray);
-      }
       actions.originalDataArray = append ? componentState.originalDataArray.concat(dataArray) : dataArray;
     }
     if (dataIsPromise && !componentState.lazyLoad) {
@@ -5944,8 +6244,8 @@ function useLazyLoadRange() {
     componentActions: actions,
     componentState
   } = useComponentState();
-  const loadingCache = (0, import_react32.useMemo)(() => {
-    return new Map();
+  (0, import_react32.useEffect)(() => {
+    actions.lazyLoadCacheOfLoadedBatches = new DeepMap();
   }, [componentState.data, componentState.dataParams]);
   const {
     lazyLoadBatchSize,
@@ -5954,7 +6254,7 @@ function useLazyLoadRange() {
     scrollStopDelayUpdatedByTable
   } = componentState;
   const latestRenderRangeRef = (0, import_react32.useRef)(null);
-  const loadRange = (renderRange, cache = loadingCache) => {
+  const loadRange = (renderRange, cache = getComponentState().lazyLoadCacheOfLoadedBatches) => {
     const componentState2 = getComponentState();
     renderRange = renderRange || latestRenderRangeRef.current;
     if (!renderRange) {
@@ -5977,11 +6277,11 @@ function useLazyLoadRange() {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       return notifyRenderRangeChange.onChange((renderRange) => {
         latestRenderRangeRef.current = renderRange;
-        loadRange(renderRange, loadingCache);
+        loadRange(renderRange);
       });
     }
     return;
-  }, [lazyLoadBatchSize, loadingCache]);
+  }, [lazyLoadBatchSize]);
   (0, import_react32.useEffect)(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
@@ -5998,7 +6298,10 @@ function lazyLoadRange(options, cache) {
     componentActions
   } = options;
   const { dataArray } = componentState;
-  const isRowLoaded = (index) => dataArray[index].data != null;
+  const isRowLoaded = (index) => {
+    const rowInfo = dataArray[index];
+    return rowInfo.data != null;
+  };
   const perGroupFnCalls = new DeepMap();
   const rootGroupKeys = ["_______xxx______"];
   for (let i = startIndex; i <= endIndex; i++) {
@@ -6006,17 +6309,36 @@ function lazyLoadRange(options, cache) {
     if (!rowInfo) {
       continue;
     }
-    const rowLoaded = rowInfo.data != null;
-    const theGroupKeys = rowInfo.groupKeys ? [...rowInfo.groupKeys] : [];
-    if (rowInfo.groupKeys && rowInfo.isGroupRow) {
+    const rowLoaded = isRowLoaded(i);
+    const theGroupKeys = rowInfo.dataSourceHasGrouping && rowInfo.groupKeys ? [...rowInfo.groupKeys] : [];
+    if (rowInfo.isGroupRow && rowInfo.dataSourceHasGrouping && rowInfo.groupKeys) {
       theGroupKeys.pop();
     }
     const cacheKeys = theGroupKeys.length ? theGroupKeys : rootGroupKeys;
-    const indexInGroup = rowInfo.indexInGroup;
+    const indexInGroup = rowInfo.isGroupRow ? rowInfo.indexInGroup : rowInfo.indexInAll;
+    if (rowInfo.isGroupRow && !rowInfo.collapsed && !rowInfo.childrenAvailable) {
+      const currentFnCall = {
+        lazyLoadStartIndex: 0,
+        lazyLoadBatchSize,
+        groupKeys: rowInfo.groupKeys
+      };
+      const cacheKeys2 = rowInfo.groupKeys;
+      let cachedFnCalls = perGroupFnCalls.get(cacheKeys2);
+      if (!(cachedFnCalls == null ? void 0 : cachedFnCalls[rowInfo.id])) {
+        const shouldSetFnCalls = !cachedFnCalls;
+        cachedFnCalls = cachedFnCalls || {};
+        if (!cachedFnCalls[rowInfo.id]) {
+          cachedFnCalls[rowInfo.id] = currentFnCall;
+        }
+        if (shouldSetFnCalls) {
+          perGroupFnCalls.set(cacheKeys2, cachedFnCalls);
+        }
+      }
+    }
     if (!rowLoaded) {
       let cachedFnCalls = perGroupFnCalls.get(cacheKeys);
       const batchStartIndexInGroup = Math.floor(indexInGroup / lazyLoadBatchSize) * lazyLoadBatchSize;
-      const offset = rowInfo.indexInGroup - batchStartIndexInGroup;
+      const offset = (rowInfo.isGroupRow ? rowInfo.indexInGroup : rowInfo.indexInAll) - batchStartIndexInGroup;
       const absoluteIndexOfBatchStart = dataArray[rowInfo.indexInAll - offset].indexInAll;
       const batchStartRowLoaded = isRowLoaded(absoluteIndexOfBatchStart);
       const batchStartRowId = dataArray[absoluteIndexOfBatchStart].id;
@@ -6044,7 +6366,7 @@ function lazyLoadRange(options, cache) {
     allFnCalls.push(...Object.values(record));
   });
   allFnCalls.reduce((promise, fnCall) => {
-    const cacheKey = `${fnCall.groupKeys.join("-")}:${fnCall.lazyLoadStartIndex}`;
+    const cacheKey = [...fnCall.groupKeys, fnCall.lazyLoadStartIndex];
     if (cache && cache.has(cacheKey)) {
       return promise;
     }
@@ -6054,22 +6376,65 @@ function lazyLoadRange(options, cache) {
   }, initialPromise);
 }
-// src/components/DataSource/state/normalizeSortInfo.ts
-var EMPTY_ARRAY = Object.freeze([]);
-var normalizeSortInfo = (initialSortInfo, weakMap) => {
-  const sortInfo = initialSortInfo != null ? initialSortInfo : EMPTY_ARRAY;
-  const result = Array.isArray(sortInfo) ? sortInfo : [sortInfo];
-  if (weakMap && weakMap.has(sortInfo)) {
-    const prevResult = weakMap.get(sortInfo);
-    if (prevResult && prevResult.length === result.length) {
-      return prevResult;
-    }
+// src/utils/shallowEqualObjects.ts
+function shallowEqualObjects(objA, objB, ignoreKeys) {
+  if (objA === objB) {
+    return true;
   }
-  if (weakMap && sortInfo) {
-    weakMap.set(sortInfo, result);
+  if (!objA || !objB) {
+    return false;
   }
-  return result;
-};
+  var aKeys = Object.keys(objA);
+  var bKeys = Object.keys(objB);
+  if (ignoreKeys) {
+    aKeys = aKeys.filter((key2) => !ignoreKeys.has(key2));
+    bKeys = bKeys.filter((key2) => !ignoreKeys.has(key2));
+  }
+  var len = aKeys.length;
+  if (bKeys.length !== len) {
+    return false;
+  }
+  for (var i = 0; i < len; i++) {
+    var key = aKeys[i];
+    if (ignoreKeys) {
+      if (ignoreKeys.has(key)) {
+        continue;
+      }
+    }
+    if (objA[key] !== objB[key] || !Object.prototype.hasOwnProperty.call(objB, key)) {
+      return false;
+    }
+  }
+  return true;
+}
+// src/components/utils/discardCallsWithEqualArg.ts
+var map = new WeakMap();
+var getCompareDefault = (a) => a;
+function discardCallsWithEqualArg(fn, timeframe = 50, getCompareObject) {
+  map.set(fn, {
+    lastCallTime: 0,
+    lastCallArg: null
+  });
+  const getCompare = getCompareObject != null ? getCompareObject : getCompareDefault;
+  return (arg) => {
+    const { lastCallTime, lastCallArg } = map.get(fn) || {
+      lastCallTime: 0,
+      lastCallArg: null
+    };
+    const now = Date.now();
+    const diff = now - lastCallTime;
+    const objectsEqual = shallowEqualObjects(getCompare(lastCallArg), getCompare(arg));
+    if (diff < timeframe && objectsEqual) {
+      return;
+    }
+    map.set(fn, {
+      lastCallTime: now,
+      lastCallArg: arg
+    });
+    fn(arg);
+  };
+}
 // src/components/DataSource/GroupRowsState.ts
 var GroupRowsState = class {
@@ -6181,65 +6546,22 @@ var GroupRowsState = class {
   }
 };
-// src/utils/shallowEqualObjects.ts
-function shallowEqualObjects(objA, objB, ignoreKeys) {
-  if (objA === objB) {
-    return true;
-  }
-  if (!objA || !objB) {
-    return false;
-  }
-  var aKeys = Object.keys(objA);
-  var bKeys = Object.keys(objB);
-  if (ignoreKeys) {
-    aKeys = aKeys.filter((key2) => !ignoreKeys.has(key2));
-    bKeys = bKeys.filter((key2) => !ignoreKeys.has(key2));
-  }
-  var len = aKeys.length;
-  if (bKeys.length !== len) {
-    return false;
-  }
-  for (var i = 0; i < len; i++) {
-    var key = aKeys[i];
-    if (ignoreKeys) {
-      if (ignoreKeys.has(key)) {
-        continue;
-      }
-    }
-    if (objA[key] !== objB[key] || !Object.prototype.hasOwnProperty.call(objB, key)) {
-      return false;
+// src/components/DataSource/state/normalizeSortInfo.ts
+var EMPTY_ARRAY = Object.freeze([]);
+var normalizeSortInfo = (initialSortInfo, weakMap) => {
+  const sortInfo = initialSortInfo != null ? initialSortInfo : EMPTY_ARRAY;
+  const result = Array.isArray(sortInfo) ? sortInfo : [sortInfo];
+  if (weakMap && weakMap.has(sortInfo)) {
+    const prevResult = weakMap.get(sortInfo);
+    if (prevResult && prevResult.length === result.length) {
+      return prevResult;
     }
   }
-  return true;
-}
-// src/components/utils/discardCallsWithEqualArg.ts
-var map = new WeakMap();
-var getCompareDefault = (a) => a;
-function discardCallsWithEqualArg(fn, timeframe = 50, getCompareObject) {
-  map.set(fn, {
-    lastCallTime: 0,
-    lastCallArg: null
-  });
-  const getCompare = getCompareObject != null ? getCompareObject : getCompareDefault;
-  return (arg) => {
-    const { lastCallTime, lastCallArg } = map.get(fn) || {
-      lastCallTime: 0,
-      lastCallArg: null
-    };
-    const now = Date.now();
-    const diff = now - lastCallTime;
-    const objectsEqual = shallowEqualObjects(getCompare(lastCallArg), getCompare(arg));
-    if (diff < timeframe && objectsEqual) {
-      return;
-    }
-    map.set(fn, {
-      lastCallTime: now,
-      lastCallArg: arg
-    });
-    fn(arg);
-  };
-}
+  if (weakMap && sortInfo) {
+    weakMap.set(sortInfo, result);
+  }
+  return result;
+};
 // src/components/DataSource/state/getInitialState.ts
 var defaultCursorId = Symbol("cursorId");
@@ -6249,6 +6571,7 @@ function initSetupState() {
   const dataArray = [];
   const originalLazyGroupData = new DeepMap();
   return {
+    lazyLoadCacheOfLoadedBatches: new DeepMap(),
     dataParams: void 0,
     notifyScrollbarsChange: buildSubscriptionCallback(),
     notifyScrollStop: buildSubscriptionCallback(),
@@ -6299,6 +6622,9 @@ var forwardProps2 = (setupState) => {
     sortInfo: (sortInfo) => normalizeSortInfo(sortInfo, setupState.propsCache.get("sortInfo")),
     groupBy: (groupBy) => groupBy != null ? groupBy : [],
     groupRowsState: (groupRowsState) => {
+      if (groupRowsState && !(groupRowsState instanceof GroupRowsState)) {
+        groupRowsState = new GroupRowsState(groupRowsState);
+      }
       return groupRowsState || new GroupRowsState({
         expandedRows: true,
         collapsedRows: []
@@ -6466,7 +6792,7 @@ function getPivotColumnsAndColumnGroups({
         pivotIndex: -1,
         valueGetter: ({ rowInfo }) => {
           var _a;
-          return (_a = rowInfo.reducerResults) == null ? void 0 : _a[reducer.id];
+          return rowInfo.isGroupRow ? (_a = rowInfo.reducerResults) == null ? void 0 : _a[reducer.id] : null;
         }
       }));
     });
@@ -6515,6 +6841,9 @@ function getPivotColumnsAndColumnGroups({
           header,
           valueGetter: ({ rowInfo }) => {
             var _a, _b;
+            if (!rowInfo.isGroupRow) {
+              return null;
+            }
             return (_b = (_a = rowInfo.pivotValuesMap) == null ? void 0 : _a.get(keys)) == null ? void 0 : _b.reducerResults[reducer.id];
           }
         });
@@ -6537,7 +6866,7 @@ function getPivotColumnsAndColumnGroups({
         const pivotByForColumn = pivotBy[keys.length - 1];
         let columnGroupId = parentKeys.length ? parentKeys.join("/") : void 0;
         if (!isSingleAggregationColumn) {
-          let parentGroupForTotalsGroup = columnGroupId;
+          const parentGroupForTotalsGroup = columnGroupId;
           columnGroupId = `total:${keys.join("/")}`;
           columnGroups.set(columnGroupId, prepareColumnGroup({
             header: `${keys[keys.length - 1]} total`,
@@ -6567,6 +6896,9 @@ function getPivotColumnsAndColumnGroups({
             sortable: false,
             valueGetter: ({ rowInfo }) => {
               var _a, _b;
+              if (!rowInfo.isGroupRow) {
+                return null;
+              }
               return (_b = (_a = rowInfo.pivotValuesMap) == null ? void 0 : _a.get(keys)) == null ? void 0 : _b.reducerResults[reducer.id];
             }
           });
@@ -6602,12 +6934,12 @@ var haveDepsChanged = (state1, state2, deps) => {
 };
 function toRowInfo(data, id, index) {
   return {
+    dataSourceHasGrouping: false,
     data,
-    collapsed: true,
     id,
     indexInAll: index,
-    indexInGroup: index,
-    isGroupRow: false
+    isGroupRow: false,
+    selfLoaded: true
   };
 }
 function concludeReducer(params) {
@@ -6635,7 +6967,7 @@ function concludeReducer(params) {
   const shouldSortAgain = shouldSort && (sortDepsChanged || !state.lastSortDataArray);
   const groupBy = state.groupBy;
   const pivotBy = state.pivotBy;
-  const shouldGroup = groupBy.length || pivotBy;
+  const shouldGroup = groupBy.length > 0 || !!pivotBy;
   const groupsDepsChanged = originalDataArrayChanged || haveDepsChanged(previousState, state, [
     "generateGroupRows",
     "originalDataArray",
@@ -6660,12 +6992,8 @@ function concludeReducer(params) {
     state.sortedAt = now;
   }
   state.postSortDataArray = dataArray;
-  state.groupDeepMap = void 0;
   const toPrimaryKey = (data) => {
     const pk = data[state.primaryKey];
-    if (Array.isArray(pk)) {
-      debugger;
-    }
     return pk;
   };
   if (shouldGroup) {
@@ -6682,6 +7010,7 @@ function concludeReducer(params) {
       }, dataArray);
       const flattenResult = enhancedFlatten({
         groupResult,
+        lazyLoad: !!state.lazyLoad,
         reducers: state.aggregationReducers,
         toPrimaryKey,
         groupRowsState: state.groupRowsState,
@@ -6737,7 +7066,7 @@ function DataSourceWithContext(props) {
   if (typeof children === "function") {
     children = children(computedValues);
   }
-  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, children);
+  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, children);
 }
 var DataSourceRoot = getComponentStateRoot({
   initSetupState,
@@ -6760,14 +7089,14 @@ function DataSourceCmp({ children }) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
-  return /* @__PURE__ */ React25.createElement(DataSourceContext.Provider, {
+  return /* @__PURE__ */ React26.createElement(DataSourceContext.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ React25.createElement(DataSourceWithContext, {
+  }, /* @__PURE__ */ React26.createElement(DataSourceWithContext, {
     children
   }));
 }
 function DataSource(props) {
-  return /* @__PURE__ */ React25.createElement(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ React25.createElement(DataSourceCmp, {
+  return /* @__PURE__ */ React26.createElement(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ React26.createElement(DataSourceCmp, {
     children: props.children
   }));
 }
@@ -6780,10 +7109,26 @@ function useToggleGroupRow() {
     const newState = new GroupRowsState(state.groupRowsState);
     newState.toggleGroupRow(groupKeys);
     dataSourceActions.groupRowsState = newState;
-    if (state.lazyLoad && newState.isGroupRowExpanded(groupKeys)) {
-      loadData(state.data, state, dataSourceActions, {
-        groupKeys
-      });
+    if (state.lazyLoad) {
+      const dataKeys = [LAZY_ROOT_KEY_FOR_GROUPS, ...groupKeys];
+      const currentData = state.originalLazyGroupData.get(dataKeys);
+      if (newState.isGroupRowExpanded(groupKeys)) {
+        if (!(currentData == null ? void 0 : currentData.cache)) {
+          loadData(state.data, state, dataSourceActions, {
+            groupKeys
+          });
+        }
+      } else {
+        if (!(currentData == null ? void 0 : currentData.cache)) {
+          const keysToDelete = state.lazyLoadCacheOfLoadedBatches.getKeysStartingWith(groupKeys);
+          keysToDelete.forEach((keys) => {
+            state.lazyLoadCacheOfLoadedBatches.delete(keys);
+          });
+          dataSourceActions.lazyLoadCacheOfLoadedBatches = DeepMap.clone(state.lazyLoadCacheOfLoadedBatches);
+          state.originalLazyGroupData.delete(dataKeys);
+          dataSourceActions.originalLazyGroupDataChangeDetect = getChangeDetect();
+        }
+      }
     }
   }, []);
   return toggleGroupRow;
@@ -6853,12 +7198,18 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
           field,
           valueGetter: ({ rowInfo }) => {
             var _a;
-            return (_a = rowInfo.groupKeys) == null ? void 0 : _a[groupIndex];
+            return rowInfo.isGroupRow ? (_a = rowInfo.groupKeys) == null ? void 0 : _a[groupIndex] : rowInfo.value;
           },
           rowspan: ({ rowInfo, dataArray }) => {
+            if (!rowInfo.isGroupRow) {
+              return 1;
+            }
             const prevRowInfo = dataArray[rowInfo.indexInAll - 1] || {
               indexInParentGroups: []
             };
+            if (!prevRowInfo || !prevRowInfo.dataSourceHasGrouping) {
+              return 1;
+            }
             const prevIndexes = prevRowInfo.indexInParentGroups || [];
             const currentIndexes = rowInfo.indexInParentGroups || [];
             let computeSpan = false;
@@ -7011,8 +7362,11 @@ function useHideColumns(groupByMap) {
     let expandedGroupsLevel = 0;
     const len = dataArray.length;
     for (let i = 0; i < len; i++) {
-      const data = dataArray[i];
-      expandedGroupsLevel = Math.max(expandedGroupsLevel, data.groupNesting - 1);
+      const rowInfo = dataArray[i];
+      if (!rowInfo.isGroupRow) {
+        continue;
+      }
+      expandedGroupsLevel = Math.max(expandedGroupsLevel, rowInfo.groupNesting - 1);
       if (expandedGroupsLevel === groupsLength - 1) {
         break;
       }
@@ -7339,22 +7693,6 @@ function getColumnComputedType(column, columnTypes) {
   return column.type.reduce((acc, columnType) => Object.assign(acc, columnTypes[columnType]), {});
 }
-// src/components/InfiniteTable/utils/assignFiltered.ts
-function assignFiltered(filterFn, target, ...rest) {
-  let result = target;
-  rest.forEach((obj) => {
-    for (const key in obj) {
-      if (obj.hasOwnProperty(key) && filterFn(obj[key], key)) {
-        result[key] = obj[key];
-      }
-    }
-  });
-  return result;
-}
-function assignNonNull(target, ...rest) {
-  return assignFiltered((value) => value != null, target, ...rest);
-}
 // src/components/InfiniteTable/utils/getComputedVisibleColumns.ts
 var logError = err("getComputedVisibleColumns");
 var isColumnVisible = (columnVisibility, _columnVisibilityAssumeVisible, colId) => {
@@ -8121,7 +8459,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react39.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.3.0-canary.0"
+      version: "0.3.2"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -8346,7 +8684,7 @@ var InfiniteTableRoot = getComponentStateRoot({
   getParentState: () => useDataSource(),
   debugName: "InfiniteTable"
 });
-var InfiniteTableComponent = React26.memo(function InfiniteTableComponent2() {
+var InfiniteTableComponent = React27.memo(function InfiniteTableComponent2() {
   var _a;
   const { componentState, getComputed, computed } = useInfiniteTable();
   const {
@@ -8379,7 +8717,7 @@ var InfiniteTableComponent = React26.memo(function InfiniteTableComponent2() {
     bodySize,
     computed
   });
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     const dataSourceState = getDataSourceState();
     const onChange = debounce((renderRange) => {
       dataSourceState.notifyRenderRangeChange({
@@ -8392,32 +8730,32 @@ var InfiniteTableComponent = React26.memo(function InfiniteTableComponent2() {
   const licenseValid = useLicense(licenseKey);
   const domProps = useDOMProps(componentState.domProps);
   const LoadMaskCmp = (_a = components == null ? void 0 : components.LoadMask) != null ? _a : LoadMask;
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     brain.setScrollStopDelay(scrollStopDelay);
     dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
   }, [scrollStopDelay]);
   useAutoSizeColumns();
-  return /* @__PURE__ */ React26.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React27.createElement("div", __spreadValues({
     ref: domRef
-  }, domProps), header ? /* @__PURE__ */ React26.createElement(TableHeaderWrapper, {
+  }, domProps), header ? /* @__PURE__ */ React27.createElement(TableHeaderWrapper, {
     brain: headerBrain,
     scrollbars
-  }) : null, /* @__PURE__ */ React26.createElement(InfiniteTableBody, null, /* @__PURE__ */ React26.createElement(HeadlessTable, {
+  }) : null, /* @__PURE__ */ React27.createElement(InfiniteTableBody, null, /* @__PURE__ */ React27.createElement(HeadlessTable, {
     tabIndex: 0,
     scrollStopDelay,
     brain,
     renderCell,
     cellHoverClassNames: HOVERED_CLASS_NAMES,
     scrollerDOMRef
-  }), /* @__PURE__ */ React26.createElement(LoadMaskCmp, {
+  }), /* @__PURE__ */ React27.createElement(LoadMaskCmp, {
     visible: loading
-  }, loadingText)), licenseValid ? null : /* @__PURE__ */ React26.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React26.createElement("div", {
+  }, loadingText)), licenseValid ? null : /* @__PURE__ */ React27.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React27.createElement("div", {
     ref: portalDOMRef,
     className: join(`${rootClassName2}Portal`, zIndex[1e3], position.absolute, top[0], left[0])
-  }), rowHeightCSSVar ? /* @__PURE__ */ React26.createElement(CSSVariableWatch, {
+  }), rowHeightCSSVar ? /* @__PURE__ */ React27.createElement(CSSVariableWatch, {
     varName: rowHeightCSSVar,
     onChange: onRowHeightCSSVarChange
-  }) : null, headerHeightCSSVar ? /* @__PURE__ */ React26.createElement(CSSVariableWatch, {
+  }) : null, headerHeightCSSVar ? /* @__PURE__ */ React27.createElement(CSSVariableWatch, {
     varName: headerHeightCSSVar,
     onChange: onHeaderHeightCSSVarChange
   }) : null);
@@ -8448,25 +8786,25 @@ function InfiniteTableContextProvider() {
     bodySize.width = (_b = (_a = scrollerDOMRef.current) == null ? void 0 : _a.scrollWidth) != null ? _b : bodySize.width;
     componentActions.bodySize = bodySize;
   }, { earlyAttach: true });
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     return () => {
       componentState.onRowHeightCSSVarChange.destroy();
       componentState.onHeaderHeightCSSVarChange.destroy();
     };
   }, []);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (scrollerDOMRef.current) {
       scrollerDOMRef.current.scrollTop = 0;
     }
   }, [scrollTopKey, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
-  return /* @__PURE__ */ React26.createElement(TableContext2.Provider, {
+  return /* @__PURE__ */ React27.createElement(TableContext2.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ React26.createElement(InfiniteTableComponent, null));
+  }, /* @__PURE__ */ React27.createElement(InfiniteTableComponent, null));
 }
 function InfiniteTable(props) {
-  const table = /* @__PURE__ */ React26.createElement(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ React26.createElement(InfiniteTableContextProvider, null));
-  return /* @__PURE__ */ React26.createElement(React26.StrictMode, null, table);
+  const table = /* @__PURE__ */ React27.createElement(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ React27.createElement(InfiniteTableContextProvider, null));
+  return /* @__PURE__ */ React27.createElement(React27.StrictMode, null, table);
 }
 InfiniteTable.defaultProps = {
   rowHeight: 40,