@infinite-table/infinite-react 0.0.7 → 0.1.0

package/index.js

@@ -53,26 +53,6 @@ var __reExport = (target, module2, desc) => {
 var __toModule = (module2) => {
   return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
 };
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 
 // node_modules/ms/index.js
 var require_ms = __commonJS({
@@ -482,14 +462,14 @@ var require_browser = __commonJS({
         } else {
           exports.storage.removeItem("debug");
         }
-      } catch (error3) {
+      } catch (error2) {
       }
     }
     function load() {
       let r;
       try {
         r = exports.storage.getItem("debug");
-      } catch (error3) {
+      } catch (error2) {
       }
       if (!r && typeof process !== "undefined" && "env" in process) {
         r = process.env.DEBUG;
@@ -499,7 +479,7 @@ var require_browser = __commonJS({
     function localstorage() {
       try {
         return localStorage;
-      } catch (error3) {
+      } catch (error2) {
       }
     }
     module2.exports = require_common()(exports);
@@ -507,8 +487,8 @@ var require_browser = __commonJS({
     formatters.j = function(v) {
       try {
         return JSON.stringify(v);
-      } catch (error3) {
-        return "[UnexpectedJSONParseError]: " + error3.message;
+      } catch (error2) {
+        return "[UnexpectedJSONParseError]: " + error2.message;
       }
     };
   }
@@ -641,38 +621,6 @@ var require_binary_search = __commonJS({
   }
 });
 
-// node_modules/decamelize/index.js
-var require_decamelize = __commonJS({
-  "node_modules/decamelize/index.js"(exports, module2) {
-    "use strict";
-    var handlePreserveConsecutiveUppercase = (decamelized, separator) => {
-      decamelized = decamelized.replace(/((?<![\p{Uppercase_Letter}\d])[\p{Uppercase_Letter}\d](?![\p{Uppercase_Letter}\d]))/gu, ($0) => {
-        return $0.toLowerCase();
-      });
-      return decamelized.replace(/(\p{Uppercase_Letter}+)(\p{Uppercase_Letter}\p{Lowercase_Letter}+)/gu, (_, $1, $2) => {
-        return $1 + separator + $2.toLowerCase();
-      });
-    };
-    module2.exports = (text, {
-      separator = "_",
-      preserveConsecutiveUppercase = false
-    } = {}) => {
-      if (!(typeof text === "string" && typeof separator === "string")) {
-        throw new TypeError("The `text` and `separator` arguments should be of type `string`");
-      }
-      if (text.length < 2) {
-        return preserveConsecutiveUppercase ? text : text.toLowerCase();
-      }
-      const replacement = `$1${separator}$2`;
-      const decamelized = text.replace(/([\p{Lowercase_Letter}\d])(\p{Uppercase_Letter})/gu, replacement);
-      if (preserveConsecutiveUppercase) {
-        return handlePreserveConsecutiveUppercase(decamelized, separator);
-      }
-      return decamelized.replace(/(\p{Uppercase_Letter})(\p{Uppercase_Letter}\p{Lowercase_Letter}+)/gu, replacement).toLowerCase();
-    };
-  }
-});
-
 // src/index.tsx
 __export(exports, {
   DataSource: () => DataSource,
@@ -685,12 +633,13 @@ __export(exports, {
   getComponentStateRoot: () => getComponentStateRoot,
   group: () => group,
   interceptMap: () => interceptMap,
+  multisort: () => multisort,
   useComponentState: () => useComponentState,
   useDataSource: () => useDataSource
 });
 
 // src/components/InfiniteTable/index.tsx
-var React36 = __toModule(require("react"));
+var React35 = __toModule(require("react"));
 
 // src/components/InfiniteTable/internalProps.ts
 var rootClassName = "Infinite";
@@ -770,9 +719,20 @@ var ScrollListener = class {
   }
 };
 
+// src/components/InfiniteTable/utils/toMap.ts
+function toMap(mapOrObject) {
+  if (!mapOrObject) {
+    return new Map();
+  }
+  if (mapOrObject instanceof Map) {
+    return mapOrObject;
+  }
+  return new Map(Object.entries(mapOrObject));
+}
+
 // src/components/InfiniteTable/state/computeColumnGroupsDepths.ts
 function computeColumnGroupsDepths(columnGroups) {
-  const map = new Map();
+  const map2 = new Map();
   columnGroups.forEach((colGroup, colGroupId) => {
     let parentGroupId = colGroup.columnGroup;
     let depth = 0;
@@ -787,12 +747,15 @@ function computeColumnGroupsDepths(columnGroups) {
       depth++;
       parentGroupId = parent.columnGroup;
     }
-    map.set(colGroupId, depth);
+    map2.set(colGroupId, depth);
   });
-  return map;
+  return map2;
 }
 
 // src/components/InfiniteTable/state/getInitialState.ts
+function toColumnTypesMap(mapOrObject) {
+  return toMap(mapOrObject);
+}
 function initSetupState() {
   const columnsGeneratedForGrouping = new Map();
   return {
@@ -822,7 +785,11 @@ function initSetupState() {
 }
 var forwardProps = () => {
   return {
-    columns: 1,
+    columns: (columns) => {
+      var _a;
+      return (_a = toMap(columns)) != null ? _a : new Map();
+    },
+    scrollTopId: 1,
     components: 1,
     loadingText: 1,
     pivotColumns: 1,
@@ -848,15 +815,18 @@ var forwardProps = () => {
     pivotColumn: 1,
     pivotRowLabelsColumn: 1,
     pivotColumnGroups: 1,
+    onScrollbarsChange: 1,
+    viewportReservedWidth: (viewportReservedWidth) => viewportReservedWidth != null ? viewportReservedWidth : 0,
     activeIndex: (activeIndex) => activeIndex != null ? activeIndex : 0,
     columnMinWidth: (columnMinWidth) => columnMinWidth != null ? columnMinWidth : 30,
     columnMaxWidth: (columnMaxWidth) => columnMaxWidth != null ? columnMaxWidth : 2e3,
-    columnDefaultWidth: (columnDefaultWidth) => columnDefaultWidth != null ? columnDefaultWidth : 300,
+    columnDefaultWidth: (columnDefaultWidth) => columnDefaultWidth != null ? columnDefaultWidth : 200,
     draggableColumns: (draggableColumns) => draggableColumns != null ? draggableColumns : true,
+    showSeparatePivotColumnForSingleAggregation: (showSeparatePivotColumnForSingleAggregation) => showSeparatePivotColumnForSingleAggregation != null ? showSeparatePivotColumnForSingleAggregation : false,
     sortable: (sortable) => sortable != null ? sortable : true,
     hideEmptyGroupColumns: (hideEmptyGroupColumns) => hideEmptyGroupColumns != null ? hideEmptyGroupColumns : false,
     pivotTotalColumnPosition: (pivotTotalColumnPosition) => pivotTotalColumnPosition != null ? pivotTotalColumnPosition : "end",
-    licenseKey: (licenseKey) => licenseKey || globalThis.InfiniteTableLicenseKey || "",
+    licenseKey: (licenseKey) => licenseKey || "",
     columnOrder: (columnOrder) => columnOrder != null ? columnOrder : true,
     header: (header) => header != null ? header : true,
     showZebraRows: (showZebraRows) => showZebraRows != null ? showZebraRows : true,
@@ -864,23 +834,33 @@ var forwardProps = () => {
     virtualizeColumns: (virtualizeColumns) => virtualizeColumns != null ? virtualizeColumns : true,
     rowHeight: (rowHeight) => typeof rowHeight === "number" ? rowHeight : 0,
     headerHeight: (headerHeight) => typeof headerHeight === "number" ? headerHeight : 0,
-    columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : new Map(),
+    columnVisibility: (columnVisibility) => {
+      var _a;
+      return (_a = toMap(columnVisibility)) != null ? _a : new Map();
+    },
     columnPinning: (columnPinning) => columnPinning != null ? columnPinning : new Map(),
-    columnAggregations: (columnAggregations) => columnAggregations != null ? columnAggregations : 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();
+    },
     collapsedColumnGroups: (collapsedColumnGroups) => collapsedColumnGroups != null ? collapsedColumnGroups : new Map(),
     columnGroups: (columnGroups) => columnGroups != null ? columnGroups : new Map()
   };
 };
 function getGroupRenderStrategy(options) {
-  const { groupRowsBy, groupColumn, groupRenderStrategy } = options;
+  const { groupBy, groupColumn, groupRenderStrategy } = options;
   if (groupRenderStrategy) {
     return groupRenderStrategy;
   }
   if (groupColumn != null && typeof groupColumn === "object") {
     return "single-column";
   }
-  const columnsInGroupRowsBy = groupRowsBy.filter((g) => g.column);
-  if (columnsInGroupRowsBy.length) {
+  const columnsInGroupBy = groupBy.filter((g) => g.column);
+  if (columnsInGroupBy.length) {
     return "multi-column";
   }
   return "multi-column";
@@ -891,16 +871,17 @@ var mapPropsToState = (params) => {
   const computedColumnGroups = state.pivotColumnGroups || state.columnGroups;
   const virtualizeHeader = header && virtualizeColumns && (!computedColumnGroups || (computedColumnGroups == null ? void 0 : computedColumnGroups.size) === 0);
   const columnGroupsDepthsMap = state.columnGroups && state.columnGroups != (oldState == null ? void 0 : oldState.columnGroups) || state.pivotColumnGroups && state.pivotColumnGroups != (oldState == null ? void 0 : oldState.pivotColumnGroups) ? computeColumnGroupsDepths(computedColumnGroups) : state.columnGroupsDepthsMap;
-  const groupRowsBy = parentState == null ? void 0 : parentState.groupRowsBy;
+  const groupBy = parentState == null ? void 0 : parentState.groupBy;
   const groupRenderStrategy = getGroupRenderStrategy({
     groupRenderStrategy: props.groupRenderStrategy,
-    groupRowsBy,
+    groupBy,
     groupColumn: props.groupColumn
   });
+  const computedColumns = state.computedPivotColumns || state.columnsWhenGrouping || state.columnsWhenInlineGroupRenderStrategy || state.columns;
   return {
     groupRenderStrategy,
-    groupRowsBy,
-    computedColumns: state.computedPivotColumns || state.columnsWhenGrouping || state.columnsWhenInlineGroupRenderStrategy || props.columns,
+    groupBy,
+    computedColumns,
     virtualizeHeader,
     columnGroupsDepthsMap,
     columnGroupsMaxDepth: columnGroupsDepthsMap != state.columnGroupsDepthsMap ? Math.max(...columnGroupsDepthsMap.values(), 0) : state.columnGroupsMaxDepth,
@@ -1032,7 +1013,7 @@ var computeFlex = (params) => {
   items.forEach((item, i) => {
     var _a, _b, _c, _d, _e, _f;
     let maxSize = (_b = (_a = item.maxSize) != null ? _a : defaultMaxSize) != null ? _b : void 0;
-    let minSize = (_d = (_c = item.maxSize) != null ? _c : defaultMinSize) != null ? _d : void 0;
+    let minSize = (_d = (_c = item.minSize) != null ? _c : defaultMinSize) != null ? _d : void 0;
     if (item.size != null) {
       if (maxSize != null && item.size > maxSize) {
         item.size = maxSize;
@@ -1060,7 +1041,7 @@ var computeFlex = (params) => {
     if (item.flex != null) {
       const approxFlexSize = sizePerFlex * item.flex;
       let maxSize = (_b = (_a = item.maxSize) != null ? _a : defaultMaxSize) != null ? _b : void 0;
-      let minSize = (_d = (_c = item.maxSize) != null ? _c : defaultMinSize) != null ? _d : void 0;
+      let minSize = (_d = (_c = item.minSize) != null ? _c : defaultMinSize) != null ? _d : void 0;
       let constrained = false;
       let substractSize = 0;
       if (maxSize != null && approxFlexSize > maxSize) {
@@ -1195,8 +1176,52 @@ var Logger = class {
   }
 };
 
+// src/utils/getGlobal.ts
+function getGlobal() {
+  return globalThis;
+}
+
+// src/components/utils/getScrollbarWidth.ts
+var scrollbarWidth;
+function getScrollbarWidth() {
+  var _a, _b;
+  if (scrollbarWidth != null) {
+    return scrollbarWidth;
+  }
+  const doc = (_a = getGlobal().document) != null ? _a : null;
+  if (!doc) {
+    return 0;
+  }
+  const outer = doc.createElement("div");
+  outer.style.visibility = "hidden";
+  outer.style.overflow = "scroll";
+  doc.body.appendChild(outer);
+  const inner = doc.createElement("div");
+  outer.appendChild(inner);
+  scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+  (_b = outer.parentNode) == null ? void 0 : _b.removeChild(outer);
+  return scrollbarWidth;
+}
+
+// src/components/InfiniteTable/utils/getColumnComputedType.ts
+var emptyType = Object.freeze({});
+function getColumnComputedType(column, columnTypes) {
+  const defaultType = columnTypes.get("default") || emptyType;
+  if (column.type === void 0) {
+    return defaultType;
+  }
+  if (column.type === null) {
+    return emptyType;
+  }
+  if (typeof column.type === "string") {
+    const type = columnTypes.get(column.type) || emptyType;
+    return type;
+  }
+  return column.type.reduce((acc, columnType) => Object.assign(acc, columnTypes.get(columnType)), {});
+}
+
 // src/components/InfiniteTable/utils/getComputedVisibleColumns.ts
-var error = err("getComputedVisibleColumns");
+var logError = err("getComputedVisibleColumns");
 var isColumnVisible = (columnVisibility, _columnVisibilityAssumeVisible, colId) => {
   return !columnVisibility.has(colId) || columnVisibility.get(colId) !== false;
 };
@@ -1217,22 +1242,26 @@ var getComputedVisibleColumns = ({
   sortInfo,
   setSortInfo,
   multiSort,
+  viewportReservedWidth,
   draggableColumns,
   columnOrder,
   columnPinning,
+  columnSizing,
+  columnTypes,
   columnVisibility,
   columnVisibilityAssumeVisible
 }) => {
   let computedOffset = 0;
   const normalizedColumnOrder = adjustColumnOrderForPinning(columnOrder === true ? [...columns.keys()] : columnOrder, columnPinning);
-  const visibleColumnOrder = normalizedColumnOrder.filter(isColumnVisible.bind(null, columnVisibility, columnVisibilityAssumeVisible));
-  const columnsArray = visibleColumnOrder.map((columnId) => {
-    let col = columns.get(columnId);
+  const visibleColumnOrder = normalizedColumnOrder.filter((colId) => {
+    let col = columns.get(colId);
     if (!col) {
-      error(`Column with id "${columnId}" specified in columnOrder array cannot be found in the columns map.`);
+      logError(`Column with id "${colId}" specified in columnOrder array cannot be found in the columns map.`);
+      return false;
     }
-    return col;
-  }).filter(Boolean);
+    return isColumnVisible(columnVisibility, columnVisibilityAssumeVisible, colId);
+  });
+  const columnsArray = visibleColumnOrder.map((columnId) => columns.get(columnId)).filter(Boolean);
   const sortedMap = (sortInfo != null ? sortInfo : []).reduce((acc, info, index) => {
     if (info.id) {
       acc[info.id] = { sortInfo: info, index };
@@ -1246,20 +1275,39 @@ var getComputedVisibleColumns = ({
     return acc;
   }, {});
   const flexResult = computeFlex({
-    availableSize: bodySize.width,
+    availableSize: Math.max(bodySize.width - (viewportReservedWidth != null ? viewportReservedWidth : 0) - getScrollbarWidth(), 0),
     maxSize: columnMaxWidth,
     minSize: columnMinWidth,
-    items: columnsArray.map((col) => {
-      var _a, _b;
-      let size = col.flex != null ? void 0 : (_a = col.width) != null ? _a : columnDefaultWidth;
-      if (!size && col.flex == null) {
-        size = (_b = col.minWidth) != null ? _b : columnMinWidth;
+    items: visibleColumnOrder.map((colId) => {
+      var _a, _b, _c, _d;
+      const column = columns.get(colId);
+      const colType = getColumnComputedType(column, columnTypes);
+      const colTypeSizing = {
+        minWidth: colType == null ? void 0 : colType.minWidth,
+        maxWidth: colType == null ? void 0 : colType.maxWidth,
+        width: colType == null ? void 0 : colType.width,
+        flex: colType == null ? void 0 : colType.flex
+      };
+      let colSizing = columnSizing.get(colId) || {};
+      if (colSizing.width != null) {
+        delete colTypeSizing.flex;
+      }
+      if (colSizing.flex != null) {
+        delete colTypeSizing.width;
+      }
+      colSizing = Object.assign(colTypeSizing, colSizing);
+      let colFlex = (_a = colSizing.flex) != null ? _a : void 0;
+      const colMinWidth = (_b = colSizing.minWidth) != null ? _b : columnMinWidth;
+      const colMaxWidth = (_c = colSizing.maxWidth) != null ? _c : columnMaxWidth;
+      let size = colFlex != void 0 ? void 0 : (_d = colSizing.width) != null ? _d : columnDefaultWidth;
+      if (!size && colFlex == void 0) {
+        size = colMinWidth;
       }
       return {
         size,
-        flex: col.flex,
-        minSize: col.minWidth,
-        maxSize: col.maxWidth
+        flex: colFlex,
+        minSize: colMinWidth,
+        maxSize: colMaxWidth
       };
     })
   });
@@ -1294,6 +1342,7 @@ var getComputedVisibleColumns = ({
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const id = visibleColumnOrder[i];
     const nextColumnId = visibleColumnOrder[i + 1];
+    const colType = getColumnComputedType(c, columnTypes);
     const sortingInfo = sortedMap[id] ? sortedMap[id] : c.field ? (_a = sortedMap[c.field]) != null ? _a : null : null;
     const computedSortInfo = (_b = sortingInfo == null ? void 0 : sortingInfo.sortInfo) != null ? _b : null;
     const computedSorted = !!computedSortInfo;
@@ -1349,8 +1398,10 @@ var getComputedVisibleColumns = ({
     const computedFirstInCategory = computedPinned !== prevPinned;
     const computedLastInCategory = computedLast || computedPinned !== getComputedPinned(nextColumnId, columnPinning);
     const result2 = __spreadProps(__spreadValues({
-      align: "start",
-      verticalAlign: "center"
+      align: colType.align,
+      verticalAlign: colType.verticalAlign,
+      renderValue: colType.renderValue,
+      render: colType.render
     }, c), {
       computedWidth,
       computedAbsoluteOffset,
@@ -1429,28 +1480,28 @@ var useRerender = () => {
 
 // src/components/hooks/useInterceptedMap.ts
 var import_react6 = __toModule(require("react"));
-function interceptMap(map, fns) {
-  const { set, delete: deleteKey, clear } = map;
+function interceptMap(map2, fns) {
+  const { set, delete: deleteKey, clear } = map2;
   if (fns.set) {
-    map.set = (key, value) => {
-      set.call(map, key, value);
+    map2.set = (key, value) => {
+      set.call(map2, key, value);
       fns.set(key, value);
-      return map;
+      return map2;
     };
   }
   if (fns.delete) {
-    map.delete = (key) => {
-      const removed = deleteKey.call(map, key);
+    map2.delete = (key) => {
+      const removed = deleteKey.call(map2, key);
       fns.delete(key);
       return removed;
     };
   }
   if (fns.clear || fns.beforeClear) {
-    map.clear = () => {
+    map2.clear = () => {
       if (fns.beforeClear) {
-        fns.beforeClear(map);
+        fns.beforeClear(map2);
       }
-      const result = clear.call(map);
+      const result = clear.call(map2);
       if (fns.clear) {
         fns.clear();
       }
@@ -1459,13 +1510,13 @@ function interceptMap(map, fns) {
   }
   return () => {
     if (set) {
-      map.set = set;
+      map2.set = set;
     }
     if (deleteKey) {
-      map.delete = deleteKey;
+      map2.delete = deleteKey;
     }
     if (clear) {
-      map.clear = clear;
+      map2.clear = clear;
     }
   };
 }
@@ -1485,16 +1536,16 @@ var rafFn = (fn) => {
 };
 
 // src/components/InfiniteTable/hooks/useRerenderOnKeyChange.ts
-var useRerenderOnKeyChange = (map) => {
+var useRerenderOnKeyChange = (map2) => {
   const [renderId, rerender] = useRerender();
   (0, import_react7.useEffect)(() => {
     const update = rafFn(rerender);
-    return interceptMap(map, {
+    return interceptMap(map2, {
       set: update,
       clear: update,
       delete: update
     });
-  }, [map]);
+  }, [map2]);
   return renderId;
 };
 
@@ -1512,11 +1563,16 @@ var useComputedVisibleColumns = ({
   setSortInfo,
   columnOrder,
   columnPinning,
+  columnTypes,
   pinnedEndMaxWidth,
   pinnedStartMaxWidth,
+  viewportReservedWidth,
   columnVisibility,
-  columnVisibilityAssumeVisible
+  columnVisibilityAssumeVisible,
+  columnSizing
 }) => {
+  const columnsSizingRenderId = useRerenderOnKeyChange(columnSizing);
+  const columnTypesRenderId = useRerenderOnKeyChange(columnTypes);
   const columnsRenderId = useRerenderOnKeyChange(columns);
   const visibilityRenderId = useRerenderOnKeyChange(columnVisibility);
   const pinningRenderId = useRerenderOnKeyChange(columnPinning);
@@ -1542,6 +1598,7 @@ var useComputedVisibleColumns = ({
       columnMinWidth,
       columnMaxWidth,
       columnDefaultWidth,
+      viewportReservedWidth,
       sortable,
       sortInfo,
       setSortInfo,
@@ -1551,6 +1608,8 @@ var useComputedVisibleColumns = ({
       draggableColumns,
       columnOrder,
       columnPinning,
+      columnSizing,
+      columnTypes,
       columnVisibility,
       columnVisibilityAssumeVisible: columnVisibilityAssumeVisible != null ? columnVisibilityAssumeVisible : true
     });
@@ -1572,7 +1631,9 @@ var useComputedVisibleColumns = ({
     columnPinning,
     columnsRenderId,
     visibilityRenderId,
-    pinningRenderId
+    columnsSizingRenderId,
+    pinningRenderId,
+    columnTypesRenderId
   ]);
   const result = {
     columns,
@@ -1600,35 +1661,8 @@ var sortAscending = (a, b) => a - b;
 // src/components/InfiniteTable/hooks/useComputed.ts
 var import_react19 = __toModule(require("react"));
 
-// src/components/InfiniteTable/hooks/useColumnAggregations.ts
-var import_react12 = __toModule(require("react"));
-
-// src/components/DataSource/publicHooks/useDataSourceActions.ts
-var React3 = __toModule(require("react"));
-
-// src/components/DataSource/DataSourceContext.ts
-var React2 = __toModule(require("react"));
-var DSContext;
-function getDataSourceContext() {
-  if (DSContext) {
-    return DSContext;
-  }
-  return DSContext = React2.createContext({
-    getState: () => null,
-    componentState: null,
-    componentActions: null
-  });
-}
-
-// src/components/DataSource/publicHooks/useDataSourceActions.ts
-function useDataSourceActions() {
-  const DataSourceContext = getDataSourceContext();
-  const contextValue = React3.useContext(DataSourceContext);
-  return contextValue.componentActions;
-}
-
 // src/components/hooks/useComponentState.tsx
-var React4 = __toModule(require("react"));
+var React2 = __toModule(require("react"));
 var import_react11 = __toModule(require("react"));
 
 // src/utils/proxyFnCall.ts
@@ -1706,7 +1740,7 @@ function getComponentStateContext() {
   }
   return ComponentContext = (0, import_react11.createContext)(null);
 }
-function getReducerActions(dispatch, getState, getProps, propsToForward, allowedControlledPropOverrides) {
+function getReducerGeneratedActions(dispatch, getState, getProps, propsToForward, allowedControlledPropOverrides, interceptedActions) {
   const state = getState();
   return Object.keys(state).reduce((actions, stateKey) => {
     const key = stateKey;
@@ -1718,6 +1752,9 @@ function getReducerActions(dispatch, getState, getProps, propsToForward, allowed
         return;
       }
       notifyChange(props, stateKey, value);
+      if (interceptedActions && typeof interceptedActions[key] === "function") {
+        interceptedActions[key](value, { actions, state: state2 });
+      }
       const forwardFn = propsToForward[key];
       if (typeof forwardFn === "function") {
         value = forwardFn(value);
@@ -1755,7 +1792,7 @@ function forwardProps2(propsToForward, props) {
   return mappedState;
 }
 function getComponentStateRoot(config) {
-  return React4.memo(function ComponentStateRoot(props) {
+  return React2.memo(function ComponentStateRoot(props) {
     var _a, _b;
     const propsToStateSetRef = (0, import_react11.useRef)(new Set());
     const propsToForward = (0, import_react11.useMemo)(() => config.forwardProps ? config.forwardProps() : {}, []);
@@ -1830,7 +1867,7 @@ function getComponentStateRoot(config) {
     const getComponentState = useLatest(state);
     const { allowedControlledPropOverrides } = config;
     const actions = (0, import_react11.useMemo)(() => {
-      const generatedActions = getReducerActions(dispatch, getComponentState, getProps, propsToForward, allowedControlledPropOverrides);
+      const generatedActions = getReducerGeneratedActions(dispatch, getComponentState, getProps, propsToForward, allowedControlledPropOverrides, config.interceptActions);
       return generatedActions;
     }, [
       dispatch,
@@ -1860,7 +1897,7 @@ function getComponentStateRoot(config) {
         if (oldValue === newValue) {
           continue;
         }
-        if (isControlled(key, props)) {
+        if (isControlled(key, props) || isControlled(key, prevProps)) {
           if (propsToForward.hasOwnProperty(k)) {
             let valueToSet = newValue;
             const forwardFn = propsToForward[k];
@@ -1890,61 +1927,47 @@ function getComponentStateRoot(config) {
         });
       }
     });
-    return /* @__PURE__ */ React4.createElement(Context.Provider, {
+    return /* @__PURE__ */ React2.createElement(Context.Provider, {
       value: contextValue
     }, props.children);
   });
 }
 function useComponentState() {
   const Context = getComponentStateContext();
-  return React4.useContext(Context);
+  return React2.useContext(Context);
 }
 
-// src/components/InfiniteTable/hooks/useColumnAggregations.ts
-function useColumnAggregations() {
-  const {
-    componentState: { columnAggregations },
-    getComponentState
-  } = useComponentState();
-  const dataSourceActions = useDataSourceActions();
-  (0, import_react12.useEffect)(() => {
-    function updateDataSourceAggregations() {
-      const reducers = [];
-      const componentState = getComponentState();
-      columnAggregations.forEach((aggregator, key) => {
-        var _a;
-        const colField = (_a = componentState.computedColumns.get(key)) == null ? void 0 : _a.field;
-        const newAggregator = __spreadValues({
-          getter: (data) => colField ? data[colField] : data
-        }, aggregator);
-        reducers.push(newAggregator);
-      });
-      dataSourceActions.aggregationReducers = reducers;
-    }
-    updateDataSourceAggregations();
-    return interceptMap(columnAggregations, {
-      clear: updateDataSourceAggregations,
-      delete: updateDataSourceAggregations,
-      set: updateDataSourceAggregations
-    });
-  }, [columnAggregations]);
+// src/components/DataSource/publicHooks/useDataSource.ts
+var React4 = __toModule(require("react"));
+
+// src/components/DataSource/DataSourceContext.ts
+var React3 = __toModule(require("react"));
+var DSContext;
+function getDataSourceContext() {
+  if (DSContext) {
+    return DSContext;
+  }
+  return DSContext = React3.createContext({
+    getState: () => null,
+    componentState: null,
+    componentActions: null
+  });
 }
 
 // src/components/DataSource/publicHooks/useDataSource.ts
-var React5 = __toModule(require("react"));
 function useDataSource() {
   const DataSourceContext = getDataSourceContext();
-  const contextValue = React5.useContext(DataSourceContext);
+  const contextValue = React4.useContext(DataSourceContext);
   return contextValue.componentState;
 }
 function useDataSourceContextValue() {
   const DataSourceContext = getDataSourceContext();
-  const contextValue = React5.useContext(DataSourceContext);
+  const contextValue = React4.useContext(DataSourceContext);
   return contextValue;
 }
 
 // src/components/InfiniteTable/hooks/useColumnGroups.ts
-var import_react13 = __toModule(require("react"));
+var import_react12 = __toModule(require("react"));
 function useColumnGroups() {
   const {
     componentState: {
@@ -1954,7 +1977,7 @@ function useColumnGroups() {
     componentActions,
     getComponentState
   } = useComponentState();
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const recompute = () => {
       componentActions.columnGroupsDepthsMap = computeColumnGroupsDepths(computedColumnGroups);
     };
@@ -1965,7 +1988,7 @@ function useColumnGroups() {
       set: update
     });
   }, [computedColumnGroups]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     return interceptMap(collapsedColumnGroups, {
       set: (key, visibleCol) => {
         const colIds = key.slice(1);
@@ -2000,38 +2023,25 @@ function useColumnGroups() {
 var import_react18 = __toModule(require("react"));
 
 // src/components/InfiniteTable/state/getComputedPivotColumnsFromDataSourcePivotColumns.tsx
-var React7 = __toModule(require("react"));
+var React6 = __toModule(require("react"));
 
 // src/utils/join.ts
 var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
-var React6 = __toModule(require("react"));
-var import_react14 = __toModule(require("react"));
+var React5 = __toModule(require("react"));
+var import_react13 = __toModule(require("react"));
 
-// src/components/InfiniteTable/utilities.css.ts
-var alignItems = { center: "_16lm1iw11", stretch: "_16lm1iw12" };
-var cssEllipsisClassName = "_16lm1iw1a _16lm1iw1b _16lm1iw16";
-var cursor = { pointer: "_16lm1iwb" };
-var display = { flex: "_16lm1iwj", block: "_16lm1iwk", inlineBlock: "_16lm1iwl" };
-var fill = { currentColor: "_16lm1iw5", accentColor: "_16lm1iw6" };
-var flex = { "1": "_16lm1iwc", none: "_16lm1iwd" };
-var flexFlow = { column: "_16lm1iwz", row: "_16lm1iw10" };
-var justifyContent = { center: "_16lm1iw13", start: "_16lm1iw14", end: "_16lm1iw15" };
-var left = { "0": "_16lm1iwt", "100%": "_16lm1iwu" };
-var position = { relative: "_16lm1iw1", absolute: "_16lm1iw2", sticky: "_16lm1iw3", fixed: "_16lm1iw4" };
-var top = { "0": "_16lm1iwr", "100%": "_16lm1iws" };
-var transform = { translateZero: "_16lm1iw9", rotate90: "_16lm1iwa" };
-var transformTranslateZero = "_16lm1iw8";
-var userSelect = { none: "_16lm1iwm" };
-var willChange = { transform: "_16lm1iw19" };
-var zIndex = { "1": "_16lm1iwe", "10": "_16lm1iwf", "1000": "_16lm1iwg", "10000": "_16lm1iwh", "100000": "_16lm1iwi" };
+// src/components/InfiniteTable/components/icons/ExpanderIcon.css.ts
+var import_createRuntimeFn = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var ExpanderIconCls = "_16lm1iw6 _16lm1iwd _16lm1iwb";
+var ExpanderIconClsVariants = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "", variantClassNames: { expanded: { true: "_16lm1iwa", false: "_198z9782" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
 function ExpanderIcon(props) {
   var _a;
   const { size = 24 } = props;
-  const [expanded, setExpanded] = (0, import_react14.useState)((_a = props.expanded) != null ? _a : props.defaultExpanded);
+  const [expanded, setExpanded] = (0, import_react13.useState)((_a = props.expanded) != null ? _a : props.defaultExpanded);
   const onClick = () => {
     var _a2;
     (_a2 = props.onChange) == null ? void 0 : _a2.call(props, !expanded);
@@ -2039,12 +2049,12 @@ function ExpanderIcon(props) {
       setExpanded(!expanded);
     }
   };
-  React6.useEffect(() => {
+  React5.useEffect(() => {
     if (isControlled("expanded", props)) {
       setExpanded(props.expanded);
     }
   }, [props.expanded]);
-  return /* @__PURE__ */ React6.createElement("svg", {
+  return /* @__PURE__ */ React5.createElement("svg", {
     "data-name": "expander-icon",
     xmlns: "http://www.w3.org/2000/svg",
     height: `${size}px`,
@@ -2052,18 +2062,37 @@ function ExpanderIcon(props) {
     width: `${size}px`,
     style: props.style,
     onClick,
-    className: join(props.className, fill.accentColor, flex.none, cursor.pointer, expanded ? fill.accentColor : "", expanded ? transform.rotate90 : "", "InfiniteIcon", "InfiniteIcon-expander", `InfiniteIcon-expander--${expanded ? "expanded" : "collapsed"}`)
-  }, /* @__PURE__ */ React6.createElement("path", {
+    className: join(props.className, ExpanderIconCls, ExpanderIconClsVariants({
+      expanded
+    }), "InfiniteIcon", "InfiniteIcon-expander", `InfiniteIcon-expander--${expanded ? "expanded" : "collapsed"}`)
+  }, /* @__PURE__ */ React5.createElement("path", {
     d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
   }));
 }
 
 // src/components/InfiniteTable/components/InfiniteTableRow/row.css.ts
-var import_createRuntimeFn = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var import_createRuntimeFn2 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var GroupRowExpanderCls = "_7pupv0b";
-var RowClsRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_7pupv00", variantClassNames: { zebra: { false: "_7pupv02", even: "_7pupv03", odd: "_7pupv04" }, groupRow: { true: "_7pupv05", false: "_7pupv06" }, inlineGroupRow: { true: "_7pupv07", false: "_7pupv08" }, showHoverRows: { true: "_7pupv09", false: "_7pupv0a" } }, defaultVariants: {}, compoundVariants: [] });
+var RowClsRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_7pupv00", variantClassNames: { zebra: { false: "_7pupv02", even: "_7pupv03", odd: "_7pupv04" }, groupRow: { true: "_7pupv05", false: "_7pupv06" }, inlineGroupRow: { true: "_7pupv07", false: "_7pupv08" }, showHoverRows: { true: "_7pupv09", false: "_7pupv0a" } }, defaultVariants: {}, compoundVariants: [] });
 var RowHoverCls = "_7pupv01";
 
+// src/components/InfiniteTable/utilities.css.ts
+var alignItems = { center: "_16lm1iw11", stretch: "_16lm1iw12" };
+var cssEllipsisClassName = "_16lm1iw1a _16lm1iw1b _16lm1iw16";
+var cursor = { pointer: "_16lm1iwb" };
+var display = { flex: "_16lm1iwj", block: "_16lm1iwk", inlineBlock: "_16lm1iwl" };
+var flex = { "1": "_16lm1iwc", none: "_16lm1iwd" };
+var flexFlow = { column: "_16lm1iwz", row: "_16lm1iw10" };
+var justifyContent = { center: "_16lm1iw13", start: "_16lm1iw14", end: "_16lm1iw15" };
+var left = { "0": "_16lm1iwt", "100%": "_16lm1iwu" };
+var position = { relative: "_16lm1iw1", absolute: "_16lm1iw2", sticky: "_16lm1iw3", fixed: "_16lm1iw4" };
+var top = { "0": "_16lm1iwr", "100%": "_16lm1iws" };
+var transform = { translateZero: "_16lm1iw9", rotate90: "_16lm1iwa" };
+var transformTranslateZero = "_16lm1iw8";
+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) {
@@ -2073,7 +2102,7 @@ function getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, params)
     pivotColumn,
     pivotRowLabelsColumn,
     pivotBy,
-    groupRowsBy,
+    groupBy,
     pivotTotalColumnPosition,
     toggleGroupRow
   } = params;
@@ -2090,7 +2119,7 @@ function getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, params)
           column = __spreadValues(__spreadValues({}, column), pivotColumn({
             column,
             pivotBy,
-            groupRowsBy
+            groupBy
           }));
         } else {
           column = __spreadValues(__spreadValues({}, column), pivotColumn);
@@ -2102,7 +2131,7 @@ function getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, params)
           column = __spreadValues(__spreadValues({}, column), pivotRowLabelsColumn({
             column,
             pivotBy,
-            groupRowsBy
+            groupBy
           }));
         } else {
           column = __spreadValues(__spreadValues({}, column), pivotRowLabelsColumn);
@@ -2111,19 +2140,19 @@ function getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, params)
       if (!column.render) {
         column.render = (renderOptions) => {
           var _a;
-          let { value, rowInfo, column: column2, groupRowsBy: groupRowsBy2 } = renderOptions;
+          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) < groupRowsBy2.length;
-          return /* @__PURE__ */ React7.createElement("div", {
+          const showExpanderIcon = (((_a = rowInfo.groupKeys) == null ? void 0 : _a.length) || 0) < groupBy2.length;
+          return /* @__PURE__ */ React6.createElement("div", {
             className: join(display.flex, alignItems.center, GroupRowExpanderCls)
-          }, showExpanderIcon ? /* @__PURE__ */ React7.createElement(ExpanderIcon, {
+          }, showExpanderIcon ? /* @__PURE__ */ React6.createElement(ExpanderIcon, {
             expanded: !rowInfo.collapsed,
             onChange: () => {
               toggleGroupRow(rowInfo.groupKeys);
             }
-          }) : null, /* @__PURE__ */ React7.createElement("div", {
+          }) : null, /* @__PURE__ */ React6.createElement("div", {
             className: cssEllipsisClassName
           }, value != null ? value : null));
         };
@@ -2140,7 +2169,7 @@ function getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, params)
 }
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
-var React8 = __toModule(require("react"));
+var React7 = __toModule(require("react"));
 function getGroupColumnRender({
   groupIndexForColumn,
   groupRenderStrategy,
@@ -2173,14 +2202,14 @@ function getGroupColumnRender({
         return null;
       }
     }
-    return /* @__PURE__ */ React8.createElement("div", {
+    return /* @__PURE__ */ React7.createElement("div", {
       className: join(display.flex, alignItems.center)
-    }, /* @__PURE__ */ React8.createElement(ExpanderIcon, {
+    }, /* @__PURE__ */ React7.createElement(ExpanderIcon, {
       expanded: !collapsed,
       onChange: () => {
         toggleGroupRow(groupKeys);
       }
-    }), /* @__PURE__ */ React8.createElement("div", {
+    }), /* @__PURE__ */ React7.createElement("div", {
       className: cssEllipsisClassName
     }, value != null ? value : null));
   };
@@ -2213,7 +2242,7 @@ function getColumnForGroupBy(options, toggleGroupRow, groupColumnFromProps) {
 function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
   let generatedGroupColumn = {
     header: `Group`,
-    groupByField: options.groupRowsBy.map((g) => g.field),
+    groupByField: options.groupBy.map((g) => g.field),
     sortable: false,
     render: (renderOptions) => {
       let { value, rowInfo, column } = renderOptions;
@@ -2223,14 +2252,14 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
       if (column.renderValue) {
         value = column.renderValue(renderOptions);
       }
-      return /* @__PURE__ */ React8.createElement("div", {
+      return /* @__PURE__ */ React7.createElement("div", {
         className: join(display.flex, alignItems.center, GroupRowExpanderCls)
-      }, /* @__PURE__ */ React8.createElement(ExpanderIcon, {
+      }, /* @__PURE__ */ React7.createElement(ExpanderIcon, {
         expanded: !rowInfo.collapsed,
         onChange: () => {
           toggleGroupRow(rowInfo.groupKeys);
         }
-      }), /* @__PURE__ */ React8.createElement("div", {
+      }), /* @__PURE__ */ React7.createElement("div", {
         className: cssEllipsisClassName
       }, value != null ? value : null));
     }
@@ -2249,64 +2278,233 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
 var import_react17 = __toModule(require("react"));
 
 // src/components/DataSource/index.tsx
-var React9 = __toModule(require("react"));
+var React8 = __toModule(require("react"));
 
-// src/components/DataSource/privateHooks/useLoadData.ts
-var import_react15 = __toModule(require("react"));
+// src/utils/multisort/sortTypes.ts
+var numberComparator = function(first, second) {
+  return first - second;
+};
+var stringComparator = function(first, second) {
+  first = `${first}`;
+  second = `${second}`;
+  return first.localeCompare(second);
+};
+var sortTypes = {
+  number: numberComparator,
+  string: stringComparator
+};
+var sortTypes_default = sortTypes;
 
-// src/components/DataSource/privateHooks/buildDataSourceDataInfo.ts
-function buildDataSourceDataInfo(dataParam) {
-  let dataArray = [];
-  if (Array.isArray(dataParam.data)) {
-    dataArray = dataParam.data;
-  } else {
-    dataArray = dataParam;
+// src/utils/multisort/index.ts
+var multisort = (sortInfo, array, get) => {
+  array.sort(getMultisortFunction(sortInfo, get));
+  return array;
+};
+multisort.knownTypes = sortTypes_default;
+var getSingleSortFunction = (info) => {
+  if (!info) {
+    return;
   }
-  return {
-    originalDataArray: dataArray
+  const field = info.field;
+  var dir = info.dir < 0 ? -1 : info.dir > 0 ? 1 : 0;
+  if (!dir) {
+    return;
+  }
+  let fn = info.fn;
+  if (!fn && info.type) {
+    fn = multisort.knownTypes[info.type];
+    if (!fn) {
+      console.warn(`Unknown sort type "${info.type}" - please pass one of ${Object.keys(multisort.knownTypes).join(", ")}`);
+    }
+  }
+  if (!fn) {
+    fn = sortTypes_default.string;
+  }
+  return (first, second) => {
+    const a = field ? first[field] : first;
+    const b = field ? second[field] : second;
+    return dir * fn(a, b);
   };
-}
-
-// src/components/DataSource/privateHooks/loadDataAsync.ts
-function loadDataAsync(data) {
-  return __async(this, null, function* () {
-    if (typeof data === "function") {
-      data = data();
+};
+var getSortFunctions = (sortInfo) => {
+  return sortInfo.map(getSingleSortFunction).filter((fn) => fn instanceof Function);
+};
+var getMultisortFunction = (sortInfo, get) => {
+  const fns = getSortFunctions(sortInfo);
+  return (first, second) => {
+    if (get) {
+      first = get(first);
+      second = get(second);
     }
-    return buildDataSourceDataInfo(yield data);
-  });
+    let result = 0;
+    let i = 0;
+    let fn;
+    const len = fns.length;
+    for (; i < len; i++) {
+      fn = fns[i];
+      if (!fn) {
+        continue;
+      }
+      result = fn(first, second);
+      if (result !== 0) {
+        return result;
+      }
+    }
+    return result;
+  };
+};
+
+// src/components/DataSource/privateHooks/useLoadData.ts
+var import_react15 = __toModule(require("react"));
+
+// src/components/hooks/useEffectWithChanges.ts
+var import_react14 = __toModule(require("react"));
+function useEffectWithChanges(fn, deps) {
+  const prevRef = (0, import_react14.useRef)({});
+  const oldValuesRef = (0, import_react14.useRef)({});
+  const oldValues = oldValuesRef.current;
+  const changesRef = (0, import_react14.useRef)({});
+  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;
+  (0, import_react14.useEffect)(() => {
+    const changes2 = changesRef.current;
+    const result = fn(changes2, oldValues);
+    changesRef.current = {};
+    oldValuesRef.current = {};
+    return result;
+  }, useEffectDeps);
 }
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-function buildDataSourceInfo(data) {
-  return { originalDataArray: data };
+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();
-  const loadData = (data2) => {
-    let dataSourceInfo = {
-      originalDataArray: []
-    };
-    if (typeof data2 === "function") {
-      data2 = data2();
-    }
-    if (Array.isArray(data2)) {
-      dataSourceInfo = buildDataSourceInfo(data2);
-      actions.originalDataArray = dataSourceInfo.originalDataArray;
-    } else {
-      actions.loading = true;
-      loadDataAsync(data2).then((dataSourceInfo2) => {
-        actions.originalDataArray = dataSourceInfo2.originalDataArray;
-        actions.loading = false;
-      });
-    }
-  };
   (0, import_react15.useLayoutEffect)(() => {
-    loadData(data);
+    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] = (0, import_react15.useState)({
+    vertical: false,
+    horizontal: false
+  });
+  const scrollbarsRef = (0, import_react15.useRef)(scrollbars);
+  (0, import_react15.useEffect)(() => {
+    notifyScrollbarsChange.onChange((scrollbars2) => {
+      if (!scrollbars2) {
+        return;
+      }
+      scrollbarsRef.current = scrollbars2;
+      setScrollbars(scrollbars2);
+    });
+    return () => notifyScrollbarsChange.destroy();
+  }, [notifyScrollbarsChange]);
+  const [cursorId, updateCursorId] = (0, import_react15.useState)(void 0);
+  (0, import_react15.useEffect)(() => {
+    const frameId = requestAnimationFrame(() => {
+      var _a;
+      if (!((_a = scrollbarsRef.current) == null ? void 0 : _a.vertical)) {
+        updateCursorId(livePaginationCursor);
+      }
+    });
+    return () => cancelAnimationFrame(frameId);
+  }, [livePaginationCursor]);
+  (0, import_react15.useEffect)(() => {
+    const { livePaginationCursor: livePaginationCursor2, livePagination } = getComponentState();
+    if (!scrollbars.vertical && livePagination) {
+      updateCursorId(livePaginationCursor2);
+    }
+  }, [scrollbars.vertical]);
+  (0, import_react15.useEffect)(() => {
+    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
@@ -2360,9 +2558,9 @@ var DeepMap = class {
         if (!pair) {
           return;
         }
-        const { map } = pair;
+        const { map: map2 } = pair;
         const keys = [...parentKeys, key];
-        const next = map ? () => this.visitWithNext(keys, fn, map) : void 0;
+        const next = map2 ? () => this.visitWithNext(keys, fn, map2) : void 0;
         if (pair.hasOwnProperty("value")) {
           fn(pair.value, keys, i, next);
           i++;
@@ -2378,6 +2576,13 @@ var DeepMap = class {
       });
     }
   }
+  static clone(map2) {
+    const clone = new DeepMap();
+    map2.visit((pair, keys) => {
+      clone.set(keys, pair.value);
+    });
+    return clone;
+  }
   set(keys, value) {
     let currentMap = this.map;
     if (!keys.length) {
@@ -2428,14 +2633,14 @@ var DeepMap = class {
     return this.length;
   }
   clear() {
-    const clearMap = (map) => {
-      map.forEach((value, _key) => {
-        const { map: map2 } = value;
-        if (map2) {
-          clearMap(map2);
+    const clearMap = (map2) => {
+      map2.forEach((value, _key) => {
+        const { map: map3 } = value;
+        if (map3) {
+          clearMap(map3);
         }
       });
-      map.clear();
+      map2.clear();
     };
     clearMap(this.map);
     this.length = 0;
@@ -2480,9 +2685,9 @@ var DeepMap = class {
       }
     }
     while (maps.length) {
-      let map = maps.pop();
+      let map2 = maps.pop();
       let key = keys.pop();
-      if (key && (map == null ? void 0 : map.size) === 0) {
+      if (key && (map2 == null ? void 0 : map2.size) === 0) {
         let parentMap = maps[maps.length - 1];
         let pair = parentMap == null ? void 0 : parentMap.get(key);
         if (pair) {
@@ -2521,12 +2726,12 @@ var DeepMap = class {
     if (!pair) {
       return;
     }
-    const { map } = pair;
+    const { map: map2 } = pair;
     const keys = [...parentKeys, key];
     const next = once(() => {
-      if (map) {
-        map.forEach((_, k) => {
-          this.visitKey(k, map, keys, fn);
+      if (map2) {
+        map2.forEach((_, k) => {
+          this.visitKey(k, map2, keys, fn);
         });
       }
     });
@@ -2692,14 +2897,69 @@ var GroupRowsState = class {
   }
 };
 
+// src/utils/shallowEqualObjects.ts
+function shallowEqualObjects(objA, objB) {
+  if (objA === objB) {
+    return true;
+  }
+  if (!objA || !objB) {
+    return false;
+  }
+  var aKeys = Object.keys(objA);
+  var bKeys = Object.keys(objB);
+  var len = aKeys.length;
+  if (bKeys.length !== len) {
+    return false;
+  }
+  for (var i = 0; i < len; i++) {
+    var key = aKeys[i];
+    if (objA[key] !== objB[key] || !Object.prototype.hasOwnProperty.call(objB, key)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+// src/components/utils/discardCallsWithEqualArg.ts
+var map = new WeakMap();
+var getCompareDefault = (a) => a;
+function discardCallsWithEqualArg(fn, timeframe = 50, getCompareObject2) {
+  map.set(fn, {
+    lastCallTime: 0,
+    lastCallArg: null
+  });
+  const getCompare = getCompareObject2 != null ? getCompareObject2 : getCompareDefault;
+  return (arg) => {
+    const { lastCallTime, lastCallArg } = map.get(fn) || {
+      lastCallTime: 0,
+      lastCallArg: null
+    };
+    const now = Date.now();
+    const diff = now - lastCallTime;
+    const objectsEqual = shallowEqualObjects(getCompare(lastCallArg), getCompare(arg));
+    if (diff < timeframe && objectsEqual) {
+      return;
+    }
+    map.set(fn, {
+      lastCallTime: now,
+      lastCallArg: arg
+    });
+    fn(arg);
+  };
+}
+
 // src/components/DataSource/state/getInitialState.ts
 function initSetupState2() {
   const now = Date.now();
   const originalDataArray = [];
   const dataArray = [];
   return {
+    dataParams: void 0,
+    notifyScrollbarsChange: buildSubscriptionCallback(),
     pivotTotalColumnPosition: "end",
     originalDataArray,
+    scrollBottomId: Symbol("scrollBottomId"),
+    showSeparatePivotColumnForSingleAggregation: false,
     pivotColumns: void 0,
     pivotColumnGroups: void 0,
     dataArray,
@@ -2708,7 +2968,6 @@ function initSetupState2() {
     sortedAt: 0,
     reducedAt: now,
     generateGroupRows: true,
-    aggregationReducers: void 0,
     groupDeepMap: void 0,
     postSortDataArray: void 0,
     postGroupDataArray: void 0,
@@ -2716,15 +2975,23 @@ function initSetupState2() {
     lastGroupDataArray: void 0
   };
 }
+function getCompareObject(dataParams) {
+  const obj = __spreadValues({}, dataParams);
+  delete obj.originalDataArray;
+  return obj;
+}
 var forwardProps3 = () => {
   return {
-    remoteCount: 1,
+    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),
-    groupRowsBy: (groupRowsBy) => groupRowsBy != null ? groupRowsBy : [],
+    groupBy: (groupBy) => groupBy != null ? groupBy : [],
     groupRowsState: (groupRowsState) => {
       return groupRowsState || new GroupRowsState({
         expandedRows: true,
@@ -2734,10 +3001,20 @@ var forwardProps3 = () => {
   };
 };
 function mapPropsToState2(params) {
-  var _a;
   const { props } = params;
+  const controlledSort = isControlledValue(props.sortInfo);
+  return {
+    controlledSort,
+    multiSort: Array.isArray(controlledSort ? props.sortInfo : props.defaultSortInfo)
+  };
+}
+function getInterceptActions() {
   return {
-    multiSort: Array.isArray((_a = props.sortInfo) != null ? _a : props.defaultSortInfo)
+    sortInfo: (sortInfo, { actions, state }) => {
+      const dataParams = buildDataSourceDataParams(state);
+      dataParams.sortInfo = sortInfo;
+      actions.dataParams = dataParams;
+    }
   };
 }
 
@@ -2746,19 +3023,28 @@ function DEFAULT_TO_KEY(value) {
   return value;
 }
 function initReducers(reducers) {
-  if (!reducers || !reducers.length) {
-    return [];
+  if (!reducers || !Object.keys(reducers).length) {
+    return {};
   }
-  return reducers.map((reducer) => reducer.initialValue);
+  const result = {};
+  for (let key in reducers)
+    if (reducers.hasOwnProperty(key)) {
+      result[key] = reducers[key].initialValue;
+    }
+  return result;
 }
 function computeReducersFor(data, reducers, reducerResults) {
-  if (!reducers || !reducers.length) {
+  var _a, _b;
+  if (!reducers || !Object.keys(reducers).length) {
     return;
   }
-  reducers.forEach((reducer, index) => {
-    const currentValue = reducerResults[index];
-    reducerResults[index] = reducer.reducer(currentValue, reducer.getter(data), data);
-  });
+  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 {
@@ -2773,7 +3059,7 @@ function group(groupParams, data) {
   let currentGroupKeys = [];
   let currentPivotKeys = [];
   const initialReducerValue = initReducers(reducers);
-  const globalReducerResults = [...initialReducerValue];
+  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++) {
@@ -2783,7 +3069,7 @@ function group(groupParams, data) {
       if (!deepMap.has(currentGroupKeys)) {
         const deepMapGroupValue = {
           items: [],
-          reducerResults: [...initialReducerValue]
+          reducerResults: __spreadValues({}, initialReducerValue)
         };
         if (pivot) {
           deepMapGroupValue.pivotDeepMap = new DeepMap();
@@ -2807,7 +3093,7 @@ function group(groupParams, data) {
           if (!pivotDeepMap.has(currentPivotKeys)) {
             topLevelPivotColumns.set(currentPivotKeys, true);
             pivotDeepMap == null ? void 0 : pivotDeepMap.set(currentPivotKeys, {
-              reducerResults: [...initialReducerValue],
+              reducerResults: __spreadValues({}, initialReducerValue),
               items: []
             });
           }
@@ -2869,11 +3155,23 @@ function flatten(groupResult) {
   return result;
 }
 function getEnhancedGroupData(options, deepMapValue) {
-  const { groupBy, groupKeys, collapsed, parents } = options;
+  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: null,
+    data,
     groupCount: groupItems.length,
     groupData: groupItems,
     groupKeys,
@@ -2895,17 +3193,25 @@ function getEnhancedGroupData(options, deepMapValue) {
   return enhancedGroupData;
 }
 function completeReducers(reducers, reducerResults, items) {
-  if (reducers && reducers.length) {
-    reducers == null ? void 0 : reducers.forEach((reducer, index) => {
-      if (reducer.done) {
-        reducerResults[index] = reducer.done(reducerResults[index], 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 } = param;
+  const {
+    groupResult,
+    toPrimaryKey,
+    groupRowsState,
+    generateGroupRows,
+    reducers = {}
+  } = param;
   const { groupParams, deepMap, pivot } = groupResult;
   const { groupBy } = groupParams;
   const groupByStrings = groupBy.map((g) => g.field);
@@ -2920,6 +3226,7 @@ function enhancedFlatten(param) {
     const enhancedGroupData = getEnhancedGroupData({
       groupBy: groupByStrings,
       parents: Array.from(parents),
+      reducers,
       indexInGroup,
       indexInParentGroups: Array.from(indexInParentGroups),
       indexInAll: result.length,
@@ -2936,121 +3243,81 @@ function enhancedFlatten(param) {
         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/utils/multisort/sortTypes.ts
-var sortTypes = {
-  number: function(first, second) {
-    return first - second;
-  },
-  string: function(first, second) {
-    first = `${first}`;
-    second = `${second}`;
-    return first.localeCompare(second);
-  }
-};
-var sortTypes_default = sortTypes;
-
-// src/utils/multisort/index.ts
-var multisort = (sortInfo, array, get) => {
-  array.sort(getMultisortFunction(sortInfo, get));
-  return array;
-};
-multisort.knownTypes = sortTypes_default;
-var getSingleSortFunction = (info) => {
-  if (!info) {
-    return;
-  }
-  const field = info.field;
-  var dir = info.dir < 0 ? -1 : info.dir > 0 ? 1 : 0;
-  if (!dir) {
-    return;
-  }
-  let fn = info.fn;
-  if (!fn && info.type) {
-    fn = multisort.knownTypes[info.type];
-    if (!fn) {
-      console.warn(`Unknown sort type "${info.type}" - please pass one of ${Object.keys(multisort.knownTypes).join(", ")}`);
-    }
-  }
-  if (!fn) {
-    fn = sortTypes_default.string;
-  }
-  return (first, second) => {
-    const a = field ? first[field] : first;
-    const b = field ? second[field] : second;
-    return dir * fn(a, b);
-  };
-};
-var getSortFunctions = (sortInfo) => {
-  return sortInfo.map(getSingleSortFunction).filter((fn) => fn instanceof Function);
-};
-var getMultisortFunction = (sortInfo, get) => {
-  const fns = getSortFunctions(sortInfo);
-  return (first, second) => {
-    if (get) {
-      first = get(first);
-      second = get(second);
-    }
-    let result = 0;
-    let i = 0;
-    let fn;
-    const len = fns.length;
-    for (; i < len; i++) {
-      fn = fns[i];
-      if (!fn) {
-        continue;
-      }
-      result = fn(first, second);
-      if (result !== 0) {
-        return result;
+    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();
       }
     }
-    return result;
+    parents.pop();
+    indexInParentGroups.pop();
+  });
+  return {
+    data: result
   };
-};
+}
 
 // src/utils/groupAndPivot/getPivotColumnsAndColumnGroups.ts
-function getPivotColumnsAndColumnGroups(deepMap, pivotBy, pivotTotalColumnPosition) {
+function prepareColumn(column) {
+  const { pivotByAtIndex: pivotByForColumn } = column;
+  if (pivotByForColumn.column) {
+    if (typeof pivotByForColumn.column === "function") {
+      Object.assign(column, pivotByForColumn.column({ column }));
+    } else {
+      Object.assign(column, pivotByForColumn.column);
+    }
+  }
+  return column;
+}
+function prepareColumnGroup(columnGroup) {
+  const { pivotByAtIndex: pivotByForColumnGroup } = columnGroup;
+  if (pivotByForColumnGroup.columnGroup) {
+    if (typeof pivotByForColumnGroup.columnGroup === "function") {
+      Object.assign(columnGroup, pivotByForColumnGroup.columnGroup({ columnGroup }));
+    } else {
+      Object.assign(columnGroup, pivotByForColumnGroup.columnGroup);
+    }
+  }
+  return columnGroup;
+}
+function getPivotColumnsAndColumnGroups({
+  deepMap,
+  pivotBy,
+  pivotTotalColumnPosition,
+  reducers = {},
+  showSeparatePivotColumnForSingleAggregation = false
+}) {
   const pivotLength = pivotBy.length;
+  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;
@@ -3060,72 +3327,104 @@ function getPivotColumnsAndColumnGroups(deepMap, pivotBy, pivotTotalColumnPositi
     ]
   ]);
   const columnGroups = new Map();
+  const isSingleAggregationColumn = !showSeparatePivotColumnForSingleAggregation && aggregationReducers.length === 1;
   deepMap.visitDepthFirst((_value, keys, _indexInGroup, next) => {
     keys = [...keys];
     if (pivotTotalColumnPosition === "end") {
       next == null ? void 0 : next();
     }
     if (keys.length === pivotLength) {
-      const parentKeys = keys.slice(0, -1);
-      let columnGroupId = parentKeys.join("/");
       const pivotByForColumn = pivotBy[keys.length - 1];
-      let computedPivotColumn = __spreadValues({
-        pivotBy,
-        pivotColumn: true,
-        pivotGroupKeys: keys,
-        pivotGroupKeyForColumn: keys[keys.length - 1],
-        pivotIndexForColumn: keys.length - 1,
-        pivotByForColumn,
-        sortable: false,
-        columnGroup: parentKeys.length ? `${columnGroupId}` : void 0,
-        header: keys[keys.length - 1],
-        valueGetter: ({ rowInfo }) => {
-          var _a, _b, _c;
-          const value = (_c = (_b = (_a = rowInfo.pivotValuesMap) == null ? void 0 : _a.get(keys)) == null ? void 0 : _b.reducerResults[0]) != null ? _c : null;
-          return value;
-        }
-      }, pivotByForColumn.column);
-      if (pivotByForColumn.column) {
-        if (typeof pivotByForColumn.column === "function") {
-          Object.assign(computedPivotColumn, pivotByForColumn.column({ column: computedPivotColumn }));
-        } else {
-          Object.assign(computedPivotColumn, pivotByForColumn.column);
-        }
-      }
-      columns.set(`${keys.join("/")}`, computedPivotColumn);
-    } else {
-      const colGroupId = keys.join("/");
       const parentKeys = keys.slice(0, -1);
-      columnGroups.set(colGroupId, {
-        columnGroup: parentKeys.length ? parentKeys.join("/") : void 0,
-        header: keys.join(" >> ")
-      });
-      if (pivotTotalColumnPosition !== false) {
-        const pivotByForColumn = pivotBy[keys.length - 1];
-        let computedPivotColumn = __spreadValues({
-          columnGroup: parentKeys.length ? parentKeys.join("/") : void 0,
-          header: `${keys.join("/")} total `,
-          pivotTotalColumn: true,
+      let parentColumnGroupId = parentKeys.join("/");
+      if (!isSingleAggregationColumn) {
+        const columnGroupId = parentColumnGroupId;
+        parentColumnGroupId = keys.join("/");
+        const pivotGroupKey = keys[keys.length - 1];
+        columnGroups.set(parentColumnGroupId, prepareColumnGroup({
+          header: pivotGroupKey,
+          columnGroup: columnGroupId,
+          pivotBy,
           pivotGroupKeys: keys,
-          pivotGroupKeyForColumn: keys[keys.length - 1],
-          pivotByForColumn,
-          pivotIndexForColumn: keys.length - 1,
+          pivotByAtIndex: pivotByForColumn,
+          pivotIndex: keys.length - 1,
+          pivotGroupKey
+        }));
+      }
+      aggregationReducers.forEach((reducer, index) => {
+        const header = isSingleAggregationColumn ? keys[keys.length - 1] : reducer.id;
+        const computedPivotColumn = prepareColumn({
           pivotBy,
+          pivotColumn: true,
+          pivotTotalColumn: false,
+          pivotAggregator: reducer,
+          pivotAggregatorIndex: index,
+          pivotGroupKeys: keys,
+          pivotGroupKey: keys[keys.length - 1],
+          pivotIndex: keys.length - 1,
+          pivotByAtIndex: pivotByForColumn,
           sortable: false,
+          columnGroup: parentColumnGroupId,
+          header,
           valueGetter: ({ rowInfo }) => {
-            var _a, _b, _c;
-            const value = (_c = (_b = (_a = rowInfo.pivotValuesMap) == null ? void 0 : _a.get(keys)) == null ? void 0 : _b.reducerResults[0]) != null ? _c : null;
-            return value;
-          }
-        }, pivotByForColumn.column);
-        if (pivotByForColumn.column) {
-          if (typeof pivotByForColumn.column === "function") {
-            Object.assign(computedPivotColumn, pivotByForColumn.column({ column: computedPivotColumn }));
-          } else {
-            Object.assign(computedPivotColumn, pivotByForColumn.column);
+            var _a, _b;
+            return (_b = (_a = rowInfo.pivotValuesMap) == null ? void 0 : _a.get(keys)) == null ? void 0 : _b.reducerResults[reducer.id];
           }
+        });
+        const columnId = `${keys.join("/")}-${reducer.id}`;
+        columns.set(columnId, computedPivotColumn);
+      });
+    } else {
+      const colGroupId = keys.join("/");
+      const parentKeys = keys.slice(0, -1);
+      columnGroups.set(colGroupId, prepareColumnGroup({
+        columnGroup: parentKeys.length ? parentKeys.join("/") : void 0,
+        header: keys[keys.length - 1],
+        pivotBy,
+        pivotGroupKeys: keys,
+        pivotIndex: keys.length - 1,
+        pivotByAtIndex: pivotBy[keys.length - 1],
+        pivotGroupKey: keys[keys.length - 1]
+      }));
+      if (pivotTotalColumnPosition !== false) {
+        const pivotByForColumn = pivotBy[keys.length - 1];
+        let columnGroupId = parentKeys.length ? parentKeys.join("/") : void 0;
+        if (!isSingleAggregationColumn) {
+          let parentGroupForTotalsGroup = columnGroupId;
+          columnGroupId = `total:${keys.join("/")}`;
+          columnGroups.set(columnGroupId, prepareColumnGroup({
+            header: `${keys[keys.length - 1]} total`,
+            columnGroup: parentGroupForTotalsGroup,
+            pivotBy,
+            pivotTotalColumnGroup: true,
+            pivotGroupKeys: keys,
+            pivotIndex: keys.length - 1,
+            pivotByAtIndex: pivotByForColumn,
+            pivotGroupKey: keys[keys.length - 1]
+          }));
         }
-        columns.set(`${keys.join("/")}-total`, computedPivotColumn);
+        aggregationReducers.forEach((reducer, index) => {
+          const header = isSingleAggregationColumn ? `${keys[keys.length - 1]} total ` : `${reducer.id} total`;
+          const computedPivotColumn = prepareColumn({
+            columnGroup: columnGroupId,
+            header,
+            pivotAggregator: reducer,
+            pivotAggregatorIndex: index,
+            pivotColumn: true,
+            pivotTotalColumn: true,
+            pivotGroupKeys: keys,
+            pivotGroupKey: keys[keys.length - 1],
+            pivotByAtIndex: pivotByForColumn,
+            pivotIndex: keys.length - 1,
+            pivotBy,
+            sortable: false,
+            valueGetter: ({ rowInfo }) => {
+              var _a, _b;
+              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);
+        });
       }
     }
     if (pivotTotalColumnPosition === "start" || pivotTotalColumnPosition === false) {
@@ -3135,9 +3434,12 @@ function getPivotColumnsAndColumnGroups(deepMap, pivotBy, pivotTotalColumnPositi
   if (columns.size === 1) {
     columns.set("single", {
       header: "Reduced",
+      pivotBy,
+      pivotColumn: true,
       valueGetter: ({ rowInfo }) => {
         var _a;
-        return (_a = rowInfo.reducerResults) == null ? void 0 : _a[0];
+        const key = Object.keys(rowInfo.reducerResults || {})[0];
+        return (_a = rowInfo.reducerResults) == null ? void 0 : _a[key];
       }
     });
   }
@@ -3161,29 +3463,37 @@ var haveDepsChanged = (state1, state2, deps) => {
   return false;
 };
 function toRowInfo(data, id, index) {
-  return { data, collapsed: true, id, indexInAll: index, indexInGroup: index };
+  return {
+    data,
+    collapsed: true,
+    id,
+    indexInAll: index,
+    indexInGroup: index,
+    isGroupRow: false
+  };
 }
 function concludeReducer(params) {
   var _a;
   const { state, previousState } = params;
   const sortInfo = state.sortInfo;
-  const shouldSort = !!(sortInfo == null ? void 0 : sortInfo.length);
+  const shouldSort = !!(sortInfo == null ? void 0 : sortInfo.length) && !state.controlledSort;
   const sortDepsChanged = haveDepsChanged(previousState, state, [
     "originalDataArray",
     "sortInfo"
   ]);
   const shouldSortAgain = shouldSort && (sortDepsChanged || !state.lastSortDataArray);
-  const groupBy = state.groupRowsBy;
+  const groupBy = state.groupBy;
   const pivotBy = state.pivotBy;
   const shouldGroup = groupBy.length || pivotBy;
   const groupsDepsChanged = haveDepsChanged(previousState, state, [
     "generateGroupRows",
     "originalDataArray",
-    "groupRowsBy",
+    "groupBy",
     "groupRowsState",
     "pivotBy",
     "aggregationReducers",
     "pivotTotalColumnPosition",
+    "showSeparatePivotColumnForSingleAggregation",
     "sortInfo"
   ]);
   const shouldGroupAgain = shouldGroup && (groupsDepsChanged || !state.lastGroupDataArray);
@@ -3209,13 +3519,20 @@ function concludeReducer(params) {
       }, dataArray);
       const flattenResult = enhancedFlatten({
         groupResult,
+        reducers: state.aggregationReducers,
         toPrimaryKey,
         groupRowsState: state.groupRowsState,
         generateGroupRows: state.generateGroupRows
       });
       rowInfoDataArray = flattenResult.data;
       state.groupDeepMap = groupResult.deepMap;
-      const pivotGroupsAndCols = pivotBy ? getPivotColumnsAndColumnGroups(groupResult.topLevelPivotColumns, pivotBy, (_a = state.pivotTotalColumnPosition) != null ? _a : "end") : void 0;
+      const pivotGroupsAndCols = pivotBy ? getPivotColumnsAndColumnGroups({
+        deepMap: groupResult.topLevelPivotColumns,
+        pivotBy,
+        pivotTotalColumnPosition: (_a = state.pivotTotalColumnPosition) != null ? _a : "end",
+        reducers: state.aggregationReducers,
+        showSeparatePivotColumnForSingleAggregation: state.showSeparatePivotColumnForSingleAggregation
+      }) : void 0;
       state.pivotColumns = pivotGroupsAndCols == null ? void 0 : pivotGroupsAndCols.columns;
       state.pivotColumnGroups = pivotGroupsAndCols == null ? void 0 : pivotGroupsAndCols.columnGroups;
     } else {
@@ -3237,7 +3554,9 @@ function concludeReducer(params) {
   }
   state.dataArray = rowInfoDataArray;
   state.reducedAt = now;
-  globalThis.state = state;
+  if (true) {
+    globalThis.state = state;
+  }
   return state;
 }
 
@@ -3254,13 +3573,14 @@ function DataSourceWithContext(props) {
   if (typeof children === "function") {
     children = children(computedValues);
   }
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, children);
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children);
 }
 var DataSourceRoot = getComponentStateRoot({
   initSetupState: initSetupState2,
   forwardProps: forwardProps3,
   concludeReducer,
-  mapPropsToState: mapPropsToState2
+  mapPropsToState: mapPropsToState2,
+  interceptActions: getInterceptActions()
 });
 function DataSourceCmp({ children }) {
   const DataSourceContext = getDataSourceContext();
@@ -3275,14 +3595,14 @@ function DataSourceCmp({ children }) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
-  return /* @__PURE__ */ React9.createElement(DataSourceContext.Provider, {
+  return /* @__PURE__ */ React8.createElement(DataSourceContext.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ React9.createElement(DataSourceWithContext, {
+  }, /* @__PURE__ */ React8.createElement(DataSourceWithContext, {
     children
   }));
 }
 function DataSource(props) {
-  return /* @__PURE__ */ React9.createElement(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ React9.createElement(DataSourceCmp, {
+  return /* @__PURE__ */ React8.createElement(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ React8.createElement(DataSourceCmp, {
     children: props.children
   }));
 }
@@ -3299,49 +3619,49 @@ function useToggleGroupRow() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-function useGroupRowsMap(groupRowsBy) {
-  const groupRowsMap = (0, import_react18.useMemo)(() => {
-    return groupRowsBy.reduce((acc, groupBy, index) => {
-      acc.set(groupBy.field, {
-        groupBy,
+function useGroupByMap(groupBy) {
+  const groupByMap = (0, import_react18.useMemo)(() => {
+    return groupBy.reduce((acc, groupBy2, index) => {
+      acc.set(groupBy2.field, {
+        groupBy: groupBy2,
         groupIndex: index
       });
       return acc;
     }, new Map());
-  }, [groupRowsBy]);
-  return groupRowsMap;
+  }, [groupBy]);
+  return groupByMap;
 }
 function useColumnsWhen() {
   const {
-    componentState: { groupRowsBy },
+    componentState: { groupBy },
     componentActions: dataSourceActions
   } = useDataSourceContextValue();
   const {
     componentState: { groupRenderStrategy, pivotTotalColumnPosition }
   } = useComponentState();
-  const groupRowsMap = useGroupRowsMap(groupRowsBy);
+  const groupByMap = useGroupByMap(groupBy);
   (0, import_react18.useEffect)(() => {
     dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
   }, [groupRenderStrategy]);
   (0, import_react18.useEffect)(() => {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
-  useColumnsWhenInlineGroupRenderStrategy(groupRowsMap);
+  useColumnsWhenInlineGroupRenderStrategy(groupByMap);
   useColumnsWhenPivoting();
   useColumnsWhenGrouping();
-  useHideEmptyGroupColumns(groupRowsMap);
+  useHideEmptyGroupColumns(groupByMap);
 }
-function useColumnsWhenInlineGroupRenderStrategy(groupRowsMap) {
+function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
   const toggleGroupRow = useToggleGroupRow();
   const {
     componentActions,
     componentState: { columns, groupRenderStrategy }
   } = useComponentState();
-  function computeColumnsWhenInlineGroupRenderStrategy(columns2, groupRowsMap2, groupRenderStrategy2, toggleGroupRow2) {
+  function computeColumnsWhenInlineGroupRenderStrategy(columns2, groupByMap2, groupRenderStrategy2, toggleGroupRow2) {
     const computedColumns = new Map();
     columns2.forEach((column, id) => {
       let base = {};
-      const groupByForColumn = groupRowsMap2.get(column.field);
+      const groupByForColumn = groupByMap2.get(column.field);
       if (groupByForColumn && groupRenderStrategy2 === "inline") {
         const { groupIndex } = groupByForColumn;
         const field = groupByForColumn.groupBy.field;
@@ -3388,7 +3708,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupRowsMap) {
   }
   (0, import_react18.useEffect)(() => {
     const update = () => {
-      componentActions.columnsWhenInlineGroupRenderStrategy = computeColumnsWhenInlineGroupRenderStrategy(columns, groupRowsMap, groupRenderStrategy, toggleGroupRow);
+      componentActions.columnsWhenInlineGroupRenderStrategy = computeColumnsWhenInlineGroupRenderStrategy(columns, groupByMap, groupRenderStrategy, toggleGroupRow);
     };
     update();
     return interceptMap(columns, {
@@ -3396,11 +3716,11 @@ function useColumnsWhenInlineGroupRenderStrategy(groupRowsMap) {
       delete: update,
       clear: update
     });
-  }, [columns, groupRowsMap, groupRenderStrategy, toggleGroupRow]);
+  }, [columns, groupByMap, groupRenderStrategy, toggleGroupRow]);
 }
 function useColumnsWhenPivoting() {
   const {
-    componentState: { groupRowsBy, pivotBy }
+    componentState: { groupBy, pivotBy }
   } = useDataSourceContextValue();
   const {
     componentActions,
@@ -3418,7 +3738,7 @@ function useColumnsWhenPivoting() {
       pivotRowLabelsColumn,
       pivotTotalColumnPosition,
       pivotBy,
-      groupRowsBy,
+      groupBy,
       toggleGroupRow
     });
     componentActions.computedPivotColumns = computedPivotColumns;
@@ -3426,7 +3746,7 @@ function useColumnsWhenPivoting() {
 }
 function useColumnsWhenGrouping() {
   const {
-    componentState: { groupRowsBy }
+    componentState: { groupBy }
   } = useDataSourceContextValue();
   const {
     componentActions,
@@ -3442,7 +3762,7 @@ function useColumnsWhenGrouping() {
         columns,
         groupColumn,
         groupRenderStrategy,
-        groupRowsBy,
+        groupBy,
         pivotColumns,
         toggleGroupRow
       });
@@ -3454,11 +3774,11 @@ function useColumnsWhenGrouping() {
       delete: update,
       clear: update
     });
-  }, [groupRowsBy, groupColumn, groupRenderStrategy, pivotColumns]);
+  }, [columns, groupBy, groupColumn, groupRenderStrategy, pivotColumns]);
 }
 function useHideEmptyGroupColumns(groupRowsMap) {
   const {
-    componentState: { groupRowsBy, groupRowsState },
+    componentState: { groupBy, groupRowsState },
     getState: getDataSourceState
   } = useDataSourceContextValue();
   const {
@@ -3471,10 +3791,10 @@ function useHideEmptyGroupColumns(groupRowsMap) {
     }
   } = useComponentState();
   (0, import_react18.useEffect)(() => {
-    if (groupRenderStrategy === "single-column") {
+    if (groupRenderStrategy !== "multi-column") {
       return;
     }
-    const groupsLength = groupRowsBy.length;
+    const groupsLength = groupBy.length;
     let expandedGroupsLevel = 0;
     const { dataArray } = getDataSourceState();
     const len = dataArray.length;
@@ -3490,15 +3810,15 @@ function useHideEmptyGroupColumns(groupRowsMap) {
     let updated = false;
     const columnVisibility = new Map(currentState.columnVisibility);
     const cols = computedColumns;
-    groupRowsBy.forEach(({ field }, index) => {
-      const colId = groupRenderStrategy === "multi-column" ? `group-by-${field}` : field;
-      const col = cols.get(colId);
+    groupBy.forEach(({ field, column: groupColumn }, index) => {
+      const colId = (groupColumn == null ? void 0 : groupColumn.id) || `group-by-${field}`;
+      let col = cols.get(colId);
       if (!col) {
         return;
       }
-      const shouldBeHidden = index > expandedGroupsLevel;
+      const shouldBeHidden = index > expandedGroupsLevel && hideEmptyGroupColumns;
       updated = true;
-      if (shouldBeHidden && hideEmptyGroupColumns) {
+      if (shouldBeHidden) {
         columnVisibility.set(colId, false);
       } else {
         columnVisibility.delete(colId);
@@ -3511,7 +3831,7 @@ function useHideEmptyGroupColumns(groupRowsMap) {
     getDataSourceState,
     groupRenderStrategy,
     generatedColumns,
-    groupRowsBy,
+    groupBy,
     groupRowsMap,
     hideEmptyGroupColumns ? groupRowsState : null,
     hideEmptyGroupColumns
@@ -3520,7 +3840,7 @@ function useHideEmptyGroupColumns(groupRowsMap) {
 function getColumnsWhenGrouping(params) {
   const {
     pivotColumns,
-    groupRowsBy,
+    groupBy,
     groupColumn,
     groupRenderStrategy,
     toggleGroupRow,
@@ -3534,21 +3854,23 @@ function getColumnsWhenGrouping(params) {
   }
   const computedColumns = new Map();
   if (groupRenderStrategy === "multi-column") {
-    groupRowsBy.forEach((groupByForColumn, groupIndexForColumn, arr) => {
-      computedColumns.set(`group-by-${groupByForColumn.field}`, getColumnForGroupBy({
+    groupBy.forEach((groupByForColumn, groupIndexForColumn, arr) => {
+      const generatedGroupColumn = getColumnForGroupBy({
         groupByForColumn,
-        groupRowsBy,
+        groupBy,
         groupIndexForColumn,
         groupCount: arr.length,
         groupRenderStrategy
-      }, toggleGroupRow, groupColumn));
+      }, toggleGroupRow, groupColumn);
+      computedColumns.set(generatedGroupColumn.id || `group-by-${groupByForColumn.field}`, generatedGroupColumn);
     });
   } else if (groupRenderStrategy === "single-column") {
-    computedColumns.set("group-by", getSingleGroupColumn({
-      groupCount: groupRowsBy.length,
-      groupRowsBy,
+    const singleGroupColumn = getSingleGroupColumn({
+      groupCount: groupBy.length,
+      groupBy,
       groupRenderStrategy
-    }, toggleGroupRow, groupColumn));
+    }, toggleGroupRow, groupColumn);
+    computedColumns.set(singleGroupColumn.id || "group-by", singleGroupColumn);
   }
   columns.forEach((col, colId) => {
     computedColumns.set(colId, col);
@@ -3564,7 +3886,15 @@ function useComputed() {
     componentActions: dataSourceActions,
     componentState: dataSourceState
   } = useDataSourceContextValue();
-  const { columnOrder, columnVisibility, columnPinning, bodySize } = componentState;
+  const {
+    columnOrder,
+    columnVisibility,
+    columnPinning,
+    columnSizing,
+    columnTypes,
+    bodySize,
+    showSeparatePivotColumnForSingleAggregation
+  } = componentState;
   (0, import_react19.useState)(() => {
     componentState.onRowHeightCSSVarChange.onChange((rowHeight) => {
       if (rowHeight) {
@@ -3577,13 +3907,16 @@ function useComputed() {
       }
     });
   });
-  useColumnAggregations();
+  (0, import_react19.useEffect)(() => {
+    dataSourceActions.showSeparatePivotColumnForSingleAggregation = showSeparatePivotColumnForSingleAggregation;
+  }, [showSeparatePivotColumnForSingleAggregation]);
   const { multiSort } = dataSourceState;
   useColumnGroups();
   useColumnsWhen();
   const setSortInfo = (0, import_react19.useCallback)((sortInfo) => {
     var _a2;
-    dataSourceActions.sortInfo = multiSort ? sortInfo : (_a2 = sortInfo[0]) != null ? _a2 : null;
+    const newSortInfo = multiSort ? sortInfo : (_a2 = sortInfo[0]) != null ? _a2 : null;
+    dataSourceActions.sortInfo = newSortInfo;
   }, []);
   const columns = componentState.computedColumns;
   const {
@@ -3609,6 +3942,7 @@ function useComputed() {
     pinnedStartMaxWidth: componentState.pinnedStartMaxWidth,
     pinnedEndMaxWidth: componentState.pinnedEndMaxWidth,
     bodySize,
+    viewportReservedWidth: componentState.viewportReservedWidth,
     sortable: componentState.sortable,
     draggableColumns: componentState.draggableColumns,
     sortInfo: (_a = dataSourceState.sortInfo) != null ? _a : void 0,
@@ -3617,7 +3951,9 @@ function useComputed() {
     columnOrder,
     columnVisibility,
     columnVisibilityAssumeVisible: true,
-    columnPinning
+    columnPinning,
+    columnSizing,
+    columnTypes
   });
   const unpinnedColumnWidths = computedUnpinnedColumns.map((c) => c.computedWidth);
   let sortedUnpinnedColumnWidths = [...unpinnedColumnWidths].sort(sortAscending);
@@ -3668,7 +4004,7 @@ function useComputed() {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
-var React10 = __toModule(require("react"));
+var React9 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useInternalProps.ts
 var useInternalProps = () => {
@@ -3676,9 +4012,9 @@ var useInternalProps = () => {
 };
 
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
-var InfiniteTableBody = React10.forwardRef(function InfiniteTableBody2(props, ref) {
+var InfiniteTableBody = React9.forwardRef(function InfiniteTableBody2(props, ref) {
   const { rootClassName: rootClassName12 } = useInternalProps();
-  return /* @__PURE__ */ React10.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React9.createElement("div", __spreadProps(__spreadValues({
     ref
   }, props), {
     className: join(`${rootClassName12}Body`, position.relative, flex["1"], transformTranslateZero, props.className)
@@ -3686,43 +4022,16 @@ var InfiniteTableBody = React10.forwardRef(function InfiniteTableBody2(props, re
 });
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
-var React22 = __toModule(require("react"));
-
-// src/utils/getGlobal.ts
-function getGlobal() {
-  return globalThis;
-}
-
-// src/components/utils/getScrollbarWidth.ts
-var scrollbarWidth;
-function getScrollbarWidth() {
-  var _a, _b;
-  if (scrollbarWidth != null) {
-    return scrollbarWidth;
-  }
-  const doc = (_a = getGlobal().document) != null ? _a : null;
-  if (!doc) {
-    return 0;
-  }
-  const outer = doc.createElement("div");
-  outer.style.visibility = "hidden";
-  outer.style.overflow = "scroll";
-  doc.body.appendChild(outer);
-  const inner = doc.createElement("div");
-  outer.appendChild(inner);
-  scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
-  (_b = outer.parentNode) == null ? void 0 : _b.removeChild(outer);
-  return scrollbarWidth;
-}
+var React21 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/ScrollbarPlaceholder.tsx
-var React11 = __toModule(require("react"));
+var React10 = __toModule(require("react"));
 function HorizontalScrollbarPlaceholderFn(props) {
   const scrollbarWidth2 = getScrollbarWidth();
   if (!scrollbarWidth2) {
     return null;
   }
-  return /* @__PURE__ */ React11.createElement("div", {
+  return /* @__PURE__ */ React10.createElement("div", {
     "data-name": "horizontal-scrollbar-placeholder",
     style: __spreadValues({
       position: "absolute",
@@ -3732,13 +4041,13 @@ function HorizontalScrollbarPlaceholderFn(props) {
     }, props.style)
   });
 }
-var HorizontalScrollbarPlaceholder = React11.memo(HorizontalScrollbarPlaceholderFn);
+var HorizontalScrollbarPlaceholder = React10.memo(HorizontalScrollbarPlaceholderFn);
 function VerticalScrollbarPlaceholderFn(props) {
   const scrollbarWidth2 = getScrollbarWidth();
   if (!scrollbarWidth2) {
     return null;
   }
-  return /* @__PURE__ */ React11.createElement("div", {
+  return /* @__PURE__ */ React10.createElement("div", {
     "data-name": "vertical-scrollbar-placeholder",
     style: __spreadValues({
       position: "absolute",
@@ -3748,14 +4057,14 @@ function VerticalScrollbarPlaceholderFn(props) {
     }, props.style)
   });
 }
-var VerticalScrollbarPlaceholder = React11.memo(VerticalScrollbarPlaceholderFn);
+var VerticalScrollbarPlaceholder = React10.memo(VerticalScrollbarPlaceholderFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
-var import_createRuntimeFn2 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var import_createRuntimeFn3 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var CellCls = "_1eexc2a5 _16lm1iwj _16lm1iw10 _16lm1iw11 _16lm1iw2 _16lm1iw19 _16lm1iw1a";
 var HeaderCellProxy = "_12zfob10";
-var HeaderCellRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob1c", variantClassNames: { dragging: { true: "_12zfob1d", false: "_12zfob1e" }, first: { true: "_12zfob1f", false: "_12zfob1g" }, last: { true: "_12zfob1h", false: "_12zfob1i" }, groupByField: { true: "_12zfob1j", false: "_12zfob1k" }, firstInCategory: { true: "_12zfob1l", false: "_12zfob1m" }, lastInCategory: { true: "_12zfob1n", false: "_12zfob1o" }, pinned: { start: "_12zfob1p", end: "_12zfob1q", false: "_12zfob1r" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob1s"], [{ pinned: "end", firstInCategory: true }, "_12zfob1t"], [{ pinned: false, lastInCategory: true }, "_12zfob1u"]] });
-var HeaderClsRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob12 _16lm1iw10", variantClassNames: { pinned: { start: "_12zfob13", end: "_12zfob14", false: "_12zfob15" }, virtualized: { true: "_12zfob16", false: "_12zfob17" }, overflow: { true: "_12zfob18", false: "_12zfob19" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1a"], [{ overflow: true, pinned: "end" }, "_12zfob1b"]] });
+var HeaderCellRecipe = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_12zfob1c", variantClassNames: { dragging: { true: "_12zfob1d", false: "_12zfob1e" }, first: { true: "_12zfob1f", false: "_12zfob1g" }, last: { true: "_12zfob1h", false: "_12zfob1i" }, groupByField: { true: "_12zfob1j", false: "_12zfob1k" }, firstInCategory: { true: "_12zfob1l", false: "_12zfob1m" }, lastInCategory: { true: "_12zfob1n", false: "_12zfob1o" }, pinned: { start: "_12zfob1p", end: "_12zfob1q", false: "_12zfob1r" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob1s"], [{ pinned: "end", firstInCategory: true }, "_12zfob1t"], [{ pinned: false, lastInCategory: true }, "_12zfob1u"]] });
+var HeaderClsRecipe = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_12zfob12 _16lm1iw10", variantClassNames: { pinned: { start: "_12zfob13", end: "_12zfob14", false: "_12zfob15" }, virtualized: { true: "_12zfob16", false: "_12zfob17" }, overflow: { true: "_12zfob18", false: "_12zfob19" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1a"], [{ overflow: true, pinned: "end" }, "_12zfob1b"]] });
 var HeaderGroupCls = "_16lm1iwz _16lm1iwj";
 var HeaderGroup_Children = "_16lm1iwj _16lm1iw10 _16lm1iw12 _16lm1iwc";
 var HeaderGroup_Header = "_12zfob1x _16lm1iwj _16lm1iw10 _16lm1iw11";
@@ -3763,15 +4072,15 @@ var HeaderSortIconCls = "_12zfob11 _16lm1iw1";
 var HeaderWrapperCls = "_12zfob1v _16lm1iw16 _16lm1iw1 _16lm1iwj _16lm1iw10";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
-var React18 = __toModule(require("react"));
+var React17 = __toModule(require("react"));
 var import_react27 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
-var React14 = __toModule(require("react"));
+var React13 = __toModule(require("react"));
 var import_react23 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
-var React12 = __toModule(require("react"));
+var React11 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useInfiniteTableState.ts
 var import_react20 = __toModule(require("react"));
@@ -3782,10 +4091,10 @@ var useInfiniteTableState = () => {
 };
 
 // src/components/InfiniteTable/components/cell.css.ts
-var import_createRuntimeFn3 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var import_createRuntimeFn4 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var CellCls2 = "_1eexc2a5 _16lm1iwj _16lm1iw10 _16lm1iw11 _16lm1iw2 _16lm1iw19 _16lm1iw1a";
 var CellClsVariants = { shifting: "_1eexc2a3", dragging: "_1eexc2a4" };
-var ColumnCellRecipe = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_16lm1iw2 _16lm1iwo _16lm1iw7 _16lm1iwr", variantClassNames: { dragging: { false: "_1eexc2a7" }, first: { true: "_1eexc2a8", false: "_1eexc2a9" }, last: { true: "_1eexc2aa", false: "_1eexc2ab" }, groupByField: { true: "_1eexc2ac", false: "_1eexc2ad" }, firstInCategory: { true: "_1eexc2ae", false: "_1eexc2af" }, lastInCategory: { true: "_1eexc2ag", false: "_1eexc2ah" }, pinned: { start: "_1eexc2ai", end: "_1eexc2aj", false: "_1eexc2ak" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2al"], [{ pinned: "end", firstInCategory: true }, "_1eexc2am"]] });
+var ColumnCellRecipe = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "_16lm1iw2 _16lm1iwo _16lm1iw7 _16lm1iwr", variantClassNames: { dragging: { false: "_1eexc2a7" }, first: { true: "_1eexc2a8", false: "_1eexc2a9" }, last: { true: "_1eexc2aa", false: "_1eexc2ab" }, groupByField: { true: "_1eexc2ac", false: "_1eexc2ad" }, firstInCategory: { true: "_1eexc2ae", false: "_1eexc2af" }, lastInCategory: { true: "_1eexc2ag", false: "_1eexc2ah" }, pinned: { start: "_1eexc2ai", end: "_1eexc2aj", false: "_1eexc2ak" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2al"], [{ pinned: "end", firstInCategory: true }, "_1eexc2am"]] });
 var columnAlignCellStyle = { center: "_1eexc2a0", start: "_1eexc2a1", end: "_1eexc2a2" };
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
@@ -3830,16 +4139,16 @@ function InfiniteTableCellFn(props) {
       style.transform = `translate3d(${shiftLeft}px, 0px, 0px)`;
     }
   }
-  return /* @__PURE__ */ React12.createElement("div", __spreadProps(__spreadValues({}, domProps), {
+  return /* @__PURE__ */ React11.createElement("div", __spreadProps(__spreadValues({}, domProps), {
     ref: domRef,
     style,
     "data-name": `Cell`,
     className: join(domProps.className, columnAlignCellStyle[(_b = column.align) != null ? _b : "start"], justifyContent[(_c = column.align) != null ? _c : "start"], InfiniteTableCellClassName, CellCls2, shifting ? `${InfiniteTableCellClassName}--shifting ${CellClsVariants.shifting}` : "")
-  }), beforeChildren, cssEllipsis ? /* @__PURE__ */ React12.createElement("div", {
+  }), beforeChildren, cssEllipsis ? /* @__PURE__ */ React11.createElement("div", {
     className: `${rootClassName2}Cell_content ${cssEllipsisClassName}`
   }, children) : children, afterChildren);
 }
-var InfiniteTableCell = React12.memo(InfiniteTableCellFn);
+var InfiniteTableCell = React11.memo(InfiniteTableCellFn);
 
 // src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
 var import_binary_search = __toModule(require_binary_search());
@@ -4034,7 +4343,7 @@ function useCellClassName(column, baseClasses, variants, extraFlags) {
 var import_react_dom = __toModule(require("react-dom"));
 
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
-var React13 = __toModule(require("react"));
+var React12 = __toModule(require("react"));
 var import_react22 = __toModule(require("react"));
 var defaultLineStyle = {
   marginTop: 2,
@@ -4088,18 +4397,18 @@ function SortIcon(props) {
   if (direction === -1) {
     indexStyle.top = "100%";
   }
-  return /* @__PURE__ */ React13.createElement("div", {
+  return /* @__PURE__ */ React12.createElement("div", {
     style: __spreadProps(__spreadValues({}, style), { width: size }),
     className: join(className, "ITableIcon", "ITableIcon-sort")
-  }, showIndex ? /* @__PURE__ */ React13.createElement("div", {
+  }, showIndex ? /* @__PURE__ */ React12.createElement("div", {
     "data-name": "index",
     style: indexStyle
-  }, index) : null, /* @__PURE__ */ React13.createElement("div", {
+  }, index) : null, /* @__PURE__ */ React12.createElement("div", {
     style: __spreadValues({ width: sizes[0] }, lineStyle),
     onTransitionEnd
-  }), /* @__PURE__ */ React13.createElement("div", {
+  }), /* @__PURE__ */ React12.createElement("div", {
     style: __spreadValues({ width: sizes[1] }, lineStyle)
-  }), /* @__PURE__ */ React13.createElement("div", {
+  }), /* @__PURE__ */ React12.createElement("div", {
     style: __spreadValues({ width: sizes[2] }, lineStyle)
   }));
 }
@@ -4130,7 +4439,7 @@ function InfiniteTableHeaderCell(props) {
     });
   }
   header = header != null ? header : column.name;
-  const sortTool = /* @__PURE__ */ React14.createElement(SortIcon, {
+  const sortTool = /* @__PURE__ */ React13.createElement(SortIcon, {
     index: column.computedMultiSort ? column.computedSortIndex + 1 : void 0,
     className: `${baseCls}__sort-icon ${HeaderSortIconCls}`,
     direction: column.computedSorted ? column.computedSortedAsc ? 1 : -1 : 0
@@ -4168,7 +4477,7 @@ function InfiniteTableHeaderCell(props) {
   let offset = offsetFromProps != null ? offsetFromProps : virtualized ? 0 : column.computedPinningOffset;
   let draggingProxy = null;
   if (dragging) {
-    draggingProxy = /* @__PURE__ */ React14.createElement("div", {
+    draggingProxy = /* @__PURE__ */ React13.createElement("div", {
       className: `${baseCls}Proxy ${HeaderCellProxy}`,
       style: {
         position: "absolute",
@@ -4181,7 +4490,7 @@ function InfiniteTableHeaderCell(props) {
     }, header);
     draggingProxy = (0, import_react_dom.createPortal)(draggingProxy, portalDOMRef.current);
   }
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(InfiniteTableCell, {
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(InfiniteTableCell, {
     domRef: ref,
     column,
     "data-name": `HeaderCell`,
@@ -4197,11 +4506,11 @@ function InfiniteTableHeaderCell(props) {
 }
 
 // src/components/RawList/index.tsx
-var React17 = __toModule(require("react"));
+var React16 = __toModule(require("react"));
 var import_react26 = __toModule(require("react"));
 
 // src/components/RawList/AvoidReactDiff.tsx
-var React15 = __toModule(require("react"));
+var React14 = __toModule(require("react"));
 var import_react24 = __toModule(require("react"));
 function AvoidReactDiffFn(props) {
   const [children, setChildren] = (0, import_react24.useState)(props.updater.get());
@@ -4211,15 +4520,15 @@ function AvoidReactDiffFn(props) {
     });
     return remove;
   }, [props.updater]);
-  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, children);
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, children);
 }
-var AvoidReactDiff = React15.memo(AvoidReactDiffFn);
+var AvoidReactDiff = React14.memo(AvoidReactDiffFn);
 
 // src/components/RawList/useVirtualRenderer.ts
 var import_react25 = __toModule(require("react"));
 
 // src/components/RawList/ReactVirtualRenderer.tsx
-var React16 = __toModule(require("react"));
+var React15 = __toModule(require("react"));
 
 // src/components/RawList/MappedItems.ts
 var MappedItems = class extends Logger {
@@ -4235,10 +4544,10 @@ var MappedItems = class extends Logger {
       return result;
     };
     this.getElementsOutsideItemRange = (startIndex, endIndex) => {
-      const map = this.elementIndexToItemIndex;
+      const map2 = this.elementIndexToItemIndex;
       const result = [];
-      for (const elementIndex in map) {
-        const itemIndex = map[elementIndex];
+      for (const elementIndex in map2) {
+        const itemIndex = map2[elementIndex];
         if (itemIndex < startIndex || itemIndex > endIndex) {
           result.push(elementIndex >> 0);
         }
@@ -4464,7 +4773,7 @@ var ReactVirtualRenderer = class extends Logger {
     };
     this.itemDOMRefs[elementIndex] = domRef;
     this.updaters[elementIndex] = buildSubscriptionCallback();
-    const item = /* @__PURE__ */ React16.createElement(AvoidReactDiff, {
+    const item = /* @__PURE__ */ React15.createElement(AvoidReactDiff, {
       key: elementIndex,
       name: `${elementIndex}`,
       updater: this.updaters[elementIndex]
@@ -4561,11 +4870,11 @@ function RawListFn(props) {
     });
     return remove;
   }, [brain, onRenderUpdater]);
-  return /* @__PURE__ */ React17.createElement(AvoidReactDiff, {
+  return /* @__PURE__ */ React16.createElement(AvoidReactDiff, {
     updater: onRenderUpdater
   });
 }
-var RawList = React17.memo(RawListFn);
+var RawList = React16.memo(RawListFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 var debug3 = dbg("Header");
@@ -4586,7 +4895,7 @@ function InfiniteTableHeaderFn(props) {
       }
       return null;
     }
-    return /* @__PURE__ */ React18.createElement(InfiniteTableHeaderCell, {
+    return /* @__PURE__ */ React17.createElement(InfiniteTableHeaderCell, {
       domRef: domRef2,
       column,
       headerHeight,
@@ -4611,22 +4920,22 @@ function InfiniteTableHeaderFn(props) {
     className: join(TableHeaderClassName, `${TableHeaderClassName}--virtualized`, className, headerCls),
     style
   };
-  return /* @__PURE__ */ React18.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React18.createElement(RawList, {
+  return /* @__PURE__ */ React17.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React17.createElement(RawList, {
     brain,
     renderItem: renderColumn
   }));
 }
-var InfiniteTableHeader = React18.memo(InfiniteTableHeaderFn);
+var InfiniteTableHeader = React17.memo(InfiniteTableHeaderFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderUnvirtualized.tsx
-var React21 = __toModule(require("react"));
+var React20 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/renderColumnHeaderGroups.tsx
-var React20 = __toModule(require("react"));
+var React19 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/buildColumnAndGroupTree.ts
 function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap) {
-  const map = new Map();
+  const map2 = new Map();
   const temporaryMap = new Map();
   const mapOfAllParentGroupsForColumns = new Map();
   columns.forEach((col, index) => {
@@ -4644,7 +4953,7 @@ function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap) {
       computedWidth: col.computedWidth,
       depth: col.columnGroup ? ((_d = columnGroupsDepthsMap.get(col.columnGroup)) != null ? _d : 0) + 1 : 0
     };
-    map.set([colId], colItem);
+    map2.set([colId], colItem);
     let groupId = col.columnGroup;
     let colGroupItem;
     let prevGroupItem = colItem;
@@ -4666,7 +4975,7 @@ function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap) {
             computedWidth: 0,
             depth: (_e = columnGroupsDepthsMap.get(groupId)) != null ? _e : 0
           };
-          map.set(groupAbsoluteId, colGroupItem);
+          map2.set(groupAbsoluteId, colGroupItem);
           temporaryMap.set(groupId, colGroupItem);
         }
         colGroupItem.columnItems.push(colItem);
@@ -4683,7 +4992,7 @@ function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap) {
   });
   const result = [];
   let groupOffset = 0;
-  map.forEach((item) => {
+  map2.forEach((item) => {
     if (!item.ref.columnGroup) {
       const itemWidth = item.type === "column" ? item.ref.computedWidth : item.columnItems.reduce((sum, col) => sum + col.ref.computedWidth, 0);
       item.groupOffset = groupOffset;
@@ -4695,7 +5004,7 @@ function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap) {
       groupOffset += itemWidth;
     }
   });
-  map.clear();
+  map2.clear();
   temporaryMap.clear();
   return result;
 }
@@ -4712,7 +5021,7 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
-var React19 = __toModule(require("react"));
+var React18 = __toModule(require("react"));
 var TableHeaderGroupClassName = `${rootClassName}HeaderGroup`;
 function InfiniteTableHeaderGroup(props) {
   const { columnGroup, height, headerHeight } = props;
@@ -4726,16 +5035,16 @@ function InfiniteTableHeaderGroup(props) {
     width: columnGroup.computedWidth,
     height
   };
-  return /* @__PURE__ */ React19.createElement("div", {
+  return /* @__PURE__ */ React18.createElement("div", {
     "data-group-id": columnGroup.id,
     className: join(HeaderGroupCls, TableHeaderGroupClassName, `${TableHeaderGroupClassName}--unvirtualized`),
     style
-  }, /* @__PURE__ */ React19.createElement("div", {
+  }, /* @__PURE__ */ React18.createElement("div", {
     className: join(`${TableHeaderGroupClassName}__header`, HeaderGroup_Header),
     style: { height: headerHeight }
-  }, /* @__PURE__ */ React19.createElement("div", {
+  }, /* @__PURE__ */ React18.createElement("div", {
     className: join(`${TableHeaderGroupClassName}__header-content`, cssEllipsisClassName)
-  }, header)), /* @__PURE__ */ React19.createElement("div", {
+  }, header)), /* @__PURE__ */ React18.createElement("div", {
     className: join(`${TableHeaderGroupClassName}__children`, HeaderGroup_Children)
   }, props.children));
 }
@@ -4758,7 +5067,7 @@ function renderColumnHeaderGroups(config) {
     return items2.map((colGroupItem) => {
       if (colGroupItem.type === "column") {
         const col = colGroupItem.ref;
-        return /* @__PURE__ */ React20.createElement(InfiniteTableHeaderCell, {
+        return /* @__PURE__ */ React19.createElement(InfiniteTableHeaderCell, {
           key: col.id,
           headerHeight: (columnGroupsMaxDepth - colGroupItem.depth + 2) * headerHeight,
           column: col,
@@ -4772,7 +5081,7 @@ function renderColumnHeaderGroups(config) {
         colIds.push(col.id);
         return col;
       });
-      return /* @__PURE__ */ React20.createElement(InfiniteTableHeaderGroup, {
+      return /* @__PURE__ */ React19.createElement(InfiniteTableHeaderGroup, {
         key: `${colGroupItem.uniqueGroupId.join("/")}`,
         columns: columns2,
         height: (columnGroupsMaxDepth - colGroupItem.depth + 2) * headerHeight,
@@ -4825,9 +5134,9 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
     },
     computed: { computedVisibleColumnsMap: columnsMap }
   } = useInfiniteTable();
-  const domRef = React21.useRef(null);
+  const domRef = React20.useRef(null);
   const hasColumnGroups = computedColumnGroups.size > 0;
-  const columnHeaderGroups = React21.useMemo(() => {
+  const columnHeaderGroups = React20.useMemo(() => {
     return hasColumnGroups ? renderColumnHeaderGroups({
       columnGroups: computedColumnGroups,
       columnGroupsDepthsMap,
@@ -4846,7 +5155,7 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
     columnGroupsMaxDepth
   ]);
   const children = hasColumnGroups ? columnHeaderGroups : columns.map((c) => {
-    return /* @__PURE__ */ React21.createElement(InfiniteTableHeaderCell, {
+    return /* @__PURE__ */ React20.createElement(InfiniteTableHeaderCell, {
       key: c.id,
       headerHeight,
       column: c,
@@ -4869,20 +5178,20 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
     const removeOnScroll = scroller.onScroll(onScroll);
     return removeOnScroll;
   }, [brain, scrollListener]);
-  return /* @__PURE__ */ React21.createElement("div", __spreadProps(__spreadValues({}, domProps), {
+  return /* @__PURE__ */ React20.createElement("div", __spreadProps(__spreadValues({}, domProps), {
     className: join(TableHeaderClassName2, `${TableHeaderClassName2}--unvirtualized`, pinning ? `${TableHeaderClassName2}--pinned ${TableHeaderClassName2}-${pinning}` : "", scrollable ? `${TableHeaderClassName2}--overflow` : "", domProps.className, HeaderClsRecipe({
       pinned: pinning,
       virtualized: false,
       overflow: scrollable
     })),
     style
-  }), /* @__PURE__ */ React21.createElement("div", {
+  }), /* @__PURE__ */ React20.createElement("div", {
     style: { width: totalWidth },
     className: join(flexFlow.row, display.flex),
     ref: domRef
   }, children));
 }
-var InfiniteTableHeaderUnvirtualized = React21.memo(InfiniteTableHeaderUnvirtualizedFn);
+var InfiniteTableHeaderUnvirtualized = React20.memo(InfiniteTableHeaderUnvirtualizedFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
 function TableHeaderWrapper(props) {
@@ -4912,7 +5221,7 @@ function TableHeaderWrapper(props) {
   const hasPinnedStart = computedPinnedStartColumns.length > 0;
   const hasPinnedEnd = computedPinnedEndColumns.length > 0;
   const height = columnGroupsMaxDepth ? columnGroupsMaxDepth * headerHeight : headerHeight;
-  const header = virtualizeHeader ? /* @__PURE__ */ React22.createElement(InfiniteTableHeader, {
+  const header = virtualizeHeader ? /* @__PURE__ */ React21.createElement(InfiniteTableHeader, {
     columns: computedUnpinnedColumns,
     repaintId: virtualizeHeader ? repaintId : void 0,
     brain,
@@ -4925,7 +5234,7 @@ function TableHeaderWrapper(props) {
     },
     availableWidth: computedUnpinnedColumnsWidth,
     totalWidth: computedUnpinnedColumnsWidth
-  }) : /* @__PURE__ */ React22.createElement(InfiniteTableHeaderUnvirtualized, {
+  }) : /* @__PURE__ */ React21.createElement(InfiniteTableHeaderUnvirtualized, {
     brain,
     scrollable: true,
     pinning: false,
@@ -4933,12 +5242,12 @@ function TableHeaderWrapper(props) {
     availableWidth: computedUnpinnedColumnsWidth,
     totalWidth: computedUnpinnedColumnsWidth
   });
-  return /* @__PURE__ */ React22.createElement("div", {
+  return /* @__PURE__ */ React21.createElement("div", {
     className: HeaderWrapperCls,
     style: {
       height: virtualizeHeader ? height : void 0
     }
-  }, hasPinnedStart ? /* @__PURE__ */ React22.createElement(InfiniteTableHeaderUnvirtualized, {
+  }, hasPinnedStart ? /* @__PURE__ */ React21.createElement(InfiniteTableHeaderUnvirtualized, {
     style: {
       left: 0,
       position: "absolute",
@@ -4950,7 +5259,7 @@ function TableHeaderWrapper(props) {
     scrollable: computedPinnedStartOverflow,
     pinning: "start",
     scrollListener: computedPinnedStartOverflow ? pinnedStartScrollListener : void 0
-  }) : null, header, hasPinnedEnd ? /* @__PURE__ */ React22.createElement(InfiniteTableHeaderUnvirtualized, {
+  }) : null, header, hasPinnedEnd ? /* @__PURE__ */ React21.createElement(InfiniteTableHeaderUnvirtualized, {
     style: {
       right: scrollbars.vertical ? getScrollbarWidth() : 0,
       position: "absolute",
@@ -4962,7 +5271,7 @@ function TableHeaderWrapper(props) {
     scrollable: computedPinnedEndOverflow,
     pinning: "end",
     scrollListener: computedPinnedEndOverflow ? pinnedEndScrollListener : void 0
-  }) : null, scrollbars.vertical ? /* @__PURE__ */ React22.createElement(VerticalScrollbarPlaceholder, {
+  }) : null, scrollbars.vertical ? /* @__PURE__ */ React21.createElement(VerticalScrollbarPlaceholder, {
     style: {
       height: "100%",
       right: 0
@@ -4971,7 +5280,7 @@ function TableHeaderWrapper(props) {
 }
 
 // src/components/VirtualScrollContainer/index.tsx
-var React23 = __toModule(require("react"));
+var React22 = __toModule(require("react"));
 var import_react30 = __toModule(require("react"));
 
 // src/components/hooks/useOnScroll.ts
@@ -5015,7 +5324,7 @@ var getScrollableClassName = (scrollable) => {
 
 // src/components/VirtualScrollContainer/index.tsx
 var rootClassName6 = "InfiniteVirtualScrollContainer";
-var VirtualScrollContainer = React23.forwardRef(function VirtualScrollContainer2(props, ref) {
+var VirtualScrollContainer = React22.forwardRef(function VirtualScrollContainer2(props, ref) {
   const {
     children,
     scrollable = true,
@@ -5025,7 +5334,7 @@ var VirtualScrollContainer = React23.forwardRef(function VirtualScrollContainer2
   } = props;
   const domRef = ref != null ? ref : (0, import_react30.useRef)(null);
   useOnScroll(domRef, onContainerScroll);
-  return /* @__PURE__ */ React23.createElement("div", {
+  return /* @__PURE__ */ React22.createElement("div", {
     ref: domRef,
     style,
     className: join(className, rootClassName6, VirtualScrollContainerCls, getScrollableClassName(scrollable))
@@ -5033,7 +5342,7 @@ var VirtualScrollContainer = React23.forwardRef(function VirtualScrollContainer2
 });
 
 // src/components/VirtualList/SpacePlaceholder.tsx
-var React24 = __toModule(require("react"));
+var React23 = __toModule(require("react"));
 function SpacePlaceholderFn(props) {
   const { height, width, count } = props;
   const style = {
@@ -5043,7 +5352,7 @@ function SpacePlaceholderFn(props) {
     opacity: 0,
     pointerEvents: "none"
   };
-  return /* @__PURE__ */ React24.createElement("div", {
+  return /* @__PURE__ */ React23.createElement("div", {
     "data-count": count,
     "data-placeholder-width": true ? width : void 0,
     "data-placeholder-height": true ? height : void 0,
@@ -5051,24 +5360,24 @@ function SpacePlaceholderFn(props) {
     style
   });
 }
-var SpacePlaceholder = React24.memo(SpacePlaceholderFn);
+var SpacePlaceholder = React23.memo(SpacePlaceholderFn);
 
 // src/components/InfiniteTable/hooks/useListRendering.tsx
 var import_react41 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useUnpinnedRendering.tsx
-var React30 = __toModule(require("react"));
+var React29 = __toModule(require("react"));
 var import_react34 = __toModule(require("react"));
 
 // src/components/VirtualList/VirtualRowList.tsx
-var React26 = __toModule(require("react"));
+var React25 = __toModule(require("react"));
 
 // src/components/VirtualList/VirtualList.tsx
-var React25 = __toModule(require("react"));
+var React24 = __toModule(require("react"));
 var import_react31 = __toModule(require("react"));
 
 // src/components/VirtualList/VirtualList.css.ts
-var VirtualListCls = "mlx2t0 _16lm1iw0";
+var VirtualListCls = "_16lm1iw1 _16lm1iw8 _16lm1iw0";
 var VirtualListClsOrientation = { horizontal: "mlx2t1", vertical: "mlx2t2" };
 var scrollTransformTargetCls = "mlx2t3";
 
@@ -5146,19 +5455,19 @@ var VirtualList = (props) => {
   if (true) {
     domProps["data-cmp-name"] = `VirtualList`;
   }
-  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React25.createElement(VirtualScrollContainer, {
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React24.createElement(VirtualScrollContainer, {
     scrollable,
     onContainerScroll
-  }, /* @__PURE__ */ React25.createElement("div", {
+  }, /* @__PURE__ */ React24.createElement("div", {
     ref: domRef,
     className: scrollTransformTargetCls,
     "data-name": "scroll-transform-target"
-  }, /* @__PURE__ */ React25.createElement(RawList, {
+  }, /* @__PURE__ */ React24.createElement(RawList, {
     brain: virtualBrain,
     renderItem,
     repaintId,
     debugChannel: "VirtualList-" + mainAxis
-  })), children, /* @__PURE__ */ React25.createElement(SpacePlaceholder, {
+  })), children, /* @__PURE__ */ React24.createElement(SpacePlaceholder, {
     count,
     width,
     height
@@ -5168,14 +5477,14 @@ var VirtualList = (props) => {
 // src/components/VirtualList/VirtualRowList.tsx
 var VirtualRowList = (props) => {
   const _a = props, { rowWidth, rowHeight, renderRow } = _a, listProps = __objRest(_a, ["rowWidth", "rowHeight", "renderRow"]);
-  const renderItem = React26.useCallback((renderProps) => {
+  const renderItem = React25.useCallback((renderProps) => {
     return renderRow({
       domRef: renderProps.domRef,
       rowHeight: renderProps.itemSize,
       rowIndex: renderProps.itemIndex
     });
   }, [renderRow]);
-  return /* @__PURE__ */ React26.createElement(VirtualList, __spreadProps(__spreadValues({}, listProps), {
+  return /* @__PURE__ */ React25.createElement(VirtualList, __spreadProps(__spreadValues({}, listProps), {
     renderItem,
     mainAxis: "vertical",
     itemMainAxisSize: rowHeight,
@@ -5184,11 +5493,11 @@ var VirtualRowList = (props) => {
 };
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRow.tsx
-var React28 = __toModule(require("react"));
+var React27 = __toModule(require("react"));
 var import_react33 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
-var React27 = __toModule(require("react"));
+var React26 = __toModule(require("react"));
 var { rootClassName: rootClassName8 } = internalProps;
 var InfiniteTableColumnCellClassName = `${rootClassName8}ColumnCell`;
 function isColumnWithField(c) {
@@ -5215,32 +5524,38 @@ function InfiniteTableColumnCellFn(props) {
   const groupRowInfo = null;
   let value = isGroupRow && groupBy && column.groupByField ? rowInfo.value : isColumnWithField(column) ? data == null ? void 0 : data[column.field] : null;
   if (column.valueGetter) {
-    value = column.valueGetter({
-      data,
-      rowInfo,
-      groupRowInfo
+    value = column.valueGetter(isGroupRow ? {
+      data: rowInfo.data,
+      rowInfo
+    } : {
+      data: rowInfo.data,
+      rowInfo
     });
   }
   const { componentState: computedDataSource } = useDataSourceContextValue();
-  const stylingRenderParam = {
-    value,
-    column,
+  const rest = rowInfo.isGroupRow ? {
+    rowInfo,
+    data: rowInfo.data
+  } : {
     rowInfo,
-    data
+    data: rowInfo.data
   };
+  const stylingRenderParam = __spreadValues({
+    value,
+    column
+  }, rest);
   let renderValue = value;
   if (column.render || column.renderValue) {
-    const renderParam = {
+    const renderParam = __spreadProps(__spreadValues({
       value,
       column,
-      rowInfo,
-      groupRowInfo,
-      data,
+      groupRowInfo
+    }, rest), {
       rowIndex,
       toggleGroupRow,
       toggleCurrentGroupRow: () => toggleGroupRow(rowInfo.groupKeys),
-      groupRowsBy: computedDataSource.groupRowsBy
-    };
+      groupBy: computedDataSource.groupBy
+    });
     if (column.render) {
       renderValue = column.render(renderParam);
     } else if (column.renderValue) {
@@ -5275,7 +5590,7 @@ function InfiniteTableColumnCellFn(props) {
       }
     }
   }
-  return /* @__PURE__ */ React27.createElement(InfiniteTableCell, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React26.createElement(InfiniteTableCell, __spreadProps(__spreadValues({
     domRef,
     offsetProperty
   }, dataset), {
@@ -5286,7 +5601,7 @@ function InfiniteTableColumnCellFn(props) {
     className: join(useCellClassName(column, [InfiniteTableColumnCellClassName, InfiniteTableCellClassName], ColumnCellRecipe, { dragging: false }), colClassName)
   }), hidden ? null : renderValue);
 }
-var InfiniteTableColumnCell = React27.memo(InfiniteTableColumnCellFn);
+var InfiniteTableColumnCell = React26.memo(InfiniteTableColumnCellFn);
 
 // src/components/InfiniteTable/components/InfiniteTableRow/useRowDOMProps.ts
 var import_react32 = __toModule(require("react"));
@@ -5319,12 +5634,11 @@ function useRowDOMProps(props, rowProps, rowStyle, rowClassName, groupRenderStra
     domRefFromProps(node);
     domRef.current = node;
   }, []);
-  const rowPropsAndStyleArgs = {
-    data: rowInfo.data,
-    rowInfo,
+  const rest = rowInfo.isGroupRow ? { data: rowInfo.data, rowInfo } : { data: rowInfo.data, rowInfo };
+  const rowPropsAndStyleArgs = __spreadProps(__spreadValues({}, rest), {
     rowIndex,
-    groupRowsBy: rowInfo.groupBy
-  };
+    groupBy: rowInfo.groupBy
+  });
   if (typeof rowProps === "function") {
     rowProps = rowProps(rowPropsAndStyleArgs);
   }
@@ -5418,12 +5732,12 @@ function InfiniteTableRowFn(props) {
     height: rowHeight
   }, domProps.style);
   const renderCellRef = (0, import_react33.useRef)(null);
-  const renderCell = React28.useCallback(({ domRef, itemIndex }) => {
+  const renderCell = React27.useCallback(({ domRef, itemIndex }) => {
     const column = columns[itemIndex];
     if (!column) {
     }
     const hidden = false;
-    return /* @__PURE__ */ React28.createElement(InfiniteTableColumnCell, {
+    return /* @__PURE__ */ React27.createElement(InfiniteTableColumnCell, {
       getData,
       rowInfo,
       groupRenderStrategy,
@@ -5450,18 +5764,18 @@ function InfiniteTableRowFn(props) {
   if (true) {
     domProps["data-cmp-name"] = "ITableRow";
   }
-  return /* @__PURE__ */ React28.createElement("div", __spreadProps(__spreadValues({}, domProps), {
+  return /* @__PURE__ */ React27.createElement("div", __spreadProps(__spreadValues({}, domProps), {
     style
-  }), /* @__PURE__ */ React28.createElement(RawList, {
+  }), /* @__PURE__ */ React27.createElement(RawList, {
     brain,
     renderItem: renderCell,
     debugChannel: `${rowIndex}`
   }));
 }
-var InfiniteTableRow = React28.memo(InfiniteTableRowFn);
+var InfiniteTableRow = React27.memo(InfiniteTableRowFn);
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRowUnvirtualized.tsx
-var React29 = __toModule(require("react"));
+var React28 = __toModule(require("react"));
 function TableRowUnvirtualizedFn(props) {
   const {
     rowHeight,
@@ -5482,7 +5796,7 @@ function TableRowUnvirtualizedFn(props) {
   }, domProps.style);
   const children = columns.map((col) => {
     const hidden = false;
-    return /* @__PURE__ */ React29.createElement(InfiniteTableColumnCell, {
+    return /* @__PURE__ */ React28.createElement(InfiniteTableColumnCell, {
       key: col.id,
       virtualized: false,
       rowHeight,
@@ -5495,11 +5809,11 @@ function TableRowUnvirtualizedFn(props) {
       column: col
     });
   });
-  return /* @__PURE__ */ React29.createElement("div", __spreadProps(__spreadValues({}, domProps), {
+  return /* @__PURE__ */ React28.createElement("div", __spreadProps(__spreadValues({}, domProps), {
     style
   }), children);
 }
-var TableRowUnvirtualized = React29.memo(TableRowUnvirtualizedFn);
+var TableRowUnvirtualized = React28.memo(TableRowUnvirtualizedFn);
 
 // src/components/InfiniteTable/hooks/useUnpinnedRendering.tsx
 function useUnpinnedRendering(params) {
@@ -5542,7 +5856,7 @@ function useUnpinnedRendering(params) {
       rowProps.repaintId = repaintId;
     }
     const TableRowComponent = shouldVirtualizeColumns ? InfiniteTableRow : TableRowUnvirtualized;
-    return /* @__PURE__ */ React30.createElement(TableRowComponent, __spreadValues({}, rowProps));
+    return /* @__PURE__ */ React29.createElement(TableRowComponent, __spreadValues({}, rowProps));
   }, [
     repaintId,
     rowHeight,
@@ -5552,7 +5866,7 @@ function useUnpinnedRendering(params) {
     horizontalVirtualBrain,
     verticalVirtualBrain
   ]);
-  const fakeScrollbar = getScrollbarWidth() ? /* @__PURE__ */ React30.createElement("div", {
+  const fakeScrollbar = getScrollbarWidth() ? /* @__PURE__ */ React29.createElement("div", {
     "data-name": "horizontal-scrollbar-placeholder--fake",
     style: {
       position: "absolute",
@@ -5563,10 +5877,10 @@ function useUnpinnedRendering(params) {
       overflow: "auto",
       visibility: columnShifts ? "visible" : "hidden"
     }
-  }, /* @__PURE__ */ React30.createElement("div", {
+  }, /* @__PURE__ */ React29.createElement("div", {
     style: { height: "100%", width: computedUnpinnedColumnsWidth }
   })) : null;
-  return rowHeight != 0 ? /* @__PURE__ */ React30.createElement(VirtualRowList, {
+  return rowHeight != 0 ? /* @__PURE__ */ React29.createElement(VirtualRowList, {
     repaintId: `${repaintId}-unpinned-`,
     brain: verticalVirtualBrain,
     onContainerScroll: applyScrollHorizontal,
@@ -5590,20 +5904,20 @@ function useUnpinnedRendering(params) {
 var import_react35 = __toModule(require("react"));
 
 // src/components/InfiniteTable/InfiniteCls.css.ts
-var import_createRuntimeFn4 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var import_createRuntimeFn5 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var FooterCls = "_16lm1iw1";
 var InfiniteCls = "_1yeub2v0 _16lm1iw1 _16lm1iwj _16lm1iwz _16lm1iw0";
-var InfiniteClsRecipe = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "", variantClassNames: { focused: { true: "_1yeub2v2", false: "_1yeub2v3" }, focusedWithin: { true: "_1yeub2v4", false: "_1yeub2v5" }, hasPinnedStart: { true: "_1yeub2v6", false: "_1yeub2v7" }, hasPinnedEnd: { true: "_1yeub2v8", false: "_1yeub2v9" }, hasPinnedStartOverflow: { true: "_1yeub2va", false: "_1yeub2vb" }, hasPinnedEndOverflow: { true: "_1yeub2vc", false: "_1yeub2vd" } }, defaultVariants: {}, compoundVariants: [] });
+var InfiniteClsRecipe = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "", variantClassNames: { focused: { true: "_1yeub2v2", false: "_1yeub2v3" }, focusedWithin: { true: "_1yeub2v4", false: "_1yeub2v5" }, hasPinnedStart: { true: "_1yeub2v6", false: "_1yeub2v7" }, hasPinnedEnd: { true: "_1yeub2v8", false: "_1yeub2v9" }, hasPinnedStartOverflow: { true: "_1yeub2va", false: "_1yeub2vb" }, hasPinnedEndOverflow: { true: "_1yeub2vc", false: "_1yeub2vd" } }, defaultVariants: {}, compoundVariants: [] });
 var InfiniteClsScrolling = "_1yeub2v1";
 var InfiniteClsShiftingColumns = "_16lm1iwm";
 var PinnedRowsClsVariants = { pinnedStart: "_1yeub2ve", pinnedEnd: "_1yeub2vf", overflow: "_1yeub2vg" };
-var PinnedRowsContainerClsVariants = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "", variantClassNames: { pinned: { start: "_1yeub2vh", end: "_1yeub2vi", false: "_1yeub2vj" } }, defaultVariants: {}, compoundVariants: [] });
+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 = 0;
+var SCROLL_BOTTOM_OFFSET = 1;
 var useOnContainerScroll = ({
   verticalVirtualBrain,
   horizontalVirtualBrain,
@@ -5619,6 +5933,7 @@ var useOnContainerScroll = ({
       bodySize
     }
   } = useInfiniteTable();
+  const { componentActions: dataSourceActions, getState: getDataSourceState } = useDataSourceContextValue();
   const timeoutIdRef = (0, import_react35.useRef)(0);
   const scrollingRef = (0, import_react35.useRef)(false);
   const scrollTopMaxRef = (0, import_react35.useRef)(0);
@@ -5679,6 +5994,9 @@ var useOnContainerScroll = ({
     const isScrollBottom = scrollTop + offset >= scrollTopMaxRef.current;
     if (isScrollBottom) {
       onScrollToBottom == null ? void 0 : onScrollToBottom();
+      if (getDataSourceState().livePagination) {
+        dataSourceActions.scrollBottomId = Date.now();
+      }
     }
   }, [onContainerScroll, scrollToBottomOffset, onScrollToBottom, onScrollToTop]);
   return {
@@ -5688,11 +6006,11 @@ var useOnContainerScroll = ({
 };
 
 // src/components/InfiniteTable/hooks/usePinnedRendering.tsx
-var React32 = __toModule(require("react"));
+var React31 = __toModule(require("react"));
 var import_react38 = __toModule(require("react"));
 
 // src/components/VirtualList/RowListWithExternalScrolling.tsx
-var React31 = __toModule(require("react"));
+var React30 = __toModule(require("react"));
 var import_react37 = __toModule(require("react"));
 
 // src/components/hooks/useOnMount.ts
@@ -5768,7 +6086,7 @@ var RowListWithExternalScrolling = (props) => {
   if (true) {
     domProps["data-cmp-name"] = "RowListWithExternalScrolling";
   }
-  return /* @__PURE__ */ React31.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React31.createElement(RawList, {
+  return /* @__PURE__ */ React30.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React30.createElement(RawList, {
     brain,
     renderItem,
     repaintId
@@ -5791,7 +6109,7 @@ function PinnedRowsContainer(props) {
     brain,
     renderRow
   } = props;
-  const style = React32.useMemo(() => {
+  const style = React31.useMemo(() => {
     const result = pinning === "end" ? {
       width: rowWidth,
       height,
@@ -5817,7 +6135,7 @@ function PinnedRowsContainer(props) {
     className: join(`${PinnedRowsContainerClassName}`, PinnedRowsClsVariants[pinning === "start" ? "pinnedStart" : "pinnedEnd"], `${PinnedRowsContainerClassName}--pinned-${pinning}`, `${PinnedRowsContainerClassName}--overflow`, PinnedRowsClsVariants.overflow)
   };
   if (hasOverflow) {
-    return /* @__PURE__ */ React32.createElement(VirtualScrollContainer, {
+    return /* @__PURE__ */ React31.createElement(VirtualScrollContainer, {
       scrollable: {
         horizontal: true,
         vertical: false
@@ -5833,18 +6151,18 @@ function PinnedRowsContainer(props) {
       className: join(PinnedRowsContainerClsVariants({
         pinned: pinning
       }), `${PinnedRowsContainerClassName}Container`, `${PinnedRowsContainerClassName}Container--pinned-${pinning}`)
-    }, /* @__PURE__ */ React32.createElement(RowListWithExternalScrolling, __spreadProps(__spreadValues({}, rowListProps), {
+    }, /* @__PURE__ */ React31.createElement(RowListWithExternalScrolling, __spreadProps(__spreadValues({}, rowListProps), {
       onMount: (node) => {
         pinnedScrollListener == null ? void 0 : pinnedScrollListener.onScroll((scrollPosition) => {
           updateScroll(node, brain.getScrollPosition(), scrollPosition);
         });
       }
-    })), /* @__PURE__ */ React32.createElement(SpacePlaceholder, {
+    })), /* @__PURE__ */ React31.createElement(SpacePlaceholder, {
       width: rowWidth,
       height: 1
     }));
   }
-  return /* @__PURE__ */ React32.createElement(RowListWithExternalScrolling, __spreadValues({}, rowListProps));
+  return /* @__PURE__ */ React31.createElement(RowListWithExternalScrolling, __spreadValues({}, rowListProps));
 }
 function useRenderPinnedRow(params) {
   const { getData, getState, columnsWidth, columns, verticalBrain } = params;
@@ -5864,7 +6182,7 @@ function useRenderPinnedRow(params) {
       rowWidth: columnsWidth,
       columns
     }, rowParams);
-    return /* @__PURE__ */ React32.createElement(TableRowUnvirtualized, __spreadValues({}, rowProps));
+    return /* @__PURE__ */ React31.createElement(TableRowUnvirtualized, __spreadValues({}, rowProps));
   }, [columnsWidth, columns, verticalBrain]);
   return renderPinnedRow;
 }
@@ -5907,7 +6225,7 @@ function usePinnedRenderingForSide(side, params) {
     columns,
     columnsWidth
   });
-  const pinnedList = columns.length && rowHeight !== 0 ? /* @__PURE__ */ React32.createElement(PinnedRowsContainer, {
+  const pinnedList = columns.length && rowHeight !== 0 ? /* @__PURE__ */ React31.createElement(PinnedRowsContainer, {
     pinning: side,
     pinnedScrollListener,
     hasOverflow,
@@ -5920,7 +6238,7 @@ function usePinnedRenderingForSide(side, params) {
     brain: verticalVirtualBrain,
     renderRow: renderRowPinned
   }) : null;
-  const pinnedScrollbarPlaceholder = pinnedList && hasHorizontalScrollbar && !hasOverflow ? /* @__PURE__ */ React32.createElement(HorizontalScrollbarPlaceholder, {
+  const pinnedScrollbarPlaceholder = pinnedList && hasHorizontalScrollbar && !hasOverflow ? /* @__PURE__ */ React31.createElement(HorizontalScrollbarPlaceholder, {
     style: side === "end" ? {
       width: columnsWidth,
       right: hasVerticalScrollbar ? getScrollbarWidth() : 0
@@ -6464,29 +6782,6 @@ function useYourBrain(param) {
   return { horizontalVirtualBrain, verticalVirtualBrain };
 }
 
-// src/utils/shallowEqualObjects.ts
-function shallowEqualObjects(objA, objB) {
-  if (objA === objB) {
-    return true;
-  }
-  if (!objA || !objB) {
-    return false;
-  }
-  var aKeys = Object.keys(objA);
-  var bKeys = Object.keys(objB);
-  var len = aKeys.length;
-  if (bKeys.length !== len) {
-    return false;
-  }
-  for (var i = 0; i < len; i++) {
-    var key = aKeys[i];
-    if (objA[key] !== objB[key] || !Object.prototype.hasOwnProperty.call(objB, key)) {
-      return false;
-    }
-  }
-  return true;
-}
-
 // src/components/InfiniteTable/hooks/useListRendering.tsx
 function useListRendering(param) {
   const { computed, bodySize, columnShifts } = param;
@@ -6558,7 +6853,7 @@ function useListRendering(param) {
   });
   const hasHorizontalScrollbar = computedUnpinnedColumnsWidth > bodySize.width - computedPinnedStartColumnsWidth - computedPinnedEndColumnsWidth;
   const reservedContentHeight = verticalVirtualBrain.getTotalSize() + (hasHorizontalScrollbar ? getScrollbarWidth() : 0);
-  const hasVerticalScrollbar = bodySize.height < reservedContentHeight;
+  const hasVerticalScrollbar = bodySize.height > 0 && bodySize.height < reservedContentHeight;
   const scrollbars = (0, import_react41.useMemo)(() => ({
     vertical: hasVerticalScrollbar,
     horizontal: hasHorizontalScrollbar
@@ -6576,7 +6871,6 @@ function useListRendering(param) {
         setColumnVisibility: (columnVisibility) => {
           componentActions.columnVisibility = columnVisibility;
         },
-        setColumnAggregations: (columnAggregations) => componentActions.columnAggregations = columnAggregations,
         getState,
         getDataSourceState
       };
@@ -6647,15 +6941,14 @@ function useListRendering(param) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
-var React33 = __toModule(require("react"));
+var React32 = __toModule(require("react"));
 var import_react42 = __toModule(require("react"));
 
 // src/components/utils/decamelize.ts
-var import_decamelize = __toModule(require_decamelize());
-var decamelize = (input, options) => {
-  var _a;
-  return (0, import_decamelize.default)(input, { separator: (_a = options == null ? void 0 : options.separator) != null ? _a : "-" });
-};
+function decamelize(str, options) {
+  const { separator } = options != null ? options : { separator: "-" };
+  return str.replace(/([a-z\d])([A-Z])/g, "$1" + separator + "$2").replace(new RegExp("(" + separator + "[A-Z])([A-Z])", "g"), "$1" + separator + "$2").toLowerCase();
+}
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
 var defaultStyle2 = {
@@ -6684,10 +6977,10 @@ var enforceStyle = (node, style) => {
     node.style.setProperty(decamelize(propertyName), propertyValue, "important");
   }
 };
-var InfiniteTableLicenseFooter = React33.forwardRef(function InfiniteTableLicenseFooter2(props, ref) {
+var InfiniteTableLicenseFooter = React32.forwardRef(function InfiniteTableLicenseFooter2(props, ref) {
   const { rootClassName: rootClassName12 } = useInternalProps();
-  const domRef = React33.useRef(null);
-  const domCallback = React33.useCallback((node) => {
+  const domRef = React32.useRef(null);
+  const domCallback = React32.useCallback((node) => {
     domRef.current = node;
     if (!ref) {
       return;
@@ -6712,12 +7005,12 @@ var InfiniteTableLicenseFooter = React33.forwardRef(function InfiniteTableLicens
       clearInterval(intervalId);
     };
   }, []);
-  return /* @__PURE__ */ React33.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React32.createElement("div", __spreadProps(__spreadValues({
     ref: domCallback
   }, props), {
     className: join(`${rootClassName12}-Footer`, FooterCls, props.className),
     style: defaultStyle2
-  }), "Powered by", " ", /* @__PURE__ */ React33.createElement("a", {
+  }), "Powered by", " ", /* @__PURE__ */ React32.createElement("a", {
     href: "https://infinite-table.com",
     rel: "noopener noreferrer",
     role: "link",
@@ -6875,11 +7168,11 @@ var SANDBOX_REGEX = /(https):\/\/\d+\-\d+\-\d\-(sandpack\.codesandbox\.io)/g;
 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) => {
+var useLicense = (licenseKey = "") => {
   const valid = (0, import_react43.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.0.7"
+      version: "0.1.0"
     });
     if (!licenseKey && !valid2 && isInsideSandbox) {
       return true;
@@ -6890,9 +7183,9 @@ var useLicense = (licenseKey) => {
 };
 
 // src/components/CSSVariableWatch.tsx
-var React34 = __toModule(require("react"));
+var React33 = __toModule(require("react"));
 var import_react44 = __toModule(require("react"));
-var error2 = err("CSSVariableWatch");
+var error = err("CSSVariableWatch");
 var debug5 = dbg("CSSVariableWatch");
 var WRAPPER_STYLE = {
   position: "absolute",
@@ -6905,21 +7198,21 @@ var WRAPPER_STYLE = {
 };
 var useCSSVariableWatch = (params) => {
   const lastValueRef = (0, import_react44.useRef)(0);
-  const onResize = React34.useCallback(({ height }) => {
+  const onResize = React33.useCallback(({ height }) => {
     if (height && height !== lastValueRef.current) {
       lastValueRef.current = height;
       params.onChange(height);
     }
   }, [params.onChange]);
   useResizeObserver(params.ref, onResize, { earlyAttach: true });
-  React34.useLayoutEffect(() => {
+  React33.useLayoutEffect(() => {
     const value = params.ref.current.getBoundingClientRect().height;
     if (value) {
       lastValueRef.current = value;
       debug5(`Variable ${params.varName} found and equals ${value}.`);
       params.onChange(value);
     } else {
-      error2(`Specified variable ${params.varName} not found or does not have a numeric value.`);
+      error(`Specified variable ${params.varName} not found or does not have a numeric value.`);
     }
   }, []);
 };
@@ -6928,11 +7221,11 @@ var CSSVariableWatch = (props) => {
   useCSSVariableWatch(__spreadProps(__spreadValues({}, props), {
     ref: domRef
   }));
-  return /* @__PURE__ */ React34.createElement("div", {
+  return /* @__PURE__ */ React33.createElement("div", {
     "data-name": "css-variable-watcher",
     "data-var": props.varName,
     style: WRAPPER_STYLE
-  }, /* @__PURE__ */ React34.createElement("div", {
+  }, /* @__PURE__ */ React33.createElement("div", {
     ref: domRef,
     style: {
       height: props.varName.startsWith("var(") ? props.varName : `var(${props.varName})`
@@ -7025,7 +7318,7 @@ function useDOMProps(initialDOMProps) {
 }
 
 // src/components/InfiniteTable/components/LoadMask.tsx
-var React35 = __toModule(require("react"));
+var React34 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/LoadMask.css.ts
 var LoadMaskCls = { visible: "qy58ya1 qy58ya0 _16lm1iw2 _16lm1iwr _16lm1iwt _16lm1iwx _16lm1iwv", hidden: "qy58ya2 qy58ya0 _16lm1iw2 _16lm1iwr _16lm1iwt _16lm1iwx _16lm1iwv" };
@@ -7037,15 +7330,15 @@ var { rootClassName: rootClassName11 } = internalProps;
 var baseCls2 = `${rootClassName11}-LoadMask`;
 function LoadMaskFn(props) {
   const { visible, children = "Loading" } = props;
-  return /* @__PURE__ */ React35.createElement("div", {
+  return /* @__PURE__ */ React34.createElement("div", {
     className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls2}`
-  }, /* @__PURE__ */ React35.createElement("div", {
+  }, /* @__PURE__ */ React34.createElement("div", {
     className: `${LoadMaskOverlayCls} ${baseCls2}-Overlay`
-  }), /* @__PURE__ */ React35.createElement("div", {
+  }), /* @__PURE__ */ React34.createElement("div", {
     className: `${LoadMaskTextCls} ${baseCls2}-Text`
   }, children));
 }
-var LoadMask = React35.memo(LoadMaskFn);
+var LoadMask = React34.memo(LoadMaskFn);
 
 // src/components/InfiniteTable/index.tsx
 var InfiniteTableClassName = internalProps.rootClassName;
@@ -7064,11 +7357,17 @@ var InfiniteTableRoot = getComponentStateRoot({
   getParentState: () => useDataSource(),
   debugName: "InfiniteTable"
 });
-var InfiniteTableComponent = React36.memo(function InfiniteTableComponent2() {
+var InfiniteTableComponent = React35.memo(function InfiniteTableComponent2() {
   var _a;
-  const { componentState, getComputed, computed } = useInfiniteTable();
   const {
-    componentState: { dataArray, loading }
+    componentState,
+    getComputed,
+    computed,
+    getState: getInfiniteTableState
+  } = useInfiniteTable();
+  const {
+    componentState: { dataArray, loading },
+    getState: getDataSourceState
   } = useDataSourceContextValue();
   const {
     domRef,
@@ -7105,38 +7404,47 @@ var InfiniteTableComponent = React36.memo(function InfiniteTableComponent2() {
   const licenseValid = useLicense(licenseKey);
   const domProps = useDOMProps(componentState.domProps);
   const LoadMaskCmp = (_a = components == null ? void 0 : components.LoadMask) != null ? _a : LoadMask;
-  return /* @__PURE__ */ React36.createElement("div", __spreadValues({
+  React35.useLayoutEffect(() => {
+    const dataSourceState = getDataSourceState();
+    const { onScrollbarsChange } = getInfiniteTableState();
+    const { notifyScrollbarsChange } = dataSourceState;
+    if (onScrollbarsChange && dataSourceState.updatedAt && dataSourceState.dataArray.length) {
+      onScrollbarsChange(scrollbars);
+    }
+    notifyScrollbarsChange(scrollbars);
+  }, [scrollbars]);
+  return /* @__PURE__ */ React35.createElement("div", __spreadValues({
     ref: domRef
-  }, domProps), header ? /* @__PURE__ */ React36.createElement(TableHeaderWrapper, {
+  }, domProps), header ? /* @__PURE__ */ React35.createElement(TableHeaderWrapper, {
     brain: horizontalVirtualBrain,
     repaintId,
     scrollbars
-  }) : null, /* @__PURE__ */ React36.createElement(InfiniteTableBody, null, /* @__PURE__ */ React36.createElement(VirtualScrollContainer, {
+  }) : null, /* @__PURE__ */ React35.createElement(InfiniteTableBody, null, /* @__PURE__ */ React35.createElement(VirtualScrollContainer, {
     ref: scrollerDOMRef,
     onContainerScroll: applyScrollVertical,
     scrollable: ONLY_VERTICAL_SCROLLBAR
-  }, /* @__PURE__ */ React36.createElement("div", {
+  }, /* @__PURE__ */ React35.createElement("div", {
     className: display.flex
-  }, pinnedStartList, centerList, pinnedEndList), /* @__PURE__ */ React36.createElement(SpacePlaceholder, {
+  }, pinnedStartList, centerList, pinnedEndList), /* @__PURE__ */ React35.createElement(SpacePlaceholder, {
     count: dataArray.length,
     width: 0,
     height: reservedContentHeight
-  })), pinnedStartScrollbarPlaceholder, pinnedEndScrollbarPlaceholder, /* @__PURE__ */ React36.createElement(LoadMaskCmp, {
+  })), pinnedStartScrollbarPlaceholder, pinnedEndScrollbarPlaceholder, /* @__PURE__ */ React35.createElement(LoadMaskCmp, {
     visible: loading
-  }, loadingText)), licenseValid ? null : /* @__PURE__ */ React36.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React36.createElement("div", {
+  }, loadingText)), licenseValid ? null : /* @__PURE__ */ React35.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React35.createElement("div", {
     ref: portalDOMRef,
     className: join(`${rootClassName}Portal`, zIndex[1e3], position.absolute, top[0], left[0])
-  }), rowHeightCSSVar ? /* @__PURE__ */ React36.createElement(CSSVariableWatch, {
+  }), rowHeightCSSVar ? /* @__PURE__ */ React35.createElement(CSSVariableWatch, {
     varName: rowHeightCSSVar,
     onChange: onRowHeightCSSVarChange
-  }) : null, headerHeightCSSVar ? /* @__PURE__ */ React36.createElement(CSSVariableWatch, {
+  }) : null, headerHeightCSSVar ? /* @__PURE__ */ React35.createElement(CSSVariableWatch, {
     varName: headerHeightCSSVar,
     onChange: onHeaderHeightCSSVarChange
   }) : null);
 });
 function InfiniteTableContextProvider() {
   const { componentActions, componentState } = useComponentState();
-  const { scrollerDOMRef } = componentState;
+  const { scrollerDOMRef, scrollTopId } = componentState;
   const computed = useComputed();
   const getComputed = useLatest(computed);
   const getState = useLatest(componentState);
@@ -7165,20 +7473,25 @@ function InfiniteTableContextProvider() {
     }
     componentActions.bodySize = bodySize;
   }, { earlyAttach: true });
-  React36.useEffect(() => {
+  React35.useEffect(() => {
     return () => {
       componentState.onRowHeightCSSVarChange.destroy();
       componentState.onHeaderHeightCSSVarChange.destroy();
     };
   }, []);
+  React35.useEffect(() => {
+    if (scrollerDOMRef.current) {
+      scrollerDOMRef.current.scrollTop = 0;
+    }
+  }, [scrollTopId, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
-  return /* @__PURE__ */ React36.createElement(TableContext2.Provider, {
+  return /* @__PURE__ */ React35.createElement(TableContext2.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ React36.createElement(InfiniteTableComponent, null));
+  }, /* @__PURE__ */ React35.createElement(InfiniteTableComponent, null));
 }
 function InfiniteTable(props) {
-  const table = /* @__PURE__ */ React36.createElement(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ React36.createElement(InfiniteTableContextProvider, null));
-  return /* @__PURE__ */ React36.createElement(React36.StrictMode, null, table);
+  const table = /* @__PURE__ */ React35.createElement(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ React35.createElement(InfiniteTableContextProvider, null));
+  return /* @__PURE__ */ React35.createElement(React35.StrictMode, null, table);
 }
 InfiniteTable.defaultProps = {
   rowHeight: 40,