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

package/index.js

@@ -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,6 +2785,28 @@ var ReactHeadlessTableRenderer = class extends Logger {
         }
       });
     };
+    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) => {
       const itemElement = this.itemDOMElements[elementIndex];
       const cell = this.mappedCells.getRenderedCellAtElement(elementIndex);
@@ -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;
@@ -2894,6 +2972,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 +2982,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
     const removeOnScroll = brain.onScroll(this.adjustFixedElementsOnScroll);
     const removeOnSizeChange = brain.onAvailableSizeChange(() => {
       this.adjustFixedElementsOnScroll();
-      requestAnimationFrame(() => {
+      raf(() => {
         this.adjustFixedElementsOnScroll();
       });
     });
@@ -3438,19 +3518,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 +3573,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 +3915,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 +4033,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 +4374,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
@@ -4402,15 +4478,18 @@ 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
     });
   }
@@ -4424,18 +4503,25 @@ function InfiniteTableColumnCellFn(props) {
   };
   const stylingRenderParam = __spreadValues({
     value,
-    column
+    column,
+    isGroupRow
   }, rest);
-  let renderValue = value;
+  const renderValue = value;
   const renderParam = __spreadProps(__spreadValues({
     value,
     column,
     domRef,
-    groupRowInfo
+    groupRowInfo,
+    isGroupRow
   }, rest), {
     rowIndex,
     toggleGroupRow,
-    toggleCurrentGroupRow: () => toggleGroupRow(rowInfo.groupKeys),
+    toggleCurrentGroupRow: () => {
+      if (!rowInfo.isGroupRow) {
+        return;
+      }
+      toggleGroupRow(rowInfo.groupKeys);
+    },
     groupBy: computedDataSource.groupBy,
     pivotBy: computedDataSource.pivotBy
   });
@@ -4493,8 +4579,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 +4609,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}`);
@@ -4995,7 +5080,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 +5101,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 +5137,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 +5184,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 +5212,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 +5260,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 +5332,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 +5343,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 +5354,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 +5376,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 +5392,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 +5405,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,7 +5431,7 @@ function lazyGroup(groupParams, rootData) {
       }
       const dataObject = dataArray[i].data;
       const dataKeys = dataArray[i].keys;
-      let item = dataObject;
+      const item = dataObject;
       if (dataKeys.length) {
         const { field: groupByProperty } = groupBy[dataKeys.length - 1];
         const key = item[groupByProperty];
@@ -5363,6 +5439,9 @@ function lazyGroup(groupParams, rootData) {
       }
       const deepMapGroupValue = {
         items: [],
+        cache: false,
+        childrenLoading: false,
+        childrenAvailable: false,
         commonData: dataObject,
         reducerResults: dataArray[i].aggregations || {}
       };
@@ -5431,13 +5510,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 +5528,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 +5536,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 +5597,7 @@ function flatten(groupResult) {
   return result;
 }
 function getEnhancedGroupData(options, deepMapValue) {
-  const { groupBy, groupKeys, collapsed, parents, reducers } = options;
+  const { groupBy, groupKeys, collapsed, parents, reducers, lazyLoad } = options;
   const groupNesting = groupKeys.length;
   const {
     items: groupItems,
@@ -5523,7 +5608,7 @@ function getEnhancedGroupData(options, deepMapValue) {
   let data = null;
   if (Object.keys(reducerResults).length > 0) {
     data = commonData || {};
-    for (let key in reducers)
+    for (const key in reducers)
       if (reducers.hasOwnProperty(key)) {
         const reducer = reducers[key];
         const field = reducer.field;
@@ -5532,8 +5617,10 @@ function getEnhancedGroupData(options, deepMapValue) {
         }
       }
   }
+  let selfLoaded = true;
   let theValue = groupKeys[groupKeys.length - 1];
   if (typeof theValue === "string" && theValue.startsWith(NOT_LOADED_YET_KEY_PREFIX)) {
+    selfLoaded = false;
     theValue = null;
   }
   const enhancedGroupData = {
@@ -5543,13 +5630,19 @@ function getEnhancedGroupData(options, deepMapValue) {
     groupKeys,
     id: `${groupKeys}`,
     collapsed,
+    dataSourceHasGrouping: true,
+    selfLoaded,
     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 +5655,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 +5667,7 @@ function completeReducers(reducers, reducerResults, items) {
 }
 function enhancedFlatten(param) {
   const {
+    lazyLoad,
     groupResult,
     toPrimaryKey,
     groupRowsState,
@@ -5587,11 +5681,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 +5695,59 @@ function enhancedFlatten(param) {
       indexInParentGroups: Array.from(indexInParentGroups),
       indexInAll: result.length,
       groupKeys,
+      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 +5757,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,6 +5783,86 @@ function enhancedFlatten(param) {
   };
 }
 
+// src/components/DataSource/index.tsx
+var React26 = __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/components/hooks/useEffectWithChanges.ts
 var import_react31 = __toModule(require("react"));
 function useEffectWithChanges(fn, deps) {
@@ -5683,7 +5891,15 @@ function useEffectWithChanges(fn, deps) {
   }, useEffectDeps);
 }
 
+// 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);
 });
@@ -5691,11 +5907,6 @@ var SKIP_DATA_CHANGES_KEYS = {
   originalDataArray: true,
   changes: true
 };
-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;
   const sortInfo = componentState.multiSort ? componentState.sortInfo : (_b = (_a = componentState.sortInfo) == null ? void 0 : _a[0]) != null ? _b : null;
@@ -5707,6 +5918,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 +5956,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 +5969,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 +5993,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 +6005,93 @@ 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, _d;
+          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
           };
-          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 currentGroupRowInfo = existingGroupRowInfo != null ? existingGroupRowInfo : {
+              children: [],
+              childrenAvailable: true,
+              childrenLoading: false,
+              totalCount: newGroupRowInfo.totalCount,
+              cache: (_b = newGroupRowInfo.cache) != null ? _b : CACHE_DEFAULT
+            };
+            if (existingGroupRowInfo) {
+              existingGroupRowInfo.cache = newGroupRowInfo.cache;
+              existingGroupRowInfo.totalCount = newGroupRowInfo.totalCount;
+              existingGroupRowInfo.childrenLoading = false;
+              existingGroupRowInfo.childrenAvailable = true;
+              existingGroupRowInfo.error = newGroupRowInfo.error;
+            }
+            currentGroupRowInfo.children.length = currentGroupRowInfo.totalCount;
+            const start = (_c = dataParams.lazyLoadStartIndex) != null ? _c : 0;
+            const end = Math.min((_d = remoteData2.totalCount) != null ? _d : 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
+                });
+              }
             }
-            currentGroupRowInfo.items[i] = it;
+            if (!existingGroupRowInfo) {
+              lazyGroupData.set(theKey, currentGroupRowInfo);
+            }
+          } else {
+            if (parentKeys) {
+              newGroupRowInfo.children.forEach((child) => {
+                if (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 +6208,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 +6218,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 +6241,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 +6262,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,13 +6273,32 @@ 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;
+    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;
@@ -6044,7 +6330,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 +6340,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 +6510,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 +6535,7 @@ function initSetupState() {
   const dataArray = [];
   const originalLazyGroupData = new DeepMap();
   return {
+    lazyLoadCacheOfLoadedBatches: new DeepMap(),
     dataParams: void 0,
     notifyScrollbarsChange: buildSubscriptionCallback(),
     notifyScrollStop: buildSubscriptionCallback(),
@@ -6299,6 +6586,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 +6756,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 +6805,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 +6830,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 +6860,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 +6898,13 @@ 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 +6932,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 +6957,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 +6975,7 @@ function concludeReducer(params) {
       }, dataArray);
       const flattenResult = enhancedFlatten({
         groupResult,
+        lazyLoad: !!state.lazyLoad,
         reducers: state.aggregationReducers,
         toPrimaryKey,
         groupRowsState: state.groupRowsState,
@@ -6737,7 +7031,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 +7054,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 +7074,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 +7163,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 +7327,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;
       }
@@ -8121,7 +8440,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.0"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -8346,7 +8665,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 +8698,7 @@ var InfiniteTableComponent = React26.memo(function InfiniteTableComponent2() {
     bodySize,
     computed
   });
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     const dataSourceState = getDataSourceState();
     const onChange = debounce((renderRange) => {
       dataSourceState.notifyRenderRangeChange({
@@ -8392,32 +8711,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 +8767,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,