@infinite-table/infinite-react 0.2.14 → 0.2.17

package/index.js

@@ -637,7 +637,9 @@ __export(exports, {
   multisort: () => multisort,
   useComponentState: () => useComponentState,
   useDataSource: () => useDataSource,
-  useEffectWithChanges: () => useEffectWithChanges
+  useEffectWithChanges: () => useEffectWithChanges,
+  useInfiniteColumnCell: () => useInfiniteColumnCell,
+  useInfiniteHeaderCell: () => useInfiniteHeaderCell
 });
 
 // src/components/utils/debounce.ts
@@ -1319,6 +1321,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,
@@ -1892,7 +1895,8 @@ var getComputedVisibleColumns = ({
       valueGetter: colType.valueGetter,
       renderValue: colType.renderValue,
       render: colType.render,
-      style: colType.style
+      style: colType.style,
+      components: colType.components
     }, c), {
       cssEllipsis,
       headerCssEllipsis,
@@ -2152,7 +2156,7 @@ var useComputedVisibleColumns = ({
 var sortAscending = (a, b) => a - b;
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-var import_react18 = __toModule(require("react"));
+var import_react19 = __toModule(require("react"));
 
 // src/components/hooks/useComponentState/index.tsx
 var React2 = __toModule(require("react"));
@@ -2536,7 +2540,7 @@ function useColumnGroups() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-var import_react17 = __toModule(require("react"));
+var import_react18 = __toModule(require("react"));
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
 var React6 = __toModule(require("react"));
@@ -2610,6 +2614,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,
@@ -2620,7 +2629,10 @@ function getGroupColumnRender({
     var _a, _b, _c;
     let { value, rowInfo, column, groupBy, pivotBy } = renderOptions;
     if (column.renderValue) {
-      value = column.renderValue(renderOptions);
+      value = /* @__PURE__ */ React6.createElement(RenderHookComponent, {
+        render: column.renderValue,
+        renderParam: renderOptions
+      });
     }
     let groupRowInfo = groupRenderStrategy !== "inline" ? rowInfo : ((_a = rowInfo.parents) == null ? void 0 : _a[groupIndexForColumn]) || rowInfo;
     if (!groupRowInfo) {
@@ -2652,7 +2664,10 @@ function getGroupColumnRender({
           toggleGroupRow(groupKeys);
         }
       });
-      icon = column.renderGroupIcon ? column.renderGroupIcon(Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)) : defaultIcon;
+      icon = column.renderGroupIcon ? /* @__PURE__ */ React6.createElement(RenderHookComponent, {
+        render: column.renderGroupIcon,
+        renderParam: Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)
+      }) : defaultIcon;
     }
     return /* @__PURE__ */ React6.createElement("div", {
       className: join(display.flex, alignItems.center)
@@ -2729,8 +2744,29 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
   return generatedGroupColumn;
 }
 
+// src/components/InfiniteTable/hooks/useEffectWithRaf.ts
+var import_react14 = __toModule(require("react"));
+function useEffectWithRaf(fn, deps) {
+  const rafId = (0, import_react14.useRef)(0);
+  const removeFnRaf = (0, import_react14.useRef)();
+  (0, import_react14.useEffect)(() => {
+    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
-var import_react16 = __toModule(require("react"));
+var import_react17 = __toModule(require("react"));
 
 // src/components/DataSource/index.tsx
 var React7 = __toModule(require("react"));
@@ -2810,7 +2846,7 @@ var getMultisortFunction = (sortInfo, get) => {
 };
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-var import_react15 = __toModule(require("react"));
+var import_react16 = __toModule(require("react"));
 
 // src/utils/DeepMap/once.ts
 function once(fn) {
@@ -2896,14 +2932,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);
@@ -2914,7 +2949,6 @@ var DeepMap = class {
     return this;
   }
   get(keys) {
-    var _a;
     let currentMap = this.map;
     if (!keys.length) {
       keys = [this.emptyKey];
@@ -2922,10 +2956,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;
         }
@@ -2963,8 +2997,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;
@@ -2981,7 +3015,6 @@ var DeepMap = class {
         }
         break;
       } else {
-        const pair = currentMap.get(key);
         if (!pair || !pair.map) {
           result = false;
           break;
@@ -2991,11 +3024,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")) {
@@ -3014,11 +3047,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;
         }
@@ -3486,12 +3518,12 @@ function enhancedFlatten(param) {
 }
 
 // src/components/hooks/useEffectWithChanges.ts
-var import_react14 = __toModule(require("react"));
+var import_react15 = __toModule(require("react"));
 function useEffectWithChanges(fn, deps) {
-  const prevRef = (0, import_react14.useRef)({});
-  const oldValuesRef = (0, import_react14.useRef)({});
+  const prevRef = (0, import_react15.useRef)({});
+  const oldValuesRef = (0, import_react15.useRef)({});
   const oldValues = oldValuesRef.current;
-  const changesRef = (0, import_react14.useRef)({});
+  const changesRef = (0, import_react15.useRef)({});
   const changes = changesRef.current;
   const useEffectDeps = [];
   for (let k in deps) {
@@ -3504,7 +3536,7 @@ function useEffectWithChanges(fn, deps) {
     }
   }
   prevRef.current = deps;
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const changes2 = changesRef.current;
     const result = fn(changes2, oldValues);
     changesRef.current = {};
@@ -3672,12 +3704,12 @@ function useLoadData() {
     livePaginationCursor,
     cursorId: stateCursorId
   } = componentState;
-  const [scrollbars, setScrollbars] = (0, import_react15.useState)({
+  const [scrollbars, setScrollbars] = (0, import_react16.useState)({
     vertical: false,
     horizontal: false
   });
-  const scrollbarsRef = (0, import_react15.useRef)(scrollbars);
-  (0, import_react15.useEffect)(() => {
+  const scrollbarsRef = (0, import_react16.useRef)(scrollbars);
+  (0, import_react16.useEffect)(() => {
     notifyScrollbarsChange.onChange((scrollbars2) => {
       if (!scrollbars2) {
         return;
@@ -3687,7 +3719,7 @@ function useLoadData() {
     });
     return () => notifyScrollbarsChange.destroy();
   }, [notifyScrollbarsChange]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const frameId = requestAnimationFrame(() => {
       var _a;
       if (!((_a = scrollbarsRef.current) == null ? void 0 : _a.vertical) && livePaginationCursor) {
@@ -3696,7 +3728,7 @@ function useLoadData() {
     });
     return () => cancelAnimationFrame(frameId);
   }, [livePaginationCursor]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const { livePaginationCursor: livePaginationCursor2, livePagination: livePagination2 } = getComponentState();
     if (!scrollbars.vertical && livePagination2) {
       if (livePaginationCursor2) {
@@ -3710,7 +3742,7 @@ function useLoadData() {
     pivotBy,
     cursorId: livePagination ? stateCursorId : null
   };
-  const initialRef = (0, import_react15.useRef)(true);
+  const initialRef = (0, import_react16.useRef)(true);
   useLazyLoadRange();
   useEffectWithChanges(() => {
     const componentState2 = getComponentState();
@@ -3739,7 +3771,7 @@ function useLazyLoadRange() {
     componentActions: actions,
     componentState
   } = useComponentState();
-  const loadingCache = (0, import_react15.useMemo)(() => {
+  const loadingCache = (0, import_react16.useMemo)(() => {
     return new Map();
   }, [componentState.data]);
   const {
@@ -3748,7 +3780,7 @@ function useLazyLoadRange() {
     dataArray,
     scrollStopDelayUpdatedByTable
   } = componentState;
-  const latestRenderRangeRef = (0, import_react15.useRef)(null);
+  const latestRenderRangeRef = (0, import_react16.useRef)(null);
   const loadRange = (renderRange, cache = loadingCache) => {
     const componentState2 = getComponentState();
     renderRange = renderRange || latestRenderRangeRef.current;
@@ -3767,8 +3799,8 @@ function useLazyLoadRange() {
       componentActions: actions
     }, cache);
   };
-  const debouncedLoadRange = (0, import_react15.useMemo)(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
-  (0, import_react15.useEffect)(() => {
+  const debouncedLoadRange = (0, import_react16.useMemo)(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
+  (0, import_react16.useEffect)(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       return notifyRenderRangeChange.onChange((renderRange) => {
         latestRenderRangeRef.current = renderRange;
@@ -3777,7 +3809,7 @@ function useLazyLoadRange() {
     }
     return;
   }, [lazyLoadBatchSize, loadingCache]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
     }
@@ -4053,6 +4085,7 @@ function initSetupState2() {
     notifyScrollStop: buildSubscriptionCallback(),
     notifyRenderRangeChange: buildSubscriptionCallback(),
     pivotTotalColumnPosition: "end",
+    pivotGrandTotalColumnPosition: false,
     scrollStopDelayUpdatedByTable: 100,
     originalLazyGroupData,
     originalLazyGroupDataChangeDetect: 0,
@@ -4240,6 +4273,7 @@ function getPivotColumnsAndColumnGroups({
   deepMap,
   pivotBy,
   pivotTotalColumnPosition,
+  pivotGrandTotalColumnPosition,
   reducers = {},
   showSeparatePivotColumnForSingleAggregation = false
 }) {
@@ -4249,6 +4283,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];
@@ -4353,25 +4409,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
@@ -4402,7 +4443,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;
@@ -4437,6 +4478,7 @@ function concludeReducer(params) {
     "pivotBy",
     "aggregationReducers",
     "pivotTotalColumnPosition",
+    "pivotGrandTotalColumnPosition",
     "showSeparatePivotColumnForSingleAggregation",
     "sortInfo"
   ]);
@@ -4483,6 +4525,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;
@@ -4564,7 +4607,7 @@ function DataSource(props) {
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
 function useToggleGroupRow() {
   const { getState: getDataSourceState, componentActions: dataSourceActions } = useDataSourceContextValue();
-  const toggleGroupRow = (0, import_react16.useCallback)((groupKeys) => {
+  const toggleGroupRow = (0, import_react17.useCallback)((groupKeys) => {
     const state = getDataSourceState();
     const newState = new GroupRowsState(state.groupRowsState);
     newState.toggleGroupRow(groupKeys);
@@ -4580,7 +4623,7 @@ function useToggleGroupRow() {
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
 function useGroupByMap(groupBy) {
-  const groupByMap = (0, import_react17.useMemo)(() => {
+  const groupByMap = (0, import_react18.useMemo)(() => {
     return groupBy.reduce((acc, groupBy2, index) => {
       acc.set(groupBy2.field, {
         groupBy: groupBy2,
@@ -4597,15 +4640,24 @@ function useColumnsWhen() {
     componentActions: dataSourceActions
   } = useDataSourceContextValue();
   const {
-    componentState: { groupRenderStrategy, pivotTotalColumnPosition }
+    componentState: {
+      groupRenderStrategy,
+      pivotTotalColumnPosition,
+      pivotGrandTotalColumnPosition
+    }
   } = useComponentState();
   const groupByMap = useGroupByMap(groupBy);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
   }, [groupRenderStrategy]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
+  (0, import_react18.useEffect)(() => {
+    if (pivotGrandTotalColumnPosition != void 0) {
+      dataSourceActions.pivotGrandTotalColumnPosition = pivotGrandTotalColumnPosition;
+    }
+  }, [pivotGrandTotalColumnPosition]);
   useColumnsWhenInlineGroupRenderStrategy(groupByMap);
   const { toggleGroupRow } = useColumnsWhenGrouping();
   useHideColumns(groupByMap);
@@ -4669,7 +4721,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
     });
     return computedColumns.size === 0 ? void 0 : computedColumns;
   }
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const update = () => {
       componentActions.columnsWhenInlineGroupRenderStrategy = computeColumnsWhenInlineGroupRenderStrategy(columns, groupByMap, groupRenderStrategy, toggleGroupRow);
     };
@@ -4693,17 +4745,19 @@ function useColumnsWhenGrouping() {
       groupRenderStrategy,
       pivotColumns,
       pivotColumn,
-      pivotTotalColumnPosition
+      pivotTotalColumnPosition,
+      pivotGrandTotalColumnPosition
     }
   } = useComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const update = () => {
       const columnsWhenGrouping = getColumnsWhenGrouping({
         columns,
         groupColumn,
         pivotColumn,
         pivotTotalColumnPosition,
+        pivotGrandTotalColumnPosition,
         groupRenderStrategy: groupRenderStrategy === "inline" ? "single-column" : groupRenderStrategy,
         groupBy,
         pivotBy,
@@ -4751,7 +4805,7 @@ function useHideColumns(groupByMap) {
     }
   } = useComponentState();
   const prevHideEmptyGroupColumns = usePrevious(hideEmptyGroupColumns);
-  (0, import_react17.useEffect)(() => {
+  useEffectWithRaf(() => {
     if (groupRenderStrategy !== "multi-column") {
       return;
     }
@@ -4829,7 +4883,7 @@ function useHideColumns(groupByMap) {
     hideEmptyGroupColumns ? groupRowsState : null,
     hideEmptyGroupColumns
   ]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const isGrouped = groupBy.length > 0;
     const currentState = getComponentState();
     const { controlledColumnVisibility, columnVisibility } = currentState;
@@ -4864,6 +4918,7 @@ function getColumnsWhenGrouping(params) {
     pivotBy,
     groupColumn,
     pivotTotalColumnPosition,
+    pivotGrandTotalColumnPosition,
     pivotColumn,
     groupRenderStrategy,
     toggleGroupRow,
@@ -4903,7 +4958,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);
@@ -4955,7 +5015,7 @@ function useComputed() {
     bodySize,
     showSeparatePivotColumnForSingleAggregation
   } = componentState;
-  (0, import_react18.useState)(() => {
+  (0, import_react19.useState)(() => {
     componentState.onRowHeightCSSVarChange.onChange((rowHeight) => {
       if (rowHeight) {
         componentActions.rowHeight = rowHeight;
@@ -4967,13 +5027,13 @@ function useComputed() {
       }
     });
   });
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     dataSourceActions.showSeparatePivotColumnForSingleAggregation = showSeparatePivotColumnForSingleAggregation;
   }, [showSeparatePivotColumnForSingleAggregation]);
   const { multiSort } = dataSourceState;
   useColumnGroups();
   const { toggleGroupRow } = useColumnsWhen();
-  const setSortInfo = (0, import_react18.useCallback)((sortInfo) => {
+  const setSortInfo = (0, import_react19.useCallback)((sortInfo) => {
     var _a2;
     const newSortInfo = multiSort ? sortInfo : (_a2 = sortInfo[0]) != null ? _a2 : null;
     dataSourceActions.sortInfo = newSortInfo;
@@ -5017,7 +5077,7 @@ function useComputed() {
     columnSizing,
     columnTypes
   });
-  const rowSpan = (0, import_react18.useMemo)(() => {
+  const rowSpan = (0, import_react19.useMemo)(() => {
     const colsWithRowspan = computedVisibleColumns.filter((col) => typeof col.rowspan === "function");
     return colsWithRowspan.length ? ({ itemIndex }) => {
       let maxSpan = 1;
@@ -5162,20 +5222,20 @@ var HeaderWrapperCls = "_12zfob1v _16lm1iw16 _16lm1iw1 _16lm1iwj _16lm1iw10";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 var React16 = __toModule(require("react"));
-var import_react26 = __toModule(require("react"));
+var import_react27 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
 var React12 = __toModule(require("react"));
-var import_react22 = __toModule(require("react"));
+var import_react23 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
 var React10 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useInfiniteTableState.ts
-var import_react19 = __toModule(require("react"));
+var import_react20 = __toModule(require("react"));
 var useInfiniteTableState = () => {
   const TableContext2 = getInfiniteTableContext();
-  const { componentState } = (0, import_react19.useContext)(TableContext2);
+  const { componentState } = (0, import_react20.useContext)(TableContext2);
   return componentState;
 };
 
@@ -5191,7 +5251,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,
@@ -5199,10 +5259,12 @@ function InfiniteTableCellFn(props) {
     offsetProperty = "left",
     column,
     domRef,
-    children,
     afterChildren,
     beforeChildren,
-    offset
+    offset,
+    cellType,
+    cssPosition: _cssPosition,
+    renderChildren
   } = _a, domProps = __objRest(_a, [
     "cssEllipsis",
     "virtualized",
@@ -5210,11 +5272,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({
@@ -5229,20 +5294,27 @@ function InfiniteTableCellFn(props) {
       style.transform = `translate3d(${shiftLeft}px, 0px, 0px)`;
     }
   }
-  return /* @__PURE__ */ React10.createElement("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__ */ React10.createElement("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__ */ React10.createElement(React10.Fragment, null, beforeChildren, /* @__PURE__ */ React10.createElement("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__ */ React10.createElement(RenderComponent, __spreadValues({}, finalDOMProps));
+  }
+  return /* @__PURE__ */ React10.createElement("div", __spreadProps(__spreadValues({}, finalDOMProps), {
+    ref: domRef
+  }));
 }
 var InfiniteTableCell = React10.memo(InfiniteTableCellFn);
 
 // src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
 var import_binary_search2 = __toModule(require_binary_search());
-var import_react20 = __toModule(require("react"));
+var import_react21 = __toModule(require("react"));
 
 // src/components/InfiniteTable/utils/moveXatY.ts
 var moveXatY = (arr, dragIndex, dropIndex) => {
@@ -5276,18 +5348,18 @@ var useColumnPointerEvents = ({
   columns,
   computedRemainingSpace
 }) => {
-  const [draggingDiff, setDraggingDiff] = (0, import_react20.useState)(null);
-  const [proxyOffset, setProxyOffset] = (0, import_react20.useState)(null);
-  const breakpointsRef = (0, import_react20.useRef)([]);
-  const pointerMoveRef = (0, import_react20.useRef)(null);
-  const didDragRef = (0, import_react20.useRef)(false);
-  const initialClientPos = (0, import_react20.useRef)(null);
-  const currentDropIndexRef = (0, import_react20.useRef)(null);
+  const [draggingDiff, setDraggingDiff] = (0, import_react21.useState)(null);
+  const [proxyOffset, setProxyOffset] = (0, import_react21.useState)(null);
+  const breakpointsRef = (0, import_react21.useRef)([]);
+  const pointerMoveRef = (0, import_react21.useRef)(null);
+  const didDragRef = (0, import_react21.useRef)(false);
+  const initialClientPos = (0, import_react21.useRef)(null);
+  const currentDropIndexRef = (0, import_react21.useRef)(null);
   const dragging = draggingDiff != null;
   const { componentActions, computed } = useInfiniteTable();
   const { computedColumnOrder } = computed;
-  const column = (0, import_react20.useMemo)(() => columns.get(columnId), [columnId, columns]);
-  const { columnIndex, columnWidth, columnsArray } = (0, import_react20.useMemo)(() => {
+  const column = (0, import_react21.useMemo)(() => columns.get(columnId), [columnId, columns]);
+  const { columnIndex, columnWidth, columnsArray } = (0, import_react21.useMemo)(() => {
     const columnsArray2 = Array.from(columns.values());
     return {
       columnsArray: columnsArray2,
@@ -5295,8 +5367,8 @@ var useColumnPointerEvents = ({
       columnWidth: column.computedWidth
     };
   }, [columns, columnId, column]);
-  let cursorRef = (0, import_react20.useRef)("auto");
-  const onPointerDown = (0, import_react20.useCallback)((e) => {
+  let cursorRef = (0, import_react21.useRef)("auto");
+  const onPointerDown = (0, import_react21.useCallback)((e) => {
     const target = domRef.current;
     cursorRef.current = target.style.cursor;
     didDragRef.current = false;
@@ -5359,7 +5431,7 @@ var useColumnPointerEvents = ({
     target.addEventListener("pointermove", onPointerMove);
     target.setPointerCapture(e.pointerId);
   }, [columns, column, columnIndex, columnsArray, computedRemainingSpace]);
-  const onPointerUp = (0, import_react20.useCallback)((e) => {
+  const onPointerUp = (0, import_react21.useCallback)((e) => {
     const target = domRef.current;
     target.style.cursor = cursorRef.current;
     target.releasePointerCapture(e.pointerId);
@@ -5434,7 +5506,7 @@ var import_react_dom = __toModule(require("react-dom"));
 
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
 var React11 = __toModule(require("react"));
-var import_react21 = __toModule(require("react"));
+var import_react22 = __toModule(require("react"));
 var defaultLineStyle = {
   marginTop: 2,
   marginBottom: 2,
@@ -5443,8 +5515,8 @@ var defaultLineStyle = {
 var InfiniteTableIconClassName = "InfiniteTableIcon";
 function SortIcon(props) {
   var _a;
-  const [rendered, setRendered] = (0, import_react21.useState)(true);
-  const [opacity, setOpacity] = (0, import_react21.useState)(0);
+  const [rendered, setRendered] = (0, import_react22.useState)(true);
+  const [opacity, setOpacity] = (0, import_react22.useState)(0);
   const { direction, lineWidth = 1, style, className, index } = props;
   const showIndex = index != null && index > 0;
   const size = (_a = props.size) != null ? _a : 16;
@@ -5458,7 +5530,7 @@ function SortIcon(props) {
   }), props.lineStyle), {
     opacity
   });
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const newOpacity = direction != 0 ? 1 : 0;
     if (!rendered && newOpacity) {
       setRendered(true);
@@ -5505,6 +5577,7 @@ function SortIcon(props) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
+var InfiniteTableHeaderCellContext = React12.createContext(null);
 var defaultStyle = {
   position: "absolute",
   top: 0
@@ -5523,29 +5596,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 ref = (0, import_react23.useCallback)((node) => {
+    var _a2;
+    domRef.current = node;
+    (_a2 = props.domRef) == null ? void 0 : _a2.call(props, node);
+  }, [props.domRef]);
   const sortTool = /* @__PURE__ */ React12.createElement(SortIcon, {
     index: column.computedMultiSort ? column.computedSortIndex + 1 : void 0,
     className: `${InfiniteTableHeaderCellClassName}__sort-icon ${HeaderSortIconCls}`,
     direction: column.computedSorted ? column.computedSortedAsc ? 1 : -1 : 0
   });
-  const domRef = (0, import_react22.useRef)(null);
-  const ref = (0, import_react22.useCallback)((node) => {
-    var _a2;
-    domRef.current = node;
-    (_a2 = props.domRef) == null ? void 0 : _a2.call(props, node);
-  }, [props.domRef]);
+  const renderParam = {
+    domRef: ref,
+    column,
+    columnSortInfo: sortInfo,
+    sortTool
+  };
+  const renderChildren = () => {
+    if (header instanceof Function) {
+      header = /* @__PURE__ */ React12.createElement(RenderHookComponent, {
+        render: header,
+        renderParam
+      });
+    }
+    header = header != null ? header : column.name;
+    return header;
+  };
+  const domRef = (0, import_react23.useRef)(null);
   const {
     computed: { computedRemainingSpace },
     componentState: { portalDOMRef }
   } = useInfiniteTable();
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     let clearOnResize = null;
     const node = domRef.current;
     if (onResize && node) {
@@ -5581,8 +5663,12 @@ function InfiniteTableHeaderCell(props) {
     }, header);
     draggingProxy = (0, import_react_dom.createPortal)(draggingProxy, portalDOMRef.current);
   }
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(InfiniteTableCell, {
+  const ContextProvider = InfiniteTableHeaderCellContext.Provider;
+  return /* @__PURE__ */ React12.createElement(ContextProvider, {
+    value: renderParam
+  }, /* @__PURE__ */ React12.createElement(InfiniteTableCell, {
     domRef: ref,
+    cellType: "header",
     column,
     "data-name": `HeaderCell`,
     "data-column-id": column.id,
@@ -5592,20 +5678,25 @@ 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 = (0, import_react23.useContext)(InfiniteTableHeaderCellContext);
+  return result;
 }
 
 // src/components/RawList/index.tsx
 var React15 = __toModule(require("react"));
-var import_react25 = __toModule(require("react"));
+var import_react26 = __toModule(require("react"));
 
 // src/components/RawList/AvoidReactDiff.tsx
 var React13 = __toModule(require("react"));
-var import_react23 = __toModule(require("react"));
+var import_react24 = __toModule(require("react"));
 function AvoidReactDiffFn(props) {
-  const [children, setChildren] = (0, import_react23.useState)(props.updater.get());
-  (0, import_react23.useLayoutEffect)(() => {
+  const [children, setChildren] = (0, import_react24.useState)(props.updater.get());
+  (0, import_react24.useLayoutEffect)(() => {
     const remove = props.updater.onChange((children2) => {
       setChildren(children2);
     });
@@ -5616,7 +5707,7 @@ function AvoidReactDiffFn(props) {
 var AvoidReactDiff = React13.memo(AvoidReactDiffFn);
 
 // src/components/RawList/useVirtualRenderer.ts
-var import_react24 = __toModule(require("react"));
+var import_react25 = __toModule(require("react"));
 
 // src/components/RawList/ReactVirtualRenderer.tsx
 var React14 = __toModule(require("react"));
@@ -5900,7 +5991,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);
@@ -5930,7 +6021,7 @@ function createRenderer(brain) {
 function useVirtualRenderer({
   brain
 }) {
-  return (0, import_react24.useMemo)(() => {
+  return (0, import_react25.useMemo)(() => {
     return createRenderer(brain);
   }, [brain]);
 }
@@ -5943,7 +6034,7 @@ function RawListFn(props) {
     debugChannel
   });
   const getRenderItem = useLatest(renderItem);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     const renderRange = brain.getRenderRange();
     renderer.renderRange(renderRange, {
       renderItem,
@@ -5951,7 +6042,7 @@ function RawListFn(props) {
       onRender: onRenderUpdater
     });
   }, [brain, renderItem, onRenderUpdater]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     const remove = brain.onRenderRangeChange((renderRange) => {
       renderer.renderRange(renderRange, {
         force: false,
@@ -5978,7 +6069,7 @@ function InfiniteTableHeaderFn(props) {
     componentState: { headerHeight }
   } = useInfiniteTable();
   const { computedVisibleColumnsMap } = computed;
-  const renderColumn = (0, import_react26.useCallback)(({ domRef: domRef2, itemIndex: columnIndex }) => {
+  const renderColumn = (0, import_react27.useCallback)(({ domRef: domRef2, itemIndex: columnIndex }) => {
     const column = columns[columnIndex];
     if (!column) {
       if (true) {
@@ -5993,7 +6084,7 @@ function InfiniteTableHeaderFn(props) {
       columns: computedVisibleColumnsMap
     });
   }, [computedVisibleColumnsMap, columns, repaintId, headerHeight]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     const onScroll = (scrollPosition) => {
       if (domRef.current) {
         domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
@@ -6002,7 +6093,7 @@ function InfiniteTableHeaderFn(props) {
     const removeOnScroll = brain.onScroll(onScroll);
     return removeOnScroll;
   }, [brain]);
-  const domRef = (0, import_react26.useRef)(null);
+  const domRef = (0, import_react27.useRef)(null);
   const headerCls = HeaderClsRecipe({
     pinned: pinning,
     overflow: false,
@@ -6194,7 +6285,7 @@ function renderColumnHeaderGroups(config) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderUnvirtualized.tsx
-var import_react27 = __toModule(require("react"));
+var import_react28 = __toModule(require("react"));
 var { rootClassName: rootClassName5 } = internalProps;
 var TableHeaderClassName2 = `${rootClassName5}Header`;
 var UPDATE_SCROLL = (node, scrollPosition) => {
@@ -6260,7 +6351,7 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
   if (totalWidth != null) {
     style.width = availableWidth;
   }
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const scroller = brain || scrollListener;
     if (!scroller || !scrollable) {
       return;
@@ -6380,12 +6471,12 @@ function TableHeaderWrapper(props) {
 
 // src/components/VirtualScrollContainer/index.tsx
 var React21 = __toModule(require("react"));
-var import_react29 = __toModule(require("react"));
+var import_react30 = __toModule(require("react"));
 
 // src/components/hooks/useOnScroll.ts
-var import_react28 = __toModule(require("react"));
+var import_react29 = __toModule(require("react"));
 var useOnScroll = (domRef, onScroll) => {
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const domNode = domRef == null ? void 0 : domRef.current;
     const scrollFn = (event) => {
       const node = event.target;
@@ -6431,7 +6522,7 @@ var VirtualScrollContainer = React21.forwardRef(function VirtualScrollContainer2
     className,
     style
   } = props;
-  const domRef = ref != null ? ref : (0, import_react29.useRef)(null);
+  const domRef = ref != null ? ref : (0, import_react30.useRef)(null);
   useOnScroll(domRef, onContainerScroll);
   return /* @__PURE__ */ React21.createElement("div", {
     ref: domRef,
@@ -6462,18 +6553,18 @@ function SpacePlaceholderFn(props) {
 var SpacePlaceholder = React22.memo(SpacePlaceholderFn);
 
 // src/components/InfiniteTable/hooks/useListRendering.tsx
-var import_react40 = __toModule(require("react"));
+var import_react42 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useUnpinnedRendering.tsx
 var React28 = __toModule(require("react"));
-var import_react33 = __toModule(require("react"));
+var import_react35 = __toModule(require("react"));
 
 // src/components/VirtualList/VirtualRowList.tsx
 var React24 = __toModule(require("react"));
 
 // src/components/VirtualList/VirtualList.tsx
 var React23 = __toModule(require("react"));
-var import_react30 = __toModule(require("react"));
+var import_react31 = __toModule(require("react"));
 
 // src/components/VirtualList/VirtualList.css.ts
 var VirtualListCls = "_16lm1iw1 _16lm1iw8 _16lm1iw0";
@@ -6516,11 +6607,11 @@ var VirtualList = (props) => {
     "onContainerScroll",
     "children"
   ]);
-  const domRef = (0, import_react30.useRef)(null);
+  const domRef = (0, import_react31.useRef)(null);
   const [, rerender] = useRerender();
-  const [totalSize, setTotalSize] = (0, import_react30.useState)(0);
-  const renderCountRef = (0, import_react30.useRef)(0);
-  (0, import_react30.useEffect)(() => {
+  const [totalSize, setTotalSize] = (0, import_react31.useState)(0);
+  const renderCountRef = (0, import_react31.useRef)(0);
+  (0, import_react31.useEffect)(() => {
     const removeOnRenderCount = virtualBrain.onRenderCountChange((renderCount) => {
       renderCountRef.current = renderCount;
       if (true) {
@@ -6539,7 +6630,7 @@ var VirtualList = (props) => {
       removeOnTotalSizeChange();
     };
   }, [virtualBrain]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     const onScroll = (scrollPosition) => {
       UPDATE_SCROLL2(domRef.current, scrollPosition);
     };
@@ -6593,11 +6684,13 @@ var VirtualRowList = (props) => {
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRow.tsx
 var React26 = __toModule(require("react"));
-var import_react32 = __toModule(require("react"));
+var import_react34 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
 var React25 = __toModule(require("react"));
+var import_react32 = __toModule(require("react"));
 var { rootClassName: rootClassName8 } = internalProps;
+var InfiniteTableColumnCellContext = React25.createContext(null);
 var InfiniteTableColumnCellClassName = `${rootClassName8}ColumnCell`;
 function isColumnWithField(c) {
   return typeof c.field === "string";
@@ -6644,24 +6737,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__ */ React25.createElement(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), {
@@ -6689,21 +6789,31 @@ function InfiniteTableColumnCellFn(props) {
       }
     }
   }
-  return /* @__PURE__ */ React25.createElement(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__ */ React25.createElement(ContextProvider, {
+    value: renderParam
+  }, /* @__PURE__ */ React25.createElement(InfiniteTableCell, __spreadValues({}, cellProps)));
 }
 var InfiniteTableColumnCell = React25.memo(InfiniteTableColumnCellFn);
+function useInfiniteColumnCell() {
+  const result = (0, import_react32.useContext)(InfiniteTableColumnCellContext);
+  return result;
+}
 
 // src/components/InfiniteTable/components/InfiniteTableRow/useRowDOMProps.ts
-var import_react31 = __toModule(require("react"));
+var import_react33 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRowClassName.ts
 var { rootClassName: rootClassName9 } = internalProps;
@@ -6729,8 +6839,8 @@ function useRowDOMProps(props, rowProps, rowStyle, rowClassName, groupRenderStra
     rowInfo,
     rowSpan
   } = props;
-  const domRef = (0, import_react31.useRef)(null);
-  const rowDOMRef = (0, import_react31.useCallback)((node) => {
+  const domRef = (0, import_react33.useRef)(null);
+  const rowDOMRef = (0, import_react33.useCallback)((node) => {
     domRefFromProps(node);
     domRef.current = node;
   }, []);
@@ -6761,7 +6871,7 @@ function useRowDOMProps(props, rowProps, rowStyle, rowClassName, groupRenderStra
   }), `${InfiniteTableRowClassName}--${rowInfo.isGroupRow ? "group" : "normal"}-row`, inlineGroupRoot ? `${InfiniteTableRowClassName}--inline-group-row` : "", showZebraRows ? `${InfiniteTableRowClassName}--${odd ? "odd" : "even"}` : null, showHoverRows ? `${InfiniteTableRowClassName}--show-hover` : null, domProps == null ? void 0 : domProps.className, rowProps == null ? void 0 : rowProps.className, rowComputedClassName);
   const initialMouseEnter = rowProps == null ? void 0 : rowProps.onMouseEnter;
   const initialMouseLeave = rowProps == null ? void 0 : rowProps.onMouseLeave;
-  const onMouseEnter = (0, import_react31.useCallback)((event) => {
+  const onMouseEnter = (0, import_react33.useCallback)((event) => {
     var _a;
     initialMouseEnter == null ? void 0 : initialMouseEnter(event);
     const rowIndex2 = ((_a = event.currentTarget) == null ? void 0 : _a.dataset.rowIndex) * 1;
@@ -6775,7 +6885,7 @@ function useRowDOMProps(props, rowProps, rowStyle, rowClassName, groupRenderStra
     const rows = parentNode.querySelectorAll(hoverSelector.join(","));
     rows.forEach((row) => row.classList.add(InfiniteTableRowClassName__hover, RowHoverCls));
   }, [initialMouseEnter, showHoverRows]);
-  const onMouseLeave = (0, import_react31.useCallback)((event) => {
+  const onMouseLeave = (0, import_react33.useCallback)((event) => {
     var _a;
     initialMouseLeave == null ? void 0 : initialMouseLeave(event);
     const rowIndex2 = (_a = event.currentTarget) == null ? void 0 : _a.dataset.rowIndex;
@@ -6831,7 +6941,7 @@ function InfiniteTableRowFn(props) {
     width: rowWidth,
     height: rowHeight
   }, domProps.style);
-  const renderCellRef = (0, import_react32.useRef)(null);
+  const renderCellRef = (0, import_react34.useRef)(null);
   const renderCell = React26.useCallback(({ domRef, itemIndex }) => {
     const column = columns[itemIndex];
     if (!column) {
@@ -6936,7 +7046,7 @@ function useUnpinnedRendering(params) {
   } = params;
   const { virtualizeColumns } = getState();
   const shouldVirtualizeColumns = typeof virtualizeColumns === "function" ? virtualizeColumns(computedUnpinnedColumns) : virtualizeColumns != null ? virtualizeColumns : true;
-  const renderRowUnpinned = (0, import_react33.useCallback)((rowParams) => {
+  const renderRowUnpinned = (0, import_react35.useCallback)((rowParams) => {
     const dataArray = getData();
     const rowInfo = dataArray[rowParams.rowIndex];
     const { showZebraRows, showHoverRows } = getState();
@@ -7004,7 +7114,7 @@ function useUnpinnedRendering(params) {
 }
 
 // src/components/InfiniteTable/hooks/useOnContainerScroll.ts
-var import_react34 = __toModule(require("react"));
+var import_react36 = __toModule(require("react"));
 
 // src/components/InfiniteTable/InfiniteCls.css.ts
 var import_createRuntimeFn5 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
@@ -7042,18 +7152,18 @@ var useOnContainerScroll = ({
     getState: getDataSourceState,
     componentState: { notifyScrollStop }
   } = useDataSourceContextValue();
-  const onScrollStop = (0, import_react34.useCallback)((param) => {
+  const onScrollStop = (0, import_react36.useCallback)((param) => {
     onScrollStopFromProps == null ? void 0 : onScrollStopFromProps(param);
     notifyScrollStop(param);
   }, [onScrollStopFromProps, notifyScrollStop]);
-  const timeoutIdRef = (0, import_react34.useRef)(0);
-  const scrollingRef = (0, import_react34.useRef)(false);
-  const scrollTopMaxRef = (0, import_react34.useRef)(0);
-  (0, import_react34.useEffect)(() => {
+  const timeoutIdRef = (0, import_react36.useRef)(0);
+  const scrollingRef = (0, import_react36.useRef)(false);
+  const scrollTopMaxRef = (0, import_react36.useRef)(0);
+  (0, import_react36.useEffect)(() => {
     const { current: node } = scrollerDOMRef;
     scrollTopMaxRef.current = node.scrollHeight - node.clientHeight;
   }, [reservedContentHeight, bodySize.height]);
-  const setScrolling = (0, import_react34.useCallback)((scrolling) => {
+  const setScrolling = (0, import_react36.useCallback)((scrolling) => {
     var _a;
     const prevScrolling = scrollingRef.current;
     scrollingRef.current = scrolling;
@@ -7086,7 +7196,7 @@ var useOnContainerScroll = ({
       }
     }
   }, [scrollStopDelay, onScrollStop]);
-  const onContainerScroll = (0, import_react34.useCallback)((scrollInfo) => {
+  const onContainerScroll = (0, import_react36.useCallback)((scrollInfo) => {
     verticalVirtualBrain.setScrollPosition(scrollInfo);
     horizontalVirtualBrain.setScrollPosition(scrollInfo);
     setScrolling(true);
@@ -7096,15 +7206,15 @@ var useOnContainerScroll = ({
     domRef.current,
     setScrolling
   ]);
-  const scrollPositionRef = (0, import_react34.useRef)({
+  const scrollPositionRef = (0, import_react36.useRef)({
     scrollLeft: 0,
     scrollTop: 0
   });
-  const applyScrollHorizontal = (0, import_react34.useCallback)(({ scrollLeft }) => {
+  const applyScrollHorizontal = (0, import_react36.useCallback)(({ scrollLeft }) => {
     scrollPositionRef.current.scrollLeft = scrollLeft;
     onContainerScroll(scrollPositionRef.current);
   }, [onContainerScroll]);
-  const applyScrollVertical = (0, import_react34.useCallback)(({ scrollTop }) => {
+  const applyScrollVertical = (0, import_react36.useCallback)(({ scrollTop }) => {
     scrollPositionRef.current.scrollTop = scrollTop;
     onContainerScroll(scrollPositionRef.current);
     if (scrollTop === 0) {
@@ -7127,16 +7237,16 @@ var useOnContainerScroll = ({
 
 // src/components/InfiniteTable/hooks/usePinnedRendering.tsx
 var React30 = __toModule(require("react"));
-var import_react37 = __toModule(require("react"));
+var import_react39 = __toModule(require("react"));
 
 // src/components/VirtualList/RowListWithExternalScrolling.tsx
 var React29 = __toModule(require("react"));
-var import_react36 = __toModule(require("react"));
+var import_react38 = __toModule(require("react"));
 
 // src/components/hooks/useOnMount.ts
-var import_react35 = __toModule(require("react"));
+var import_react37 = __toModule(require("react"));
 function useOnMount(domRef, props) {
-  (0, import_react35.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     const { onMount, onUnmount } = props;
     const node = domRef == null ? void 0 : domRef.current;
     onMount == null ? void 0 : onMount(node);
@@ -7167,8 +7277,8 @@ var RowListWithExternalScrolling = (props) => {
     onMount,
     onUnmount
   } = props;
-  const domRef = (0, import_react36.useRef)(null);
-  const renderItem = (0, import_react36.useCallback)((renderProps) => renderRow({
+  const domRef = (0, import_react38.useRef)(null);
+  const renderItem = (0, import_react38.useCallback)((renderProps) => renderRow({
     domRef: renderProps.domRef,
     rowHeight: renderProps.itemSize,
     rowIndex: renderProps.itemIndex
@@ -7177,7 +7287,7 @@ var RowListWithExternalScrolling = (props) => {
     onMount,
     onUnmount
   });
-  (0, import_react36.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     const onScroll = (scrollPosition) => {
       const node = domRef.current;
       if (node) {
@@ -7244,7 +7354,7 @@ function PinnedRowsContainer(props) {
     }
     return result;
   }, [height, rowWidth, pinning, hasOverflow]);
-  const updateScroll = (0, import_react37.useCallback)((node, scrollPosition) => {
+  const updateScroll = (0, import_react39.useCallback)((node, scrollPosition) => {
     UPDATE_SCROLL3(node, scrollPosition, hasOverflow ? pinnedScrollListener.getScrollPosition() : void 0);
   }, [hasOverflow, pinnedScrollListener]);
   const rowListProps = {
@@ -7287,7 +7397,7 @@ function PinnedRowsContainer(props) {
 function useRenderPinnedRow(params) {
   const { getData, getState, columnsWidth, columns, rowSpan, verticalBrain } = params;
   const dataArray = getData();
-  const renderPinnedRow = (0, import_react37.useCallback)((rowParams) => {
+  const renderPinnedRow = (0, import_react39.useCallback)((rowParams) => {
     const rowInfo = dataArray[rowParams.rowIndex];
     const { showZebraRows, showHoverRows } = getState();
     const rowProps = __spreadValues({
@@ -7404,13 +7514,13 @@ function usePinnedStartRendering(params) {
 }
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
-var import_react39 = __toModule(require("react"));
+var import_react41 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useColumnSizeFn.ts
-var import_react38 = __toModule(require("react"));
+var import_react40 = __toModule(require("react"));
 var debug5 = dbg("useColumnSizeFn");
 function useColumnSizeFn(computedUnpinnedColumns) {
-  const columnSize = (0, import_react38.useCallback)((index) => {
+  const columnSize = (0, import_react40.useCallback)((index) => {
     const column = computedUnpinnedColumns[index];
     if (!column) {
       debug5("cannot find column at index", index, computedUnpinnedColumns);
@@ -7440,13 +7550,13 @@ function useYourBrain(param) {
     globalThis.verticalVirtualBrain = verticalVirtualBrain;
     globalThis.horizontalVirtualBrain = horizontalVirtualBrain;
   }
-  (0, import_react39.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     verticalVirtualBrain.setAvailableSize({
       height: bodySize.height,
       width: 0
     });
   }, [bodySize, verticalVirtualBrain]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     horizontalVirtualBrain.setAvailableSize({
       height: 0,
       width: Math.max(bodySize.width - computedPinnedStartWidth - computedPinnedEndWidth, 0)
@@ -7487,7 +7597,7 @@ function useListRendering(param) {
     horizontalVirtualBrain
   } = componentState;
   const prevDataSourceTimestamp = usePrevious(dataSourceState.updatedAt);
-  const repaintIdRef = (0, import_react40.useRef)(0);
+  const repaintIdRef = (0, import_react42.useRef)(0);
   if (prevDataSourceTimestamp !== dataSourceState.updatedAt || !shallowEqualObjects(prevComputed, computed)) {
     repaintIdRef.current++;
   }
@@ -7506,11 +7616,11 @@ function useListRendering(param) {
   const hasHorizontalScrollbar = computedUnpinnedColumnsWidth > bodySize.width - computedPinnedStartColumnsWidth - computedPinnedEndColumnsWidth;
   const reservedContentHeight = verticalVirtualBrain.getTotalSize() + (hasHorizontalScrollbar ? getScrollbarWidth() : 0);
   const hasVerticalScrollbar = bodySize.height > 0 && bodySize.height < reservedContentHeight;
-  const scrollbars = (0, import_react40.useMemo)(() => ({
+  const scrollbars = (0, import_react42.useMemo)(() => ({
     vertical: hasVerticalScrollbar,
     horizontal: hasHorizontalScrollbar
   }), [hasVerticalScrollbar, hasHorizontalScrollbar]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (!bodySize.height) {
       return;
     }
@@ -7566,7 +7676,7 @@ function useListRendering(param) {
     computedUnpinnedColumns
   });
   const [, rerender] = useRerender();
-  (0, import_react40.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     rerender();
   }, [dataSourceState]);
   const { pinnedStartList, pinnedStartScrollbarPlaceholder } = usePinnedStartRendering(pinnedRenderingParams);
@@ -7590,7 +7700,7 @@ function useListRendering(param) {
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
 var React31 = __toModule(require("react"));
-var import_react41 = __toModule(require("react"));
+var import_react43 = __toModule(require("react"));
 
 // src/components/utils/decamelize.ts
 function decamelize(str, options) {
@@ -7639,7 +7749,7 @@ var InfiniteTableLicenseFooter = React31.forwardRef(function InfiniteTableLicens
       ref.current = node;
     }
   }, []);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     const forceStyle = () => {
       requestAnimationFrame(() => {
         var _a;
@@ -7667,7 +7777,7 @@ var InfiniteTableLicenseFooter = React31.forwardRef(function InfiniteTableLicens
 });
 
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
-var import_react42 = __toModule(require("react"));
+var import_react44 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useLicense/crc32.ts
 var DEFAULT_ReversedPolynomial = 3988292384;
@@ -7825,10 +7935,10 @@ var isInsideSandbox = () => {
 };
 var isInsidePlayground = isInsideSandbox() || isInsideSandpack();
 var useLicense = (licenseKey = "") => {
-  const valid = (0, import_react42.useMemo)(() => {
+  const valid = (0, import_react44.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.2.14"
+      version: "0.2.17"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -7840,7 +7950,7 @@ var useLicense = (licenseKey = "") => {
 
 // src/components/CSSVariableWatch.tsx
 var React32 = __toModule(require("react"));
-var import_react43 = __toModule(require("react"));
+var import_react45 = __toModule(require("react"));
 var error = err("CSSVariableWatch");
 var debug6 = dbg("CSSVariableWatch");
 var WRAPPER_STYLE = {
@@ -7853,7 +7963,7 @@ var WRAPPER_STYLE = {
   overflow: "hidden"
 };
 var useCSSVariableWatch = (params) => {
-  const lastValueRef = (0, import_react43.useRef)(0);
+  const lastValueRef = (0, import_react45.useRef)(0);
   const onResize = React32.useCallback(({ height }) => {
     if (height && height !== lastValueRef.current) {
       lastValueRef.current = height;
@@ -7873,7 +7983,7 @@ var useCSSVariableWatch = (params) => {
   }, []);
 };
 var CSSVariableWatch = (props) => {
-  const domRef = (0, import_react43.useRef)(null);
+  const domRef = (0, import_react45.useRef)(null);
   useCSSVariableWatch(__spreadProps(__spreadValues({}, props), {
     ref: domRef
   }));
@@ -7997,7 +8107,7 @@ function LoadMaskFn(props) {
 var LoadMask = React33.memo(LoadMaskFn);
 
 // src/components/InfiniteTable/hooks/useAutoSizeColumns.ts
-var import_react44 = __toModule(require("react"));
+var import_react46 = __toModule(require("react"));
 var OFFSET = 10;
 function getColumnContentMaxWidths(domRef, options) {
   var _a;
@@ -8062,11 +8172,11 @@ function useAutoSizeColumns() {
       horizontalVirtualBrain
     }
   } = useComponentState();
-  const [refreshId, setRefreshId] = (0, import_react44.useState)(0);
+  const [refreshId, setRefreshId] = (0, import_react46.useState)(0);
   const theKey = typeof autoSizeColumnsKey === "object" ? autoSizeColumnsKey.key : autoSizeColumnsKey;
   const getTheKey = useLatest(theKey);
-  const lastExecutedIdentifierRef = (0, import_react44.useRef)(null);
-  (0, import_react44.useEffect)(() => {
+  const lastExecutedIdentifierRef = (0, import_react46.useRef)(null);
+  (0, import_react46.useEffect)(() => {
     const key = getTheKey();
     if (key == null) {
       return;
@@ -8084,7 +8194,7 @@ function useAutoSizeColumns() {
       removeHorizontal();
     };
   }, [verticalVirtualBrain, horizontalVirtualBrain]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     var _a;
     if (theKey == null) {
       return;