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

package/index.esm.js

@@ -636,7 +636,7 @@ function debounce(fn, { wait }) {
 // src/components/InfiniteTable/index.tsx
 import {
   StrictMode,
-  createElement as createElement21,
+  createElement as createElement22,
   memo as memo9,
   useEffect as useEffect23
 } from "react";
@@ -1010,13 +1010,30 @@ function AvoidReactDiffFn(props) {
 var AvoidReactDiff = memo2(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;
@@ -1057,6 +1074,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) => {
@@ -1069,7 +1099,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`);
@@ -1254,7 +1284,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);
         });
       }
@@ -1263,7 +1293,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);
         });
       }
@@ -1272,7 +1302,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]);
         });
       }
@@ -1281,7 +1311,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]);
         });
       }
@@ -1981,7 +2011,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);
       });
     }
@@ -2077,6 +2107,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) {
@@ -2086,16 +2130,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;
@@ -2165,7 +2230,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];
@@ -2454,6 +2519,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;
@@ -2732,7 +2798,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) {
@@ -2748,17 +2836,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;
@@ -2767,7 +2845,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`;
@@ -2907,6 +2986,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;
     };
@@ -2915,7 +2996,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
     const removeOnScroll = brain.onScroll(this.adjustFixedElementsOnScroll);
     const removeOnSizeChange = brain.onAvailableSizeChange(() => {
       this.adjustFixedElementsOnScroll();
-      requestAnimationFrame(() => {
+      raf(() => {
         this.adjustFixedElementsOnScroll();
       });
     });
@@ -2960,6 +3041,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,
@@ -2969,7 +3051,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       colspan,
       rowFixed,
       colFixed,
-      hidden: !!covered,
+      hidden,
       heightWithRowspan,
       widthWithColspan,
       onMouseEnter: this.onMouseEnter.bind(null, rowIndex),
@@ -2986,7 +3068,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() {
@@ -3465,19 +3547,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 = forwardRef2(function InfiniteTableBody2(props, ref) {
@@ -3527,7 +3609,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" };
 
@@ -3876,18 +3958,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
@@ -3997,11 +4080,6 @@ import {
   useMemo as useMemo5
 } from "react";
 
-// src/utils/getGlobal.ts
-function getGlobal() {
-  return globalThis;
-}
-
 // src/components/utils/getScrollbarWidth.ts
 var scrollbarWidth;
 function getScrollbarWidth() {
@@ -4353,9 +4431,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
@@ -4443,6 +4521,8 @@ function InfiniteTableColumnCellFn(props) {
   var _a;
   const {
     rowInfo,
+    rowStyle,
+    rowClassName,
     width,
     column,
     onMouseLeave,
@@ -4461,40 +4541,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
   });
@@ -4511,8 +4602,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;
@@ -4528,7 +4627,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;
@@ -4555,8 +4654,8 @@ import {
 } from "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
@@ -4589,7 +4688,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}`);
@@ -4766,6 +4864,8 @@ function useCellRendering(param) {
     groupRenderStrategy,
     brain,
     showZebraRows,
+    rowStyle,
+    rowClassName,
     onScrollToTop,
     onScrollToBottom,
     scrollToBottomOffset
@@ -4860,7 +4960,9 @@ function useCellRendering(param) {
       onMouseLeave,
       domRef,
       width,
-      column
+      column,
+      rowStyle,
+      rowClassName
     };
     return /* @__PURE__ */ React22.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
   }, [
@@ -4870,7 +4972,9 @@ function useCellRendering(param) {
     groupRenderStrategy,
     toggleGroupRow,
     showZebraRows,
-    repaintId
+    repaintId,
+    rowStyle,
+    rowClassName
   ]);
   return {
     renderCell
@@ -5026,6 +5130,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) {
@@ -5062,9 +5169,22 @@ import { useEffect as useEffect19, useMemo as useMemo8 } from "react";
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
 import {
-  createElement as createElement19
+  createElement as createElement20
 } from "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
 import {
   createElement as createElement18,
@@ -5074,8 +5194,8 @@ import { useState as useState8 } from "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) {
@@ -5110,6 +5230,45 @@ function ExpanderIcon(props) {
   }));
 }
 
+// src/components/InfiniteTable/components/icons/LoadingIcon.tsx
+import {
+  createElement as createElement19
+} from "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__ */ createElement19("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__ */ createElement19("circle", {
+    cx: "50",
+    cy: "50",
+    fill: "none",
+    strokeWidth: "10",
+    r: "35",
+    strokeDasharray: "164.93361431346415 56.97787143782138"
+  }, /* @__PURE__ */ createElement19("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,
@@ -5120,12 +5279,12 @@ function getGroupColumnRender({
     var _a, _b, _c;
     let { value, rowInfo, column, groupBy, pivotBy } = renderOptions;
     if (column.renderValue) {
-      value = /* @__PURE__ */ createElement19(RenderHookComponent, {
+      value = /* @__PURE__ */ createElement20(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;
     }
@@ -5148,31 +5307,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__ */ createElement19(ExpanderIcon, {
+    const isLoading = showLoadingIcon(groupRowInfo);
+    if (isLoading) {
+      icon = /* @__PURE__ */ createElement20(LoadingIcon, null);
+    } else if (showExpanderIcon) {
+      const defaultIcon = /* @__PURE__ */ createElement20(ExpanderIcon, {
         expanded: !collapsed,
         onChange: () => {
           toggleGroupRow(groupKeys);
         }
       });
-      icon = column.renderGroupIcon ? /* @__PURE__ */ createElement19(RenderHookComponent, {
+      icon = column.renderGroupIcon ? /* @__PURE__ */ createElement20(RenderHookComponent, {
         render: column.renderGroupIcon,
         renderParam: Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)
       }) : defaultIcon;
     }
-    return /* @__PURE__ */ createElement19("div", {
+    return /* @__PURE__ */ createElement20("div", {
       className: join(display.flex, alignItems.center)
-    }, icon, /* @__PURE__ */ createElement19("div", {
+    }, icon, /* @__PURE__ */ createElement20("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,
@@ -5197,30 +5355,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__ */ createElement19(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__ */ createElement20(LoadingIcon, null);
+      } else if (showExpanderIcon) {
+        const defaultIcon = /* @__PURE__ */ createElement20(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__ */ createElement19("div", {
+      return /* @__PURE__ */ createElement20("div", {
         className: join(display.flex, alignItems.center, GroupRowExpanderCls)
-      }, icon, /* @__PURE__ */ createElement19("div", {
+      }, icon, /* @__PURE__ */ createElement20("div", {
         className: cssEllipsisClassName
       }, value != null ? value : null));
     }
@@ -5259,89 +5427,6 @@ function useEffectWithRaf(fn, deps) {
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
 import { useCallback as useCallback13 } from "react";
 
-// src/components/DataSource/index.tsx
-import {
-  Fragment as Fragment2,
-  createElement as createElement20
-} from "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
-import { useEffect as useEffect18, useMemo as useMemo7, useRef as useRef17, useState as useState9 } from "react";
-
 // src/utils/groupAndPivot/index.ts
 var LAZY_ROOT_KEY_FOR_GROUPS = "____root____";
 var NOT_LOADED_YET_KEY_PREFIX = "____not_loaded_yet____";
@@ -5353,7 +5438,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;
     }
@@ -5364,7 +5449,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") {
@@ -5386,7 +5471,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);
@@ -5402,12 +5487,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) {
@@ -5415,11 +5500,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,
@@ -5429,14 +5526,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 || {}
       };
@@ -5505,13 +5603,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) {
@@ -5520,7 +5621,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);
@@ -5528,6 +5629,9 @@ function group(groupParams, data) {
       if (!deepMap.has(currentGroupKeys)) {
         const deepMapGroupValue = {
           items: [],
+          cache: false,
+          childrenLoading: false,
+          childrenAvailable: false,
           reducerResults: __spreadValues({}, initialReducerValue)
         };
         if (pivot) {
@@ -5586,7 +5690,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,
@@ -5594,10 +5699,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;
@@ -5606,8 +5711,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 = {
@@ -5617,13 +5724,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),
@@ -5636,7 +5750,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) {
@@ -5648,6 +5762,7 @@ function completeReducers(reducers, reducerResults, items) {
 }
 function enhancedFlatten(param) {
   const {
+    lazyLoad,
     groupResult,
     toPrimaryKey,
     groupRowsState,
@@ -5661,11 +5776,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,
@@ -5673,35 +5790,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],
@@ -5711,11 +5853,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();
@@ -5729,47 +5879,152 @@ function enhancedFlatten(param) {
   };
 }
 
-// src/components/hooks/useEffectWithChanges.ts
-import { useEffect as useEffect17, useRef as useRef16 } from "react";
-function useEffectWithChanges(fn, deps) {
-  const prevRef = useRef16({});
-  const oldValuesRef = useRef16({});
-  const oldValues = oldValuesRef.current;
-  const changesRef = useRef16({});
-  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;
-  useEffect17(() => {
-    const changes2 = changesRef.current;
-    const result = fn(changes2, oldValues);
-    changesRef.current = {};
-    oldValuesRef.current = {};
-    return result;
-  }, useEffectDeps);
-}
+// src/components/DataSource/index.tsx
+import {
+  Fragment as Fragment2,
+  createElement as createElement21
+} from "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 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
+import { useEffect as useEffect18, useMemo as useMemo7, useRef as useRef17, useState as useState9 } from "react";
+
+// src/components/hooks/useEffectWithChanges.ts
+import { useEffect as useEffect17, useRef as useRef16 } from "react";
+function useEffectWithChanges(fn, deps) {
+  const prevRef = useRef16({});
+  const oldValuesRef = useRef16({});
+  const oldValues = oldValuesRef.current;
+  const changesRef = useRef16({});
+  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;
+  useEffect17(() => {
+    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;
@@ -5781,6 +6036,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;
@@ -5816,7 +6074,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++) {
@@ -5829,6 +6087,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);
@@ -5838,7 +6111,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)) {
@@ -5851,57 +6123,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.items[i] = it;
+            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);
+            }
+          } 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) {
@@ -6018,8 +6320,8 @@ function useLazyLoadRange() {
     componentActions: actions,
     componentState
   } = useComponentState();
-  const loadingCache = useMemo7(() => {
-    return new Map();
+  useEffect18(() => {
+    actions.lazyLoadCacheOfLoadedBatches = new DeepMap();
   }, [componentState.data, componentState.dataParams]);
   const {
     lazyLoadBatchSize,
@@ -6028,7 +6330,7 @@ function useLazyLoadRange() {
     scrollStopDelayUpdatedByTable
   } = componentState;
   const latestRenderRangeRef = useRef17(null);
-  const loadRange = (renderRange, cache = loadingCache) => {
+  const loadRange = (renderRange, cache = getComponentState().lazyLoadCacheOfLoadedBatches) => {
     const componentState2 = getComponentState();
     renderRange = renderRange || latestRenderRangeRef.current;
     if (!renderRange) {
@@ -6051,11 +6353,11 @@ function useLazyLoadRange() {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       return notifyRenderRangeChange.onChange((renderRange) => {
         latestRenderRangeRef.current = renderRange;
-        loadRange(renderRange, loadingCache);
+        loadRange(renderRange);
       });
     }
     return;
-  }, [lazyLoadBatchSize, loadingCache]);
+  }, [lazyLoadBatchSize]);
   useEffect18(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
@@ -6072,7 +6374,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++) {
@@ -6080,17 +6385,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;
@@ -6118,7 +6442,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;
     }
@@ -6128,22 +6452,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 {
@@ -6255,65 +6622,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");
@@ -6323,6 +6647,7 @@ function initSetupState() {
   const dataArray = [];
   const originalLazyGroupData = new DeepMap();
   return {
+    lazyLoadCacheOfLoadedBatches: new DeepMap(),
     dataParams: void 0,
     notifyScrollbarsChange: buildSubscriptionCallback(),
     notifyScrollStop: buildSubscriptionCallback(),
@@ -6373,6 +6698,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: []
@@ -6540,7 +6868,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;
         }
       }));
     });
@@ -6589,6 +6917,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];
           }
         });
@@ -6611,7 +6942,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`,
@@ -6641,6 +6972,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];
             }
           });
@@ -6676,12 +7010,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) {
@@ -6709,7 +7043,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",
@@ -6734,12 +7068,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) {
@@ -6756,6 +7086,7 @@ function concludeReducer(params) {
       }, dataArray);
       const flattenResult = enhancedFlatten({
         groupResult,
+        lazyLoad: !!state.lazyLoad,
         reducers: state.aggregationReducers,
         toPrimaryKey,
         groupRowsState: state.groupRowsState,
@@ -6811,7 +7142,7 @@ function DataSourceWithContext(props) {
   if (typeof children === "function") {
     children = children(computedValues);
   }
-  return /* @__PURE__ */ createElement20(Fragment2, null, children);
+  return /* @__PURE__ */ createElement21(Fragment2, null, children);
 }
 var DataSourceRoot = getComponentStateRoot({
   initSetupState,
@@ -6834,14 +7165,14 @@ function DataSourceCmp({ children }) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
-  return /* @__PURE__ */ createElement20(DataSourceContext.Provider, {
+  return /* @__PURE__ */ createElement21(DataSourceContext.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ createElement20(DataSourceWithContext, {
+  }, /* @__PURE__ */ createElement21(DataSourceWithContext, {
     children
   }));
 }
 function DataSource(props) {
-  return /* @__PURE__ */ createElement20(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ createElement20(DataSourceCmp, {
+  return /* @__PURE__ */ createElement21(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ createElement21(DataSourceCmp, {
     children: props.children
   }));
 }
@@ -6854,10 +7185,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;
@@ -6927,12 +7274,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;
@@ -7085,8 +7438,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;
       }
@@ -7413,22 +7769,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) => {
@@ -8195,7 +8535,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo10(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.3.0-canary.0"
+      version: "0.3.2"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -8471,27 +8811,27 @@ var InfiniteTableComponent = memo9(function InfiniteTableComponent2() {
     dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
   }, [scrollStopDelay]);
   useAutoSizeColumns();
-  return /* @__PURE__ */ createElement21("div", __spreadValues({
+  return /* @__PURE__ */ createElement22("div", __spreadValues({
     ref: domRef
-  }, domProps), header ? /* @__PURE__ */ createElement21(TableHeaderWrapper, {
+  }, domProps), header ? /* @__PURE__ */ createElement22(TableHeaderWrapper, {
     brain: headerBrain,
     scrollbars
-  }) : null, /* @__PURE__ */ createElement21(InfiniteTableBody, null, /* @__PURE__ */ createElement21(HeadlessTable, {
+  }) : null, /* @__PURE__ */ createElement22(InfiniteTableBody, null, /* @__PURE__ */ createElement22(HeadlessTable, {
     tabIndex: 0,
     scrollStopDelay,
     brain,
     renderCell,
     cellHoverClassNames: HOVERED_CLASS_NAMES,
     scrollerDOMRef
-  }), /* @__PURE__ */ createElement21(LoadMaskCmp, {
+  }), /* @__PURE__ */ createElement22(LoadMaskCmp, {
     visible: loading
-  }, loadingText)), licenseValid ? null : /* @__PURE__ */ createElement21(InfiniteTableLicenseFooter, null), /* @__PURE__ */ createElement21("div", {
+  }, loadingText)), licenseValid ? null : /* @__PURE__ */ createElement22(InfiniteTableLicenseFooter, null), /* @__PURE__ */ createElement22("div", {
     ref: portalDOMRef,
     className: join(`${rootClassName2}Portal`, zIndex[1e3], position.absolute, top[0], left[0])
-  }), rowHeightCSSVar ? /* @__PURE__ */ createElement21(CSSVariableWatch, {
+  }), rowHeightCSSVar ? /* @__PURE__ */ createElement22(CSSVariableWatch, {
     varName: rowHeightCSSVar,
     onChange: onRowHeightCSSVarChange
-  }) : null, headerHeightCSSVar ? /* @__PURE__ */ createElement21(CSSVariableWatch, {
+  }) : null, headerHeightCSSVar ? /* @__PURE__ */ createElement22(CSSVariableWatch, {
     varName: headerHeightCSSVar,
     onChange: onHeaderHeightCSSVarChange
   }) : null);
@@ -8534,13 +8874,13 @@ function InfiniteTableContextProvider() {
     }
   }, [scrollTopKey, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
-  return /* @__PURE__ */ createElement21(TableContext2.Provider, {
+  return /* @__PURE__ */ createElement22(TableContext2.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ createElement21(InfiniteTableComponent, null));
+  }, /* @__PURE__ */ createElement22(InfiniteTableComponent, null));
 }
 function InfiniteTable(props) {
-  const table = /* @__PURE__ */ createElement21(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ createElement21(InfiniteTableContextProvider, null));
-  return /* @__PURE__ */ createElement21(StrictMode, null, table);
+  const table = /* @__PURE__ */ createElement22(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ createElement22(InfiniteTableContextProvider, null));
+  return /* @__PURE__ */ createElement22(StrictMode, null, table);
 }
 InfiniteTable.defaultProps = {
   rowHeight: 40,