@infinite-table/infinite-react 0.2.14 → 0.2.17

package/index.esm.js

@@ -635,7 +635,7 @@ import {
   StrictMode,
   createElement as createElement32,
   memo as memo13,
-  useEffect as useEffect25,
+  useEffect as useEffect26,
   useLayoutEffect as useLayoutEffect5
 } from "react";
 
@@ -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,
@@ -1882,7 +1883,8 @@ var getComputedVisibleColumns = ({
       valueGetter: colType.valueGetter,
       renderValue: colType.renderValue,
       render: colType.render,
-      style: colType.style
+      style: colType.style,
+      components: colType.components
     }, c), {
       cssEllipsis,
       headerCssEllipsis,
@@ -2142,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 {
@@ -2541,7 +2543,7 @@ 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 {
@@ -2620,6 +2622,11 @@ var userSelect = { none: "_16lm1iwm" };
 var willChange = { transform: "_16lm1iw19" };
 var zIndex = { "1": "_16lm1iwe", "10": "_16lm1iwf", "1000": "_16lm1iwg", "10000": "_16lm1iwh", "100000": "_16lm1iwi" };
 
+// src/components/InfiniteTable/utils/RenderHookComponent.tsx
+function RenderHookComponent(props) {
+  return props.render(props.renderParam);
+}
+
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
 function getGroupColumnRender({
   groupIndexForColumn,
@@ -2630,7 +2637,10 @@ function getGroupColumnRender({
     var _a, _b, _c;
     let { value, rowInfo, column, groupBy, pivotBy } = renderOptions;
     if (column.renderValue) {
-      value = column.renderValue(renderOptions);
+      value = /* @__PURE__ */ createElement4(RenderHookComponent, {
+        render: column.renderValue,
+        renderParam: renderOptions
+      });
     }
     let groupRowInfo = groupRenderStrategy !== "inline" ? rowInfo : ((_a = rowInfo.parents) == null ? void 0 : _a[groupIndexForColumn]) || rowInfo;
     if (!groupRowInfo) {
@@ -2662,7 +2672,10 @@ function getGroupColumnRender({
           toggleGroupRow(groupKeys);
         }
       });
-      icon = column.renderGroupIcon ? column.renderGroupIcon(Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)) : defaultIcon;
+      icon = column.renderGroupIcon ? /* @__PURE__ */ createElement4(RenderHookComponent, {
+        render: column.renderGroupIcon,
+        renderParam: Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)
+      }) : defaultIcon;
     }
     return /* @__PURE__ */ createElement4("div", {
       className: join(display.flex, alignItems.center)
@@ -2739,6 +2752,27 @@ 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";
 
@@ -2823,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) {
@@ -2909,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);
@@ -2927,7 +2960,6 @@ var DeepMap = class {
     return this;
   }
   get(keys) {
-    var _a;
     let currentMap = this.map;
     if (!keys.length) {
       keys = [this.emptyKey];
@@ -2935,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;
         }
@@ -2976,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;
@@ -2994,7 +3026,6 @@ var DeepMap = class {
         }
         break;
       } else {
-        const pair = currentMap.get(key);
         if (!pair || !pair.map) {
           result = false;
           break;
@@ -3004,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")) {
@@ -3027,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;
         }
@@ -3499,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) {
@@ -3517,7 +3547,7 @@ function useEffectWithChanges(fn, deps) {
     }
   }
   prevRef.current = deps;
-  useEffect7(() => {
+  useEffect8(() => {
     const changes2 = changesRef.current;
     const result = fn(changes2, oldValues);
     changesRef.current = {};
@@ -3689,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;
@@ -3700,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) {
@@ -3709,7 +3739,7 @@ function useLoadData() {
     });
     return () => cancelAnimationFrame(frameId);
   }, [livePaginationCursor]);
-  useEffect8(() => {
+  useEffect9(() => {
     const { livePaginationCursor: livePaginationCursor2, livePagination: livePagination2 } = getComponentState();
     if (!scrollbars.vertical && livePagination2) {
       if (livePaginationCursor2) {
@@ -3723,7 +3753,7 @@ function useLoadData() {
     pivotBy,
     cursorId: livePagination ? stateCursorId : null
   };
-  const initialRef = useRef6(true);
+  const initialRef = useRef7(true);
   useLazyLoadRange();
   useEffectWithChanges(() => {
     const componentState2 = getComponentState();
@@ -3761,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;
@@ -3781,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;
@@ -3790,7 +3820,7 @@ function useLazyLoadRange() {
     }
     return;
   }, [lazyLoadBatchSize, loadingCache]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
     }
@@ -4066,6 +4096,7 @@ function initSetupState2() {
     notifyScrollStop: buildSubscriptionCallback(),
     notifyRenderRangeChange: buildSubscriptionCallback(),
     pivotTotalColumnPosition: "end",
+    pivotGrandTotalColumnPosition: false,
     scrollStopDelayUpdatedByTable: 100,
     originalLazyGroupData,
     originalLazyGroupDataChangeDetect: 0,
@@ -4253,6 +4284,7 @@ function getPivotColumnsAndColumnGroups({
   deepMap,
   pivotBy,
   pivotTotalColumnPosition,
+  pivotGrandTotalColumnPosition,
   reducers = {},
   showSeparatePivotColumnForSingleAggregation = false
 }) {
@@ -4262,6 +4294,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];
@@ -4366,25 +4420,10 @@ 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();
   }
+  console.log(columns.keys());
   const result = {
     columns,
     columnGroups
@@ -4415,7 +4454,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;
@@ -4450,6 +4489,7 @@ function concludeReducer(params) {
     "pivotBy",
     "aggregationReducers",
     "pivotTotalColumnPosition",
+    "pivotGrandTotalColumnPosition",
     "showSeparatePivotColumnForSingleAggregation",
     "sortInfo"
   ]);
@@ -4496,6 +4536,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;
@@ -4610,15 +4651,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);
@@ -4682,7 +4732,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
     });
     return computedColumns.size === 0 ? void 0 : computedColumns;
   }
-  useEffect9(() => {
+  useEffect10(() => {
     const update = () => {
       componentActions.columnsWhenInlineGroupRenderStrategy = computeColumnsWhenInlineGroupRenderStrategy(columns, groupByMap, groupRenderStrategy, toggleGroupRow);
     };
@@ -4706,17 +4756,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,
@@ -4764,7 +4816,7 @@ function useHideColumns(groupByMap) {
     }
   } = useComponentState();
   const prevHideEmptyGroupColumns = usePrevious(hideEmptyGroupColumns);
-  useEffect9(() => {
+  useEffectWithRaf(() => {
     if (groupRenderStrategy !== "multi-column") {
       return;
     }
@@ -4842,7 +4894,7 @@ function useHideColumns(groupByMap) {
     hideEmptyGroupColumns ? groupRowsState : null,
     hideEmptyGroupColumns
   ]);
-  useEffect9(() => {
+  useEffect10(() => {
     const isGrouped = groupBy.length > 0;
     const currentState = getComponentState();
     const { controlledColumnVisibility, columnVisibility } = currentState;
@@ -4877,6 +4929,7 @@ function getColumnsWhenGrouping(params) {
     pivotBy,
     groupColumn,
     pivotTotalColumnPosition,
+    pivotGrandTotalColumnPosition,
     pivotColumn,
     groupRenderStrategy,
     toggleGroupRow,
@@ -4916,7 +4969,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);
@@ -4980,7 +5038,7 @@ function useComputed() {
       }
     });
   });
-  useEffect10(() => {
+  useEffect11(() => {
     dataSourceActions.showSeparatePivotColumnForSingleAggregation = showSeparatePivotColumnForSingleAggregation;
   }, [showSeparatePivotColumnForSingleAggregation]);
   const { multiSort } = dataSourceState;
@@ -5186,17 +5244,18 @@ import {
   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 {
-  Fragment as Fragment2,
+  createContext as createContext4,
   createElement as createElement10
 } from "react";
-import { useCallback as useCallback7, 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 Fragment2,
   createElement as createElement8,
   memo as memo3
 } from "react";
@@ -5221,7 +5280,7 @@ var { rootClassName: rootClassName2 } = internalProps;
 var InfiniteTableCellClassName = `${rootClassName2}Cell`;
 var InfiniteTableCellContentClassName = `${rootClassName2}Cell_content`;
 function InfiniteTableCellFn(props) {
-  var _b, _c;
+  var _b, _c, _d, _e;
   const _a = props, {
     cssEllipsis = true,
     virtualized = true,
@@ -5229,10 +5288,12 @@ function InfiniteTableCellFn(props) {
     offsetProperty = "left",
     column,
     domRef,
-    children,
     afterChildren,
     beforeChildren,
-    offset
+    offset,
+    cellType,
+    cssPosition: _cssPosition,
+    renderChildren
   } = _a, domProps = __objRest(_a, [
     "cssEllipsis",
     "virtualized",
@@ -5240,11 +5301,14 @@ function InfiniteTableCellFn(props) {
     "offsetProperty",
     "column",
     "domRef",
-    "children",
     "afterChildren",
     "beforeChildren",
-    "offset"
+    "offset",
+    "cellType",
+    "cssPosition",
+    "renderChildren"
   ]);
+  const children = renderChildren();
   const { columnShifts } = useInfiniteTableState();
   const shifting = !!columnShifts;
   const style = __spreadValues({
@@ -5259,14 +5323,21 @@ function InfiniteTableCellFn(props) {
       style.transform = `translate3d(${shiftLeft}px, 0px, 0px)`;
     }
   }
-  return /* @__PURE__ */ createElement8("div", __spreadProps(__spreadValues({}, domProps), {
-    ref: domRef,
+  const finalDOMProps = __spreadProps(__spreadValues({}, domProps), {
     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}` : "")
-  }), beforeChildren, /* @__PURE__ */ createElement8("div", {
-    className: `${InfiniteTableCellContentClassName} ${cssEllipsis ? cssEllipsisClassName : overflow.hidden}`
-  }, children), afterChildren);
+    "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__ */ 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__ */ createElement8(RenderComponent, __spreadValues({}, finalDOMProps));
+  }
+  return /* @__PURE__ */ createElement8("div", __spreadProps(__spreadValues({}, finalDOMProps), {
+    ref: domRef
+  }));
 }
 var InfiniteTableCell = memo3(InfiniteTableCellFn);
 
@@ -5275,7 +5346,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";
 
@@ -5313,11 +5384,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;
@@ -5330,7 +5401,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;
@@ -5471,7 +5542,7 @@ import { createPortal } from "react-dom";
 import {
   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,
@@ -5495,7 +5566,7 @@ function SortIcon(props) {
   }), props.lineStyle), {
     opacity
   });
-  useEffect11(() => {
+  useEffect12(() => {
     const newOpacity = direction != 0 ? 1 : 0;
     if (!rendered && newOpacity) {
       setRendered(true);
@@ -5542,6 +5613,7 @@ function SortIcon(props) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
+var InfiniteTableHeaderCellContext = createContext4(null);
 var defaultStyle = {
   position: "absolute",
   top: 0
@@ -5560,29 +5632,38 @@ function InfiniteTableHeaderCell(props) {
   }
   const sortInfo = column.computedSortInfo;
   let header = column.header;
-  if (header instanceof Function) {
-    header = header({
-      column,
-      columnSortInfo: sortInfo
-    });
-  }
-  header = header != null ? header : column.name;
-  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
-  });
-  const domRef = useRef8(null);
   const ref = useCallback7((node) => {
     var _a2;
     domRef.current = node;
     (_a2 = props.domRef) == null ? void 0 : _a2.call(props, node);
   }, [props.domRef]);
+  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
+  });
+  const renderParam = {
+    domRef: ref,
+    column,
+    columnSortInfo: sortInfo,
+    sortTool
+  };
+  const renderChildren = () => {
+    if (header instanceof Function) {
+      header = /* @__PURE__ */ createElement10(RenderHookComponent, {
+        render: header,
+        renderParam
+      });
+    }
+    header = header != null ? header : column.name;
+    return header;
+  };
+  const domRef = useRef9(null);
   const {
     computed: { computedRemainingSpace },
     componentState: { portalDOMRef }
   } = useInfiniteTable();
-  useEffect12(() => {
+  useEffect13(() => {
     let clearOnResize = null;
     const node = domRef.current;
     if (onResize && node) {
@@ -5618,8 +5699,12 @@ function InfiniteTableHeaderCell(props) {
     }, header);
     draggingProxy = createPortal(draggingProxy, portalDOMRef.current);
   }
-  return /* @__PURE__ */ createElement10(Fragment2, null, /* @__PURE__ */ createElement10(InfiniteTableCell, {
+  const ContextProvider = InfiniteTableHeaderCellContext.Provider;
+  return /* @__PURE__ */ createElement10(ContextProvider, {
+    value: renderParam
+  }, /* @__PURE__ */ createElement10(InfiniteTableCell, {
     domRef: ref,
+    cellType: "header",
     column,
     "data-name": `HeaderCell`,
     "data-column-id": column.id,
@@ -5629,8 +5714,13 @@ function InfiniteTableHeaderCell(props) {
     onPointerUp,
     className: join(InfiniteTableHeaderCellClassName, userSelect.none, column.computedSortable ? cursor.pointer : "", useCellClassName(column, [InfiniteTableHeaderCellClassName, InfiniteTableCellClassName], HeaderCellRecipe, { dragging }), CellCls),
     cssEllipsis: (_d = (_c = column.headerCssEllipsis) != null ? _c : column.cssEllipsis) != null ? _d : true,
-    afterChildren: sortTool
-  }, header), draggingProxy);
+    afterChildren: sortTool,
+    renderChildren
+  }), draggingProxy);
+}
+function useInfiniteHeaderCell() {
+  const result = useContext5(InfiniteTableHeaderCellContext);
+  return result;
 }
 
 // src/components/RawList/index.tsx
@@ -5638,7 +5728,7 @@ import {
   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 {
@@ -5946,7 +6036,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);
@@ -5989,7 +6079,7 @@ function RawListFn(props) {
     debugChannel
   });
   const getRenderItem = useLatest(renderItem);
-  useEffect13(() => {
+  useEffect14(() => {
     const renderRange = brain.getRenderRange();
     renderer.renderRange(renderRange, {
       renderItem,
@@ -5997,7 +6087,7 @@ function RawListFn(props) {
       onRender: onRenderUpdater
     });
   }, [brain, renderItem, onRenderUpdater]);
-  useEffect13(() => {
+  useEffect14(() => {
     const remove = brain.onRenderRangeChange((renderRange) => {
       renderer.renderRange(renderRange, {
         force: false,
@@ -6039,7 +6129,7 @@ function InfiniteTableHeaderFn(props) {
       columns: computedVisibleColumnsMap
     });
   }, [computedVisibleColumnsMap, columns, repaintId, headerHeight]);
-  useEffect14(() => {
+  useEffect15(() => {
     const onScroll = (scrollPosition) => {
       if (domRef.current) {
         domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
@@ -6048,7 +6138,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,
@@ -6071,7 +6161,7 @@ import {
   createElement as createElement17,
   memo as memo7,
   useMemo as useMemo9,
-  useRef as useRef10
+  useRef as useRef11
 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/renderColumnHeaderGroups.tsx
@@ -6249,7 +6339,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) => {
@@ -6282,7 +6372,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({
@@ -6315,7 +6405,7 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
   if (totalWidth != null) {
     style.width = availableWidth;
   }
-  useEffect15(() => {
+  useEffect16(() => {
     const scroller = brain || scrollListener;
     if (!scroller || !scrollable) {
       return;
@@ -6438,12 +6528,12 @@ import {
   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;
@@ -6489,7 +6579,7 @@ 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__ */ createElement19("div", {
     ref: domRef,
@@ -6523,7 +6613,7 @@ 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 {
@@ -6542,7 +6632,7 @@ import {
   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";
@@ -6585,11 +6675,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) {
@@ -6608,7 +6698,7 @@ var VirtualList = (props) => {
       removeOnTotalSizeChange();
     };
   }, [virtualBrain]);
-  useEffect17(() => {
+  useEffect18(() => {
     const onScroll = (scrollPosition) => {
       UPDATE_SCROLL2(domRef.current, scrollPosition);
     };
@@ -6666,14 +6756,17 @@ import {
   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 createElement23,
   memo as memo9
 } from "react";
+import { useContext as useContext6 } from "react";
 var { rootClassName: rootClassName8 } = internalProps;
+var InfiniteTableColumnCellContext = createContext5(null);
 var InfiniteTableColumnCellClassName = `${rootClassName8}ColumnCell`;
 function isColumnWithField(c) {
   return typeof c.field === "string";
@@ -6720,24 +6813,31 @@ function InfiniteTableColumnCellFn(props) {
     column
   }, rest);
   let renderValue = value;
-  if (column.render || column.renderValue) {
-    const renderParam = __spreadProps(__spreadValues({
-      value,
-      column,
-      groupRowInfo
-    }, rest), {
-      rowIndex,
-      toggleGroupRow,
-      toggleCurrentGroupRow: () => toggleGroupRow(rowInfo.groupKeys),
-      groupBy: computedDataSource.groupBy,
-      pivotBy: computedDataSource.pivotBy
-    });
-    if (column.render) {
-      renderValue = column.render(renderParam);
-    } else if (column.renderValue) {
-      renderValue = column.renderValue(renderParam);
+  const renderParam = __spreadProps(__spreadValues({
+    value,
+    column,
+    domRef,
+    groupRowInfo
+  }, rest), {
+    rowIndex,
+    toggleGroupRow,
+    toggleCurrentGroupRow: () => toggleGroupRow(rowInfo.groupKeys),
+    groupBy: computedDataSource.groupBy,
+    pivotBy: computedDataSource.pivotBy
+  });
+  const renderChildren = () => {
+    if (hidden) {
+      return null;
     }
-  }
+    const renderFn = column.render || column.renderValue;
+    if (renderFn) {
+      return /* @__PURE__ */ createElement23(RenderHookComponent, {
+        render: renderFn,
+        renderParam
+      });
+    }
+    return renderValue;
+  };
   const colClassName = column.className ? typeof column.className === "function" ? column.className(stylingRenderParam) : column.className : void 0;
   const colStyle = column.style ? typeof column.style === "function" ? column.style(stylingRenderParam) : column.style : void 0;
   const style = colStyle ? __spreadProps(__spreadValues({}, colStyle), {
@@ -6765,23 +6865,33 @@ function InfiniteTableColumnCellFn(props) {
       }
     }
   }
-  return /* @__PURE__ */ createElement23(InfiniteTableCell, __spreadProps(__spreadValues({
+  const cellProps = __spreadProps(__spreadValues({
     domRef,
     offsetProperty
   }, dataset), {
+    cellType: "body",
     column,
     offset: virtualized ? 0 : column.computedPinningOffset,
     style,
     cssEllipsis: (_a = column.cssEllipsis) != null ? _a : true,
-    className: join(useCellClassName(column, [InfiniteTableColumnCellClassName, InfiniteTableCellClassName], ColumnCellRecipe, { dragging: false }), colClassName)
-  }), hidden ? null : renderValue);
+    className: join(useCellClassName(column, [InfiniteTableColumnCellClassName, InfiniteTableCellClassName], ColumnCellRecipe, { dragging: false }), colClassName),
+    renderChildren
+  });
+  const ContextProvider = InfiniteTableColumnCellContext.Provider;
+  return /* @__PURE__ */ createElement23(ContextProvider, {
+    value: renderParam
+  }, /* @__PURE__ */ createElement23(InfiniteTableCell, __spreadValues({}, cellProps)));
 }
 var InfiniteTableColumnCell = memo9(InfiniteTableColumnCellFn);
+function useInfiniteColumnCell() {
+  const result = useContext6(InfiniteTableColumnCellContext);
+  return result;
+}
 
 // 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
@@ -6808,7 +6918,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;
@@ -6910,7 +7020,7 @@ 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) {
@@ -7086,7 +7196,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());
@@ -7128,10 +7238,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]);
@@ -7178,7 +7288,7 @@ var useOnContainerScroll = ({
     domRef.current,
     setScrolling
   ]);
-  const scrollPositionRef = useRef15({
+  const scrollPositionRef = useRef16({
     scrollLeft: 0,
     scrollTop: 0
   });
@@ -7218,12 +7328,12 @@ import { useCallback as useCallback15 } from "react";
 import {
   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);
@@ -7254,7 +7364,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,
@@ -7264,7 +7374,7 @@ var RowListWithExternalScrolling = (props) => {
     onMount,
     onUnmount
   });
-  useEffect20(() => {
+  useEffect21(() => {
     const onScroll = (scrollPosition) => {
       const node = domRef.current;
       if (node) {
@@ -7491,7 +7601,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";
@@ -7527,13 +7637,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)
@@ -7574,7 +7684,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++;
   }
@@ -7597,7 +7707,7 @@ function useListRendering(param) {
     vertical: hasVerticalScrollbar,
     horizontal: hasHorizontalScrollbar
   }), [hasVerticalScrollbar, hasHorizontalScrollbar]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (!bodySize.height) {
       return;
     }
@@ -7653,7 +7763,7 @@ function useListRendering(param) {
     computedUnpinnedColumns
   });
   const [, rerender] = useRerender();
-  useEffect22(() => {
+  useEffect23(() => {
     rerender();
   }, [dataSourceState]);
   const { pinnedStartList, pinnedStartScrollbarPlaceholder } = usePinnedStartRendering(pinnedRenderingParams);
@@ -7680,9 +7790,9 @@ import {
   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) {
@@ -7719,7 +7829,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) {
@@ -7731,7 +7841,7 @@ var InfiniteTableLicenseFooter = forwardRef3(function InfiniteTableLicenseFooter
       ref.current = node;
     }
   }, []);
-  useEffect23(() => {
+  useEffect24(() => {
     const forceStyle = () => {
       requestAnimationFrame(() => {
         var _a;
@@ -7920,7 +8030,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo12(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.2.14"
+      version: "0.2.17"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -7936,7 +8046,7 @@ import {
   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 = {
@@ -7949,7 +8059,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;
@@ -7969,7 +8079,7 @@ var useCSSVariableWatch = (params) => {
   }, []);
 };
 var CSSVariableWatch = (props) => {
-  const domRef = useRef19(null);
+  const domRef = useRef20(null);
   useCSSVariableWatch(__spreadProps(__spreadValues({}, props), {
     ref: domRef
   }));
@@ -8097,8 +8207,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;
@@ -8168,8 +8278,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;
@@ -8187,7 +8297,7 @@ function useAutoSizeColumns() {
       removeHorizontal();
     };
   }, [verticalVirtualBrain, horizontalVirtualBrain]);
-  useEffect24(() => {
+  useEffect25(() => {
     var _a;
     if (theKey == null) {
       return;
@@ -8295,7 +8405,7 @@ var InfiniteTableComponent = memo13(function InfiniteTableComponent2() {
     bodySize,
     computed
   });
-  useEffect25(() => {
+  useEffect26(() => {
     const dataSourceState = getDataSourceState();
     const onChange = debounce((renderRange) => {
       dataSourceState.notifyRenderRangeChange(renderRange);
@@ -8314,7 +8424,7 @@ var InfiniteTableComponent = memo13(function InfiniteTableComponent2() {
     }
     notifyScrollbarsChange(scrollbars);
   }, [scrollbars]);
-  useEffect25(() => {
+  useEffect26(() => {
     dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
   }, [scrollStopDelay]);
   useAutoSizeColumns();
@@ -8378,13 +8488,13 @@ 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;
     }
@@ -8417,5 +8527,7 @@ export {
   multisort,
   useComponentState,
   useDataSource,
-  useEffectWithChanges
+  useEffectWithChanges,
+  useInfiniteColumnCell,
+  useInfiniteHeaderCell
 };