@infinite-table/infinite-react 0.2.16 → 0.2.19

package/index.esm.js

@@ -633,9 +633,9 @@ function debounce(fn, { wait }) {
 // src/components/InfiniteTable/index.tsx
 import {
   StrictMode,
-  createElement as createElement33,
+  createElement as createElement32,
   memo as memo13,
-  useEffect as useEffect25,
+  useEffect as useEffect26,
   useLayoutEffect as useLayoutEffect5
 } from "react";
 
@@ -1289,7 +1289,7 @@ var forwardProps = (setupState) => {
     pivotColumnGroups: 1,
     onScrollbarsChange: 1,
     autoSizeColumnsKey: 1,
-    scrollStopDelay: (scrollStopDelay) => scrollStopDelay != null ? scrollStopDelay : 100,
+    scrollStopDelay: (scrollStopDelay) => scrollStopDelay != null ? scrollStopDelay : 250,
     viewportReservedWidth: (viewportReservedWidth) => viewportReservedWidth != null ? viewportReservedWidth : 0,
     activeIndex: (activeIndex) => activeIndex != null ? activeIndex : 0,
     columnMinWidth: (columnMinWidth) => columnMinWidth != null ? columnMinWidth : 30,
@@ -1301,6 +1301,7 @@ var forwardProps = (setupState) => {
     sortable: (sortable) => sortable != null ? sortable : true,
     hideEmptyGroupColumns: (hideEmptyGroupColumns) => hideEmptyGroupColumns != null ? hideEmptyGroupColumns : false,
     pivotTotalColumnPosition: (pivotTotalColumnPosition) => pivotTotalColumnPosition != null ? pivotTotalColumnPosition : "end",
+    pivotGrandTotalColumnPosition: 1,
     licenseKey: (licenseKey) => licenseKey || "",
     columnOrder: (columnOrder) => columnOrder != null ? columnOrder : true,
     header: (header) => header != null ? header : true,
@@ -2143,7 +2144,7 @@ var useComputedVisibleColumns = ({
 var sortAscending = (a, b) => a - b;
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-import { useCallback as useCallback5, useEffect as useEffect10, useMemo as useMemo6, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect11, useMemo as useMemo6, useState as useState5 } from "react";
 
 // src/components/hooks/useComponentState/index.tsx
 import {
@@ -2542,11 +2543,11 @@ function useColumnGroups() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-import { useEffect as useEffect9, useMemo as useMemo5 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo5 } from "react";
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
 import {
-  createElement as createElement5
+  createElement as createElement4
 } from "react";
 
 // src/utils/join.ts
@@ -2622,12 +2623,8 @@ var willChange = { transform: "_16lm1iw19" };
 var zIndex = { "1": "_16lm1iwe", "10": "_16lm1iwf", "1000": "_16lm1iwg", "10000": "_16lm1iwh", "100000": "_16lm1iwi" };
 
 // src/components/InfiniteTable/utils/RenderHookComponent.tsx
-import {
-  Fragment,
-  createElement as createElement4
-} from "react";
 function RenderHookComponent(props) {
-  return /* @__PURE__ */ createElement4(Fragment, null, props.render(props.renderParam));
+  return props.render(props.renderParam);
 }
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
@@ -2640,7 +2637,7 @@ function getGroupColumnRender({
     var _a, _b, _c;
     let { value, rowInfo, column, groupBy, pivotBy } = renderOptions;
     if (column.renderValue) {
-      value = /* @__PURE__ */ createElement5(RenderHookComponent, {
+      value = /* @__PURE__ */ createElement4(RenderHookComponent, {
         render: column.renderValue,
         renderParam: renderOptions
       });
@@ -2669,20 +2666,20 @@ function getGroupColumnRender({
     let icon = null;
     const showExpanderIcon = pivotBy ? (((_b = groupRowInfo.groupKeys) == null ? void 0 : _b.length) || 0) < (groupBy == null ? void 0 : groupBy.length) : (((_c = groupRowInfo.groupKeys) == null ? void 0 : _c.length) || 0) <= (groupBy == null ? void 0 : groupBy.length);
     if (showExpanderIcon) {
-      const defaultIcon = /* @__PURE__ */ createElement5(ExpanderIcon, {
+      const defaultIcon = /* @__PURE__ */ createElement4(ExpanderIcon, {
         expanded: !collapsed,
         onChange: () => {
           toggleGroupRow(groupKeys);
         }
       });
-      icon = column.renderGroupIcon ? /* @__PURE__ */ createElement5(RenderHookComponent, {
+      icon = column.renderGroupIcon ? /* @__PURE__ */ createElement4(RenderHookComponent, {
         render: column.renderGroupIcon,
         renderParam: Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)
       }) : defaultIcon;
     }
-    return /* @__PURE__ */ createElement5("div", {
+    return /* @__PURE__ */ createElement4("div", {
       className: join(display.flex, alignItems.center)
-    }, icon, /* @__PURE__ */ createElement5("div", {
+    }, icon, /* @__PURE__ */ createElement4("div", {
       className: cssEllipsisClassName
     }, value != null ? value : null));
   };
@@ -2730,7 +2727,7 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
       let icon = null;
       const showExpanderIcon = pivotBy ? (((_a = rowInfo.groupKeys) == null ? void 0 : _a.length) || 0) < (groupBy == null ? void 0 : groupBy.length) : (((_b = rowInfo.groupKeys) == null ? void 0 : _b.length) || 0) <= (groupBy == null ? void 0 : groupBy.length);
       if (showExpanderIcon) {
-        const defaultIcon = /* @__PURE__ */ createElement5(ExpanderIcon, {
+        const defaultIcon = /* @__PURE__ */ createElement4(ExpanderIcon, {
           expanded: !collapsed,
           onChange: () => {
             toggleGroupRow(rowInfo.groupKeys);
@@ -2738,9 +2735,9 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
         });
         icon = column.renderGroupIcon ? column.renderGroupIcon(Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)) : defaultIcon;
       }
-      return /* @__PURE__ */ createElement5("div", {
+      return /* @__PURE__ */ createElement4("div", {
         className: join(display.flex, alignItems.center, GroupRowExpanderCls)
-      }, icon, /* @__PURE__ */ createElement5("div", {
+      }, icon, /* @__PURE__ */ createElement4("div", {
         className: cssEllipsisClassName
       }, value != null ? value : null));
     }
@@ -2755,13 +2752,34 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
   return generatedGroupColumn;
 }
 
+// src/components/InfiniteTable/hooks/useEffectWithRaf.ts
+import { useEffect as useEffect7, useRef as useRef5 } from "react";
+function useEffectWithRaf(fn, deps) {
+  const rafId = useRef5(0);
+  const removeFnRaf = useRef5();
+  useEffect7(() => {
+    rafId.current = requestAnimationFrame(() => {
+      removeFnRaf.current = fn();
+    });
+    return () => {
+      if (rafId.current) {
+        cancelAnimationFrame(rafId.current);
+      }
+      if (typeof removeFnRaf.current === "function") {
+        removeFnRaf.current();
+        removeFnRaf.current = void 0;
+      }
+    };
+  }, deps);
+}
+
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
 import { useCallback as useCallback4 } from "react";
 
 // src/components/DataSource/index.tsx
 import {
-  Fragment as Fragment2,
-  createElement as createElement6
+  Fragment,
+  createElement as createElement5
 } from "react";
 
 // src/utils/multisort/sortTypes.ts
@@ -2839,7 +2857,7 @@ var getMultisortFunction = (sortInfo, get) => {
 };
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-import { useEffect as useEffect8, useMemo as useMemo4, useRef as useRef6, useState as useState4 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo4, useRef as useRef7, useState as useState4 } from "react";
 
 // src/utils/DeepMap/once.ts
 function once(fn) {
@@ -2925,14 +2943,13 @@ var DeepMap = class {
     for (let i = 0, len = keys.length; i < len; i++) {
       const key = keys[i];
       const last = i === len - 1;
+      const pair = currentMap.get(key) || {};
       if (last) {
-        const pair = currentMap.has(key) ? currentMap.get(key) : {};
         pair.revision = this.revision++;
         pair.value = value;
         currentMap.set(key, pair);
         this.length++;
       } else {
-        const pair = currentMap.has(key) ? currentMap.get(key) : {};
         if (!pair.map) {
           pair.map = new Map();
           currentMap.set(key, pair);
@@ -2943,7 +2960,6 @@ var DeepMap = class {
     return this;
   }
   get(keys) {
-    var _a;
     let currentMap = this.map;
     if (!keys.length) {
       keys = [this.emptyKey];
@@ -2951,10 +2967,10 @@ var DeepMap = class {
     for (let i = 0, len = keys.length; i < len; i++) {
       const key = keys[i];
       const last = i === len - 1;
+      const pair = currentMap.get(key);
       if (last) {
-        return (_a = currentMap.get(key)) == null ? void 0 : _a.value;
+        return pair ? pair.value : void 0;
       } else {
-        const pair = currentMap.get(key);
         if (!pair || !pair.map) {
           return;
         }
@@ -2992,8 +3008,8 @@ var DeepMap = class {
     for (let i = 0, len = keys.length; i < len; i++) {
       const key = keys[i];
       const last = i === len - 1;
+      const pair = currentMap.get(key);
       if (last) {
-        const pair = currentMap.get(key);
         if (pair) {
           if (pair.hasOwnProperty("value")) {
             delete pair.value;
@@ -3010,7 +3026,6 @@ var DeepMap = class {
         }
         break;
       } else {
-        const pair = currentMap.get(key);
         if (!pair || !pair.map) {
           result = false;
           break;
@@ -3020,11 +3035,11 @@ var DeepMap = class {
       }
     }
     while (maps.length) {
-      let map2 = maps.pop();
-      let key = keys.pop();
+      const map2 = maps.pop();
+      const key = keys.pop();
       if (key && (map2 == null ? void 0 : map2.size) === 0) {
-        let parentMap = maps[maps.length - 1];
-        let pair = parentMap == null ? void 0 : parentMap.get(key);
+        const parentMap = maps[maps.length - 1];
+        const pair = parentMap == null ? void 0 : parentMap.get(key);
         if (pair) {
           delete pair.map;
           if (!pair.hasOwnProperty("value")) {
@@ -3043,11 +3058,10 @@ var DeepMap = class {
     for (let i = 0, len = keys.length; i < len; i++) {
       const key = keys[i];
       const last = i === len - 1;
+      const pair = currentMap.get(key);
       if (last) {
-        const pair = currentMap.get(key);
-        return !!pair && pair.hasOwnProperty("value");
+        return pair ? pair.hasOwnProperty("value") : false;
       } else {
-        const pair = currentMap.get(key);
         if (!pair || !pair.map) {
           return false;
         }
@@ -3515,12 +3529,12 @@ function enhancedFlatten(param) {
 }
 
 // src/components/hooks/useEffectWithChanges.ts
-import { useEffect as useEffect7, useRef as useRef5 } from "react";
+import { useEffect as useEffect8, useRef as useRef6 } from "react";
 function useEffectWithChanges(fn, deps) {
-  const prevRef = useRef5({});
-  const oldValuesRef = useRef5({});
+  const prevRef = useRef6({});
+  const oldValuesRef = useRef6({});
   const oldValues = oldValuesRef.current;
-  const changesRef = useRef5({});
+  const changesRef = useRef6({});
   const changes = changesRef.current;
   const useEffectDeps = [];
   for (let k in deps) {
@@ -3533,7 +3547,7 @@ function useEffectWithChanges(fn, deps) {
     }
   }
   prevRef.current = deps;
-  useEffect7(() => {
+  useEffect8(() => {
     const changes2 = changesRef.current;
     const result = fn(changes2, oldValues);
     changesRef.current = {};
@@ -3705,8 +3719,8 @@ function useLoadData() {
     vertical: false,
     horizontal: false
   });
-  const scrollbarsRef = useRef6(scrollbars);
-  useEffect8(() => {
+  const scrollbarsRef = useRef7(scrollbars);
+  useEffect9(() => {
     notifyScrollbarsChange.onChange((scrollbars2) => {
       if (!scrollbars2) {
         return;
@@ -3716,7 +3730,7 @@ function useLoadData() {
     });
     return () => notifyScrollbarsChange.destroy();
   }, [notifyScrollbarsChange]);
-  useEffect8(() => {
+  useEffect9(() => {
     const frameId = requestAnimationFrame(() => {
       var _a;
       if (!((_a = scrollbarsRef.current) == null ? void 0 : _a.vertical) && livePaginationCursor) {
@@ -3725,7 +3739,7 @@ function useLoadData() {
     });
     return () => cancelAnimationFrame(frameId);
   }, [livePaginationCursor]);
-  useEffect8(() => {
+  useEffect9(() => {
     const { livePaginationCursor: livePaginationCursor2, livePagination: livePagination2 } = getComponentState();
     if (!scrollbars.vertical && livePagination2) {
       if (livePaginationCursor2) {
@@ -3739,7 +3753,7 @@ function useLoadData() {
     pivotBy,
     cursorId: livePagination ? stateCursorId : null
   };
-  const initialRef = useRef6(true);
+  const initialRef = useRef7(true);
   useLazyLoadRange();
   useEffectWithChanges(() => {
     const componentState2 = getComponentState();
@@ -3777,7 +3791,7 @@ function useLazyLoadRange() {
     dataArray,
     scrollStopDelayUpdatedByTable
   } = componentState;
-  const latestRenderRangeRef = useRef6(null);
+  const latestRenderRangeRef = useRef7(null);
   const loadRange = (renderRange, cache = loadingCache) => {
     const componentState2 = getComponentState();
     renderRange = renderRange || latestRenderRangeRef.current;
@@ -3797,7 +3811,7 @@ function useLazyLoadRange() {
     }, cache);
   };
   const debouncedLoadRange = useMemo4(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       return notifyRenderRangeChange.onChange((renderRange) => {
         latestRenderRangeRef.current = renderRange;
@@ -3806,7 +3820,7 @@ function useLazyLoadRange() {
     }
     return;
   }, [lazyLoadBatchSize, loadingCache]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
     }
@@ -3874,11 +3888,7 @@ function lazyLoadRange(options, cache) {
     }
     cache == null ? void 0 : cache.set(cacheKey, true);
     const args = [componentState.data, componentState, componentActions, fnCall];
-    return promise.then(() => getRafPromise()).then(() => loadData(...args)).then(() => {
-      requestAnimationFrame(() => {
-        cache == null ? void 0 : cache.delete(cacheKey);
-      });
-    });
+    return promise.then(() => getRafPromise()).then(() => loadData(...args));
   }, initialPromise);
 }
 
@@ -4082,6 +4092,7 @@ function initSetupState2() {
     notifyScrollStop: buildSubscriptionCallback(),
     notifyRenderRangeChange: buildSubscriptionCallback(),
     pivotTotalColumnPosition: "end",
+    pivotGrandTotalColumnPosition: false,
     scrollStopDelayUpdatedByTable: 100,
     originalLazyGroupData,
     originalLazyGroupDataChangeDetect: 0,
@@ -4269,6 +4280,7 @@ function getPivotColumnsAndColumnGroups({
   deepMap,
   pivotBy,
   pivotTotalColumnPosition,
+  pivotGrandTotalColumnPosition,
   reducers = {},
   showSeparatePivotColumnForSingleAggregation = false
 }) {
@@ -4278,6 +4290,28 @@ function getPivotColumnsAndColumnGroups({
   });
   const columns = new Map([]);
   const columnGroups = new Map();
+  const addGrandTotalColumns = once(function() {
+    aggregationReducers.forEach((reducer, index) => {
+      columns.set(`total:${reducer.id}`, prepareColumn({
+        header: `${reducer.name || reducer.id} total`,
+        pivotBy,
+        pivotColumn: true,
+        pivotTotalColumn: true,
+        pivotAggregator: reducer,
+        pivotAggregatorIndex: index,
+        pivotGroupKeys: [],
+        pivotGroupKey: "",
+        pivotIndex: -1,
+        valueGetter: ({ rowInfo }) => {
+          var _a;
+          return (_a = rowInfo.reducerResults) == null ? void 0 : _a[reducer.id];
+        }
+      }));
+    });
+  });
+  if (!pivotLength && pivotTotalColumnPosition === "start" || pivotGrandTotalColumnPosition === "start") {
+    addGrandTotalColumns();
+  }
   const isSingleAggregationColumn = !showSeparatePivotColumnForSingleAggregation && aggregationReducers.length === 1;
   deepMap.visitDepthFirst((_value, keys, _indexInGroup, next) => {
     keys = [...keys];
@@ -4382,24 +4416,8 @@ function getPivotColumnsAndColumnGroups({
       next == null ? void 0 : next();
     }
   });
-  if (!pivotLength) {
-    aggregationReducers.forEach((reducer, index) => {
-      columns.set(`total:${reducer.id}`, prepareColumn({
-        header: `${reducer.name || reducer.id} total`,
-        pivotBy,
-        pivotColumn: true,
-        pivotTotalColumn: true,
-        pivotAggregator: reducer,
-        pivotAggregatorIndex: index,
-        pivotGroupKeys: [],
-        pivotGroupKey: "",
-        pivotIndex: -1,
-        valueGetter: ({ rowInfo }) => {
-          var _a;
-          return (_a = rowInfo.reducerResults) == null ? void 0 : _a[reducer.id];
-        }
-      }));
-    });
+  if (!pivotLength && pivotTotalColumnPosition === "end" || pivotGrandTotalColumnPosition === "end") {
+    addGrandTotalColumns();
   }
   const result = {
     columns,
@@ -4431,7 +4449,7 @@ function toRowInfo(data, id, index) {
   };
 }
 function concludeReducer(params) {
-  var _a;
+  var _a, _b;
   const { state, previousState } = params;
   const sortInfo = state.sortInfo;
   let shouldSort = !!(sortInfo == null ? void 0 : sortInfo.length) && !state.controlledSort;
@@ -4466,6 +4484,7 @@ function concludeReducer(params) {
     "pivotBy",
     "aggregationReducers",
     "pivotTotalColumnPosition",
+    "pivotGrandTotalColumnPosition",
     "showSeparatePivotColumnForSingleAggregation",
     "sortInfo"
   ]);
@@ -4512,6 +4531,7 @@ function concludeReducer(params) {
         deepMap: groupResult.topLevelPivotColumns,
         pivotBy,
         pivotTotalColumnPosition: (_a = state.pivotTotalColumnPosition) != null ? _a : "end",
+        pivotGrandTotalColumnPosition: (_b = state.pivotGrandTotalColumnPosition) != null ? _b : false,
         reducers: state.aggregationReducers,
         showSeparatePivotColumnForSingleAggregation: state.showSeparatePivotColumnForSingleAggregation
       }) : void 0;
@@ -4555,7 +4575,7 @@ function DataSourceWithContext(props) {
   if (typeof children === "function") {
     children = children(computedValues);
   }
-  return /* @__PURE__ */ createElement6(Fragment2, null, children);
+  return /* @__PURE__ */ createElement5(Fragment, null, children);
 }
 var DataSourceRoot = getComponentStateRoot({
   initSetupState: initSetupState2,
@@ -4578,14 +4598,14 @@ function DataSourceCmp({ children }) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
-  return /* @__PURE__ */ createElement6(DataSourceContext.Provider, {
+  return /* @__PURE__ */ createElement5(DataSourceContext.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ createElement6(DataSourceWithContext, {
+  }, /* @__PURE__ */ createElement5(DataSourceWithContext, {
     children
   }));
 }
 function DataSource(props) {
-  return /* @__PURE__ */ createElement6(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ createElement6(DataSourceCmp, {
+  return /* @__PURE__ */ createElement5(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ createElement5(DataSourceCmp, {
     children: props.children
   }));
 }
@@ -4626,15 +4646,24 @@ function useColumnsWhen() {
     componentActions: dataSourceActions
   } = useDataSourceContextValue();
   const {
-    componentState: { groupRenderStrategy, pivotTotalColumnPosition }
+    componentState: {
+      groupRenderStrategy,
+      pivotTotalColumnPosition,
+      pivotGrandTotalColumnPosition
+    }
   } = useComponentState();
   const groupByMap = useGroupByMap(groupBy);
-  useEffect9(() => {
+  useEffect10(() => {
     dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
   }, [groupRenderStrategy]);
-  useEffect9(() => {
+  useEffect10(() => {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
+  useEffect10(() => {
+    if (pivotGrandTotalColumnPosition != void 0) {
+      dataSourceActions.pivotGrandTotalColumnPosition = pivotGrandTotalColumnPosition;
+    }
+  }, [pivotGrandTotalColumnPosition]);
   useColumnsWhenInlineGroupRenderStrategy(groupByMap);
   const { toggleGroupRow } = useColumnsWhenGrouping();
   useHideColumns(groupByMap);
@@ -4698,7 +4727,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
     });
     return computedColumns.size === 0 ? void 0 : computedColumns;
   }
-  useEffect9(() => {
+  useEffect10(() => {
     const update = () => {
       componentActions.columnsWhenInlineGroupRenderStrategy = computeColumnsWhenInlineGroupRenderStrategy(columns, groupByMap, groupRenderStrategy, toggleGroupRow);
     };
@@ -4722,17 +4751,19 @@ function useColumnsWhenGrouping() {
       groupRenderStrategy,
       pivotColumns,
       pivotColumn,
-      pivotTotalColumnPosition
+      pivotTotalColumnPosition,
+      pivotGrandTotalColumnPosition
     }
   } = useComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  useEffect9(() => {
+  useEffect10(() => {
     const update = () => {
       const columnsWhenGrouping = getColumnsWhenGrouping({
         columns,
         groupColumn,
         pivotColumn,
         pivotTotalColumnPosition,
+        pivotGrandTotalColumnPosition,
         groupRenderStrategy: groupRenderStrategy === "inline" ? "single-column" : groupRenderStrategy,
         groupBy,
         pivotBy,
@@ -4780,7 +4811,7 @@ function useHideColumns(groupByMap) {
     }
   } = useComponentState();
   const prevHideEmptyGroupColumns = usePrevious(hideEmptyGroupColumns);
-  useEffect9(() => {
+  useEffectWithRaf(() => {
     if (groupRenderStrategy !== "multi-column") {
       return;
     }
@@ -4858,7 +4889,7 @@ function useHideColumns(groupByMap) {
     hideEmptyGroupColumns ? groupRowsState : null,
     hideEmptyGroupColumns
   ]);
-  useEffect9(() => {
+  useEffect10(() => {
     const isGrouped = groupBy.length > 0;
     const currentState = getComponentState();
     const { controlledColumnVisibility, columnVisibility } = currentState;
@@ -4893,6 +4924,7 @@ function getColumnsWhenGrouping(params) {
     pivotBy,
     groupColumn,
     pivotTotalColumnPosition,
+    pivotGrandTotalColumnPosition,
     pivotColumn,
     groupRenderStrategy,
     toggleGroupRow,
@@ -4932,7 +4964,12 @@ function getColumnsWhenGrouping(params) {
     });
     pivotColumns.forEach((col, key) => {
       var _a, _b;
-      if (col.pivotTotalColumn && pivotTotalColumnPosition === false) {
+      const isSimpleTotalColumn = col.pivotTotalColumn && col.columnGroup;
+      const isGrandTotalColumn = col.pivotTotalColumn && !col.columnGroup;
+      if (isSimpleTotalColumn && pivotTotalColumnPosition === false) {
+        return;
+      }
+      if (isGrandTotalColumn && pivotGrandTotalColumnPosition === false) {
         return;
       }
       let column = __spreadValues({}, col);
@@ -4996,7 +5033,7 @@ function useComputed() {
       }
     });
   });
-  useEffect10(() => {
+  useEffect11(() => {
     dataSourceActions.showSeparatePivotColumnForSingleAggregation = showSeparatePivotColumnForSingleAggregation;
   }, [showSeparatePivotColumnForSingleAggregation]);
   const { multiSort } = dataSourceState;
@@ -5123,7 +5160,7 @@ function useComputed() {
 
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
 import {
-  createElement as createElement7,
+  createElement as createElement6,
   forwardRef
 } from "react";
 
@@ -5135,7 +5172,7 @@ var useInternalProps = () => {
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
 var InfiniteTableBody = forwardRef(function InfiniteTableBody2(props, ref) {
   const { rootClassName: rootClassName12 } = useInternalProps();
-  return /* @__PURE__ */ createElement7("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ createElement6("div", __spreadProps(__spreadValues({
     ref
   }, props), {
     className: join(`${rootClassName12}Body`, position.relative, flex["1"], transformTranslateZero, props.className)
@@ -5144,12 +5181,12 @@ var InfiniteTableBody = forwardRef(function InfiniteTableBody2(props, ref) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
 import {
-  createElement as createElement19
+  createElement as createElement18
 } from "react";
 
 // src/components/InfiniteTable/components/ScrollbarPlaceholder.tsx
 import {
-  createElement as createElement8,
+  createElement as createElement7,
   memo as memo2
 } from "react";
 function HorizontalScrollbarPlaceholderFn(props) {
@@ -5157,7 +5194,7 @@ function HorizontalScrollbarPlaceholderFn(props) {
   if (!scrollbarWidth2) {
     return null;
   }
-  return /* @__PURE__ */ createElement8("div", {
+  return /* @__PURE__ */ createElement7("div", {
     "data-name": "horizontal-scrollbar-placeholder",
     style: __spreadValues({
       position: "absolute",
@@ -5173,7 +5210,7 @@ function VerticalScrollbarPlaceholderFn(props) {
   if (!scrollbarWidth2) {
     return null;
   }
-  return /* @__PURE__ */ createElement8("div", {
+  return /* @__PURE__ */ createElement7("div", {
     "data-name": "vertical-scrollbar-placeholder",
     style: __spreadValues({
       position: "absolute",
@@ -5199,22 +5236,22 @@ var HeaderWrapperCls = "_12zfob1v _16lm1iw16 _16lm1iw1 _16lm1iwj _16lm1iw10";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 import {
-  createElement as createElement15,
+  createElement as createElement14,
   memo as memo6
 } from "react";
-import { useCallback as useCallback8, useEffect as useEffect14, useRef as useRef9 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect15, useRef as useRef10 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
 import {
   createContext as createContext4,
-  createElement as createElement11
+  createElement as createElement10
 } from "react";
-import { useCallback as useCallback7, useContext as useContext5, useEffect as useEffect12, useRef as useRef8 } from "react";
+import { useCallback as useCallback7, useContext as useContext5, useEffect as useEffect13, useRef as useRef9 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
 import {
-  Fragment as Fragment3,
-  createElement as createElement9,
+  Fragment as Fragment2,
+  createElement as createElement8,
   memo as memo3
 } from "react";
 
@@ -5285,15 +5322,15 @@ function InfiniteTableCellFn(props) {
     style,
     "data-name": "Cell",
     className: join(domProps.className, columnAlignCellStyle[(_b = column.align) != null ? _b : "start"], justifyContent[(_c = column.align) != null ? _c : "start"], InfiniteTableCellClassName, ColumnCellCls, shifting ? `${InfiniteTableCellClassName}--shifting ${CellClsVariants.shifting}` : ""),
-    children: /* @__PURE__ */ createElement9(Fragment3, null, beforeChildren, /* @__PURE__ */ createElement9("div", {
+    children: /* @__PURE__ */ createElement8(Fragment2, null, beforeChildren, /* @__PURE__ */ createElement8("div", {
       className: `${InfiniteTableCellContentClassName} ${cssEllipsis ? cssEllipsisClassName : overflow.hidden}`
     }, children), afterChildren)
   });
   const RenderComponent = cellType === "body" ? (_d = column.components) == null ? void 0 : _d.ColumnCell : (_e = column.components) == null ? void 0 : _e.HeaderCell;
   if (RenderComponent) {
-    return /* @__PURE__ */ createElement9(RenderComponent, __spreadValues({}, finalDOMProps));
+    return /* @__PURE__ */ createElement8(RenderComponent, __spreadValues({}, finalDOMProps));
   }
-  return /* @__PURE__ */ createElement9("div", __spreadProps(__spreadValues({}, finalDOMProps), {
+  return /* @__PURE__ */ createElement8("div", __spreadProps(__spreadValues({}, finalDOMProps), {
     ref: domRef
   }));
 }
@@ -5304,7 +5341,7 @@ var import_binary_search2 = __toModule(require_binary_search());
 import {
   useCallback as useCallback6,
   useMemo as useMemo7,
-  useRef as useRef7,
+  useRef as useRef8,
   useState as useState6
 } from "react";
 
@@ -5342,11 +5379,11 @@ var useColumnPointerEvents = ({
 }) => {
   const [draggingDiff, setDraggingDiff] = useState6(null);
   const [proxyOffset, setProxyOffset] = useState6(null);
-  const breakpointsRef = useRef7([]);
-  const pointerMoveRef = useRef7(null);
-  const didDragRef = useRef7(false);
-  const initialClientPos = useRef7(null);
-  const currentDropIndexRef = useRef7(null);
+  const breakpointsRef = useRef8([]);
+  const pointerMoveRef = useRef8(null);
+  const didDragRef = useRef8(false);
+  const initialClientPos = useRef8(null);
+  const currentDropIndexRef = useRef8(null);
   const dragging = draggingDiff != null;
   const { componentActions, computed } = useInfiniteTable();
   const { computedColumnOrder } = computed;
@@ -5359,7 +5396,7 @@ var useColumnPointerEvents = ({
       columnWidth: column.computedWidth
     };
   }, [columns, columnId, column]);
-  let cursorRef = useRef7("auto");
+  let cursorRef = useRef8("auto");
   const onPointerDown = useCallback6((e) => {
     const target = domRef.current;
     cursorRef.current = target.style.cursor;
@@ -5498,9 +5535,9 @@ import { createPortal } from "react-dom";
 
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
 import {
-  createElement as createElement10
+  createElement as createElement9
 } from "react";
-import { useEffect as useEffect11, useState as useState7 } from "react";
+import { useEffect as useEffect12, useState as useState7 } from "react";
 var defaultLineStyle = {
   marginTop: 2,
   marginBottom: 2,
@@ -5524,7 +5561,7 @@ function SortIcon(props) {
   }), props.lineStyle), {
     opacity
   });
-  useEffect11(() => {
+  useEffect12(() => {
     const newOpacity = direction != 0 ? 1 : 0;
     if (!rendered && newOpacity) {
       setRendered(true);
@@ -5554,18 +5591,18 @@ function SortIcon(props) {
   if (direction === -1) {
     indexStyle.top = "100%";
   }
-  return /* @__PURE__ */ createElement10("div", {
+  return /* @__PURE__ */ createElement9("div", {
     style: __spreadProps(__spreadValues({}, style), { width: size }),
     className: join(className, InfiniteTableIconClassName, `${InfiniteTableIconClassName}-sort`)
-  }, showIndex ? /* @__PURE__ */ createElement10("div", {
+  }, showIndex ? /* @__PURE__ */ createElement9("div", {
     "data-name": "index",
     style: indexStyle
-  }, index) : null, /* @__PURE__ */ createElement10("div", {
+  }, index) : null, /* @__PURE__ */ createElement9("div", {
     style: __spreadValues({ width: sizes[0] }, lineStyle),
     onTransitionEnd
-  }), /* @__PURE__ */ createElement10("div", {
+  }), /* @__PURE__ */ createElement9("div", {
     style: __spreadValues({ width: sizes[1] }, lineStyle)
-  }), /* @__PURE__ */ createElement10("div", {
+  }), /* @__PURE__ */ createElement9("div", {
     style: __spreadValues({ width: sizes[2] }, lineStyle)
   }));
 }
@@ -5595,7 +5632,7 @@ function InfiniteTableHeaderCell(props) {
     domRef.current = node;
     (_a2 = props.domRef) == null ? void 0 : _a2.call(props, node);
   }, [props.domRef]);
-  const sortTool = /* @__PURE__ */ createElement11(SortIcon, {
+  const sortTool = /* @__PURE__ */ createElement10(SortIcon, {
     index: column.computedMultiSort ? column.computedSortIndex + 1 : void 0,
     className: `${InfiniteTableHeaderCellClassName}__sort-icon ${HeaderSortIconCls}`,
     direction: column.computedSorted ? column.computedSortedAsc ? 1 : -1 : 0
@@ -5608,7 +5645,7 @@ function InfiniteTableHeaderCell(props) {
   };
   const renderChildren = () => {
     if (header instanceof Function) {
-      header = /* @__PURE__ */ createElement11(RenderHookComponent, {
+      header = /* @__PURE__ */ createElement10(RenderHookComponent, {
         render: header,
         renderParam
       });
@@ -5616,12 +5653,12 @@ function InfiniteTableHeaderCell(props) {
     header = header != null ? header : column.name;
     return header;
   };
-  const domRef = useRef8(null);
+  const domRef = useRef9(null);
   const {
     computed: { computedRemainingSpace },
     componentState: { portalDOMRef }
   } = useInfiniteTable();
-  useEffect12(() => {
+  useEffect13(() => {
     let clearOnResize = null;
     const node = domRef.current;
     if (onResize && node) {
@@ -5644,7 +5681,7 @@ function InfiniteTableHeaderCell(props) {
   let offset = offsetFromProps != null ? offsetFromProps : virtualized ? 0 : column.computedPinningOffset;
   let draggingProxy = null;
   if (dragging) {
-    draggingProxy = /* @__PURE__ */ createElement11("div", {
+    draggingProxy = /* @__PURE__ */ createElement10("div", {
       className: `${InfiniteTableHeaderCellClassName}Proxy ${HeaderCellProxy}`,
       style: {
         position: "absolute",
@@ -5658,9 +5695,9 @@ function InfiniteTableHeaderCell(props) {
     draggingProxy = createPortal(draggingProxy, portalDOMRef.current);
   }
   const ContextProvider = InfiniteTableHeaderCellContext.Provider;
-  return /* @__PURE__ */ createElement11(ContextProvider, {
+  return /* @__PURE__ */ createElement10(ContextProvider, {
     value: renderParam
-  }, /* @__PURE__ */ createElement11(InfiniteTableCell, {
+  }, /* @__PURE__ */ createElement10(InfiniteTableCell, {
     domRef: ref,
     cellType: "header",
     column,
@@ -5683,15 +5720,15 @@ function useInfiniteHeaderCell() {
 
 // src/components/RawList/index.tsx
 import {
-  createElement as createElement14,
+  createElement as createElement13,
   memo as memo5
 } from "react";
-import { useEffect as useEffect13 } from "react";
+import { useEffect as useEffect14 } from "react";
 
 // src/components/RawList/AvoidReactDiff.tsx
 import {
-  Fragment as Fragment4,
-  createElement as createElement12,
+  Fragment as Fragment3,
+  createElement as createElement11,
   memo as memo4
 } from "react";
 import { useLayoutEffect as useLayoutEffect3, useState as useState8 } from "react";
@@ -5703,7 +5740,7 @@ function AvoidReactDiffFn(props) {
     });
     return remove;
   }, [props.updater]);
-  return /* @__PURE__ */ createElement12(Fragment4, null, children);
+  return /* @__PURE__ */ createElement11(Fragment3, null, children);
 }
 var AvoidReactDiff = memo4(AvoidReactDiffFn);
 
@@ -5712,7 +5749,7 @@ import { useMemo as useMemo8 } from "react";
 
 // src/components/RawList/ReactVirtualRenderer.tsx
 import {
-  createElement as createElement13
+  createElement as createElement12
 } from "react";
 
 // src/components/RawList/MappedItems.ts
@@ -5958,7 +5995,7 @@ var ReactVirtualRenderer = class extends Logger {
     };
     this.itemDOMRefs[elementIndex] = domRef;
     this.updaters[elementIndex] = buildSubscriptionCallback();
-    const item = /* @__PURE__ */ createElement13(AvoidReactDiff, {
+    const item = /* @__PURE__ */ createElement12(AvoidReactDiff, {
       key: elementIndex,
       name: `${elementIndex}`,
       updater: this.updaters[elementIndex]
@@ -5994,7 +6031,7 @@ var ReactVirtualRenderer = class extends Logger {
     }
     this.mappedItems.renderItemAtElement(itemIndex, elementIndex, renderedNode);
     if (true) {
-      this.debug(`Render item ${itemIndex} at element ${elementIndex}`);
+      dbg(`ReactVirtualRenderer:${this.brain.getOptions().mainAxis}`)(`Render item ${itemIndex} at element ${elementIndex}`);
     }
     itemUpdater(renderedNode);
     this.updateElementPosition(elementIndex);
@@ -6037,7 +6074,7 @@ function RawListFn(props) {
     debugChannel
   });
   const getRenderItem = useLatest(renderItem);
-  useEffect13(() => {
+  useEffect14(() => {
     const renderRange = brain.getRenderRange();
     renderer.renderRange(renderRange, {
       renderItem,
@@ -6045,7 +6082,7 @@ function RawListFn(props) {
       onRender: onRenderUpdater
     });
   }, [brain, renderItem, onRenderUpdater]);
-  useEffect13(() => {
+  useEffect14(() => {
     const remove = brain.onRenderRangeChange((renderRange) => {
       renderer.renderRange(renderRange, {
         force: false,
@@ -6055,7 +6092,7 @@ function RawListFn(props) {
     });
     return remove;
   }, [brain, onRenderUpdater]);
-  return /* @__PURE__ */ createElement14(AvoidReactDiff, {
+  return /* @__PURE__ */ createElement13(AvoidReactDiff, {
     updater: onRenderUpdater
   });
 }
@@ -6080,14 +6117,14 @@ function InfiniteTableHeaderFn(props) {
       }
       return null;
     }
-    return /* @__PURE__ */ createElement15(InfiniteTableHeaderCell, {
+    return /* @__PURE__ */ createElement14(InfiniteTableHeaderCell, {
       domRef: domRef2,
       column,
       headerHeight,
       columns: computedVisibleColumnsMap
     });
   }, [computedVisibleColumnsMap, columns, repaintId, headerHeight]);
-  useEffect14(() => {
+  useEffect15(() => {
     const onScroll = (scrollPosition) => {
       if (domRef.current) {
         domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
@@ -6096,7 +6133,7 @@ function InfiniteTableHeaderFn(props) {
     const removeOnScroll = brain.onScroll(onScroll);
     return removeOnScroll;
   }, [brain]);
-  const domRef = useRef9(null);
+  const domRef = useRef10(null);
   const headerCls = HeaderClsRecipe({
     pinned: pinning,
     overflow: false,
@@ -6107,7 +6144,7 @@ function InfiniteTableHeaderFn(props) {
     className: join(TableHeaderClassName, `${TableHeaderClassName}--virtualized`, className, headerCls),
     style
   };
-  return /* @__PURE__ */ createElement15("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement15(RawList, {
+  return /* @__PURE__ */ createElement14("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement14(RawList, {
     brain,
     renderItem: renderColumn
   }));
@@ -6116,15 +6153,15 @@ var InfiniteTableHeader = memo6(InfiniteTableHeaderFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderUnvirtualized.tsx
 import {
-  createElement as createElement18,
+  createElement as createElement17,
   memo as memo7,
   useMemo as useMemo9,
-  useRef as useRef10
+  useRef as useRef11
 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/renderColumnHeaderGroups.tsx
 import {
-  createElement as createElement17
+  createElement as createElement16
 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/buildColumnAndGroupTree.ts
@@ -6216,7 +6253,7 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
 import {
-  createElement as createElement16
+  createElement as createElement15
 } from "react";
 var TableHeaderGroupClassName = `${rootClassName}HeaderGroup`;
 function InfiniteTableHeaderGroup(props) {
@@ -6231,16 +6268,16 @@ function InfiniteTableHeaderGroup(props) {
     width: columnGroup.computedWidth,
     height
   };
-  return /* @__PURE__ */ createElement16("div", {
+  return /* @__PURE__ */ createElement15("div", {
     "data-group-id": columnGroup.id,
     className: join(HeaderGroupCls, TableHeaderGroupClassName, `${TableHeaderGroupClassName}--unvirtualized`),
     style
-  }, /* @__PURE__ */ createElement16("div", {
+  }, /* @__PURE__ */ createElement15("div", {
     className: join(`${TableHeaderGroupClassName}__header`, HeaderGroup_Header),
     style: { height: headerHeight }
-  }, /* @__PURE__ */ createElement16("div", {
+  }, /* @__PURE__ */ createElement15("div", {
     className: join(`${TableHeaderGroupClassName}__header-content`, cssEllipsisClassName)
-  }, header)), /* @__PURE__ */ createElement16("div", {
+  }, header)), /* @__PURE__ */ createElement15("div", {
     className: join(`${TableHeaderGroupClassName}__children`, HeaderGroup_Children)
   }, props.children));
 }
@@ -6263,7 +6300,7 @@ function renderColumnHeaderGroups(config) {
     return items2.map((colGroupItem) => {
       if (colGroupItem.type === "column") {
         const col = colGroupItem.ref;
-        return /* @__PURE__ */ createElement17(InfiniteTableHeaderCell, {
+        return /* @__PURE__ */ createElement16(InfiniteTableHeaderCell, {
           key: col.id,
           headerHeight: (columnGroupsMaxDepth - colGroupItem.depth + 2) * headerHeight,
           column: col,
@@ -6277,7 +6314,7 @@ function renderColumnHeaderGroups(config) {
         colIds.push(col.id);
         return col;
       });
-      return /* @__PURE__ */ createElement17(InfiniteTableHeaderGroup, {
+      return /* @__PURE__ */ createElement16(InfiniteTableHeaderGroup, {
         key: `${colGroupItem.uniqueGroupId.join("/")}`,
         columns: columns2,
         height: (columnGroupsMaxDepth - colGroupItem.depth + 2) * headerHeight,
@@ -6297,7 +6334,7 @@ function renderColumnHeaderGroups(config) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderUnvirtualized.tsx
-import { useEffect as useEffect15 } from "react";
+import { useEffect as useEffect16 } from "react";
 var { rootClassName: rootClassName5 } = internalProps;
 var TableHeaderClassName2 = `${rootClassName5}Header`;
 var UPDATE_SCROLL = (node, scrollPosition) => {
@@ -6330,7 +6367,7 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
     },
     computed: { computedVisibleColumnsMap: columnsMap }
   } = useInfiniteTable();
-  const domRef = useRef10(null);
+  const domRef = useRef11(null);
   const hasColumnGroups = computedColumnGroups.size > 0;
   const columnHeaderGroups = useMemo9(() => {
     return hasColumnGroups ? renderColumnHeaderGroups({
@@ -6351,7 +6388,7 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
     columnGroupsMaxDepth
   ]);
   const children = hasColumnGroups ? columnHeaderGroups : columns.map((c) => {
-    return /* @__PURE__ */ createElement18(InfiniteTableHeaderCell, {
+    return /* @__PURE__ */ createElement17(InfiniteTableHeaderCell, {
       key: c.id,
       headerHeight,
       column: c,
@@ -6363,7 +6400,7 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
   if (totalWidth != null) {
     style.width = availableWidth;
   }
-  useEffect15(() => {
+  useEffect16(() => {
     const scroller = brain || scrollListener;
     if (!scroller || !scrollable) {
       return;
@@ -6376,14 +6413,14 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
     const removeOnScroll = scroller.onScroll(onScroll);
     return removeOnScroll;
   }, [brain, scrollListener]);
-  return /* @__PURE__ */ createElement18("div", __spreadProps(__spreadValues({}, domProps), {
+  return /* @__PURE__ */ createElement17("div", __spreadProps(__spreadValues({}, domProps), {
     className: join(TableHeaderClassName2, `${TableHeaderClassName2}--unvirtualized`, pinning ? `${TableHeaderClassName2}--pinned ${TableHeaderClassName2}-${pinning}` : "", scrollable ? `${TableHeaderClassName2}--overflow` : "", domProps.className, HeaderClsRecipe({
       pinned: pinning,
       virtualized: false,
       overflow: scrollable
     })),
     style
-  }), /* @__PURE__ */ createElement18("div", {
+  }), /* @__PURE__ */ createElement17("div", {
     style: { width: totalWidth },
     className: join(flexFlow.row, display.flex),
     ref: domRef
@@ -6422,7 +6459,7 @@ function TableHeaderWrapper(props) {
   const unvirtualizedStyle = !virtualizeHeader && computedPinnedStartColumnsWidth ? {
     left: computedPinnedStartWidth
   } : void 0;
-  const header = virtualizeHeader ? /* @__PURE__ */ createElement19(InfiniteTableHeader, {
+  const header = virtualizeHeader ? /* @__PURE__ */ createElement18(InfiniteTableHeader, {
     columns: computedUnpinnedColumns,
     repaintId: virtualizeHeader ? repaintId : void 0,
     brain,
@@ -6435,7 +6472,7 @@ function TableHeaderWrapper(props) {
     },
     availableWidth: computedUnpinnedColumnsWidth,
     totalWidth: computedUnpinnedColumnsWidth
-  }) : /* @__PURE__ */ createElement19(InfiniteTableHeaderUnvirtualized, {
+  }) : /* @__PURE__ */ createElement18(InfiniteTableHeaderUnvirtualized, {
     style: unvirtualizedStyle,
     brain,
     scrollable: true,
@@ -6444,12 +6481,12 @@ function TableHeaderWrapper(props) {
     availableWidth: computedUnpinnedColumnsWidth,
     totalWidth: computedUnpinnedColumnsWidth
   });
-  return /* @__PURE__ */ createElement19("div", {
+  return /* @__PURE__ */ createElement18("div", {
     className: HeaderWrapperCls,
     style: {
       height: virtualizeHeader ? height : void 0
     }
-  }, hasPinnedStart ? /* @__PURE__ */ createElement19(InfiniteTableHeaderUnvirtualized, {
+  }, hasPinnedStart ? /* @__PURE__ */ createElement18(InfiniteTableHeaderUnvirtualized, {
     style: {
       left: 0,
       position: "absolute",
@@ -6461,7 +6498,7 @@ function TableHeaderWrapper(props) {
     scrollable: computedPinnedStartOverflow,
     pinning: "start",
     scrollListener: computedPinnedStartOverflow ? pinnedStartScrollListener : void 0
-  }) : null, header, hasPinnedEnd ? /* @__PURE__ */ createElement19(InfiniteTableHeaderUnvirtualized, {
+  }) : null, header, hasPinnedEnd ? /* @__PURE__ */ createElement18(InfiniteTableHeaderUnvirtualized, {
     style: {
       right: scrollbars.vertical ? getScrollbarWidth() : 0,
       position: "absolute",
@@ -6473,7 +6510,7 @@ function TableHeaderWrapper(props) {
     scrollable: computedPinnedEndOverflow,
     pinning: "end",
     scrollListener: computedPinnedEndOverflow ? pinnedEndScrollListener : void 0
-  }) : null, scrollbars.vertical ? /* @__PURE__ */ createElement19(VerticalScrollbarPlaceholder, {
+  }) : null, scrollbars.vertical ? /* @__PURE__ */ createElement18(VerticalScrollbarPlaceholder, {
     style: {
       height: "100%",
       right: 0
@@ -6483,15 +6520,15 @@ function TableHeaderWrapper(props) {
 
 // src/components/VirtualScrollContainer/index.tsx
 import {
-  createElement as createElement20,
+  createElement as createElement19,
   forwardRef as forwardRef2
 } from "react";
-import { useRef as useRef11 } from "react";
+import { useRef as useRef12 } from "react";
 
 // src/components/hooks/useOnScroll.ts
-import { useEffect as useEffect16 } from "react";
+import { useEffect as useEffect17 } from "react";
 var useOnScroll = (domRef, onScroll) => {
-  useEffect16(() => {
+  useEffect17(() => {
     const domNode = domRef == null ? void 0 : domRef.current;
     const scrollFn = (event) => {
       const node = event.target;
@@ -6537,9 +6574,9 @@ var VirtualScrollContainer = forwardRef2(function VirtualScrollContainer2(props,
     className,
     style
   } = props;
-  const domRef = ref != null ? ref : useRef11(null);
+  const domRef = ref != null ? ref : useRef12(null);
   useOnScroll(domRef, onContainerScroll);
-  return /* @__PURE__ */ createElement20("div", {
+  return /* @__PURE__ */ createElement19("div", {
     ref: domRef,
     style,
     className: join(className, rootClassName6, VirtualScrollContainerCls, getScrollableClassName(scrollable))
@@ -6548,7 +6585,7 @@ var VirtualScrollContainer = forwardRef2(function VirtualScrollContainer2(props,
 
 // src/components/VirtualList/SpacePlaceholder.tsx
 import {
-  createElement as createElement21,
+  createElement as createElement20,
   memo as memo8
 } from "react";
 function SpacePlaceholderFn(props) {
@@ -6560,7 +6597,7 @@ function SpacePlaceholderFn(props) {
     opacity: 0,
     pointerEvents: "none"
   };
-  return /* @__PURE__ */ createElement21("div", {
+  return /* @__PURE__ */ createElement20("div", {
     "data-count": count,
     "data-placeholder-width": true ? width : void 0,
     "data-placeholder-height": true ? height : void 0,
@@ -6571,26 +6608,26 @@ function SpacePlaceholderFn(props) {
 var SpacePlaceholder = memo8(SpacePlaceholderFn);
 
 // src/components/InfiniteTable/hooks/useListRendering.tsx
-import { useEffect as useEffect22, useMemo as useMemo11, useRef as useRef17 } from "react";
+import { useEffect as useEffect23, useMemo as useMemo11, useRef as useRef18 } from "react";
 
 // src/components/InfiniteTable/hooks/useUnpinnedRendering.tsx
 import {
-  createElement as createElement27
+  createElement as createElement26
 } from "react";
 import { useCallback as useCallback12 } from "react";
 
 // src/components/VirtualList/VirtualRowList.tsx
 import {
-  createElement as createElement23,
+  createElement as createElement22,
   useCallback as useCallback9
 } from "react";
 
 // src/components/VirtualList/VirtualList.tsx
 import {
-  Fragment as Fragment5,
-  createElement as createElement22
+  Fragment as Fragment4,
+  createElement as createElement21
 } from "react";
-import { useRef as useRef12, useEffect as useEffect17, useState as useState9 } from "react";
+import { useRef as useRef13, useEffect as useEffect18, useState as useState9 } from "react";
 
 // src/components/VirtualList/VirtualList.css.ts
 var VirtualListCls = "_16lm1iw1 _16lm1iw8 _16lm1iw0";
@@ -6633,11 +6670,11 @@ var VirtualList = (props) => {
     "onContainerScroll",
     "children"
   ]);
-  const domRef = useRef12(null);
+  const domRef = useRef13(null);
   const [, rerender] = useRerender();
   const [totalSize, setTotalSize] = useState9(0);
-  const renderCountRef = useRef12(0);
-  useEffect17(() => {
+  const renderCountRef = useRef13(0);
+  useEffect18(() => {
     const removeOnRenderCount = virtualBrain.onRenderCountChange((renderCount) => {
       renderCountRef.current = renderCount;
       if (true) {
@@ -6656,7 +6693,7 @@ var VirtualList = (props) => {
       removeOnTotalSizeChange();
     };
   }, [virtualBrain]);
-  useEffect17(() => {
+  useEffect18(() => {
     const onScroll = (scrollPosition) => {
       UPDATE_SCROLL2(domRef.current, scrollPosition);
     };
@@ -6671,19 +6708,19 @@ var VirtualList = (props) => {
   if (true) {
     domProps["data-cmp-name"] = `VirtualList`;
   }
-  return /* @__PURE__ */ createElement22(Fragment5, null, /* @__PURE__ */ createElement22("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement22(VirtualScrollContainer, {
+  return /* @__PURE__ */ createElement21(Fragment4, null, /* @__PURE__ */ createElement21("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement21(VirtualScrollContainer, {
     scrollable,
     onContainerScroll
-  }, /* @__PURE__ */ createElement22("div", {
+  }, /* @__PURE__ */ createElement21("div", {
     ref: domRef,
     className: scrollTransformTargetCls,
     "data-name": "scroll-transform-target"
-  }, /* @__PURE__ */ createElement22(RawList, {
+  }, /* @__PURE__ */ createElement21(RawList, {
     brain: virtualBrain,
     renderItem,
     repaintId,
     debugChannel: "VirtualList-" + mainAxis
-  })), children, /* @__PURE__ */ createElement22(SpacePlaceholder, {
+  })), children, /* @__PURE__ */ createElement21(SpacePlaceholder, {
     count,
     width,
     height
@@ -6700,7 +6737,7 @@ var VirtualRowList = (props) => {
       rowIndex: renderProps.itemIndex
     });
   }, [renderRow]);
-  return /* @__PURE__ */ createElement23(VirtualList, __spreadProps(__spreadValues({}, listProps), {
+  return /* @__PURE__ */ createElement22(VirtualList, __spreadProps(__spreadValues({}, listProps), {
     renderItem,
     mainAxis: "vertical",
     itemMainAxisSize: rowHeight,
@@ -6710,16 +6747,16 @@ var VirtualRowList = (props) => {
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRow.tsx
 import {
-  createElement as createElement25,
+  createElement as createElement24,
   memo as memo10,
   useCallback as useCallback11
 } from "react";
-import { useRef as useRef14 } from "react";
+import { useRef as useRef15 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
 import {
   createContext as createContext5,
-  createElement as createElement24,
+  createElement as createElement23,
   memo as memo9
 } from "react";
 import { useContext as useContext6 } from "react";
@@ -6789,7 +6826,7 @@ function InfiniteTableColumnCellFn(props) {
     }
     const renderFn = column.render || column.renderValue;
     if (renderFn) {
-      return /* @__PURE__ */ createElement24(RenderHookComponent, {
+      return /* @__PURE__ */ createElement23(RenderHookComponent, {
         render: renderFn,
         renderParam
       });
@@ -6836,9 +6873,9 @@ function InfiniteTableColumnCellFn(props) {
     renderChildren
   });
   const ContextProvider = InfiniteTableColumnCellContext.Provider;
-  return /* @__PURE__ */ createElement24(ContextProvider, {
+  return /* @__PURE__ */ createElement23(ContextProvider, {
     value: renderParam
-  }, /* @__PURE__ */ createElement24(InfiniteTableCell, __spreadValues({}, cellProps)));
+  }, /* @__PURE__ */ createElement23(InfiniteTableCell, __spreadValues({}, cellProps)));
 }
 var InfiniteTableColumnCell = memo9(InfiniteTableColumnCellFn);
 function useInfiniteColumnCell() {
@@ -6849,7 +6886,7 @@ function useInfiniteColumnCell() {
 // src/components/InfiniteTable/components/InfiniteTableRow/useRowDOMProps.ts
 import {
   useCallback as useCallback10,
-  useRef as useRef13
+  useRef as useRef14
 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRowClassName.ts
@@ -6876,7 +6913,7 @@ function useRowDOMProps(props, rowProps, rowStyle, rowClassName, groupRenderStra
     rowInfo,
     rowSpan
   } = props;
-  const domRef = useRef13(null);
+  const domRef = useRef14(null);
   const rowDOMRef = useCallback10((node) => {
     domRefFromProps(node);
     domRef.current = node;
@@ -6978,13 +7015,13 @@ function InfiniteTableRowFn(props) {
     width: rowWidth,
     height: rowHeight
   }, domProps.style);
-  const renderCellRef = useRef14(null);
+  const renderCellRef = useRef15(null);
   const renderCell = useCallback11(({ domRef, itemIndex }) => {
     const column = columns[itemIndex];
     if (!column) {
     }
     const hidden = false;
-    return /* @__PURE__ */ createElement25(InfiniteTableColumnCell, {
+    return /* @__PURE__ */ createElement24(InfiniteTableColumnCell, {
       getData,
       rowInfo,
       groupRenderStrategy,
@@ -7011,9 +7048,9 @@ function InfiniteTableRowFn(props) {
   if (true) {
     domProps["data-cmp-name"] = "ITableRow";
   }
-  return /* @__PURE__ */ createElement25("div", __spreadProps(__spreadValues({}, domProps), {
+  return /* @__PURE__ */ createElement24("div", __spreadProps(__spreadValues({}, domProps), {
     style
-  }), /* @__PURE__ */ createElement25(RawList, {
+  }), /* @__PURE__ */ createElement24(RawList, {
     brain,
     renderItem: renderCell,
     debugChannel: `${rowIndex}`
@@ -7023,7 +7060,7 @@ var InfiniteTableRow = memo10(InfiniteTableRowFn);
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRowUnvirtualized.tsx
 import {
-  createElement as createElement26,
+  createElement as createElement25,
   memo as memo11
 } from "react";
 function TableRowUnvirtualizedFn(props) {
@@ -7046,7 +7083,7 @@ function TableRowUnvirtualizedFn(props) {
   }, domProps.style);
   const children = columns.map((col) => {
     const hidden = false;
-    return /* @__PURE__ */ createElement26(InfiniteTableColumnCell, {
+    return /* @__PURE__ */ createElement25(InfiniteTableColumnCell, {
       key: col.id,
       virtualized: false,
       rowHeight,
@@ -7059,7 +7096,7 @@ function TableRowUnvirtualizedFn(props) {
       column: col
     });
   });
-  return /* @__PURE__ */ createElement26("div", __spreadProps(__spreadValues({}, domProps), {
+  return /* @__PURE__ */ createElement25("div", __spreadProps(__spreadValues({}, domProps), {
     style
   }), children);
 }
@@ -7108,7 +7145,7 @@ function useUnpinnedRendering(params) {
       rowProps.repaintId = repaintId;
     }
     const TableRowComponent = shouldVirtualizeColumns ? InfiniteTableRow : TableRowUnvirtualized;
-    return /* @__PURE__ */ createElement27(TableRowComponent, __spreadValues({}, rowProps));
+    return /* @__PURE__ */ createElement26(TableRowComponent, __spreadValues({}, rowProps));
   }, [
     repaintId,
     rowHeight,
@@ -7119,7 +7156,7 @@ function useUnpinnedRendering(params) {
     horizontalVirtualBrain,
     verticalVirtualBrain
   ]);
-  const fakeScrollbar = getScrollbarWidth() ? /* @__PURE__ */ createElement27("div", {
+  const fakeScrollbar = getScrollbarWidth() ? /* @__PURE__ */ createElement26("div", {
     "data-name": "horizontal-scrollbar-placeholder--fake",
     style: {
       position: "absolute",
@@ -7130,10 +7167,10 @@ function useUnpinnedRendering(params) {
       overflow: "auto",
       visibility: columnShifts ? "visible" : "hidden"
     }
-  }, /* @__PURE__ */ createElement27("div", {
+  }, /* @__PURE__ */ createElement26("div", {
     style: { height: "100%", width: computedUnpinnedColumnsWidth }
   })) : null;
-  return rowHeight != 0 ? /* @__PURE__ */ createElement27(VirtualRowList, {
+  return rowHeight != 0 ? /* @__PURE__ */ createElement26(VirtualRowList, {
     repaintId: `${repaintId}-unpinned-`,
     brain: verticalVirtualBrain,
     onContainerScroll: applyScrollHorizontal,
@@ -7154,7 +7191,7 @@ function useUnpinnedRendering(params) {
 }
 
 // src/components/InfiniteTable/hooks/useOnContainerScroll.ts
-import { useCallback as useCallback13, useEffect as useEffect18, useRef as useRef15 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect19, useRef as useRef16 } from "react";
 
 // src/components/InfiniteTable/InfiniteCls.css.ts
 var import_createRuntimeFn5 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
@@ -7179,7 +7216,6 @@ var useOnContainerScroll = ({
     componentState: {
       scrollStopDelay,
       scrollerDOMRef,
-      domRef,
       scrollToBottomOffset,
       onScrollToBottom,
       onScrollToTop,
@@ -7196,10 +7232,10 @@ var useOnContainerScroll = ({
     onScrollStopFromProps == null ? void 0 : onScrollStopFromProps(param);
     notifyScrollStop(param);
   }, [onScrollStopFromProps, notifyScrollStop]);
-  const timeoutIdRef = useRef15(0);
-  const scrollingRef = useRef15(false);
-  const scrollTopMaxRef = useRef15(0);
-  useEffect18(() => {
+  const timeoutIdRef = useRef16(0);
+  const scrollingRef = useRef16(false);
+  const scrollTopMaxRef = useRef16(0);
+  useEffect19(() => {
     const { current: node } = scrollerDOMRef;
     scrollTopMaxRef.current = node.scrollHeight - node.clientHeight;
   }, [reservedContentHeight, bodySize.height]);
@@ -7225,7 +7261,7 @@ var useOnContainerScroll = ({
           lastVisibleRowIndex: range.renderEndIndex
         });
       }
-      const classList = (_a = domRef.current) == null ? void 0 : _a.classList;
+      const classList = (_a = scrollerDOMRef.current) == null ? void 0 : _a.classList;
       if (!classList) {
         return;
       }
@@ -7243,10 +7279,10 @@ var useOnContainerScroll = ({
   }, [
     horizontalVirtualBrain,
     verticalVirtualBrain,
-    domRef.current,
+    scrollerDOMRef.current,
     setScrolling
   ]);
-  const scrollPositionRef = useRef15({
+  const scrollPositionRef = useRef16({
     scrollLeft: 0,
     scrollTop: 0
   });
@@ -7277,21 +7313,21 @@ var useOnContainerScroll = ({
 
 // src/components/InfiniteTable/hooks/usePinnedRendering.tsx
 import {
-  createElement as createElement29,
+  createElement as createElement28,
   useMemo as useMemo10
 } from "react";
 import { useCallback as useCallback15 } from "react";
 
 // src/components/VirtualList/RowListWithExternalScrolling.tsx
 import {
-  createElement as createElement28
+  createElement as createElement27
 } from "react";
-import { useEffect as useEffect20, useCallback as useCallback14, useRef as useRef16 } from "react";
+import { useEffect as useEffect21, useCallback as useCallback14, useRef as useRef17 } from "react";
 
 // src/components/hooks/useOnMount.ts
-import { useEffect as useEffect19 } from "react";
+import { useEffect as useEffect20 } from "react";
 function useOnMount(domRef, props) {
-  useEffect19(() => {
+  useEffect20(() => {
     const { onMount, onUnmount } = props;
     const node = domRef == null ? void 0 : domRef.current;
     onMount == null ? void 0 : onMount(node);
@@ -7322,7 +7358,7 @@ var RowListWithExternalScrolling = (props) => {
     onMount,
     onUnmount
   } = props;
-  const domRef = useRef16(null);
+  const domRef = useRef17(null);
   const renderItem = useCallback14((renderProps) => renderRow({
     domRef: renderProps.domRef,
     rowHeight: renderProps.itemSize,
@@ -7332,7 +7368,7 @@ var RowListWithExternalScrolling = (props) => {
     onMount,
     onUnmount
   });
-  useEffect20(() => {
+  useEffect21(() => {
     const onScroll = (scrollPosition) => {
       const node = domRef.current;
       if (node) {
@@ -7361,7 +7397,7 @@ var RowListWithExternalScrolling = (props) => {
   if (true) {
     domProps["data-cmp-name"] = "RowListWithExternalScrolling";
   }
-  return /* @__PURE__ */ createElement28("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement28(RawList, {
+  return /* @__PURE__ */ createElement27("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement27(RawList, {
     brain,
     renderItem,
     repaintId
@@ -7410,7 +7446,7 @@ function PinnedRowsContainer(props) {
     className: join(`${PinnedRowsContainerClassName}`, PinnedRowsClsVariants[pinning === "start" ? "pinnedStart" : "pinnedEnd"], `${PinnedRowsContainerClassName}--pinned-${pinning}`, `${PinnedRowsContainerClassName}--overflow`, PinnedRowsClsVariants.overflow)
   };
   if (hasOverflow) {
-    return /* @__PURE__ */ createElement29(VirtualScrollContainer, {
+    return /* @__PURE__ */ createElement28(VirtualScrollContainer, {
       scrollable: {
         horizontal: true,
         vertical: false
@@ -7426,18 +7462,18 @@ function PinnedRowsContainer(props) {
       className: join(PinnedRowsContainerClsVariants({
         pinned: pinning
       }), `${PinnedRowsContainerClassName}Container`, `${PinnedRowsContainerClassName}Container--pinned-${pinning}`)
-    }, /* @__PURE__ */ createElement29(RowListWithExternalScrolling, __spreadProps(__spreadValues({}, rowListProps), {
+    }, /* @__PURE__ */ createElement28(RowListWithExternalScrolling, __spreadProps(__spreadValues({}, rowListProps), {
       onMount: (node) => {
         pinnedScrollListener == null ? void 0 : pinnedScrollListener.onScroll((scrollPosition) => {
           updateScroll(node, brain.getScrollPosition(), scrollPosition);
         });
       }
-    })), /* @__PURE__ */ createElement29(SpacePlaceholder, {
+    })), /* @__PURE__ */ createElement28(SpacePlaceholder, {
       width: rowWidth,
       height: 1
     }));
   }
-  return /* @__PURE__ */ createElement29(RowListWithExternalScrolling, __spreadValues({}, rowListProps));
+  return /* @__PURE__ */ createElement28(RowListWithExternalScrolling, __spreadValues({}, rowListProps));
 }
 function useRenderPinnedRow(params) {
   const { getData, getState, columnsWidth, columns, rowSpan, verticalBrain } = params;
@@ -7458,7 +7494,7 @@ function useRenderPinnedRow(params) {
       rowWidth: columnsWidth,
       columns
     }, rowParams);
-    return /* @__PURE__ */ createElement29(TableRowUnvirtualized, __spreadValues({}, rowProps));
+    return /* @__PURE__ */ createElement28(TableRowUnvirtualized, __spreadValues({}, rowProps));
   }, [columnsWidth, columns, verticalBrain, dataArray]);
   return renderPinnedRow;
 }
@@ -7504,7 +7540,7 @@ function usePinnedRenderingForSide(side, params) {
     columns,
     columnsWidth
   });
-  const pinnedList = columns.length && rowHeight !== 0 ? /* @__PURE__ */ createElement29(PinnedRowsContainer, {
+  const pinnedList = columns.length && rowHeight !== 0 ? /* @__PURE__ */ createElement28(PinnedRowsContainer, {
     pinning: side,
     pinnedScrollListener,
     hasOverflow,
@@ -7517,7 +7553,7 @@ function usePinnedRenderingForSide(side, params) {
     brain: verticalVirtualBrain,
     renderRow: renderRowPinned
   }) : null;
-  const pinnedScrollbarPlaceholder = pinnedList && hasHorizontalScrollbar && !hasOverflow ? /* @__PURE__ */ createElement29(HorizontalScrollbarPlaceholder, {
+  const pinnedScrollbarPlaceholder = pinnedList && hasHorizontalScrollbar && !hasOverflow ? /* @__PURE__ */ createElement28(HorizontalScrollbarPlaceholder, {
     style: side === "end" ? {
       width: columnsWidth,
       right: hasVerticalScrollbar ? getScrollbarWidth() : 0
@@ -7559,7 +7595,7 @@ function usePinnedStartRendering(params) {
 }
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
-import { useEffect as useEffect21 } from "react";
+import { useEffect as useEffect22 } from "react";
 
 // src/components/InfiniteTable/hooks/useColumnSizeFn.ts
 import { useCallback as useCallback16 } from "react";
@@ -7595,13 +7631,13 @@ function useYourBrain(param) {
     globalThis.verticalVirtualBrain = verticalVirtualBrain;
     globalThis.horizontalVirtualBrain = horizontalVirtualBrain;
   }
-  useEffect21(() => {
+  useEffect22(() => {
     verticalVirtualBrain.setAvailableSize({
       height: bodySize.height,
       width: 0
     });
   }, [bodySize, verticalVirtualBrain]);
-  useEffect21(() => {
+  useEffect22(() => {
     horizontalVirtualBrain.setAvailableSize({
       height: 0,
       width: Math.max(bodySize.width - computedPinnedStartWidth - computedPinnedEndWidth, 0)
@@ -7642,7 +7678,7 @@ function useListRendering(param) {
     horizontalVirtualBrain
   } = componentState;
   const prevDataSourceTimestamp = usePrevious(dataSourceState.updatedAt);
-  const repaintIdRef = useRef17(0);
+  const repaintIdRef = useRef18(0);
   if (prevDataSourceTimestamp !== dataSourceState.updatedAt || !shallowEqualObjects(prevComputed, computed)) {
     repaintIdRef.current++;
   }
@@ -7665,7 +7701,7 @@ function useListRendering(param) {
     vertical: hasVerticalScrollbar,
     horizontal: hasHorizontalScrollbar
   }), [hasVerticalScrollbar, hasHorizontalScrollbar]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (!bodySize.height) {
       return;
     }
@@ -7721,7 +7757,7 @@ function useListRendering(param) {
     computedUnpinnedColumns
   });
   const [, rerender] = useRerender();
-  useEffect22(() => {
+  useEffect23(() => {
     rerender();
   }, [dataSourceState]);
   const { pinnedStartList, pinnedStartScrollbarPlaceholder } = usePinnedStartRendering(pinnedRenderingParams);
@@ -7745,12 +7781,12 @@ function useListRendering(param) {
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
 import {
-  createElement as createElement30,
+  createElement as createElement29,
   forwardRef as forwardRef3,
   useCallback as useCallback17,
-  useRef as useRef18
+  useRef as useRef19
 } from "react";
-import { useEffect as useEffect23 } from "react";
+import { useEffect as useEffect24 } from "react";
 
 // src/components/utils/decamelize.ts
 function decamelize(str, options) {
@@ -7787,7 +7823,7 @@ var enforceStyle = (node, style) => {
 };
 var InfiniteTableLicenseFooter = forwardRef3(function InfiniteTableLicenseFooter2(props, ref) {
   const { rootClassName: rootClassName12 } = useInternalProps();
-  const domRef = useRef18(null);
+  const domRef = useRef19(null);
   const domCallback = useCallback17((node) => {
     domRef.current = node;
     if (!ref) {
@@ -7799,7 +7835,7 @@ var InfiniteTableLicenseFooter = forwardRef3(function InfiniteTableLicenseFooter
       ref.current = node;
     }
   }, []);
-  useEffect23(() => {
+  useEffect24(() => {
     const forceStyle = () => {
       requestAnimationFrame(() => {
         var _a;
@@ -7813,12 +7849,12 @@ var InfiniteTableLicenseFooter = forwardRef3(function InfiniteTableLicenseFooter
       clearInterval(intervalId);
     };
   }, []);
-  return /* @__PURE__ */ createElement30("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ createElement29("div", __spreadProps(__spreadValues({
     ref: domCallback
   }, props), {
     className: join(`${rootClassName12}-Footer`, FooterCls, props.className),
     style: defaultStyle2
-  }), "Powered by", " ", /* @__PURE__ */ createElement30("a", {
+  }), "Powered by", " ", /* @__PURE__ */ createElement29("a", {
     href: "https://infinite-table.com",
     rel: "noopener noreferrer",
     role: "link",
@@ -7988,7 +8024,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo12(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.2.16"
+      version: "0.2.19"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -8000,11 +8036,11 @@ var useLicense = (licenseKey = "") => {
 
 // src/components/CSSVariableWatch.tsx
 import {
-  createElement as createElement31,
+  createElement as createElement30,
   useCallback as useCallback18,
   useLayoutEffect as useLayoutEffect4
 } from "react";
-import { useRef as useRef19 } from "react";
+import { useRef as useRef20 } from "react";
 var error = err("CSSVariableWatch");
 var debug6 = dbg("CSSVariableWatch");
 var WRAPPER_STYLE = {
@@ -8017,7 +8053,7 @@ var WRAPPER_STYLE = {
   overflow: "hidden"
 };
 var useCSSVariableWatch = (params) => {
-  const lastValueRef = useRef19(0);
+  const lastValueRef = useRef20(0);
   const onResize = useCallback18(({ height }) => {
     if (height && height !== lastValueRef.current) {
       lastValueRef.current = height;
@@ -8037,15 +8073,15 @@ var useCSSVariableWatch = (params) => {
   }, []);
 };
 var CSSVariableWatch = (props) => {
-  const domRef = useRef19(null);
+  const domRef = useRef20(null);
   useCSSVariableWatch(__spreadProps(__spreadValues({}, props), {
     ref: domRef
   }));
-  return /* @__PURE__ */ createElement31("div", {
+  return /* @__PURE__ */ createElement30("div", {
     "data-name": "css-variable-watcher",
     "data-var": props.varName,
     style: WRAPPER_STYLE
-  }, /* @__PURE__ */ createElement31("div", {
+  }, /* @__PURE__ */ createElement30("div", {
     ref: domRef,
     style: {
       height: props.varName.startsWith("var(") ? props.varName : `var(${props.varName})`
@@ -8139,7 +8175,7 @@ function useDOMProps(initialDOMProps) {
 
 // src/components/InfiniteTable/components/LoadMask.tsx
 import {
-  createElement as createElement32,
+  createElement as createElement31,
   memo as memo12
 } from "react";
 
@@ -8153,11 +8189,11 @@ var { rootClassName: rootClassName11 } = internalProps;
 var baseCls = `${rootClassName11}-LoadMask`;
 function LoadMaskFn(props) {
   const { visible, children = "Loading" } = props;
-  return /* @__PURE__ */ createElement32("div", {
+  return /* @__PURE__ */ createElement31("div", {
     className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls}`
-  }, /* @__PURE__ */ createElement32("div", {
+  }, /* @__PURE__ */ createElement31("div", {
     className: `${LoadMaskOverlayCls} ${baseCls}-Overlay`
-  }), /* @__PURE__ */ createElement32("div", {
+  }), /* @__PURE__ */ createElement31("div", {
     className: `${LoadMaskTextCls} ${baseCls}-Text`
   }, children));
 }
@@ -8165,8 +8201,8 @@ var LoadMask = memo12(LoadMaskFn);
 
 // src/components/InfiniteTable/hooks/useAutoSizeColumns.ts
 import {
-  useEffect as useEffect24,
-  useRef as useRef20,
+  useEffect as useEffect25,
+  useRef as useRef21,
   useState as useState10
 } from "react";
 var OFFSET = 10;
@@ -8236,8 +8272,8 @@ function useAutoSizeColumns() {
   const [refreshId, setRefreshId] = useState10(0);
   const theKey = typeof autoSizeColumnsKey === "object" ? autoSizeColumnsKey.key : autoSizeColumnsKey;
   const getTheKey = useLatest(theKey);
-  const lastExecutedIdentifierRef = useRef20(null);
-  useEffect24(() => {
+  const lastExecutedIdentifierRef = useRef21(null);
+  useEffect25(() => {
     const key = getTheKey();
     if (key == null) {
       return;
@@ -8255,7 +8291,7 @@ function useAutoSizeColumns() {
       removeHorizontal();
     };
   }, [verticalVirtualBrain, horizontalVirtualBrain]);
-  useEffect24(() => {
+  useEffect25(() => {
     var _a;
     if (theKey == null) {
       return;
@@ -8363,7 +8399,7 @@ var InfiniteTableComponent = memo13(function InfiniteTableComponent2() {
     bodySize,
     computed
   });
-  useEffect25(() => {
+  useEffect26(() => {
     const dataSourceState = getDataSourceState();
     const onChange = debounce((renderRange) => {
       dataSourceState.notifyRenderRangeChange(renderRange);
@@ -8382,35 +8418,35 @@ var InfiniteTableComponent = memo13(function InfiniteTableComponent2() {
     }
     notifyScrollbarsChange(scrollbars);
   }, [scrollbars]);
-  useEffect25(() => {
+  useEffect26(() => {
     dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
   }, [scrollStopDelay]);
   useAutoSizeColumns();
-  return /* @__PURE__ */ createElement33("div", __spreadValues({
+  return /* @__PURE__ */ createElement32("div", __spreadValues({
     ref: domRef
-  }, domProps), header ? /* @__PURE__ */ createElement33(TableHeaderWrapper, {
+  }, domProps), header ? /* @__PURE__ */ createElement32(TableHeaderWrapper, {
     brain: horizontalVirtualBrain,
     repaintId,
     scrollbars
-  }) : null, /* @__PURE__ */ createElement33(InfiniteTableBody, null, /* @__PURE__ */ createElement33(VirtualScrollContainer, {
+  }) : null, /* @__PURE__ */ createElement32(InfiniteTableBody, null, /* @__PURE__ */ createElement32(VirtualScrollContainer, {
     ref: scrollerDOMRef,
     onContainerScroll: applyScrollVertical,
     scrollable: ONLY_VERTICAL_SCROLLBAR
-  }, /* @__PURE__ */ createElement33("div", {
+  }, /* @__PURE__ */ createElement32("div", {
     className: display.flex
-  }, pinnedStartList, centerList, pinnedEndList), /* @__PURE__ */ createElement33(SpacePlaceholder, {
+  }, pinnedStartList, centerList, pinnedEndList), /* @__PURE__ */ createElement32(SpacePlaceholder, {
     count: dataArray.length,
     width: 0,
     height: reservedContentHeight
-  })), pinnedStartScrollbarPlaceholder, pinnedEndScrollbarPlaceholder, /* @__PURE__ */ createElement33(LoadMaskCmp, {
+  })), pinnedStartScrollbarPlaceholder, pinnedEndScrollbarPlaceholder, /* @__PURE__ */ createElement32(LoadMaskCmp, {
     visible: loading
-  }, loadingText)), licenseValid ? null : /* @__PURE__ */ createElement33(InfiniteTableLicenseFooter, null), /* @__PURE__ */ createElement33("div", {
+  }, loadingText)), licenseValid ? null : /* @__PURE__ */ createElement32(InfiniteTableLicenseFooter, null), /* @__PURE__ */ createElement32("div", {
     ref: portalDOMRef,
     className: join(`${rootClassName}Portal`, zIndex[1e3], position.absolute, top[0], left[0])
-  }), rowHeightCSSVar ? /* @__PURE__ */ createElement33(CSSVariableWatch, {
+  }), rowHeightCSSVar ? /* @__PURE__ */ createElement32(CSSVariableWatch, {
     varName: rowHeightCSSVar,
     onChange: onRowHeightCSSVarChange
-  }) : null, headerHeightCSSVar ? /* @__PURE__ */ createElement33(CSSVariableWatch, {
+  }) : null, headerHeightCSSVar ? /* @__PURE__ */ createElement32(CSSVariableWatch, {
     varName: headerHeightCSSVar,
     onChange: onHeaderHeightCSSVarChange
   }) : null);
@@ -8446,25 +8482,25 @@ function InfiniteTableContextProvider() {
     }
     componentActions.bodySize = bodySize;
   }, { earlyAttach: true });
-  useEffect25(() => {
+  useEffect26(() => {
     return () => {
       componentState.onRowHeightCSSVarChange.destroy();
       componentState.onHeaderHeightCSSVarChange.destroy();
     };
   }, []);
-  useEffect25(() => {
+  useEffect26(() => {
     if (scrollerDOMRef.current) {
       scrollerDOMRef.current.scrollTop = 0;
     }
   }, [scrollTopKey, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
-  return /* @__PURE__ */ createElement33(TableContext2.Provider, {
+  return /* @__PURE__ */ createElement32(TableContext2.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ createElement33(InfiniteTableComponent, null));
+  }, /* @__PURE__ */ createElement32(InfiniteTableComponent, null));
 }
 function InfiniteTable(props) {
-  const table = /* @__PURE__ */ createElement33(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ createElement33(InfiniteTableContextProvider, null));
-  return /* @__PURE__ */ createElement33(StrictMode, null, table);
+  const table = /* @__PURE__ */ createElement32(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ createElement32(InfiniteTableContextProvider, null));
+  return /* @__PURE__ */ createElement32(StrictMode, null, table);
 }
 InfiniteTable.defaultProps = {
   rowHeight: 40,