@infinite-table/infinite-react 0.1.1 → 0.2.0

package/index.esm.js

@@ -622,7 +622,7 @@ import {
   createElement as createElement33,
   memo as memo13,
   useEffect as useEffect24,
-  useLayoutEffect as useLayoutEffect6
+  useLayoutEffect as useLayoutEffect5
 } from "react";
 
 // src/components/InfiniteTable/internalProps.ts
@@ -704,14 +704,21 @@ var ScrollListener = class {
 };
 
 // src/components/InfiniteTable/utils/toMap.ts
-function toMap(mapOrObject) {
+function toMap(mapOrObject, weakMapCache) {
   if (!mapOrObject) {
     return new Map();
   }
   if (mapOrObject instanceof Map) {
     return mapOrObject;
   }
-  return new Map(Object.entries(mapOrObject));
+  if (weakMapCache && weakMapCache.has(mapOrObject)) {
+    return weakMapCache.get(mapOrObject);
+  }
+  const result = new Map(Object.entries(mapOrObject));
+  if (weakMapCache) {
+    weakMapCache.set(mapOrObject, result);
+  }
+  return result;
 }
 
 // src/components/InfiniteTable/state/computeColumnGroupsDepths.ts
@@ -737,12 +744,10 @@ function computeColumnGroupsDepths(columnGroups) {
 }
 
 // src/components/InfiniteTable/state/getInitialState.ts
-function toColumnTypesMap(mapOrObject) {
-  return toMap(mapOrObject);
-}
 function initSetupState() {
   const columnsGeneratedForGrouping = new Map();
   return {
+    propsCache: new Map([]),
     columnShifts: null,
     domRef: createRef(),
     scrollerDOMRef: createRef(),
@@ -767,12 +772,8 @@ function initSetupState() {
     columnsWhenInlineGroupRenderStrategy: void 0
   };
 }
-var forwardProps = () => {
+var forwardProps = (setupState) => {
   return {
-    columns: (columns) => {
-      var _a;
-      return (_a = toMap(columns)) != null ? _a : new Map();
-    },
     scrollTopId: 1,
     components: 1,
     loadingText: 1,
@@ -790,6 +791,7 @@ var forwardProps = () => {
     onBlurWithin: 1,
     onScrollToTop: 1,
     onScrollToBottom: 1,
+    onScrollStop: 1,
     scrollToBottomOffset: 1,
     rowStyle: 1,
     rowProps: 1,
@@ -800,6 +802,7 @@ var forwardProps = () => {
     pivotRowLabelsColumn: 1,
     pivotColumnGroups: 1,
     onScrollbarsChange: 1,
+    scrollStopDelay: (scrollStopDelay) => scrollStopDelay != null ? scrollStopDelay : 100,
     viewportReservedWidth: (viewportReservedWidth) => viewportReservedWidth != null ? viewportReservedWidth : 0,
     activeIndex: (activeIndex) => activeIndex != null ? activeIndex : 0,
     columnMinWidth: (columnMinWidth) => columnMinWidth != null ? columnMinWidth : 30,
@@ -818,21 +821,13 @@ var forwardProps = () => {
     virtualizeColumns: (virtualizeColumns) => virtualizeColumns != null ? virtualizeColumns : true,
     rowHeight: (rowHeight) => typeof rowHeight === "number" ? rowHeight : 0,
     headerHeight: (headerHeight) => typeof headerHeight === "number" ? headerHeight : 0,
-    columnVisibility: (columnVisibility) => {
-      var _a;
-      return (_a = toMap(columnVisibility)) != null ? _a : new Map();
-    },
-    columnPinning: (columnPinning) => columnPinning != null ? columnPinning : new Map(),
-    columnSizing: (columnSizing) => {
-      var _a;
-      return (_a = toMap(columnSizing)) != null ? _a : new Map();
-    },
-    columnTypes: (columnTypes) => {
-      var _a;
-      return (_a = toColumnTypesMap(columnTypes)) != null ? _a : new Map();
-    },
+    columns: (columns) => toMap(columns, setupState.propsCache.get("columns")),
+    columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : {},
+    columnPinning: (columnPinning) => toMap(columnPinning, setupState.propsCache.get("columnPinning")),
+    columnSizing: (columnSizing) => toMap(columnSizing, setupState.propsCache.get("columnSizing")),
+    columnTypes: (columnTypes) => toMap(columnTypes, setupState.propsCache.get("columnTypes")),
     collapsedColumnGroups: (collapsedColumnGroups) => collapsedColumnGroups != null ? collapsedColumnGroups : new Map(),
-    columnGroups: (columnGroups) => columnGroups != null ? columnGroups : new Map()
+    columnGroups: (columnGroups) => toMap(columnGroups, setupState.propsCache.get("columnGroups"))
   };
 };
 function getGroupRenderStrategy(options) {
@@ -1215,11 +1210,11 @@ function getColumnComputedType(column, columnTypes) {
 // src/components/InfiniteTable/utils/getComputedVisibleColumns.ts
 var logError = err("getComputedVisibleColumns");
 var isColumnVisible = (columnVisibility, _columnVisibilityAssumeVisible, colId) => {
-  return !columnVisibility.has(colId) || columnVisibility.get(colId) !== false;
+  return columnVisibility[colId] !== false;
 };
 var getComputedPinned = (colId, columnPinning) => {
   const pinned = columnPinning.get(colId);
-  const computedPinned = pinned === "start" || pinned === true ? "start" : pinned === "end" ? "end" : false;
+  const computedPinned = pinned === "start" ? "start" : pinned === "end" ? "end" : false;
   return computedPinned;
 };
 var getComputedVisibleColumns = ({
@@ -1251,7 +1246,8 @@ var getComputedVisibleColumns = ({
       logError(`Column with id "${colId}" specified in columnOrder array cannot be found in the columns map.`);
       return false;
     }
-    return isColumnVisible(columnVisibility, columnVisibilityAssumeVisible, colId);
+    const result2 = isColumnVisible(columnVisibility, columnVisibilityAssumeVisible, colId);
+    return result2;
   });
   const columnsArray = visibleColumnOrder.map((columnId) => columns.get(columnId)).filter(Boolean);
   const sortedMap = (sortInfo != null ? sortInfo : []).reduce((acc, info, index) => {
@@ -1280,7 +1276,10 @@ var getComputedVisibleColumns = ({
         width: colType == null ? void 0 : colType.defaultWidth,
         flex: colType == null ? void 0 : colType.defaultFlex
       };
-      let colSizing = columnSizing.get(colId) || {};
+      let colSizing = columnSizing.get(colId) || {
+        width: column == null ? void 0 : column.defaultWidth,
+        flex: column == null ? void 0 : column.defaultFlex
+      };
       if (colSizing.width != null) {
         delete colTypeSizing.flex;
       }
@@ -1567,7 +1566,6 @@ var useComputedVisibleColumns = ({
   const columnsSizingRenderId = useRerenderOnKeyChange(columnSizing);
   const columnTypesRenderId = useRerenderOnKeyChange(columnTypes);
   const columnsRenderId = useRerenderOnKeyChange(columns);
-  const visibilityRenderId = useRerenderOnKeyChange(columnVisibility);
   const pinningRenderId = useRerenderOnKeyChange(columnPinning);
   const {
     computedRemainingSpace,
@@ -1623,7 +1621,6 @@ var useComputedVisibleColumns = ({
     pinnedStartMaxWidth,
     columnPinning,
     columnsRenderId,
-    visibilityRenderId,
     columnsSizingRenderId,
     pinningRenderId,
     columnTypesRenderId
@@ -1648,7 +1645,7 @@ var useComputedVisibleColumns = ({
   return result;
 };
 
-// src/utils/sortAscending.ts
+// src/utils/DeepMap/sortAscending.ts
 var sortAscending = (a, b) => a - b;
 
 // src/components/InfiniteTable/hooks/useComputed.ts
@@ -1755,9 +1752,14 @@ function getReducerGeneratedActions(dispatch, getState, getProps, propsToForward
       if (currentValue === value) {
         return;
       }
-      notifyChange(props, stateKey, value);
+      let notifyTheChange = true;
       if (interceptedActions && typeof interceptedActions[key] === "function") {
-        interceptedActions[key](value, { actions, state: state2 });
+        if (interceptedActions[key](value, { actions, state: state2 }) === false) {
+          notifyTheChange = false;
+        }
+      }
+      if (notifyTheChange) {
+        notifyChange(props, stateKey, value);
       }
       const forwardFn = propsToForward[key];
       if (typeof forwardFn === "function") {
@@ -1798,12 +1800,14 @@ function forwardProps2(propsToForward, props) {
 function getComponentStateRoot(config) {
   return memo(function ComponentStateRoot(props) {
     var _a, _b;
+    const [initialSetupState] = useState2(() => {
+      return config.initSetupState ? config.initSetupState() : {};
+    });
     const propsToStateSetRef = useRef4(new Set());
-    const propsToForward = useMemo3(() => config.forwardProps ? config.forwardProps() : {}, []);
+    const propsToForward = useMemo3(() => config.forwardProps ? config.forwardProps(initialSetupState) : {}, [initialSetupState]);
     const parentState = (_b = (_a = config.getParentState) == null ? void 0 : _a.call(config)) != null ? _b : null;
     const getParentState = useLatest(parentState);
     const [wholeState] = useState2(() => {
-      const initialSetupState = config.initSetupState ? config.initSetupState() : {};
       let mappedState = {};
       if (propsToForward) {
         mappedState = forwardProps2(propsToForward, props);
@@ -1833,9 +1837,12 @@ function getComponentStateRoot(config) {
     const getProps = useLatest(props);
     const theReducer = (previousState, action) => {
       var _a2;
+      if (action.type === "REPLACE_STATE") {
+        return action.payload;
+      }
       const parentState2 = (_a2 = getParentState == null ? void 0 : getParentState()) != null ? _a2 : null;
       const mappedState = action.payload.mappedState;
-      const updatedProps = action.payload.updatedProps;
+      const updatedProps = action.payload.updatedPropsToState;
       const newState = Object.assign({}, previousState);
       if (mappedState) {
         Object.assign(newState, mappedState);
@@ -1889,8 +1896,9 @@ function getComponentStateRoot(config) {
       const currentProps = props;
       const newMappedState = {};
       let newMappedStateCount = 0;
-      const updatedProps = {};
-      let updatedPropsCount = 0;
+      const updatedPropsToState = {};
+      let updatedPropsToStateCount = 0;
+      const rawUpdatedProps = {};
       for (var k in props) {
         const key = k;
         const oldValue = prevProps[key];
@@ -1901,6 +1909,7 @@ function getComponentStateRoot(config) {
         if (oldValue === newValue) {
           continue;
         }
+        rawUpdatedProps[key] = { newValue, oldValue };
         if (isControlled(key, props) || isControlled(key, prevProps)) {
           if (propsToForward.hasOwnProperty(k)) {
             let valueToSet = newValue;
@@ -1913,22 +1922,30 @@ function getComponentStateRoot(config) {
               newMappedStateCount++;
             }
           } else if (propsToStateSetRef.current.has(k)) {
-            updatedProps[key] = currentProps[key];
-            updatedPropsCount++;
+            updatedPropsToState[key] = currentProps[key];
+            updatedPropsToStateCount++;
           }
         }
       }
-      if (updatedPropsCount > 0 || newMappedStateCount > 0) {
+      if (updatedPropsToStateCount > 0 || newMappedStateCount > 0) {
         debug2("Triggered by new values for the following props", ...[
           ...Object.keys(newMappedState != null ? newMappedState : {}),
-          ...Object.keys(updatedProps != null ? updatedProps : {})
+          ...Object.keys(updatedPropsToState != null ? updatedPropsToState : {})
         ]);
-        dispatch({
+        const action = {
           payload: {
             mappedState: newMappedStateCount ? newMappedState : null,
-            updatedProps: updatedPropsCount ? updatedProps : null
+            updatedPropsToState: updatedPropsToStateCount ? updatedPropsToState : null
           }
-        });
+        };
+        dispatch(action);
+        if (config.onPropChange) {
+          for (var prop in rawUpdatedProps)
+            if (rawUpdatedProps.hasOwnProperty(prop)) {
+              const { newValue, oldValue } = rawUpdatedProps[prop];
+              config.onPropChange({ name: prop, newValue, oldValue }, props, actions);
+            }
+        }
       }
     });
     return /* @__PURE__ */ createElement2(Context.Provider, {
@@ -2000,35 +2017,38 @@ function useColumnGroups() {
     return interceptMap(collapsedColumnGroups, {
       set: (key, visibleCol) => {
         const colIds = key.slice(1);
-        const { columnVisibility } = getComponentState();
+        const columnVisibility = __spreadValues({}, getComponentState().columnVisibility);
         colIds.forEach((colId) => {
-          columnVisibility.set(colId, false);
+          columnVisibility[colId] = false;
         });
-        columnVisibility.delete(visibleCol);
+        delete columnVisibility[visibleCol];
+        componentActions.columnVisibility = columnVisibility;
       },
       beforeClear: (currentCollapsedGroups) => {
-        const { columnVisibility } = getComponentState();
+        const columnVisibility = __spreadValues({}, getComponentState().columnVisibility);
         const keys = [...currentCollapsedGroups.keys()];
         keys.forEach((key) => {
           const colIds = key.slice(1);
           colIds.forEach((colId) => {
-            columnVisibility.delete(colId);
+            delete columnVisibility[colId];
           });
         });
+        componentActions.columnVisibility = columnVisibility;
       },
       delete: (key) => {
-        const { columnVisibility } = getComponentState();
+        const columnVisibility = __spreadValues({}, getComponentState().columnVisibility);
         const colIds = key.slice(1);
         colIds.forEach((colId) => {
-          columnVisibility.delete(colId);
+          delete columnVisibility[colId];
         });
+        componentActions.columnVisibility = columnVisibility;
       }
     });
   }, [collapsedColumnGroups]);
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-import { useEffect as useEffect9, useMemo as useMemo5 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo4 } from "react";
 
 // src/components/InfiniteTable/state/getComputedPivotColumnsFromDataSourcePivotColumns.tsx
 import {
@@ -2373,166 +2393,9 @@ var getMultisortFunction = (sortInfo, get) => {
 };
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-import { useEffect as useEffect8, useLayoutEffect as useLayoutEffect3, useRef as useRef6, useState as useState4 } from "react";
-
-// src/components/hooks/useEffectWithChanges.ts
-import { useEffect as useEffect7, useRef as useRef5 } from "react";
-function useEffectWithChanges(fn, deps) {
-  const prevRef = useRef5({});
-  const oldValuesRef = useRef5({});
-  const oldValues = oldValuesRef.current;
-  const changesRef = useRef5({});
-  const changes = changesRef.current;
-  const useEffectDeps = [];
-  for (let k in deps) {
-    if (deps.hasOwnProperty(k)) {
-      if (deps[k] !== prevRef.current[k]) {
-        changes[k] = deps[k];
-        oldValues[k] = prevRef.current[k];
-      }
-      useEffectDeps.push(deps[k]);
-    }
-  }
-  prevRef.current = deps;
-  useEffect7(() => {
-    const changes2 = changesRef.current;
-    const result = fn(changes2, oldValues);
-    changesRef.current = {};
-    oldValuesRef.current = {};
-    return result;
-  }, useEffectDeps);
-}
-
-// src/components/DataSource/privateHooks/useLoadData.ts
-function buildDataSourceDataParams(componentState) {
-  var _a, _b;
-  const sortInfo = componentState.multiSort ? componentState.sortInfo : (_b = (_a = componentState.sortInfo) == null ? void 0 : _a[0]) != null ? _b : null;
-  const dataSourceParams = {
-    originalDataArray: componentState.originalDataArray,
-    sortInfo,
-    groupBy: componentState.groupBy,
-    pivotBy: componentState.pivotBy
-  };
-  if (componentState.livePagination !== void 0) {
-    dataSourceParams.livePaginationCursor = componentState.livePaginationCursor;
-  }
-  return dataSourceParams;
-}
-function notifyDataParamsChanged(componentState, actions) {
-  var _a;
-  if (typeof componentState.data === "function") {
-    loadData(componentState.data, componentState, actions);
-  }
-  const dataParams = buildDataSourceDataParams(componentState);
-  (_a = componentState.onDataParamsChange) == null ? void 0 : _a.call(componentState, dataParams);
-}
-function loadData(data, componentState, actions) {
-  const dataParams = buildDataSourceDataParams(componentState);
-  if (typeof data === "function") {
-    data = data(dataParams);
-  }
-  const dataIsPromise = typeof data === "object" && typeof data.then === "function";
-  if (dataIsPromise) {
-    actions.loading = true;
-  }
-  Promise.resolve(data).then((dataParam) => {
-    let dataArray = [];
-    if (Array.isArray(dataParam.data)) {
-      const remoteData = dataParam;
-      dataArray = remoteData.data;
-      if (remoteData.livePaginationCursor !== void 0) {
-        actions.livePaginationCursor = remoteData.livePaginationCursor;
-      }
-    } else {
-      dataArray = dataParam;
-    }
-    actions.originalDataArray = dataArray;
-    if (dataIsPromise) {
-      actions.loading = false;
-    }
-  });
-}
-function useLoadData() {
-  const {
-    getComponentState,
-    componentActions: actions,
-    componentState: { data }
-  } = useComponentState();
-  useLayoutEffect3(() => {
-    loadData(data, getComponentState(), actions);
-  }, [data]);
-  useLivePagination();
-}
-function useLivePagination() {
-  const {
-    getComponentState,
-    componentActions: actions,
-    componentState
-  } = useComponentState();
-  const {
-    notifyScrollbarsChange,
-    sortInfo,
-    groupBy,
-    pivotBy,
-    livePaginationCursor,
-    scrollBottomId
-  } = componentState;
-  const [scrollbars, setScrollbars] = useState4({
-    vertical: false,
-    horizontal: false
-  });
-  const scrollbarsRef = useRef6(scrollbars);
-  useEffect8(() => {
-    notifyScrollbarsChange.onChange((scrollbars2) => {
-      if (!scrollbars2) {
-        return;
-      }
-      scrollbarsRef.current = scrollbars2;
-      setScrollbars(scrollbars2);
-    });
-    return () => notifyScrollbarsChange.destroy();
-  }, [notifyScrollbarsChange]);
-  const [cursorId, updateCursorId] = useState4(void 0);
-  useEffect8(() => {
-    const frameId = requestAnimationFrame(() => {
-      var _a;
-      if (!((_a = scrollbarsRef.current) == null ? void 0 : _a.vertical)) {
-        updateCursorId(livePaginationCursor);
-      }
-    });
-    return () => cancelAnimationFrame(frameId);
-  }, [livePaginationCursor]);
-  useEffect8(() => {
-    const { livePaginationCursor: livePaginationCursor2, livePagination } = getComponentState();
-    if (!scrollbars.vertical && livePagination) {
-      updateCursorId(livePaginationCursor2);
-    }
-  }, [scrollbars.vertical]);
-  useEffect8(() => {
-    updateCursorId(scrollBottomId);
-  }, [scrollBottomId]);
-  const depsObject = {
-    sortInfo,
-    groupBy,
-    pivotBy,
-    cursorId
-  };
-  useEffectWithChanges(() => {
-    if (cursorId === void 0) {
-      return;
-    }
-    notifyDataParamsChanged(getComponentState(), actions);
-  }, depsObject);
-}
-
-// src/components/DataSource/state/normalizeSortInfo.ts
-var normalizeSortInfo = (sortInfo) => {
-  sortInfo = sortInfo != null ? sortInfo : [];
-  return Array.isArray(sortInfo) ? sortInfo : [sortInfo];
-};
+import { useEffect as useEffect8, useRef as useRef6, useState as useState4 } from "react";
 
-// src/components/hooks/useOnce.ts
-import { useMemo as useMemo4 } from "react";
+// src/utils/DeepMap/once.ts
 function once(fn) {
   let called = false;
   let result = null;
@@ -2546,14 +2409,8 @@ function once(fn) {
   };
   return onceFn;
 }
-function useOnce(fn) {
-  const onceFn = useMemo4(() => {
-    return once(fn);
-  }, []);
-  return onceFn();
-}
 
-// src/utils/DeepMap.ts
+// src/utils/DeepMap/index.ts
 var SORT_ASC_REVISION = (p1, p2) => sortAscending(p1.revision, p2.revision);
 var DeepMap = class {
   constructor(initial) {
@@ -2805,81 +2662,673 @@ var DeepMap = class {
   }
 };
 
-// src/components/DataSource/GroupRowsState.ts
-var GroupRowsState = class {
-  constructor(state) {
-    this.update(state instanceof GroupRowsState ? state.getState() : state);
-  }
-  getState() {
-    var _a, _b, _c, _d;
-    return {
-      expandedRows: this.expandedAll ? true : (_b = (_a = this.expandedMap) == null ? void 0 : _a.topDownKeys()) != null ? _b : [],
-      collapsedRows: this.collapsedAll ? true : (_d = (_c = this.collapsedMap) == null ? void 0 : _c.topDownKeys()) != null ? _d : []
-    };
-  }
-  destroy() {
-    var _a, _b;
-    (_a = this.expandedMap) == null ? void 0 : _a.clear();
-    (_b = this.collapsedMap) == null ? void 0 : _b.clear();
-    delete this.expandedMap;
-    delete this.collapsedMap;
+// src/utils/groupAndPivot/index.ts
+var LAZY_ROOT_KEY_FOR_GROUPS = "____root____";
+function DEFAULT_TO_KEY(value) {
+  return value;
+}
+function initReducers(reducers) {
+  if (!reducers || !Object.keys(reducers).length) {
+    return {};
   }
-  update(state) {
-    var _a, _b, _c, _d;
-    this.initialState = state;
-    const { collapsedRows, expandedRows } = this.initialState;
-    this.collapsedAll = collapsedRows === true;
-    this.expandedAll = expandedRows === true;
-    if (this.collapsedAll && this.expandedAll) {
-      throw `Cannot have both collapsedRows and expandedRows be true!`;
-    }
-    if (collapsedRows !== true) {
-      (_a = this.collapsedMap) == null ? void 0 : _a.clear();
-      this.collapsedMap = (_b = this.collapsedMap) != null ? _b : new DeepMap(collapsedRows.map((keys) => [keys, true]));
-    }
-    if (expandedRows !== true) {
-      (_c = this.expandedMap) == null ? void 0 : _c.clear();
-      this.expandedMap = (_d = this.expandedMap) != null ? _d : new DeepMap(expandedRows.map((keys) => [keys, true]));
+  const result = {};
+  for (let key in reducers)
+    if (reducers.hasOwnProperty(key)) {
+      result[key] = reducers[key].initialValue;
     }
+  return result;
+}
+function computeReducersFor(data, reducers, reducerResults) {
+  var _a, _b;
+  if (!reducers || !Object.keys(reducers).length) {
+    return;
   }
-  areAllCollapsed() {
-    return this.collapsedAll && (this.expandedMap ? this.expandedMap.size === 0 : true);
-  }
-  areAllExpanded() {
-    return this.expandedAll && (this.collapsedMap ? this.collapsedMap.size === 0 : true);
-  }
-  collapseAll() {
-    this.update({
-      collapsedRows: true,
-      expandedRows: []
-    });
-  }
-  expandAll() {
-    this.update({
-      expandedRows: true,
-      collapsedRows: []
-    });
-  }
-  isGroupRowExpanded(keys) {
-    var _a, _b;
-    if (this.expandedAll === true) {
-      if (this.collapsedAll === true) {
-        throw 'Cannot have both expandedRows and collapsedRows be "true"';
+  for (let key in reducers)
+    if (reducers.hasOwnProperty(key)) {
+      const reducer = reducers[key];
+      if (typeof reducer.reducer !== "function") {
+        continue;
       }
-      return !((_a = this.collapsedMap) == null ? void 0 : _a.has(keys));
+      const currentValue = reducerResults[key];
+      const value = reducer.field ? data[reducer.field] : (_b = (_a = reducer.getter) == null ? void 0 : _a.call(reducer, data)) != null ? _b : null;
+      reducerResults[key] = reducer.reducer(currentValue, value, data);
     }
-    return (_b = this.expandedMap) == null ? void 0 : _b.has(keys);
-  }
-  isGroupRowCollapsed(keys) {
-    return !this.isGroupRowExpanded(keys);
+}
+function lazyGroup(groupParams, rootData) {
+  const {
+    reducers = {},
+    pivot,
+    groupBy,
+    mappings
+  } = groupParams;
+  const deepMap = new DeepMap();
+  function traverseValues(pivotDeepMap, container, pivot2, pivotIndex = 0, currentPivotKeys2 = []) {
+    const last = pivotIndex === pivot2.length - 1;
+    const values = container[(mappings == null ? void 0 : mappings.values) || "values"] || {};
+    for (var k in values)
+      if (values.hasOwnProperty(k)) {
+        const pivotKey = k;
+        currentPivotKeys2.push(pivotKey);
+        topLevelPivotColumns.set(currentPivotKeys2, true);
+        pivotDeepMap.set(currentPivotKeys2, {
+          reducerResults: values[k][(mappings == null ? void 0 : mappings.totals) || "totals"] || {},
+          items: []
+        });
+        if (!last) {
+          traverseValues(pivotDeepMap, values[k], pivot2, pivotIndex + 1, currentPivotKeys2);
+        }
+        currentPivotKeys2.pop();
+      }
   }
-  setGroupRowExpanded(keys, shouldExpand) {
-    var _a;
-    if (shouldExpand === this.isGroupRowExpanded(keys)) {
-      return;
-    }
-    if (shouldExpand) {
-      if (this.collapsedAll === true) {
+  const topLevelPivotColumns = pivot ? new DeepMap() : void 0;
+  let currentPivotKeys = [];
+  const initialReducerValue = initReducers(reducers);
+  const globalReducerResults = __spreadValues({}, initialReducerValue);
+  rootData.visitDepthFirst((lazyGroupRowInfo, keys, _index, next) => {
+    const [_rootKey, ...currentGroupKeys] = keys;
+    const dataArray = lazyGroupRowInfo.items;
+    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);
+        continue;
+      }
+      const dataObject = dataArray[i].data;
+      const dataKeys = dataArray[i].keys;
+      let item = dataObject;
+      const { field: groupByProperty } = groupBy[dataKeys.length - 1];
+      const key = item[groupByProperty];
+      currentGroupKeys.push(key);
+      const deepMapGroupValue = {
+        items: [],
+        reducerResults: dataArray[i].aggregations || {}
+      };
+      deepMap.set(currentGroupKeys, deepMapGroupValue);
+      if (pivot) {
+        const pivotDeepMap = deepMapGroupValue.pivotDeepMap = new DeepMap();
+        const pivotContainer = dataArray[i].pivot;
+        traverseValues(pivotDeepMap, pivotContainer, pivot, 0, currentPivotKeys);
+      }
+      currentGroupKeys.pop();
+    }
+    next == null ? void 0 : next();
+  });
+  const result = {
+    deepMap,
+    groupParams,
+    initialData: rootData,
+    reducerResults: globalReducerResults
+  };
+  if (pivot) {
+    result.topLevelPivotColumns = topLevelPivotColumns;
+    result.pivot = pivot;
+  }
+  return result;
+}
+function group(groupParams, data) {
+  const {
+    groupBy,
+    defaultToKey = DEFAULT_TO_KEY,
+    pivot,
+    reducers
+  } = groupParams;
+  const groupByLength = groupBy.length;
+  const topLevelPivotColumns = pivot ? new DeepMap() : void 0;
+  const deepMap = new DeepMap();
+  let currentGroupKeys = [];
+  let currentPivotKeys = [];
+  const initialReducerValue = initReducers(reducers);
+  const globalReducerResults = __spreadValues({}, initialReducerValue);
+  for (let i = 0, len = data.length; i < len; i++) {
+    let item = data[i];
+    for (let groupByIndex = 0; groupByIndex < groupByLength; groupByIndex++) {
+      const { field: groupByProperty, toKey: groupToKey } = groupBy[groupByIndex];
+      const key = (groupToKey || defaultToKey)(item[groupByProperty], item);
+      currentGroupKeys.push(key);
+      if (!deepMap.has(currentGroupKeys)) {
+        const deepMapGroupValue = {
+          items: [],
+          reducerResults: __spreadValues({}, initialReducerValue)
+        };
+        if (pivot) {
+          deepMapGroupValue.pivotDeepMap = new DeepMap();
+        }
+        deepMap.set(currentGroupKeys, deepMapGroupValue);
+      }
+      const {
+        items: currentGroupItems,
+        reducerResults,
+        pivotDeepMap
+      } = deepMap.get(currentGroupKeys);
+      currentGroupItems.push(item);
+      if (reducers) {
+        computeReducersFor(item, reducers, reducerResults);
+      }
+      if (pivot) {
+        for (let pivotIndex = 0, pivotLength = pivot.length; pivotIndex < pivotLength; pivotIndex++) {
+          const { field: pivotField, toKey: pivotToKey } = pivot[pivotIndex];
+          const pivotKey = (pivotToKey || defaultToKey)(item[pivotField], item);
+          currentPivotKeys.push(pivotKey);
+          if (!pivotDeepMap.has(currentPivotKeys)) {
+            topLevelPivotColumns.set(currentPivotKeys, true);
+            pivotDeepMap == null ? void 0 : pivotDeepMap.set(currentPivotKeys, {
+              reducerResults: __spreadValues({}, initialReducerValue),
+              items: []
+            });
+          }
+          const {
+            reducerResults: pivotReducerResults,
+            items: pivotGroupItems
+          } = pivotDeepMap.get(currentPivotKeys);
+          pivotGroupItems.push(item);
+          if (reducers) {
+            computeReducersFor(item, reducers, pivotReducerResults);
+          }
+        }
+        currentPivotKeys.length = 0;
+      }
+    }
+    if (reducers) {
+      computeReducersFor(item, reducers, globalReducerResults);
+    }
+    currentGroupKeys.length = 0;
+  }
+  if (reducers) {
+    deepMap.visitDepthFirst((deepMapValue, _keys, _indexInGroup, next) => {
+      completeReducers(reducers, deepMapValue.reducerResults, deepMapValue.items);
+      if (pivot) {
+        deepMapValue.pivotDeepMap.visitDepthFirst(({ items, reducerResults: pivotReducerResults }, _keys2, _indexInGroup2, next2) => {
+          completeReducers(reducers, pivotReducerResults, items);
+          next2 == null ? void 0 : next2();
+        });
+      }
+      next == null ? void 0 : next();
+    });
+  }
+  if (reducers) {
+    completeReducers(reducers, globalReducerResults, data);
+  }
+  const result = {
+    deepMap,
+    groupParams,
+    initialData: data,
+    reducerResults: globalReducerResults
+  };
+  if (pivot) {
+    result.topLevelPivotColumns = topLevelPivotColumns;
+    result.pivot = pivot;
+  }
+  return result;
+}
+function flatten(groupResult) {
+  const { groupParams, deepMap } = groupResult;
+  const groupByLength = groupParams.groupBy.length;
+  const result = [];
+  deepMap.topDownKeys().reduce((acc, key) => {
+    if (key.length === groupByLength) {
+      const items = deepMap.get(key).items;
+      acc.push(...items);
+    }
+    return acc;
+  }, result);
+  return result;
+}
+function getEnhancedGroupData(options, deepMapValue) {
+  const { groupBy, groupKeys, collapsed, parents, reducers } = options;
+  const groupNesting = groupKeys.length;
+  const { items: groupItems, reducerResults, pivotDeepMap } = deepMapValue;
+  let data = null;
+  if (Object.keys(reducerResults).length > 0) {
+    data = {};
+    for (let key in reducers)
+      if (reducers.hasOwnProperty(key)) {
+        const reducer = reducers[key];
+        const field = reducer.field;
+        if (field) {
+          data[field] = reducerResults[key];
+        }
+      }
+  }
+  const enhancedGroupData = {
+    data,
+    groupCount: groupItems.length,
+    groupData: groupItems,
+    groupKeys,
+    id: groupKeys,
+    collapsed,
+    parents,
+    collapsedChildrenCount: 0,
+    collapsedGroupsCount: 0,
+    indexInParentGroups: options.indexInParentGroups,
+    indexInGroup: options.indexInGroup,
+    indexInAll: options.indexInAll,
+    value: groupKeys[groupKeys.length - 1],
+    rootGroupBy: groupBy,
+    groupBy: groupNesting === groupBy.length ? groupBy : groupBy.slice(0, groupNesting),
+    isGroupRow: true,
+    pivotValuesMap: pivotDeepMap,
+    groupNesting,
+    reducerResults
+  };
+  return enhancedGroupData;
+}
+function completeReducers(reducers, reducerResults, items) {
+  if (reducers) {
+    for (let key in reducers)
+      if (reducers.hasOwnProperty(key)) {
+        const reducer = reducers[key];
+        if (reducer.done) {
+          reducerResults[key] = reducer.done(reducerResults[key], items);
+        }
+      }
+  }
+  return reducerResults;
+}
+function enhancedFlatten(param) {
+  const {
+    groupResult,
+    toPrimaryKey,
+    groupRowsState,
+    generateGroupRows,
+    reducers = {}
+  } = param;
+  const { groupParams, deepMap, pivot } = groupResult;
+  const { groupBy } = groupParams;
+  const groupByStrings = groupBy.map((g) => g.field);
+  const result = [];
+  const parents = [];
+  const indexInParentGroups = [];
+  deepMap.visitDepthFirst((deepMapValue, groupKeys, indexInGroup, next) => {
+    var _a;
+    const items = deepMapValue.items;
+    const groupNesting = groupKeys.length;
+    const collapsed = (_a = groupRowsState == null ? void 0 : groupRowsState.isGroupRowCollapsed(groupKeys)) != null ? _a : false;
+    const enhancedGroupData = getEnhancedGroupData({
+      groupBy: groupByStrings,
+      parents: Array.from(parents),
+      reducers,
+      indexInGroup,
+      indexInParentGroups: Array.from(indexInParentGroups),
+      indexInAll: result.length,
+      groupKeys,
+      collapsed
+    }, deepMapValue);
+    const include = generateGroupRows || collapsed;
+    if (include) {
+      result.push(enhancedGroupData);
+    }
+    if (collapsed) {
+      parents.forEach((parent) => {
+        parent.collapsedChildrenCount += enhancedGroupData.groupCount;
+        parent.collapsedGroupsCount += 1;
+      });
+    }
+    indexInParentGroups.push(indexInGroup);
+    parents.push(enhancedGroupData);
+    if (!collapsed) {
+      if (!next) {
+        if (!pivot) {
+          const startIndex = result.length;
+          result.push(...items.map((item, index) => {
+            return {
+              id: toPrimaryKey(item),
+              data: item,
+              isGroupRow: false,
+              collapsed: false,
+              groupKeys,
+              parents: Array.from(parents),
+              indexInParentGroups: [...indexInParentGroups, index],
+              indexInGroup: index,
+              indexInAll: startIndex + index,
+              groupBy: groupByStrings,
+              groupNesting,
+              groupCount: enhancedGroupData.groupCount
+            };
+          }));
+        }
+      } else {
+        next();
+      }
+    }
+    parents.pop();
+    indexInParentGroups.pop();
+  });
+  return {
+    data: result
+  };
+}
+
+// src/components/hooks/useEffectWithChanges.ts
+import { useEffect as useEffect7, useRef as useRef5 } from "react";
+function useEffectWithChanges(fn, deps) {
+  const prevRef = useRef5({});
+  const oldValuesRef = useRef5({});
+  const oldValues = oldValuesRef.current;
+  const changesRef = useRef5({});
+  const changes = changesRef.current;
+  const useEffectDeps = [];
+  for (let k in deps) {
+    if (deps.hasOwnProperty(k)) {
+      if (deps[k] !== prevRef.current[k]) {
+        changes[k] = deps[k];
+        oldValues[k] = prevRef.current[k];
+      }
+      useEffectDeps.push(deps[k]);
+    }
+  }
+  prevRef.current = deps;
+  useEffect7(() => {
+    const changes2 = changesRef.current;
+    const result = fn(changes2, oldValues);
+    changesRef.current = {};
+    oldValuesRef.current = {};
+    return result;
+  }, useEffectDeps);
+}
+
+// src/components/DataSource/privateHooks/useLoadData.ts
+var SKIP_DATA_CHANGES_KEYS = {
+  originalDataArray: true,
+  changes: true
+};
+function buildDataSourceDataParams(componentState, overrides) {
+  var _a, _b;
+  const sortInfo = componentState.multiSort ? componentState.sortInfo : (_b = (_a = componentState.sortInfo) == null ? void 0 : _a[0]) != null ? _b : null;
+  const dataSourceParams = {
+    originalDataArray: componentState.originalDataArray,
+    sortInfo,
+    groupBy: componentState.groupBy,
+    pivotBy: componentState.pivotBy,
+    aggregationReducers: componentState.aggregationReducers
+  };
+  if (componentState.livePagination !== void 0) {
+    dataSourceParams.livePaginationCursor = componentState.livePaginationCursor;
+    dataSourceParams.cursorId = componentState.cursorId;
+  }
+  if (componentState.fullLazyLoad) {
+    if (componentState.lazyLoadBatchSize != null && componentState.lazyLoadBatchSize > 0) {
+      dataSourceParams.lazyLoadBatchSize = componentState.lazyLoadBatchSize;
+      dataSourceParams.lazyLoadStartIndex = 0;
+    }
+    dataSourceParams.groupKeys = [];
+  }
+  if (overrides) {
+    Object.assign(dataSourceParams, overrides);
+  }
+  const changes = {};
+  const oldDataSourceParams = componentState.dataParams || {};
+  for (let k in dataSourceParams) {
+    if (dataSourceParams.hasOwnProperty(k) && !SKIP_DATA_CHANGES_KEYS[k]) {
+      const key = k;
+      if (dataSourceParams[key] !== oldDataSourceParams[key]) {
+        changes[key] = true;
+      }
+    }
+  }
+  dataSourceParams.changes = changes;
+  return dataSourceParams;
+}
+function loadData(data, componentState, actions, overrides) {
+  const dataParams = buildDataSourceDataParams(componentState, overrides);
+  if (typeof data === "function") {
+    data = data(dataParams);
+  }
+  const dataIsPromise = typeof data === "object" && typeof data.then === "function";
+  if (dataIsPromise) {
+    actions.loading = true;
+  }
+  Promise.resolve(data).then((dataParam) => {
+    var _a, _b, _c;
+    let dataArray = [];
+    let skipAssign = false;
+    if (Array.isArray(dataParam.data)) {
+      const remoteData = dataParam;
+      dataArray = remoteData.data;
+      if (remoteData.livePaginationCursor !== void 0) {
+        actions.livePaginationCursor = remoteData.livePaginationCursor;
+      }
+      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];
+        const newGroupRowInfo = {
+          totalCount: (_a = remoteData.totalCount) != null ? _a : dataArray.length,
+          items: dataArray
+        };
+        if (dataParams.lazyLoadBatchSize) {
+          const existingGroupRowInfo = lazyGroupData.get(key);
+          const currentGroupRowInfo = existingGroupRowInfo != null ? existingGroupRowInfo : {
+            items: [],
+            totalCount: newGroupRowInfo.totalCount
+          };
+          currentGroupRowInfo.items.length = currentGroupRowInfo.totalCount;
+          const start = (_b = dataParams.lazyLoadStartIndex) != null ? _b : 0;
+          const end = start + ((_c = dataParams.lazyLoadBatchSize) != null ? _c : dataArray.length);
+          for (let i = start; i < end; i++) {
+            currentGroupRowInfo.items[i] = newGroupRowInfo.items[i - start];
+          }
+          if (!existingGroupRowInfo) {
+            lazyGroupData.set(key, currentGroupRowInfo);
+          }
+        } else {
+          lazyGroupData.set(key, newGroupRowInfo);
+        }
+        skipAssign = true;
+        actions.originalLazyGroupData = lazyGroupData;
+      }
+    } else {
+      dataArray = dataParam;
+    }
+    if (!skipAssign) {
+      actions.originalDataArray = dataArray;
+    }
+    if (dataIsPromise) {
+      actions.loading = false;
+    }
+  });
+}
+function useLoadData() {
+  const {
+    getComponentState,
+    componentActions: actions,
+    componentState
+  } = useComponentState();
+  const {
+    data,
+    notifyScrollbarsChange,
+    sortInfo,
+    groupBy,
+    pivotBy,
+    livePagination,
+    livePaginationCursor,
+    cursorId: stateCursorId,
+    lazyLoadBatchSize,
+    notifyScrollStop
+  } = componentState;
+  const [scrollbars, setScrollbars] = useState4({
+    vertical: false,
+    horizontal: false
+  });
+  const scrollbarsRef = useRef6(scrollbars);
+  useEffect8(() => {
+    notifyScrollbarsChange.onChange((scrollbars2) => {
+      if (!scrollbars2) {
+        return;
+      }
+      scrollbarsRef.current = scrollbars2;
+      setScrollbars(scrollbars2);
+    });
+    return () => notifyScrollbarsChange.destroy();
+  }, [notifyScrollbarsChange]);
+  useEffect8(() => {
+    const frameId = requestAnimationFrame(() => {
+      var _a;
+      if (!((_a = scrollbarsRef.current) == null ? void 0 : _a.vertical) && livePaginationCursor) {
+        actions.cursorId = livePaginationCursor;
+      }
+    });
+    return () => cancelAnimationFrame(frameId);
+  }, [livePaginationCursor]);
+  useEffect8(() => {
+    const { livePaginationCursor: livePaginationCursor2, livePagination: livePagination2 } = getComponentState();
+    if (!scrollbars.vertical && livePagination2) {
+      if (livePaginationCursor2) {
+        actions.cursorId = livePaginationCursor2;
+      }
+    }
+  }, [scrollbars.vertical]);
+  const depsObject = {
+    sortInfo,
+    groupBy,
+    pivotBy,
+    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]);
+  useEffectWithChanges(() => {
+    const componentState2 = getComponentState();
+    if (typeof componentState2.data !== "function") {
+      loadData(componentState2.data, componentState2, actions);
+    }
+  }, { data });
+  useEffectWithChanges(() => {
+    const componentState2 = getComponentState();
+    if (typeof componentState2.data === "function") {
+      loadData(componentState2.data, componentState2, actions);
+    }
+  }, __spreadProps(__spreadValues({}, depsObject), { data }));
+  useEffectWithChanges((_changes, _prevValues) => {
+    const componentState2 = getComponentState();
+    if (initialRef.current) {
+      initialRef.current = false;
+      actions.dataParams = buildDataSourceDataParams(componentState2);
+    }
+  }, depsObject);
+}
+
+// src/components/DataSource/state/normalizeSortInfo.ts
+var EMPTY_ARRAY = Object.freeze([]);
+var normalizeSortInfo = (initialSortInfo, weakMap) => {
+  const sortInfo = initialSortInfo != null ? initialSortInfo : EMPTY_ARRAY;
+  const result = Array.isArray(sortInfo) ? sortInfo : [sortInfo];
+  if (weakMap && weakMap.has(sortInfo)) {
+    const prevResult = weakMap.get(sortInfo);
+    if (prevResult && prevResult.length === result.length) {
+      return prevResult;
+    }
+  }
+  if (weakMap && sortInfo) {
+    weakMap.set(sortInfo, result);
+  }
+  return result;
+};
+
+// src/components/DataSource/GroupRowsState.ts
+var GroupRowsState = class {
+  constructor(state) {
+    this.update(state instanceof GroupRowsState ? state.getState() : state);
+  }
+  getState() {
+    var _a, _b, _c, _d;
+    return {
+      expandedRows: this.expandedAll ? true : (_b = (_a = this.expandedMap) == null ? void 0 : _a.topDownKeys()) != null ? _b : [],
+      collapsedRows: this.collapsedAll ? true : (_d = (_c = this.collapsedMap) == null ? void 0 : _c.topDownKeys()) != null ? _d : []
+    };
+  }
+  destroy() {
+    var _a, _b;
+    (_a = this.expandedMap) == null ? void 0 : _a.clear();
+    (_b = this.collapsedMap) == null ? void 0 : _b.clear();
+    delete this.expandedMap;
+    delete this.collapsedMap;
+  }
+  update(state) {
+    var _a, _b, _c, _d;
+    this.initialState = state;
+    const { collapsedRows, expandedRows } = this.initialState;
+    this.collapsedAll = collapsedRows === true;
+    this.expandedAll = expandedRows === true;
+    if (this.collapsedAll && this.expandedAll) {
+      throw `Cannot have both collapsedRows and expandedRows be true!`;
+    }
+    if (collapsedRows !== true) {
+      (_a = this.collapsedMap) == null ? void 0 : _a.clear();
+      this.collapsedMap = (_b = this.collapsedMap) != null ? _b : new DeepMap(collapsedRows.map((keys) => [keys, true]));
+    }
+    if (expandedRows !== true) {
+      (_c = this.expandedMap) == null ? void 0 : _c.clear();
+      this.expandedMap = (_d = this.expandedMap) != null ? _d : new DeepMap(expandedRows.map((keys) => [keys, true]));
+    }
+  }
+  areAllCollapsed() {
+    return this.collapsedAll && (this.expandedMap ? this.expandedMap.size === 0 : true);
+  }
+  areAllExpanded() {
+    return this.expandedAll && (this.collapsedMap ? this.collapsedMap.size === 0 : true);
+  }
+  collapseAll() {
+    this.update({
+      collapsedRows: true,
+      expandedRows: []
+    });
+  }
+  expandAll() {
+    this.update({
+      expandedRows: true,
+      collapsedRows: []
+    });
+  }
+  isGroupRowExpanded(keys) {
+    var _a, _b;
+    if (this.expandedAll === true) {
+      if (this.collapsedAll === true) {
+        throw 'Cannot have both expandedRows and collapsedRows be "true"';
+      }
+      return !((_a = this.collapsedMap) == null ? void 0 : _a.has(keys));
+    }
+    return (_b = this.expandedMap) == null ? void 0 : _b.has(keys);
+  }
+  isGroupRowCollapsed(keys) {
+    return !this.isGroupRowExpanded(keys);
+  }
+  setGroupRowExpanded(keys, shouldExpand) {
+    var _a;
+    if (shouldExpand === this.isGroupRowExpanded(keys)) {
+      return;
+    }
+    if (shouldExpand) {
+      if (this.collapsedAll === true) {
         if (!this.expandedMap) {
           throw `No expandedMap found when trying to expand group row ${keys.join(",")}`;
         }
@@ -2916,7 +3365,7 @@ var GroupRowsState = class {
 };
 
 // src/utils/shallowEqualObjects.ts
-function shallowEqualObjects(objA, objB) {
+function shallowEqualObjects(objA, objB, ignoreKeys) {
   if (objA === objB) {
     return true;
   }
@@ -2925,12 +3374,21 @@ function shallowEqualObjects(objA, objB) {
   }
   var aKeys = Object.keys(objA);
   var bKeys = Object.keys(objB);
+  if (ignoreKeys) {
+    aKeys = aKeys.filter((key2) => !ignoreKeys.has(key2));
+    bKeys = bKeys.filter((key2) => !ignoreKeys.has(key2));
+  }
   var len = aKeys.length;
   if (bKeys.length !== len) {
     return false;
   }
   for (var i = 0; i < len; i++) {
     var key = aKeys[i];
+    if (ignoreKeys) {
+      if (ignoreKeys.has(key)) {
+        continue;
+      }
+    }
     if (objA[key] !== objB[key] || !Object.prototype.hasOwnProperty.call(objB, key)) {
       return false;
     }
@@ -2941,12 +3399,12 @@ function shallowEqualObjects(objA, objB) {
 // src/components/utils/discardCallsWithEqualArg.ts
 var map = new WeakMap();
 var getCompareDefault = (a) => a;
-function discardCallsWithEqualArg(fn, timeframe = 50, getCompareObject2) {
+function discardCallsWithEqualArg(fn, timeframe = 50, getCompareObject) {
   map.set(fn, {
     lastCallTime: 0,
     lastCallArg: null
   });
-  const getCompare = getCompareObject2 != null ? getCompareObject2 : getCompareDefault;
+  const getCompare = getCompareObject != null ? getCompareObject : getCompareDefault;
   return (arg) => {
     const { lastCallTime, lastCallArg } = map.get(fn) || {
       lastCallTime: 0,
@@ -2967,339 +3425,172 @@ function discardCallsWithEqualArg(fn, timeframe = 50, getCompareObject2) {
 }
 
 // src/components/DataSource/state/getInitialState.ts
+var defaultCursorId = Symbol("cursorId");
 function initSetupState2() {
   const now = Date.now();
   const originalDataArray = [];
   const dataArray = [];
+  const originalLazyGroupData = new DeepMap();
   return {
     dataParams: void 0,
     notifyScrollbarsChange: buildSubscriptionCallback(),
+    notifyScrollStop: buildSubscriptionCallback(),
     pivotTotalColumnPosition: "end",
-    originalDataArray,
-    scrollBottomId: Symbol("scrollBottomId"),
-    showSeparatePivotColumnForSingleAggregation: false,
-    pivotColumns: void 0,
-    pivotColumnGroups: void 0,
-    dataArray,
-    updatedAt: now,
-    groupedAt: 0,
-    sortedAt: 0,
-    reducedAt: now,
-    generateGroupRows: true,
-    groupDeepMap: void 0,
-    postSortDataArray: void 0,
-    postGroupDataArray: void 0,
-    lastSortDataArray: void 0,
-    lastGroupDataArray: void 0
-  };
-}
-function getCompareObject(dataParams) {
-  const obj = __spreadValues({}, dataParams);
-  delete obj.originalDataArray;
-  return obj;
-}
-var forwardProps3 = () => {
-  return {
-    onDataParamsChange: (fn) => fn ? discardCallsWithEqualArg(fn, 100, getCompareObject) : void 0,
-    data: 1,
-    pivotBy: 1,
-    primaryKey: 1,
-    livePagination: 1,
-    livePaginationCursor: 1,
-    aggregationReducers: 1,
-    loading: (loading) => loading != null ? loading : false,
-    sortInfo: (sortInfo) => normalizeSortInfo(sortInfo),
-    groupBy: (groupBy) => groupBy != null ? groupBy : [],
-    groupRowsState: (groupRowsState) => {
-      return groupRowsState || new GroupRowsState({
-        expandedRows: true,
-        collapsedRows: []
-      });
-    }
-  };
-};
-function mapPropsToState2(params) {
-  const { props } = params;
-  const controlledSort = isControlledValue(props.sortInfo);
-  return {
-    controlledSort,
-    multiSort: Array.isArray(controlledSort ? props.sortInfo : props.defaultSortInfo)
-  };
-}
-function getInterceptActions() {
-  return {
-    sortInfo: (sortInfo, { actions, state }) => {
-      const dataParams = buildDataSourceDataParams(state);
-      dataParams.sortInfo = sortInfo;
-      actions.dataParams = dataParams;
-    }
-  };
-}
-
-// src/utils/groupAndPivot/index.ts
-function DEFAULT_TO_KEY(value) {
-  return value;
-}
-function initReducers(reducers) {
-  if (!reducers || !Object.keys(reducers).length) {
-    return {};
-  }
-  const result = {};
-  for (let key in reducers)
-    if (reducers.hasOwnProperty(key)) {
-      result[key] = reducers[key].initialValue;
-    }
-  return result;
-}
-function computeReducersFor(data, reducers, reducerResults) {
-  var _a, _b;
-  if (!reducers || !Object.keys(reducers).length) {
-    return;
-  }
-  for (let key in reducers)
-    if (reducers.hasOwnProperty(key)) {
-      const reducer = reducers[key];
-      const currentValue = reducerResults[key];
-      const value = reducer.field ? data[reducer.field] : (_b = (_a = reducer.getter) == null ? void 0 : _a.call(reducer, data)) != null ? _b : null;
-      reducerResults[key] = reducer.reducer(currentValue, value, data);
-    }
-}
-function group(groupParams, data) {
-  const {
-    groupBy,
-    defaultToKey = DEFAULT_TO_KEY,
-    pivot,
-    reducers
-  } = groupParams;
-  const groupByLength = groupBy.length;
-  const topLevelPivotColumns = pivot ? new DeepMap() : void 0;
-  const deepMap = new DeepMap();
-  let currentGroupKeys = [];
-  let currentPivotKeys = [];
-  const initialReducerValue = initReducers(reducers);
-  const globalReducerResults = __spreadValues({}, initialReducerValue);
-  for (let i = 0, len = data.length; i < len; i++) {
-    let item = data[i];
-    for (let groupByIndex = 0; groupByIndex < groupByLength; groupByIndex++) {
-      const { field: groupByProperty, toKey: groupToKey } = groupBy[groupByIndex];
-      const key = (groupToKey || defaultToKey)(item[groupByProperty], item);
-      currentGroupKeys.push(key);
-      if (!deepMap.has(currentGroupKeys)) {
-        const deepMapGroupValue = {
-          items: [],
-          reducerResults: __spreadValues({}, initialReducerValue)
-        };
-        if (pivot) {
-          deepMapGroupValue.pivotDeepMap = new DeepMap();
-        }
-        deepMap.set(currentGroupKeys, deepMapGroupValue);
-      }
-      const {
-        items: currentGroupItems,
-        reducerResults,
-        pivotDeepMap
-      } = deepMap.get(currentGroupKeys);
-      currentGroupItems.push(item);
-      if (reducers) {
-        computeReducersFor(item, reducers, reducerResults);
-      }
-      if (pivot) {
-        for (let pivotIndex = 0, pivotLength = pivot.length; pivotIndex < pivotLength; pivotIndex++) {
-          const { field: pivotField, toKey: pivotToKey } = pivot[pivotIndex];
-          const pivotKey = (pivotToKey || defaultToKey)(item[pivotField], item);
-          currentPivotKeys.push(pivotKey);
-          if (!pivotDeepMap.has(currentPivotKeys)) {
-            topLevelPivotColumns.set(currentPivotKeys, true);
-            pivotDeepMap == null ? void 0 : pivotDeepMap.set(currentPivotKeys, {
-              reducerResults: __spreadValues({}, initialReducerValue),
-              items: []
-            });
-          }
-          const {
-            reducerResults: pivotReducerResults,
-            items: pivotGroupItems
-          } = pivotDeepMap.get(currentPivotKeys);
-          pivotGroupItems.push(item);
-          if (reducers) {
-            computeReducersFor(item, reducers, pivotReducerResults);
-          }
-        }
-        currentPivotKeys.length = 0;
-      }
-    }
-    if (reducers) {
-      computeReducersFor(item, reducers, globalReducerResults);
+    originalLazyGroupData,
+    originalDataArray,
+    cursorId: defaultCursorId,
+    showSeparatePivotColumnForSingleAggregation: false,
+    propsCache: new Map([
+      ["sortInfo", new WeakMap()]
+    ]),
+    pivotMappings: void 0,
+    pivotColumns: void 0,
+    pivotColumnGroups: void 0,
+    dataArray,
+    updatedAt: now,
+    groupedAt: 0,
+    sortedAt: 0,
+    reducedAt: now,
+    generateGroupRows: true,
+    groupDeepMap: void 0,
+    postSortDataArray: void 0,
+    postGroupDataArray: void 0,
+    lastSortDataArray: void 0,
+    lastGroupDataArray: void 0
+  };
+}
+function getCompareObjectForDataParams(dataParams) {
+  const obj = __spreadValues({}, dataParams);
+  delete obj.originalDataArray;
+  return obj;
+}
+var forwardProps3 = (setupState) => {
+  return {
+    onDataParamsChange: (fn) => fn ? discardCallsWithEqualArg(fn, 100, getCompareObjectForDataParams) : void 0,
+    fullLazyLoad: 1,
+    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,
+    sortInfo: (sortInfo) => normalizeSortInfo(sortInfo, setupState.propsCache.get("sortInfo")),
+    groupBy: (groupBy) => groupBy != null ? groupBy : [],
+    groupRowsState: (groupRowsState) => {
+      return groupRowsState || new GroupRowsState({
+        expandedRows: true,
+        collapsedRows: []
+      });
     }
-    currentGroupKeys.length = 0;
-  }
-  if (reducers) {
-    deepMap.visitDepthFirst((deepMapValue, _keys, _indexInGroup, next) => {
-      completeReducers(reducers, deepMapValue.reducerResults, deepMapValue.items);
-      if (pivot) {
-        deepMapValue.pivotDeepMap.visitDepthFirst(({ items, reducerResults: pivotReducerResults }, _keys2, _indexInGroup2, next2) => {
-          completeReducers(reducers, pivotReducerResults, items);
-          next2 == null ? void 0 : next2();
-        });
-      }
-      next == null ? void 0 : next();
-    });
-  }
-  if (reducers) {
-    completeReducers(reducers, globalReducerResults, data);
-  }
+  };
+};
+function getLivePaginationCursorValue(livePaginationCursorProp, state) {
+  const livePaginationCursor = typeof livePaginationCursorProp === "function" ? livePaginationCursorProp({
+    array: state.originalDataArray,
+    length: state.originalDataArray.length,
+    lastItem: state.originalDataArray[state.originalDataArray.length - 1]
+  }) : livePaginationCursorProp;
+  return livePaginationCursor;
+}
+function mapPropsToState2(params) {
+  const { props, state, oldState } = params;
+  const controlledSort = isControlledValue(props.sortInfo);
   const result = {
-    deepMap,
-    groupParams,
-    initialData: data,
-    reducerResults: globalReducerResults
+    controlledSort,
+    multiSort: Array.isArray(controlledSort ? props.sortInfo : props.defaultSortInfo)
   };
-  if (pivot) {
-    result.topLevelPivotColumns = topLevelPivotColumns;
-    result.pivot = pivot;
+  if (props.livePagination) {
+    const dataArrayChanged = !oldState || oldState.originalDataArray !== state.originalDataArray;
+    const livePaginationCursor = typeof props.livePaginationCursor === "function" ? dataArrayChanged ? getLivePaginationCursorValue(props.livePaginationCursor, state) : state.livePaginationCursor : props.livePaginationCursor;
+    result.livePaginationCursor = livePaginationCursor;
   }
   return result;
 }
-function flatten(groupResult) {
-  const { groupParams, deepMap } = groupResult;
-  const groupByLength = groupParams.groupBy.length;
-  const result = [];
-  deepMap.topDownKeys().reduce((acc, key) => {
-    if (key.length === groupByLength) {
-      const items = deepMap.get(key).items;
-      acc.push(...items);
+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) {
+      debugFullLazyLoad(`"data" function prop has changed`);
+    }
+    if (props.collapseGroupRowsOnDataFunctionChange !== false) {
+      actions.groupRowsState = new GroupRowsState({
+        collapsedRows: true,
+        expandedRows: []
+      });
     }
-    return acc;
-  }, result);
-  return result;
-}
-function getEnhancedGroupData(options, deepMapValue) {
-  const { groupBy, groupKeys, collapsed, parents, reducers } = options;
-  const groupNesting = groupKeys.length;
-  const { items: groupItems, reducerResults, pivotDeepMap } = deepMapValue;
-  let data = null;
-  if (Object.keys(reducerResults).length > 0) {
-    data = {};
-    for (let key in reducers)
-      if (reducers.hasOwnProperty(key)) {
-        const reducer = reducers[key];
-        const field = reducer.field;
-        if (field) {
-          data[field] = reducerResults[key];
-        }
-      }
   }
-  const enhancedGroupData = {
-    data,
-    groupCount: groupItems.length,
-    groupData: groupItems,
-    groupKeys,
-    id: groupKeys,
-    collapsed,
-    parents,
-    collapsedChildrenCount: 0,
-    collapsedGroupsCount: 0,
-    indexInParentGroups: options.indexInParentGroups,
-    indexInGroup: options.indexInGroup,
-    indexInAll: options.indexInAll,
-    value: groupKeys[groupKeys.length - 1],
-    groupBy: groupBy.slice(0, groupNesting),
-    isGroupRow: true,
-    pivotValuesMap: pivotDeepMap,
-    groupNesting,
-    reducerResults
-  };
-  return enhancedGroupData;
 }
-function completeReducers(reducers, reducerResults, items) {
-  if (reducers) {
-    for (let key in reducers)
-      if (reducers.hasOwnProperty(key)) {
-        const reducer = reducers[key];
-        if (reducer.done) {
-          reducerResults[key] = reducer.done(reducerResults[key], items);
-        }
+var debugDataParams = dbg("DataSource:dataParams");
+function getInterceptActions() {
+  return {
+    sortInfo: (sortInfo, { actions, state }) => {
+      const dataParams = buildDataSourceDataParams(state, {
+        sortInfo,
+        livePaginationCursor: null
+      });
+      actions.dataParams = dataParams;
+      if (state.livePagination) {
+        requestAnimationFrame(() => {
+          actions.livePaginationCursor = null;
+        });
       }
-  }
-  return reducerResults;
-}
-function enhancedFlatten(param) {
-  const {
-    groupResult,
-    toPrimaryKey,
-    groupRowsState,
-    generateGroupRows,
-    reducers = {}
-  } = param;
-  const { groupParams, deepMap, pivot } = groupResult;
-  const { groupBy } = groupParams;
-  const groupByStrings = groupBy.map((g) => g.field);
-  const result = [];
-  const parents = [];
-  const indexInParentGroups = [];
-  deepMap.visitDepthFirst((deepMapValue, groupKeys, indexInGroup, next) => {
-    var _a;
-    const items = deepMapValue.items;
-    const groupNesting = groupKeys.length;
-    const collapsed = (_a = groupRowsState == null ? void 0 : groupRowsState.isGroupRowCollapsed(groupKeys)) != null ? _a : false;
-    const enhancedGroupData = getEnhancedGroupData({
-      groupBy: groupByStrings,
-      parents: Array.from(parents),
-      reducers,
-      indexInGroup,
-      indexInParentGroups: Array.from(indexInParentGroups),
-      indexInAll: result.length,
-      groupKeys,
-      collapsed
-    }, deepMapValue);
-    const include = generateGroupRows || collapsed;
-    if (include) {
-      result.push(enhancedGroupData);
-    }
-    if (collapsed) {
-      parents.forEach((parent) => {
-        parent.collapsedChildrenCount += enhancedGroupData.groupCount;
-        parent.collapsedGroupsCount += 1;
+    },
+    groupBy: (groupBy, { actions, state }) => {
+      const dataParams = buildDataSourceDataParams(state, {
+        groupBy,
+        livePaginationCursor: null
       });
-    }
-    indexInParentGroups.push(indexInGroup);
-    parents.push(enhancedGroupData);
-    if (!collapsed) {
-      if (!next) {
-        if (!pivot) {
-          const startIndex = result.length;
-          result.push(...items.map((item, index) => {
-            return {
-              id: toPrimaryKey(item),
-              data: item,
-              isGroupRow: false,
-              collapsed: false,
-              groupKeys,
-              parents: Array.from(parents),
-              indexInParentGroups: [...indexInParentGroups, index],
-              indexInGroup: index,
-              indexInAll: startIndex + index,
-              groupBy: groupByStrings,
-              groupNesting,
-              groupCount: enhancedGroupData.groupCount
-            };
-          }));
-        }
-      } else {
-        next();
+      actions.dataParams = dataParams;
+      if (state.livePagination) {
+        requestAnimationFrame(() => {
+          actions.livePaginationCursor = null;
+        });
+      }
+    },
+    pivotBy: (pivotBy, { actions, state }) => {
+      const dataParams = buildDataSourceDataParams(state, {
+        pivotBy,
+        livePaginationCursor: null
+      });
+      actions.dataParams = dataParams;
+      if (state.livePagination) {
+        requestAnimationFrame(() => {
+          actions.livePaginationCursor = null;
+        });
+      }
+    },
+    cursorId: (cursorId, { actions, state }) => {
+      const dataParams = buildDataSourceDataParams(state, {
+        cursorId
+      });
+      actions.dataParams = dataParams;
+    },
+    livePaginationCursor: (livePaginationCursor, { actions, state }) => {
+      const dataParams = buildDataSourceDataParams(state, {
+        livePaginationCursor
+      });
+      actions.dataParams = dataParams;
+    },
+    dataParams: (dataParams, { state }) => {
+      if (shallowEqualObjects(dataParams, state.dataParams, new Set([
+        "changes",
+        "originalDataArray"
+      ]))) {
+        return false;
       }
+      debugDataParams("onDataParamsChange triggered because the following values have changed", dataParams == null ? void 0 : dataParams.changes);
+      return true;
     }
-    parents.pop();
-    indexInParentGroups.pop();
-  });
-  return {
-    data: result
   };
 }
 
 // src/utils/groupAndPivot/getPivotColumnsAndColumnGroups.ts
 function prepareColumn(column) {
   const { pivotByAtIndex: pivotByForColumn } = column;
-  if (pivotByForColumn.column) {
+  if (pivotByForColumn == null ? void 0 : pivotByForColumn.column) {
     if (typeof pivotByForColumn.column === "function") {
       Object.assign(column, pivotByForColumn.column({ column }));
     } else {
@@ -3310,7 +3601,7 @@ function prepareColumn(column) {
 }
 function prepareColumnGroup(columnGroup) {
   const { pivotByAtIndex: pivotByForColumnGroup } = columnGroup;
-  if (pivotByForColumnGroup.columnGroup) {
+  if (pivotByForColumnGroup == null ? void 0 : pivotByForColumnGroup.columnGroup) {
     if (typeof pivotByForColumnGroup.columnGroup === "function") {
       Object.assign(columnGroup, pivotByForColumnGroup.columnGroup({ columnGroup }));
     } else {
@@ -3339,6 +3630,9 @@ function getPivotColumnsAndColumnGroups({
         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;
         }
       }
@@ -3370,7 +3664,7 @@ function getPivotColumnsAndColumnGroups({
         }));
       }
       aggregationReducers.forEach((reducer, index) => {
-        const header = isSingleAggregationColumn ? keys[keys.length - 1] : reducer.id;
+        const header = isSingleAggregationColumn ? keys[keys.length - 1] : reducer.name || reducer.id;
         const computedPivotColumn = prepareColumn({
           pivotBy,
           pivotColumn: true,
@@ -3389,7 +3683,7 @@ function getPivotColumnsAndColumnGroups({
             return (_b = (_a = rowInfo.pivotValuesMap) == null ? void 0 : _a.get(keys)) == null ? void 0 : _b.reducerResults[reducer.id];
           }
         });
-        const columnId = `${keys.join("/")}-${reducer.id}`;
+        const columnId = `${reducer.id}:${keys.join("/")}`;
         columns.set(columnId, computedPivotColumn);
       });
     } else {
@@ -3422,7 +3716,7 @@ function getPivotColumnsAndColumnGroups({
           }));
         }
         aggregationReducers.forEach((reducer, index) => {
-          const header = isSingleAggregationColumn ? `${keys[keys.length - 1]} total ` : `${reducer.id} total`;
+          const header = isSingleAggregationColumn ? `${keys[keys.length - 1]} total ` : `${reducer.name || reducer.id} total`;
           const computedPivotColumn = prepareColumn({
             columnGroup: columnGroupId,
             header,
@@ -3441,7 +3735,7 @@ function getPivotColumnsAndColumnGroups({
               return (_b = (_a = rowInfo.pivotValuesMap) == null ? void 0 : _a.get(keys)) == null ? void 0 : _b.reducerResults[reducer.id];
             }
           });
-          columns.set(`total:${keys.join("/")}-${reducer.id}`, computedPivotColumn);
+          columns.set(`total:${reducer.id}:${keys.join("/")}`, computedPivotColumn);
         });
       }
     }
@@ -3450,15 +3744,22 @@ function getPivotColumnsAndColumnGroups({
     }
   });
   if (columns.size === 1) {
-    columns.set("single", {
-      header: "Reduced",
-      pivotBy,
-      pivotColumn: true,
-      valueGetter: ({ rowInfo }) => {
-        var _a;
-        const key = Object.keys(rowInfo.reducerResults || {})[0];
-        return (_a = rowInfo.reducerResults) == null ? void 0 : _a[key];
-      }
+    aggregationReducers.forEach((reducer, index) => {
+      columns.set(`total:${reducer.id}`, prepareColumn({
+        header: `${reducer.name || reducer.id} total`,
+        pivotBy,
+        pivotColumn: true,
+        pivotTotalColumn: true,
+        pivotAggregator: reducer,
+        pivotAggregatorIndex: index,
+        pivotGroupKeys: [],
+        pivotGroupKey: "",
+        pivotIndex: -1,
+        valueGetter: ({ rowInfo }) => {
+          var _a;
+          return (_a = rowInfo.reducerResults) == null ? void 0 : _a[reducer.id];
+        }
+      }));
     });
   }
   const result = {
@@ -3495,10 +3796,11 @@ function concludeReducer(params) {
   const { state, previousState } = params;
   const sortInfo = state.sortInfo;
   const shouldSort = !!(sortInfo == null ? void 0 : sortInfo.length) && !state.controlledSort;
-  const sortDepsChanged = haveDepsChanged(previousState, state, [
-    "originalDataArray",
-    "sortInfo"
+  const originalDataArrayChanged = haveDepsChanged(previousState, state, [
+    "originalDataArray"
   ]);
+  const sortInfoChanged = haveDepsChanged(previousState, state, ["sortInfo"]);
+  const sortDepsChanged = originalDataArrayChanged || sortInfoChanged;
   const shouldSortAgain = shouldSort && (sortDepsChanged || !state.lastSortDataArray);
   const groupBy = state.groupBy;
   const pivotBy = state.pivotBy;
@@ -3506,6 +3808,7 @@ function concludeReducer(params) {
   const groupsDepsChanged = haveDepsChanged(previousState, state, [
     "generateGroupRows",
     "originalDataArray",
+    "originalLazyGroupData",
     "groupBy",
     "groupRowsState",
     "pivotBy",
@@ -3530,7 +3833,12 @@ function concludeReducer(params) {
   };
   if (shouldGroup) {
     if (shouldGroupAgain) {
-      const groupResult = group({
+      const groupResult = state.fullLazyLoad ? lazyGroup({
+        groupBy,
+        pivot: pivotBy,
+        mappings: state.pivotMappings,
+        reducers: state.aggregationReducers
+      }, state.originalLazyGroupData) : group({
         groupBy,
         pivot: pivotBy,
         reducers: state.aggregationReducers
@@ -3598,6 +3906,7 @@ var DataSourceRoot = getComponentStateRoot({
   forwardProps: forwardProps3,
   concludeReducer,
   mapPropsToState: mapPropsToState2,
+  onPropChange,
   interceptActions: getInterceptActions()
 });
 function DataSourceCmp({ children }) {
@@ -3629,16 +3938,22 @@ function DataSource(props) {
 function useToggleGroupRow() {
   const { getState: getDataSourceState, componentActions: dataSourceActions } = useDataSourceContextValue();
   const toggleGroupRow = useCallback4((groupKeys) => {
-    const newState = new GroupRowsState(getDataSourceState().groupRowsState);
+    const state = getDataSourceState();
+    const newState = new GroupRowsState(state.groupRowsState);
     newState.toggleGroupRow(groupKeys);
     dataSourceActions.groupRowsState = newState;
+    if (state.fullLazyLoad && newState.isGroupRowExpanded(groupKeys)) {
+      loadData(state.data, state, dataSourceActions, {
+        groupKeys
+      });
+    }
   }, []);
   return toggleGroupRow;
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
 function useGroupByMap(groupBy) {
-  const groupByMap = useMemo5(() => {
+  const groupByMap = useMemo4(() => {
     return groupBy.reduce((acc, groupBy2, index) => {
       acc.set(groupBy2.field, {
         groupBy: groupBy2,
@@ -3826,7 +4141,7 @@ function useHideEmptyGroupColumns(groupRowsMap) {
     const currentState = getComponentState();
     const { computedColumns } = currentState;
     let updated = false;
-    const columnVisibility = new Map(currentState.columnVisibility);
+    const columnVisibility = __spreadValues({}, currentState.columnVisibility);
     const cols = computedColumns;
     groupBy.forEach(({ field, column: groupColumn }, index) => {
       const colId = (groupColumn == null ? void 0 : groupColumn.id) || `group-by-${field}`;
@@ -3837,9 +4152,9 @@ function useHideEmptyGroupColumns(groupRowsMap) {
       const shouldBeHidden = index > expandedGroupsLevel && hideEmptyGroupColumns;
       updated = true;
       if (shouldBeHidden) {
-        columnVisibility.set(colId, false);
+        columnVisibility[colId] = false;
       } else {
-        columnVisibility.delete(colId);
+        delete columnVisibility[colId];
       }
     });
     if (updated) {
@@ -3902,7 +4217,8 @@ function useComputed() {
   const { componentActions, componentState } = useComponentState();
   const {
     componentActions: dataSourceActions,
-    componentState: dataSourceState
+    componentState: dataSourceState,
+    getState: getDataSourceState
   } = useDataSourceContextValue();
   const {
     columnOrder,
@@ -3935,7 +4251,7 @@ function useComputed() {
     var _a2;
     const newSortInfo = multiSort ? sortInfo : (_a2 = sortInfo[0]) != null ? _a2 : null;
     dataSourceActions.sortInfo = newSortInfo;
-  }, []);
+  }, [getDataSourceState]);
   const columns = componentState.computedColumns;
   const {
     computedColumnOrder,
@@ -4189,7 +4505,7 @@ var InfiniteTableCell = memo3(InfiniteTableCellFn);
 var import_binary_search = __toModule(require_binary_search());
 import {
   useCallback as useCallback6,
-  useMemo as useMemo6,
+  useMemo as useMemo5,
   useRef as useRef7,
   useState as useState6
 } from "react";
@@ -4236,8 +4552,8 @@ var useColumnPointerEvents = ({
   const dragging = draggingDiff != null;
   const { componentActions, computed } = useInfiniteTable();
   const { computedColumnOrder } = computed;
-  const column = useMemo6(() => columns.get(columnId), [columnId, columns]);
-  const { columnIndex, columnWidth, columnsArray } = useMemo6(() => {
+  const column = useMemo5(() => columns.get(columnId), [columnId, columns]);
+  const { columnIndex, columnWidth, columnsArray } = useMemo5(() => {
     const columnsArray2 = Array.from(columns.values());
     return {
       columnsArray: columnsArray2,
@@ -4560,10 +4876,10 @@ import {
   createElement as createElement12,
   memo as memo4
 } from "react";
-import { useLayoutEffect as useLayoutEffect4, useState as useState8 } from "react";
+import { useLayoutEffect as useLayoutEffect3, useState as useState8 } from "react";
 function AvoidReactDiffFn(props) {
   const [children, setChildren] = useState8(props.updater.get());
-  useLayoutEffect4(() => {
+  useLayoutEffect3(() => {
     const remove = props.updater.onChange((children2) => {
       setChildren(children2);
     });
@@ -4574,7 +4890,7 @@ function AvoidReactDiffFn(props) {
 var AvoidReactDiff = memo4(AvoidReactDiffFn);
 
 // src/components/RawList/useVirtualRenderer.ts
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo6 } from "react";
 
 // src/components/RawList/ReactVirtualRenderer.tsx
 import {
@@ -4890,7 +5206,7 @@ function createRenderer(brain) {
 function useVirtualRenderer({
   brain
 }) {
-  return useMemo7(() => {
+  return useMemo6(() => {
     return createRenderer(brain);
   }, [brain]);
 }
@@ -4982,7 +5298,7 @@ var InfiniteTableHeader = memo6(InfiniteTableHeaderFn);
 import {
   createElement as createElement18,
   memo as memo7,
-  useMemo as useMemo8,
+  useMemo as useMemo7,
   useRef as useRef10
 } from "react";
 
@@ -5196,7 +5512,7 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
   } = useInfiniteTable();
   const domRef = useRef10(null);
   const hasColumnGroups = computedColumnGroups.size > 0;
-  const columnHeaderGroups = useMemo8(() => {
+  const columnHeaderGroups = useMemo7(() => {
     return hasColumnGroups ? renderColumnHeaderGroups({
       columnGroups: computedColumnGroups,
       columnGroupsDepthsMap,
@@ -5281,6 +5597,9 @@ function TableHeaderWrapper(props) {
   const hasPinnedStart = computedPinnedStartColumns.length > 0;
   const hasPinnedEnd = computedPinnedEndColumns.length > 0;
   const height = columnGroupsMaxDepth ? columnGroupsMaxDepth * headerHeight : headerHeight;
+  const unvirtualizedStyle = !virtualizeHeader && computedPinnedStartColumnsWidth ? {
+    left: computedPinnedStartWidth
+  } : void 0;
   const header = virtualizeHeader ? /* @__PURE__ */ createElement19(InfiniteTableHeader, {
     columns: computedUnpinnedColumns,
     repaintId: virtualizeHeader ? repaintId : void 0,
@@ -5295,6 +5614,7 @@ function TableHeaderWrapper(props) {
     availableWidth: computedUnpinnedColumnsWidth,
     totalWidth: computedUnpinnedColumnsWidth
   }) : /* @__PURE__ */ createElement19(InfiniteTableHeaderUnvirtualized, {
+    style: unvirtualizedStyle,
     brain,
     scrollable: true,
     pinning: false,
@@ -5603,6 +5923,9 @@ 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 ? {
@@ -6001,7 +6324,6 @@ var PinnedRowsClsVariants = { pinnedStart: "_1yeub2ve", pinnedEnd: "_1yeub2vf",
 var PinnedRowsContainerClsVariants = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "", variantClassNames: { pinned: { start: "_1yeub2vh", end: "_1yeub2vi", false: "_1yeub2vj" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/InfiniteTable/hooks/useOnContainerScroll.ts
-var DELAY = 200;
 var TableClassName = internalProps.rootClassName;
 var TableClassName__Scrolling = `${TableClassName}--scrolling`;
 var SCROLL_BOTTOM_OFFSET = 1;
@@ -6012,15 +6334,25 @@ var useOnContainerScroll = ({
 }) => {
   const {
     componentState: {
+      scrollStopDelay,
       scrollerDOMRef,
       domRef,
       scrollToBottomOffset,
       onScrollToBottom,
       onScrollToTop,
+      onScrollStop: onScrollStopFromProps,
       bodySize
     }
   } = useInfiniteTable();
-  const { componentActions: dataSourceActions, getState: getDataSourceState } = useDataSourceContextValue();
+  const {
+    componentActions: dataSourceActions,
+    getState: getDataSourceState,
+    componentState: { notifyScrollStop }
+  } = useDataSourceContextValue();
+  const onScrollStop = useCallback13((param) => {
+    onScrollStopFromProps == null ? void 0 : onScrollStopFromProps(param);
+    notifyScrollStop(param);
+  }, [onScrollStopFromProps, notifyScrollStop]);
   const timeoutIdRef = useRef15(0);
   const scrollingRef = useRef15(false);
   const scrollTopMaxRef = useRef15(0);
@@ -6039,9 +6371,17 @@ var useOnContainerScroll = ({
       timeoutIdRef.current = setTimeout(() => {
         setScrolling(false);
         timeoutIdRef.current = 0;
-      }, DELAY);
+      }, scrollStopDelay);
     }
     if (prevScrolling !== scrolling) {
+      if (!scrolling) {
+        const range = verticalVirtualBrain.getRenderRange();
+        onScrollStop({
+          scrollTop: scrollPositionRef.current.scrollTop,
+          firstVisibleRowIndex: range.renderStartIndex,
+          lastVisibleRowIndex: range.renderEndIndex
+        });
+      }
       const classList = (_a = domRef.current) == null ? void 0 : _a.classList;
       if (!classList) {
         return;
@@ -6052,7 +6392,7 @@ var useOnContainerScroll = ({
         classList.remove(InfiniteClsScrolling, TableClassName__Scrolling);
       }
     }
-  }, []);
+  }, [scrollStopDelay, onScrollStop]);
   const onContainerScroll = useCallback13((scrollInfo) => {
     verticalVirtualBrain.setScrollPosition(scrollInfo);
     horizontalVirtualBrain.setScrollPosition(scrollInfo);
@@ -6082,7 +6422,7 @@ var useOnContainerScroll = ({
     if (isScrollBottom) {
       onScrollToBottom == null ? void 0 : onScrollToBottom();
       if (getDataSourceState().livePagination) {
-        dataSourceActions.scrollBottomId = Date.now();
+        dataSourceActions.cursorId = Date.now();
       }
     }
   }, [onContainerScroll, scrollToBottomOffset, onScrollToBottom, onScrollToTop]);
@@ -6095,7 +6435,7 @@ var useOnContainerScroll = ({
 // src/components/InfiniteTable/hooks/usePinnedRendering.tsx
 import {
   createElement as createElement29,
-  useMemo as useMemo9
+  useMemo as useMemo8
 } from "react";
 import { useCallback as useCallback15 } from "react";
 
@@ -6201,7 +6541,7 @@ function PinnedRowsContainer(props) {
     brain,
     renderRow
   } = props;
-  const style = useMemo9(() => {
+  const style = useMemo8(() => {
     const result = pinning === "end" ? {
       width: rowWidth,
       height,
@@ -6374,6 +6714,15 @@ function usePinnedStartRendering(params) {
 // src/components/InfiniteTable/hooks/useYourBrain.ts
 import { useEffect as useEffect21 } from "react";
 
+// src/components/hooks/useOnce.ts
+import { useMemo as useMemo9 } from "react";
+function useOnce(fn) {
+  const onceFn = useMemo9(() => {
+    return once(fn);
+  }, []);
+  return onceFn();
+}
+
 // src/components/VirtualBrain/index.ts
 var import_binary_search2 = __toModule(require_binary_search());
 var initialScrollPosition2 = {
@@ -7269,7 +7618,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo11(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.1.1"
+      version: "0.2.0"
     });
     if (!licenseKey && !valid2 && isInsideSandbox) {
       return true;
@@ -7283,7 +7632,7 @@ var useLicense = (licenseKey = "") => {
 import {
   createElement as createElement31,
   useCallback as useCallback19,
-  useLayoutEffect as useLayoutEffect5
+  useLayoutEffect as useLayoutEffect4
 } from "react";
 import { useRef as useRef19 } from "react";
 var error = err("CSSVariableWatch");
@@ -7306,7 +7655,7 @@ var useCSSVariableWatch = (params) => {
     }
   }, [params.onChange]);
   useResizeObserver(params.ref, onResize, { earlyAttach: true });
-  useLayoutEffect5(() => {
+  useLayoutEffect4(() => {
     const value = params.ref.current.getBoundingClientRect().height;
     if (value) {
       lastValueRef.current = value;
@@ -7508,7 +7857,7 @@ var InfiniteTableComponent = memo13(function InfiniteTableComponent2() {
   const licenseValid = useLicense(licenseKey);
   const domProps = useDOMProps(componentState.domProps);
   const LoadMaskCmp = (_a = components == null ? void 0 : components.LoadMask) != null ? _a : LoadMask;
-  useLayoutEffect6(() => {
+  useLayoutEffect5(() => {
     const dataSourceState = getDataSourceState();
     const { onScrollbarsChange } = getInfiniteTableState();
     const { notifyScrollbarsChange } = dataSourceState;
@@ -7614,5 +7963,6 @@ export {
   interceptMap,
   multisort,
   useComponentState,
-  useDataSource
+  useDataSource,
+  useEffectWithChanges
 };