npm - @infinite-table/infinite-react - Versions diffs - 0.2.0 → 0.2.4 - Mend

@infinite-table/infinite-react 0.2.0 → 0.2.4

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.esm.js CHANGED Viewed

@@ -619,7 +619,7 @@ var require_binary_search = __commonJS({
 // src/components/InfiniteTable/index.tsx
 import {
   StrictMode,
-  createElement as createElement33,
+  createElement as createElement32,
   memo as memo13,
   useEffect as useEffect24,
   useLayoutEffect as useLayoutEffect5
@@ -768,7 +768,6 @@ function initSetupState() {
     draggingColumnId: null,
     pinnedStartScrollListener: new ScrollListener(),
     pinnedEndScrollListener: new ScrollListener(),
-    computedPivotColumns: void 0,
     columnsWhenInlineGroupRenderStrategy: void 0
   };
 }
@@ -799,7 +798,6 @@ var forwardProps = (setupState) => {
     pinnedStartMaxWidth: 1,
     pinnedEndMaxWidth: 1,
     pivotColumn: 1,
-    pivotRowLabelsColumn: 1,
     pivotColumnGroups: 1,
     onScrollbarsChange: 1,
     scrollStopDelay: (scrollStopDelay) => scrollStopDelay != null ? scrollStopDelay : 100,
@@ -856,7 +854,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,
@@ -2048,9 +2046,9 @@ function useColumnGroups() {
 }
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-import { useEffect as useEffect9, useMemo as useMemo4 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo5 } from "react";
-// src/components/InfiniteTable/state/getComputedPivotColumnsFromDataSourcePivotColumns.tsx
+// src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
 import {
   createElement as createElement4
 } from "react";
@@ -2126,93 +2124,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__ */ createElement4("div", {
-            className: join(display.flex, alignItems.center, GroupRowExpanderCls)
-          }, showExpanderIcon ? /* @__PURE__ */ createElement4(ExpanderIcon, {
-            expanded: !rowInfo.collapsed,
-            onChange: () => {
-              toggleGroupRow(rowInfo.groupKeys);
-            }
-          }) : null, /* @__PURE__ */ createElement4("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
-import {
-  createElement as createElement5
-} from "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);
     }
@@ -2237,14 +2157,20 @@ function getGroupColumnRender({
         return null;
       }
     }
-    return /* @__PURE__ */ createElement5("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__ */ createElement4(ExpanderIcon, {
+        expanded: !collapsed,
+        onChange: () => {
+          toggleGroupRow(groupKeys);
+        }
+      });
+      icon = column.renderGroupIcon ? column.renderGroupIcon(Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)) : defaultIcon;
+    }
+    return /* @__PURE__ */ createElement4("div", {
       className: join(display.flex, alignItems.center)
-    }, /* @__PURE__ */ createElement5(ExpanderIcon, {
-      expanded: !collapsed,
-      onChange: () => {
-        toggleGroupRow(groupKeys);
-      }
-    }), /* @__PURE__ */ createElement5("div", {
+    }, icon, /* @__PURE__ */ createElement4("div", {
       className: cssEllipsisClassName
     }, value != null ? value : null));
   };
@@ -2280,21 +2206,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__ */ createElement5("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__ */ createElement4(ExpanderIcon, {
+          expanded: !collapsed,
+          onChange: () => {
+            toggleGroupRow(rowInfo.groupKeys);
+          }
+        });
+        icon = column.renderGroupIcon ? column.renderGroupIcon(Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)) : defaultIcon;
+      }
+      return /* @__PURE__ */ createElement4("div", {
         className: join(display.flex, alignItems.center, GroupRowExpanderCls)
-      }, /* @__PURE__ */ createElement5(ExpanderIcon, {
-        expanded: !rowInfo.collapsed,
-        onChange: () => {
-          toggleGroupRow(rowInfo.groupKeys);
-        }
-      }), /* @__PURE__ */ createElement5("div", {
+      }, icon, /* @__PURE__ */ createElement4("div", {
         className: cssEllipsisClassName
       }, value != null ? value : null));
     }
@@ -2315,7 +2249,7 @@ import { useCallback as useCallback4 } from "react";
 // src/components/DataSource/index.tsx
 import {
   Fragment,
-  createElement as createElement6
+  createElement as createElement5
 } from "react";
 // src/utils/multisort/sortTypes.ts
@@ -2393,7 +2327,7 @@ var getMultisortFunction = (sortInfo, get) => {
 };
 // src/components/DataSource/privateHooks/useLoadData.ts
-import { useEffect as useEffect8, useRef as useRef6, useState as useState4 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo4, useRef as useRef6, useState as useState4 } from "react";
 // src/utils/DeepMap/once.ts
 function once(fn) {
@@ -2664,6 +2598,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;
 }
@@ -2727,13 +2662,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;
@@ -2744,6 +2689,7 @@ function lazyGroup(groupParams, rootData) {
       currentGroupKeys.push(key);
       const deepMapGroupValue = {
         items: [],
+        commonData: dataObject,
         reducerResults: dataArray[i].aggregations || {}
       };
       deepMap.set(currentGroupKeys, deepMapGroupValue);
@@ -2879,10 +2825,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];
@@ -2892,12 +2843,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,
@@ -2905,7 +2860,7 @@ function getEnhancedGroupData(options, deepMapValue) {
     indexInParentGroups: options.indexInParentGroups,
     indexInGroup: options.indexInGroup,
     indexInAll: options.indexInAll,
-    value: groupKeys[groupKeys.length - 1],
+    value: theValue,
     rootGroupBy: groupBy,
     groupBy: groupNesting === groupBy.length ? groupBy : groupBy.slice(0, groupNesting),
     isGroupRow: true,
@@ -2974,7 +2929,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,
@@ -3029,11 +2984,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;
@@ -3048,7 +3025,7 @@ function buildDataSourceDataParams(componentState, overrides) {
     dataSourceParams.livePaginationCursor = componentState.livePaginationCursor;
     dataSourceParams.cursorId = componentState.cursorId;
   }
-  if (componentState.fullLazyLoad) {
+  if (componentState.lazyLoad) {
     if (componentState.lazyLoadBatchSize != null && componentState.lazyLoadBatchSize > 0) {
       dataSourceParams.lazyLoadBatchSize = componentState.lazyLoadBatchSize;
       dataSourceParams.lazyLoadStartIndex = 0;
@@ -3073,15 +3050,34 @@ function buildDataSourceDataParams(componentState, overrides) {
 }
 function loadData(data, componentState, actions, overrides) {
   const dataParams = buildDataSourceDataParams(componentState, overrides);
+  if (componentState.lazyLoad) {
+    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.lazyLoad) {
     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)) {
@@ -3093,10 +3089,11 @@ function loadData(data, componentState, actions, overrides) {
       if (remoteData.mappings) {
         actions.pivotMappings = remoteData.mappings;
       }
-      if (componentState.fullLazyLoad && dataParams.groupKeys) {
-        const lazyGroupData = DeepMap.clone(componentState.originalLazyGroupData);
-        const key = [LAZY_ROOT_KEY_FOR_GROUPS, ...dataParams.groupKeys];
+      if (componentState.lazyLoad) {
+        const lazyGroupData = componentState.originalLazyGroupData;
+        const key = [LAZY_ROOT_KEY_FOR_GROUPS, ...dataParams.groupKeys || []];
         const newGroupRowInfo = {
+          cache: !!remoteData.cache,
           totalCount: (_a = remoteData.totalCount) != null ? _a : dataArray.length,
           items: dataArray
         };
@@ -3104,11 +3101,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];
           }
@@ -3119,7 +3120,11 @@ function loadData(data, componentState, actions, overrides) {
           lazyGroupData.set(key, newGroupRowInfo);
         }
         skipAssign = true;
-        actions.originalLazyGroupData = lazyGroupData;
+        actions.originalLazyGroupDataChangeDetect = getChangeDetect();
+        if (!dataParams.groupKeys || !dataParams.groupKeys.length) {
+          const topLevelItems = lazyGroupData.get([LAZY_ROOT_KEY_FOR_GROUPS]);
+          actions.originalDataArray = [...topLevelItems.items];
+        }
       }
     } else {
       dataArray = dataParam;
@@ -3127,7 +3132,7 @@ function loadData(data, componentState, actions, overrides) {
     if (!skipAssign) {
       actions.originalDataArray = dataArray;
     }
-    if (dataIsPromise) {
+    if (dataIsPromise && !componentState.lazyLoad) {
       actions.loading = false;
     }
   });
@@ -3146,9 +3151,7 @@ function useLoadData() {
     pivotBy,
     livePagination,
     livePaginationCursor,
-    cursorId: stateCursorId,
-    lazyLoadBatchSize,
-    notifyScrollStop
+    cursorId: stateCursorId
   } = componentState;
   const [scrollbars, setScrollbars] = useState4({
     vertical: false,
@@ -3189,33 +3192,7 @@ function useLoadData() {
     cursorId: livePagination ? stateCursorId : null
   };
   const initialRef = useRef6(true);
-  useEffect8(() => {
-    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") {
@@ -3236,6 +3213,126 @@ function useLoadData() {
     }
   }, depsObject);
 }
+function useLazyLoadRange() {
+  const {
+    getComponentState,
+    componentActions: actions,
+    componentState
+  } = useComponentState();
+  const loadingCache = useMemo4(() => {
+    return new Map();
+  }, [componentState.data]);
+  globalThis.loadingCache = loadingCache;
+  const {
+    lazyLoadBatchSize,
+    notifyRenderRangeChange,
+    dataArray,
+    scrollStopDelayUpdatedByTable
+  } = componentState;
+  const latestRenderRangeRef = useRef6(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 = useMemo4(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
+  useEffect8(() => {
+    if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
+      return notifyRenderRangeChange.onChange((param) => {
+        latestRenderRangeRef.current = param;
+        loadRange(param, loadingCache);
+      });
+    }
+    return;
+  }, [lazyLoadBatchSize, loadingCache]);
+  useEffect8(() => {
+    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 cachedFnCalls = 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 || (cachedFnCalls == null ? void 0 : cachedFnCalls[batchStartRowId])) {
+        continue;
+      }
+      const shouldSetFnCalls = !cachedFnCalls;
+      cachedFnCalls = cachedFnCalls || {};
+      const currentFnCall = {
+        lazyLoadStartIndex: batchStartIndexInGroup,
+        lazyLoadBatchSize,
+        groupKeys: theGroupKeys
+      };
+      if (!cachedFnCalls[batchStartRowId]) {
+        cachedFnCalls[batchStartRowId] = currentFnCall;
+      }
+      if (shouldSetFnCalls) {
+        perGroupFnCalls.set(cacheKeys, cachedFnCalls);
+      }
+    }
+  }
+  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([]);
@@ -3435,8 +3532,11 @@ function initSetupState2() {
     dataParams: void 0,
     notifyScrollbarsChange: buildSubscriptionCallback(),
     notifyScrollStop: buildSubscriptionCallback(),
+    notifyRenderRangeChange: buildSubscriptionCallback(),
     pivotTotalColumnPosition: "end",
+    scrollStopDelayUpdatedByTable: 100,
     originalLazyGroupData,
+    originalLazyGroupDataChangeDetect: 0,
     originalDataArray,
     cursorId: defaultCursorId,
     showSeparatePivotColumnForSingleAggregation: false,
@@ -3467,12 +3567,11 @@ function getCompareObjectForDataParams(dataParams) {
 var forwardProps3 = (setupState) => {
   return {
     onDataParamsChange: (fn) => fn ? discardCallsWithEqualArg(fn, 100, getCompareObjectForDataParams) : void 0,
-    fullLazyLoad: 1,
+    lazyLoad: (lazyLoad) => !!lazyLoad,
     data: 1,
     pivotBy: 1,
     primaryKey: 1,
     livePagination: 1,
-    lazyLoadBatchSize: (lazyLoadBatchSize) => lazyLoadBatchSize != null ? lazyLoadBatchSize : -1,
     aggregationReducers: 1,
     collapseGroupRowsOnDataFunctionChange: (collapseGroupRowsOnDataFunctionChange) => collapseGroupRowsOnDataFunctionChange != null ? collapseGroupRowsOnDataFunctionChange : true,
     loading: (loading) => loading != null ? loading : false,
@@ -3499,7 +3598,8 @@ function mapPropsToState2(params) {
   const controlledSort = isControlledValue(props.sortInfo);
   const result = {
     controlledSort,
-    multiSort: Array.isArray(controlledSort ? props.sortInfo : props.defaultSortInfo)
+    multiSort: Array.isArray(controlledSort ? props.sortInfo : props.defaultSortInfo),
+    lazyLoadBatchSize: typeof props.lazyLoad === "object" ? props.lazyLoad.batchSize : void 0
   };
   if (props.livePagination) {
     const dataArrayChanged = !oldState || oldState.originalDataArray !== state.originalDataArray;
@@ -3512,7 +3612,7 @@ var debugFullLazyLoad = dbg("DataSource:fullLazyLoad");
 function onPropChange(params, props, actions) {
   const { name, newValue } = params;
   if (name === "data" && typeof newValue === "function" && !props.groupRowsState) {
-    if (props.fullLazyLoad) {
+    if (props.lazyLoad) {
       debugFullLazyLoad(`"data" function prop has changed`);
     }
     if (props.collapseGroupRowsOnDataFunctionChange !== false) {
@@ -3621,23 +3721,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) => {
@@ -3795,20 +3879,33 @@ function concludeReducer(params) {
   var _a;
   const { state, previousState } = params;
   const sortInfo = state.sortInfo;
-  const shouldSort = !!(sortInfo == null ? void 0 : sortInfo.length) && !state.controlledSort;
-  const originalDataArrayChanged = haveDepsChanged(previousState, state, [
+  let shouldSort = !!(sortInfo == null ? void 0 : sortInfo.length) && !state.controlledSort;
+  if (state.lazyLoad || state.livePagination) {
+    shouldSort = false;
+  }
+  let originalDataArrayChanged = haveDepsChanged(previousState, state, [
     "originalDataArray"
   ]);
+  const dataSourceChange = previousState && state.data !== previousState.data;
+  let lazyLoadGroupDataChange = state.lazyLoad && previousState && (previousState.groupBy !== state.groupBy || previousState.sortInfo !== state.sortInfo);
+  if (dataSourceChange) {
+    lazyLoadGroupDataChange = true;
+  }
+  if (lazyLoadGroupDataChange) {
+    state.originalLazyGroupData = new DeepMap();
+    originalDataArrayChanged = true;
+  }
   const sortInfoChanged = haveDepsChanged(previousState, state, ["sortInfo"]);
   const sortDepsChanged = originalDataArrayChanged || sortInfoChanged;
   const shouldSortAgain = shouldSort && (sortDepsChanged || !state.lastSortDataArray);
   const groupBy = state.groupBy;
   const pivotBy = state.pivotBy;
   const shouldGroup = groupBy.length || pivotBy;
-  const groupsDepsChanged = haveDepsChanged(previousState, state, [
+  const groupsDepsChanged = originalDataArrayChanged || haveDepsChanged(previousState, state, [
     "generateGroupRows",
     "originalDataArray",
     "originalLazyGroupData",
+    "originalLazyGroupDataChangeDetect",
     "groupBy",
     "groupRowsState",
     "pivotBy",
@@ -3829,11 +3926,15 @@ 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) {
-      const groupResult = state.fullLazyLoad ? lazyGroup({
+      const groupResult = state.lazyLoad ? lazyGroup({
         groupBy,
         pivot: pivotBy,
         mappings: state.pivotMappings,
@@ -3871,7 +3972,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;
@@ -3899,7 +4000,7 @@ function DataSourceWithContext(props) {
   if (typeof children === "function") {
     children = children(computedValues);
   }
-  return /* @__PURE__ */ createElement6(Fragment, null, children);
+  return /* @__PURE__ */ createElement5(Fragment, null, children);
 }
 var DataSourceRoot = getComponentStateRoot({
   initSetupState: initSetupState2,
@@ -3922,14 +4023,14 @@ function DataSourceCmp({ children }) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
-  return /* @__PURE__ */ createElement6(DataSourceContext.Provider, {
+  return /* @__PURE__ */ createElement5(DataSourceContext.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ createElement6(DataSourceWithContext, {
+  }, /* @__PURE__ */ createElement5(DataSourceWithContext, {
     children
   }));
 }
 function DataSource(props) {
-  return /* @__PURE__ */ createElement6(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ createElement6(DataSourceCmp, {
+  return /* @__PURE__ */ createElement5(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ createElement5(DataSourceCmp, {
     children: props.children
   }));
 }
@@ -3942,7 +4043,7 @@ function useToggleGroupRow() {
     const newState = new GroupRowsState(state.groupRowsState);
     newState.toggleGroupRow(groupKeys);
     dataSourceActions.groupRowsState = newState;
-    if (state.fullLazyLoad && newState.isGroupRowExpanded(groupKeys)) {
+    if (state.lazyLoad && newState.isGroupRowExpanded(groupKeys)) {
       loadData(state.data, state, dataSourceActions, {
         groupKeys
       });
@@ -3953,7 +4054,7 @@ function useToggleGroupRow() {
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
 function useGroupByMap(groupBy) {
-  const groupByMap = useMemo4(() => {
+  const groupByMap = useMemo5(() => {
     return groupBy.reduce((acc, groupBy2, index) => {
       acc.set(groupBy2.field, {
         groupBy: groupBy2,
@@ -3980,9 +4081,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();
@@ -3992,6 +4093,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);
@@ -4051,51 +4155,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();
   useEffect9(() => {
-    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();
-  useEffect9(() => {
-    if (pivotColumns) {
-      return;
-    }
     const update = () => {
       const columnsWhenGrouping = getColumnsWhenGrouping({
         columns,
         groupColumn,
-        groupRenderStrategy,
+        pivotColumn,
+        pivotTotalColumnPosition,
+        groupRenderStrategy: groupRenderStrategy === "inline" ? "single-column" : groupRenderStrategy,
         groupBy,
+        pivotBy,
         pivotColumns,
         toggleGroupRow
       });
@@ -4107,11 +4192,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 {
@@ -4164,8 +4263,8 @@ function useHideEmptyGroupColumns(groupRowsMap) {
     getDataSourceState,
     groupRenderStrategy,
     generatedColumns,
+    originalLazyGroupDataChangeDetect,
     groupBy,
-    groupRowsMap,
     hideEmptyGroupColumns ? groupRowsState : null,
     hideEmptyGroupColumns
   ]);
@@ -4174,14 +4273,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;
   }
@@ -4191,6 +4290,7 @@ function getColumnsWhenGrouping(params) {
       const generatedGroupColumn = getColumnForGroupBy({
         groupByForColumn,
         groupBy,
+        pivotBy,
         groupIndexForColumn,
         groupCount: arr.length,
         groupRenderStrategy
@@ -4201,13 +4301,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;
 }
@@ -4246,7 +4373,7 @@ function useComputed() {
   }, [showSeparatePivotColumnForSingleAggregation]);
   const { multiSort } = dataSourceState;
   useColumnGroups();
-  useColumnsWhen();
+  const { toggleGroupRow } = useColumnsWhen();
   const setSortInfo = useCallback5((sortInfo) => {
     var _a2;
     const newSortInfo = multiSort ? sortInfo : (_a2 = sortInfo[0]) != null ? _a2 : null;
@@ -4315,6 +4442,7 @@ function useComputed() {
   const computedPinnedStartOverflow = computedPinnedStartWidth ? computedPinnedStartColumnsWidth > computedPinnedStartWidth : false;
   const computedPinnedEndOverflow = computedPinnedEndWidth ? computedPinnedEndColumnsWidth > computedPinnedEndWidth : false;
   return {
+    toggleGroupRow,
     computedPinnedStartOverflow,
     computedPinnedEndOverflow,
     computedPinnedStartWidth,
@@ -4339,7 +4467,7 @@ function useComputed() {
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
 import {
-  createElement as createElement7,
+  createElement as createElement6,
   forwardRef
 } from "react";
@@ -4351,7 +4479,7 @@ var useInternalProps = () => {
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
 var InfiniteTableBody = forwardRef(function InfiniteTableBody2(props, ref) {
   const { rootClassName: rootClassName12 } = useInternalProps();
-  return /* @__PURE__ */ createElement7("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ createElement6("div", __spreadProps(__spreadValues({
     ref
   }, props), {
     className: join(`${rootClassName12}Body`, position.relative, flex["1"], transformTranslateZero, props.className)
@@ -4360,12 +4488,12 @@ var InfiniteTableBody = forwardRef(function InfiniteTableBody2(props, ref) {
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
 import {
-  createElement as createElement19
+  createElement as createElement18
 } from "react";
 // src/components/InfiniteTable/components/ScrollbarPlaceholder.tsx
 import {
-  createElement as createElement8,
+  createElement as createElement7,
   memo as memo2
 } from "react";
 function HorizontalScrollbarPlaceholderFn(props) {
@@ -4373,7 +4501,7 @@ function HorizontalScrollbarPlaceholderFn(props) {
   if (!scrollbarWidth2) {
     return null;
   }
-  return /* @__PURE__ */ createElement8("div", {
+  return /* @__PURE__ */ createElement7("div", {
     "data-name": "horizontal-scrollbar-placeholder",
     style: __spreadValues({
       position: "absolute",
@@ -4389,7 +4517,7 @@ function VerticalScrollbarPlaceholderFn(props) {
   if (!scrollbarWidth2) {
     return null;
   }
-  return /* @__PURE__ */ createElement8("div", {
+  return /* @__PURE__ */ createElement7("div", {
     "data-name": "vertical-scrollbar-placeholder",
     style: __spreadValues({
       position: "absolute",
@@ -4415,7 +4543,7 @@ var HeaderWrapperCls = "_12zfob1v _16lm1iw16 _16lm1iw1 _16lm1iwj _16lm1iw10";
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 import {
-  createElement as createElement15,
+  createElement as createElement14,
   memo as memo6
 } from "react";
 import { useCallback as useCallback8, useEffect as useEffect14, useRef as useRef9 } from "react";
@@ -4423,13 +4551,13 @@ import { useCallback as useCallback8, useEffect as useEffect14, useRef as useRef
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
 import {
   Fragment as Fragment2,
-  createElement as createElement11
+  createElement as createElement10
 } from "react";
 import { useCallback as useCallback7, useEffect as useEffect12, useRef as useRef8 } from "react";
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
 import {
-  createElement as createElement9,
+  createElement as createElement8,
   memo as memo3
 } from "react";
@@ -4490,12 +4618,12 @@ function InfiniteTableCellFn(props) {
       style.transform = `translate3d(${shiftLeft}px, 0px, 0px)`;
     }
   }
-  return /* @__PURE__ */ createElement9("div", __spreadProps(__spreadValues({}, domProps), {
+  return /* @__PURE__ */ createElement8("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__ */ createElement9("div", {
+  }), beforeChildren, cssEllipsis ? /* @__PURE__ */ createElement8("div", {
     className: `${rootClassName2}Cell_content ${cssEllipsisClassName}`
   }, children) : children, afterChildren);
 }
@@ -4505,7 +4633,7 @@ var InfiniteTableCell = memo3(InfiniteTableCellFn);
 var import_binary_search = __toModule(require_binary_search());
 import {
   useCallback as useCallback6,
-  useMemo as useMemo5,
+  useMemo as useMemo6,
   useRef as useRef7,
   useState as useState6
 } from "react";
@@ -4552,8 +4680,8 @@ var useColumnPointerEvents = ({
   const dragging = draggingDiff != null;
   const { componentActions, computed } = useInfiniteTable();
   const { computedColumnOrder } = computed;
-  const column = useMemo5(() => columns.get(columnId), [columnId, columns]);
-  const { columnIndex, columnWidth, columnsArray } = useMemo5(() => {
+  const column = useMemo6(() => columns.get(columnId), [columnId, columns]);
+  const { columnIndex, columnWidth, columnsArray } = useMemo6(() => {
     const columnsArray2 = Array.from(columns.values());
     return {
       columnsArray: columnsArray2,
@@ -4700,7 +4828,7 @@ import { createPortal } from "react-dom";
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
 import {
-  createElement as createElement10
+  createElement as createElement9
 } from "react";
 import { useEffect as useEffect11, useState as useState7 } from "react";
 var defaultLineStyle = {
@@ -4755,18 +4883,18 @@ function SortIcon(props) {
   if (direction === -1) {
     indexStyle.top = "100%";
   }
-  return /* @__PURE__ */ createElement10("div", {
+  return /* @__PURE__ */ createElement9("div", {
     style: __spreadProps(__spreadValues({}, style), { width: size }),
     className: join(className, "ITableIcon", "ITableIcon-sort")
-  }, showIndex ? /* @__PURE__ */ createElement10("div", {
+  }, showIndex ? /* @__PURE__ */ createElement9("div", {
     "data-name": "index",
     style: indexStyle
-  }, index) : null, /* @__PURE__ */ createElement10("div", {
+  }, index) : null, /* @__PURE__ */ createElement9("div", {
     style: __spreadValues({ width: sizes[0] }, lineStyle),
     onTransitionEnd
-  }), /* @__PURE__ */ createElement10("div", {
+  }), /* @__PURE__ */ createElement9("div", {
     style: __spreadValues({ width: sizes[1] }, lineStyle)
-  }), /* @__PURE__ */ createElement10("div", {
+  }), /* @__PURE__ */ createElement9("div", {
     style: __spreadValues({ width: sizes[2] }, lineStyle)
   }));
 }
@@ -4797,7 +4925,7 @@ function InfiniteTableHeaderCell(props) {
     });
   }
   header = header != null ? header : column.name;
-  const sortTool = /* @__PURE__ */ createElement11(SortIcon, {
+  const sortTool = /* @__PURE__ */ createElement10(SortIcon, {
     index: column.computedMultiSort ? column.computedSortIndex + 1 : void 0,
     className: `${baseCls}__sort-icon ${HeaderSortIconCls}`,
     direction: column.computedSorted ? column.computedSortedAsc ? 1 : -1 : 0
@@ -4835,7 +4963,7 @@ function InfiniteTableHeaderCell(props) {
   let offset = offsetFromProps != null ? offsetFromProps : virtualized ? 0 : column.computedPinningOffset;
   let draggingProxy = null;
   if (dragging) {
-    draggingProxy = /* @__PURE__ */ createElement11("div", {
+    draggingProxy = /* @__PURE__ */ createElement10("div", {
       className: `${baseCls}Proxy ${HeaderCellProxy}`,
       style: {
         position: "absolute",
@@ -4848,7 +4976,7 @@ function InfiniteTableHeaderCell(props) {
     }, header);
     draggingProxy = createPortal(draggingProxy, portalDOMRef.current);
   }
-  return /* @__PURE__ */ createElement11(Fragment2, null, /* @__PURE__ */ createElement11(InfiniteTableCell, {
+  return /* @__PURE__ */ createElement10(Fragment2, null, /* @__PURE__ */ createElement10(InfiniteTableCell, {
     domRef: ref,
     column,
     "data-name": `HeaderCell`,
@@ -4865,7 +4993,7 @@ function InfiniteTableHeaderCell(props) {
 // src/components/RawList/index.tsx
 import {
-  createElement as createElement14,
+  createElement as createElement13,
   memo as memo5
 } from "react";
 import { useEffect as useEffect13 } from "react";
@@ -4873,7 +5001,7 @@ import { useEffect as useEffect13 } from "react";
 // src/components/RawList/AvoidReactDiff.tsx
 import {
   Fragment as Fragment3,
-  createElement as createElement12,
+  createElement as createElement11,
   memo as memo4
 } from "react";
 import { useLayoutEffect as useLayoutEffect3, useState as useState8 } from "react";
@@ -4885,16 +5013,16 @@ function AvoidReactDiffFn(props) {
     });
     return remove;
   }, [props.updater]);
-  return /* @__PURE__ */ createElement12(Fragment3, null, children);
+  return /* @__PURE__ */ createElement11(Fragment3, null, children);
 }
 var AvoidReactDiff = memo4(AvoidReactDiffFn);
 // src/components/RawList/useVirtualRenderer.ts
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo7 } from "react";
 // src/components/RawList/ReactVirtualRenderer.tsx
 import {
-  createElement as createElement13
+  createElement as createElement12
 } from "react";
 // src/components/RawList/MappedItems.ts
@@ -5140,7 +5268,7 @@ var ReactVirtualRenderer = class extends Logger {
     };
     this.itemDOMRefs[elementIndex] = domRef;
     this.updaters[elementIndex] = buildSubscriptionCallback();
-    const item = /* @__PURE__ */ createElement13(AvoidReactDiff, {
+    const item = /* @__PURE__ */ createElement12(AvoidReactDiff, {
       key: elementIndex,
       name: `${elementIndex}`,
       updater: this.updaters[elementIndex]
@@ -5206,7 +5334,7 @@ function createRenderer(brain) {
 function useVirtualRenderer({
   brain
 }) {
-  return useMemo6(() => {
+  return useMemo7(() => {
     return createRenderer(brain);
   }, [brain]);
 }
@@ -5237,7 +5365,7 @@ function RawListFn(props) {
     });
     return remove;
   }, [brain, onRenderUpdater]);
-  return /* @__PURE__ */ createElement14(AvoidReactDiff, {
+  return /* @__PURE__ */ createElement13(AvoidReactDiff, {
     updater: onRenderUpdater
   });
 }
@@ -5262,7 +5390,7 @@ function InfiniteTableHeaderFn(props) {
       }
       return null;
     }
-    return /* @__PURE__ */ createElement15(InfiniteTableHeaderCell, {
+    return /* @__PURE__ */ createElement14(InfiniteTableHeaderCell, {
       domRef: domRef2,
       column,
       headerHeight,
@@ -5287,7 +5415,7 @@ function InfiniteTableHeaderFn(props) {
     className: join(TableHeaderClassName, `${TableHeaderClassName}--virtualized`, className, headerCls),
     style
   };
-  return /* @__PURE__ */ createElement15("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement15(RawList, {
+  return /* @__PURE__ */ createElement14("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement14(RawList, {
     brain,
     renderItem: renderColumn
   }));
@@ -5296,15 +5424,15 @@ var InfiniteTableHeader = memo6(InfiniteTableHeaderFn);
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderUnvirtualized.tsx
 import {
-  createElement as createElement18,
+  createElement as createElement17,
   memo as memo7,
-  useMemo as useMemo7,
+  useMemo as useMemo8,
   useRef as useRef10
 } from "react";
 // src/components/InfiniteTable/components/InfiniteTableHeader/renderColumnHeaderGroups.tsx
 import {
-  createElement as createElement17
+  createElement as createElement16
 } from "react";
 // src/components/InfiniteTable/components/InfiniteTableHeader/buildColumnAndGroupTree.ts
@@ -5396,7 +5524,7 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
 import {
-  createElement as createElement16
+  createElement as createElement15
 } from "react";
 var TableHeaderGroupClassName = `${rootClassName}HeaderGroup`;
 function InfiniteTableHeaderGroup(props) {
@@ -5411,16 +5539,16 @@ function InfiniteTableHeaderGroup(props) {
     width: columnGroup.computedWidth,
     height
   };
-  return /* @__PURE__ */ createElement16("div", {
+  return /* @__PURE__ */ createElement15("div", {
     "data-group-id": columnGroup.id,
     className: join(HeaderGroupCls, TableHeaderGroupClassName, `${TableHeaderGroupClassName}--unvirtualized`),
     style
-  }, /* @__PURE__ */ createElement16("div", {
+  }, /* @__PURE__ */ createElement15("div", {
     className: join(`${TableHeaderGroupClassName}__header`, HeaderGroup_Header),
     style: { height: headerHeight }
-  }, /* @__PURE__ */ createElement16("div", {
+  }, /* @__PURE__ */ createElement15("div", {
     className: join(`${TableHeaderGroupClassName}__header-content`, cssEllipsisClassName)
-  }, header)), /* @__PURE__ */ createElement16("div", {
+  }, header)), /* @__PURE__ */ createElement15("div", {
     className: join(`${TableHeaderGroupClassName}__children`, HeaderGroup_Children)
   }, props.children));
 }
@@ -5443,7 +5571,7 @@ function renderColumnHeaderGroups(config) {
     return items2.map((colGroupItem) => {
       if (colGroupItem.type === "column") {
         const col = colGroupItem.ref;
-        return /* @__PURE__ */ createElement17(InfiniteTableHeaderCell, {
+        return /* @__PURE__ */ createElement16(InfiniteTableHeaderCell, {
           key: col.id,
           headerHeight: (columnGroupsMaxDepth - colGroupItem.depth + 2) * headerHeight,
           column: col,
@@ -5457,7 +5585,7 @@ function renderColumnHeaderGroups(config) {
         colIds.push(col.id);
         return col;
       });
-      return /* @__PURE__ */ createElement17(InfiniteTableHeaderGroup, {
+      return /* @__PURE__ */ createElement16(InfiniteTableHeaderGroup, {
         key: `${colGroupItem.uniqueGroupId.join("/")}`,
         columns: columns2,
         height: (columnGroupsMaxDepth - colGroupItem.depth + 2) * headerHeight,
@@ -5512,7 +5640,7 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
   } = useInfiniteTable();
   const domRef = useRef10(null);
   const hasColumnGroups = computedColumnGroups.size > 0;
-  const columnHeaderGroups = useMemo7(() => {
+  const columnHeaderGroups = useMemo8(() => {
     return hasColumnGroups ? renderColumnHeaderGroups({
       columnGroups: computedColumnGroups,
       columnGroupsDepthsMap,
@@ -5531,7 +5659,7 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
     columnGroupsMaxDepth
   ]);
   const children = hasColumnGroups ? columnHeaderGroups : columns.map((c) => {
-    return /* @__PURE__ */ createElement18(InfiniteTableHeaderCell, {
+    return /* @__PURE__ */ createElement17(InfiniteTableHeaderCell, {
       key: c.id,
       headerHeight,
       column: c,
@@ -5554,14 +5682,14 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
     const removeOnScroll = scroller.onScroll(onScroll);
     return removeOnScroll;
   }, [brain, scrollListener]);
-  return /* @__PURE__ */ createElement18("div", __spreadProps(__spreadValues({}, domProps), {
+  return /* @__PURE__ */ createElement17("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__ */ createElement18("div", {
+  }), /* @__PURE__ */ createElement17("div", {
     style: { width: totalWidth },
     className: join(flexFlow.row, display.flex),
     ref: domRef
@@ -5600,7 +5728,7 @@ function TableHeaderWrapper(props) {
   const unvirtualizedStyle = !virtualizeHeader && computedPinnedStartColumnsWidth ? {
     left: computedPinnedStartWidth
   } : void 0;
-  const header = virtualizeHeader ? /* @__PURE__ */ createElement19(InfiniteTableHeader, {
+  const header = virtualizeHeader ? /* @__PURE__ */ createElement18(InfiniteTableHeader, {
     columns: computedUnpinnedColumns,
     repaintId: virtualizeHeader ? repaintId : void 0,
     brain,
@@ -5613,7 +5741,7 @@ function TableHeaderWrapper(props) {
     },
     availableWidth: computedUnpinnedColumnsWidth,
     totalWidth: computedUnpinnedColumnsWidth
-  }) : /* @__PURE__ */ createElement19(InfiniteTableHeaderUnvirtualized, {
+  }) : /* @__PURE__ */ createElement18(InfiniteTableHeaderUnvirtualized, {
     style: unvirtualizedStyle,
     brain,
     scrollable: true,
@@ -5622,12 +5750,12 @@ function TableHeaderWrapper(props) {
     availableWidth: computedUnpinnedColumnsWidth,
     totalWidth: computedUnpinnedColumnsWidth
   });
-  return /* @__PURE__ */ createElement19("div", {
+  return /* @__PURE__ */ createElement18("div", {
     className: HeaderWrapperCls,
     style: {
       height: virtualizeHeader ? height : void 0
     }
-  }, hasPinnedStart ? /* @__PURE__ */ createElement19(InfiniteTableHeaderUnvirtualized, {
+  }, hasPinnedStart ? /* @__PURE__ */ createElement18(InfiniteTableHeaderUnvirtualized, {
     style: {
       left: 0,
       position: "absolute",
@@ -5639,7 +5767,7 @@ function TableHeaderWrapper(props) {
     scrollable: computedPinnedStartOverflow,
     pinning: "start",
     scrollListener: computedPinnedStartOverflow ? pinnedStartScrollListener : void 0
-  }) : null, header, hasPinnedEnd ? /* @__PURE__ */ createElement19(InfiniteTableHeaderUnvirtualized, {
+  }) : null, header, hasPinnedEnd ? /* @__PURE__ */ createElement18(InfiniteTableHeaderUnvirtualized, {
     style: {
       right: scrollbars.vertical ? getScrollbarWidth() : 0,
       position: "absolute",
@@ -5651,7 +5779,7 @@ function TableHeaderWrapper(props) {
     scrollable: computedPinnedEndOverflow,
     pinning: "end",
     scrollListener: computedPinnedEndOverflow ? pinnedEndScrollListener : void 0
-  }) : null, scrollbars.vertical ? /* @__PURE__ */ createElement19(VerticalScrollbarPlaceholder, {
+  }) : null, scrollbars.vertical ? /* @__PURE__ */ createElement18(VerticalScrollbarPlaceholder, {
     style: {
       height: "100%",
       right: 0
@@ -5661,7 +5789,7 @@ function TableHeaderWrapper(props) {
 // src/components/VirtualScrollContainer/index.tsx
 import {
-  createElement as createElement20,
+  createElement as createElement19,
   forwardRef as forwardRef2
 } from "react";
 import { useRef as useRef11 } from "react";
@@ -5717,7 +5845,7 @@ var VirtualScrollContainer = forwardRef2(function VirtualScrollContainer2(props,
   } = props;
   const domRef = ref != null ? ref : useRef11(null);
   useOnScroll(domRef, onContainerScroll);
-  return /* @__PURE__ */ createElement20("div", {
+  return /* @__PURE__ */ createElement19("div", {
     ref: domRef,
     style,
     className: join(className, rootClassName6, VirtualScrollContainerCls, getScrollableClassName(scrollable))
@@ -5726,7 +5854,7 @@ var VirtualScrollContainer = forwardRef2(function VirtualScrollContainer2(props,
 // src/components/VirtualList/SpacePlaceholder.tsx
 import {
-  createElement as createElement21,
+  createElement as createElement20,
   memo as memo8
 } from "react";
 function SpacePlaceholderFn(props) {
@@ -5738,7 +5866,7 @@ function SpacePlaceholderFn(props) {
     opacity: 0,
     pointerEvents: "none"
   };
-  return /* @__PURE__ */ createElement21("div", {
+  return /* @__PURE__ */ createElement20("div", {
     "data-count": count,
     "data-placeholder-width": true ? width : void 0,
     "data-placeholder-height": true ? height : void 0,
@@ -5749,24 +5877,24 @@ function SpacePlaceholderFn(props) {
 var SpacePlaceholder = memo8(SpacePlaceholderFn);
 // src/components/InfiniteTable/hooks/useListRendering.tsx
-import { useCallback as useCallback17, useEffect as useEffect22, useMemo as useMemo10, useRef as useRef17 } from "react";
+import { useEffect as useEffect22, useMemo as useMemo11, useRef as useRef17 } from "react";
 // src/components/InfiniteTable/hooks/useUnpinnedRendering.tsx
 import {
-  createElement as createElement27
+  createElement as createElement26
 } from "react";
 import { useCallback as useCallback12 } from "react";
 // src/components/VirtualList/VirtualRowList.tsx
 import {
-  createElement as createElement23,
+  createElement as createElement22,
   useCallback as useCallback9
 } from "react";
 // src/components/VirtualList/VirtualList.tsx
 import {
   Fragment as Fragment4,
-  createElement as createElement22
+  createElement as createElement21
 } from "react";
 import { useRef as useRef12, useEffect as useEffect17, useState as useState9 } from "react";
@@ -5849,19 +5977,19 @@ var VirtualList = (props) => {
   if (true) {
     domProps["data-cmp-name"] = `VirtualList`;
   }
-  return /* @__PURE__ */ createElement22(Fragment4, null, /* @__PURE__ */ createElement22("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement22(VirtualScrollContainer, {
+  return /* @__PURE__ */ createElement21(Fragment4, null, /* @__PURE__ */ createElement21("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement21(VirtualScrollContainer, {
     scrollable,
     onContainerScroll
-  }, /* @__PURE__ */ createElement22("div", {
+  }, /* @__PURE__ */ createElement21("div", {
     ref: domRef,
     className: scrollTransformTargetCls,
     "data-name": "scroll-transform-target"
-  }, /* @__PURE__ */ createElement22(RawList, {
+  }, /* @__PURE__ */ createElement21(RawList, {
     brain: virtualBrain,
     renderItem,
     repaintId,
     debugChannel: "VirtualList-" + mainAxis
-  })), children, /* @__PURE__ */ createElement22(SpacePlaceholder, {
+  })), children, /* @__PURE__ */ createElement21(SpacePlaceholder, {
     count,
     width,
     height
@@ -5878,7 +6006,7 @@ var VirtualRowList = (props) => {
       rowIndex: renderProps.itemIndex
     });
   }, [renderRow]);
-  return /* @__PURE__ */ createElement23(VirtualList, __spreadProps(__spreadValues({}, listProps), {
+  return /* @__PURE__ */ createElement22(VirtualList, __spreadProps(__spreadValues({}, listProps), {
     renderItem,
     mainAxis: "vertical",
     itemMainAxisSize: rowHeight,
@@ -5888,7 +6016,7 @@ var VirtualRowList = (props) => {
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRow.tsx
 import {
-  createElement as createElement25,
+  createElement as createElement24,
   memo as memo10,
   useCallback as useCallback11
 } from "react";
@@ -5896,7 +6024,7 @@ import { useRef as useRef14 } from "react";
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
 import {
-  createElement as createElement24,
+  createElement as createElement23,
   memo as memo9
 } from "react";
 var { rootClassName: rootClassName8 } = internalProps;
@@ -5923,9 +6051,6 @@ function InfiniteTableColumnCellFn(props) {
   }
   const { data, isGroupRow, groupBy } = rowInfo;
   const groupRowInfo = null;
-  if (rowInfo.indexInAll === 0 && column.groupByField && column.groupByField === "stack") {
-    debugger;
-  }
   let value = isGroupRow && groupBy && column.groupByField ? rowInfo.value : isColumnWithField(column) ? data == null ? void 0 : data[column.field] : null;
   if (column.valueGetter) {
     value = column.valueGetter(isGroupRow ? {
@@ -5958,7 +6083,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);
@@ -5994,7 +6120,7 @@ function InfiniteTableColumnCellFn(props) {
       }
     }
   }
-  return /* @__PURE__ */ createElement24(InfiniteTableCell, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ createElement23(InfiniteTableCell, __spreadProps(__spreadValues({
     domRef,
     offsetProperty
   }, dataset), {
@@ -6144,7 +6270,7 @@ function InfiniteTableRowFn(props) {
     if (!column) {
     }
     const hidden = false;
-    return /* @__PURE__ */ createElement25(InfiniteTableColumnCell, {
+    return /* @__PURE__ */ createElement24(InfiniteTableColumnCell, {
       getData,
       rowInfo,
       groupRenderStrategy,
@@ -6171,9 +6297,9 @@ function InfiniteTableRowFn(props) {
   if (true) {
     domProps["data-cmp-name"] = "ITableRow";
   }
-  return /* @__PURE__ */ createElement25("div", __spreadProps(__spreadValues({}, domProps), {
+  return /* @__PURE__ */ createElement24("div", __spreadProps(__spreadValues({}, domProps), {
     style
-  }), /* @__PURE__ */ createElement25(RawList, {
+  }), /* @__PURE__ */ createElement24(RawList, {
     brain,
     renderItem: renderCell,
     debugChannel: `${rowIndex}`
@@ -6183,7 +6309,7 @@ var InfiniteTableRow = memo10(InfiniteTableRowFn);
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRowUnvirtualized.tsx
 import {
-  createElement as createElement26,
+  createElement as createElement25,
   memo as memo11
 } from "react";
 function TableRowUnvirtualizedFn(props) {
@@ -6206,7 +6332,7 @@ function TableRowUnvirtualizedFn(props) {
   }, domProps.style);
   const children = columns.map((col) => {
     const hidden = false;
-    return /* @__PURE__ */ createElement26(InfiniteTableColumnCell, {
+    return /* @__PURE__ */ createElement25(InfiniteTableColumnCell, {
       key: col.id,
       virtualized: false,
       rowHeight,
@@ -6219,7 +6345,7 @@ function TableRowUnvirtualizedFn(props) {
       column: col
     });
   });
-  return /* @__PURE__ */ createElement26("div", __spreadProps(__spreadValues({}, domProps), {
+  return /* @__PURE__ */ createElement25("div", __spreadProps(__spreadValues({}, domProps), {
     style
   }), children);
 }
@@ -6266,7 +6392,7 @@ function useUnpinnedRendering(params) {
       rowProps.repaintId = repaintId;
     }
     const TableRowComponent = shouldVirtualizeColumns ? InfiniteTableRow : TableRowUnvirtualized;
-    return /* @__PURE__ */ createElement27(TableRowComponent, __spreadValues({}, rowProps));
+    return /* @__PURE__ */ createElement26(TableRowComponent, __spreadValues({}, rowProps));
   }, [
     repaintId,
     rowHeight,
@@ -6276,7 +6402,7 @@ function useUnpinnedRendering(params) {
     horizontalVirtualBrain,
     verticalVirtualBrain
   ]);
-  const fakeScrollbar = getScrollbarWidth() ? /* @__PURE__ */ createElement27("div", {
+  const fakeScrollbar = getScrollbarWidth() ? /* @__PURE__ */ createElement26("div", {
     "data-name": "horizontal-scrollbar-placeholder--fake",
     style: {
       position: "absolute",
@@ -6287,10 +6413,10 @@ function useUnpinnedRendering(params) {
       overflow: "auto",
       visibility: columnShifts ? "visible" : "hidden"
     }
-  }, /* @__PURE__ */ createElement27("div", {
+  }, /* @__PURE__ */ createElement26("div", {
     style: { height: "100%", width: computedUnpinnedColumnsWidth }
   })) : null;
-  return rowHeight != 0 ? /* @__PURE__ */ createElement27(VirtualRowList, {
+  return rowHeight != 0 ? /* @__PURE__ */ createElement26(VirtualRowList, {
     repaintId: `${repaintId}-unpinned-`,
     brain: verticalVirtualBrain,
     onContainerScroll: applyScrollHorizontal,
@@ -6434,14 +6560,14 @@ var useOnContainerScroll = ({
 // src/components/InfiniteTable/hooks/usePinnedRendering.tsx
 import {
-  createElement as createElement29,
-  useMemo as useMemo8
+  createElement as createElement28,
+  useMemo as useMemo9
 } from "react";
 import { useCallback as useCallback15 } from "react";
 // src/components/VirtualList/RowListWithExternalScrolling.tsx
 import {
-  createElement as createElement28
+  createElement as createElement27
 } from "react";
 import { useEffect as useEffect20, useCallback as useCallback14, useRef as useRef16 } from "react";
@@ -6518,7 +6644,7 @@ var RowListWithExternalScrolling = (props) => {
   if (true) {
     domProps["data-cmp-name"] = "RowListWithExternalScrolling";
   }
-  return /* @__PURE__ */ createElement28("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement28(RawList, {
+  return /* @__PURE__ */ createElement27("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement27(RawList, {
     brain,
     renderItem,
     repaintId
@@ -6541,7 +6667,7 @@ function PinnedRowsContainer(props) {
     brain,
     renderRow
   } = props;
-  const style = useMemo8(() => {
+  const style = useMemo9(() => {
     const result = pinning === "end" ? {
       width: rowWidth,
       height,
@@ -6567,7 +6693,7 @@ function PinnedRowsContainer(props) {
     className: join(`${PinnedRowsContainerClassName}`, PinnedRowsClsVariants[pinning === "start" ? "pinnedStart" : "pinnedEnd"], `${PinnedRowsContainerClassName}--pinned-${pinning}`, `${PinnedRowsContainerClassName}--overflow`, PinnedRowsClsVariants.overflow)
   };
   if (hasOverflow) {
-    return /* @__PURE__ */ createElement29(VirtualScrollContainer, {
+    return /* @__PURE__ */ createElement28(VirtualScrollContainer, {
       scrollable: {
         horizontal: true,
         vertical: false
@@ -6583,18 +6709,18 @@ function PinnedRowsContainer(props) {
       className: join(PinnedRowsContainerClsVariants({
         pinned: pinning
       }), `${PinnedRowsContainerClassName}Container`, `${PinnedRowsContainerClassName}Container--pinned-${pinning}`)
-    }, /* @__PURE__ */ createElement29(RowListWithExternalScrolling, __spreadProps(__spreadValues({}, rowListProps), {
+    }, /* @__PURE__ */ createElement28(RowListWithExternalScrolling, __spreadProps(__spreadValues({}, rowListProps), {
       onMount: (node) => {
         pinnedScrollListener == null ? void 0 : pinnedScrollListener.onScroll((scrollPosition) => {
           updateScroll(node, brain.getScrollPosition(), scrollPosition);
         });
       }
-    })), /* @__PURE__ */ createElement29(SpacePlaceholder, {
+    })), /* @__PURE__ */ createElement28(SpacePlaceholder, {
       width: rowWidth,
       height: 1
     }));
   }
-  return /* @__PURE__ */ createElement29(RowListWithExternalScrolling, __spreadValues({}, rowListProps));
+  return /* @__PURE__ */ createElement28(RowListWithExternalScrolling, __spreadValues({}, rowListProps));
 }
 function useRenderPinnedRow(params) {
   const { getData, getState, columnsWidth, columns, verticalBrain } = params;
@@ -6614,7 +6740,7 @@ function useRenderPinnedRow(params) {
       rowWidth: columnsWidth,
       columns
     }, rowParams);
-    return /* @__PURE__ */ createElement29(TableRowUnvirtualized, __spreadValues({}, rowProps));
+    return /* @__PURE__ */ createElement28(TableRowUnvirtualized, __spreadValues({}, rowProps));
   }, [columnsWidth, columns, verticalBrain]);
   return renderPinnedRow;
 }
@@ -6657,7 +6783,7 @@ function usePinnedRenderingForSide(side, params) {
     columns,
     columnsWidth
   });
-  const pinnedList = columns.length && rowHeight !== 0 ? /* @__PURE__ */ createElement29(PinnedRowsContainer, {
+  const pinnedList = columns.length && rowHeight !== 0 ? /* @__PURE__ */ createElement28(PinnedRowsContainer, {
     pinning: side,
     pinnedScrollListener,
     hasOverflow,
@@ -6670,7 +6796,7 @@ function usePinnedRenderingForSide(side, params) {
     brain: verticalVirtualBrain,
     renderRow: renderRowPinned
   }) : null;
-  const pinnedScrollbarPlaceholder = pinnedList && hasHorizontalScrollbar && !hasOverflow ? /* @__PURE__ */ createElement29(HorizontalScrollbarPlaceholder, {
+  const pinnedScrollbarPlaceholder = pinnedList && hasHorizontalScrollbar && !hasOverflow ? /* @__PURE__ */ createElement28(HorizontalScrollbarPlaceholder, {
     style: side === "end" ? {
       width: columnsWidth,
       right: hasVerticalScrollbar ? getScrollbarWidth() : 0
@@ -6715,9 +6841,9 @@ function usePinnedStartRendering(params) {
 import { useEffect as useEffect21 } from "react";
 // src/components/hooks/useOnce.ts
-import { useMemo as useMemo9 } from "react";
+import { useMemo as useMemo10 } from "react";
 function useOnce(fn) {
-  const onceFn = useMemo9(() => {
+  const onceFn = useMemo10(() => {
     return once(fn);
   }, []);
   return onceFn();
@@ -7239,7 +7365,8 @@ function useListRendering(param) {
     computedUnpinnedColumnsWidth,
     computedPinnedStartOverflow,
     computedPinnedEndOverflow,
-    computedVisibleColumns
+    computedVisibleColumns,
+    toggleGroupRow
   } = computed;
   const { componentState: dataSourceState, getState: getDataSourceState } = useDataSourceContextValue();
   const { dataArray } = dataSourceState;
@@ -7257,7 +7384,7 @@ function useListRendering(param) {
     repaintIdRef.current++;
   }
   const repaintId = repaintIdRef.current;
-  const rowSpan = useMemo10(() => {
+  const rowSpan = useMemo11(() => {
     const colsWithRowspan = computedVisibleColumns.filter((col) => typeof col.rowspan === "function");
     return colsWithRowspan.length ? ({ itemIndex }) => {
       let maxSpan = 1;
@@ -7295,7 +7422,7 @@ function useListRendering(param) {
   const hasHorizontalScrollbar = computedUnpinnedColumnsWidth > bodySize.width - computedPinnedStartColumnsWidth - computedPinnedEndColumnsWidth;
   const reservedContentHeight = verticalVirtualBrain.getTotalSize() + (hasHorizontalScrollbar ? getScrollbarWidth() : 0);
   const hasVerticalScrollbar = bodySize.height > 0 && bodySize.height < reservedContentHeight;
-  const scrollbars = useMemo10(() => ({
+  const scrollbars = useMemo11(() => ({
     vertical: hasVerticalScrollbar,
     horizontal: hasHorizontalScrollbar
   }), [hasVerticalScrollbar, hasHorizontalScrollbar]);
@@ -7323,12 +7450,6 @@ function useListRendering(param) {
     horizontalVirtualBrain,
     reservedContentHeight
   });
-  const { componentActions: dataSourceActions } = useDataSourceContextValue();
-  const toggleGroupRow = useCallback17((groupKeys) => {
-    const newState = new GroupRowsState(getDataSourceState().groupRowsState);
-    newState.toggleGroupRow(groupKeys);
-    dataSourceActions.groupRowsState = newState;
-  }, []);
   const pinnedRenderingParams = {
     bodySize,
     scrollbars,
@@ -7383,9 +7504,9 @@ function useListRendering(param) {
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
 import {
-  createElement as createElement30,
+  createElement as createElement29,
   forwardRef as forwardRef3,
-  useCallback as useCallback18,
+  useCallback as useCallback17,
   useRef as useRef18
 } from "react";
 import { useEffect as useEffect23 } from "react";
@@ -7426,7 +7547,7 @@ var enforceStyle = (node, style) => {
 var InfiniteTableLicenseFooter = forwardRef3(function InfiniteTableLicenseFooter2(props, ref) {
   const { rootClassName: rootClassName12 } = useInternalProps();
   const domRef = useRef18(null);
-  const domCallback = useCallback18((node) => {
+  const domCallback = useCallback17((node) => {
     domRef.current = node;
     if (!ref) {
       return;
@@ -7451,12 +7572,12 @@ var InfiniteTableLicenseFooter = forwardRef3(function InfiniteTableLicenseFooter
       clearInterval(intervalId);
     };
   }, []);
-  return /* @__PURE__ */ createElement30("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ createElement29("div", __spreadProps(__spreadValues({
     ref: domCallback
   }, props), {
     className: join(`${rootClassName12}-Footer`, FooterCls, props.className),
     style: defaultStyle2
-  }), "Powered by", " ", /* @__PURE__ */ createElement30("a", {
+  }), "Powered by", " ", /* @__PURE__ */ createElement29("a", {
     href: "https://infinite-table.com",
     rel: "noopener noreferrer",
     role: "link",
@@ -7465,7 +7586,7 @@ var InfiniteTableLicenseFooter = forwardRef3(function InfiniteTableLicenseFooter
 });
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo12 } from "react";
 // src/components/InfiniteTable/hooks/useLicense/crc32.ts
 var DEFAULT_ReversedPolynomial = 3988292384;
@@ -7615,10 +7736,10 @@ var origin = typeof window !== "undefined" ? window.location.origin : "";
 var [_fullUrl, protocol, sandboxUrl] = Array.from(SANDBOX_REGEX.exec(origin) || []);
 var isInsideSandbox = protocol === "https" && sandboxUrl === "sandpack.codesandbox.io";
 var useLicense = (licenseKey = "") => {
-  const valid = useMemo11(() => {
+  const valid = useMemo12(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.2.0"
+      version: "0.2.4"
     });
     if (!licenseKey && !valid2 && isInsideSandbox) {
       return true;
@@ -7630,8 +7751,8 @@ var useLicense = (licenseKey = "") => {
 // src/components/CSSVariableWatch.tsx
 import {
-  createElement as createElement31,
-  useCallback as useCallback19,
+  createElement as createElement30,
+  useCallback as useCallback18,
   useLayoutEffect as useLayoutEffect4
 } from "react";
 import { useRef as useRef19 } from "react";
@@ -7648,7 +7769,7 @@ var WRAPPER_STYLE = {
 };
 var useCSSVariableWatch = (params) => {
   const lastValueRef = useRef19(0);
-  const onResize = useCallback19(({ height }) => {
+  const onResize = useCallback18(({ height }) => {
     if (height && height !== lastValueRef.current) {
       lastValueRef.current = height;
       params.onChange(height);
@@ -7671,11 +7792,11 @@ var CSSVariableWatch = (props) => {
   useCSSVariableWatch(__spreadProps(__spreadValues({}, props), {
     ref: domRef
   }));
-  return /* @__PURE__ */ createElement31("div", {
+  return /* @__PURE__ */ createElement30("div", {
     "data-name": "css-variable-watcher",
     "data-var": props.varName,
     style: WRAPPER_STYLE
-  }, /* @__PURE__ */ createElement31("div", {
+  }, /* @__PURE__ */ createElement30("div", {
     ref: domRef,
     style: {
       height: props.varName.startsWith("var(") ? props.varName : `var(${props.varName})`
@@ -7769,7 +7890,7 @@ function useDOMProps(initialDOMProps) {
 // src/components/InfiniteTable/components/LoadMask.tsx
 import {
-  createElement as createElement32,
+  createElement as createElement31,
   memo as memo12
 } from "react";
@@ -7783,11 +7904,11 @@ var { rootClassName: rootClassName11 } = internalProps;
 var baseCls2 = `${rootClassName11}-LoadMask`;
 function LoadMaskFn(props) {
   const { visible, children = "Loading" } = props;
-  return /* @__PURE__ */ createElement32("div", {
+  return /* @__PURE__ */ createElement31("div", {
     className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls2}`
-  }, /* @__PURE__ */ createElement32("div", {
+  }, /* @__PURE__ */ createElement31("div", {
     className: `${LoadMaskOverlayCls} ${baseCls2}-Overlay`
-  }), /* @__PURE__ */ createElement32("div", {
+  }), /* @__PURE__ */ createElement31("div", {
     className: `${LoadMaskTextCls} ${baseCls2}-Text`
   }, children));
 }
@@ -7820,7 +7941,8 @@ var InfiniteTableComponent = memo13(function InfiniteTableComponent2() {
   } = useInfiniteTable();
   const {
     componentState: { dataArray, loading },
-    getState: getDataSourceState
+    getState: getDataSourceState,
+    componentActions: dataSourceActions
   } = useDataSourceContextValue();
   const {
     domRef,
@@ -7833,7 +7955,8 @@ var InfiniteTableComponent = memo13(function InfiniteTableComponent2() {
     onHeaderHeightCSSVarChange,
     rowHeightCSSVar,
     headerHeightCSSVar,
-    components
+    components,
+    scrollStopDelay
   } = componentState;
   const { columnShifts, bodySize } = componentState;
   const {
@@ -7846,6 +7969,7 @@ var InfiniteTableComponent = memo13(function InfiniteTableComponent2() {
     scrollbars,
     applyScrollVertical,
     horizontalVirtualBrain,
+    verticalVirtualBrain,
     reservedContentHeight
   } = useListRendering({
     getComputed,
@@ -7854,6 +7978,13 @@ var InfiniteTableComponent = memo13(function InfiniteTableComponent2() {
     bodySize,
     computed
   });
+  useEffect24(() => {
+    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;
@@ -7866,31 +7997,34 @@ var InfiniteTableComponent = memo13(function InfiniteTableComponent2() {
     }
     notifyScrollbarsChange(scrollbars);
   }, [scrollbars]);
-  return /* @__PURE__ */ createElement33("div", __spreadValues({
+  useEffect24(() => {
+    dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
+  }, [scrollStopDelay]);
+  return /* @__PURE__ */ createElement32("div", __spreadValues({
     ref: domRef
-  }, domProps), header ? /* @__PURE__ */ createElement33(TableHeaderWrapper, {
+  }, domProps), header ? /* @__PURE__ */ createElement32(TableHeaderWrapper, {
     brain: horizontalVirtualBrain,
     repaintId,
     scrollbars
-  }) : null, /* @__PURE__ */ createElement33(InfiniteTableBody, null, /* @__PURE__ */ createElement33(VirtualScrollContainer, {
+  }) : null, /* @__PURE__ */ createElement32(InfiniteTableBody, null, /* @__PURE__ */ createElement32(VirtualScrollContainer, {
     ref: scrollerDOMRef,
     onContainerScroll: applyScrollVertical,
     scrollable: ONLY_VERTICAL_SCROLLBAR
-  }, /* @__PURE__ */ createElement33("div", {
+  }, /* @__PURE__ */ createElement32("div", {
     className: display.flex
-  }, pinnedStartList, centerList, pinnedEndList), /* @__PURE__ */ createElement33(SpacePlaceholder, {
+  }, pinnedStartList, centerList, pinnedEndList), /* @__PURE__ */ createElement32(SpacePlaceholder, {
     count: dataArray.length,
     width: 0,
     height: reservedContentHeight
-  })), pinnedStartScrollbarPlaceholder, pinnedEndScrollbarPlaceholder, /* @__PURE__ */ createElement33(LoadMaskCmp, {
+  })), pinnedStartScrollbarPlaceholder, pinnedEndScrollbarPlaceholder, /* @__PURE__ */ createElement32(LoadMaskCmp, {
     visible: loading
-  }, loadingText)), licenseValid ? null : /* @__PURE__ */ createElement33(InfiniteTableLicenseFooter, null), /* @__PURE__ */ createElement33("div", {
+  }, loadingText)), licenseValid ? null : /* @__PURE__ */ createElement32(InfiniteTableLicenseFooter, null), /* @__PURE__ */ createElement32("div", {
     ref: portalDOMRef,
     className: join(`${rootClassName}Portal`, zIndex[1e3], position.absolute, top[0], left[0])
-  }), rowHeightCSSVar ? /* @__PURE__ */ createElement33(CSSVariableWatch, {
+  }), rowHeightCSSVar ? /* @__PURE__ */ createElement32(CSSVariableWatch, {
     varName: rowHeightCSSVar,
     onChange: onRowHeightCSSVarChange
-  }) : null, headerHeightCSSVar ? /* @__PURE__ */ createElement33(CSSVariableWatch, {
+  }) : null, headerHeightCSSVar ? /* @__PURE__ */ createElement32(CSSVariableWatch, {
     varName: headerHeightCSSVar,
     onChange: onHeaderHeightCSSVarChange
   }) : null);
@@ -7938,13 +8072,13 @@ function InfiniteTableContextProvider() {
     }
   }, [scrollTopId, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
-  return /* @__PURE__ */ createElement33(TableContext2.Provider, {
+  return /* @__PURE__ */ createElement32(TableContext2.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ createElement33(InfiniteTableComponent, null));
+  }, /* @__PURE__ */ createElement32(InfiniteTableComponent, null));
 }
 function InfiniteTable(props) {
-  const table = /* @__PURE__ */ createElement33(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ createElement33(InfiniteTableContextProvider, null));
-  return /* @__PURE__ */ createElement33(StrictMode, null, table);
+  const table = /* @__PURE__ */ createElement32(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ createElement32(InfiniteTableContextProvider, null));
+  return /* @__PURE__ */ createElement32(StrictMode, null, table);
 }
 InfiniteTable.defaultProps = {
   rowHeight: 40,