@infinite-table/infinite-react 0.1.3 → 0.2.2

package/index.js

@@ -640,7 +640,7 @@ __export(exports, {
 });
 
 // src/components/InfiniteTable/index.tsx
-var React35 = __toModule(require("react"));
+var React34 = __toModule(require("react"));
 
 // src/components/InfiniteTable/internalProps.ts
 var rootClassName = "Infinite";
@@ -785,7 +785,6 @@ function initSetupState() {
     draggingColumnId: null,
     pinnedStartScrollListener: new ScrollListener(),
     pinnedEndScrollListener: new ScrollListener(),
-    computedPivotColumns: void 0,
     columnsWhenInlineGroupRenderStrategy: void 0
   };
 }
@@ -816,7 +815,6 @@ var forwardProps = (setupState) => {
     pinnedStartMaxWidth: 1,
     pinnedEndMaxWidth: 1,
     pivotColumn: 1,
-    pivotRowLabelsColumn: 1,
     pivotColumnGroups: 1,
     onScrollbarsChange: 1,
     scrollStopDelay: (scrollStopDelay) => scrollStopDelay != null ? scrollStopDelay : 100,
@@ -873,7 +871,7 @@ var mapPropsToState = (params) => {
     groupBy,
     groupColumn: props.groupColumn
   });
-  const computedColumns = state.computedPivotColumns || state.columnsWhenGrouping || state.columnsWhenInlineGroupRenderStrategy || state.columns;
+  const computedColumns = state.columnsWhenGrouping || state.columnsWhenInlineGroupRenderStrategy || state.columns;
   return {
     groupRenderStrategy,
     groupBy,
@@ -1256,7 +1254,6 @@ var getComputedVisibleColumns = ({
       return false;
     }
     const result2 = isColumnVisible(columnVisibility, columnVisibilityAssumeVisible, colId);
-    console.log(columnVisibility, colId, result2);
     return result2;
   });
   const columnsArray = visibleColumnOrder.map((columnId) => columns.get(columnId)).filter(Boolean);
@@ -2045,7 +2042,7 @@ function useColumnGroups() {
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
 var import_react17 = __toModule(require("react"));
 
-// src/components/InfiniteTable/state/getComputedPivotColumnsFromDataSourcePivotColumns.tsx
+// src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
 var React6 = __toModule(require("react"));
 
 // src/utils/join.ts
@@ -2116,91 +2113,15 @@ var userSelect = { none: "_16lm1iwm" };
 var willChange = { transform: "_16lm1iw19" };
 var zIndex = { "1": "_16lm1iwe", "10": "_16lm1iwf", "1000": "_16lm1iwg", "10000": "_16lm1iwh", "100000": "_16lm1iwi" };
 
-// src/components/InfiniteTable/state/getComputedPivotColumnsFromDataSourcePivotColumns.tsx
-function getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, params) {
-  if (!pivotColumns) {
-    return void 0;
-  }
-  const {
-    pivotColumn,
-    pivotRowLabelsColumn,
-    pivotBy,
-    groupBy,
-    pivotTotalColumnPosition,
-    toggleGroupRow
-  } = params;
-  const computedPivotColumns = new Map();
-  pivotColumns.forEach((col, key) => {
-    if (col.pivotTotalColumn && pivotTotalColumnPosition === false) {
-      return;
-    }
-    let column = __spreadValues({}, col);
-    const isPivotRowLabelsColumn = !column.pivotColumn && !column.pivotTotalColumn;
-    if (!isPivotRowLabelsColumn) {
-      if (pivotColumn) {
-        if (typeof pivotColumn === "function") {
-          column = __spreadValues(__spreadValues({}, column), pivotColumn({
-            column,
-            pivotBy,
-            groupBy
-          }));
-        } else {
-          column = __spreadValues(__spreadValues({}, column), pivotColumn);
-        }
-      }
-    } else {
-      if (pivotRowLabelsColumn) {
-        if (typeof pivotRowLabelsColumn === "function") {
-          column = __spreadValues(__spreadValues({}, column), pivotRowLabelsColumn({
-            column,
-            pivotBy,
-            groupBy
-          }));
-        } else {
-          column = __spreadValues(__spreadValues({}, column), pivotRowLabelsColumn);
-        }
-      }
-      if (!column.render) {
-        column.render = (renderOptions) => {
-          var _a;
-          let { value, rowInfo, column: column2, groupBy: groupBy2 } = renderOptions;
-          if (column2.renderValue) {
-            value = column2.renderValue(renderOptions);
-          }
-          const showExpanderIcon = (((_a = rowInfo.groupKeys) == null ? void 0 : _a.length) || 0) < groupBy2.length;
-          return /* @__PURE__ */ React6.createElement("div", {
-            className: join(display.flex, alignItems.center, GroupRowExpanderCls)
-          }, showExpanderIcon ? /* @__PURE__ */ React6.createElement(ExpanderIcon, {
-            expanded: !rowInfo.collapsed,
-            onChange: () => {
-              toggleGroupRow(rowInfo.groupKeys);
-            }
-          }) : null, /* @__PURE__ */ React6.createElement("div", {
-            className: cssEllipsisClassName
-          }, value != null ? value : null));
-        };
-      }
-    }
-    if (!column.render && column.renderValue) {
-      column.render = (renderOptions) => {
-        return column.renderValue(renderOptions);
-      };
-    }
-    computedPivotColumns.set(key, column);
-  });
-  return computedPivotColumns;
-}
-
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
-var React7 = __toModule(require("react"));
 function getGroupColumnRender({
   groupIndexForColumn,
   groupRenderStrategy,
   toggleGroupRow
 }) {
   return (renderOptions) => {
-    var _a;
-    let { value, rowInfo, column } = renderOptions;
+    var _a, _b, _c;
+    let { value, rowInfo, column, groupBy, pivotBy } = renderOptions;
     if (column.renderValue) {
       value = column.renderValue(renderOptions);
     }
@@ -2225,14 +2146,20 @@ function getGroupColumnRender({
         return null;
       }
     }
-    return /* @__PURE__ */ React7.createElement("div", {
+    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__ */ React6.createElement(ExpanderIcon, {
+        expanded: !collapsed,
+        onChange: () => {
+          toggleGroupRow(groupKeys);
+        }
+      });
+      icon = column.renderGroupIcon ? column.renderGroupIcon(Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)) : defaultIcon;
+    }
+    return /* @__PURE__ */ React6.createElement("div", {
       className: join(display.flex, alignItems.center)
-    }, /* @__PURE__ */ React7.createElement(ExpanderIcon, {
-      expanded: !collapsed,
-      onChange: () => {
-        toggleGroupRow(groupKeys);
-      }
-    }), /* @__PURE__ */ React7.createElement("div", {
+    }, icon, /* @__PURE__ */ React6.createElement("div", {
       className: cssEllipsisClassName
     }, value != null ? value : null));
   };
@@ -2268,21 +2195,29 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
     groupByField: options.groupBy.map((g) => g.field),
     sortable: false,
     render: (renderOptions) => {
-      let { value, rowInfo, column } = renderOptions;
+      var _a, _b;
+      let { value, rowInfo, column, groupBy, pivotBy } = renderOptions;
       if (!rowInfo.isGroupRow) {
         return null;
       }
       if (column.renderValue) {
         value = column.renderValue(renderOptions);
       }
-      return /* @__PURE__ */ React7.createElement("div", {
+      const collapsed = rowInfo.collapsed;
+      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__ */ React6.createElement(ExpanderIcon, {
+          expanded: !collapsed,
+          onChange: () => {
+            toggleGroupRow(rowInfo.groupKeys);
+          }
+        });
+        icon = column.renderGroupIcon ? column.renderGroupIcon(Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)) : defaultIcon;
+      }
+      return /* @__PURE__ */ React6.createElement("div", {
         className: join(display.flex, alignItems.center, GroupRowExpanderCls)
-      }, /* @__PURE__ */ React7.createElement(ExpanderIcon, {
-        expanded: !rowInfo.collapsed,
-        onChange: () => {
-          toggleGroupRow(rowInfo.groupKeys);
-        }
-      }), /* @__PURE__ */ React7.createElement("div", {
+      }, icon, /* @__PURE__ */ React6.createElement("div", {
         className: cssEllipsisClassName
       }, value != null ? value : null));
     }
@@ -2301,7 +2236,7 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
 var import_react16 = __toModule(require("react"));
 
 // src/components/DataSource/index.tsx
-var React8 = __toModule(require("react"));
+var React7 = __toModule(require("react"));
 
 // src/utils/multisort/sortTypes.ts
 var numberComparator = function(first, second) {
@@ -2649,6 +2584,7 @@ var DeepMap = class {
 
 // src/utils/groupAndPivot/index.ts
 var LAZY_ROOT_KEY_FOR_GROUPS = "____root____";
+var NOT_LOADED_YET_KEY_PREFIX = "____not_loaded_yet____";
 function DEFAULT_TO_KEY(value) {
   return value;
 }
@@ -2718,7 +2654,10 @@ function lazyGroup(groupParams, rootData) {
           items: [],
           reducerResults: {}
         };
-        deepMap.set([...currentGroupKeys, `not-loaded-yet-${i}`], deepMapGroupValue2);
+        deepMap.set([
+          ...currentGroupKeys,
+          `${NOT_LOADED_YET_KEY_PREFIX}${i}`
+        ], deepMapGroupValue2);
         continue;
       }
       const dataObject = dataArray[i].data;
@@ -2877,6 +2816,10 @@ function getEnhancedGroupData(options, deepMapValue) {
         }
       }
   }
+  let theValue = groupKeys[groupKeys.length - 1];
+  if (typeof theValue === "string" && theValue.startsWith(NOT_LOADED_YET_KEY_PREFIX)) {
+    theValue = null;
+  }
   const enhancedGroupData = {
     data,
     groupCount: groupItems.length,
@@ -2890,8 +2833,9 @@ function getEnhancedGroupData(options, deepMapValue) {
     indexInParentGroups: options.indexInParentGroups,
     indexInGroup: options.indexInGroup,
     indexInAll: options.indexInAll,
-    value: groupKeys[groupKeys.length - 1],
-    groupBy: groupBy.slice(0, groupNesting),
+    value: theValue,
+    rootGroupBy: groupBy,
+    groupBy: groupNesting === groupBy.length ? groupBy : groupBy.slice(0, groupNesting),
     isGroupRow: true,
     pivotValuesMap: pivotDeepMap,
     groupNesting,
@@ -3013,11 +2957,33 @@ function useEffectWithChanges(fn, deps) {
   }, useEffectDeps);
 }
 
+// src/components/utils/debounce.ts
+function debounce(fn, { wait }) {
+  let timeout = null;
+  return function(...args) {
+    const context = this;
+    if (timeout !== null) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+      fn.apply(context, args);
+    }, wait);
+  };
+}
+
 // src/components/DataSource/privateHooks/useLoadData.ts
+var getRafPromise = () => new Promise((resolve) => {
+  requestAnimationFrame(resolve);
+});
 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;
@@ -3057,15 +3023,34 @@ function buildDataSourceDataParams(componentState, overrides) {
 }
 function loadData(data, componentState, actions, overrides) {
   const dataParams = buildDataSourceDataParams(componentState, overrides);
+  if (componentState.fullLazyLoad && dataParams.groupKeys) {
+    const lazyGroupData = componentState.originalLazyGroupData;
+    const key = [LAZY_ROOT_KEY_FOR_GROUPS, ...dataParams.groupKeys];
+    const existingGroupRowInfo = lazyGroupData.get(key);
+    if (existingGroupRowInfo && existingGroupRowInfo.cache) {
+      const items = existingGroupRowInfo.items;
+      const len = items.length;
+      let allLoaded = true;
+      for (let i = 0; i < len; i++) {
+        if (items[i] == null) {
+          allLoaded = false;
+          break;
+        }
+      }
+      if (allLoaded) {
+        return Promise.resolve(true);
+      }
+    }
+  }
   if (typeof data === "function") {
     data = data(dataParams);
   }
   const dataIsPromise = typeof data === "object" && typeof data.then === "function";
-  if (dataIsPromise) {
+  if (dataIsPromise && !componentState.fullLazyLoad) {
     actions.loading = true;
   }
-  Promise.resolve(data).then((dataParam) => {
-    var _a, _b, _c;
+  return Promise.resolve(data).then((dataParam) => {
+    var _a, _b, _c, _d;
     let dataArray = [];
     let skipAssign = false;
     if (Array.isArray(dataParam.data)) {
@@ -3078,9 +3063,10 @@ function loadData(data, componentState, actions, overrides) {
         actions.pivotMappings = remoteData.mappings;
       }
       if (componentState.fullLazyLoad && dataParams.groupKeys) {
-        const lazyGroupData = DeepMap.clone(componentState.originalLazyGroupData);
+        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
         };
@@ -3088,11 +3074,15 @@ function loadData(data, componentState, actions, overrides) {
           const existingGroupRowInfo = lazyGroupData.get(key);
           const currentGroupRowInfo = existingGroupRowInfo != null ? existingGroupRowInfo : {
             items: [],
-            totalCount: newGroupRowInfo.totalCount
+            totalCount: newGroupRowInfo.totalCount,
+            cache: (_b = newGroupRowInfo.cache) != null ? _b : true
           };
+          if (existingGroupRowInfo) {
+            existingGroupRowInfo.cache = newGroupRowInfo.cache;
+          }
           currentGroupRowInfo.items.length = currentGroupRowInfo.totalCount;
-          const start = (_b = dataParams.lazyLoadStartIndex) != null ? _b : 0;
-          const end = start + ((_c = dataParams.lazyLoadBatchSize) != null ? _c : dataArray.length);
+          const start = (_c = dataParams.lazyLoadStartIndex) != null ? _c : 0;
+          const end = Math.min((_d = remoteData.totalCount) != null ? _d : start + dataParams.lazyLoadBatchSize);
           for (let i = start; i < end; i++) {
             currentGroupRowInfo.items[i] = newGroupRowInfo.items[i - start];
           }
@@ -3103,7 +3093,7 @@ function loadData(data, componentState, actions, overrides) {
           lazyGroupData.set(key, newGroupRowInfo);
         }
         skipAssign = true;
-        actions.originalLazyGroupData = lazyGroupData;
+        actions.originalLazyGroupDataChangeDetect = getChangeDetect();
       }
     } else {
       dataArray = dataParam;
@@ -3111,7 +3101,7 @@ function loadData(data, componentState, actions, overrides) {
     if (!skipAssign) {
       actions.originalDataArray = dataArray;
     }
-    if (dataIsPromise) {
+    if (dataIsPromise && !componentState.fullLazyLoad) {
       actions.loading = false;
     }
   });
@@ -3130,9 +3120,7 @@ function useLoadData() {
     pivotBy,
     livePagination,
     livePaginationCursor,
-    cursorId: stateCursorId,
-    lazyLoadBatchSize,
-    notifyScrollStop
+    cursorId: stateCursorId
   } = componentState;
   const [scrollbars, setScrollbars] = (0, import_react15.useState)({
     vertical: false,
@@ -3173,33 +3161,7 @@ function useLoadData() {
     cursorId: livePagination ? stateCursorId : null
   };
   const initialRef = (0, import_react15.useRef)(true);
-  (0, import_react15.useEffect)(() => {
-    if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
-      return notifyScrollStop.onChange((param) => {
-        console.log("scroll stop", param);
-        if (!param) {
-          return;
-        }
-        const componentState2 = getComponentState();
-        const {
-          firstVisibleRowIndex: startIndex,
-          lastVisibleRowIndex: endIndex
-        } = param;
-        const firstBatchStart = Math.floor(startIndex / lazyLoadBatchSize) * lazyLoadBatchSize;
-        const lastBatchStart = Math.floor(endIndex / lazyLoadBatchSize) * lazyLoadBatchSize;
-        const isRowLoaded = (index) => componentState2.dataArray[index].data != null;
-        for (let batchStartIndex = firstBatchStart; batchStartIndex <= lastBatchStart; batchStartIndex = batchStartIndex + lazyLoadBatchSize) {
-          if (!isRowLoaded(batchStartIndex)) {
-            loadData(componentState2.data, componentState2, actions, {
-              lazyLoadBatchSize,
-              lazyLoadStartIndex: batchStartIndex
-            });
-          }
-        }
-      });
-    }
-    return;
-  }, [lazyLoadBatchSize]);
+  useLazyLoadRange();
   useEffectWithChanges(() => {
     const componentState2 = getComponentState();
     if (typeof componentState2.data !== "function") {
@@ -3220,6 +3182,126 @@ function useLoadData() {
     }
   }, depsObject);
 }
+function useLazyLoadRange() {
+  const {
+    getComponentState,
+    componentActions: actions,
+    componentState
+  } = useComponentState();
+  const loadingCache = (0, import_react15.useMemo)(() => {
+    return new Map();
+  }, [componentState.data]);
+  globalThis.loadingCache = loadingCache;
+  const {
+    lazyLoadBatchSize,
+    notifyRenderRangeChange,
+    dataArray,
+    scrollStopDelayUpdatedByTable
+  } = componentState;
+  const latestRenderRangeRef = (0, import_react15.useRef)(null);
+  const loadRange = (param, cache = loadingCache) => {
+    const componentState2 = getComponentState();
+    param = param || latestRenderRangeRef.current;
+    if (!param) {
+      return;
+    }
+    const { renderStartIndex: startIndex, renderEndIndex: endIndex } = param;
+    if (!lazyLoadBatchSize || lazyLoadBatchSize <= 0) {
+      return;
+    }
+    lazyLoadRange({
+      startIndex,
+      endIndex,
+      lazyLoadBatchSize,
+      componentState: componentState2,
+      componentActions: actions
+    }, cache);
+  };
+  const debouncedLoadRange = (0, import_react15.useMemo)(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
+  (0, import_react15.useEffect)(() => {
+    if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
+      return notifyRenderRangeChange.onChange((param) => {
+        latestRenderRangeRef.current = param;
+        loadRange(param, loadingCache);
+      });
+    }
+    return;
+  }, [lazyLoadBatchSize, loadingCache]);
+  (0, import_react15.useEffect)(() => {
+    if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
+      debouncedLoadRange();
+    }
+    return;
+  }, [dataArray]);
+}
+function lazyLoadRange(options, cache) {
+  const {
+    startIndex,
+    endIndex,
+    lazyLoadBatchSize,
+    componentState,
+    componentActions
+  } = options;
+  const { dataArray } = componentState;
+  const isRowLoaded = (index) => dataArray[index].data != null;
+  const perGroupFnCalls = new DeepMap();
+  const rootGroupKeys = ["_______xxx______"];
+  for (let i = startIndex; i <= endIndex; i++) {
+    const rowInfo = dataArray[i];
+    if (!rowInfo) {
+      continue;
+    }
+    const rowLoaded = rowInfo.data != null;
+    const parentGroupKeys = rowInfo.groupKeys ? [...rowInfo.groupKeys] : [];
+    if (rowInfo.groupKeys) {
+      parentGroupKeys.pop();
+    }
+    const cacheKeys = parentGroupKeys.length ? parentGroupKeys : rootGroupKeys;
+    const indexInGroup = rowInfo.indexInGroup;
+    if (!rowLoaded) {
+      let fnCalls = perGroupFnCalls.get(cacheKeys);
+      const batchStartIndexInGroup = Math.floor(indexInGroup / lazyLoadBatchSize) * lazyLoadBatchSize;
+      const offset = rowInfo.indexInGroup - batchStartIndexInGroup;
+      const absoluteIndexOfBatchStart = dataArray[rowInfo.indexInAll - offset].indexInAll;
+      const batchStartRowLoaded = isRowLoaded(absoluteIndexOfBatchStart);
+      const batchStartRowId = dataArray[absoluteIndexOfBatchStart].id;
+      if (batchStartRowLoaded || (fnCalls == null ? void 0 : fnCalls[batchStartRowId])) {
+        continue;
+      }
+      const shouldSetFnCalls = !fnCalls;
+      fnCalls = fnCalls || {};
+      const currentFnCall = {
+        lazyLoadStartIndex: batchStartIndexInGroup,
+        lazyLoadBatchSize,
+        groupKeys: parentGroupKeys
+      };
+      if (!fnCalls[batchStartRowId]) {
+        fnCalls[batchStartRowId] = currentFnCall;
+      }
+      if (shouldSetFnCalls) {
+        perGroupFnCalls.set(cacheKeys, fnCalls);
+      }
+    }
+  }
+  let initialPromise = Promise.resolve(true);
+  const allFnCalls = [];
+  perGroupFnCalls.topDownValues().forEach((record) => {
+    allFnCalls.push(...Object.values(record));
+  });
+  allFnCalls.reduce((promise, fnCall) => {
+    const cacheKey = `${fnCall.groupKeys.join("-")}:${fnCall.lazyLoadStartIndex}`;
+    if (cache && cache.has(cacheKey)) {
+      return promise;
+    }
+    cache == null ? void 0 : cache.set(cacheKey, true);
+    const args = [componentState.data, componentState, componentActions, fnCall];
+    return promise.then(() => getRafPromise()).then(() => loadData(...args)).then(() => {
+      requestAnimationFrame(() => {
+        cache == null ? void 0 : cache.delete(cacheKey);
+      });
+    });
+  }, initialPromise);
+}
 
 // src/components/DataSource/state/normalizeSortInfo.ts
 var EMPTY_ARRAY = Object.freeze([]);
@@ -3419,8 +3501,11 @@ function initSetupState2() {
     dataParams: void 0,
     notifyScrollbarsChange: buildSubscriptionCallback(),
     notifyScrollStop: buildSubscriptionCallback(),
+    notifyRenderRangeChange: buildSubscriptionCallback(),
     pivotTotalColumnPosition: "end",
+    scrollStopDelayUpdatedByTable: 100,
     originalLazyGroupData,
+    originalLazyGroupDataChangeDetect: 0,
     originalDataArray,
     cursorId: defaultCursorId,
     showSeparatePivotColumnForSingleAggregation: false,
@@ -3605,23 +3690,7 @@ function getPivotColumnsAndColumnGroups({
   const aggregationReducers = Object.keys(reducers).map((key) => {
     return __spreadProps(__spreadValues({}, reducers[key]), { id: key });
   });
-  const columns = new Map([
-    [
-      "labels",
-      {
-        header: "Row labels",
-        pivotBy,
-        valueGetter: (params) => {
-          var _a;
-          const { rowInfo } = params;
-          if (!rowInfo.data) {
-            return "Loading ... TODO replace this with a loading indicator";
-          }
-          return rowInfo.groupKeys ? rowInfo.groupKeys[((_a = rowInfo.groupKeys) == null ? void 0 : _a.length) - 1] : null;
-        }
-      }
-    ]
-  ]);
+  const columns = new Map([]);
   const columnGroups = new Map();
   const isSingleAggregationColumn = !showSeparatePivotColumnForSingleAggregation && aggregationReducers.length === 1;
   deepMap.visitDepthFirst((_value, keys, _indexInGroup, next) => {
@@ -3793,6 +3862,7 @@ function concludeReducer(params) {
     "generateGroupRows",
     "originalDataArray",
     "originalLazyGroupData",
+    "originalLazyGroupDataChangeDetect",
     "groupBy",
     "groupRowsState",
     "pivotBy",
@@ -3883,7 +3953,7 @@ function DataSourceWithContext(props) {
   if (typeof children === "function") {
     children = children(computedValues);
   }
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children);
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, children);
 }
 var DataSourceRoot = getComponentStateRoot({
   initSetupState: initSetupState2,
@@ -3906,14 +3976,14 @@ function DataSourceCmp({ children }) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
-  return /* @__PURE__ */ React8.createElement(DataSourceContext.Provider, {
+  return /* @__PURE__ */ React7.createElement(DataSourceContext.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ React8.createElement(DataSourceWithContext, {
+  }, /* @__PURE__ */ React7.createElement(DataSourceWithContext, {
     children
   }));
 }
 function DataSource(props) {
-  return /* @__PURE__ */ React8.createElement(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ React8.createElement(DataSourceCmp, {
+  return /* @__PURE__ */ React7.createElement(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ React7.createElement(DataSourceCmp, {
     children: props.children
   }));
 }
@@ -3964,9 +4034,9 @@ function useColumnsWhen() {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
   useColumnsWhenInlineGroupRenderStrategy(groupByMap);
-  useColumnsWhenPivoting();
-  useColumnsWhenGrouping();
+  const { toggleGroupRow } = useColumnsWhenGrouping();
   useHideEmptyGroupColumns(groupByMap);
+  return { toggleGroupRow };
 }
 function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
   const toggleGroupRow = useToggleGroupRow();
@@ -3976,6 +4046,9 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
   } = useComponentState();
   function computeColumnsWhenInlineGroupRenderStrategy(columns2, groupByMap2, groupRenderStrategy2, toggleGroupRow2) {
     const computedColumns = new Map();
+    if (groupRenderStrategy2 !== "inline") {
+      return;
+    }
     columns2.forEach((column, id) => {
       let base = {};
       const groupByForColumn = groupByMap2.get(column.field);
@@ -4035,51 +4108,32 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
     });
   }, [columns, groupByMap, groupRenderStrategy, toggleGroupRow]);
 }
-function useColumnsWhenPivoting() {
+function useColumnsWhenGrouping() {
   const {
     componentState: { groupBy, pivotBy }
   } = useDataSourceContextValue();
   const {
     componentActions,
     componentState: {
+      columns,
+      groupColumn,
+      groupRenderStrategy,
       pivotColumns,
       pivotColumn,
-      pivotRowLabelsColumn,
       pivotTotalColumnPosition
     }
   } = useComponentState();
   const toggleGroupRow = useToggleGroupRow();
   (0, import_react17.useEffect)(() => {
-    const computedPivotColumns = getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, {
-      pivotColumn,
-      pivotRowLabelsColumn,
-      pivotTotalColumnPosition,
-      pivotBy,
-      groupBy,
-      toggleGroupRow
-    });
-    componentActions.computedPivotColumns = computedPivotColumns;
-  }, [pivotColumns, pivotColumn, pivotRowLabelsColumn]);
-}
-function useColumnsWhenGrouping() {
-  const {
-    componentState: { groupBy }
-  } = useDataSourceContextValue();
-  const {
-    componentActions,
-    componentState: { columns, groupColumn, groupRenderStrategy, pivotColumns }
-  } = useComponentState();
-  const toggleGroupRow = useToggleGroupRow();
-  (0, import_react17.useEffect)(() => {
-    if (pivotColumns) {
-      return;
-    }
     const update = () => {
       const columnsWhenGrouping = getColumnsWhenGrouping({
         columns,
         groupColumn,
-        groupRenderStrategy,
+        pivotColumn,
+        pivotTotalColumnPosition,
+        groupRenderStrategy: groupRenderStrategy === "inline" ? "single-column" : groupRenderStrategy,
         groupBy,
+        pivotBy,
         pivotColumns,
         toggleGroupRow
       });
@@ -4091,7 +4145,17 @@ function useColumnsWhenGrouping() {
       delete: update,
       clear: update
     });
-  }, [columns, groupBy, groupColumn, groupRenderStrategy, pivotColumns]);
+  }, [
+    columns,
+    groupBy,
+    pivotBy,
+    groupColumn,
+    groupRenderStrategy,
+    pivotColumns,
+    pivotTotalColumnPosition,
+    pivotColumn
+  ]);
+  return { toggleGroupRow };
 }
 function useHideEmptyGroupColumns(groupRowsMap) {
   const {
@@ -4158,14 +4222,14 @@ function getColumnsWhenGrouping(params) {
   const {
     pivotColumns,
     groupBy,
+    pivotBy,
     groupColumn,
+    pivotTotalColumnPosition,
+    pivotColumn,
     groupRenderStrategy,
     toggleGroupRow,
     columns
   } = params;
-  if (pivotColumns) {
-    return void 0;
-  }
   if (groupRenderStrategy === "inline") {
     return void 0;
   }
@@ -4175,6 +4239,7 @@ function getColumnsWhenGrouping(params) {
       const generatedGroupColumn = getColumnForGroupBy({
         groupByForColumn,
         groupBy,
+        pivotBy,
         groupIndexForColumn,
         groupCount: arr.length,
         groupRenderStrategy
@@ -4185,13 +4250,40 @@ function getColumnsWhenGrouping(params) {
     const singleGroupColumn = getSingleGroupColumn({
       groupCount: groupBy.length,
       groupBy,
+      pivotBy,
       groupRenderStrategy
     }, toggleGroupRow, groupColumn);
     computedColumns.set(singleGroupColumn.id || "group-by", singleGroupColumn);
   }
-  columns.forEach((col, colId) => {
-    computedColumns.set(colId, col);
-  });
+  if (pivotColumns) {
+    pivotColumns.forEach((col, key) => {
+      if (col.pivotTotalColumn && pivotTotalColumnPosition === false) {
+        return;
+      }
+      let column = __spreadValues({}, col);
+      if (pivotColumn) {
+        if (typeof pivotColumn === "function") {
+          column = __spreadValues(__spreadValues({}, column), pivotColumn({
+            column,
+            pivotBy,
+            groupBy
+          }));
+        } else {
+          column = __spreadValues(__spreadValues({}, column), pivotColumn);
+        }
+      }
+      if (!column.render && column.renderValue) {
+        column.render = (renderOptions) => {
+          return column.renderValue(renderOptions);
+        };
+      }
+      computedColumns.set(key, column);
+    });
+  } else {
+    columns.forEach((col, colId) => {
+      computedColumns.set(colId, col);
+    });
+  }
   return computedColumns.size ? computedColumns : void 0;
 }
 
@@ -4230,7 +4322,7 @@ function useComputed() {
   }, [showSeparatePivotColumnForSingleAggregation]);
   const { multiSort } = dataSourceState;
   useColumnGroups();
-  useColumnsWhen();
+  const { toggleGroupRow } = useColumnsWhen();
   const setSortInfo = (0, import_react18.useCallback)((sortInfo) => {
     var _a2;
     const newSortInfo = multiSort ? sortInfo : (_a2 = sortInfo[0]) != null ? _a2 : null;
@@ -4299,6 +4391,7 @@ function useComputed() {
   const computedPinnedStartOverflow = computedPinnedStartWidth ? computedPinnedStartColumnsWidth > computedPinnedStartWidth : false;
   const computedPinnedEndOverflow = computedPinnedEndWidth ? computedPinnedEndColumnsWidth > computedPinnedEndWidth : false;
   return {
+    toggleGroupRow,
     computedPinnedStartOverflow,
     computedPinnedEndOverflow,
     computedPinnedStartWidth,
@@ -4322,7 +4415,7 @@ function useComputed() {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
-var React9 = __toModule(require("react"));
+var React8 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useInternalProps.ts
 var useInternalProps = () => {
@@ -4330,9 +4423,9 @@ var useInternalProps = () => {
 };
 
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
-var InfiniteTableBody = React9.forwardRef(function InfiniteTableBody2(props, ref) {
+var InfiniteTableBody = React8.forwardRef(function InfiniteTableBody2(props, ref) {
   const { rootClassName: rootClassName12 } = useInternalProps();
-  return /* @__PURE__ */ React9.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React8.createElement("div", __spreadProps(__spreadValues({
     ref
   }, props), {
     className: join(`${rootClassName12}Body`, position.relative, flex["1"], transformTranslateZero, props.className)
@@ -4340,16 +4433,16 @@ var InfiniteTableBody = React9.forwardRef(function InfiniteTableBody2(props, ref
 });
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
-var React21 = __toModule(require("react"));
+var React20 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/ScrollbarPlaceholder.tsx
-var React10 = __toModule(require("react"));
+var React9 = __toModule(require("react"));
 function HorizontalScrollbarPlaceholderFn(props) {
   const scrollbarWidth2 = getScrollbarWidth();
   if (!scrollbarWidth2) {
     return null;
   }
-  return /* @__PURE__ */ React10.createElement("div", {
+  return /* @__PURE__ */ React9.createElement("div", {
     "data-name": "horizontal-scrollbar-placeholder",
     style: __spreadValues({
       position: "absolute",
@@ -4359,13 +4452,13 @@ function HorizontalScrollbarPlaceholderFn(props) {
     }, props.style)
   });
 }
-var HorizontalScrollbarPlaceholder = React10.memo(HorizontalScrollbarPlaceholderFn);
+var HorizontalScrollbarPlaceholder = React9.memo(HorizontalScrollbarPlaceholderFn);
 function VerticalScrollbarPlaceholderFn(props) {
   const scrollbarWidth2 = getScrollbarWidth();
   if (!scrollbarWidth2) {
     return null;
   }
-  return /* @__PURE__ */ React10.createElement("div", {
+  return /* @__PURE__ */ React9.createElement("div", {
     "data-name": "vertical-scrollbar-placeholder",
     style: __spreadValues({
       position: "absolute",
@@ -4375,7 +4468,7 @@ function VerticalScrollbarPlaceholderFn(props) {
     }, props.style)
   });
 }
-var VerticalScrollbarPlaceholder = React10.memo(VerticalScrollbarPlaceholderFn);
+var VerticalScrollbarPlaceholder = React9.memo(VerticalScrollbarPlaceholderFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
 var import_createRuntimeFn3 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
@@ -4390,15 +4483,15 @@ var HeaderSortIconCls = "_12zfob11 _16lm1iw1";
 var HeaderWrapperCls = "_12zfob1v _16lm1iw16 _16lm1iw1 _16lm1iwj _16lm1iw10";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
-var React17 = __toModule(require("react"));
+var React16 = __toModule(require("react"));
 var import_react26 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
-var React13 = __toModule(require("react"));
+var React12 = __toModule(require("react"));
 var import_react22 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
-var React11 = __toModule(require("react"));
+var React10 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useInfiniteTableState.ts
 var import_react19 = __toModule(require("react"));
@@ -4457,16 +4550,16 @@ function InfiniteTableCellFn(props) {
       style.transform = `translate3d(${shiftLeft}px, 0px, 0px)`;
     }
   }
-  return /* @__PURE__ */ React11.createElement("div", __spreadProps(__spreadValues({}, domProps), {
+  return /* @__PURE__ */ React10.createElement("div", __spreadProps(__spreadValues({}, domProps), {
     ref: domRef,
     style,
     "data-name": `Cell`,
     className: join(domProps.className, columnAlignCellStyle[(_b = column.align) != null ? _b : "start"], justifyContent[(_c = column.align) != null ? _c : "start"], InfiniteTableCellClassName, CellCls2, shifting ? `${InfiniteTableCellClassName}--shifting ${CellClsVariants.shifting}` : "")
-  }), beforeChildren, cssEllipsis ? /* @__PURE__ */ React11.createElement("div", {
+  }), beforeChildren, cssEllipsis ? /* @__PURE__ */ React10.createElement("div", {
     className: `${rootClassName2}Cell_content ${cssEllipsisClassName}`
   }, children) : children, afterChildren);
 }
-var InfiniteTableCell = React11.memo(InfiniteTableCellFn);
+var InfiniteTableCell = React10.memo(InfiniteTableCellFn);
 
 // src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
 var import_binary_search = __toModule(require_binary_search());
@@ -4661,7 +4754,7 @@ function useCellClassName(column, baseClasses, variants, extraFlags) {
 var import_react_dom = __toModule(require("react-dom"));
 
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
-var React12 = __toModule(require("react"));
+var React11 = __toModule(require("react"));
 var import_react21 = __toModule(require("react"));
 var defaultLineStyle = {
   marginTop: 2,
@@ -4715,18 +4808,18 @@ function SortIcon(props) {
   if (direction === -1) {
     indexStyle.top = "100%";
   }
-  return /* @__PURE__ */ React12.createElement("div", {
+  return /* @__PURE__ */ React11.createElement("div", {
     style: __spreadProps(__spreadValues({}, style), { width: size }),
     className: join(className, "ITableIcon", "ITableIcon-sort")
-  }, showIndex ? /* @__PURE__ */ React12.createElement("div", {
+  }, showIndex ? /* @__PURE__ */ React11.createElement("div", {
     "data-name": "index",
     style: indexStyle
-  }, index) : null, /* @__PURE__ */ React12.createElement("div", {
+  }, index) : null, /* @__PURE__ */ React11.createElement("div", {
     style: __spreadValues({ width: sizes[0] }, lineStyle),
     onTransitionEnd
-  }), /* @__PURE__ */ React12.createElement("div", {
+  }), /* @__PURE__ */ React11.createElement("div", {
     style: __spreadValues({ width: sizes[1] }, lineStyle)
-  }), /* @__PURE__ */ React12.createElement("div", {
+  }), /* @__PURE__ */ React11.createElement("div", {
     style: __spreadValues({ width: sizes[2] }, lineStyle)
   }));
 }
@@ -4757,7 +4850,7 @@ function InfiniteTableHeaderCell(props) {
     });
   }
   header = header != null ? header : column.name;
-  const sortTool = /* @__PURE__ */ React13.createElement(SortIcon, {
+  const sortTool = /* @__PURE__ */ React12.createElement(SortIcon, {
     index: column.computedMultiSort ? column.computedSortIndex + 1 : void 0,
     className: `${baseCls}__sort-icon ${HeaderSortIconCls}`,
     direction: column.computedSorted ? column.computedSortedAsc ? 1 : -1 : 0
@@ -4795,7 +4888,7 @@ function InfiniteTableHeaderCell(props) {
   let offset = offsetFromProps != null ? offsetFromProps : virtualized ? 0 : column.computedPinningOffset;
   let draggingProxy = null;
   if (dragging) {
-    draggingProxy = /* @__PURE__ */ React13.createElement("div", {
+    draggingProxy = /* @__PURE__ */ React12.createElement("div", {
       className: `${baseCls}Proxy ${HeaderCellProxy}`,
       style: {
         position: "absolute",
@@ -4808,7 +4901,7 @@ function InfiniteTableHeaderCell(props) {
     }, header);
     draggingProxy = (0, import_react_dom.createPortal)(draggingProxy, portalDOMRef.current);
   }
-  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(InfiniteTableCell, {
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(InfiniteTableCell, {
     domRef: ref,
     column,
     "data-name": `HeaderCell`,
@@ -4824,11 +4917,11 @@ function InfiniteTableHeaderCell(props) {
 }
 
 // src/components/RawList/index.tsx
-var React16 = __toModule(require("react"));
+var React15 = __toModule(require("react"));
 var import_react25 = __toModule(require("react"));
 
 // src/components/RawList/AvoidReactDiff.tsx
-var React14 = __toModule(require("react"));
+var React13 = __toModule(require("react"));
 var import_react23 = __toModule(require("react"));
 function AvoidReactDiffFn(props) {
   const [children, setChildren] = (0, import_react23.useState)(props.updater.get());
@@ -4838,15 +4931,15 @@ function AvoidReactDiffFn(props) {
     });
     return remove;
   }, [props.updater]);
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, children);
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, children);
 }
-var AvoidReactDiff = React14.memo(AvoidReactDiffFn);
+var AvoidReactDiff = React13.memo(AvoidReactDiffFn);
 
 // src/components/RawList/useVirtualRenderer.ts
 var import_react24 = __toModule(require("react"));
 
 // src/components/RawList/ReactVirtualRenderer.tsx
-var React15 = __toModule(require("react"));
+var React14 = __toModule(require("react"));
 
 // src/components/RawList/MappedItems.ts
 var MappedItems = class extends Logger {
@@ -5091,7 +5184,7 @@ var ReactVirtualRenderer = class extends Logger {
     };
     this.itemDOMRefs[elementIndex] = domRef;
     this.updaters[elementIndex] = buildSubscriptionCallback();
-    const item = /* @__PURE__ */ React15.createElement(AvoidReactDiff, {
+    const item = /* @__PURE__ */ React14.createElement(AvoidReactDiff, {
       key: elementIndex,
       name: `${elementIndex}`,
       updater: this.updaters[elementIndex]
@@ -5188,11 +5281,11 @@ function RawListFn(props) {
     });
     return remove;
   }, [brain, onRenderUpdater]);
-  return /* @__PURE__ */ React16.createElement(AvoidReactDiff, {
+  return /* @__PURE__ */ React15.createElement(AvoidReactDiff, {
     updater: onRenderUpdater
   });
 }
-var RawList = React16.memo(RawListFn);
+var RawList = React15.memo(RawListFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 var debug3 = dbg("Header");
@@ -5213,7 +5306,7 @@ function InfiniteTableHeaderFn(props) {
       }
       return null;
     }
-    return /* @__PURE__ */ React17.createElement(InfiniteTableHeaderCell, {
+    return /* @__PURE__ */ React16.createElement(InfiniteTableHeaderCell, {
       domRef: domRef2,
       column,
       headerHeight,
@@ -5238,18 +5331,18 @@ function InfiniteTableHeaderFn(props) {
     className: join(TableHeaderClassName, `${TableHeaderClassName}--virtualized`, className, headerCls),
     style
   };
-  return /* @__PURE__ */ React17.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React17.createElement(RawList, {
+  return /* @__PURE__ */ React16.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React16.createElement(RawList, {
     brain,
     renderItem: renderColumn
   }));
 }
-var InfiniteTableHeader = React17.memo(InfiniteTableHeaderFn);
+var InfiniteTableHeader = React16.memo(InfiniteTableHeaderFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderUnvirtualized.tsx
-var React20 = __toModule(require("react"));
+var React19 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/renderColumnHeaderGroups.tsx
-var React19 = __toModule(require("react"));
+var React18 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/buildColumnAndGroupTree.ts
 function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap) {
@@ -5339,7 +5432,7 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
-var React18 = __toModule(require("react"));
+var React17 = __toModule(require("react"));
 var TableHeaderGroupClassName = `${rootClassName}HeaderGroup`;
 function InfiniteTableHeaderGroup(props) {
   const { columnGroup, height, headerHeight } = props;
@@ -5353,16 +5446,16 @@ function InfiniteTableHeaderGroup(props) {
     width: columnGroup.computedWidth,
     height
   };
-  return /* @__PURE__ */ React18.createElement("div", {
+  return /* @__PURE__ */ React17.createElement("div", {
     "data-group-id": columnGroup.id,
     className: join(HeaderGroupCls, TableHeaderGroupClassName, `${TableHeaderGroupClassName}--unvirtualized`),
     style
-  }, /* @__PURE__ */ React18.createElement("div", {
+  }, /* @__PURE__ */ React17.createElement("div", {
     className: join(`${TableHeaderGroupClassName}__header`, HeaderGroup_Header),
     style: { height: headerHeight }
-  }, /* @__PURE__ */ React18.createElement("div", {
+  }, /* @__PURE__ */ React17.createElement("div", {
     className: join(`${TableHeaderGroupClassName}__header-content`, cssEllipsisClassName)
-  }, header)), /* @__PURE__ */ React18.createElement("div", {
+  }, header)), /* @__PURE__ */ React17.createElement("div", {
     className: join(`${TableHeaderGroupClassName}__children`, HeaderGroup_Children)
   }, props.children));
 }
@@ -5385,7 +5478,7 @@ function renderColumnHeaderGroups(config) {
     return items2.map((colGroupItem) => {
       if (colGroupItem.type === "column") {
         const col = colGroupItem.ref;
-        return /* @__PURE__ */ React19.createElement(InfiniteTableHeaderCell, {
+        return /* @__PURE__ */ React18.createElement(InfiniteTableHeaderCell, {
           key: col.id,
           headerHeight: (columnGroupsMaxDepth - colGroupItem.depth + 2) * headerHeight,
           column: col,
@@ -5399,7 +5492,7 @@ function renderColumnHeaderGroups(config) {
         colIds.push(col.id);
         return col;
       });
-      return /* @__PURE__ */ React19.createElement(InfiniteTableHeaderGroup, {
+      return /* @__PURE__ */ React18.createElement(InfiniteTableHeaderGroup, {
         key: `${colGroupItem.uniqueGroupId.join("/")}`,
         columns: columns2,
         height: (columnGroupsMaxDepth - colGroupItem.depth + 2) * headerHeight,
@@ -5452,9 +5545,9 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
     },
     computed: { computedVisibleColumnsMap: columnsMap }
   } = useInfiniteTable();
-  const domRef = React20.useRef(null);
+  const domRef = React19.useRef(null);
   const hasColumnGroups = computedColumnGroups.size > 0;
-  const columnHeaderGroups = React20.useMemo(() => {
+  const columnHeaderGroups = React19.useMemo(() => {
     return hasColumnGroups ? renderColumnHeaderGroups({
       columnGroups: computedColumnGroups,
       columnGroupsDepthsMap,
@@ -5473,7 +5566,7 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
     columnGroupsMaxDepth
   ]);
   const children = hasColumnGroups ? columnHeaderGroups : columns.map((c) => {
-    return /* @__PURE__ */ React20.createElement(InfiniteTableHeaderCell, {
+    return /* @__PURE__ */ React19.createElement(InfiniteTableHeaderCell, {
       key: c.id,
       headerHeight,
       column: c,
@@ -5496,20 +5589,20 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
     const removeOnScroll = scroller.onScroll(onScroll);
     return removeOnScroll;
   }, [brain, scrollListener]);
-  return /* @__PURE__ */ React20.createElement("div", __spreadProps(__spreadValues({}, domProps), {
+  return /* @__PURE__ */ React19.createElement("div", __spreadProps(__spreadValues({}, domProps), {
     className: join(TableHeaderClassName2, `${TableHeaderClassName2}--unvirtualized`, pinning ? `${TableHeaderClassName2}--pinned ${TableHeaderClassName2}-${pinning}` : "", scrollable ? `${TableHeaderClassName2}--overflow` : "", domProps.className, HeaderClsRecipe({
       pinned: pinning,
       virtualized: false,
       overflow: scrollable
     })),
     style
-  }), /* @__PURE__ */ React20.createElement("div", {
+  }), /* @__PURE__ */ React19.createElement("div", {
     style: { width: totalWidth },
     className: join(flexFlow.row, display.flex),
     ref: domRef
   }, children));
 }
-var InfiniteTableHeaderUnvirtualized = React20.memo(InfiniteTableHeaderUnvirtualizedFn);
+var InfiniteTableHeaderUnvirtualized = React19.memo(InfiniteTableHeaderUnvirtualizedFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
 function TableHeaderWrapper(props) {
@@ -5542,7 +5635,7 @@ function TableHeaderWrapper(props) {
   const unvirtualizedStyle = !virtualizeHeader && computedPinnedStartColumnsWidth ? {
     left: computedPinnedStartWidth
   } : void 0;
-  const header = virtualizeHeader ? /* @__PURE__ */ React21.createElement(InfiniteTableHeader, {
+  const header = virtualizeHeader ? /* @__PURE__ */ React20.createElement(InfiniteTableHeader, {
     columns: computedUnpinnedColumns,
     repaintId: virtualizeHeader ? repaintId : void 0,
     brain,
@@ -5555,7 +5648,7 @@ function TableHeaderWrapper(props) {
     },
     availableWidth: computedUnpinnedColumnsWidth,
     totalWidth: computedUnpinnedColumnsWidth
-  }) : /* @__PURE__ */ React21.createElement(InfiniteTableHeaderUnvirtualized, {
+  }) : /* @__PURE__ */ React20.createElement(InfiniteTableHeaderUnvirtualized, {
     style: unvirtualizedStyle,
     brain,
     scrollable: true,
@@ -5564,12 +5657,12 @@ function TableHeaderWrapper(props) {
     availableWidth: computedUnpinnedColumnsWidth,
     totalWidth: computedUnpinnedColumnsWidth
   });
-  return /* @__PURE__ */ React21.createElement("div", {
+  return /* @__PURE__ */ React20.createElement("div", {
     className: HeaderWrapperCls,
     style: {
       height: virtualizeHeader ? height : void 0
     }
-  }, hasPinnedStart ? /* @__PURE__ */ React21.createElement(InfiniteTableHeaderUnvirtualized, {
+  }, hasPinnedStart ? /* @__PURE__ */ React20.createElement(InfiniteTableHeaderUnvirtualized, {
     style: {
       left: 0,
       position: "absolute",
@@ -5581,7 +5674,7 @@ function TableHeaderWrapper(props) {
     scrollable: computedPinnedStartOverflow,
     pinning: "start",
     scrollListener: computedPinnedStartOverflow ? pinnedStartScrollListener : void 0
-  }) : null, header, hasPinnedEnd ? /* @__PURE__ */ React21.createElement(InfiniteTableHeaderUnvirtualized, {
+  }) : null, header, hasPinnedEnd ? /* @__PURE__ */ React20.createElement(InfiniteTableHeaderUnvirtualized, {
     style: {
       right: scrollbars.vertical ? getScrollbarWidth() : 0,
       position: "absolute",
@@ -5593,7 +5686,7 @@ function TableHeaderWrapper(props) {
     scrollable: computedPinnedEndOverflow,
     pinning: "end",
     scrollListener: computedPinnedEndOverflow ? pinnedEndScrollListener : void 0
-  }) : null, scrollbars.vertical ? /* @__PURE__ */ React21.createElement(VerticalScrollbarPlaceholder, {
+  }) : null, scrollbars.vertical ? /* @__PURE__ */ React20.createElement(VerticalScrollbarPlaceholder, {
     style: {
       height: "100%",
       right: 0
@@ -5602,7 +5695,7 @@ function TableHeaderWrapper(props) {
 }
 
 // src/components/VirtualScrollContainer/index.tsx
-var React22 = __toModule(require("react"));
+var React21 = __toModule(require("react"));
 var import_react29 = __toModule(require("react"));
 
 // src/components/hooks/useOnScroll.ts
@@ -5646,7 +5739,7 @@ var getScrollableClassName = (scrollable) => {
 
 // src/components/VirtualScrollContainer/index.tsx
 var rootClassName6 = "InfiniteVirtualScrollContainer";
-var VirtualScrollContainer = React22.forwardRef(function VirtualScrollContainer2(props, ref) {
+var VirtualScrollContainer = React21.forwardRef(function VirtualScrollContainer2(props, ref) {
   const {
     children,
     scrollable = true,
@@ -5656,7 +5749,7 @@ var VirtualScrollContainer = React22.forwardRef(function VirtualScrollContainer2
   } = props;
   const domRef = ref != null ? ref : (0, import_react29.useRef)(null);
   useOnScroll(domRef, onContainerScroll);
-  return /* @__PURE__ */ React22.createElement("div", {
+  return /* @__PURE__ */ React21.createElement("div", {
     ref: domRef,
     style,
     className: join(className, rootClassName6, VirtualScrollContainerCls, getScrollableClassName(scrollable))
@@ -5664,7 +5757,7 @@ var VirtualScrollContainer = React22.forwardRef(function VirtualScrollContainer2
 });
 
 // src/components/VirtualList/SpacePlaceholder.tsx
-var React23 = __toModule(require("react"));
+var React22 = __toModule(require("react"));
 function SpacePlaceholderFn(props) {
   const { height, width, count } = props;
   const style = {
@@ -5674,7 +5767,7 @@ function SpacePlaceholderFn(props) {
     opacity: 0,
     pointerEvents: "none"
   };
-  return /* @__PURE__ */ React23.createElement("div", {
+  return /* @__PURE__ */ React22.createElement("div", {
     "data-count": count,
     "data-placeholder-width": true ? width : void 0,
     "data-placeholder-height": true ? height : void 0,
@@ -5682,20 +5775,20 @@ function SpacePlaceholderFn(props) {
     style
   });
 }
-var SpacePlaceholder = React23.memo(SpacePlaceholderFn);
+var SpacePlaceholder = React22.memo(SpacePlaceholderFn);
 
 // src/components/InfiniteTable/hooks/useListRendering.tsx
 var import_react41 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useUnpinnedRendering.tsx
-var React29 = __toModule(require("react"));
+var React28 = __toModule(require("react"));
 var import_react33 = __toModule(require("react"));
 
 // src/components/VirtualList/VirtualRowList.tsx
-var React25 = __toModule(require("react"));
+var React24 = __toModule(require("react"));
 
 // src/components/VirtualList/VirtualList.tsx
-var React24 = __toModule(require("react"));
+var React23 = __toModule(require("react"));
 var import_react30 = __toModule(require("react"));
 
 // src/components/VirtualList/VirtualList.css.ts
@@ -5777,19 +5870,19 @@ var VirtualList = (props) => {
   if (true) {
     domProps["data-cmp-name"] = `VirtualList`;
   }
-  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React24.createElement(VirtualScrollContainer, {
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React23.createElement(VirtualScrollContainer, {
     scrollable,
     onContainerScroll
-  }, /* @__PURE__ */ React24.createElement("div", {
+  }, /* @__PURE__ */ React23.createElement("div", {
     ref: domRef,
     className: scrollTransformTargetCls,
     "data-name": "scroll-transform-target"
-  }, /* @__PURE__ */ React24.createElement(RawList, {
+  }, /* @__PURE__ */ React23.createElement(RawList, {
     brain: virtualBrain,
     renderItem,
     repaintId,
     debugChannel: "VirtualList-" + mainAxis
-  })), children, /* @__PURE__ */ React24.createElement(SpacePlaceholder, {
+  })), children, /* @__PURE__ */ React23.createElement(SpacePlaceholder, {
     count,
     width,
     height
@@ -5799,14 +5892,14 @@ var VirtualList = (props) => {
 // src/components/VirtualList/VirtualRowList.tsx
 var VirtualRowList = (props) => {
   const _a = props, { rowWidth, rowHeight, renderRow } = _a, listProps = __objRest(_a, ["rowWidth", "rowHeight", "renderRow"]);
-  const renderItem = React25.useCallback((renderProps) => {
+  const renderItem = React24.useCallback((renderProps) => {
     return renderRow({
       domRef: renderProps.domRef,
       rowHeight: renderProps.itemSize,
       rowIndex: renderProps.itemIndex
     });
   }, [renderRow]);
-  return /* @__PURE__ */ React25.createElement(VirtualList, __spreadProps(__spreadValues({}, listProps), {
+  return /* @__PURE__ */ React24.createElement(VirtualList, __spreadProps(__spreadValues({}, listProps), {
     renderItem,
     mainAxis: "vertical",
     itemMainAxisSize: rowHeight,
@@ -5815,11 +5908,11 @@ var VirtualRowList = (props) => {
 };
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRow.tsx
-var React27 = __toModule(require("react"));
+var React26 = __toModule(require("react"));
 var import_react32 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
-var React26 = __toModule(require("react"));
+var React25 = __toModule(require("react"));
 var { rootClassName: rootClassName8 } = internalProps;
 var InfiniteTableColumnCellClassName = `${rootClassName8}ColumnCell`;
 function isColumnWithField(c) {
@@ -5876,7 +5969,8 @@ function InfiniteTableColumnCellFn(props) {
       rowIndex,
       toggleGroupRow,
       toggleCurrentGroupRow: () => toggleGroupRow(rowInfo.groupKeys),
-      groupBy: computedDataSource.groupBy
+      groupBy: computedDataSource.groupBy,
+      pivotBy: computedDataSource.pivotBy
     });
     if (column.render) {
       renderValue = column.render(renderParam);
@@ -5912,7 +6006,7 @@ function InfiniteTableColumnCellFn(props) {
       }
     }
   }
-  return /* @__PURE__ */ React26.createElement(InfiniteTableCell, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React25.createElement(InfiniteTableCell, __spreadProps(__spreadValues({
     domRef,
     offsetProperty
   }, dataset), {
@@ -5923,7 +6017,7 @@ function InfiniteTableColumnCellFn(props) {
     className: join(useCellClassName(column, [InfiniteTableColumnCellClassName, InfiniteTableCellClassName], ColumnCellRecipe, { dragging: false }), colClassName)
   }), hidden ? null : renderValue);
 }
-var InfiniteTableColumnCell = React26.memo(InfiniteTableColumnCellFn);
+var InfiniteTableColumnCell = React25.memo(InfiniteTableColumnCellFn);
 
 // src/components/InfiniteTable/components/InfiniteTableRow/useRowDOMProps.ts
 var import_react31 = __toModule(require("react"));
@@ -6054,12 +6148,12 @@ function InfiniteTableRowFn(props) {
     height: rowHeight
   }, domProps.style);
   const renderCellRef = (0, import_react32.useRef)(null);
-  const renderCell = React27.useCallback(({ domRef, itemIndex }) => {
+  const renderCell = React26.useCallback(({ domRef, itemIndex }) => {
     const column = columns[itemIndex];
     if (!column) {
     }
     const hidden = false;
-    return /* @__PURE__ */ React27.createElement(InfiniteTableColumnCell, {
+    return /* @__PURE__ */ React26.createElement(InfiniteTableColumnCell, {
       getData,
       rowInfo,
       groupRenderStrategy,
@@ -6086,18 +6180,18 @@ function InfiniteTableRowFn(props) {
   if (true) {
     domProps["data-cmp-name"] = "ITableRow";
   }
-  return /* @__PURE__ */ React27.createElement("div", __spreadProps(__spreadValues({}, domProps), {
+  return /* @__PURE__ */ React26.createElement("div", __spreadProps(__spreadValues({}, domProps), {
     style
-  }), /* @__PURE__ */ React27.createElement(RawList, {
+  }), /* @__PURE__ */ React26.createElement(RawList, {
     brain,
     renderItem: renderCell,
     debugChannel: `${rowIndex}`
   }));
 }
-var InfiniteTableRow = React27.memo(InfiniteTableRowFn);
+var InfiniteTableRow = React26.memo(InfiniteTableRowFn);
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRowUnvirtualized.tsx
-var React28 = __toModule(require("react"));
+var React27 = __toModule(require("react"));
 function TableRowUnvirtualizedFn(props) {
   const {
     rowHeight,
@@ -6118,7 +6212,7 @@ function TableRowUnvirtualizedFn(props) {
   }, domProps.style);
   const children = columns.map((col) => {
     const hidden = false;
-    return /* @__PURE__ */ React28.createElement(InfiniteTableColumnCell, {
+    return /* @__PURE__ */ React27.createElement(InfiniteTableColumnCell, {
       key: col.id,
       virtualized: false,
       rowHeight,
@@ -6131,11 +6225,11 @@ function TableRowUnvirtualizedFn(props) {
       column: col
     });
   });
-  return /* @__PURE__ */ React28.createElement("div", __spreadProps(__spreadValues({}, domProps), {
+  return /* @__PURE__ */ React27.createElement("div", __spreadProps(__spreadValues({}, domProps), {
     style
   }), children);
 }
-var TableRowUnvirtualized = React28.memo(TableRowUnvirtualizedFn);
+var TableRowUnvirtualized = React27.memo(TableRowUnvirtualizedFn);
 
 // src/components/InfiniteTable/hooks/useUnpinnedRendering.tsx
 function useUnpinnedRendering(params) {
@@ -6178,7 +6272,7 @@ function useUnpinnedRendering(params) {
       rowProps.repaintId = repaintId;
     }
     const TableRowComponent = shouldVirtualizeColumns ? InfiniteTableRow : TableRowUnvirtualized;
-    return /* @__PURE__ */ React29.createElement(TableRowComponent, __spreadValues({}, rowProps));
+    return /* @__PURE__ */ React28.createElement(TableRowComponent, __spreadValues({}, rowProps));
   }, [
     repaintId,
     rowHeight,
@@ -6188,7 +6282,7 @@ function useUnpinnedRendering(params) {
     horizontalVirtualBrain,
     verticalVirtualBrain
   ]);
-  const fakeScrollbar = getScrollbarWidth() ? /* @__PURE__ */ React29.createElement("div", {
+  const fakeScrollbar = getScrollbarWidth() ? /* @__PURE__ */ React28.createElement("div", {
     "data-name": "horizontal-scrollbar-placeholder--fake",
     style: {
       position: "absolute",
@@ -6199,10 +6293,10 @@ function useUnpinnedRendering(params) {
       overflow: "auto",
       visibility: columnShifts ? "visible" : "hidden"
     }
-  }, /* @__PURE__ */ React29.createElement("div", {
+  }, /* @__PURE__ */ React28.createElement("div", {
     style: { height: "100%", width: computedUnpinnedColumnsWidth }
   })) : null;
-  return rowHeight != 0 ? /* @__PURE__ */ React29.createElement(VirtualRowList, {
+  return rowHeight != 0 ? /* @__PURE__ */ React28.createElement(VirtualRowList, {
     repaintId: `${repaintId}-unpinned-`,
     brain: verticalVirtualBrain,
     onContainerScroll: applyScrollHorizontal,
@@ -6345,11 +6439,11 @@ var useOnContainerScroll = ({
 };
 
 // src/components/InfiniteTable/hooks/usePinnedRendering.tsx
-var React31 = __toModule(require("react"));
+var React30 = __toModule(require("react"));
 var import_react37 = __toModule(require("react"));
 
 // src/components/VirtualList/RowListWithExternalScrolling.tsx
-var React30 = __toModule(require("react"));
+var React29 = __toModule(require("react"));
 var import_react36 = __toModule(require("react"));
 
 // src/components/hooks/useOnMount.ts
@@ -6425,7 +6519,7 @@ var RowListWithExternalScrolling = (props) => {
   if (true) {
     domProps["data-cmp-name"] = "RowListWithExternalScrolling";
   }
-  return /* @__PURE__ */ React30.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React30.createElement(RawList, {
+  return /* @__PURE__ */ React29.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React29.createElement(RawList, {
     brain,
     renderItem,
     repaintId
@@ -6448,7 +6542,7 @@ function PinnedRowsContainer(props) {
     brain,
     renderRow
   } = props;
-  const style = React31.useMemo(() => {
+  const style = React30.useMemo(() => {
     const result = pinning === "end" ? {
       width: rowWidth,
       height,
@@ -6474,7 +6568,7 @@ function PinnedRowsContainer(props) {
     className: join(`${PinnedRowsContainerClassName}`, PinnedRowsClsVariants[pinning === "start" ? "pinnedStart" : "pinnedEnd"], `${PinnedRowsContainerClassName}--pinned-${pinning}`, `${PinnedRowsContainerClassName}--overflow`, PinnedRowsClsVariants.overflow)
   };
   if (hasOverflow) {
-    return /* @__PURE__ */ React31.createElement(VirtualScrollContainer, {
+    return /* @__PURE__ */ React30.createElement(VirtualScrollContainer, {
       scrollable: {
         horizontal: true,
         vertical: false
@@ -6490,18 +6584,18 @@ function PinnedRowsContainer(props) {
       className: join(PinnedRowsContainerClsVariants({
         pinned: pinning
       }), `${PinnedRowsContainerClassName}Container`, `${PinnedRowsContainerClassName}Container--pinned-${pinning}`)
-    }, /* @__PURE__ */ React31.createElement(RowListWithExternalScrolling, __spreadProps(__spreadValues({}, rowListProps), {
+    }, /* @__PURE__ */ React30.createElement(RowListWithExternalScrolling, __spreadProps(__spreadValues({}, rowListProps), {
       onMount: (node) => {
         pinnedScrollListener == null ? void 0 : pinnedScrollListener.onScroll((scrollPosition) => {
           updateScroll(node, brain.getScrollPosition(), scrollPosition);
         });
       }
-    })), /* @__PURE__ */ React31.createElement(SpacePlaceholder, {
+    })), /* @__PURE__ */ React30.createElement(SpacePlaceholder, {
       width: rowWidth,
       height: 1
     }));
   }
-  return /* @__PURE__ */ React31.createElement(RowListWithExternalScrolling, __spreadValues({}, rowListProps));
+  return /* @__PURE__ */ React30.createElement(RowListWithExternalScrolling, __spreadValues({}, rowListProps));
 }
 function useRenderPinnedRow(params) {
   const { getData, getState, columnsWidth, columns, verticalBrain } = params;
@@ -6521,7 +6615,7 @@ function useRenderPinnedRow(params) {
       rowWidth: columnsWidth,
       columns
     }, rowParams);
-    return /* @__PURE__ */ React31.createElement(TableRowUnvirtualized, __spreadValues({}, rowProps));
+    return /* @__PURE__ */ React30.createElement(TableRowUnvirtualized, __spreadValues({}, rowProps));
   }, [columnsWidth, columns, verticalBrain]);
   return renderPinnedRow;
 }
@@ -6564,7 +6658,7 @@ function usePinnedRenderingForSide(side, params) {
     columns,
     columnsWidth
   });
-  const pinnedList = columns.length && rowHeight !== 0 ? /* @__PURE__ */ React31.createElement(PinnedRowsContainer, {
+  const pinnedList = columns.length && rowHeight !== 0 ? /* @__PURE__ */ React30.createElement(PinnedRowsContainer, {
     pinning: side,
     pinnedScrollListener,
     hasOverflow,
@@ -6577,7 +6671,7 @@ function usePinnedRenderingForSide(side, params) {
     brain: verticalVirtualBrain,
     renderRow: renderRowPinned
   }) : null;
-  const pinnedScrollbarPlaceholder = pinnedList && hasHorizontalScrollbar && !hasOverflow ? /* @__PURE__ */ React31.createElement(HorizontalScrollbarPlaceholder, {
+  const pinnedScrollbarPlaceholder = pinnedList && hasHorizontalScrollbar && !hasOverflow ? /* @__PURE__ */ React30.createElement(HorizontalScrollbarPlaceholder, {
     style: side === "end" ? {
       width: columnsWidth,
       right: hasVerticalScrollbar ? getScrollbarWidth() : 0
@@ -7146,7 +7240,8 @@ function useListRendering(param) {
     computedUnpinnedColumnsWidth,
     computedPinnedStartOverflow,
     computedPinnedEndOverflow,
-    computedVisibleColumns
+    computedVisibleColumns,
+    toggleGroupRow
   } = computed;
   const { componentState: dataSourceState, getState: getDataSourceState } = useDataSourceContextValue();
   const { dataArray } = dataSourceState;
@@ -7230,12 +7325,6 @@ function useListRendering(param) {
     horizontalVirtualBrain,
     reservedContentHeight
   });
-  const { componentActions: dataSourceActions } = useDataSourceContextValue();
-  const toggleGroupRow = (0, import_react41.useCallback)((groupKeys) => {
-    const newState = new GroupRowsState(getDataSourceState().groupRowsState);
-    newState.toggleGroupRow(groupKeys);
-    dataSourceActions.groupRowsState = newState;
-  }, []);
   const pinnedRenderingParams = {
     bodySize,
     scrollbars,
@@ -7289,7 +7378,7 @@ function useListRendering(param) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
-var React32 = __toModule(require("react"));
+var React31 = __toModule(require("react"));
 var import_react42 = __toModule(require("react"));
 
 // src/components/utils/decamelize.ts
@@ -7325,10 +7414,10 @@ var enforceStyle = (node, style) => {
     node.style.setProperty(decamelize(propertyName), propertyValue, "important");
   }
 };
-var InfiniteTableLicenseFooter = React32.forwardRef(function InfiniteTableLicenseFooter2(props, ref) {
+var InfiniteTableLicenseFooter = React31.forwardRef(function InfiniteTableLicenseFooter2(props, ref) {
   const { rootClassName: rootClassName12 } = useInternalProps();
-  const domRef = React32.useRef(null);
-  const domCallback = React32.useCallback((node) => {
+  const domRef = React31.useRef(null);
+  const domCallback = React31.useCallback((node) => {
     domRef.current = node;
     if (!ref) {
       return;
@@ -7353,12 +7442,12 @@ var InfiniteTableLicenseFooter = React32.forwardRef(function InfiniteTableLicens
       clearInterval(intervalId);
     };
   }, []);
-  return /* @__PURE__ */ React32.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React31.createElement("div", __spreadProps(__spreadValues({
     ref: domCallback
   }, props), {
     className: join(`${rootClassName12}-Footer`, FooterCls, props.className),
     style: defaultStyle2
-  }), "Powered by", " ", /* @__PURE__ */ React32.createElement("a", {
+  }), "Powered by", " ", /* @__PURE__ */ React31.createElement("a", {
     href: "https://infinite-table.com",
     rel: "noopener noreferrer",
     role: "link",
@@ -7520,7 +7609,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react43.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.1.3"
+      version: "0.2.2"
     });
     if (!licenseKey && !valid2 && isInsideSandbox) {
       return true;
@@ -7531,7 +7620,7 @@ var useLicense = (licenseKey = "") => {
 };
 
 // src/components/CSSVariableWatch.tsx
-var React33 = __toModule(require("react"));
+var React32 = __toModule(require("react"));
 var import_react44 = __toModule(require("react"));
 var error = err("CSSVariableWatch");
 var debug5 = dbg("CSSVariableWatch");
@@ -7546,14 +7635,14 @@ var WRAPPER_STYLE = {
 };
 var useCSSVariableWatch = (params) => {
   const lastValueRef = (0, import_react44.useRef)(0);
-  const onResize = React33.useCallback(({ height }) => {
+  const onResize = React32.useCallback(({ height }) => {
     if (height && height !== lastValueRef.current) {
       lastValueRef.current = height;
       params.onChange(height);
     }
   }, [params.onChange]);
   useResizeObserver(params.ref, onResize, { earlyAttach: true });
-  React33.useLayoutEffect(() => {
+  React32.useLayoutEffect(() => {
     const value = params.ref.current.getBoundingClientRect().height;
     if (value) {
       lastValueRef.current = value;
@@ -7569,11 +7658,11 @@ var CSSVariableWatch = (props) => {
   useCSSVariableWatch(__spreadProps(__spreadValues({}, props), {
     ref: domRef
   }));
-  return /* @__PURE__ */ React33.createElement("div", {
+  return /* @__PURE__ */ React32.createElement("div", {
     "data-name": "css-variable-watcher",
     "data-var": props.varName,
     style: WRAPPER_STYLE
-  }, /* @__PURE__ */ React33.createElement("div", {
+  }, /* @__PURE__ */ React32.createElement("div", {
     ref: domRef,
     style: {
       height: props.varName.startsWith("var(") ? props.varName : `var(${props.varName})`
@@ -7666,7 +7755,7 @@ function useDOMProps(initialDOMProps) {
 }
 
 // src/components/InfiniteTable/components/LoadMask.tsx
-var React34 = __toModule(require("react"));
+var React33 = __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" };
@@ -7678,15 +7767,15 @@ var { rootClassName: rootClassName11 } = internalProps;
 var baseCls2 = `${rootClassName11}-LoadMask`;
 function LoadMaskFn(props) {
   const { visible, children = "Loading" } = props;
-  return /* @__PURE__ */ React34.createElement("div", {
+  return /* @__PURE__ */ React33.createElement("div", {
     className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls2}`
-  }, /* @__PURE__ */ React34.createElement("div", {
+  }, /* @__PURE__ */ React33.createElement("div", {
     className: `${LoadMaskOverlayCls} ${baseCls2}-Overlay`
-  }), /* @__PURE__ */ React34.createElement("div", {
+  }), /* @__PURE__ */ React33.createElement("div", {
     className: `${LoadMaskTextCls} ${baseCls2}-Text`
   }, children));
 }
-var LoadMask = React34.memo(LoadMaskFn);
+var LoadMask = React33.memo(LoadMaskFn);
 
 // src/components/InfiniteTable/index.tsx
 var InfiniteTableClassName = internalProps.rootClassName;
@@ -7705,7 +7794,7 @@ var InfiniteTableRoot = getComponentStateRoot({
   getParentState: () => useDataSource(),
   debugName: "InfiniteTable"
 });
-var InfiniteTableComponent = React35.memo(function InfiniteTableComponent2() {
+var InfiniteTableComponent = React34.memo(function InfiniteTableComponent2() {
   var _a;
   const {
     componentState,
@@ -7715,7 +7804,8 @@ var InfiniteTableComponent = React35.memo(function InfiniteTableComponent2() {
   } = useInfiniteTable();
   const {
     componentState: { dataArray, loading },
-    getState: getDataSourceState
+    getState: getDataSourceState,
+    componentActions: dataSourceActions
   } = useDataSourceContextValue();
   const {
     domRef,
@@ -7728,7 +7818,8 @@ var InfiniteTableComponent = React35.memo(function InfiniteTableComponent2() {
     onHeaderHeightCSSVarChange,
     rowHeightCSSVar,
     headerHeightCSSVar,
-    components
+    components,
+    scrollStopDelay
   } = componentState;
   const { columnShifts, bodySize } = componentState;
   const {
@@ -7741,6 +7832,7 @@ var InfiniteTableComponent = React35.memo(function InfiniteTableComponent2() {
     scrollbars,
     applyScrollVertical,
     horizontalVirtualBrain,
+    verticalVirtualBrain,
     reservedContentHeight
   } = useListRendering({
     getComputed,
@@ -7749,10 +7841,17 @@ var InfiniteTableComponent = React35.memo(function InfiniteTableComponent2() {
     bodySize,
     computed
   });
+  React34.useEffect(() => {
+    const dataSourceState = getDataSourceState();
+    const onChange = debounce((renderRange) => {
+      dataSourceState.notifyRenderRangeChange(renderRange);
+    }, { wait: scrollStopDelay });
+    return verticalVirtualBrain.onRenderRangeChange(onChange);
+  }, [verticalVirtualBrain, scrollStopDelay]);
   const licenseValid = useLicense(licenseKey);
   const domProps = useDOMProps(componentState.domProps);
   const LoadMaskCmp = (_a = components == null ? void 0 : components.LoadMask) != null ? _a : LoadMask;
-  React35.useLayoutEffect(() => {
+  React34.useLayoutEffect(() => {
     const dataSourceState = getDataSourceState();
     const { onScrollbarsChange } = getInfiniteTableState();
     const { notifyScrollbarsChange } = dataSourceState;
@@ -7761,31 +7860,34 @@ var InfiniteTableComponent = React35.memo(function InfiniteTableComponent2() {
     }
     notifyScrollbarsChange(scrollbars);
   }, [scrollbars]);
-  return /* @__PURE__ */ React35.createElement("div", __spreadValues({
+  React34.useEffect(() => {
+    dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
+  }, [scrollStopDelay]);
+  return /* @__PURE__ */ React34.createElement("div", __spreadValues({
     ref: domRef
-  }, domProps), header ? /* @__PURE__ */ React35.createElement(TableHeaderWrapper, {
+  }, domProps), header ? /* @__PURE__ */ React34.createElement(TableHeaderWrapper, {
     brain: horizontalVirtualBrain,
     repaintId,
     scrollbars
-  }) : null, /* @__PURE__ */ React35.createElement(InfiniteTableBody, null, /* @__PURE__ */ React35.createElement(VirtualScrollContainer, {
+  }) : null, /* @__PURE__ */ React34.createElement(InfiniteTableBody, null, /* @__PURE__ */ React34.createElement(VirtualScrollContainer, {
     ref: scrollerDOMRef,
     onContainerScroll: applyScrollVertical,
     scrollable: ONLY_VERTICAL_SCROLLBAR
-  }, /* @__PURE__ */ React35.createElement("div", {
+  }, /* @__PURE__ */ React34.createElement("div", {
     className: display.flex
-  }, pinnedStartList, centerList, pinnedEndList), /* @__PURE__ */ React35.createElement(SpacePlaceholder, {
+  }, pinnedStartList, centerList, pinnedEndList), /* @__PURE__ */ React34.createElement(SpacePlaceholder, {
     count: dataArray.length,
     width: 0,
     height: reservedContentHeight
-  })), pinnedStartScrollbarPlaceholder, pinnedEndScrollbarPlaceholder, /* @__PURE__ */ React35.createElement(LoadMaskCmp, {
+  })), pinnedStartScrollbarPlaceholder, pinnedEndScrollbarPlaceholder, /* @__PURE__ */ React34.createElement(LoadMaskCmp, {
     visible: loading
-  }, loadingText)), licenseValid ? null : /* @__PURE__ */ React35.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React35.createElement("div", {
+  }, loadingText)), licenseValid ? null : /* @__PURE__ */ React34.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React34.createElement("div", {
     ref: portalDOMRef,
     className: join(`${rootClassName}Portal`, zIndex[1e3], position.absolute, top[0], left[0])
-  }), rowHeightCSSVar ? /* @__PURE__ */ React35.createElement(CSSVariableWatch, {
+  }), rowHeightCSSVar ? /* @__PURE__ */ React34.createElement(CSSVariableWatch, {
     varName: rowHeightCSSVar,
     onChange: onRowHeightCSSVarChange
-  }) : null, headerHeightCSSVar ? /* @__PURE__ */ React35.createElement(CSSVariableWatch, {
+  }) : null, headerHeightCSSVar ? /* @__PURE__ */ React34.createElement(CSSVariableWatch, {
     varName: headerHeightCSSVar,
     onChange: onHeaderHeightCSSVarChange
   }) : null);
@@ -7821,25 +7923,25 @@ function InfiniteTableContextProvider() {
     }
     componentActions.bodySize = bodySize;
   }, { earlyAttach: true });
-  React35.useEffect(() => {
+  React34.useEffect(() => {
     return () => {
       componentState.onRowHeightCSSVarChange.destroy();
       componentState.onHeaderHeightCSSVarChange.destroy();
     };
   }, []);
-  React35.useEffect(() => {
+  React34.useEffect(() => {
     if (scrollerDOMRef.current) {
       scrollerDOMRef.current.scrollTop = 0;
     }
   }, [scrollTopId, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
-  return /* @__PURE__ */ React35.createElement(TableContext2.Provider, {
+  return /* @__PURE__ */ React34.createElement(TableContext2.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ React35.createElement(InfiniteTableComponent, null));
+  }, /* @__PURE__ */ React34.createElement(InfiniteTableComponent, null));
 }
 function InfiniteTable(props) {
-  const table = /* @__PURE__ */ React35.createElement(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ React35.createElement(InfiniteTableContextProvider, null));
-  return /* @__PURE__ */ React35.createElement(React35.StrictMode, null, table);
+  const table = /* @__PURE__ */ React34.createElement(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ React34.createElement(InfiniteTableContextProvider, null));
+  return /* @__PURE__ */ React34.createElement(React34.StrictMode, null, table);
 }
 InfiniteTable.defaultProps = {
   rowHeight: 40,