@infinite-table/infinite-react 0.2.12 → 0.2.15

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
@@ -655,7 +657,7 @@ function debounce(fn, { wait }) {
 }
 
 // src/components/InfiniteTable/index.tsx
-var React34 = __toModule(require("react"));
+var React35 = __toModule(require("react"));
 
 // src/components/InfiniteTable/internalProps.ts
 var rootClassName = "Infinite";
@@ -1484,7 +1486,7 @@ var useInfiniteTable = () => {
 // src/components/InfiniteTable/hooks/useComputedVisibleColumns.ts
 var import_react8 = __toModule(require("react"));
 
-// src/components/flexbox/index.tsx
+// src/components/flexbox/index.ts
 var computeFlex = (params) => {
   const {
     availableSize,
@@ -2154,7 +2156,7 @@ var sortAscending = (a, b) => a - b;
 // src/components/InfiniteTable/hooks/useComputed.ts
 var import_react18 = __toModule(require("react"));
 
-// src/components/hooks/useComponentState.tsx
+// src/components/hooks/useComponentState/index.tsx
 var React2 = __toModule(require("react"));
 var import_react11 = __toModule(require("react"));
 
@@ -2216,7 +2218,7 @@ var usePrevious = (value, initialValue) => {
   return ref.current;
 };
 
-// src/components/hooks/useComponentState.tsx
+// src/components/hooks/useComponentState/index.tsx
 var notifyChange = (props, propName, newValue) => {
   const upperPropName = toUpperFirst(propName);
   const callbackPropName = `on${upperPropName}Change`;
@@ -2539,7 +2541,7 @@ function useColumnGroups() {
 var import_react17 = __toModule(require("react"));
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
-var React6 = __toModule(require("react"));
+var React7 = __toModule(require("react"));
 
 // src/utils/join.ts
 var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
@@ -2610,6 +2612,12 @@ 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
+var React6 = __toModule(require("react"));
+function RenderHookComponent(props) {
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, props.render(props.renderParam));
+}
+
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
 function getGroupColumnRender({
   groupIndexForColumn,
@@ -2620,7 +2628,10 @@ function getGroupColumnRender({
     var _a, _b, _c;
     let { value, rowInfo, column, groupBy, pivotBy } = renderOptions;
     if (column.renderValue) {
-      value = column.renderValue(renderOptions);
+      value = /* @__PURE__ */ React7.createElement(RenderHookComponent, {
+        render: column.renderValue,
+        renderParam: renderOptions
+      });
     }
     let groupRowInfo = groupRenderStrategy !== "inline" ? rowInfo : ((_a = rowInfo.parents) == null ? void 0 : _a[groupIndexForColumn]) || rowInfo;
     if (!groupRowInfo) {
@@ -2646,17 +2657,20 @@ function getGroupColumnRender({
     let icon = null;
     const showExpanderIcon = pivotBy ? (((_b = groupRowInfo.groupKeys) == null ? void 0 : _b.length) || 0) < (groupBy == null ? void 0 : groupBy.length) : (((_c = groupRowInfo.groupKeys) == null ? void 0 : _c.length) || 0) <= (groupBy == null ? void 0 : groupBy.length);
     if (showExpanderIcon) {
-      const defaultIcon = /* @__PURE__ */ React6.createElement(ExpanderIcon, {
+      const defaultIcon = /* @__PURE__ */ React7.createElement(ExpanderIcon, {
         expanded: !collapsed,
         onChange: () => {
           toggleGroupRow(groupKeys);
         }
       });
-      icon = column.renderGroupIcon ? column.renderGroupIcon(Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)) : defaultIcon;
+      icon = column.renderGroupIcon ? /* @__PURE__ */ React7.createElement(RenderHookComponent, {
+        render: column.renderGroupIcon,
+        renderParam: Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)
+      }) : defaultIcon;
     }
-    return /* @__PURE__ */ React6.createElement("div", {
+    return /* @__PURE__ */ React7.createElement("div", {
       className: join(display.flex, alignItems.center)
-    }, icon, /* @__PURE__ */ React6.createElement("div", {
+    }, icon, /* @__PURE__ */ React7.createElement("div", {
       className: cssEllipsisClassName
     }, value != null ? value : null));
   };
@@ -2704,7 +2718,7 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
       let icon = null;
       const showExpanderIcon = pivotBy ? (((_a = rowInfo.groupKeys) == null ? void 0 : _a.length) || 0) < (groupBy == null ? void 0 : groupBy.length) : (((_b = rowInfo.groupKeys) == null ? void 0 : _b.length) || 0) <= (groupBy == null ? void 0 : groupBy.length);
       if (showExpanderIcon) {
-        const defaultIcon = /* @__PURE__ */ React6.createElement(ExpanderIcon, {
+        const defaultIcon = /* @__PURE__ */ React7.createElement(ExpanderIcon, {
           expanded: !collapsed,
           onChange: () => {
             toggleGroupRow(rowInfo.groupKeys);
@@ -2712,9 +2726,9 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
         });
         icon = column.renderGroupIcon ? column.renderGroupIcon(Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)) : defaultIcon;
       }
-      return /* @__PURE__ */ React6.createElement("div", {
+      return /* @__PURE__ */ React7.createElement("div", {
         className: join(display.flex, alignItems.center, GroupRowExpanderCls)
-      }, icon, /* @__PURE__ */ React6.createElement("div", {
+      }, icon, /* @__PURE__ */ React7.createElement("div", {
         className: cssEllipsisClassName
       }, value != null ? value : null));
     }
@@ -2733,7 +2747,7 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
 var import_react16 = __toModule(require("react"));
 
 // src/components/DataSource/index.tsx
-var React7 = __toModule(require("react"));
+var React8 = __toModule(require("react"));
 
 // src/utils/multisort/sortTypes.ts
 var numberComparator = function(first, second) {
@@ -2834,6 +2848,7 @@ var DeepMap = class {
     this.map = new Map();
     this.length = 0;
     this.revision = 0;
+    this.emptyKey = Symbol("emptyKey");
     this.visit = (fn) => {
       this.map.forEach((_, k) => this.visitKey(k, this.map, [], fn));
     };
@@ -2845,13 +2860,19 @@ var DeepMap = class {
         return;
       }
       let i = 0;
-      currentMap.forEach((_, key) => {
+      const hasEmptyKey = currentMap.has(this.emptyKey);
+      let allowEmptyKey = true;
+      const iterator = (_, key) => {
         const pair = currentMap.get(key);
         if (!pair) {
           return;
         }
         const { map: map2 } = pair;
-        const keys = [...parentKeys, key];
+        const isEmptyKey = key === this.emptyKey;
+        if (isEmptyKey && !allowEmptyKey) {
+          return;
+        }
+        const keys = isEmptyKey ? [] : [...parentKeys, key];
         const next = map2 ? () => this.visitWithNext(keys, fn, map2) : void 0;
         if (pair.hasOwnProperty("value")) {
           fn(pair.value, keys, i, next);
@@ -2859,7 +2880,13 @@ var DeepMap = class {
         } else {
           next == null ? void 0 : next();
         }
-      });
+      };
+      if (hasEmptyKey) {
+        iterator(void 0, this.emptyKey);
+        allowEmptyKey = false;
+        i = 0;
+      }
+      currentMap.forEach(iterator);
     };
     if (initial) {
       initial.forEach((entry) => {
@@ -2878,7 +2905,7 @@ var DeepMap = class {
   set(keys, value) {
     let currentMap = this.map;
     if (!keys.length) {
-      throw `Cannot set given keys - please provide a non-empty keys array.`;
+      keys = [this.emptyKey];
     }
     for (let i = 0, len = keys.length; i < len; i++) {
       const key = keys[i];
@@ -2904,7 +2931,7 @@ var DeepMap = class {
     var _a;
     let currentMap = this.map;
     if (!keys.length) {
-      throw `Cannot get given keys - please provide a non-empty keys array.`;
+      keys = [this.emptyKey];
     }
     for (let i = 0, len = keys.length; i < len; i++) {
       const key = keys[i];
@@ -2939,10 +2966,11 @@ var DeepMap = class {
     this.revision = 0;
   }
   delete(keys) {
-    keys = [...keys];
     let currentMap = this.map;
     if (!keys.length) {
-      throw `Cannot delete given keys - please provide a non-empty keys array.`;
+      keys = [this.emptyKey];
+    } else {
+      keys = [...keys];
     }
     let maps = [currentMap];
     let result = false;
@@ -2995,7 +3023,7 @@ var DeepMap = class {
   has(keys) {
     let currentMap = this.map;
     if (!keys.length) {
-      throw `Cannot find existing given keys - please provide a non-empty keys array.`;
+      keys = [this.emptyKey];
     }
     for (let i = 0, len = keys.length; i < len; i++) {
       const key = keys[i];
@@ -3019,7 +3047,7 @@ var DeepMap = class {
       return;
     }
     const { map: map2 } = pair;
-    const keys = [...parentKeys, key];
+    const keys = key === this.emptyKey ? [] : [...parentKeys, key];
     const next = once(() => {
       if (map2) {
         map2.forEach((_, k) => {
@@ -3035,7 +3063,12 @@ var DeepMap = class {
   getArray(fn) {
     const result = [];
     this.visit((pair, keys) => {
-      result.push(fn(__spreadProps(__spreadValues({}, pair), { keys })));
+      const res = fn(__spreadProps(__spreadValues({}, pair), { keys }));
+      if (keys.length === 0) {
+        result.splice(0, 0, res);
+      } else {
+        result.push(res);
+      }
     });
     return result;
   }
@@ -3121,7 +3154,7 @@ function lazyGroup(groupParams, rootData) {
   } = groupParams;
   const deepMap = new DeepMap();
   function traverseValues(pivotDeepMap, container, pivot2, pivotIndex = 0, currentPivotKeys2 = []) {
-    const last = pivotIndex === pivot2.length - 1;
+    const last = !pivot2.length || pivotIndex === pivot2.length - 1;
     const values = container[(mappings == null ? void 0 : mappings.values) || "values"] || {};
     for (var k in values)
       if (values.hasOwnProperty(k)) {
@@ -3145,7 +3178,7 @@ function lazyGroup(groupParams, rootData) {
   rootData.visitDepthFirst((lazyGroupRowInfo, keys, _index, next) => {
     const [_rootKey, ...currentGroupKeys] = keys;
     const dataArray = lazyGroupRowInfo.items;
-    if (currentGroupKeys.length == groupBy.length) {
+    if (currentGroupKeys.length == groupBy.length && groupBy.length) {
       const deepMapGroupValue = deepMap.get(currentGroupKeys);
       if (deepMapGroupValue) {
         deepMapGroupValue.items = dataArray;
@@ -3167,9 +3200,11 @@ function lazyGroup(groupParams, rootData) {
       const dataObject = dataArray[i].data;
       const dataKeys = dataArray[i].keys;
       let item = dataObject;
-      const { field: groupByProperty } = groupBy[dataKeys.length - 1];
-      const key = item[groupByProperty];
-      currentGroupKeys.push(key);
+      if (dataKeys.length) {
+        const { field: groupByProperty } = groupBy[dataKeys.length - 1];
+        const key = item[groupByProperty];
+        currentGroupKeys.push(key);
+      }
       const deepMapGroupValue = {
         items: [],
         commonData: dataObject,
@@ -3181,7 +3216,9 @@ function lazyGroup(groupParams, rootData) {
         const pivotContainer = dataArray[i].pivot;
         traverseValues(pivotDeepMap, pivotContainer, pivot, 0, currentPivotKeys);
       }
-      currentGroupKeys.pop();
+      if (dataKeys.length) {
+        currentGroupKeys.pop();
+      }
     }
     next == null ? void 0 : next();
   });
@@ -3197,6 +3234,37 @@ function lazyGroup(groupParams, rootData) {
   }
   return result;
 }
+function processGroup(deepMap, currentGroupKeys, currentPivotKeys, item, pivot, reducers, topLevelPivotColumns, initialReducerValue, defaultToKey = DEFAULT_TO_KEY) {
+  const {
+    items: currentGroupItems,
+    reducerResults,
+    pivotDeepMap
+  } = deepMap.get(currentGroupKeys);
+  currentGroupItems.push(item);
+  if (reducers) {
+    computeReducersFor(item, reducers, reducerResults);
+  }
+  if (pivot) {
+    for (let pivotIndex = 0, pivotLength = pivot.length; pivotIndex < pivotLength; pivotIndex++) {
+      const { field: pivotField, toKey: pivotToKey } = pivot[pivotIndex];
+      const pivotKey = (pivotToKey || defaultToKey)(item[pivotField], item);
+      currentPivotKeys.push(pivotKey);
+      if (!pivotDeepMap.has(currentPivotKeys)) {
+        topLevelPivotColumns.set(currentPivotKeys, true);
+        pivotDeepMap == null ? void 0 : pivotDeepMap.set(currentPivotKeys, {
+          reducerResults: __spreadValues({}, initialReducerValue),
+          items: []
+        });
+      }
+      const { reducerResults: pivotReducerResults, items: pivotGroupItems } = pivotDeepMap.get(currentPivotKeys);
+      pivotGroupItems.push(item);
+      if (reducers) {
+        computeReducersFor(item, reducers, pivotReducerResults);
+      }
+    }
+    currentPivotKeys.length = 0;
+  }
+}
 function group(groupParams, data) {
   const {
     groupBy,
@@ -3211,6 +3279,16 @@ function group(groupParams, data) {
   let currentPivotKeys = [];
   const initialReducerValue = initReducers(reducers);
   const globalReducerResults = __spreadValues({}, initialReducerValue);
+  if (!groupByLength) {
+    const deepMapGroupValue = {
+      items: [],
+      reducerResults: __spreadValues({}, initialReducerValue)
+    };
+    if (pivot) {
+      deepMapGroupValue.pivotDeepMap = new DeepMap();
+    }
+    deepMap.set(currentGroupKeys, deepMapGroupValue);
+  }
   for (let i = 0, len = data.length; i < len; i++) {
     let item = data[i];
     for (let groupByIndex = 0; groupByIndex < groupByLength; groupByIndex++) {
@@ -3227,38 +3305,10 @@ function group(groupParams, data) {
         }
         deepMap.set(currentGroupKeys, deepMapGroupValue);
       }
-      const {
-        items: currentGroupItems,
-        reducerResults,
-        pivotDeepMap
-      } = deepMap.get(currentGroupKeys);
-      currentGroupItems.push(item);
-      if (reducers) {
-        computeReducersFor(item, reducers, reducerResults);
-      }
-      if (pivot) {
-        for (let pivotIndex = 0, pivotLength = pivot.length; pivotIndex < pivotLength; pivotIndex++) {
-          const { field: pivotField, toKey: pivotToKey } = pivot[pivotIndex];
-          const pivotKey = (pivotToKey || defaultToKey)(item[pivotField], item);
-          currentPivotKeys.push(pivotKey);
-          if (!pivotDeepMap.has(currentPivotKeys)) {
-            topLevelPivotColumns.set(currentPivotKeys, true);
-            pivotDeepMap == null ? void 0 : pivotDeepMap.set(currentPivotKeys, {
-              reducerResults: __spreadValues({}, initialReducerValue),
-              items: []
-            });
-          }
-          const {
-            reducerResults: pivotReducerResults,
-            items: pivotGroupItems
-          } = pivotDeepMap.get(currentPivotKeys);
-          pivotGroupItems.push(item);
-          if (reducers) {
-            computeReducersFor(item, reducers, pivotReducerResults);
-          }
-        }
-        currentPivotKeys.length = 0;
-      }
+      processGroup(deepMap, currentGroupKeys, currentPivotKeys, item, pivot, reducers, topLevelPivotColumns, initialReducerValue, defaultToKey);
+    }
+    if (!groupByLength) {
+      processGroup(deepMap, currentGroupKeys, currentPivotKeys, item, pivot, reducers, topLevelPivotColumns, initialReducerValue, defaultToKey);
     }
     if (reducers) {
       computeReducersFor(item, reducers, globalReducerResults);
@@ -3502,7 +3552,7 @@ function buildDataSourceDataParams(componentState, overrides) {
   };
   if (componentState.livePagination !== void 0) {
     dataSourceParams.livePaginationCursor = componentState.livePaginationCursor;
-    dataSourceParams.cursorId = componentState.cursorId;
+    dataSourceParams.__cursorId = componentState.cursorId;
   }
   if (componentState.lazyLoad) {
     if (componentState.lazyLoadBatchSize != null && componentState.lazyLoadBatchSize > 0) {
@@ -3533,7 +3583,7 @@ function loadData(data, componentState, actions, overrides) {
     const lazyGroupData = componentState.originalLazyGroupData;
     const key = [LAZY_ROOT_KEY_FOR_GROUPS, ...dataParams.groupKeys || []];
     const existingGroupRowInfo = lazyGroupData.get(key);
-    if (existingGroupRowInfo && existingGroupRowInfo.cache) {
+    if (existingGroupRowInfo && existingGroupRowInfo.cache && key.length > 1) {
       const items = existingGroupRowInfo.items;
       const len = items.length;
       let allLoaded = true;
@@ -3599,10 +3649,14 @@ function loadData(data, componentState, actions, overrides) {
           lazyGroupData.set(key, newGroupRowInfo);
         }
         skipAssign = true;
-        actions.originalLazyGroupDataChangeDetect = getChangeDetect();
+        let skipTriggerChangeAsAlreadyOriginalArrayWasUpdated = false;
         if (!dataParams.groupKeys || !dataParams.groupKeys.length) {
           const topLevelItems = lazyGroupData.get([LAZY_ROOT_KEY_FOR_GROUPS]);
           actions.originalDataArray = [...topLevelItems.items];
+          skipTriggerChangeAsAlreadyOriginalArrayWasUpdated = true;
+        }
+        if (!skipTriggerChangeAsAlreadyOriginalArrayWasUpdated) {
+          actions.originalLazyGroupDataChangeDetect = getChangeDetect();
         }
       }
     } else {
@@ -3688,7 +3742,8 @@ function useLoadData() {
     const componentState2 = getComponentState();
     if (initialRef.current) {
       initialRef.current = false;
-      actions.dataParams = buildDataSourceDataParams(componentState2);
+      const dataParams = buildDataSourceDataParams(componentState2);
+      actions.dataParams = dataParams;
     }
   }, depsObject);
 }
@@ -3701,7 +3756,6 @@ function useLazyLoadRange() {
   const loadingCache = (0, import_react15.useMemo)(() => {
     return new Map();
   }, [componentState.data]);
-  globalThis.loadingCache = loadingCache;
   const {
     lazyLoadBatchSize,
     notifyRenderRangeChange,
@@ -3709,13 +3763,13 @@ function useLazyLoadRange() {
     scrollStopDelayUpdatedByTable
   } = componentState;
   const latestRenderRangeRef = (0, import_react15.useRef)(null);
-  const loadRange = (param, cache = loadingCache) => {
+  const loadRange = (renderRange, cache = loadingCache) => {
     const componentState2 = getComponentState();
-    param = param || latestRenderRangeRef.current;
-    if (!param) {
+    renderRange = renderRange || latestRenderRangeRef.current;
+    if (!renderRange) {
       return;
     }
-    const { renderStartIndex: startIndex, renderEndIndex: endIndex } = param;
+    const { renderStartIndex: startIndex, renderEndIndex: endIndex } = renderRange;
     if (!lazyLoadBatchSize || lazyLoadBatchSize <= 0) {
       return;
     }
@@ -3730,9 +3784,9 @@ function useLazyLoadRange() {
   const debouncedLoadRange = (0, import_react15.useMemo)(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
   (0, import_react15.useEffect)(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
-      return notifyRenderRangeChange.onChange((param) => {
-        latestRenderRangeRef.current = param;
-        loadRange(param, loadingCache);
+      return notifyRenderRangeChange.onChange((renderRange) => {
+        latestRenderRangeRef.current = renderRange;
+        loadRange(renderRange, loadingCache);
       });
     }
     return;
@@ -4143,7 +4197,7 @@ function getInterceptActions() {
     },
     cursorId: (cursorId, { actions, state }) => {
       const dataParams = buildDataSourceDataParams(state, {
-        cursorId
+        __cursorId: cursorId
       });
       actions.dataParams = dataParams;
     },
@@ -4168,7 +4222,7 @@ function getInterceptActions() {
 
 // src/utils/groupAndPivot/getPivotColumnsAndColumnGroups.ts
 function prepareColumn(column) {
-  const { pivotByAtIndex: pivotByForColumn } = column;
+  const { pivotByAtIndex: pivotByForColumn, pivotAggregator } = column;
   if (pivotByForColumn == null ? void 0 : pivotByForColumn.column) {
     if (typeof pivotByForColumn.column === "function") {
       Object.assign(column, pivotByForColumn.column({ column }));
@@ -4176,6 +4230,13 @@ function prepareColumn(column) {
       Object.assign(column, pivotByForColumn.column);
     }
   }
+  if (pivotAggregator == null ? void 0 : pivotAggregator.pivotColumn) {
+    if (typeof pivotAggregator.pivotColumn === "function") {
+      Object.assign(column, pivotAggregator.pivotColumn({ column }));
+    } else {
+      Object.assign(column, pivotAggregator.pivotColumn);
+    }
+  }
   return column;
 }
 function prepareColumnGroup(columnGroup) {
@@ -4306,7 +4367,7 @@ function getPivotColumnsAndColumnGroups({
       next == null ? void 0 : next();
     }
   });
-  if (columns.size === 1) {
+  if (!pivotLength) {
     aggregationReducers.forEach((reducer, index) => {
       columns.set(`total:${reducer.id}`, prepareColumn({
         header: `${reducer.name || reducer.id} total`,
@@ -4479,7 +4540,7 @@ function DataSourceWithContext(props) {
   if (typeof children === "function") {
     children = children(computedValues);
   }
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, children);
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children);
 }
 var DataSourceRoot = getComponentStateRoot({
   initSetupState: initSetupState2,
@@ -4502,14 +4563,14 @@ function DataSourceCmp({ children }) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
-  return /* @__PURE__ */ React7.createElement(DataSourceContext.Provider, {
+  return /* @__PURE__ */ React8.createElement(DataSourceContext.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ React7.createElement(DataSourceWithContext, {
+  }, /* @__PURE__ */ React8.createElement(DataSourceWithContext, {
     children
   }));
 }
 function DataSource(props) {
-  return /* @__PURE__ */ React7.createElement(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ React7.createElement(DataSourceCmp, {
+  return /* @__PURE__ */ React8.createElement(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ React8.createElement(DataSourceCmp, {
     children: props.children
   }));
 }
@@ -4838,7 +4899,7 @@ function getColumnsWhenGrouping(params) {
       }, toggleGroupRow, groupColumn);
       computedColumns.set(generatedGroupColumn.id || `group-by-${groupByForColumn.field}`, generatedGroupColumn);
     });
-  } else if (groupRenderStrategy === "single-column") {
+  } else if (groupRenderStrategy === "single-column" && groupBy.length) {
     const singleGroupColumn = getSingleGroupColumn({
       groupCount: groupBy.length,
       groupBy,
@@ -4848,7 +4909,14 @@ function getColumnsWhenGrouping(params) {
     computedColumns.set(singleGroupColumn.id || "group-by", singleGroupColumn);
   }
   if (pivotColumns) {
+    const columnsByField = {};
+    columns.forEach((col) => {
+      if (col.field) {
+        columnsByField[col.field] = col;
+      }
+    });
     pivotColumns.forEach((col, key) => {
+      var _a, _b;
       if (col.pivotTotalColumn && pivotTotalColumnPosition === false) {
         return;
       }
@@ -4864,6 +4932,10 @@ function getColumnsWhenGrouping(params) {
           column = __spreadValues(__spreadValues({}, column), pivotColumn);
         }
       }
+      if (column.inheritFromColumn !== false) {
+        const colToInheritFrom = typeof column.inheritFromColumn === "string" ? columns.get(column.inheritFromColumn) : ((_a = column.pivotAggregator) == null ? void 0 : _a.field) ? columnsByField[(_b = column.pivotAggregator) == null ? void 0 : _b.field] : void 0;
+        column = __spreadValues(__spreadValues({}, colToInheritFrom), column);
+      }
       if (!column.render && column.renderValue) {
         column.render = (renderOptions) => {
           return column.renderValue(renderOptions);
@@ -5035,7 +5107,7 @@ function useComputed() {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
-var React8 = __toModule(require("react"));
+var React9 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useInternalProps.ts
 var useInternalProps = () => {
@@ -5043,9 +5115,9 @@ var useInternalProps = () => {
 };
 
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
-var InfiniteTableBody = React8.forwardRef(function InfiniteTableBody2(props, ref) {
+var InfiniteTableBody = React9.forwardRef(function InfiniteTableBody2(props, ref) {
   const { rootClassName: rootClassName12 } = useInternalProps();
-  return /* @__PURE__ */ React8.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React9.createElement("div", __spreadProps(__spreadValues({
     ref
   }, props), {
     className: join(`${rootClassName12}Body`, position.relative, flex["1"], transformTranslateZero, props.className)
@@ -5053,16 +5125,16 @@ var InfiniteTableBody = React8.forwardRef(function InfiniteTableBody2(props, ref
 });
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
-var React20 = __toModule(require("react"));
+var React21 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/ScrollbarPlaceholder.tsx
-var React9 = __toModule(require("react"));
+var React10 = __toModule(require("react"));
 function HorizontalScrollbarPlaceholderFn(props) {
   const scrollbarWidth2 = getScrollbarWidth();
   if (!scrollbarWidth2) {
     return null;
   }
-  return /* @__PURE__ */ React9.createElement("div", {
+  return /* @__PURE__ */ React10.createElement("div", {
     "data-name": "horizontal-scrollbar-placeholder",
     style: __spreadValues({
       position: "absolute",
@@ -5072,13 +5144,13 @@ function HorizontalScrollbarPlaceholderFn(props) {
     }, props.style)
   });
 }
-var HorizontalScrollbarPlaceholder = React9.memo(HorizontalScrollbarPlaceholderFn);
+var HorizontalScrollbarPlaceholder = React10.memo(HorizontalScrollbarPlaceholderFn);
 function VerticalScrollbarPlaceholderFn(props) {
   const scrollbarWidth2 = getScrollbarWidth();
   if (!scrollbarWidth2) {
     return null;
   }
-  return /* @__PURE__ */ React9.createElement("div", {
+  return /* @__PURE__ */ React10.createElement("div", {
     "data-name": "vertical-scrollbar-placeholder",
     style: __spreadValues({
       position: "absolute",
@@ -5088,7 +5160,7 @@ function VerticalScrollbarPlaceholderFn(props) {
     }, props.style)
   });
 }
-var VerticalScrollbarPlaceholder = React9.memo(VerticalScrollbarPlaceholderFn);
+var VerticalScrollbarPlaceholder = React10.memo(VerticalScrollbarPlaceholderFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
 var import_createRuntimeFn3 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
@@ -5103,15 +5175,15 @@ var HeaderSortIconCls = "_12zfob11 _16lm1iw1";
 var HeaderWrapperCls = "_12zfob1v _16lm1iw16 _16lm1iw1 _16lm1iwj _16lm1iw10";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
-var React16 = __toModule(require("react"));
+var React17 = __toModule(require("react"));
 var import_react26 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
-var React12 = __toModule(require("react"));
+var React13 = __toModule(require("react"));
 var import_react22 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
-var React10 = __toModule(require("react"));
+var React11 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useInfiniteTableState.ts
 var import_react19 = __toModule(require("react"));
@@ -5133,7 +5205,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,
@@ -5141,10 +5213,12 @@ function InfiniteTableCellFn(props) {
     offsetProperty = "left",
     column,
     domRef,
-    children,
     afterChildren,
     beforeChildren,
-    offset
+    offset,
+    cellType,
+    cssPosition: _cssPosition,
+    renderChildren
   } = _a, domProps = __objRest(_a, [
     "cssEllipsis",
     "virtualized",
@@ -5152,11 +5226,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({
@@ -5171,16 +5248,23 @@ 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__ */ React11.createElement(React11.Fragment, null, beforeChildren, /* @__PURE__ */ React11.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__ */ React11.createElement(RenderComponent, __spreadValues({}, finalDOMProps));
+  }
+  return /* @__PURE__ */ React11.createElement("div", __spreadProps(__spreadValues({}, finalDOMProps), {
+    ref: domRef
+  }));
 }
-var InfiniteTableCell = React10.memo(InfiniteTableCellFn);
+var InfiniteTableCell = React11.memo(InfiniteTableCellFn);
 
 // src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
 var import_binary_search2 = __toModule(require_binary_search());
@@ -5375,7 +5459,7 @@ function useCellClassName(column, baseClasses, variants, extraFlags) {
 var import_react_dom = __toModule(require("react-dom"));
 
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
-var React11 = __toModule(require("react"));
+var React12 = __toModule(require("react"));
 var import_react21 = __toModule(require("react"));
 var defaultLineStyle = {
   marginTop: 2,
@@ -5430,23 +5514,24 @@ function SortIcon(props) {
   if (direction === -1) {
     indexStyle.top = "100%";
   }
-  return /* @__PURE__ */ React11.createElement("div", {
+  return /* @__PURE__ */ React12.createElement("div", {
     style: __spreadProps(__spreadValues({}, style), { width: size }),
     className: join(className, InfiniteTableIconClassName, `${InfiniteTableIconClassName}-sort`)
-  }, showIndex ? /* @__PURE__ */ React11.createElement("div", {
+  }, showIndex ? /* @__PURE__ */ React12.createElement("div", {
     "data-name": "index",
     style: indexStyle
-  }, index) : null, /* @__PURE__ */ React11.createElement("div", {
+  }, index) : null, /* @__PURE__ */ React12.createElement("div", {
     style: __spreadValues({ width: sizes[0] }, lineStyle),
     onTransitionEnd
-  }), /* @__PURE__ */ React11.createElement("div", {
+  }), /* @__PURE__ */ React12.createElement("div", {
     style: __spreadValues({ width: sizes[1] }, lineStyle)
-  }), /* @__PURE__ */ React11.createElement("div", {
+  }), /* @__PURE__ */ React12.createElement("div", {
     style: __spreadValues({ width: sizes[2] }, lineStyle)
   }));
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
+var InfiniteTableHeaderCellContext = React13.createContext(null);
 var defaultStyle = {
   position: "absolute",
   top: 0
@@ -5465,24 +5550,33 @@ 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__ */ 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 sortTool = /* @__PURE__ */ React13.createElement(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__ */ React13.createElement(RenderHookComponent, {
+        render: header,
+        renderParam
+      });
+    }
+    header = header != null ? header : column.name;
+    return header;
+  };
+  const domRef = (0, import_react22.useRef)(null);
   const {
     computed: { computedRemainingSpace },
     componentState: { portalDOMRef }
@@ -5510,7 +5604,7 @@ function InfiniteTableHeaderCell(props) {
   let offset = offsetFromProps != null ? offsetFromProps : virtualized ? 0 : column.computedPinningOffset;
   let draggingProxy = null;
   if (dragging) {
-    draggingProxy = /* @__PURE__ */ React12.createElement("div", {
+    draggingProxy = /* @__PURE__ */ React13.createElement("div", {
       className: `${InfiniteTableHeaderCellClassName}Proxy ${HeaderCellProxy}`,
       style: {
         position: "absolute",
@@ -5523,8 +5617,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__ */ React13.createElement(ContextProvider, {
+    value: renderParam
+  }, /* @__PURE__ */ React13.createElement(InfiniteTableCell, {
     domRef: ref,
+    cellType: "header",
     column,
     "data-name": `HeaderCell`,
     "data-column-id": column.id,
@@ -5534,16 +5632,21 @@ 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_react22.useContext)(InfiniteTableHeaderCellContext);
+  return result;
 }
 
 // src/components/RawList/index.tsx
-var React15 = __toModule(require("react"));
+var React16 = __toModule(require("react"));
 var import_react25 = __toModule(require("react"));
 
 // src/components/RawList/AvoidReactDiff.tsx
-var React13 = __toModule(require("react"));
+var React14 = __toModule(require("react"));
 var import_react23 = __toModule(require("react"));
 function AvoidReactDiffFn(props) {
   const [children, setChildren] = (0, import_react23.useState)(props.updater.get());
@@ -5553,15 +5656,15 @@ function AvoidReactDiffFn(props) {
     });
     return remove;
   }, [props.updater]);
-  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, children);
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, children);
 }
-var AvoidReactDiff = React13.memo(AvoidReactDiffFn);
+var AvoidReactDiff = React14.memo(AvoidReactDiffFn);
 
 // src/components/RawList/useVirtualRenderer.ts
 var import_react24 = __toModule(require("react"));
 
 // src/components/RawList/ReactVirtualRenderer.tsx
-var React14 = __toModule(require("react"));
+var React15 = __toModule(require("react"));
 
 // src/components/RawList/MappedItems.ts
 var MappedItems = class extends Logger {
@@ -5806,7 +5909,7 @@ var ReactVirtualRenderer = class extends Logger {
     };
     this.itemDOMRefs[elementIndex] = domRef;
     this.updaters[elementIndex] = buildSubscriptionCallback();
-    const item = /* @__PURE__ */ React14.createElement(AvoidReactDiff, {
+    const item = /* @__PURE__ */ React15.createElement(AvoidReactDiff, {
       key: elementIndex,
       name: `${elementIndex}`,
       updater: this.updaters[elementIndex]
@@ -5903,11 +6006,11 @@ function RawListFn(props) {
     });
     return remove;
   }, [brain, onRenderUpdater]);
-  return /* @__PURE__ */ React15.createElement(AvoidReactDiff, {
+  return /* @__PURE__ */ React16.createElement(AvoidReactDiff, {
     updater: onRenderUpdater
   });
 }
-var RawList = React15.memo(RawListFn);
+var RawList = React16.memo(RawListFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 var debug3 = dbg("Header");
@@ -5928,7 +6031,7 @@ function InfiniteTableHeaderFn(props) {
       }
       return null;
     }
-    return /* @__PURE__ */ React16.createElement(InfiniteTableHeaderCell, {
+    return /* @__PURE__ */ React17.createElement(InfiniteTableHeaderCell, {
       domRef: domRef2,
       column,
       headerHeight,
@@ -5955,18 +6058,18 @@ function InfiniteTableHeaderFn(props) {
     className: join(TableHeaderClassName, `${TableHeaderClassName}--virtualized`, className, headerCls),
     style
   };
-  return /* @__PURE__ */ React16.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React16.createElement(RawList, {
+  return /* @__PURE__ */ React17.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React17.createElement(RawList, {
     brain,
     renderItem: renderColumn
   }));
 }
-var InfiniteTableHeader = React16.memo(InfiniteTableHeaderFn);
+var InfiniteTableHeader = React17.memo(InfiniteTableHeaderFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderUnvirtualized.tsx
-var React19 = __toModule(require("react"));
+var React20 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/renderColumnHeaderGroups.tsx
-var React18 = __toModule(require("react"));
+var React19 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/buildColumnAndGroupTree.ts
 function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap) {
@@ -6056,7 +6159,7 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
-var React17 = __toModule(require("react"));
+var React18 = __toModule(require("react"));
 var TableHeaderGroupClassName = `${rootClassName}HeaderGroup`;
 function InfiniteTableHeaderGroup(props) {
   const { columnGroup, height, headerHeight } = props;
@@ -6070,16 +6173,16 @@ function InfiniteTableHeaderGroup(props) {
     width: columnGroup.computedWidth,
     height
   };
-  return /* @__PURE__ */ React17.createElement("div", {
+  return /* @__PURE__ */ React18.createElement("div", {
     "data-group-id": columnGroup.id,
     className: join(HeaderGroupCls, TableHeaderGroupClassName, `${TableHeaderGroupClassName}--unvirtualized`),
     style
-  }, /* @__PURE__ */ React17.createElement("div", {
+  }, /* @__PURE__ */ React18.createElement("div", {
     className: join(`${TableHeaderGroupClassName}__header`, HeaderGroup_Header),
     style: { height: headerHeight }
-  }, /* @__PURE__ */ React17.createElement("div", {
+  }, /* @__PURE__ */ React18.createElement("div", {
     className: join(`${TableHeaderGroupClassName}__header-content`, cssEllipsisClassName)
-  }, header)), /* @__PURE__ */ React17.createElement("div", {
+  }, header)), /* @__PURE__ */ React18.createElement("div", {
     className: join(`${TableHeaderGroupClassName}__children`, HeaderGroup_Children)
   }, props.children));
 }
@@ -6102,7 +6205,7 @@ function renderColumnHeaderGroups(config) {
     return items2.map((colGroupItem) => {
       if (colGroupItem.type === "column") {
         const col = colGroupItem.ref;
-        return /* @__PURE__ */ React18.createElement(InfiniteTableHeaderCell, {
+        return /* @__PURE__ */ React19.createElement(InfiniteTableHeaderCell, {
           key: col.id,
           headerHeight: (columnGroupsMaxDepth - colGroupItem.depth + 2) * headerHeight,
           column: col,
@@ -6116,7 +6219,7 @@ function renderColumnHeaderGroups(config) {
         colIds.push(col.id);
         return col;
       });
-      return /* @__PURE__ */ React18.createElement(InfiniteTableHeaderGroup, {
+      return /* @__PURE__ */ React19.createElement(InfiniteTableHeaderGroup, {
         key: `${colGroupItem.uniqueGroupId.join("/")}`,
         columns: columns2,
         height: (columnGroupsMaxDepth - colGroupItem.depth + 2) * headerHeight,
@@ -6169,9 +6272,9 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
     },
     computed: { computedVisibleColumnsMap: columnsMap }
   } = useInfiniteTable();
-  const domRef = React19.useRef(null);
+  const domRef = React20.useRef(null);
   const hasColumnGroups = computedColumnGroups.size > 0;
-  const columnHeaderGroups = React19.useMemo(() => {
+  const columnHeaderGroups = React20.useMemo(() => {
     return hasColumnGroups ? renderColumnHeaderGroups({
       columnGroups: computedColumnGroups,
       columnGroupsDepthsMap,
@@ -6190,7 +6293,7 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
     columnGroupsMaxDepth
   ]);
   const children = hasColumnGroups ? columnHeaderGroups : columns.map((c) => {
-    return /* @__PURE__ */ React19.createElement(InfiniteTableHeaderCell, {
+    return /* @__PURE__ */ React20.createElement(InfiniteTableHeaderCell, {
       key: c.id,
       headerHeight,
       column: c,
@@ -6215,20 +6318,20 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
     const removeOnScroll = scroller.onScroll(onScroll);
     return removeOnScroll;
   }, [brain, scrollListener]);
-  return /* @__PURE__ */ React19.createElement("div", __spreadProps(__spreadValues({}, domProps), {
+  return /* @__PURE__ */ React20.createElement("div", __spreadProps(__spreadValues({}, domProps), {
     className: join(TableHeaderClassName2, `${TableHeaderClassName2}--unvirtualized`, pinning ? `${TableHeaderClassName2}--pinned ${TableHeaderClassName2}-${pinning}` : "", scrollable ? `${TableHeaderClassName2}--overflow` : "", domProps.className, HeaderClsRecipe({
       pinned: pinning,
       virtualized: false,
       overflow: scrollable
     })),
     style
-  }), /* @__PURE__ */ React19.createElement("div", {
+  }), /* @__PURE__ */ React20.createElement("div", {
     style: { width: totalWidth },
     className: join(flexFlow.row, display.flex),
     ref: domRef
   }, children));
 }
-var InfiniteTableHeaderUnvirtualized = React19.memo(InfiniteTableHeaderUnvirtualizedFn);
+var InfiniteTableHeaderUnvirtualized = React20.memo(InfiniteTableHeaderUnvirtualizedFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
 function TableHeaderWrapper(props) {
@@ -6261,7 +6364,7 @@ function TableHeaderWrapper(props) {
   const unvirtualizedStyle = !virtualizeHeader && computedPinnedStartColumnsWidth ? {
     left: computedPinnedStartWidth
   } : void 0;
-  const header = virtualizeHeader ? /* @__PURE__ */ React20.createElement(InfiniteTableHeader, {
+  const header = virtualizeHeader ? /* @__PURE__ */ React21.createElement(InfiniteTableHeader, {
     columns: computedUnpinnedColumns,
     repaintId: virtualizeHeader ? repaintId : void 0,
     brain,
@@ -6274,7 +6377,7 @@ function TableHeaderWrapper(props) {
     },
     availableWidth: computedUnpinnedColumnsWidth,
     totalWidth: computedUnpinnedColumnsWidth
-  }) : /* @__PURE__ */ React20.createElement(InfiniteTableHeaderUnvirtualized, {
+  }) : /* @__PURE__ */ React21.createElement(InfiniteTableHeaderUnvirtualized, {
     style: unvirtualizedStyle,
     brain,
     scrollable: true,
@@ -6283,12 +6386,12 @@ function TableHeaderWrapper(props) {
     availableWidth: computedUnpinnedColumnsWidth,
     totalWidth: computedUnpinnedColumnsWidth
   });
-  return /* @__PURE__ */ React20.createElement("div", {
+  return /* @__PURE__ */ React21.createElement("div", {
     className: HeaderWrapperCls,
     style: {
       height: virtualizeHeader ? height : void 0
     }
-  }, hasPinnedStart ? /* @__PURE__ */ React20.createElement(InfiniteTableHeaderUnvirtualized, {
+  }, hasPinnedStart ? /* @__PURE__ */ React21.createElement(InfiniteTableHeaderUnvirtualized, {
     style: {
       left: 0,
       position: "absolute",
@@ -6300,7 +6403,7 @@ function TableHeaderWrapper(props) {
     scrollable: computedPinnedStartOverflow,
     pinning: "start",
     scrollListener: computedPinnedStartOverflow ? pinnedStartScrollListener : void 0
-  }) : null, header, hasPinnedEnd ? /* @__PURE__ */ React20.createElement(InfiniteTableHeaderUnvirtualized, {
+  }) : null, header, hasPinnedEnd ? /* @__PURE__ */ React21.createElement(InfiniteTableHeaderUnvirtualized, {
     style: {
       right: scrollbars.vertical ? getScrollbarWidth() : 0,
       position: "absolute",
@@ -6312,7 +6415,7 @@ function TableHeaderWrapper(props) {
     scrollable: computedPinnedEndOverflow,
     pinning: "end",
     scrollListener: computedPinnedEndOverflow ? pinnedEndScrollListener : void 0
-  }) : null, scrollbars.vertical ? /* @__PURE__ */ React20.createElement(VerticalScrollbarPlaceholder, {
+  }) : null, scrollbars.vertical ? /* @__PURE__ */ React21.createElement(VerticalScrollbarPlaceholder, {
     style: {
       height: "100%",
       right: 0
@@ -6321,7 +6424,7 @@ function TableHeaderWrapper(props) {
 }
 
 // src/components/VirtualScrollContainer/index.tsx
-var React21 = __toModule(require("react"));
+var React22 = __toModule(require("react"));
 var import_react29 = __toModule(require("react"));
 
 // src/components/hooks/useOnScroll.ts
@@ -6365,7 +6468,7 @@ var getScrollableClassName = (scrollable) => {
 
 // src/components/VirtualScrollContainer/index.tsx
 var rootClassName6 = "InfiniteVirtualScrollContainer";
-var VirtualScrollContainer = React21.forwardRef(function VirtualScrollContainer2(props, ref) {
+var VirtualScrollContainer = React22.forwardRef(function VirtualScrollContainer2(props, ref) {
   const {
     children,
     scrollable = true,
@@ -6375,7 +6478,7 @@ var VirtualScrollContainer = React21.forwardRef(function VirtualScrollContainer2
   } = props;
   const domRef = ref != null ? ref : (0, import_react29.useRef)(null);
   useOnScroll(domRef, onContainerScroll);
-  return /* @__PURE__ */ React21.createElement("div", {
+  return /* @__PURE__ */ React22.createElement("div", {
     ref: domRef,
     style,
     className: join(className, rootClassName6, VirtualScrollContainerCls, getScrollableClassName(scrollable))
@@ -6383,7 +6486,7 @@ var VirtualScrollContainer = React21.forwardRef(function VirtualScrollContainer2
 });
 
 // src/components/VirtualList/SpacePlaceholder.tsx
-var React22 = __toModule(require("react"));
+var React23 = __toModule(require("react"));
 function SpacePlaceholderFn(props) {
   const { height, width, count } = props;
   const style = {
@@ -6393,7 +6496,7 @@ function SpacePlaceholderFn(props) {
     opacity: 0,
     pointerEvents: "none"
   };
-  return /* @__PURE__ */ React22.createElement("div", {
+  return /* @__PURE__ */ React23.createElement("div", {
     "data-count": count,
     "data-placeholder-width": true ? width : void 0,
     "data-placeholder-height": true ? height : void 0,
@@ -6401,20 +6504,20 @@ function SpacePlaceholderFn(props) {
     style
   });
 }
-var SpacePlaceholder = React22.memo(SpacePlaceholderFn);
+var SpacePlaceholder = React23.memo(SpacePlaceholderFn);
 
 // src/components/InfiniteTable/hooks/useListRendering.tsx
-var import_react40 = __toModule(require("react"));
+var import_react41 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useUnpinnedRendering.tsx
-var React28 = __toModule(require("react"));
-var import_react33 = __toModule(require("react"));
+var React29 = __toModule(require("react"));
+var import_react34 = __toModule(require("react"));
 
 // src/components/VirtualList/VirtualRowList.tsx
-var React24 = __toModule(require("react"));
+var React25 = __toModule(require("react"));
 
 // src/components/VirtualList/VirtualList.tsx
-var React23 = __toModule(require("react"));
+var React24 = __toModule(require("react"));
 var import_react30 = __toModule(require("react"));
 
 // src/components/VirtualList/VirtualList.css.ts
@@ -6496,19 +6599,19 @@ var VirtualList = (props) => {
   if (true) {
     domProps["data-cmp-name"] = `VirtualList`;
   }
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React23.createElement(VirtualScrollContainer, {
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React24.createElement(VirtualScrollContainer, {
     scrollable,
     onContainerScroll
-  }, /* @__PURE__ */ React23.createElement("div", {
+  }, /* @__PURE__ */ React24.createElement("div", {
     ref: domRef,
     className: scrollTransformTargetCls,
     "data-name": "scroll-transform-target"
-  }, /* @__PURE__ */ React23.createElement(RawList, {
+  }, /* @__PURE__ */ React24.createElement(RawList, {
     brain: virtualBrain,
     renderItem,
     repaintId,
     debugChannel: "VirtualList-" + mainAxis
-  })), children, /* @__PURE__ */ React23.createElement(SpacePlaceholder, {
+  })), children, /* @__PURE__ */ React24.createElement(SpacePlaceholder, {
     count,
     width,
     height
@@ -6518,14 +6621,14 @@ var VirtualList = (props) => {
 // src/components/VirtualList/VirtualRowList.tsx
 var VirtualRowList = (props) => {
   const _a = props, { rowWidth, rowHeight, renderRow } = _a, listProps = __objRest(_a, ["rowWidth", "rowHeight", "renderRow"]);
-  const renderItem = React24.useCallback((renderProps) => {
+  const renderItem = React25.useCallback((renderProps) => {
     return renderRow({
       domRef: renderProps.domRef,
       rowHeight: renderProps.itemSize,
       rowIndex: renderProps.itemIndex
     });
   }, [renderRow]);
-  return /* @__PURE__ */ React24.createElement(VirtualList, __spreadProps(__spreadValues({}, listProps), {
+  return /* @__PURE__ */ React25.createElement(VirtualList, __spreadProps(__spreadValues({}, listProps), {
     renderItem,
     mainAxis: "vertical",
     itemMainAxisSize: rowHeight,
@@ -6534,12 +6637,14 @@ var VirtualRowList = (props) => {
 };
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRow.tsx
-var React26 = __toModule(require("react"));
-var import_react32 = __toModule(require("react"));
+var React27 = __toModule(require("react"));
+var import_react33 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
-var React25 = __toModule(require("react"));
+var React26 = __toModule(require("react"));
+var import_react31 = __toModule(require("react"));
 var { rootClassName: rootClassName8 } = internalProps;
+var InfiniteTableColumnCellContext = React26.createContext(null);
 var InfiniteTableColumnCellClassName = `${rootClassName8}ColumnCell`;
 function isColumnWithField(c) {
   return typeof c.field === "string";
@@ -6586,24 +6691,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__ */ React26.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), {
@@ -6631,21 +6743,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__ */ React26.createElement(ContextProvider, {
+    value: renderParam
+  }, /* @__PURE__ */ React26.createElement(InfiniteTableCell, __spreadValues({}, cellProps)));
+}
+var InfiniteTableColumnCell = React26.memo(InfiniteTableColumnCellFn);
+function useInfiniteColumnCell() {
+  const result = (0, import_react31.useContext)(InfiniteTableColumnCellContext);
+  return result;
 }
-var InfiniteTableColumnCell = React25.memo(InfiniteTableColumnCellFn);
 
 // src/components/InfiniteTable/components/InfiniteTableRow/useRowDOMProps.ts
-var import_react31 = __toModule(require("react"));
+var import_react32 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRowClassName.ts
 var { rootClassName: rootClassName9 } = internalProps;
@@ -6671,8 +6793,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_react32.useRef)(null);
+  const rowDOMRef = (0, import_react32.useCallback)((node) => {
     domRefFromProps(node);
     domRef.current = node;
   }, []);
@@ -6703,7 +6825,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_react32.useCallback)((event) => {
     var _a;
     initialMouseEnter == null ? void 0 : initialMouseEnter(event);
     const rowIndex2 = ((_a = event.currentTarget) == null ? void 0 : _a.dataset.rowIndex) * 1;
@@ -6717,7 +6839,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_react32.useCallback)((event) => {
     var _a;
     initialMouseLeave == null ? void 0 : initialMouseLeave(event);
     const rowIndex2 = (_a = event.currentTarget) == null ? void 0 : _a.dataset.rowIndex;
@@ -6773,13 +6895,13 @@ function InfiniteTableRowFn(props) {
     width: rowWidth,
     height: rowHeight
   }, domProps.style);
-  const renderCellRef = (0, import_react32.useRef)(null);
-  const renderCell = React26.useCallback(({ domRef, itemIndex }) => {
+  const renderCellRef = (0, import_react33.useRef)(null);
+  const renderCell = React27.useCallback(({ domRef, itemIndex }) => {
     const column = columns[itemIndex];
     if (!column) {
     }
     const hidden = false;
-    return /* @__PURE__ */ React26.createElement(InfiniteTableColumnCell, {
+    return /* @__PURE__ */ React27.createElement(InfiniteTableColumnCell, {
       getData,
       rowInfo,
       groupRenderStrategy,
@@ -6806,18 +6928,18 @@ function InfiniteTableRowFn(props) {
   if (true) {
     domProps["data-cmp-name"] = "ITableRow";
   }
-  return /* @__PURE__ */ React26.createElement("div", __spreadProps(__spreadValues({}, domProps), {
+  return /* @__PURE__ */ React27.createElement("div", __spreadProps(__spreadValues({}, domProps), {
     style
-  }), /* @__PURE__ */ React26.createElement(RawList, {
+  }), /* @__PURE__ */ React27.createElement(RawList, {
     brain,
     renderItem: renderCell,
     debugChannel: `${rowIndex}`
   }));
 }
-var InfiniteTableRow = React26.memo(InfiniteTableRowFn);
+var InfiniteTableRow = React27.memo(InfiniteTableRowFn);
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRowUnvirtualized.tsx
-var React27 = __toModule(require("react"));
+var React28 = __toModule(require("react"));
 function TableRowUnvirtualizedFn(props) {
   const {
     rowHeight,
@@ -6838,7 +6960,7 @@ function TableRowUnvirtualizedFn(props) {
   }, domProps.style);
   const children = columns.map((col) => {
     const hidden = false;
-    return /* @__PURE__ */ React27.createElement(InfiniteTableColumnCell, {
+    return /* @__PURE__ */ React28.createElement(InfiniteTableColumnCell, {
       key: col.id,
       virtualized: false,
       rowHeight,
@@ -6851,11 +6973,11 @@ function TableRowUnvirtualizedFn(props) {
       column: col
     });
   });
-  return /* @__PURE__ */ React27.createElement("div", __spreadProps(__spreadValues({}, domProps), {
+  return /* @__PURE__ */ React28.createElement("div", __spreadProps(__spreadValues({}, domProps), {
     style
   }), children);
 }
-var TableRowUnvirtualized = React27.memo(TableRowUnvirtualizedFn);
+var TableRowUnvirtualized = React28.memo(TableRowUnvirtualizedFn);
 
 // src/components/InfiniteTable/hooks/useUnpinnedRendering.tsx
 function useUnpinnedRendering(params) {
@@ -6878,7 +7000,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_react34.useCallback)((rowParams) => {
     const dataArray = getData();
     const rowInfo = dataArray[rowParams.rowIndex];
     const { showZebraRows, showHoverRows } = getState();
@@ -6900,7 +7022,7 @@ function useUnpinnedRendering(params) {
       rowProps.repaintId = repaintId;
     }
     const TableRowComponent = shouldVirtualizeColumns ? InfiniteTableRow : TableRowUnvirtualized;
-    return /* @__PURE__ */ React28.createElement(TableRowComponent, __spreadValues({}, rowProps));
+    return /* @__PURE__ */ React29.createElement(TableRowComponent, __spreadValues({}, rowProps));
   }, [
     repaintId,
     rowHeight,
@@ -6911,7 +7033,7 @@ function useUnpinnedRendering(params) {
     horizontalVirtualBrain,
     verticalVirtualBrain
   ]);
-  const fakeScrollbar = getScrollbarWidth() ? /* @__PURE__ */ React28.createElement("div", {
+  const fakeScrollbar = getScrollbarWidth() ? /* @__PURE__ */ React29.createElement("div", {
     "data-name": "horizontal-scrollbar-placeholder--fake",
     style: {
       position: "absolute",
@@ -6922,10 +7044,10 @@ function useUnpinnedRendering(params) {
       overflow: "auto",
       visibility: columnShifts ? "visible" : "hidden"
     }
-  }, /* @__PURE__ */ React28.createElement("div", {
+  }, /* @__PURE__ */ React29.createElement("div", {
     style: { height: "100%", width: computedUnpinnedColumnsWidth }
   })) : null;
-  return rowHeight != 0 ? /* @__PURE__ */ React28.createElement(VirtualRowList, {
+  return rowHeight != 0 ? /* @__PURE__ */ React29.createElement(VirtualRowList, {
     repaintId: `${repaintId}-unpinned-`,
     brain: verticalVirtualBrain,
     onContainerScroll: applyScrollHorizontal,
@@ -6946,7 +7068,7 @@ function useUnpinnedRendering(params) {
 }
 
 // src/components/InfiniteTable/hooks/useOnContainerScroll.ts
-var import_react34 = __toModule(require("react"));
+var import_react35 = __toModule(require("react"));
 
 // src/components/InfiniteTable/InfiniteCls.css.ts
 var import_createRuntimeFn5 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
@@ -6984,18 +7106,18 @@ var useOnContainerScroll = ({
     getState: getDataSourceState,
     componentState: { notifyScrollStop }
   } = useDataSourceContextValue();
-  const onScrollStop = (0, import_react34.useCallback)((param) => {
+  const onScrollStop = (0, import_react35.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_react35.useRef)(0);
+  const scrollingRef = (0, import_react35.useRef)(false);
+  const scrollTopMaxRef = (0, import_react35.useRef)(0);
+  (0, import_react35.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_react35.useCallback)((scrolling) => {
     var _a;
     const prevScrolling = scrollingRef.current;
     scrollingRef.current = scrolling;
@@ -7028,7 +7150,7 @@ var useOnContainerScroll = ({
       }
     }
   }, [scrollStopDelay, onScrollStop]);
-  const onContainerScroll = (0, import_react34.useCallback)((scrollInfo) => {
+  const onContainerScroll = (0, import_react35.useCallback)((scrollInfo) => {
     verticalVirtualBrain.setScrollPosition(scrollInfo);
     horizontalVirtualBrain.setScrollPosition(scrollInfo);
     setScrolling(true);
@@ -7038,15 +7160,15 @@ var useOnContainerScroll = ({
     domRef.current,
     setScrolling
   ]);
-  const scrollPositionRef = (0, import_react34.useRef)({
+  const scrollPositionRef = (0, import_react35.useRef)({
     scrollLeft: 0,
     scrollTop: 0
   });
-  const applyScrollHorizontal = (0, import_react34.useCallback)(({ scrollLeft }) => {
+  const applyScrollHorizontal = (0, import_react35.useCallback)(({ scrollLeft }) => {
     scrollPositionRef.current.scrollLeft = scrollLeft;
     onContainerScroll(scrollPositionRef.current);
   }, [onContainerScroll]);
-  const applyScrollVertical = (0, import_react34.useCallback)(({ scrollTop }) => {
+  const applyScrollVertical = (0, import_react35.useCallback)(({ scrollTop }) => {
     scrollPositionRef.current.scrollTop = scrollTop;
     onContainerScroll(scrollPositionRef.current);
     if (scrollTop === 0) {
@@ -7068,17 +7190,17 @@ var useOnContainerScroll = ({
 };
 
 // src/components/InfiniteTable/hooks/usePinnedRendering.tsx
-var React30 = __toModule(require("react"));
-var import_react37 = __toModule(require("react"));
+var React31 = __toModule(require("react"));
+var import_react38 = __toModule(require("react"));
 
 // src/components/VirtualList/RowListWithExternalScrolling.tsx
-var React29 = __toModule(require("react"));
-var import_react36 = __toModule(require("react"));
+var React30 = __toModule(require("react"));
+var import_react37 = __toModule(require("react"));
 
 // src/components/hooks/useOnMount.ts
-var import_react35 = __toModule(require("react"));
+var import_react36 = __toModule(require("react"));
 function useOnMount(domRef, props) {
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     const { onMount, onUnmount } = props;
     const node = domRef == null ? void 0 : domRef.current;
     onMount == null ? void 0 : onMount(node);
@@ -7109,8 +7231,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_react37.useRef)(null);
+  const renderItem = (0, import_react37.useCallback)((renderProps) => renderRow({
     domRef: renderProps.domRef,
     rowHeight: renderProps.itemSize,
     rowIndex: renderProps.itemIndex
@@ -7119,7 +7241,7 @@ var RowListWithExternalScrolling = (props) => {
     onMount,
     onUnmount
   });
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     const onScroll = (scrollPosition) => {
       const node = domRef.current;
       if (node) {
@@ -7148,7 +7270,7 @@ var RowListWithExternalScrolling = (props) => {
   if (true) {
     domProps["data-cmp-name"] = "RowListWithExternalScrolling";
   }
-  return /* @__PURE__ */ React29.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React29.createElement(RawList, {
+  return /* @__PURE__ */ React30.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React30.createElement(RawList, {
     brain,
     renderItem,
     repaintId
@@ -7171,7 +7293,7 @@ function PinnedRowsContainer(props) {
     brain,
     renderRow
   } = props;
-  const style = React30.useMemo(() => {
+  const style = React31.useMemo(() => {
     const result = pinning === "end" ? {
       width: rowWidth,
       height,
@@ -7186,7 +7308,7 @@ function PinnedRowsContainer(props) {
     }
     return result;
   }, [height, rowWidth, pinning, hasOverflow]);
-  const updateScroll = (0, import_react37.useCallback)((node, scrollPosition) => {
+  const updateScroll = (0, import_react38.useCallback)((node, scrollPosition) => {
     UPDATE_SCROLL3(node, scrollPosition, hasOverflow ? pinnedScrollListener.getScrollPosition() : void 0);
   }, [hasOverflow, pinnedScrollListener]);
   const rowListProps = {
@@ -7197,7 +7319,7 @@ function PinnedRowsContainer(props) {
     className: join(`${PinnedRowsContainerClassName}`, PinnedRowsClsVariants[pinning === "start" ? "pinnedStart" : "pinnedEnd"], `${PinnedRowsContainerClassName}--pinned-${pinning}`, `${PinnedRowsContainerClassName}--overflow`, PinnedRowsClsVariants.overflow)
   };
   if (hasOverflow) {
-    return /* @__PURE__ */ React30.createElement(VirtualScrollContainer, {
+    return /* @__PURE__ */ React31.createElement(VirtualScrollContainer, {
       scrollable: {
         horizontal: true,
         vertical: false
@@ -7213,23 +7335,23 @@ function PinnedRowsContainer(props) {
       className: join(PinnedRowsContainerClsVariants({
         pinned: pinning
       }), `${PinnedRowsContainerClassName}Container`, `${PinnedRowsContainerClassName}Container--pinned-${pinning}`)
-    }, /* @__PURE__ */ React30.createElement(RowListWithExternalScrolling, __spreadProps(__spreadValues({}, rowListProps), {
+    }, /* @__PURE__ */ React31.createElement(RowListWithExternalScrolling, __spreadProps(__spreadValues({}, rowListProps), {
       onMount: (node) => {
         pinnedScrollListener == null ? void 0 : pinnedScrollListener.onScroll((scrollPosition) => {
           updateScroll(node, brain.getScrollPosition(), scrollPosition);
         });
       }
-    })), /* @__PURE__ */ React30.createElement(SpacePlaceholder, {
+    })), /* @__PURE__ */ React31.createElement(SpacePlaceholder, {
       width: rowWidth,
       height: 1
     }));
   }
-  return /* @__PURE__ */ React30.createElement(RowListWithExternalScrolling, __spreadValues({}, rowListProps));
+  return /* @__PURE__ */ React31.createElement(RowListWithExternalScrolling, __spreadValues({}, rowListProps));
 }
 function useRenderPinnedRow(params) {
   const { getData, getState, columnsWidth, columns, rowSpan, verticalBrain } = params;
-  const renderPinnedRow = (0, import_react37.useCallback)((rowParams) => {
-    const dataArray = getData();
+  const dataArray = getData();
+  const renderPinnedRow = (0, import_react38.useCallback)((rowParams) => {
     const rowInfo = dataArray[rowParams.rowIndex];
     const { showZebraRows, showHoverRows } = getState();
     const rowProps = __spreadValues({
@@ -7245,8 +7367,8 @@ function useRenderPinnedRow(params) {
       rowWidth: columnsWidth,
       columns
     }, rowParams);
-    return /* @__PURE__ */ React30.createElement(TableRowUnvirtualized, __spreadValues({}, rowProps));
-  }, [columnsWidth, columns, verticalBrain]);
+    return /* @__PURE__ */ React31.createElement(TableRowUnvirtualized, __spreadValues({}, rowProps));
+  }, [columnsWidth, columns, verticalBrain, dataArray]);
   return renderPinnedRow;
 }
 function usePinnedRenderingForSide(side, params) {
@@ -7284,13 +7406,14 @@ function usePinnedRenderingForSide(side, params) {
   const renderRowPinned = useRenderPinnedRow({
     getData,
     getState,
+    repaintId,
     toggleGroupRow,
     rowSpan,
     verticalBrain: verticalVirtualBrain,
     columns,
     columnsWidth
   });
-  const pinnedList = columns.length && rowHeight !== 0 ? /* @__PURE__ */ React30.createElement(PinnedRowsContainer, {
+  const pinnedList = columns.length && rowHeight !== 0 ? /* @__PURE__ */ React31.createElement(PinnedRowsContainer, {
     pinning: side,
     pinnedScrollListener,
     hasOverflow,
@@ -7303,7 +7426,7 @@ function usePinnedRenderingForSide(side, params) {
     brain: verticalVirtualBrain,
     renderRow: renderRowPinned
   }) : null;
-  const pinnedScrollbarPlaceholder = pinnedList && hasHorizontalScrollbar && !hasOverflow ? /* @__PURE__ */ React30.createElement(HorizontalScrollbarPlaceholder, {
+  const pinnedScrollbarPlaceholder = pinnedList && hasHorizontalScrollbar && !hasOverflow ? /* @__PURE__ */ React31.createElement(HorizontalScrollbarPlaceholder, {
     style: side === "end" ? {
       width: columnsWidth,
       right: hasVerticalScrollbar ? getScrollbarWidth() : 0
@@ -7345,13 +7468,13 @@ function usePinnedStartRendering(params) {
 }
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
-var import_react39 = __toModule(require("react"));
+var import_react40 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useColumnSizeFn.ts
-var import_react38 = __toModule(require("react"));
+var import_react39 = __toModule(require("react"));
 var debug5 = dbg("useColumnSizeFn");
 function useColumnSizeFn(computedUnpinnedColumns) {
-  const columnSize = (0, import_react38.useCallback)((index) => {
+  const columnSize = (0, import_react39.useCallback)((index) => {
     const column = computedUnpinnedColumns[index];
     if (!column) {
       debug5("cannot find column at index", index, computedUnpinnedColumns);
@@ -7381,13 +7504,13 @@ function useYourBrain(param) {
     globalThis.verticalVirtualBrain = verticalVirtualBrain;
     globalThis.horizontalVirtualBrain = horizontalVirtualBrain;
   }
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     verticalVirtualBrain.setAvailableSize({
       height: bodySize.height,
       width: 0
     });
   }, [bodySize, verticalVirtualBrain]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     horizontalVirtualBrain.setAvailableSize({
       height: 0,
       width: Math.max(bodySize.width - computedPinnedStartWidth - computedPinnedEndWidth, 0)
@@ -7428,8 +7551,8 @@ function useListRendering(param) {
     horizontalVirtualBrain
   } = componentState;
   const prevDataSourceTimestamp = usePrevious(dataSourceState.updatedAt);
-  const repaintIdRef = (0, import_react40.useRef)(0);
-  if (!shallowEqualObjects(prevComputed, computed) || prevDataSourceTimestamp !== dataSourceState.updatedAt) {
+  const repaintIdRef = (0, import_react41.useRef)(0);
+  if (prevDataSourceTimestamp !== dataSourceState.updatedAt || !shallowEqualObjects(prevComputed, computed)) {
     repaintIdRef.current++;
   }
   const repaintId = repaintIdRef.current;
@@ -7447,11 +7570,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_react41.useMemo)(() => ({
     vertical: hasVerticalScrollbar,
     horizontal: hasHorizontalScrollbar
   }), [hasVerticalScrollbar, hasHorizontalScrollbar]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!bodySize.height) {
       return;
     }
@@ -7507,7 +7630,7 @@ function useListRendering(param) {
     computedUnpinnedColumns
   });
   const [, rerender] = useRerender();
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     rerender();
   }, [dataSourceState]);
   const { pinnedStartList, pinnedStartScrollbarPlaceholder } = usePinnedStartRendering(pinnedRenderingParams);
@@ -7530,8 +7653,8 @@ function useListRendering(param) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
-var React31 = __toModule(require("react"));
-var import_react41 = __toModule(require("react"));
+var React32 = __toModule(require("react"));
+var import_react42 = __toModule(require("react"));
 
 // src/components/utils/decamelize.ts
 function decamelize(str, options) {
@@ -7566,10 +7689,10 @@ var enforceStyle = (node, style) => {
     node.style.setProperty(decamelize(propertyName), propertyValue, "important");
   }
 };
-var InfiniteTableLicenseFooter = React31.forwardRef(function InfiniteTableLicenseFooter2(props, ref) {
+var InfiniteTableLicenseFooter = React32.forwardRef(function InfiniteTableLicenseFooter2(props, ref) {
   const { rootClassName: rootClassName12 } = useInternalProps();
-  const domRef = React31.useRef(null);
-  const domCallback = React31.useCallback((node) => {
+  const domRef = React32.useRef(null);
+  const domCallback = React32.useCallback((node) => {
     domRef.current = node;
     if (!ref) {
       return;
@@ -7580,7 +7703,7 @@ var InfiniteTableLicenseFooter = React31.forwardRef(function InfiniteTableLicens
       ref.current = node;
     }
   }, []);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     const forceStyle = () => {
       requestAnimationFrame(() => {
         var _a;
@@ -7594,12 +7717,12 @@ var InfiniteTableLicenseFooter = React31.forwardRef(function InfiniteTableLicens
       clearInterval(intervalId);
     };
   }, []);
-  return /* @__PURE__ */ React31.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React32.createElement("div", __spreadProps(__spreadValues({
     ref: domCallback
   }, props), {
     className: join(`${rootClassName12}-Footer`, FooterCls, props.className),
     style: defaultStyle2
-  }), "Powered by", " ", /* @__PURE__ */ React31.createElement("a", {
+  }), "Powered by", " ", /* @__PURE__ */ React32.createElement("a", {
     href: "https://infinite-table.com",
     rel: "noopener noreferrer",
     role: "link",
@@ -7608,7 +7731,7 @@ var InfiniteTableLicenseFooter = React31.forwardRef(function InfiniteTableLicens
 });
 
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
-var import_react42 = __toModule(require("react"));
+var import_react43 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useLicense/crc32.ts
 var DEFAULT_ReversedPolynomial = 3988292384;
@@ -7766,10 +7889,10 @@ var isInsideSandbox = () => {
 };
 var isInsidePlayground = isInsideSandbox() || isInsideSandpack();
 var useLicense = (licenseKey = "") => {
-  const valid = (0, import_react42.useMemo)(() => {
+  const valid = (0, import_react43.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.2.12"
+      version: "0.2.15"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -7780,8 +7903,8 @@ var useLicense = (licenseKey = "") => {
 };
 
 // src/components/CSSVariableWatch.tsx
-var React32 = __toModule(require("react"));
-var import_react43 = __toModule(require("react"));
+var React33 = __toModule(require("react"));
+var import_react44 = __toModule(require("react"));
 var error = err("CSSVariableWatch");
 var debug6 = dbg("CSSVariableWatch");
 var WRAPPER_STYLE = {
@@ -7794,15 +7917,15 @@ var WRAPPER_STYLE = {
   overflow: "hidden"
 };
 var useCSSVariableWatch = (params) => {
-  const lastValueRef = (0, import_react43.useRef)(0);
-  const onResize = React32.useCallback(({ height }) => {
+  const lastValueRef = (0, import_react44.useRef)(0);
+  const onResize = React33.useCallback(({ height }) => {
     if (height && height !== lastValueRef.current) {
       lastValueRef.current = height;
       params.onChange(height);
     }
   }, [params.onChange]);
   useResizeObserver(params.ref, onResize, { earlyAttach: true });
-  React32.useLayoutEffect(() => {
+  React33.useLayoutEffect(() => {
     const value = params.ref.current.getBoundingClientRect().height;
     if (value) {
       lastValueRef.current = value;
@@ -7814,15 +7937,15 @@ var useCSSVariableWatch = (params) => {
   }, []);
 };
 var CSSVariableWatch = (props) => {
-  const domRef = (0, import_react43.useRef)(null);
+  const domRef = (0, import_react44.useRef)(null);
   useCSSVariableWatch(__spreadProps(__spreadValues({}, props), {
     ref: domRef
   }));
-  return /* @__PURE__ */ React32.createElement("div", {
+  return /* @__PURE__ */ React33.createElement("div", {
     "data-name": "css-variable-watcher",
     "data-var": props.varName,
     style: WRAPPER_STYLE
-  }, /* @__PURE__ */ React32.createElement("div", {
+  }, /* @__PURE__ */ React33.createElement("div", {
     ref: domRef,
     style: {
       height: props.varName.startsWith("var(") ? props.varName : `var(${props.varName})`
@@ -7915,7 +8038,7 @@ function useDOMProps(initialDOMProps) {
 }
 
 // src/components/InfiniteTable/components/LoadMask.tsx
-var React33 = __toModule(require("react"));
+var React34 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/LoadMask.css.ts
 var LoadMaskCls = { visible: "qy58ya1 qy58ya0 _16lm1iw2 _16lm1iwr _16lm1iwt _16lm1iwx _16lm1iwv", hidden: "qy58ya2 qy58ya0 _16lm1iw2 _16lm1iwr _16lm1iwt _16lm1iwx _16lm1iwv" };
@@ -7927,18 +8050,18 @@ var { rootClassName: rootClassName11 } = internalProps;
 var baseCls = `${rootClassName11}-LoadMask`;
 function LoadMaskFn(props) {
   const { visible, children = "Loading" } = props;
-  return /* @__PURE__ */ React33.createElement("div", {
+  return /* @__PURE__ */ React34.createElement("div", {
     className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls}`
-  }, /* @__PURE__ */ React33.createElement("div", {
+  }, /* @__PURE__ */ React34.createElement("div", {
     className: `${LoadMaskOverlayCls} ${baseCls}-Overlay`
-  }), /* @__PURE__ */ React33.createElement("div", {
+  }), /* @__PURE__ */ React34.createElement("div", {
     className: `${LoadMaskTextCls} ${baseCls}-Text`
   }, children));
 }
-var LoadMask = React33.memo(LoadMaskFn);
+var LoadMask = React34.memo(LoadMaskFn);
 
 // src/components/InfiniteTable/hooks/useAutoSizeColumns.ts
-var import_react44 = __toModule(require("react"));
+var import_react45 = __toModule(require("react"));
 var OFFSET = 10;
 function getColumnContentMaxWidths(domRef, options) {
   var _a;
@@ -8003,11 +8126,11 @@ function useAutoSizeColumns() {
       horizontalVirtualBrain
     }
   } = useComponentState();
-  const [refreshId, setRefreshId] = (0, import_react44.useState)(0);
+  const [refreshId, setRefreshId] = (0, import_react45.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_react45.useRef)(null);
+  (0, import_react45.useEffect)(() => {
     const key = getTheKey();
     if (key == null) {
       return;
@@ -8025,7 +8148,7 @@ function useAutoSizeColumns() {
       removeHorizontal();
     };
   }, [verticalVirtualBrain, horizontalVirtualBrain]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     var _a;
     if (theKey == null) {
       return;
@@ -8086,7 +8209,7 @@ var InfiniteTableRoot = getComponentStateRoot({
   getParentState: () => useDataSource(),
   debugName: "InfiniteTable"
 });
-var InfiniteTableComponent = React34.memo(function InfiniteTableComponent2() {
+var InfiniteTableComponent = React35.memo(function InfiniteTableComponent2() {
   var _a;
   const {
     componentState,
@@ -8133,7 +8256,7 @@ var InfiniteTableComponent = React34.memo(function InfiniteTableComponent2() {
     bodySize,
     computed
   });
-  React34.useEffect(() => {
+  React35.useEffect(() => {
     const dataSourceState = getDataSourceState();
     const onChange = debounce((renderRange) => {
       dataSourceState.notifyRenderRangeChange(renderRange);
@@ -8143,7 +8266,7 @@ var InfiniteTableComponent = React34.memo(function InfiniteTableComponent2() {
   const licenseValid = useLicense(licenseKey);
   const domProps = useDOMProps(componentState.domProps);
   const LoadMaskCmp = (_a = components == null ? void 0 : components.LoadMask) != null ? _a : LoadMask;
-  React34.useLayoutEffect(() => {
+  React35.useLayoutEffect(() => {
     const dataSourceState = getDataSourceState();
     const { onScrollbarsChange } = getInfiniteTableState();
     const { notifyScrollbarsChange } = dataSourceState;
@@ -8152,35 +8275,35 @@ var InfiniteTableComponent = React34.memo(function InfiniteTableComponent2() {
     }
     notifyScrollbarsChange(scrollbars);
   }, [scrollbars]);
-  React34.useEffect(() => {
+  React35.useEffect(() => {
     dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
   }, [scrollStopDelay]);
   useAutoSizeColumns();
-  return /* @__PURE__ */ React34.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React35.createElement("div", __spreadValues({
     ref: domRef
-  }, domProps), header ? /* @__PURE__ */ React34.createElement(TableHeaderWrapper, {
+  }, domProps), header ? /* @__PURE__ */ React35.createElement(TableHeaderWrapper, {
     brain: horizontalVirtualBrain,
     repaintId,
     scrollbars
-  }) : null, /* @__PURE__ */ React34.createElement(InfiniteTableBody, null, /* @__PURE__ */ React34.createElement(VirtualScrollContainer, {
+  }) : null, /* @__PURE__ */ React35.createElement(InfiniteTableBody, null, /* @__PURE__ */ React35.createElement(VirtualScrollContainer, {
     ref: scrollerDOMRef,
     onContainerScroll: applyScrollVertical,
     scrollable: ONLY_VERTICAL_SCROLLBAR
-  }, /* @__PURE__ */ React34.createElement("div", {
+  }, /* @__PURE__ */ React35.createElement("div", {
     className: display.flex
-  }, pinnedStartList, centerList, pinnedEndList), /* @__PURE__ */ React34.createElement(SpacePlaceholder, {
+  }, pinnedStartList, centerList, pinnedEndList), /* @__PURE__ */ React35.createElement(SpacePlaceholder, {
     count: dataArray.length,
     width: 0,
     height: reservedContentHeight
-  })), pinnedStartScrollbarPlaceholder, pinnedEndScrollbarPlaceholder, /* @__PURE__ */ React34.createElement(LoadMaskCmp, {
+  })), pinnedStartScrollbarPlaceholder, pinnedEndScrollbarPlaceholder, /* @__PURE__ */ React35.createElement(LoadMaskCmp, {
     visible: loading
-  }, loadingText)), licenseValid ? null : /* @__PURE__ */ React34.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React34.createElement("div", {
+  }, loadingText)), licenseValid ? null : /* @__PURE__ */ React35.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React35.createElement("div", {
     ref: portalDOMRef,
     className: join(`${rootClassName}Portal`, zIndex[1e3], position.absolute, top[0], left[0])
-  }), rowHeightCSSVar ? /* @__PURE__ */ React34.createElement(CSSVariableWatch, {
+  }), rowHeightCSSVar ? /* @__PURE__ */ React35.createElement(CSSVariableWatch, {
     varName: rowHeightCSSVar,
     onChange: onRowHeightCSSVarChange
-  }) : null, headerHeightCSSVar ? /* @__PURE__ */ React34.createElement(CSSVariableWatch, {
+  }) : null, headerHeightCSSVar ? /* @__PURE__ */ React35.createElement(CSSVariableWatch, {
     varName: headerHeightCSSVar,
     onChange: onHeaderHeightCSSVarChange
   }) : null);
@@ -8216,25 +8339,25 @@ function InfiniteTableContextProvider() {
     }
     componentActions.bodySize = bodySize;
   }, { earlyAttach: true });
-  React34.useEffect(() => {
+  React35.useEffect(() => {
     return () => {
       componentState.onRowHeightCSSVarChange.destroy();
       componentState.onHeaderHeightCSSVarChange.destroy();
     };
   }, []);
-  React34.useEffect(() => {
+  React35.useEffect(() => {
     if (scrollerDOMRef.current) {
       scrollerDOMRef.current.scrollTop = 0;
     }
   }, [scrollTopKey, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
-  return /* @__PURE__ */ React34.createElement(TableContext2.Provider, {
+  return /* @__PURE__ */ React35.createElement(TableContext2.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ React34.createElement(InfiniteTableComponent, null));
+  }, /* @__PURE__ */ React35.createElement(InfiniteTableComponent, null));
 }
 function InfiniteTable(props) {
-  const table = /* @__PURE__ */ React34.createElement(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ React34.createElement(InfiniteTableContextProvider, null));
-  return /* @__PURE__ */ React34.createElement(React34.StrictMode, null, table);
+  const table = /* @__PURE__ */ React35.createElement(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ React35.createElement(InfiniteTableContextProvider, null));
+  return /* @__PURE__ */ React35.createElement(React35.StrictMode, null, table);
 }
 InfiniteTable.defaultProps = {
   rowHeight: 40,