npm - @infinite-table/infinite-react - Versions diffs - 0.1.4 → 0.2.3 - Mend

@infinite-table/infinite-react 0.1.4 → 0.2.3

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

Files changed (4) hide show

package/index.js CHANGED Viewed

@@ -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,
@@ -2044,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
@@ -2115,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);
     }
@@ -2224,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));
   };
@@ -2267,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));
     }
@@ -2300,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) {
@@ -2648,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;
 }
@@ -2711,13 +2648,23 @@ function lazyGroup(groupParams, rootData) {
   rootData.visitDepthFirst((lazyGroupRowInfo, keys, _index, next) => {
     const [_rootKey, ...currentGroupKeys] = keys;
     const dataArray = lazyGroupRowInfo.items;
+    if (currentGroupKeys.length == groupBy.length) {
+      const deepMapGroupValue = deepMap.get(currentGroupKeys);
+      if (deepMapGroupValue) {
+        deepMapGroupValue.items = dataArray;
+      }
+      return next == null ? void 0 : next();
+    }
     for (let i = 0, len = dataArray.length; i < len; i++) {
       if (!dataArray[i]) {
         const deepMapGroupValue2 = {
           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;
@@ -2728,6 +2675,7 @@ function lazyGroup(groupParams, rootData) {
       currentGroupKeys.push(key);
       const deepMapGroupValue = {
         items: [],
+        commonData: dataObject,
         reducerResults: dataArray[i].aggregations || {}
       };
       deepMap.set(currentGroupKeys, deepMapGroupValue);
@@ -2863,10 +2811,15 @@ function flatten(groupResult) {
 function getEnhancedGroupData(options, deepMapValue) {
   const { groupBy, groupKeys, collapsed, parents, reducers } = options;
   const groupNesting = groupKeys.length;
-  const { items: groupItems, reducerResults, pivotDeepMap } = deepMapValue;
+  const {
+    items: groupItems,
+    reducerResults,
+    pivotDeepMap,
+    commonData
+  } = deepMapValue;
   let data = null;
   if (Object.keys(reducerResults).length > 0) {
-    data = {};
+    data = commonData || {};
     for (let key in reducers)
       if (reducers.hasOwnProperty(key)) {
         const reducer = reducers[key];
@@ -2876,12 +2829,16 @@ 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,
     groupData: groupItems,
     groupKeys,
-    id: groupKeys,
+    id: `${groupKeys}`,
     collapsed,
     parents,
     collapsedChildrenCount: 0,
@@ -2889,8 +2846,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,
@@ -2957,7 +2915,7 @@ function enhancedFlatten(param) {
           const startIndex = result.length;
           result.push(...items.map((item, index) => {
             return {
-              id: toPrimaryKey(item),
+              id: item ? toPrimaryKey(item) : `${groupKeys}-${index}`,
               data: item,
               isGroupRow: false,
               collapsed: false,
@@ -3012,11 +2970,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;
@@ -3056,15 +3036,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)) {
@@ -3077,9 +3076,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
         };
@@ -3087,11 +3087,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];
           }
@@ -3102,7 +3106,7 @@ function loadData(data, componentState, actions, overrides) {
           lazyGroupData.set(key, newGroupRowInfo);
         }
         skipAssign = true;
-        actions.originalLazyGroupData = lazyGroupData;
+        actions.originalLazyGroupDataChangeDetect = getChangeDetect();
       }
     } else {
       dataArray = dataParam;
@@ -3110,7 +3114,7 @@ function loadData(data, componentState, actions, overrides) {
     if (!skipAssign) {
       actions.originalDataArray = dataArray;
     }
-    if (dataIsPromise) {
+    if (dataIsPromise && !componentState.fullLazyLoad) {
       actions.loading = false;
     }
   });
@@ -3129,9 +3133,7 @@ function useLoadData() {
     pivotBy,
     livePagination,
     livePaginationCursor,
-    cursorId: stateCursorId,
-    lazyLoadBatchSize,
-    notifyScrollStop
+    cursorId: stateCursorId
   } = componentState;
   const [scrollbars, setScrollbars] = (0, import_react15.useState)({
     vertical: false,
@@ -3172,33 +3174,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") {
@@ -3219,6 +3195,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 theGroupKeys = rowInfo.groupKeys ? [...rowInfo.groupKeys] : [];
+    if (rowInfo.groupKeys && rowInfo.isGroupRow) {
+      theGroupKeys.pop();
+    }
+    const cacheKeys = theGroupKeys.length ? theGroupKeys : 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: theGroupKeys
+      };
+      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([]);
@@ -3418,8 +3514,11 @@ function initSetupState2() {
     dataParams: void 0,
     notifyScrollbarsChange: buildSubscriptionCallback(),
     notifyScrollStop: buildSubscriptionCallback(),
+    notifyRenderRangeChange: buildSubscriptionCallback(),
     pivotTotalColumnPosition: "end",
+    scrollStopDelayUpdatedByTable: 100,
     originalLazyGroupData,
+    originalLazyGroupDataChangeDetect: 0,
     originalDataArray,
     cursorId: defaultCursorId,
     showSeparatePivotColumnForSingleAggregation: false,
@@ -3604,23 +3703,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) => {
@@ -3792,6 +3875,7 @@ function concludeReducer(params) {
     "generateGroupRows",
     "originalDataArray",
     "originalLazyGroupData",
+    "originalLazyGroupDataChangeDetect",
     "groupBy",
     "groupRowsState",
     "pivotBy",
@@ -3812,7 +3896,11 @@ function concludeReducer(params) {
   state.postSortDataArray = dataArray;
   state.groupDeepMap = void 0;
   const toPrimaryKey = (data) => {
-    return data[state.primaryKey];
+    const pk = data[state.primaryKey];
+    if (Array.isArray(pk)) {
+      debugger;
+    }
+    return pk;
   };
   if (shouldGroup) {
     if (shouldGroupAgain) {
@@ -3854,7 +3942,7 @@ function concludeReducer(params) {
     state.pivotColumns = void 0;
     const arrayDifferentAfterSortStep = previousState.postSortDataArray != state.postSortDataArray;
     if (arrayDifferentAfterSortStep) {
-      rowInfoDataArray = dataArray.map((data, index) => toRowInfo(data, toPrimaryKey(data), index));
+      rowInfoDataArray = dataArray.map((data, index) => toRowInfo(data, data ? toPrimaryKey(data) : index, index));
     }
   }
   state.postGroupDataArray = rowInfoDataArray;
@@ -3882,7 +3970,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,
@@ -3905,14 +3993,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
   }));
 }
@@ -3963,9 +4051,9 @@ function useColumnsWhen() {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
   useColumnsWhenInlineGroupRenderStrategy(groupByMap);
-  useColumnsWhenPivoting();
-  useColumnsWhenGrouping();
-  useHideEmptyGroupColumns(groupByMap);
+  const { toggleGroupRow } = useColumnsWhenGrouping();
+  useHideEmptyGroupColumns();
+  return { toggleGroupRow };
 }
 function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
   const toggleGroupRow = useToggleGroupRow();
@@ -3975,6 +4063,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);
@@ -4034,51 +4125,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
       });
@@ -4090,11 +4162,25 @@ function useColumnsWhenGrouping() {
       delete: update,
       clear: update
     });
-  }, [columns, groupBy, groupColumn, groupRenderStrategy, pivotColumns]);
+  }, [
+    columns,
+    groupBy,
+    pivotBy,
+    groupColumn,
+    groupRenderStrategy,
+    pivotColumns,
+    pivotTotalColumnPosition,
+    pivotColumn
+  ]);
+  return { toggleGroupRow };
 }
-function useHideEmptyGroupColumns(groupRowsMap) {
+function useHideEmptyGroupColumns() {
   const {
-    componentState: { groupBy, groupRowsState },
+    componentState: {
+      groupBy,
+      groupRowsState,
+      originalLazyGroupDataChangeDetect
+    },
     getState: getDataSourceState
   } = useDataSourceContextValue();
   const {
@@ -4147,8 +4233,8 @@ function useHideEmptyGroupColumns(groupRowsMap) {
     getDataSourceState,
     groupRenderStrategy,
     generatedColumns,
+    originalLazyGroupDataChangeDetect,
     groupBy,
-    groupRowsMap,
     hideEmptyGroupColumns ? groupRowsState : null,
     hideEmptyGroupColumns
   ]);
@@ -4157,14 +4243,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;
   }
@@ -4174,6 +4260,7 @@ function getColumnsWhenGrouping(params) {
       const generatedGroupColumn = getColumnForGroupBy({
         groupByForColumn,
         groupBy,
+        pivotBy,
         groupIndexForColumn,
         groupCount: arr.length,
         groupRenderStrategy
@@ -4184,13 +4271,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;
 }
@@ -4229,7 +4343,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;
@@ -4298,6 +4412,7 @@ function useComputed() {
   const computedPinnedStartOverflow = computedPinnedStartWidth ? computedPinnedStartColumnsWidth > computedPinnedStartWidth : false;
   const computedPinnedEndOverflow = computedPinnedEndWidth ? computedPinnedEndColumnsWidth > computedPinnedEndWidth : false;
   return {
+    toggleGroupRow,
     computedPinnedStartOverflow,
     computedPinnedEndOverflow,
     computedPinnedStartWidth,
@@ -4321,7 +4436,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 = () => {
@@ -4329,9 +4444,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)
@@ -4339,16 +4454,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",
@@ -4358,13 +4473,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",
@@ -4374,7 +4489,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());
@@ -4389,15 +4504,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"));
@@ -4456,16 +4571,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());
@@ -4660,7 +4775,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,
@@ -4714,18 +4829,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)
   }));
 }
@@ -4756,7 +4871,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
@@ -4794,7 +4909,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",
@@ -4807,7 +4922,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`,
@@ -4823,11 +4938,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());
@@ -4837,15 +4952,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 {
@@ -5090,7 +5205,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]
@@ -5187,11 +5302,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");
@@ -5212,7 +5327,7 @@ function InfiniteTableHeaderFn(props) {
       }
       return null;
     }
-    return /* @__PURE__ */ React17.createElement(InfiniteTableHeaderCell, {
+    return /* @__PURE__ */ React16.createElement(InfiniteTableHeaderCell, {
       domRef: domRef2,
       column,
       headerHeight,
@@ -5237,18 +5352,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) {
@@ -5338,7 +5453,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;
@@ -5352,16 +5467,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));
 }
@@ -5384,7 +5499,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,
@@ -5398,7 +5513,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,
@@ -5451,9 +5566,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,
@@ -5472,7 +5587,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,
@@ -5495,20 +5610,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) {
@@ -5541,7 +5656,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,
@@ -5554,7 +5669,7 @@ function TableHeaderWrapper(props) {
     },
     availableWidth: computedUnpinnedColumnsWidth,
     totalWidth: computedUnpinnedColumnsWidth
-  }) : /* @__PURE__ */ React21.createElement(InfiniteTableHeaderUnvirtualized, {
+  }) : /* @__PURE__ */ React20.createElement(InfiniteTableHeaderUnvirtualized, {
     style: unvirtualizedStyle,
     brain,
     scrollable: true,
@@ -5563,12 +5678,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",
@@ -5580,7 +5695,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",
@@ -5592,7 +5707,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
@@ -5601,7 +5716,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
@@ -5645,7 +5760,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,
@@ -5655,7 +5770,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))
@@ -5663,7 +5778,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 = {
@@ -5673,7 +5788,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,
@@ -5681,20 +5796,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
@@ -5776,19 +5891,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
@@ -5798,14 +5913,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,
@@ -5814,11 +5929,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) {
@@ -5875,7 +5990,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);
@@ -5911,7 +6027,7 @@ function InfiniteTableColumnCellFn(props) {
       }
     }
   }
-  return /* @__PURE__ */ React26.createElement(InfiniteTableCell, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React25.createElement(InfiniteTableCell, __spreadProps(__spreadValues({
     domRef,
     offsetProperty
   }, dataset), {
@@ -5922,7 +6038,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"));
@@ -6053,12 +6169,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,
@@ -6085,18 +6201,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,
@@ -6117,7 +6233,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,
@@ -6130,11 +6246,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) {
@@ -6177,7 +6293,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,
@@ -6187,7 +6303,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",
@@ -6198,10 +6314,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,
@@ -6344,11 +6460,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
@@ -6424,7 +6540,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
@@ -6447,7 +6563,7 @@ function PinnedRowsContainer(props) {
     brain,
     renderRow
   } = props;
-  const style = React31.useMemo(() => {
+  const style = React30.useMemo(() => {
     const result = pinning === "end" ? {
       width: rowWidth,
       height,
@@ -6473,7 +6589,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
@@ -6489,18 +6605,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;
@@ -6520,7 +6636,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;
 }
@@ -6563,7 +6679,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,
@@ -6576,7 +6692,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
@@ -7145,7 +7261,8 @@ function useListRendering(param) {
     computedUnpinnedColumnsWidth,
     computedPinnedStartOverflow,
     computedPinnedEndOverflow,
-    computedVisibleColumns
+    computedVisibleColumns,
+    toggleGroupRow
   } = computed;
   const { componentState: dataSourceState, getState: getDataSourceState } = useDataSourceContextValue();
   const { dataArray } = dataSourceState;
@@ -7229,12 +7346,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,
@@ -7288,7 +7399,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
@@ -7324,10 +7435,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;
@@ -7352,12 +7463,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",
@@ -7519,7 +7630,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react43.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.1.4"
+      version: "0.2.3"
     });
     if (!licenseKey && !valid2 && isInsideSandbox) {
       return true;
@@ -7530,7 +7641,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");
@@ -7545,14 +7656,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;
@@ -7568,11 +7679,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})`
@@ -7665,7 +7776,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" };
@@ -7677,15 +7788,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;
@@ -7704,7 +7815,7 @@ var InfiniteTableRoot = getComponentStateRoot({
   getParentState: () => useDataSource(),
   debugName: "InfiniteTable"
 });
-var InfiniteTableComponent = React35.memo(function InfiniteTableComponent2() {
+var InfiniteTableComponent = React34.memo(function InfiniteTableComponent2() {
   var _a;
   const {
     componentState,
@@ -7714,7 +7825,8 @@ var InfiniteTableComponent = React35.memo(function InfiniteTableComponent2() {
   } = useInfiniteTable();
   const {
     componentState: { dataArray, loading },
-    getState: getDataSourceState
+    getState: getDataSourceState,
+    componentActions: dataSourceActions
   } = useDataSourceContextValue();
   const {
     domRef,
@@ -7727,7 +7839,8 @@ var InfiniteTableComponent = React35.memo(function InfiniteTableComponent2() {
     onHeaderHeightCSSVarChange,
     rowHeightCSSVar,
     headerHeightCSSVar,
-    components
+    components,
+    scrollStopDelay
   } = componentState;
   const { columnShifts, bodySize } = componentState;
   const {
@@ -7740,6 +7853,7 @@ var InfiniteTableComponent = React35.memo(function InfiniteTableComponent2() {
     scrollbars,
     applyScrollVertical,
     horizontalVirtualBrain,
+    verticalVirtualBrain,
     reservedContentHeight
   } = useListRendering({
     getComputed,
@@ -7748,10 +7862,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;
@@ -7760,31 +7881,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);
@@ -7820,25 +7944,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,