npm - @infinite-table/infinite-react - Versions diffs - 0.2.13 → 0.2.16 - Mend

@infinite-table/infinite-react 0.2.13 → 0.2.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/index.js CHANGED Viewed

@@ -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,
@@ -1892,7 +1894,8 @@ var getComputedVisibleColumns = ({
       valueGetter: colType.valueGetter,
       renderValue: colType.renderValue,
       render: colType.render,
-      style: colType.style
+      style: colType.style,
+      components: colType.components
     }, c), {
       cssEllipsis,
       headerCssEllipsis,
@@ -2539,7 +2542,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 +2613,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 +2629,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 +2658,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 +2719,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 +2727,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 +2748,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 +2849,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 +2861,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 +2881,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 +2906,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 +2932,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 +2967,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 +3024,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 +3048,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 +3064,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 +3155,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 +3179,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 +3201,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 +3217,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 +3235,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 +3280,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 +3306,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 +3553,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 +3584,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;
@@ -3692,7 +3743,8 @@ function useLoadData() {
     const componentState2 = getComponentState();
     if (initialRef.current) {
       initialRef.current = false;
-      actions.dataParams = buildDataSourceDataParams(componentState2);
+      const dataParams = buildDataSourceDataParams(componentState2);
+      actions.dataParams = dataParams;
     }
   }, depsObject);
 }
@@ -3705,7 +3757,6 @@ function useLazyLoadRange() {
   const loadingCache = (0, import_react15.useMemo)(() => {
     return new Map();
   }, [componentState.data]);
-  globalThis.loadingCache = loadingCache;
   const {
     lazyLoadBatchSize,
     notifyRenderRangeChange,
@@ -4147,7 +4198,7 @@ function getInterceptActions() {
     },
     cursorId: (cursorId, { actions, state }) => {
       const dataParams = buildDataSourceDataParams(state, {
-        cursorId
+        __cursorId: cursorId
       });
       actions.dataParams = dataParams;
     },
@@ -4317,7 +4368,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`,
@@ -4490,7 +4541,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,
@@ -4513,14 +4564,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
   }));
 }
@@ -4849,7 +4900,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,
@@ -5057,7 +5108,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 = () => {
@@ -5065,9 +5116,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)
@@ -5075,16 +5126,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",
@@ -5094,13 +5145,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",
@@ -5110,7 +5161,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());
@@ -5125,15 +5176,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"));
@@ -5155,7 +5206,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,
@@ -5163,10 +5214,12 @@ function InfiniteTableCellFn(props) {
     offsetProperty = "left",
     column,
     domRef,
-    children,
     afterChildren,
     beforeChildren,
-    offset
+    offset,
+    cellType,
+    cssPosition: _cssPosition,
+    renderChildren
   } = _a, domProps = __objRest(_a, [
     "cssEllipsis",
     "virtualized",
@@ -5174,11 +5227,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({
@@ -5193,16 +5249,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());
@@ -5397,7 +5460,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,
@@ -5452,23 +5515,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
@@ -5487,24 +5551,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 }
@@ -5532,7 +5605,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",
@@ -5545,8 +5618,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,
@@ -5556,16 +5633,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());
@@ -5575,15 +5657,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 {
@@ -5828,7 +5910,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]
@@ -5925,11 +6007,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");
@@ -5950,7 +6032,7 @@ function InfiniteTableHeaderFn(props) {
       }
       return null;
     }
-    return /* @__PURE__ */ React16.createElement(InfiniteTableHeaderCell, {
+    return /* @__PURE__ */ React17.createElement(InfiniteTableHeaderCell, {
       domRef: domRef2,
       column,
       headerHeight,
@@ -5977,18 +6059,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) {
@@ -6078,7 +6160,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;
@@ -6092,16 +6174,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));
 }
@@ -6124,7 +6206,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,
@@ -6138,7 +6220,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,
@@ -6191,9 +6273,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,
@@ -6212,7 +6294,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,
@@ -6237,20 +6319,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) {
@@ -6283,7 +6365,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,
@@ -6296,7 +6378,7 @@ function TableHeaderWrapper(props) {
     },
     availableWidth: computedUnpinnedColumnsWidth,
     totalWidth: computedUnpinnedColumnsWidth
-  }) : /* @__PURE__ */ React20.createElement(InfiniteTableHeaderUnvirtualized, {
+  }) : /* @__PURE__ */ React21.createElement(InfiniteTableHeaderUnvirtualized, {
     style: unvirtualizedStyle,
     brain,
     scrollable: true,
@@ -6305,12 +6387,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",
@@ -6322,7 +6404,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",
@@ -6334,7 +6416,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
@@ -6343,7 +6425,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
@@ -6387,7 +6469,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,
@@ -6397,7 +6479,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))
@@ -6405,7 +6487,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 = {
@@ -6415,7 +6497,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,
@@ -6423,20 +6505,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
@@ -6518,19 +6600,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
@@ -6540,14 +6622,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,
@@ -6556,12 +6638,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";
@@ -6608,24 +6692,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), {
@@ -6653,21 +6744,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;
@@ -6693,8 +6794,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;
   }, []);
@@ -6725,7 +6826,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;
@@ -6739,7 +6840,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;
@@ -6795,13 +6896,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,
@@ -6828,18 +6929,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,
@@ -6860,7 +6961,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,
@@ -6873,11 +6974,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) {
@@ -6900,7 +7001,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();
@@ -6922,7 +7023,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,
@@ -6933,7 +7034,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",
@@ -6944,10 +7045,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,
@@ -6968,7 +7069,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());
@@ -7006,18 +7107,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;
@@ -7050,7 +7151,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);
@@ -7060,15 +7161,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) {
@@ -7090,17 +7191,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);
@@ -7131,8 +7232,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
@@ -7141,7 +7242,7 @@ var RowListWithExternalScrolling = (props) => {
     onMount,
     onUnmount
   });
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     const onScroll = (scrollPosition) => {
       const node = domRef.current;
       if (node) {
@@ -7170,7 +7271,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
@@ -7193,7 +7294,7 @@ function PinnedRowsContainer(props) {
     brain,
     renderRow
   } = props;
-  const style = React30.useMemo(() => {
+  const style = React31.useMemo(() => {
     const result = pinning === "end" ? {
       width: rowWidth,
       height,
@@ -7208,7 +7309,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 = {
@@ -7219,7 +7320,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
@@ -7235,23 +7336,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 dataArray = getData();
-  const renderPinnedRow = (0, import_react37.useCallback)((rowParams) => {
+  const renderPinnedRow = (0, import_react38.useCallback)((rowParams) => {
     const rowInfo = dataArray[rowParams.rowIndex];
     const { showZebraRows, showHoverRows } = getState();
     const rowProps = __spreadValues({
@@ -7267,7 +7368,7 @@ function useRenderPinnedRow(params) {
       rowWidth: columnsWidth,
       columns
     }, rowParams);
-    return /* @__PURE__ */ React30.createElement(TableRowUnvirtualized, __spreadValues({}, rowProps));
+    return /* @__PURE__ */ React31.createElement(TableRowUnvirtualized, __spreadValues({}, rowProps));
   }, [columnsWidth, columns, verticalBrain, dataArray]);
   return renderPinnedRow;
 }
@@ -7313,7 +7414,7 @@ function usePinnedRenderingForSide(side, params) {
     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,
@@ -7326,7 +7427,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
@@ -7368,13 +7469,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);
@@ -7404,13 +7505,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)
@@ -7451,7 +7552,7 @@ function useListRendering(param) {
     horizontalVirtualBrain
   } = componentState;
   const prevDataSourceTimestamp = usePrevious(dataSourceState.updatedAt);
-  const repaintIdRef = (0, import_react40.useRef)(0);
+  const repaintIdRef = (0, import_react41.useRef)(0);
   if (prevDataSourceTimestamp !== dataSourceState.updatedAt || !shallowEqualObjects(prevComputed, computed)) {
     repaintIdRef.current++;
   }
@@ -7470,11 +7571,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;
     }
@@ -7530,7 +7631,7 @@ function useListRendering(param) {
     computedUnpinnedColumns
   });
   const [, rerender] = useRerender();
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     rerender();
   }, [dataSourceState]);
   const { pinnedStartList, pinnedStartScrollbarPlaceholder } = usePinnedStartRendering(pinnedRenderingParams);
@@ -7553,8 +7654,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) {
@@ -7589,10 +7690,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;
@@ -7603,7 +7704,7 @@ var InfiniteTableLicenseFooter = React31.forwardRef(function InfiniteTableLicens
       ref.current = node;
     }
   }, []);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     const forceStyle = () => {
       requestAnimationFrame(() => {
         var _a;
@@ -7617,12 +7718,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",
@@ -7631,7 +7732,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;
@@ -7789,10 +7890,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.13"
+      version: "0.2.16"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -7803,8 +7904,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 = {
@@ -7817,15 +7918,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;
@@ -7837,15 +7938,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})`
@@ -7938,7 +8039,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" };
@@ -7950,18 +8051,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;
@@ -8026,11 +8127,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;
@@ -8048,7 +8149,7 @@ function useAutoSizeColumns() {
       removeHorizontal();
     };
   }, [verticalVirtualBrain, horizontalVirtualBrain]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     var _a;
     if (theKey == null) {
       return;
@@ -8109,7 +8210,7 @@ var InfiniteTableRoot = getComponentStateRoot({
   getParentState: () => useDataSource(),
   debugName: "InfiniteTable"
 });
-var InfiniteTableComponent = React34.memo(function InfiniteTableComponent2() {
+var InfiniteTableComponent = React35.memo(function InfiniteTableComponent2() {
   var _a;
   const {
     componentState,
@@ -8156,7 +8257,7 @@ var InfiniteTableComponent = React34.memo(function InfiniteTableComponent2() {
     bodySize,
     computed
   });
-  React34.useEffect(() => {
+  React35.useEffect(() => {
     const dataSourceState = getDataSourceState();
     const onChange = debounce((renderRange) => {
       dataSourceState.notifyRenderRangeChange(renderRange);
@@ -8166,7 +8267,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;
@@ -8175,35 +8276,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);
@@ -8239,25 +8340,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,