@infinite-table/infinite-react 0.3.12 → 0.3.15

package/index.js

@@ -665,8 +665,8 @@ function debounce(fn, { wait }) {
 }
 
 // src/components/InfiniteTable/index.tsx
-var React32 = __toModule(require("react"));
-var import_react45 = __toModule(require("react"));
+var React36 = __toModule(require("react"));
+var import_react49 = __toModule(require("react"));
 
 // src/utils/join.ts
 var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
@@ -704,13 +704,16 @@ var Logger = class {
 // src/components/ResizeObserver/index.tsx
 var React = __toModule(require("react"));
 var import_react = __toModule(require("react"));
-var setupResizeObserver = (node, callback) => {
+var setupResizeObserver = (node, callback, config = { debounce: 0 }) => {
+  var _a;
+  const debounceTime = (_a = config.debounce) != null ? _a : 0;
   const RO = window.ResizeObserver;
+  const onResizeCallback = debounceTime ? debounce(callback, { wait: debounceTime }) : callback;
   const observer = new RO((entries) => {
-    var _a;
+    var _a2;
     const entry = entries[0];
     let { width, height } = entry.contentRect;
-    if ((_a = entry.borderBoxSize) == null ? void 0 : _a[0]) {
+    if ((_a2 = entry.borderBoxSize) == null ? void 0 : _a2[0]) {
       height = entry.borderBoxSize[0].blockSize;
       width = entry.borderBoxSize[0].inlineSize;
     } else {
@@ -718,14 +721,17 @@ var setupResizeObserver = (node, callback) => {
       height = rect.height;
       width = rect.width;
     }
-    callback({ width, height });
+    onResizeCallback({ width, height });
   });
   observer.observe(node);
   return () => {
     observer.disconnect();
   };
 };
-var useResizeObserver = (ref, callback, config = { earlyAttach: false }) => {
+var useResizeObserver = (ref, callback, config = {
+  earlyAttach: false,
+  debounce: 0
+}) => {
   const sizeRef = (0, import_react.useRef)({
     width: 0,
     height: 0
@@ -743,7 +749,7 @@ var useResizeObserver = (ref, callback, config = { earlyAttach: false }) => {
           sizeRef.current = size;
           callback2(size);
         }
-      });
+      }, { debounce: config.debounce });
     }
     return () => {
       if (disconnect) {
@@ -757,7 +763,7 @@ var useResizeObserver = (ref, callback, config = { earlyAttach: false }) => {
     }
     return () => {
     };
-  }, [ref.current, callback, config.earlyAttach]);
+  }, [ref.current, callback, config.earlyAttach, config.debounce]);
   (0, import_react.useLayoutEffect)(() => {
     if (config.earlyAttach) {
       return effectFn(callback);
@@ -1080,6 +1086,73 @@ var cancelRaf = getGlobal().cancelAnimationFrame || ((timeoutId) => {
   return clearTimeout(timeoutId);
 });
 
+// src/utils/stripVar.ts
+function stripVar(cssVariableWithVarString) {
+  return cssVariableWithVarString.slice(4, -1);
+}
+
+// src/components/InfiniteTable/theme.css.ts
+var InternalVars = { currentColumnWidth: "var(--_1slvgu90)", currentColumnTransformX: "var(--_1slvgu91)", currentColumnTransformY: "var(--_1slvgu92)", activeCellRowOffset: "var(--_1slvgu93)", activeCellRowHeight: "var(--_1slvgu94)", activeCellOffsetX: "var(--_1slvgu95)", activeCellOffsetY: "var(--_1slvgu96)", scrollLeftForActiveCell: "var(--_1slvgu97)", scrollTopForActiveCell: "var(--_1slvgu98)", activeCellColWidth: "var(--_1slvgu99)", activeCellColOffset: "var(--_1slvgu9a)", columnWidthAtIndex: "var(--_1slvgu9b)", columnOffsetAtIndex: "var(--_1slvgu9c)" };
+var ThemeVars = { color: { accent: "var(--infinite-accent-color)", error: "var(--infinite-error-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { draggingBackground: "var(--infinite-header-cell-dragging-background)", background: "var(--infinite-header-cell-background)", hoverBackground: "var(--infinite-header-cell-hover-background)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", resizeHandleActiveAreaWidth: "var(--infinite-resize-handle-active-area-width)", resizeHandleWidth: "var(--infinite-resize-handle-width)", resizeHandleHoverBackground: "var(--infinite-resize-handle-hover-background)", resizeHandleConstrainedHoverBackground: "var(--infinite-resize-handle-constrained-hover-background)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", color: "var(--infinite-cell-color)", activeBorderColor_R: "var(--infinite-active-cell-border-color--r)", activeBorderColor_G: "var(--infinite-active-cell-border-color--g)", activeBorderColor_B: "var(--infinite-active-cell-border-color--b)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
+var columnHeaderHeightName = "column-header-height";
+
+// src/utils/selectParent.ts
+function selectParent(el, selector) {
+  let node = el;
+  if (node && node.matches(selector)) {
+    return node;
+  }
+  while (node = node.parentElement) {
+    if (node.matches(selector)) {
+      return node;
+    }
+  }
+  return null;
+}
+
+// src/components/InfiniteTable/internalProps.ts
+var rootClassName2 = "Infinite";
+var internalProps = {
+  rootClassName: rootClassName2
+};
+
+// src/components/InfiniteTable/utils/infiniteDOMUtils.ts
+var InfiniteSelector = `.${internalProps.rootClassName}`;
+function getParentInfiniteNode(node) {
+  return selectParent(node, InfiniteSelector);
+}
+var columnWidthAtIndex = stripVar(InternalVars.columnWidthAtIndex);
+var columnOffsetAtIndex = stripVar(InternalVars.columnOffsetAtIndex);
+function setInfiniteVarOnRoot(varName, varValue, node) {
+  const infinite = node ? getParentInfiniteNode(node) : document.querySelector(InfiniteSelector);
+  setInfiniteVarOnNode(varName, varValue, infinite);
+}
+function setInfiniteVarOnNode(varName, varValue, node) {
+  if (node) {
+    const prop = InternalVars[varName] ? stripVar(InternalVars[varName]) : varName;
+    node.style.setProperty(prop, `${varValue}`);
+  }
+}
+function setInfiniteVarsOnNode(vars, node) {
+  if (node) {
+    for (var varName in vars) {
+      node.style.setProperty(InternalVars[varName] ? stripVar(InternalVars[varName]) : varName, `${vars[varName]}`);
+    }
+  }
+}
+function setInfiniteColumnWidth(colIndex, colWidth, node) {
+  setInfiniteVarOnRoot(`${columnWidthAtIndex}-${colIndex}`, typeof colWidth === "number" ? colWidth + "px" : colWidth, node);
+}
+function setInfiniteColumnOffset(colIndex, colOffset, node) {
+  setInfiniteVarOnRoot(`${columnOffsetAtIndex}-${colIndex}`, typeof colOffset === "number" ? colOffset + "px" : colOffset, node);
+}
+function getCSSVarNameForColWidth(colIndex) {
+  return `${columnWidthAtIndex}-${colIndex}`;
+}
+function getCSSVarNameForColOffset(colIndex) {
+  return `${columnOffsetAtIndex}-${colIndex}`;
+}
+
 // src/components/VirtualBrain/MatrixBrain.ts
 var import_binary_search = __toModule(require_binary_search());
 var getRenderRangeCellCount = (range) => {
@@ -1115,13 +1188,13 @@ var MatrixBrain = class extends Logger {
     this.extraSpanCells = [];
     this.scrollPosition = { scrollLeft: 0, scrollTop: 0 };
     this.onScrollFns = [];
-    this.onRenderRangeChangeFns = [];
-    this.onVerticalRenderRangeChangeFns = [];
-    this.onHorizontalRenderRangeChangeFns = [];
+    this.onRenderRangeChangeFns = new Set();
+    this.onVerticalRenderRangeChangeFns = new Set();
+    this.onHorizontalRenderRangeChangeFns = new Set();
     this.onDestroyFns = [];
     this.destroyed = false;
-    this.onRenderCountChangeFns = [];
-    this.onAvailableSizeChangeFns = [];
+    this.onRenderCountChangeFns = new Set();
+    this.onAvailableSizeChangeFns = new Set();
     this.onScrollStartFns = [];
     this.onScrollStopFns = [];
     this.scrollTimeoutId = 0;
@@ -1285,14 +1358,16 @@ var MatrixBrain = class extends Logger {
       }
       const fns = this.onAvailableSizeChangeFns;
       const range = this.getAvailableSize();
-      for (let i = 0, len = fns.length; i < len; i++) {
+      fns.forEach((fn) => {
         raf2(() => {
           if (this.destroyed) {
             return;
           }
-          fns[i](range);
+          if (fns.has(fn)) {
+            fn(range);
+          }
         });
-      }
+      });
     };
     this.notifyRenderRangeChange = () => {
       if (this.destroyed) {
@@ -1300,14 +1375,16 @@ var MatrixBrain = class extends Logger {
       }
       const fns = this.onRenderRangeChangeFns;
       const range = this.getRenderRange();
-      for (let i = 0, len = fns.length; i < len; i++) {
+      fns.forEach((fn) => {
         raf2(() => {
           if (this.destroyed) {
             return;
           }
-          fns[i](range);
+          if (fns.has(fn)) {
+            fn(range);
+          }
         });
-      }
+      });
     };
     this.notifyVerticalRenderRangeChange = () => {
       if (this.destroyed) {
@@ -1315,14 +1392,16 @@ var MatrixBrain = class extends Logger {
       }
       const fns = this.onVerticalRenderRangeChangeFns;
       const range = this.verticalRenderRange;
-      for (let i = 0, len = fns.length; i < len; i++) {
+      fns.forEach((fn) => {
         raf2(() => {
           if (this.destroyed) {
             return;
           }
-          fns[i]([range.startIndex, range.endIndex]);
+          if (fns.has(fn)) {
+            fn([range.startIndex, range.endIndex]);
+          }
         });
-      }
+      });
     };
     this.notifyHorizontalRenderRangeChange = () => {
       if (this.destroyed) {
@@ -1330,14 +1409,16 @@ var MatrixBrain = class extends Logger {
       }
       const fns = this.onHorizontalRenderRangeChangeFns;
       const range = this.horizontalRenderRange;
-      for (let i = 0, len = fns.length; i < len; i++) {
+      fns.forEach((fn) => {
         raf2(() => {
           if (this.destroyed) {
             return;
           }
-          fns[i]([range.startIndex, range.endIndex]);
+          if (fns.has(fn)) {
+            fn([range.startIndex, range.endIndex]);
+          }
         });
-      }
+      });
     };
     this.computeDirectionalRenderCount = (direction, itemSize, count, theSize) => {
       let renderCount = 0;
@@ -1349,11 +1430,11 @@ var MatrixBrain = class extends Logger {
           sizes.push(this.getItemSize(i, direction));
         }
         sizes.sort(SORT_ASC);
-        let sum = 0;
+        let sum2 = 0;
         for (let i = 0; i < count; i++) {
-          sum += sizes[i];
+          sum2 += sizes[i];
           renderCount++;
-          if (sum > size) {
+          if (sum2 > size) {
             break;
           }
         }
@@ -1368,11 +1449,11 @@ var MatrixBrain = class extends Logger {
       if (!this.fixedColsEnd) {
         return 0;
       }
-      let sum = 0;
+      let sum2 = 0;
       for (let i = this.cols - this.fixedColsEnd; i < this.cols; i++) {
-        sum += this.getColWidth(i);
+        sum2 += this.getColWidth(i);
       }
-      return sum;
+      return sum2;
     };
     this.getFixedEndColsOffsets = () => {
       if (!this.fixedColsEnd) {
@@ -1382,19 +1463,19 @@ var MatrixBrain = class extends Logger {
       const { width } = this.getAvailableSize();
       const offsets = [];
       const widths = [];
-      let sum = 0;
+      let sum2 = 0;
       for (let colIndex = this.cols - this.fixedColsEnd; colIndex < this.cols; colIndex++) {
         const colWidth = this.getColWidth(colIndex);
         widths.push(colWidth);
-        sum += colWidth;
+        sum2 += colWidth;
       }
-      const baseOffset = width - sum + scrollLeft;
-      sum = 0;
+      const baseOffset = width - sum2 + scrollLeft;
+      sum2 = 0;
       let index = 0;
       for (let colIndex = this.cols - this.fixedColsEnd; colIndex < this.cols; colIndex++) {
-        const offset = baseOffset + sum;
+        const offset = baseOffset + sum2;
         offsets[colIndex] = offset;
-        sum += widths[index];
+        sum2 += widths[index];
         index++;
       }
       return offsets;
@@ -1407,19 +1488,19 @@ var MatrixBrain = class extends Logger {
       const { height } = this.getAvailableSize();
       const offsets = [];
       const heights = [];
-      let sum = 0;
+      let sum2 = 0;
       for (let rowIndex = this.rows - this.fixedRowsEnd; rowIndex < this.rows; rowIndex++) {
         const rowHeight = this.getRowHeight(rowIndex);
         heights.push(rowHeight);
-        sum += rowHeight;
+        sum2 += rowHeight;
       }
-      const baseOffset = height - sum + scrollTop;
-      sum = 0;
+      const baseOffset = height - sum2 + scrollTop;
+      sum2 = 0;
       let index = 0;
       for (let rowIndex = this.rows - this.fixedRowsEnd; rowIndex < this.rows; rowIndex++) {
-        const offset = baseOffset + sum;
+        const offset = baseOffset + sum2;
         offsets[rowIndex] = offset;
-        sum += heights[index];
+        sum2 += heights[index];
         index++;
       }
       return offsets;
@@ -1428,31 +1509,31 @@ var MatrixBrain = class extends Logger {
       if (!this.fixedColsStart) {
         return 0;
       }
-      let sum = 0;
+      let sum2 = 0;
       for (let i = 0; i < this.fixedColsStart; i++) {
-        sum += this.getColWidth(i);
+        sum2 += this.getColWidth(i);
       }
-      return sum;
+      return sum2;
     };
     this.getFixedEndRowsHeight = () => {
       if (!this.fixedRowsEnd) {
         return 0;
       }
-      let sum = 0;
+      let sum2 = 0;
       for (let i = this.rows - this.fixedRowsEnd; i < this.rows; i++) {
-        sum += this.getRowHeight(i);
+        sum2 += this.getRowHeight(i);
       }
-      return sum;
+      return sum2;
     };
     this.getFixedStartRowsHeight = () => {
       if (!this.fixedRowsStart) {
         return 0;
       }
-      let sum = 0;
+      let sum2 = 0;
       for (let i = 0; i < this.fixedRowsStart; i++) {
-        sum += this.getRowHeight(i);
+        sum2 += this.getRowHeight(i);
       }
-      return sum;
+      return sum2;
     };
     this.computeRenderCount = (which = ALL_DIRECTIONS) => {
       const recomputeHorizontal = which.horizontal;
@@ -1883,33 +1964,33 @@ var MatrixBrain = class extends Logger {
       };
     };
     this.onRenderRangeChange = (fn) => {
-      this.onRenderRangeChangeFns.push(fn);
+      this.onRenderRangeChangeFns.add(fn);
       return () => {
-        this.onRenderRangeChangeFns = this.onRenderRangeChangeFns.filter((f) => f !== fn);
+        this.onRenderRangeChangeFns.delete(fn);
       };
     };
     this.onVerticalRenderRangeChange = (fn) => {
-      this.onVerticalRenderRangeChangeFns.push(fn);
+      this.onVerticalRenderRangeChangeFns.add(fn);
       return () => {
-        this.onVerticalRenderRangeChangeFns = this.onVerticalRenderRangeChangeFns.filter((f) => f !== fn);
+        this.onVerticalRenderRangeChangeFns.delete(fn);
       };
     };
     this.onHorizontalRenderRangeChange = (fn) => {
-      this.onHorizontalRenderRangeChangeFns.push(fn);
+      this.onHorizontalRenderRangeChangeFns.add(fn);
       return () => {
-        this.onHorizontalRenderRangeChangeFns = this.onHorizontalRenderRangeChangeFns.filter((f) => f !== fn);
+        this.onHorizontalRenderRangeChangeFns.delete(fn);
       };
     };
     this.onRenderCountChange = (fn) => {
-      this.onRenderCountChangeFns.push(fn);
+      this.onRenderCountChangeFns.add(fn);
       return () => {
-        this.onRenderCountChangeFns = this.onRenderCountChangeFns.filter((f) => f !== fn);
+        this.onRenderCountChangeFns.delete(fn);
       };
     };
     this.onAvailableSizeChange = (fn) => {
-      this.onAvailableSizeChangeFns.push(fn);
+      this.onAvailableSizeChangeFns.add(fn);
       return () => {
-        this.onAvailableSizeChangeFns = this.onAvailableSizeChangeFns.filter((f) => f !== fn);
+        this.onAvailableSizeChangeFns.delete(fn);
       };
     };
     this.onDestroy = (fn) => {
@@ -1937,10 +2018,10 @@ var MatrixBrain = class extends Logger {
       this.onScrollFns = [];
       this.onScrollStartFns = [];
       this.onScrollStopFns = [];
-      this.onRenderCountChangeFns = [];
-      this.onRenderRangeChangeFns = [];
-      this.onVerticalRenderRangeChangeFns = [];
-      this.onHorizontalRenderRangeChangeFns = [];
+      this.onRenderCountChangeFns = new Set();
+      this.onRenderRangeChangeFns = new Set();
+      this.onVerticalRenderRangeChangeFns = new Set();
+      this.onHorizontalRenderRangeChangeFns = new Set();
     };
     this.reset();
   }
@@ -1986,8 +2067,8 @@ var MatrixBrain = class extends Logger {
     let { width, height } = size;
     width = width != null ? width : this.width;
     height = height != null ? height : this.height;
-    const widthSame = size.width === this.width;
-    const heightSame = size.height === this.height;
+    const widthSame = width === this.width;
+    const heightSame = height === this.height;
     if (widthSame && heightSame) {
       return;
     }
@@ -2039,14 +2120,16 @@ var MatrixBrain = class extends Logger {
       vertical: verticalRenderCount
     };
     const fns = this.onRenderCountChangeFns;
-    for (let i = 0, len = fns.length; i < len; i++) {
+    fns.forEach((fn) => {
       raf2(() => {
         if (this.destroyed) {
           return;
         }
-        fns[i](renderCount);
+        if (fns.has(fn)) {
+          fn(renderCount);
+        }
       });
-    }
+    });
   }
   getItemSizeCacheFor(itemIndex, direction) {
     return (direction === "horizontal" ? this.colWidthCache : this.rowHeightCache)[itemIndex];
@@ -2540,18 +2623,31 @@ var MappedCells = class extends Logger {
 
 // src/components/HeadlessTable/ReactHeadlessTableRenderer.tsx
 var ITEM_POSITION_WITH_TRANSFORM = true;
+var currentColumnTransformY = stripVar(InternalVars.currentColumnTransformY);
+var columnTransformX = stripVar(InternalVars.columnOffsetAtIndex);
 var ReactHeadlessTableRenderer = class extends Logger {
   constructor(brain) {
     super("ReactHeadlessTableRenderer");
     this.destroyed = false;
     this.scrolling = false;
     this.cellHoverClassNames = [];
+    this.name = "";
     this.itemDOMElements = [];
     this.itemDOMRefs = [];
     this.updaters = [];
     this.items = [];
     this.currentHoveredRow = -1;
     this.hoverRowUpdatesInProgress = new Map();
+    this.infiniteNode = null;
+    this.setTransform = (element, _rowIndex, colIndex, x, y) => {
+      const transformXVar = `${columnTransformX}-${colIndex}`;
+      if (!this.infiniteNode) {
+        this.infiniteNode = getParentInfiniteNode(element);
+      }
+      this.infiniteNode.style.setProperty(transformXVar, `${x}px`);
+      element.style.setProperty(currentColumnTransformY, `${y}px`);
+      element.style.transform = `translate3d(var(${transformXVar}), ${InternalVars.currentColumnTransformY}, 0)`;
+    };
     this.getFullyVisibleRowsRange = () => {
       let {
         start: [startRow],
@@ -2748,7 +2844,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
           extraCellsMap.set(`${rowIndex}:${colIndex}`, true);
         });
       }
-      const renderCount = ranges.reduce((sum, range2) => sum + getRenderRangeCellCount(range2), 0);
+      const renderCount = ranges.reduce((sum2, range2) => sum2 + getRenderRangeCellCount(range2), 0);
       if (this.itemDOMElements.length >= renderCount) {
         mappedCells.discardElementsStartingWith(renderCount, (elementIndex) => {
           if (this.updaters[elementIndex]) {
@@ -3002,6 +3098,9 @@ var ReactHeadlessTableRenderer = class extends Logger {
       if (this.scrolling) {
         return;
       }
+      if (false) {
+        return;
+      }
       if (this.hoverRowUpdatesInProgress.has(rowIndex)) {
         return;
       }
@@ -3017,6 +3116,9 @@ var ReactHeadlessTableRenderer = class extends Logger {
       };
       raf(() => {
         checkHoverClass();
+        if (false) {
+          return;
+        }
         this.hoverRowUpdatesInProgress.delete(rowIndex);
       });
     };
@@ -3037,12 +3139,10 @@ var ReactHeadlessTableRenderer = class extends Logger {
       const { x, y } = itemPosition;
       if (itemElement) {
         this.updateHoverClassNamesForRow(rowIndex);
-        if (false) {
-          itemElement.dataset.rowIndex = rowIndex;
-          itemElement.dataset.colIndex = colIndex;
-        }
+        itemElement.dataset.rowIndex = rowIndex;
+        itemElement.dataset.colIndex = colIndex;
         if (ITEM_POSITION_WITH_TRANSFORM) {
-          itemElement.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+          this.setTransform(itemElement, rowIndex, colIndex, x, y);
           itemElement.style.willChange = "transform";
           itemElement.style.backfaceVisibility = "hidden";
           const hidden = options ? options.hidden : !!this.isCellCovered(rowIndex, colIndex);
@@ -3087,39 +3187,39 @@ var ReactHeadlessTableRenderer = class extends Logger {
           fn(rowIndex, colIndex, node, itemPosition, scrollPosition);
         }
       }
-      function adjustColStart(_rowIndex, colIndex, node, { x, y }, { scrollLeft }) {
+      const adjustColStart = (_rowIndex, colIndex, node, { x, y }, { scrollLeft }) => {
         node.style.zIndex = `${fixedColsStart - colIndex}`;
-        node.style.transform = `translate3d(${x + scrollLeft}px, ${y}px, 0)`;
-      }
-      function adjustRowStart(rowIndex, _colIndex, node, coords, scrollPosition2) {
+        this.setTransform(node, _rowIndex, colIndex, x + scrollLeft, y);
+      };
+      const adjustRowStart = (rowIndex, _colIndex, node, coords, scrollPosition2) => {
         node.style.zIndex = `${fixedRowsStart - rowIndex}`;
-        node.style.transform = `translate3d(${coords.x}px, ${coords.y + scrollPosition2.scrollTop}px, 0)`;
-      }
-      function adjustColEnd(_rowIndex, colIndex, node, { y }) {
+        this.setTransform(node, rowIndex, _colIndex, coords.x, coords.y + scrollPosition2.scrollTop);
+      };
+      const adjustColEnd = (_rowIndex, colIndex, node, { y }) => {
         node.style.zIndex = `${cols - colIndex}`;
         const val = fixedEndColsOffsets[colIndex];
-        node.style.transform = `translate3d(${val}px, ${y}px, 0)`;
-      }
-      function adjustRowEnd(rowIndex, _colIndex, node, coords) {
+        this.setTransform(node, _rowIndex, colIndex, val, y);
+      };
+      const adjustRowEnd = (rowIndex, _colIndex, node, coords) => {
         node.style.zIndex = `${rows - rowIndex}`;
-        node.style.transform = `translate3d(${coords.x}px, ${fixedEndRowsOffsets[rowIndex]}px, 0)`;
-      }
-      function adjustColStartRowStart(_rowIndex, _colIndex, node, { x, y }, scrollPosition2) {
+        this.setTransform(node, rowIndex, _colIndex, coords.x, fixedEndRowsOffsets[rowIndex]);
+      };
+      const adjustColStartRowStart = (_rowIndex, _colIndex, node, { x, y }, scrollPosition2) => {
         node.style.zIndex = `1000000`;
-        node.style.transform = `translate3d(${x + scrollPosition2.scrollLeft}px, ${y + scrollPosition2.scrollTop}px, 0)`;
-      }
-      function adjustColStartRowEnd(_rowIndex, _colIndex, node, { x }, scrollPosition2) {
+        this.setTransform(node, _rowIndex, _colIndex, x + scrollPosition2.scrollLeft, y + scrollPosition2.scrollTop);
+      };
+      const adjustColStartRowEnd = (_rowIndex, _colIndex, node, { x }, scrollPosition2) => {
         node.style.zIndex = `2000000`;
-        node.style.transform = `translate3d(${x + scrollPosition2.scrollLeft}px, ${fixedEndRowsOffsets[_rowIndex]}px, 0)`;
-      }
-      function adjustColEndRowStart(_rowIndex, colIndex, node, coords) {
+        this.setTransform(node, _rowIndex, _colIndex, x + scrollPosition2.scrollLeft, fixedEndRowsOffsets[_rowIndex]);
+      };
+      const adjustColEndRowStart = (_rowIndex, colIndex, node, coords) => {
         node.style.zIndex = `3000000`;
-        node.style.transform = `translate3d(${fixedEndColsOffsets[colIndex]}px, ${coords.y + scrollPosition.scrollTop}px, 0)`;
-      }
-      function adjustColEndRowEnd(rowIndex, colIndex, node) {
+        this.setTransform(node, _rowIndex, colIndex, fixedEndColsOffsets[colIndex], coords.y + scrollPosition.scrollTop);
+      };
+      const adjustColEndRowEnd = (rowIndex, colIndex, node) => {
         node.style.zIndex = `4000000`;
-        node.style.transform = `translate3d(${fixedEndColsOffsets[colIndex]}px, ${fixedEndRowsOffsets[rowIndex]}px, 0)`;
-      }
+        this.setTransform(node, rowIndex, colIndex, fixedEndColsOffsets[colIndex], fixedEndRowsOffsets[rowIndex]);
+      };
       if (fixedColsStart || fixedColsEnd) {
         for (let rowIndex = startRow; rowIndex < endRow; rowIndex++) {
           for (let colIndex = 0; colIndex < fixedColsStart; colIndex++) {
@@ -3350,14 +3450,12 @@ var useRerender = () => {
   ];
 };
 
-// src/components/InfiniteTable/internalProps.ts
-var rootClassName2 = "Infinite";
-var internalProps = {
-  rootClassName: rootClassName2
-};
+// src/components/InfiniteTable/components/ActiveCellIndicator.css.ts
+var ActiveCellIndicatorCls = { visible: "nxbq1c2 nxbq1c1 _16lm1iwf _16lm1iw3 _16lm1iwx _16lm1iwv", hidden: "nxbq1c3 nxbq1c1 _16lm1iwf _16lm1iw3 _16lm1iwx _16lm1iwv" };
+var ActiveIndicatorWrapperCls = "_16lm1iwf _16lm1iw3 _16lm1iwx _16lm1iwv _16lm1iwr";
 
 // src/components/InfiniteTable/components/ActiveRowIndicator.css.ts
-var ActiveRowIndicatorCls = { visible: "j26lrx1 j26lrx0 _16lm1iwe _16lm1iw3 _16lm1iwt _16lm1iwu _16lm1iww", hidden: "j26lrx2 j26lrx0 _16lm1iwe _16lm1iw3 _16lm1iwt _16lm1iwu _16lm1iww" };
+var ActiveRowIndicatorCls = { visible: "j26lrx1 j26lrx0 _16lm1iwf _16lm1iw3 _16lm1iwu _16lm1iwv _16lm1iwx", hidden: "j26lrx2 j26lrx0 _16lm1iwf _16lm1iw3 _16lm1iwu _16lm1iwv _16lm1iwx" };
 
 // src/components/InfiniteTable/components/ActiveRowIndicator.tsx
 var { rootClassName: rootClassName3 } = internalProps;
@@ -3394,6 +3492,9 @@ var ActiveRowIndicatorFn = (props) => {
     };
   }, [brain]);
   return /* @__PURE__ */ React10.createElement("div", {
+    className: ActiveIndicatorWrapperCls,
+    "data-name": "active-row"
+  }, /* @__PURE__ */ React10.createElement("div", {
     ref: domRef,
     "data-name": "active-row-indicator",
     className: `${baseCls} ${active ? ActiveRowIndicatorCls.visible : ActiveRowIndicatorCls.hidden}`,
@@ -3401,74 +3502,67 @@ var ActiveRowIndicatorFn = (props) => {
       transform: `translate3d(0px, ${-brain.getScrollPosition().scrollTop + state.top}px,0)`,
       height: state.rowHeight
     } : void 0
-  });
+  }));
 };
 var ActiveRowIndicator = React10.memo(ActiveRowIndicatorFn);
 
 // src/components/InfiniteTable/components/ActiveCellIndicator.tsx
 var React11 = __toModule(require("react"));
 var import_react10 = __toModule(require("react"));
-
-// src/components/InfiniteTable/components/ActiveCellIndicator.css.ts
-var ActiveCellIndicatorCls = { visible: "nxbq1c1 nxbq1c0 _16lm1iwe _16lm1iw3 _16lm1iww _16lm1iwu", hidden: "nxbq1c2 nxbq1c0 _16lm1iwe _16lm1iw3 _16lm1iww _16lm1iwu" };
-
-// src/components/InfiniteTable/components/ActiveCellIndicator.tsx
 var { rootClassName: rootClassName4 } = internalProps;
 var baseCls2 = `${rootClassName4}-ActiveCellIndicator`;
+var ActiveStyle = {
+  [stripVar(InternalVars.activeCellOffsetX)]: `calc( ${InternalVars.scrollLeftForActiveCell} + ${InternalVars.activeCellColOffset} )`,
+  [stripVar(InternalVars.activeCellOffsetY)]: `calc( ${InternalVars.scrollTopForActiveCell} + ${InternalVars.activeCellRowOffset} )`,
+  transform: `translate3d(${InternalVars.activeCellOffsetX}, ${InternalVars.activeCellOffsetY}, 0px)`,
+  width: InternalVars.activeCellColWidth,
+  height: InternalVars.activeCellRowHeight
+};
 var ActiveCellIndicatorFn = (props) => {
   const { brain } = props;
-  const [rerenderId, rerender] = useRerender();
-  const [state, setState] = (0, import_react10.useState)({
-    top: 0,
-    rowHeight: 0,
-    colWidth: 0,
-    left: 0
-  });
+  const [_rerenderId, rerender] = useRerender();
   const domRef = (0, import_react10.useRef)(null);
-  const stateRef = (0, import_react10.useRef)(state);
   const active = props.activeCellIndex != null && brain.getRowCount() > props.activeCellIndex[0];
   (0, import_react10.useLayoutEffect)(() => {
     if (props.activeCellIndex == null) {
       return;
     }
     const rowIndex = props.activeCellIndex[0];
-    setState(stateRef.current = {
-      top: brain.getItemOffsetFor(rowIndex, "vertical"),
-      rowHeight: brain.getRowHeight(rowIndex),
-      left: brain.getItemOffsetFor(props.activeCellIndex[1], "horizontal"),
-      colWidth: brain.getColWidth(props.activeCellIndex[1])
-    });
-  }, [props.activeCellIndex, rerenderId]);
+    const activeCellRowHeight = brain.getRowHeight(rowIndex);
+    const activeCellRowOffset = brain.getItemOffsetFor(rowIndex, "vertical");
+    const node = domRef.current;
+    const scrollPosition = brain.getScrollPosition();
+    setInfiniteVarsOnNode({
+      scrollTopForActiveCell: `${-scrollPosition.scrollTop}px`,
+      scrollLeftForActiveCell: `${-scrollPosition.scrollLeft}px`,
+      activeCellRowHeight: `${activeCellRowHeight}px`,
+      activeCellRowOffset: `${activeCellRowOffset}px`
+    }, node);
+  }, [props.activeCellIndex]);
   (0, import_react10.useEffect)(() => {
-    const removeOnSCroll = brain.onScroll((scrollPos) => {
-      const node = domRef.current;
-      const topOffset = stateRef.current.top;
-      const leftOffset = stateRef.current.left;
-      node.style.transform = `translate3d(${-scrollPos.scrollLeft + leftOffset}px, ${-scrollPos.scrollTop + topOffset}px, 0px)`;
+    const removeOnSCroll = brain.onScroll((scrollPosition) => {
+      setInfiniteVarsOnNode({
+        scrollTopForActiveCell: `${-scrollPosition.scrollTop}px`,
+        scrollLeftForActiveCell: `${-scrollPosition.scrollLeft}px`
+      }, domRef.current);
     });
     const removeOnRenderCountChange = brain.onRenderCountChange(() => {
       rerender();
     });
-    const removeOnAvailableSizeChange = brain.onAvailableSizeChange(() => {
-      rerender();
-    });
     return () => {
-      removeOnAvailableSizeChange();
       removeOnRenderCountChange();
       removeOnSCroll();
     };
   }, [brain]);
-  const scrollPosition = brain.getScrollPosition();
   return /* @__PURE__ */ React11.createElement("div", {
+    className: ActiveIndicatorWrapperCls,
+    "data-name": "active-cell"
+  }, /* @__PURE__ */ React11.createElement("div", {
     ref: domRef,
     "data-name": "active-cell-indicator",
     className: `${baseCls2} ${active ? ActiveCellIndicatorCls.visible : ActiveCellIndicatorCls.hidden}`,
-    style: active ? {
-      transform: `translate3d(${-scrollPosition.scrollLeft + state.left}px, ${-scrollPosition.scrollTop + state.top}px,0)`,
-      width: state.colWidth,
-      height: state.rowHeight
-    } : void 0
-  });
+    style: active ? ActiveStyle : void 0
+  }));
 };
 var ActiveCellIndicator = React11.memo(ActiveCellIndicatorFn);
 
@@ -3538,7 +3632,7 @@ function HeadlessTable(props) {
       };
       brain.update(size);
     };
-    const remove = setupResizeObserver(node, onResize);
+    const remove = setupResizeObserver(node, onResize, { debounce: 50 });
     return remove;
   }, []);
   const onContainerScroll = (0, import_react11.useCallback)((scrollPos) => {
@@ -3890,45 +3984,45 @@ var useInternalProps = () => {
 };
 
 // src/components/InfiniteTable/utilities.css.ts
-var alignItems = { center: "_16lm1iw14", stretch: "_16lm1iw15" };
-var cssEllipsisClassName = "_16lm1iw1d _16lm1iw1e _16lm1iw19";
-var cursor = { pointer: "_16lm1iwd" };
-var display = { flex: "_16lm1iwm", block: "_16lm1iwn", inlineBlock: "_16lm1iwo" };
-var flex = { "1": "_16lm1iwf", none: "_16lm1iwg" };
-var flexFlow = { column: "_16lm1iw12", row: "_16lm1iw13" };
-var justifyContent = { center: "_16lm1iw16", start: "_16lm1iw17", end: "_16lm1iw18" };
-var left = { "0": "_16lm1iww", "100%": "_16lm1iwx" };
-var overflow = { hidden: "_16lm1iw19", auto: "_16lm1iw1a", visible: "_16lm1iw1b" };
+var alignItems = { center: "_16lm1iw15", stretch: "_16lm1iw16" };
+var cssEllipsisClassName = "_16lm1iw1e _16lm1iw1f _16lm1iw1a";
+var cursor = { pointer: "_16lm1iwd", colResize: "_16lm1iwe" };
+var display = { flex: "_16lm1iwn", block: "_16lm1iwo", inlineBlock: "_16lm1iwp" };
+var flex = { "1": "_16lm1iwg", none: "_16lm1iwh" };
+var flexFlow = { column: "_16lm1iw13", row: "_16lm1iw14" };
+var justifyContent = { center: "_16lm1iw17", start: "_16lm1iw18", end: "_16lm1iw19" };
+var left = { "0": "_16lm1iwx", "100%": "_16lm1iwy" };
+var overflow = { hidden: "_16lm1iw1a", auto: "_16lm1iw1b", visible: "_16lm1iw1c" };
 var position = { relative: "_16lm1iw1", absolute: "_16lm1iw2", sticky: "_16lm1iw3", fixed: "_16lm1iw4" };
-var top = { "0": "_16lm1iwu", "100%": "_16lm1iwv" };
+var top = { "0": "_16lm1iwv", "100%": "_16lm1iww" };
 var transformTranslateZero = "_16lm1iwa";
-var userSelect = { none: "_16lm1iwp" };
-var zIndex = { "1": "_16lm1iwh", "10": "_16lm1iwi", "1000": "_16lm1iwj", "10000": "_16lm1iwk", "100000": "_16lm1iwl" };
+var userSelect = { none: "_16lm1iwq" };
+var zIndex = { "1": "_16lm1iwi", "10": "_16lm1iwj", "1000": "_16lm1iwk", "10000": "_16lm1iwl", "100000": "_16lm1iwm" };
 
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
 var InfiniteTableBody = React14.forwardRef(function InfiniteTableBody2(props, ref) {
-  const { rootClassName: rootClassName11 } = useInternalProps();
+  const { rootClassName: rootClassName13 } = useInternalProps();
   return /* @__PURE__ */ React14.createElement("div", __spreadProps(__spreadValues({
     ref
   }, props), {
-    className: join(`${rootClassName11}Body`, position.relative, flex["1"], transformTranslateZero, props.className)
+    className: join(`${rootClassName13}Body`, position.relative, flex["1"], transformTranslateZero, props.className)
   }));
 });
 
 // src/components/InfiniteTable/components/InfiniteTableFooter/InfiniteTableFooter.tsx
 var React15 = __toModule(require("react"));
 var InfiniteTableFooter = React15.forwardRef(function InfiniteTableFooter2(props, ref) {
-  const { rootClassName: rootClassName11 } = useInternalProps();
+  const { rootClassName: rootClassName13 } = useInternalProps();
   return /* @__PURE__ */ React15.createElement("div", __spreadProps(__spreadValues({
     ref
   }, props), {
-    className: join(`${rootClassName11}Footer`, position.relative, display.flex, flexFlow.row, props.className)
+    className: join(`${rootClassName13}Footer`, position.relative, display.flex, flexFlow.row, props.className)
   }));
 });
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
-var React20 = __toModule(require("react"));
-var import_react22 = __toModule(require("react"));
+var React22 = __toModule(require("react"));
+var import_react24 = __toModule(require("react"));
 var import_react_dom = __toModule(require("react-dom"));
 
 // src/components/DataSource/defaultFilterTypes.ts
@@ -4088,7 +4182,6 @@ var useColumnPointerEvents = ({
   const [draggingDiff, setDraggingDiff] = (0, import_react17.useState)(null);
   const [proxyOffset, setProxyOffset] = (0, import_react17.useState)(null);
   const breakpointsRef = (0, import_react17.useRef)([]);
-  const pointerMoveRef = (0, import_react17.useRef)(null);
   const didDragRef = (0, import_react17.useRef)(false);
   const initialClientPos = (0, import_react17.useRef)(null);
   const currentDropIndexRef = (0, import_react17.useRef)(null);
@@ -4164,35 +4257,40 @@ var useColumnPointerEvents = ({
       }
       setDraggingDiff({ left: diffX, top: diffY });
     };
-    pointerMoveRef.current = onPointerMove;
+    const onPointerUp = (e2) => {
+      const target2 = domRef.current;
+      target2.style.cursor = cursorRef.current;
+      target2.releasePointerCapture(e2.pointerId);
+      target2.removeEventListener("pointermove", onPointerMove);
+      target2.removeEventListener("pointerup", onPointerUp);
+      setDraggingDiff(null);
+      componentActions.columnShifts = null;
+      componentActions.draggingColumnId = null;
+      if (!didDragRef.current && column.computedSortable) {
+        column.toggleSort();
+      }
+      const dropIndex = currentDropIndexRef.current;
+      if (dropIndex != null && dropIndex !== columnIndex) {
+        const newOrder = moveXatY(computedColumnOrder, columnIndex, dropIndex > columnIndex ? dropIndex - 1 : dropIndex);
+        componentActions.columnOrder = newOrder;
+      }
+      breakpointsRef.current = [];
+      didDragRef.current = false;
+      initialClientPos.current = null;
+      currentDropIndexRef.current = null;
+    };
     target.addEventListener("pointermove", onPointerMove);
+    target.addEventListener("pointerup", onPointerUp);
     target.setPointerCapture(e.pointerId);
-  }, [columns, column, columnIndex, columnsArray, computedRemainingSpace]);
-  const onPointerUp = (0, import_react17.useCallback)((e) => {
-    const target = domRef.current;
-    target.style.cursor = cursorRef.current;
-    target.releasePointerCapture(e.pointerId);
-    target.removeEventListener("pointermove", pointerMoveRef.current);
-    setDraggingDiff(null);
-    componentActions.columnShifts = null;
-    componentActions.draggingColumnId = null;
-    if (!didDragRef.current && column.computedSortable) {
-      column.toggleSort();
-    }
-    const dropIndex = currentDropIndexRef.current;
-    if (dropIndex != null && dropIndex !== columnIndex) {
-      const newOrder = moveXatY(computedColumnOrder, columnIndex, dropIndex > columnIndex ? dropIndex - 1 : dropIndex);
-      componentActions.columnOrder = newOrder;
-    }
-    breakpointsRef.current = [];
-    pointerMoveRef.current = null;
-    didDragRef.current = false;
-    initialClientPos.current = null;
-    currentDropIndexRef.current = null;
-  }, [column, columnIndex, componentActions, computedColumnOrder]);
+  }, [
+    columns,
+    column,
+    columnIndex,
+    columnsArray,
+    computedRemainingSpace,
+    computedColumnOrder
+  ]);
   return {
-    onPointerUp: column.computedDraggable ? onPointerUp : () => {
-    },
     onPointerDown: column.computedDraggable ? onPointerDown : () => {
     },
     dragging,
@@ -4249,19 +4347,19 @@ var import_react19 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
 var import_createRuntimeFn = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
-var CellCls = "_1eexc2a5 _16lm1iwm _16lm1iw13 _16lm1iw14 _16lm1iw2 _16lm1iw1c _16lm1iw1d";
-var HeaderCellContentRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zfob117 _16lm1iwr _16lm1iwt _16lm1iwm _16lm1iw13 _16lm1iw14", variantClassNames: { filtered: { false: "_12zfob118", true: "_12zfob119" } }, defaultVariants: {}, compoundVariants: [] });
+var CellCls = "_1eexc2a5 _16lm1iwn _16lm1iw14 _16lm1iw15 _16lm1iw2 _16lm1iw1d _16lm1iw1e";
+var HeaderCellContentRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zfob117 _16lm1iws _16lm1iwu _16lm1iwn _16lm1iw14 _16lm1iw15", variantClassNames: { filtered: { false: "_12zfob118", true: "_12zfob119" } }, defaultVariants: {}, compoundVariants: [] });
 var HeaderCellProxy = "_12zfob10";
-var HeaderCellRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zfob1h _16lm1iwn", variantClassNames: { rowActive: { false: "_12zfob1i", true: "_12zfob1j" }, zebra: { false: "_12zfob1k", even: "_12zfob1l", odd: "_12zfob1m" }, dragging: { true: "_12zfob1n", false: "_12zfob1o" }, first: { true: "_12zfob1p", false: "_12zfob1q" }, last: { true: "_12zfob1r", false: "_12zfob1s" }, groupByField: { true: "_12zfob1t", false: "_12zfob1u" }, firstInCategory: { true: "_12zfob1v", false: "_12zfob1w" }, lastInCategory: { true: "_12zfob1x", false: "_12zfob1y" }, pinned: { start: "_12zfob1z", end: "_12zfob110", false: "_12zfob111" }, filtered: { true: "_12zfob112", false: "_12zfob113" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob114"], [{ pinned: "end", firstInCategory: true }, "_12zfob115"], [{ pinned: false, lastInCategory: true }, "_12zfob116"]] });
-var HeaderClsRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zfob17 _16lm1iwn _16lm1iw2", variantClassNames: { pinned: { start: "_12zfob18", end: "_12zfob19", false: "_12zfob1a" }, virtualized: { true: "_12zfob1b", false: "_12zfob1c" }, overflow: { true: "_12zfob1d", false: "_12zfob1e" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1f"], [{ overflow: true, pinned: "end" }, "_12zfob1g"]] });
-var HeaderFilterCls = "_12zfob11c _16lm1iwm _16lm1iw13 _16lm1iw14 _16lm1iw1";
-var HeaderFilterEditorCls = "_16lm1iwt _16lm1iwr";
-var HeaderGroupCls = "_12zfob11b _16lm1iwm _16lm1iw13 _16lm1iw14";
+var HeaderCellRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zfob1h _16lm1iwo", variantClassNames: { rowActive: { false: "_12zfob1i", true: "_12zfob1j" }, zebra: { false: "_12zfob1k", even: "_12zfob1l", odd: "_12zfob1m" }, dragging: { true: "_12zfob1n", false: "_12zfob1o" }, first: { true: "_12zfob1p", false: "_12zfob1q" }, last: { true: "_12zfob1r", false: "_12zfob1s" }, groupByField: { true: "_12zfob1t", false: "_12zfob1u" }, firstInCategory: { true: "_12zfob1v", false: "_12zfob1w" }, lastInCategory: { true: "_12zfob1x", false: "_12zfob1y" }, pinned: { start: "_12zfob1z", end: "_12zfob110", false: "_12zfob111" }, filtered: { true: "_12zfob112", false: "_12zfob113" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob114"], [{ pinned: "end", firstInCategory: true }, "_12zfob115"], [{ pinned: false, lastInCategory: true }, "_12zfob116"]] });
+var HeaderClsRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zfob17 _16lm1iwo _16lm1iw2", variantClassNames: { pinned: { start: "_12zfob18", end: "_12zfob19", false: "_12zfob1a" }, virtualized: { true: "_12zfob1b", false: "_12zfob1c" }, overflow: { true: "_12zfob1d", false: "_12zfob1e" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1f"], [{ overflow: true, pinned: "end" }, "_12zfob1g"]] });
+var HeaderFilterCls = "_12zfob11c _16lm1iwn _16lm1iw14 _16lm1iw15 _16lm1iw1";
+var HeaderFilterEditorCls = "_16lm1iwu _16lm1iws";
+var HeaderGroupCls = "_12zfob11b _16lm1iwn _16lm1iw14 _16lm1iw15";
 var HeaderScrollbarPlaceholderCls = "_12zfob16 _16lm1iw2";
 var HeaderSortIconCls = "_16lm1iw1";
 var HeaderSortIconIndexCls = "_12zfob15";
 var HeaderSortIconRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "", variantClassNames: { align: { start: "_12zfob12", center: "_12zfob13", end: "_12zfob14" } }, defaultVariants: {}, compoundVariants: [] });
-var HeaderWrapperCls = "_12zfob11a _16lm1iw19 _16lm1iw1 _16lm1iwm _16lm1iw13";
+var HeaderWrapperCls = "_12zfob11a _16lm1iw1a _16lm1iw1 _16lm1iwn _16lm1iw14";
 
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
 var defaultLineStyle = {
@@ -4348,20 +4446,20 @@ var useInfiniteTableState = () => {
 // src/components/InfiniteTable/components/cell.css.ts
 var import_createRuntimeFn2 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var CellClsVariants = { shifting: "_1eexc2a3", dragging: "_1eexc2a4" };
-var ColumnCellCls = "_1eexc2a5 _16lm1iwm _16lm1iw13 _16lm1iw14 _16lm1iw2 _16lm1iw1c _16lm1iw1d";
+var ColumnCellCls = "_1eexc2a5 _16lm1iwn _16lm1iw14 _16lm1iw15 _16lm1iw2 _16lm1iw1d _16lm1iw1e";
 var ColumnCellRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1eexc2a7", variantClassNames: { dragging: { false: "_1eexc2a8", true: "_1eexc2a9" }, rowActive: { false: "_1eexc2aa", true: "_1eexc2ab" }, zebra: { false: "_1eexc2ac", even: "_1eexc2ad", odd: "_1eexc2ae" }, first: { true: "_1eexc2af", false: "_1eexc2ag" }, last: { true: "_1eexc2ah", false: "_1eexc2ai" }, groupByField: { true: "_1eexc2aj", false: "_1eexc2ak" }, firstInCategory: { true: "_1eexc2al", false: "_1eexc2am" }, lastInCategory: { true: "_1eexc2an", false: "_1eexc2ao" }, pinned: { start: "_1eexc2ap", end: "_1eexc2aq", false: "_1eexc2ar" }, filtered: { true: "_1eexc2as", false: "_1eexc2at" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2au"], [{ pinned: "end", firstInCategory: true }, "_1eexc2av"]] });
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
 var { rootClassName: rootClassName5 } = internalProps;
 var InfiniteTableCellClassName = `${rootClassName5}Cell`;
 var InfiniteTableCellContentClassName = `${rootClassName5}Cell_content`;
+var columnWidthAtIndex2 = stripVar(InternalVars.columnWidthAtIndex);
 function InfiniteTableCellFn(props) {
   var _b, _c, _d;
   const _a = props, {
     cssEllipsis = true,
     virtualized = true,
     skipColumnShifting = false,
-    offsetProperty = "left",
     contentStyle,
     column,
     domRef,
@@ -4369,7 +4467,6 @@ function InfiniteTableCellFn(props) {
     contentClassName,
     afterChildren,
     beforeChildren,
-    offset,
     cellType,
     cssPosition: _cssPosition,
     renderChildren
@@ -4377,7 +4474,6 @@ function InfiniteTableCellFn(props) {
     "cssEllipsis",
     "virtualized",
     "skipColumnShifting",
-    "offsetProperty",
     "contentStyle",
     "column",
     "domRef",
@@ -4385,7 +4481,6 @@ function InfiniteTableCellFn(props) {
     "contentClassName",
     "afterChildren",
     "beforeChildren",
-    "offset",
     "cellType",
     "cssPosition",
     "renderChildren"
@@ -4394,10 +4489,10 @@ function InfiniteTableCellFn(props) {
   const { columnShifts } = useInfiniteTableState();
   const shifting = !!columnShifts;
   const style = __spreadValues({
-    width
+    width: `var(${columnWidthAtIndex2}-${column.computedVisibleIndex})`
   }, domProps.style);
   if (!skipColumnShifting && columnShifts && columnShifts[column.computedVisibleIndex]) {
-    const shiftLeft = columnShifts[column.computedVisibleIndex] + (offset != null ? offset : 0);
+    const shiftLeft = columnShifts[column.computedVisibleIndex];
     if (virtualized) {
       style.left = shiftLeft;
     } else {
@@ -4479,10 +4574,545 @@ function InfiniteTableColumnHeaderFilterEmpty() {
   });
 }
 
-// src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
-var InfiniteTableHeaderCellContext = React20.createContext(null);
+// src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
+var React21 = __toModule(require("react"));
+var import_react23 = __toModule(require("react"));
+
+// src/components/flexbox/index.ts
+var computeFlex = (params) => {
+  const {
+    availableSize,
+    items,
+    minSize: defaultMinSize,
+    maxSize: defaultMaxSize
+  } = params;
+  if (availableSize < 0) {
+    throw "The provided availableSize cannot be negative!";
+  }
+  let totalFixedSize = 0;
+  let totalFlex = 0;
+  let totalFlexCount = 0;
+  const minSizes = [];
+  const maxSizes = [];
+  items.forEach((item, i) => {
+    var _a, _b, _c, _d, _e;
+    let maxSize = (_b = (_a = item.maxSize) != null ? _a : defaultMaxSize) != null ? _b : void 0;
+    let minSize = (_d = (_c = item.minSize) != null ? _c : defaultMinSize) != null ? _d : void 0;
+    minSizes.push(minSize);
+    maxSizes.push(maxSize);
+    if (item.size != null) {
+      if (maxSize != null && item.size > maxSize) {
+        item.size = maxSize;
+      }
+      if (minSize != null && item.size < minSize) {
+        item.size = minSize;
+      }
+    }
+    const itemFlex = item.flex == 0 ? null : item.flex;
+    if (item.size == null && itemFlex == null) {
+      throw `Items must specify either a size or a flex property. Item at index ${i} doesn't have either of those.`;
+    }
+    if (itemFlex != null) {
+      totalFlexCount += 1;
+    }
+    totalFlex += itemFlex != null ? itemFlex : 0;
+    totalFixedSize += (_e = item.size) != null ? _e : 0;
+  });
+  let availableSizeForFlex = params.computeSpecialSpaceDistribution ? Math.max(availableSize, 0) : Math.max(availableSize - totalFixedSize, 0);
+  let sizePerFlex = availableSizeForFlex / totalFlex;
+  let maxxedFlexItems = {};
+  let minnedFlexItems = {};
+  let constrainedCount = 0;
+  items.forEach((item, index) => {
+    var _a, _b, _c, _d;
+    if (item.flex != null) {
+      const approxFlexSize = sizePerFlex * item.flex;
+      let maxSize = (_b = (_a = item.maxSize) != null ? _a : defaultMaxSize) != null ? _b : void 0;
+      let minSize = (_d = (_c = item.minSize) != null ? _c : defaultMinSize) != null ? _d : void 0;
+      let constrained = false;
+      let substractSize = 0;
+      if (maxSize != null && approxFlexSize > maxSize) {
+        maxxedFlexItems[index] = true;
+        constrained = true;
+        substractSize = maxSize;
+      }
+      if (minSize != null && approxFlexSize < minSize) {
+        minnedFlexItems[index] = true;
+        constrained = true;
+        substractSize = minSize;
+      }
+      if (constrained) {
+        constrainedCount += 1;
+        totalFlexCount -= 1;
+        totalFlex -= item.flex;
+        availableSizeForFlex -= substractSize;
+      }
+    }
+  });
+  if (constrainedCount) {
+    sizePerFlex = availableSizeForFlex / totalFlex;
+  }
+  let flexSizes = [];
+  let currentFlexCount = 0;
+  let remainingSizeForFlex = availableSizeForFlex;
+  let remainingFlex = totalFlex;
+  let totalTakenSize = 0;
+  let flexSizeSum = 0;
+  const computedSizes = [];
+  const resultItems = items.map((item, index) => {
+    var _a, _b, _c, _d, _e;
+    const sizedItem = __spreadValues({}, item);
+    let maxSize = (_b = (_a = item.maxSize) != null ? _a : defaultMaxSize) != null ? _b : void 0;
+    let minSize = (_d = (_c = item.minSize) != null ? _c : defaultMinSize) != null ? _d : void 0;
+    let flexSize = 0;
+    const maxxed = maxxedFlexItems[index];
+    const minned = minnedFlexItems[index];
+    const constrained = maxxed || minned;
+    let computedSize = (_e = item.size) != null ? _e : 0;
+    if (item.flex != null) {
+      if (constrained) {
+        if (minned) {
+          flexSize = minSize;
+        }
+        if (maxxed) {
+          flexSize = maxSize;
+        }
+      } else {
+        currentFlexCount += 1;
+        const constrain = (size) => {
+          if (maxSize != null && size > maxSize) {
+            size = maxSize;
+          }
+          if (minSize != null && size < minSize) {
+            size = minSize;
+          }
+          return size;
+        };
+        if (currentFlexCount === totalFlexCount) {
+          flexSize = constrain(remainingSizeForFlex);
+        } else {
+          flexSize = constrain(Math.round(item.flex * sizePerFlex));
+          flexSizeSum += flexSize;
+          remainingSizeForFlex = availableSizeForFlex - flexSizeSum;
+          remainingFlex -= item.flex;
+          sizePerFlex = remainingSizeForFlex / remainingFlex;
+        }
+      }
+      computedSize = flexSize;
+      sizedItem.flexSize = flexSize;
+    }
+    flexSizes.push(flexSize);
+    computedSizes.push(computedSize);
+    sizedItem.computedSize = computedSize;
+    totalTakenSize += computedSize;
+    return sizedItem;
+  });
+  return {
+    items: resultItems,
+    flexSizes,
+    minSizes,
+    maxSizes,
+    computedSizes,
+    remainingSize: Math.round(availableSize - totalTakenSize)
+  };
+};
+function resizeClamp(value, min, max, direction) {
+  if (min != null && value <= min) {
+    return { value: min, clamped: "min", diff: (value - min) * direction };
+  }
+  if (max != null && value >= max) {
+    return { value: max, clamped: "max", diff: (max - value) * direction };
+  }
+  return { value, clamped: false, diff: 0 };
+}
+var computeResize = (params) => {
+  const { availableSize, reservedWidth = 0 } = params;
+  const columnSizing = Object.keys(params.columnSizing).reduce((acc, key) => {
+    acc[key] = __spreadValues({}, params.columnSizing[key]);
+    return acc;
+  }, {});
+  if (availableSize < 0) {
+    throw "The provided availableSize cannot be negative!";
+  }
+  let dragHandleOffset = params.dragHandleOffset;
+  const firstIndex = params.dragHandlePositionAfter;
+  const secondIndex = params.dragHandlePositionAfter + 1;
+  const firstItem = params.items[firstIndex];
+  const secondItem = params.items[secondIndex];
+  const firstId = firstItem.id;
+  const secondId = secondItem == null ? void 0 : secondItem.id;
+  const firstSize = firstItem.computedWidth;
+  const firstMinSize = firstItem.computedMinWidth;
+  const firstMaxSize = firstItem.computedMaxWidth;
+  const firstPropertyToAdjust = firstItem.computedFlex ? "flex" : "width";
+  const secondSize = secondItem == null ? void 0 : secondItem.computedWidth;
+  const secondMinSize = secondItem == null ? void 0 : secondItem.computedMinWidth;
+  const secondMaxSize = secondItem == null ? void 0 : secondItem.computedMaxWidth;
+  const secondPropertyToAdjust = (secondItem == null ? void 0 : secondItem.computedFlex) ? "flex" : "width";
+  let maxReached = false;
+  let minReached = false;
+  const direction = dragHandleOffset > 0 ? 1 : -1;
+  let {
+    value: firstAdjustedSize,
+    clamped: firstClamped,
+    diff: firstDiff
+  } = resizeClamp(firstSize + dragHandleOffset, firstMinSize, firstMaxSize, direction);
+  if (params.shareSpaceOnResize) {
+    if (secondItem == null) {
+      columnSizing[firstId] = __spreadProps(__spreadValues({}, columnSizing[firstId]), {
+        [firstPropertyToAdjust]: firstAdjustedSize
+      });
+      minReached = firstClamped === "min";
+      maxReached = firstClamped === "max";
+      const adjustedDiff2 = firstAdjustedSize - firstSize;
+      return {
+        adjustedDiff: adjustedDiff2,
+        reservedWidth,
+        columnSizing,
+        minReached,
+        maxReached,
+        constrained: minReached || maxReached
+      };
+    }
+    let {
+      value: secondAdjustedSize,
+      clamped: secondClamped,
+      diff: secondDiff
+    } = resizeClamp(secondSize - dragHandleOffset, secondMinSize, secondMaxSize, direction);
+    if (firstClamped && secondClamped) {
+      if (Math.abs(firstDiff) > Math.abs(secondDiff)) {
+        secondClamped = false;
+      } else {
+        firstClamped = false;
+      }
+    }
+    if (!firstClamped && !secondClamped) {
+    } else if (firstClamped) {
+      const clampResultForSecond = resizeClamp(secondSize - dragHandleOffset - firstDiff, secondMinSize, secondMaxSize, direction);
+      secondAdjustedSize = clampResultForSecond.value;
+      secondClamped = clampResultForSecond.clamped;
+      secondDiff = clampResultForSecond.diff;
+    } else if (secondClamped) {
+      const clampResultForFirst = resizeClamp(firstSize + dragHandleOffset + secondDiff, firstMinSize, firstMaxSize, direction);
+      firstAdjustedSize = clampResultForFirst.value;
+      firstClamped = clampResultForFirst.clamped;
+      firstDiff = clampResultForFirst.diff;
+    }
+    columnSizing[firstId] = __spreadProps(__spreadValues({}, columnSizing[firstId]), {
+      [firstPropertyToAdjust]: firstAdjustedSize
+    });
+    columnSizing[secondId] = __spreadProps(__spreadValues({}, columnSizing[secondId]), {
+      [secondPropertyToAdjust]: secondAdjustedSize
+    });
+    minReached = firstClamped === "min" || secondClamped === "min";
+    maxReached = firstClamped === "max" || secondClamped === "max";
+  } else {
+    columnSizing[firstId] = __spreadProps(__spreadValues({}, columnSizing[firstId]), {
+      [firstPropertyToAdjust]: firstAdjustedSize
+    });
+    minReached = firstClamped === "min";
+    maxReached = firstClamped === "max";
+  }
+  const adjustedDiff = firstAdjustedSize - firstSize;
+  return {
+    adjustedDiff,
+    reservedWidth: !params.shareSpaceOnResize ? reservedWidth - adjustedDiff : reservedWidth,
+    columnSizing,
+    minReached,
+    maxReached,
+    constrained: minReached || maxReached
+  };
+};
+function sum(a, b) {
+  return a + b;
+}
+function cloneColumnSizing(columnSizing) {
+  const newColumnSizing = Object.keys(columnSizing).reduce((acc, key) => {
+    acc[key] = __spreadValues({}, columnSizing[key]);
+    return acc;
+  }, {});
+  return newColumnSizing;
+}
+var computeGroupResize = (params) => {
+  const { availableSize, reservedWidth = 0 } = params;
+  const columnSizing = Object.keys(params.columnSizing).reduce((acc, key) => {
+    acc[key] = __spreadValues({}, params.columnSizing[key]);
+    return acc;
+  }, {});
+  if (availableSize < 0) {
+    throw "The provided availableSize cannot be negative!";
+  }
+  let dragHandleOffset = params.dragHandleOffset;
+  const beforeIndexes = [...new Array(params.columnGroupSize)].map((_, index) => params.dragHandlePositionAfter - index).reverse();
+  const beforeItems = beforeIndexes.map((i) => params.items[i]);
+  const beforeSizes = beforeItems.map((item) => item.computedWidth);
+  const beforePropertiesToAdjust = beforeItems.map((item) => item.computedFlex ? "flex" : "width");
+  let unresizableWidth = 0;
+  const { computedSizes } = computeFlex({
+    items: beforeItems.map((item) => {
+      if (item.resizable === false) {
+        unresizableWidth += item.computedWidth;
+      }
+      return {
+        maxSize: item.computedMaxWidth,
+        minSize: item.computedMinWidth,
+        flex: item.resizable ? item.computedWidth : null,
+        size: 0
+      };
+    }),
+    computeSpecialSpaceDistribution: true,
+    availableSize: Math.max(beforeSizes.reduce(sum, 0) + dragHandleOffset - unresizableWidth, 0)
+  });
+  const diffsForEachItem = beforeItems.map((item, index) => {
+    return computedSizes[index] - item.computedWidth;
+  });
+  let groupMinReached = true;
+  let groupMaxReached = true;
+  let groupConstrained = true;
+  const adjustedDiffs = [];
+  diffsForEachItem.forEach((diff, i) => {
+    const item = beforeItems[i];
+    if (!item.resizable) {
+      adjustedDiffs.push(0);
+      return;
+    }
+    const propertyToAdjust = beforePropertiesToAdjust[i];
+    const itemSize = beforeSizes[i];
+    const currentColumnSizing = cloneColumnSizing(columnSizing);
+    const { maxReached, minReached, constrained, adjustedDiff: adjustedDiff2 } = computeResize({
+      availableSize: params.availableSize,
+      reservedWidth: params.reservedWidth,
+      dragHandleOffset: diff,
+      dragHandlePositionAfter: beforeIndexes[i],
+      shareSpaceOnResize: false,
+      items: params.items,
+      columnSizing: currentColumnSizing
+    });
+    columnSizing[item.id] = __spreadProps(__spreadValues({}, currentColumnSizing[item.id]), {
+      [propertyToAdjust]: itemSize + adjustedDiff2
+    });
+    adjustedDiffs.push(adjustedDiff2);
+    if (!maxReached) {
+      groupMaxReached = false;
+    }
+    if (!minReached) {
+      groupMinReached = false;
+    }
+    if (!constrained) {
+      groupConstrained = false;
+    }
+  });
+  const adjustedDiff = adjustedDiffs.reduce(sum, 0);
+  return {
+    minReached: groupMinReached,
+    maxReached: groupMaxReached,
+    constrained: groupConstrained,
+    adjustedDiffs,
+    adjustedDiff,
+    columnSizing,
+    reservedWidth: reservedWidth - adjustedDiff
+  };
+};
+
+// src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/index.tsx
+var import_react22 = __toModule(require("react"));
+
+// src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/columnResizer.ts
+function getColumnResizer(colIndex, {
+  columns,
+  shareSpaceOnResize,
+  domRef
+}) {
+  const column = columns[colIndex];
+  return {
+    resize(diff) {
+      setInfiniteColumnWidth(colIndex, column.computedWidth + diff, domRef.current);
+      const nextColIndex = colIndex + 1;
+      if (shareSpaceOnResize) {
+        const nextColumn = columns[nextColIndex];
+        if (!nextColumn) {
+          return;
+        }
+        setInfiniteColumnWidth(nextColIndex, nextColumn.computedWidth - diff, domRef.current);
+        setInfiniteColumnOffset(nextColIndex, nextColumn.computedOffset + diff, domRef.current);
+        return;
+      }
+      for (let i = nextColIndex, len = columns.length; i < len; i++) {
+        setInfiniteColumnOffset(i, columns[i].computedOffset + diff, domRef.current);
+      }
+    }
+  };
+}
+function getColumnGroupResizer(colIndexes, config) {
+  const lastColIndex = colIndexes[colIndexes.length - 1];
+  return {
+    resize(diffs) {
+      const { columns, domRef } = config;
+      let offset = columns[colIndexes[0]].computedOffset;
+      let diffSum = 0;
+      const node = domRef.current;
+      diffs.forEach((diff, i) => {
+        diffSum += diff;
+        const colIndex = colIndexes[i];
+        const column = columns[colIndex];
+        const newWidth = column.computedWidth + diff;
+        setInfiniteColumnWidth(colIndex, newWidth, node);
+        if (offset) {
+          setInfiniteColumnOffset(colIndex, offset, node);
+        }
+        offset += newWidth;
+      });
+      for (let i = lastColIndex + 1; i < columns.length; i++) {
+        setInfiniteColumnOffset(i, columns[i].computedOffset + diffSum, node);
+      }
+    }
+  };
+}
+
+// src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/ResizeHandle.css.ts
+var import_createRuntimeFn3 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var ResizeHandleCls = "zneyzh0 _16lm1iw2 _16lm1iwv _16lm1iw11 _16lm1iwz _16lm1iwe";
+var ResizeHandleDraggerClsRecipe = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "zneyzh1 _16lm1iw2 _16lm1iwv _16lm1iwz", variantClassNames: { constrained: { false: "zneyzh2", true: "zneyzh3" } }, defaultVariants: {}, compoundVariants: [] });
+
+// src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/index.tsx
 var { rootClassName: rootClassName7 } = internalProps;
-var InfiniteTableHeaderCellClassName = `${rootClassName7}HeaderCell`;
+var InfiniteTableHeaderCellResizeHandleCls = `${rootClassName7}HeaderCell_ResizeHandle`;
+function ResizeHandleFn(props) {
+  const domRef = (0, import_react22.useRef)(null);
+  const [constrained, setConstrained] = (0, import_react22.useState)(false);
+  const constrainedRef = (0, import_react22.useRef)(constrained);
+  constrainedRef.current = constrained;
+  const onPointerDown = (e) => {
+    e.stopPropagation();
+    const shareSpaceOnResize = !!e.shiftKey;
+    const pointerId = e.pointerId;
+    const initialX = e.clientX;
+    const target = e.target;
+    target.setPointerCapture(pointerId);
+    const resizer = getColumnResizer(props.columnIndex, {
+      columns: props.columns,
+      shareSpaceOnResize,
+      domRef
+    });
+    const resizeDiff = (diff) => {
+      const { adjustedDiff, constrained: constrained2 } = props.computeResize({
+        diff,
+        shareSpaceOnResize
+      });
+      if (constrainedRef.current !== constrained2) {
+        setConstrained(constrained2);
+      }
+      resizer.resize(adjustedDiff);
+      return adjustedDiff;
+    };
+    const onPointerMove = (e2) => {
+      resizeDiff(Math.round(e2.clientX - initialX));
+    };
+    const onPointerUp = (e2) => {
+      target.releasePointerCapture(pointerId);
+      target.removeEventListener("pointermove", onPointerMove);
+      target.removeEventListener("pointerup", onPointerUp);
+      const diff = Math.round(e2.clientX - initialX);
+      const adjustedDiff = resizeDiff(diff);
+      props.onResize({ diff: adjustedDiff, shareSpaceOnResize });
+    };
+    target.addEventListener("pointermove", onPointerMove);
+    target.addEventListener("pointerup", onPointerUp);
+  };
+  return /* @__PURE__ */ import_react22.default.createElement("div", {
+    ref: domRef,
+    className: `${InfiniteTableHeaderCellResizeHandleCls} ${ResizeHandleCls}`,
+    onPointerDown
+  }, /* @__PURE__ */ import_react22.default.createElement("div", {
+    className: ResizeHandleDraggerClsRecipe({
+      constrained
+    })
+  }));
+}
+var ResizeHandle = import_react22.default.memo(ResizeHandleFn);
+
+// src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
+function useColumnResizeHandle(column) {
+  const {
+    computed: { computedVisibleColumns },
+    componentState: { domRef },
+    getState,
+    getComputed,
+    componentActions
+  } = useInfiniteTable();
+  const computeResizeForDiff = (0, import_react23.useCallback)(({
+    diff,
+    shareSpaceOnResize
+  }) => {
+    const state = getState();
+    const { columnSizing, viewportReservedWidth, bodySize, activeCellIndex } = state;
+    const columns = getComputed().computedVisibleColumns;
+    let atLeastOneFlex = false;
+    const columnSizingWithFlex = columns.reduce((acc, col) => {
+      if (col.computedFlex) {
+        acc[col.id] = __spreadProps(__spreadValues({}, columnSizing[col.id]), { flex: col.computedWidth });
+        atLeastOneFlex = true;
+      }
+      return acc;
+    }, {});
+    const columnSizingForResize = atLeastOneFlex ? __spreadValues(__spreadValues({}, columnSizing), columnSizingWithFlex) : columnSizing;
+    const result = computeResize({
+      shareSpaceOnResize,
+      availableSize: bodySize.width,
+      reservedWidth: viewportReservedWidth || 0,
+      dragHandleOffset: diff,
+      dragHandlePositionAfter: column.computedVisibleIndex,
+      columnSizing: columnSizingForResize,
+      items: columns.map((c) => {
+        return {
+          id: c.id,
+          computedFlex: c.computedFlex,
+          computedWidth: c.computedWidth,
+          computedMinWidth: c.computedMinWidth,
+          computedMaxWidth: c.computedMaxWidth
+        };
+      })
+    });
+    if (activeCellIndex && activeCellIndex[1] >= column.computedVisibleIndex) {
+      const activeColumn = columns[activeCellIndex[1]];
+      const currentColumn = columns[column.computedVisibleIndex];
+      if (activeCellIndex[1] === currentColumn.computedVisibleIndex) {
+        setInfiniteColumnWidth(currentColumn.computedVisibleIndex, currentColumn.computedWidth + result.adjustedDiff, domRef.current);
+      } else if (activeColumn) {
+        setInfiniteColumnOffset(activeColumn.computedVisibleIndex, activeColumn.computedOffset + result.adjustedDiff, domRef.current);
+      }
+      if (shareSpaceOnResize && activeCellIndex[1] === currentColumn.computedVisibleIndex + 1 && activeColumn) {
+        setInfiniteColumnWidth(activeColumn.computedVisibleIndex, activeColumn.computedWidth - result.adjustedDiff, domRef.current);
+      }
+    }
+    return result;
+  }, []);
+  const onColumnResize = (0, import_react23.useCallback)(({
+    diff,
+    shareSpaceOnResize
+  }) => {
+    const { columnSizing, reservedWidth } = computeResizeForDiff({
+      diff,
+      shareSpaceOnResize
+    });
+    if (!shareSpaceOnResize) {
+      componentActions.viewportReservedWidth = reservedWidth;
+    }
+    componentActions.columnSizing = columnSizing;
+  }, []);
+  const resizeHandle = column.computedResizable ? /* @__PURE__ */ React21.createElement(ResizeHandle, {
+    columns: computedVisibleColumns,
+    columnIndex: column.computedVisibleIndex,
+    computeResize: computeResizeForDiff,
+    onResize: onColumnResize
+  }) : null;
+  return resizeHandle;
+}
+
+// src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
+var InfiniteTableHeaderCellContext = React22.createContext(null);
+var { rootClassName: rootClassName8 } = internalProps;
+var InfiniteTableHeaderCellClassName = `${rootClassName8}HeaderCell`;
 function InfiniteTableHeaderCell(props) {
   var _a, _b, _c, _d, _e;
   const column = props.column;
@@ -4490,13 +5120,13 @@ function InfiniteTableHeaderCell(props) {
   const { onResize, height, width, headerOptions } = props;
   const sortInfo = column.computedSortInfo;
   let header = column.header;
-  const ref = (0, import_react22.useCallback)((node) => {
+  const ref = (0, import_react24.useCallback)((node) => {
     var _a2;
     domRef.current = node;
     (_a2 = props.domRef) == null ? void 0 : _a2.call(props, node);
   }, [props.domRef]);
   const alwaysShow = headerOptions.alwaysReserveSpaceForSortIcon;
-  const sortTool = column.computedSorted || alwaysShow ? /* @__PURE__ */ React20.createElement(SortIcon, {
+  const sortTool = column.computedSorted || alwaysShow ? /* @__PURE__ */ React22.createElement(SortIcon, {
     index: column.computedMultiSort ? column.computedSortIndex + 1 : void 0,
     className: `${InfiniteTableHeaderCellClassName}__sort-icon ${HeaderSortIconCls} ${HeaderSortIconRecipe({
       align: column.align || "start"
@@ -4513,15 +5143,15 @@ function InfiniteTableHeaderCell(props) {
   const align = column.align || "start";
   const renderChildren = () => {
     if (header instanceof Function) {
-      header = /* @__PURE__ */ React20.createElement(RenderHookComponent, {
+      header = /* @__PURE__ */ React22.createElement(RenderHookComponent, {
         render: header,
         renderParam
       });
     }
     header = header != null ? header : column.name;
-    return /* @__PURE__ */ React20.createElement(React20.Fragment, null, align === "end" ? sortTool : null, header, align !== "end" ? sortTool : null);
+    return /* @__PURE__ */ React22.createElement(React22.Fragment, null, align === "end" ? sortTool : null, header, align !== "end" ? sortTool : null);
   };
-  const domRef = (0, import_react22.useRef)(null);
+  const domRef = (0, import_react24.useRef)(null);
   const {
     computed: {
       computedRemainingSpace,
@@ -4535,7 +5165,7 @@ function InfiniteTableHeaderCell(props) {
     getState: getDataSourceState,
     componentState: { filterDelay, filterTypes }
   } = useDataSourceContextValue();
-  (0, import_react22.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     let clearOnResize = null;
     const node = domRef.current;
     if (onResize && node) {
@@ -4548,7 +5178,7 @@ function InfiniteTableHeaderCell(props) {
   const style = {
     height
   };
-  const { onPointerDown, onPointerUp, dragging, draggingDiff, proxyOffset } = useColumnPointerEvents({
+  const { onPointerDown, dragging, draggingDiff, proxyOffset } = useColumnPointerEvents({
     computedRemainingSpace,
     columnId: column.id,
     domRef,
@@ -4556,7 +5186,7 @@ function InfiniteTableHeaderCell(props) {
   });
   let draggingProxy = null;
   if (dragging) {
-    draggingProxy = /* @__PURE__ */ React20.createElement("div", {
+    draggingProxy = /* @__PURE__ */ React22.createElement("div", {
       className: `${InfiniteTableHeaderCellClassName}Proxy ${HeaderCellProxy}`,
       style: {
         position: "absolute",
@@ -4573,7 +5203,7 @@ function InfiniteTableHeaderCell(props) {
   const contentRecipeVariants = {
     filtered: column.computedFiltered
   };
-  const setFilterValue = (0, import_react22.useCallback)((filterValue) => {
+  const setFilterValue = (0, import_react24.useCallback)((filterValue) => {
     var _a2;
     const state = getDataSourceState();
     let newFilterValue = (_a2 = state.filterValue) != null ? _a2 : [];
@@ -4597,7 +5227,7 @@ function InfiniteTableHeaderCell(props) {
     });
     dataSourceActions.filterValue = newFilterValue;
   }, [column, filterTypes]);
-  const debouncedOnFilterValueChange = React20.useMemo(() => {
+  const debouncedOnFilterValueChange = React22.useMemo(() => {
     const fn = (filterValue) => {
       let newFilterValueForColumn;
       if (column.computedFilterValue) {
@@ -4634,10 +5264,10 @@ function InfiniteTableHeaderCell(props) {
   ]);
   const filterType = column.computedFilterType;
   const FilterEditor = filterEditors[filterType] || defaultFilterEditors[filterType] || StringFilterEditor;
-  const resizeHandle = null;
-  return /* @__PURE__ */ React20.createElement(ContextProvider, {
+  const resizeHandle = useColumnResizeHandle(column);
+  return /* @__PURE__ */ React22.createElement(ContextProvider, {
     value: renderParam
-  }, /* @__PURE__ */ React20.createElement(InfiniteTableCell, {
+  }, /* @__PURE__ */ React22.createElement(InfiniteTableCell, {
     domRef: ref,
     cellType: "header",
     column,
@@ -4647,12 +5277,11 @@ function InfiniteTableHeaderCell(props) {
     style,
     width,
     onPointerDown,
-    onPointerUp,
     contentClassName: join(HeaderCellContentRecipe(contentRecipeVariants), justifyContent[(_c = column.align) != null ? _c : "start"]),
     contentStyle: showColumnFilters ? { height: height / 2 } : void 0,
     className: join(InfiniteTableHeaderCellClassName, userSelect.none, column.computedSortable ? cursor.pointer : "", useCellClassName(column, [InfiniteTableHeaderCellClassName, InfiniteTableCellClassName], HeaderCellRecipe, { dragging, zebra: false, rowActive: false }), CellCls),
     cssEllipsis: (_e = (_d = column.headerCssEllipsis) != null ? _d : column.cssEllipsis) != null ? _e : true,
-    afterChildren: /* @__PURE__ */ React20.createElement(React20.Fragment, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React20.createElement(InfiniteTableColumnHeaderFilter, {
+    afterChildren: /* @__PURE__ */ React22.createElement(React22.Fragment, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React22.createElement(InfiniteTableColumnHeaderFilter, {
       filterEditor: FilterEditor,
       filterTypes,
       onChange: debouncedOnFilterValueChange,
@@ -4660,17 +5289,17 @@ function InfiniteTableHeaderCell(props) {
       columnLabel: column.field || column.name || column.id,
       columnFilterValue: column.computedFilterValue,
       columnHeaderHeight
-    }) : /* @__PURE__ */ React20.createElement(InfiniteTableColumnHeaderFilterEmpty, null) : null, resizeHandle),
+    }) : /* @__PURE__ */ React22.createElement(InfiniteTableColumnHeaderFilterEmpty, null) : null, resizeHandle),
     renderChildren
   }), draggingProxy);
 }
 function useInfiniteHeaderCell() {
-  const result = (0, import_react22.useContext)(InfiniteTableHeaderCellContext);
+  const result = (0, import_react24.useContext)(InfiniteTableHeaderCellContext);
   return result;
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
-var React23 = __toModule(require("react"));
+var React27 = __toModule(require("react"));
 
 // src/components/utils/getScrollbarWidth.ts
 var scrollbarWidth;
@@ -4756,7 +5385,7 @@ function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap, c
   let groupOffset = 0;
   map2.forEach((item) => {
     if (!item.ref.columnGroup) {
-      const itemWidth = item.type === "column" ? item.ref.computedWidth : item.columnItems.reduce((sum, col) => sum + col.ref.computedWidth, 0);
+      const itemWidth = item.type === "column" ? item.ref.computedWidth : item.columnItems.reduce((sum2, col) => sum2 + col.ref.computedWidth, 0);
       item.groupOffset = groupOffset;
       item.computedWidth = itemWidth;
       if (item.type === "group") {
@@ -4781,7 +5410,7 @@ function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap, c
 }
 function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
   items.forEach((item) => {
-    const itemWidth = item.type === "column" ? item.ref.computedWidth : item.columnItems.reduce((sum, col) => sum + col.ref.computedWidth, 0);
+    const itemWidth = item.type === "column" ? item.ref.computedWidth : item.columnItems.reduce((sum2, col) => sum2 + col.ref.computedWidth, 0);
     item.computedWidth = itemWidth;
     item.groupOffset = groupOffset;
     if (item.type === "group") {
@@ -4792,36 +5421,186 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
-var React22 = __toModule(require("react"));
-var import_react23 = __toModule(require("react"));
+var React26 = __toModule(require("react"));
+var import_react27 = __toModule(require("react"));
+
+// src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
+var React25 = __toModule(require("react"));
+
+// src/components/InfiniteTable/components/InfiniteTableHeader/useColumnGroupResizeHandle.tsx
+var React24 = __toModule(require("react"));
+var import_react26 = __toModule(require("react"));
+
+// src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/GroupResizeHandle.tsx
+var import_react25 = __toModule(require("react"));
+var { rootClassName: rootClassName9 } = internalProps;
+var InfiniteTableHeaderCellResizeHandleCls2 = `${rootClassName9}HeaderCell_ResizeHandle`;
+function GroupResizeHandleFn(props) {
+  const domRef = (0, import_react25.useRef)(null);
+  const [constrained, setConstrained] = (0, import_react25.useState)(false);
+  const constrainedRef = (0, import_react25.useRef)(constrained);
+  constrainedRef.current = constrained;
+  const onPointerDown = (e) => {
+    e.stopPropagation();
+    const pointerId = e.pointerId;
+    const initialX = e.clientX;
+    const target = e.target;
+    target.setPointerCapture(pointerId);
+    let initialMove = true;
+    const resizer = getColumnGroupResizer(props.groupColumns.map((c) => c.computedVisibleIndex), {
+      columns: props.columns,
+      domRef
+    });
+    const resizeDiff = (diff) => {
+      const { constrained: constrained2, adjustedDiffs, adjustedDiff } = props.computeResize(diff);
+      if (constrainedRef.current !== constrained2) {
+        setConstrained(constrained2);
+      }
+      resizer.resize(adjustedDiffs);
+      return adjustedDiff;
+    };
+    const onPointerMove = (e2) => {
+      if (initialMove) {
+        const maxDiff = props.groupColumns.reduce((diff, col) => {
+          return diff + col.computedWidth - col.computedMinWidth;
+        }, 0);
+        const currentSize = props.brain.getAvailableSize();
+        const newSize = {
+          width: currentSize.width + maxDiff,
+          height: currentSize.height
+        };
+        props.brain.setAvailableSize(newSize);
+        initialMove = false;
+      }
+      resizeDiff(Math.round(e2.clientX - initialX));
+    };
+    const onPointerUp = (e2) => {
+      target.releasePointerCapture(pointerId);
+      target.removeEventListener("pointermove", onPointerMove);
+      target.removeEventListener("pointerup", onPointerUp);
+      const diff = Math.round(e2.clientX - initialX);
+      const adjustedDiffs = resizeDiff(diff);
+      props.onResize(adjustedDiffs);
+    };
+    target.addEventListener("pointermove", onPointerMove);
+    target.addEventListener("pointerup", onPointerUp);
+  };
+  return /* @__PURE__ */ import_react25.default.createElement("div", {
+    ref: domRef,
+    className: `${InfiniteTableHeaderCellResizeHandleCls2} ${ResizeHandleCls}`,
+    onPointerDown
+  }, /* @__PURE__ */ import_react25.default.createElement("div", {
+    style: props.style,
+    className: ResizeHandleDraggerClsRecipe({
+      constrained
+    })
+  }));
+}
+var GroupResizeHandle = import_react25.default.memo(GroupResizeHandleFn);
+
+// src/components/InfiniteTable/components/InfiniteTableHeader/useColumnGroupResizeHandle.tsx
+function useColumnGroupResizeHandle(groupColumns, config) {
+  const { bodyBrain, groupHeight, columnGroup, columnGroupsMaxDepth } = config;
+  const {
+    computed: { computedVisibleColumns },
+    getState,
+    getComputed,
+    componentActions
+  } = useInfiniteTable();
+  const lastColumnInGroup = groupColumns[groupColumns.length - 1];
+  const computeResizeForDiff = (0, import_react26.useCallback)((diff) => {
+    const state = getState();
+    const { columnSizing, viewportReservedWidth, bodySize } = state;
+    const columns = getComputed().computedVisibleColumns;
+    let atLeastOneFlex = false;
+    const columnSizingWithFlex = columns.reduce((acc, col) => {
+      if (col.computedFlex) {
+        acc[col.id] = __spreadProps(__spreadValues({}, columnSizing[col.id]), { flex: col.computedWidth });
+        atLeastOneFlex = true;
+      }
+      return acc;
+    }, {});
+    const columnSizingForResize = atLeastOneFlex ? __spreadValues(__spreadValues({}, columnSizing), columnSizingWithFlex) : columnSizing;
+    const result = computeGroupResize({
+      availableSize: bodySize.width,
+      reservedWidth: viewportReservedWidth || 0,
+      dragHandleOffset: diff,
+      dragHandlePositionAfter: lastColumnInGroup.computedVisibleIndex,
+      columnSizing: columnSizingForResize,
+      columnGroupSize: groupColumns.length,
+      items: columns.map((c) => {
+        return {
+          id: c.id,
+          resizable: c.computedResizable,
+          computedFlex: c.computedFlex,
+          computedWidth: c.computedWidth,
+          computedMinWidth: c.computedMinWidth,
+          computedMaxWidth: c.computedMaxWidth
+        };
+      })
+    });
+    return result;
+  }, []);
+  const onColumnResize = (0, import_react26.useCallback)((diff) => {
+    const { columnSizing, reservedWidth } = computeResizeForDiff(diff);
+    componentActions.viewportReservedWidth = reservedWidth;
+    componentActions.columnSizing = columnSizing;
+  }, []);
+  const groupResizable = groupColumns.some((c) => c.computedResizable);
+  const resizeHandle = groupResizable ? /* @__PURE__ */ React24.createElement(GroupResizeHandle, {
+    brain: bodyBrain,
+    style: {
+      height: groupHeight * (columnGroupsMaxDepth - columnGroup.depth + 2)
+    },
+    columns: computedVisibleColumns,
+    groupColumns,
+    computeResize: computeResizeForDiff,
+    onResize: onColumnResize
+  }) : null;
+  return resizeHandle;
+}
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
-var React21 = __toModule(require("react"));
 var TableHeaderGroupClassName = `${rootClassName2}HeaderGroup`;
+var columnWidthAtIndex3 = stripVar(InternalVars.columnWidthAtIndex);
 function InfiniteTableHeaderGroup(props) {
-  const { columnGroup, height, width } = props;
+  const {
+    computed: { computedVisibleColumns }
+  } = useInfiniteTable();
+  const { columnGroup, height, columns, bodyBrain, columnGroupsMaxDepth } = props;
   let { header } = columnGroup;
   if (header instanceof Function) {
     header = header({
       columnGroup
     });
   }
-  return /* @__PURE__ */ React21.createElement("div", {
+  const handle = useColumnGroupResizeHandle(columns, {
+    bodyBrain,
+    groupHeight: height,
+    columnGroup,
+    columnGroupsMaxDepth
+  });
+  const firstColumn = columns[0];
+  const width = columns.length > 1 ? `calc( ` + columns.map((col) => `var(${columnWidthAtIndex3}-${col.computedVisibleIndex})`).join(" + ") + " )" : `var(${columnWidthAtIndex3}-${firstColumn.computedVisibleIndex})`;
+  const zIndex2 = computedVisibleColumns.length * 10 - firstColumn.computedVisibleIndex * 10 + height * (columnGroupsMaxDepth - columnGroup.depth + 2);
+  return /* @__PURE__ */ React25.createElement("div", {
     ref: props.domRef,
     "data-group-id": columnGroup.uniqueGroupId,
     className: join(HeaderGroupCls, TableHeaderGroupClassName),
-    style: { width, height }
-  }, /* @__PURE__ */ React21.createElement("div", {
+    style: { width, height },
+    "data-z-index": zIndex2
+  }, /* @__PURE__ */ React25.createElement("div", {
     className: join(`${TableHeaderGroupClassName}__header-content`, cssEllipsisClassName)
-  }, header));
+  }, header), handle);
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
-var { rootClassName: rootClassName8 } = internalProps;
-var TableHeaderClassName = `${rootClassName8}Header`;
+var { rootClassName: rootClassName10 } = internalProps;
+var TableHeaderClassName = `${rootClassName10}Header`;
 function InfiniteTableHeaderFn(props) {
   const {
-    brain,
+    bodyBrain,
+    headerBrain: brain,
     columns,
     style,
     className,
@@ -4834,7 +5613,7 @@ function InfiniteTableHeaderFn(props) {
     componentState: { headerBrain, headerOptions }
   } = useInfiniteTable();
   const { computedVisibleColumnsMap, showColumnFilters } = computed;
-  (0, import_react23.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     const onScroll = (scrollPosition) => {
       if (domRef.current) {
         domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
@@ -4843,7 +5622,7 @@ function InfiniteTableHeaderFn(props) {
     const removeOnScroll = brain.onScroll(onScroll);
     return removeOnScroll;
   }, [brain]);
-  const domRef = (0, import_react23.useRef)(null);
+  const domRef = (0, import_react27.useRef)(null);
   const headerCls = HeaderClsRecipe({
     overflow: false,
     virtualized: true
@@ -4853,7 +5632,7 @@ function InfiniteTableHeaderFn(props) {
     className: join(TableHeaderClassName, `${TableHeaderClassName}--virtualized`, className, headerCls),
     style: __spreadProps(__spreadValues({}, style), { height: columnHeaderHeight })
   };
-  const renderCell = (0, import_react23.useCallback)((params) => {
+  const renderCell = (0, import_react27.useCallback)((params) => {
     const {
       rowIndex,
       colIndex,
@@ -4878,7 +5657,9 @@ function InfiniteTableHeaderFn(props) {
         computedWidth: colGroupItem.computedWidth,
         groupOffset: colGroupItem.groupOffset
       });
-      return /* @__PURE__ */ React22.createElement(InfiniteTableHeaderGroup, {
+      return /* @__PURE__ */ React26.createElement(InfiniteTableHeaderGroup, {
+        bodyBrain,
+        columnGroupsMaxDepth,
         domRef: domRef2,
         columns: columns2,
         width: widthWithColspan,
@@ -4886,7 +5667,7 @@ function InfiniteTableHeaderFn(props) {
         columnGroup: computedColumnGroup
       });
     }
-    return /* @__PURE__ */ React22.createElement(InfiniteTableHeaderCell, {
+    return /* @__PURE__ */ React26.createElement(InfiniteTableHeaderCell, {
       domRef: domRef2,
       column,
       headerOptions,
@@ -4902,17 +5683,18 @@ function InfiniteTableHeaderFn(props) {
     columnGroupsMaxDepth,
     showColumnFilters
   ]);
-  return /* @__PURE__ */ React22.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React22.createElement(RawTable, {
+  return /* @__PURE__ */ React26.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React26.createElement(RawTable, {
+    name: "header",
     renderCell,
     brain: headerBrain,
     cellHoverClassNames: []
   }));
 }
-var InfiniteTableHeader = React22.memo(InfiniteTableHeaderFn);
+var InfiniteTableHeader = React26.memo(InfiniteTableHeaderFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
 function TableHeaderWrapper(props) {
-  const { brain, scrollbars } = props;
+  const { headerBrain, bodyBrain, scrollbars } = props;
   const tableContextValue = useInfiniteTable();
   const {
     computedPinnedStartColumns,
@@ -4931,13 +5713,13 @@ function TableHeaderWrapper(props) {
   } = tableContextValue;
   const rows = !computedColumnGroups || !computedColumnGroups.size ? 1 : columnGroupsMaxDepth + 2;
   const height = rows * columnHeaderHeight + (showColumnFilters ? columnHeaderHeight : 0);
-  const columnAndGroupTreeInfo = React23.useMemo(() => {
+  const columnAndGroupTreeInfo = React27.useMemo(() => {
     if (!computedColumnGroups || !computedColumnGroups.size) {
       return void 0;
     }
     return buildColumnAndGroupTree(computedVisibleColumns, computedColumnGroups, columnGroupsDepthsMap, columnGroupsMaxDepth);
   }, [computedVisibleColumns, computedColumnGroups, columnGroupsDepthsMap]);
-  const cellspan = React23.useCallback(({ rowIndex, colIndex }) => {
+  const cellspan = React27.useCallback(({ rowIndex, colIndex }) => {
     const column = computedVisibleColumns[colIndex];
     const rowspan2 = 1;
     const colspan2 = 1;
@@ -4970,12 +5752,12 @@ function TableHeaderWrapper(props) {
     rows,
     columnGroupsDepthsMap
   ]);
-  const rowspan = React23.useCallback(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).rowspan, [cellspan]);
-  const colspan = React23.useCallback(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).colspan, [cellspan]);
-  const rowHeight = React23.useCallback((index) => {
+  const rowspan = React27.useCallback(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).rowspan, [cellspan]);
+  const colspan = React27.useCallback(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).colspan, [cellspan]);
+  const rowHeight = React27.useCallback((index) => {
     return showColumnFilters ? index < rows - 1 ? columnHeaderHeight : 2 * columnHeaderHeight : columnHeaderHeight;
   }, [rows, showColumnFilters, columnHeaderHeight]);
-  useMatrixBrain(brain, {
+  useMatrixBrain(headerBrain, {
     colWidth: columnSize,
     rowHeight,
     rows,
@@ -4987,21 +5769,22 @@ function TableHeaderWrapper(props) {
     fixedColsEnd: computedPinnedEndColumns.length,
     fixedColsStart: computedPinnedStartColumns.length
   });
-  const header = /* @__PURE__ */ React23.createElement(InfiniteTableHeader, {
+  const header = /* @__PURE__ */ React27.createElement(InfiniteTableHeader, {
     columns: computedVisibleColumns,
-    brain,
+    headerBrain,
+    bodyBrain,
     columnHeaderHeight: height,
     columnGroupsMaxDepth,
     columnAndGroupTreeInfo
   });
-  const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ React23.createElement("div", {
+  const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ React27.createElement("div", {
     className: HeaderScrollbarPlaceholderCls,
     style: {
       zIndex: 1e3,
       width: getScrollbarWidth()
     }
   }) : null;
-  return /* @__PURE__ */ React23.createElement("div", {
+  return /* @__PURE__ */ React27.createElement("div", {
     className: HeaderWrapperCls,
     style: {
       height
@@ -5010,8 +5793,8 @@ function TableHeaderWrapper(props) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
-var React24 = __toModule(require("react"));
-var import_react24 = __toModule(require("react"));
+var React28 = __toModule(require("react"));
+var import_react28 = __toModule(require("react"));
 
 // src/components/utils/decamelize.ts
 function decamelize(str, options) {
@@ -5019,17 +5802,13 @@ function decamelize(str, options) {
   return str.replace(/([a-z\d])([A-Z])/g, "$1" + separator + "$2").replace(new RegExp("(" + separator + "[A-Z])([A-Z])", "g"), "$1" + separator + "$2").toLowerCase();
 }
 
-// src/components/InfiniteTable/theme.css.ts
-var ThemeVars = { color: { accent: "var(--infinite-accent-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { draggingBackground: "var(--infinite-header-cell-dragging-background)", background: "var(--infinite-header-cell-background)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", color: "var(--infinite-cell-color)", activeBorderColor_R: "var(--infinite-active-cell-border-color--r)", activeBorderColor_G: "var(--infinite-active-cell-border-color--g)", activeBorderColor_B: "var(--infinite-active-cell-border-color--b)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
-var columnHeaderHeightName = "column-header-height";
-
 // src/components/InfiniteTable/InfiniteCls.css.ts
-var import_createRuntimeFn3 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var import_createRuntimeFn4 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var FooterCls = "_16lm1iw1";
-var InfiniteCls = "_1yeub2v0 _16lm1iw1 _16lm1iwm _16lm1iw12 _16lm1iw0";
-var InfiniteClsRecipe = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "", variantClassNames: { focused: { true: "_1yeub2v2", false: "_1yeub2v3" }, focusedWithin: { true: "_1yeub2v4", false: "_1yeub2v5" }, hasPinnedStart: { true: "_1yeub2v6", false: "_1yeub2v7" }, hasPinnedEnd: { true: "_1yeub2v8", false: "_1yeub2v9" }, hasPinnedStartOverflow: { true: "_1yeub2va", false: "_1yeub2vb" }, hasPinnedEndOverflow: { true: "_1yeub2vc", false: "_1yeub2vd" } }, defaultVariants: {}, compoundVariants: [[{ focused: false, focusedWithin: false }, "_1yeub2ve"]] });
-var InfiniteClsShiftingColumns = "_16lm1iwp";
-var PinnedRowsContainerClsVariants = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "", variantClassNames: { pinned: { start: "_1yeub2vi", end: "_1yeub2vj", false: "_1yeub2vk" } }, defaultVariants: {}, compoundVariants: [] });
+var InfiniteCls = "_1yeub2v0 _16lm1iw1 _16lm1iwn _16lm1iw13 _16lm1iw0";
+var InfiniteClsRecipe = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "", variantClassNames: { focused: { true: "_1yeub2v2", false: "_1yeub2v3" }, focusedWithin: { true: "_1yeub2v4", false: "_1yeub2v5" }, hasPinnedStart: { true: "_1yeub2v6", false: "_1yeub2v7" }, hasPinnedEnd: { true: "_1yeub2v8", false: "_1yeub2v9" }, hasPinnedStartOverflow: { true: "_1yeub2va", false: "_1yeub2vb" }, hasPinnedEndOverflow: { true: "_1yeub2vc", false: "_1yeub2vd" } }, defaultVariants: {}, compoundVariants: [[{ focused: false, focusedWithin: false }, "_1yeub2ve"]] });
+var InfiniteClsShiftingColumns = "_16lm1iwq";
+var PinnedRowsContainerClsVariants = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "", variantClassNames: { pinned: { start: "_1yeub2vi", end: "_1yeub2vj", false: "_1yeub2vk" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
 var defaultStyle = {
@@ -5058,10 +5837,10 @@ var enforceStyle = (node, style) => {
     node.style.setProperty(decamelize(propertyName), propertyValue, "important");
   }
 };
-var InfiniteTableLicenseFooter = React24.forwardRef(function InfiniteTableLicenseFooter2(props, ref) {
-  const { rootClassName: rootClassName11 } = useInternalProps();
-  const domRef = React24.useRef(null);
-  const domCallback = React24.useCallback((node) => {
+var InfiniteTableLicenseFooter = React28.forwardRef(function InfiniteTableLicenseFooter2(props, ref) {
+  const { rootClassName: rootClassName13 } = useInternalProps();
+  const domRef = React28.useRef(null);
+  const domCallback = React28.useCallback((node) => {
     domRef.current = node;
     if (!ref) {
       return;
@@ -5072,7 +5851,7 @@ var InfiniteTableLicenseFooter = React24.forwardRef(function InfiniteTableLicens
       ref.current = node;
     }
   }, []);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const forceStyle = () => {
       requestAnimationFrame(() => {
         var _a;
@@ -5086,12 +5865,12 @@ var InfiniteTableLicenseFooter = React24.forwardRef(function InfiniteTableLicens
       clearInterval(intervalId);
     };
   }, []);
-  return /* @__PURE__ */ React24.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React28.createElement("div", __spreadProps(__spreadValues({
     ref: domCallback
   }, props), {
-    className: join(`${rootClassName11}-Footer`, FooterCls, props.className),
+    className: join(`${rootClassName13}-Footer`, FooterCls, props.className),
     style: defaultStyle
-  }), "Powered by", " ", /* @__PURE__ */ React24.createElement("a", {
+  }), "Powered by", " ", /* @__PURE__ */ React28.createElement("a", {
     href: "https://infinite-table.com",
     rel: "noopener noreferrer",
     role: "link",
@@ -5100,11 +5879,11 @@ var InfiniteTableLicenseFooter = React24.forwardRef(function InfiniteTableLicens
 });
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
-var React25 = __toModule(require("react"));
-var import_react25 = __toModule(require("react"));
-var { rootClassName: rootClassName9 } = internalProps;
-var InfiniteTableColumnCellContext = React25.createContext(null);
-var InfiniteTableColumnCellClassName = `${rootClassName9}ColumnCell`;
+var React29 = __toModule(require("react"));
+var import_react29 = __toModule(require("react"));
+var { rootClassName: rootClassName11 } = internalProps;
+var InfiniteTableColumnCellContext = React29.createContext(null);
+var InfiniteTableColumnCellClassName = `${rootClassName11}ColumnCell`;
 function isColumnWithField(c) {
   return typeof c.field === "string";
 }
@@ -5118,9 +5897,7 @@ function InfiniteTableColumnCellFn(props) {
     column,
     onMouseLeave,
     onMouseEnter,
-    offsetProperty,
     toggleGroupRow,
-    virtualized,
     rowIndex,
     rowHeight,
     domRef,
@@ -5128,7 +5905,7 @@ function InfiniteTableColumnCellFn(props) {
     showZebraRows
   } = props;
   if (!column) {
-    return /* @__PURE__ */ React25.createElement("div", {
+    return /* @__PURE__ */ React29.createElement("div", {
       ref: domRef
     }, "no column");
   }
@@ -5161,7 +5938,7 @@ function InfiniteTableColumnCellFn(props) {
       value
     });
   }
-  const onClick = (0, import_react25.useCallback)(() => {
+  const onClick = (0, import_react29.useCallback)(() => {
     if (keyboardNavigation === "row") {
       componentActions.activeRowIndex = rowIndex;
       return;
@@ -5201,7 +5978,7 @@ function InfiniteTableColumnCellFn(props) {
     isGroupRow,
     rowIndex,
     toggleGroupRow,
-    toggleCurrentGroupRow: (0, import_react25.useCallback)(() => {
+    toggleCurrentGroupRow: (0, import_react29.useCallback)(() => {
       if (!rowInfo.isGroupRow) {
         return;
       }
@@ -5210,13 +5987,13 @@ function InfiniteTableColumnCellFn(props) {
     groupBy: computedDataSource.groupBy,
     pivotBy: computedDataSource.pivotBy
   });
-  const renderChildren = (0, import_react25.useCallback)(() => {
+  const renderChildren = (0, import_react29.useCallback)(() => {
     if (hidden) {
       return null;
     }
     const renderFn = column.render || column.renderValue;
     if (renderFn) {
-      return /* @__PURE__ */ React25.createElement(RenderHookComponent, {
+      return /* @__PURE__ */ React29.createElement(RenderHookComponent, {
         render: renderFn,
         renderParam
       });
@@ -5233,18 +6010,15 @@ function InfiniteTableColumnCellFn(props) {
     style = typeof rowStyle === "function" ? __spreadValues(__spreadValues({}, style), rowStyle(rowPropsAndStyleArgs)) : __spreadValues(__spreadValues({}, style), rowStyle);
   }
   style = column.style ? typeof column.style === "function" ? __spreadValues(__spreadValues({}, style), column.style(stylingRenderParam) || {}) : __spreadValues(__spreadValues({}, style), column.style) : style || {};
-  style.width = width;
   style.height = rowHeight;
-  const memoizedStyle = (0, import_react25.useMemo)(() => style, [!style ? null : JSON.stringify(style)]);
+  const memoizedStyle = (0, import_react29.useMemo)(() => style, [!style ? null : JSON.stringify(style)]);
   const odd = (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
   const zebra = showZebraRows ? odd ? "odd" : "even" : false;
   const cellProps = {
     domRef,
-    offsetProperty,
     cellType: "body",
     column,
     width,
-    offset: virtualized ? 0 : column.computedPinningOffset,
     style: memoizedStyle,
     onMouseLeave,
     onMouseEnter,
@@ -5254,44 +6028,44 @@ function InfiniteTableColumnCellFn(props) {
     renderChildren
   };
   const ContextProvider = InfiniteTableColumnCellContext.Provider;
-  return /* @__PURE__ */ React25.createElement(ContextProvider, {
+  return /* @__PURE__ */ React29.createElement(ContextProvider, {
     value: renderParam
-  }, /* @__PURE__ */ React25.createElement(InfiniteTableCell, __spreadValues({}, cellProps)));
+  }, /* @__PURE__ */ React29.createElement(InfiniteTableCell, __spreadValues({}, cellProps)));
 }
-var InfiniteTableColumnCell = React25.memo(InfiniteTableColumnCellFn);
+var InfiniteTableColumnCell = React29.memo(InfiniteTableColumnCellFn);
 function useInfiniteColumnCell() {
-  const result = (0, import_react25.useContext)(InfiniteTableColumnCellContext);
+  const result = (0, import_react29.useContext)(InfiniteTableColumnCellContext);
   return result;
 }
 
 // src/components/InfiniteTable/components/InfiniteTableRow/row.css.ts
-var import_createRuntimeFn4 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var import_createRuntimeFn5 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var GroupRowExpanderCls = "_7pupv0b";
-var RowClsRecipe = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "_7pupv00", variantClassNames: { zebra: { false: "_7pupv02", even: "_7pupv03", odd: "_7pupv04" }, groupRow: { true: "_7pupv05", false: "_7pupv06" }, inlineGroupRow: { true: "_7pupv07", false: "_7pupv08" }, showHoverRows: { true: "_7pupv09", false: "_7pupv0a" } }, defaultVariants: {}, compoundVariants: [] });
+var RowClsRecipe = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "_7pupv00", variantClassNames: { zebra: { false: "_7pupv02", even: "_7pupv03", odd: "_7pupv04" }, groupRow: { true: "_7pupv05", false: "_7pupv06" }, inlineGroupRow: { true: "_7pupv07", false: "_7pupv08" }, showHoverRows: { true: "_7pupv09", false: "_7pupv0a" } }, defaultVariants: {}, compoundVariants: [] });
 var RowHoverCls = "_7pupv01";
 
 // src/components/InfiniteTable/components/LoadMask.tsx
-var React26 = __toModule(require("react"));
+var React30 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/LoadMask.css.ts
-var LoadMaskCls = { visible: "qy58ya1 qy58ya0 _16lm1iw2 _16lm1iwu _16lm1iww _16lm1iw10 _16lm1iwy", hidden: "qy58ya2 qy58ya0 _16lm1iw2 _16lm1iwu _16lm1iww _16lm1iw10 _16lm1iwy" };
-var LoadMaskOverlayCls = "qy58ya3 _16lm1iw2 _16lm1iwu _16lm1iww _16lm1iw10 _16lm1iwy";
+var LoadMaskCls = { visible: "qy58ya1 qy58ya0 _16lm1iw2 _16lm1iwv _16lm1iwx _16lm1iw11 _16lm1iwz", hidden: "qy58ya2 qy58ya0 _16lm1iw2 _16lm1iwv _16lm1iwx _16lm1iw11 _16lm1iwz" };
+var LoadMaskOverlayCls = "qy58ya3 _16lm1iw2 _16lm1iwv _16lm1iwx _16lm1iw11 _16lm1iwz";
 var LoadMaskTextCls = "qy58ya4";
 
 // src/components/InfiniteTable/components/LoadMask.tsx
-var { rootClassName: rootClassName10 } = internalProps;
-var baseCls3 = `${rootClassName10}-LoadMask`;
+var { rootClassName: rootClassName12 } = internalProps;
+var baseCls3 = `${rootClassName12}-LoadMask`;
 function LoadMaskFn(props) {
   const { visible, children = "Loading" } = props;
-  return /* @__PURE__ */ React26.createElement("div", {
+  return /* @__PURE__ */ React30.createElement("div", {
     className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls3}`
-  }, /* @__PURE__ */ React26.createElement("div", {
+  }, /* @__PURE__ */ React30.createElement("div", {
     className: `${LoadMaskOverlayCls} ${baseCls3}-Overlay`
-  }), /* @__PURE__ */ React26.createElement("div", {
+  }), /* @__PURE__ */ React30.createElement("div", {
     className: `${LoadMaskTextCls} ${baseCls3}-Text`
   }, children));
 }
-var LoadMask = React26.memo(LoadMaskFn);
+var LoadMask = React30.memo(LoadMaskFn);
 
 // src/components/InfiniteTable/getImperativeApi.ts
 function getImperativeApi(getState, getComputed, getDataSourceState, componentActions) {
@@ -5356,7 +6130,7 @@ function getImperativeApi(getState, getComputed, getDataSourceState, componentAc
 }
 
 // src/components/InfiniteTable/hooks/useAutoSizeColumns.ts
-var import_react26 = __toModule(require("react"));
+var import_react30 = __toModule(require("react"));
 var OFFSET = 10;
 function getColumnContentMaxWidths(domRef, options) {
   var _a;
@@ -5392,9 +6166,15 @@ function getColumnContentMaxWidths(domRef, options) {
         cell.childNodes.forEach((child) => {
           if (child !== content) {
             const el = child;
-            otherElementsLength += Math.max(el.offsetWidth, parseInt(el.style.width, 10));
-            const style = getGlobal().getComputedStyle(el);
-            otherElementsLength += parseInt(style.marginLeft, 10) + parseInt(style.marginRight, 10);
+            let elWidth = Math.max(el.offsetWidth, parseInt(el.style.width, 10));
+            if (isNaN(elWidth)) {
+              elWidth = 0;
+            }
+            otherElementsLength += elWidth;
+            if (elWidth > 0) {
+              const style = getGlobal().getComputedStyle(el);
+              otherElementsLength += parseInt(style.marginLeft, 10) + parseInt(style.marginRight, 10);
+            }
           }
         });
         measuredWidth += otherElementsLength;
@@ -5416,11 +6196,11 @@ function useAutoSizeColumns() {
     componentActions,
     componentState: { domRef, ready, autoSizeColumnsKey, brain }
   } = useComponentState();
-  const [refreshId, setRefreshId] = (0, import_react26.useState)(0);
+  const [refreshId, setRefreshId] = (0, import_react30.useState)(0);
   const theKey = typeof autoSizeColumnsKey === "object" ? autoSizeColumnsKey.key : autoSizeColumnsKey;
   const getTheKey = useLatest(theKey);
-  const lastExecutedIdentifierRef = (0, import_react26.useRef)(null);
-  (0, import_react26.useEffect)(() => {
+  const lastExecutedIdentifierRef = (0, import_react30.useRef)(null);
+  (0, import_react30.useEffect)(() => {
     const key = getTheKey();
     if (key == null) {
       return;
@@ -5433,7 +6213,7 @@ function useAutoSizeColumns() {
     };
     return brain.onRenderRangeChange(onChange);
   }, [brain]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     var _a;
     if (theKey == null) {
       return;
@@ -5478,8 +6258,8 @@ function useAutoSizeColumns() {
 }
 
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
-var import_react27 = __toModule(require("react"));
-var import_react28 = __toModule(require("react"));
+var import_react31 = __toModule(require("react"));
+var import_react32 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
 function useYourBrain(param) {
@@ -5549,13 +6329,13 @@ function useCellRendering(param) {
     bodySize,
     rowspan
   });
-  const scrollTopMaxRef = (0, import_react27.useRef)(0);
-  (0, import_react27.useEffect)(() => {
+  const scrollTopMaxRef = (0, import_react31.useRef)(0);
+  (0, import_react31.useEffect)(() => {
     return brain.onRenderCountChange(() => {
       scrollTopMaxRef.current = brain.scrollTopMax;
     });
   }, [brain]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     return brain.onScrollStop((scrollPosition) => {
       const { scrollTop } = scrollPosition;
       if (scrollTop === 0) {
@@ -5572,7 +6352,7 @@ function useCellRendering(param) {
       }
     });
   }, [brain, onScrollToTop, onScrollToBottom]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!bodySize.height) {
       return;
     }
@@ -5583,10 +6363,10 @@ function useCellRendering(param) {
     }
   }, [!!bodySize.height]);
   const [, rerender] = useRerender();
-  (0, import_react27.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     rerender();
   }, [dataSourceState]);
-  const renderCell = (0, import_react27.useCallback)((params) => {
+  const renderCell = (0, import_react31.useCallback)((params) => {
     const {
       rowIndex,
       colIndex,
@@ -5621,7 +6401,7 @@ function useCellRendering(param) {
       rowStyle,
       rowClassName
     };
-    return /* @__PURE__ */ import_react28.default.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
+    return /* @__PURE__ */ import_react32.default.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
   }, [
     rowHeight,
     getData,
@@ -5639,13 +6419,13 @@ function useCellRendering(param) {
 }
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-var import_react42 = __toModule(require("react"));
+var import_react46 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useColumnGroups.ts
-var import_react30 = __toModule(require("react"));
+var import_react34 = __toModule(require("react"));
 
 // src/components/hooks/useInterceptedMap.ts
-var import_react29 = __toModule(require("react"));
+var import_react33 = __toModule(require("react"));
 function interceptMap(map2, fns) {
   const { set, delete: deleteKey, clear } = map2;
   if (fns.set) {
@@ -5733,7 +6513,7 @@ function useColumnGroups() {
     componentActions,
     getComponentState
   } = useComponentState();
-  (0, import_react30.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     const recompute = () => {
       componentActions.columnGroupsDepthsMap = computeColumnGroupsDepths(computedColumnGroups);
     };
@@ -5744,7 +6524,7 @@ function useColumnGroups() {
       set: update
     });
   }, [computedColumnGroups]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     return interceptMap(collapsedColumnGroups, {
       set: (key, visibleCol) => {
         const colIds = key.slice(1);
@@ -5779,10 +6559,10 @@ function useColumnGroups() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnRowspan.ts
-var import_react31 = __toModule(require("react"));
+var import_react35 = __toModule(require("react"));
 function useColumnRowspan(computedVisibleColumns) {
   const { getState: getDataSourceState } = useDataSourceContextValue();
-  const rowspan = (0, import_react31.useMemo)(() => {
+  const rowspan = (0, import_react35.useMemo)(() => {
     const colsWithRowspan = computedVisibleColumns.filter((col) => typeof col.rowspan === "function");
     return colsWithRowspan.length ? ({ rowIndex, colIndex }) => {
       const dataArray = getDataSourceState().dataArray;
@@ -5808,10 +6588,10 @@ function useColumnRowspan(computedVisibleColumns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnSizeFn.ts
-var import_react32 = __toModule(require("react"));
+var import_react36 = __toModule(require("react"));
 var debug4 = dbg("useColumnSizeFn");
 function useColumnSizeFn(columns) {
-  const columnSize = (0, import_react32.useCallback)((index) => {
+  const columnSize = (0, import_react36.useCallback)((index) => {
     const column = columns[index];
     if (false) {
       debug4("cannot find column at index", index, columns);
@@ -5822,15 +6602,10 @@ function useColumnSizeFn(columns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-var import_react38 = __toModule(require("react"));
+var import_react42 = __toModule(require("react"));
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
-var React30 = __toModule(require("react"));
-
-// src/utils/stripVar.ts
-function stripVar(cssVariableWithVarString) {
-  return cssVariableWithVarString.slice(4, -1);
-}
+var React34 = __toModule(require("react"));
 
 // src/components/DataSource/state/rowInfoStatus.ts
 var showLoadingIcon = (rowInfo) => {
@@ -5841,19 +6616,19 @@ var showLoadingIcon = (rowInfo) => {
 };
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
-var React28 = __toModule(require("react"));
-var import_react33 = __toModule(require("react"));
+var React32 = __toModule(require("react"));
+var import_react37 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.css.ts
-var import_createRuntimeFn5 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
-var ExpanderIconCls = "_16lm1iw6 _16lm1iwg _16lm1iwd";
-var ExpanderIconClsVariants = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "", variantClassNames: { expanded: { true: "_16lm1iwc", false: "_198z9782" } }, defaultVariants: {}, compoundVariants: [] });
+var import_createRuntimeFn6 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var ExpanderIconCls = "_16lm1iw6 _16lm1iwh _16lm1iwd";
+var ExpanderIconClsVariants = (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassName: "", variantClassNames: { expanded: { true: "_16lm1iwc", false: "_198z9782" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
 function ExpanderIcon(props) {
   var _a;
   const { size = 24 } = props;
-  const [expanded, setExpanded] = (0, import_react33.useState)((_a = props.expanded) != null ? _a : props.defaultExpanded);
+  const [expanded, setExpanded] = (0, import_react37.useState)((_a = props.expanded) != null ? _a : props.defaultExpanded);
   const onClick = () => {
     var _a2;
     (_a2 = props.onChange) == null ? void 0 : _a2.call(props, !expanded);
@@ -5861,12 +6636,12 @@ function ExpanderIcon(props) {
       setExpanded(!expanded);
     }
   };
-  React28.useEffect(() => {
+  React32.useEffect(() => {
     if (isControlled("expanded", props)) {
       setExpanded(props.expanded);
     }
   }, [props.expanded]);
-  return /* @__PURE__ */ React28.createElement("svg", {
+  return /* @__PURE__ */ React32.createElement("svg", {
     "data-name": "expander-icon",
     xmlns: "http://www.w3.org/2000/svg",
     height: `${size}px`,
@@ -5877,20 +6652,20 @@ function ExpanderIcon(props) {
     className: join(props.className, ExpanderIconCls, ExpanderIconClsVariants({
       expanded
     }), "InfiniteIcon", "InfiniteIcon-expander", `InfiniteIcon-expander--${expanded ? "expanded" : "collapsed"}`)
-  }, /* @__PURE__ */ React28.createElement("path", {
+  }, /* @__PURE__ */ React32.createElement("path", {
     d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
   }));
 }
 
 // src/components/InfiniteTable/components/icons/LoadingIcon.tsx
-var React29 = __toModule(require("react"));
+var React33 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/icons/LoadingIcon.css.ts
-var LoadingIconCls = "_16lm1iw8 _16lm1iwg _16lm1iwd";
+var LoadingIconCls = "_16lm1iw8 _16lm1iwh _16lm1iwd";
 
 // src/components/InfiniteTable/components/icons/LoadingIcon.tsx
 var LoadingIcon = (props) => {
-  return /* @__PURE__ */ React29.createElement("svg", {
+  return /* @__PURE__ */ React33.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     style: {
       margin: "auto",
@@ -5902,14 +6677,14 @@ var LoadingIcon = (props) => {
     viewBox: "0 0 100 100",
     preserveAspectRatio: "xMidYMid",
     className: join(props.className, LoadingIconCls, "InfiniteIcon", "InfiniteIcon-loading")
-  }, /* @__PURE__ */ React29.createElement("circle", {
+  }, /* @__PURE__ */ React33.createElement("circle", {
     cx: "50",
     cy: "50",
     fill: "none",
     strokeWidth: "10",
     r: "35",
     strokeDasharray: "164.93361431346415 56.97787143782138"
-  }, /* @__PURE__ */ React29.createElement("animateTransform", {
+  }, /* @__PURE__ */ React33.createElement("animateTransform", {
     attributeName: "transform",
     type: "rotate",
     repeatCount: "indefinite",
@@ -5929,7 +6704,7 @@ function getGroupColumnRender({
     var _a, _b, _c;
     let { value, rowInfo, column, groupBy, pivotBy } = renderOptions;
     if (column.renderValue) {
-      value = /* @__PURE__ */ React30.createElement(RenderHookComponent, {
+      value = /* @__PURE__ */ React34.createElement(RenderHookComponent, {
         render: column.renderValue,
         renderParam: renderOptions
       });
@@ -5959,22 +6734,22 @@ function getGroupColumnRender({
     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);
     const isLoading = showLoadingIcon(groupRowInfo);
     if (isLoading) {
-      icon = /* @__PURE__ */ React30.createElement(LoadingIcon, null);
+      icon = /* @__PURE__ */ React34.createElement(LoadingIcon, null);
     } else if (showExpanderIcon) {
-      const defaultIcon = /* @__PURE__ */ React30.createElement(ExpanderIcon, {
+      const defaultIcon = /* @__PURE__ */ React34.createElement(ExpanderIcon, {
         expanded: !collapsed,
         onChange: () => {
           toggleGroupRow(groupKeys);
         }
       });
-      icon = column.renderGroupIcon ? /* @__PURE__ */ React30.createElement(RenderHookComponent, {
+      icon = column.renderGroupIcon ? /* @__PURE__ */ React34.createElement(RenderHookComponent, {
         render: column.renderGroupIcon,
         renderParam: Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)
       }) : defaultIcon;
     }
-    return /* @__PURE__ */ React30.createElement("div", {
+    return /* @__PURE__ */ React34.createElement("div", {
       className: join(display.flex, alignItems.center)
-    }, icon, /* @__PURE__ */ React30.createElement("div", {
+    }, icon, /* @__PURE__ */ React34.createElement("div", {
       className: cssEllipsisClassName
     }, value != null ? value : null));
   };
@@ -6019,9 +6794,9 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
       const showExpanderIcon = rowInfo.isGroupRow ? 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) : false;
       const isLoading = showLoadingIcon(rowInfo);
       if (isLoading) {
-        icon = /* @__PURE__ */ React30.createElement(LoadingIcon, null);
+        icon = /* @__PURE__ */ React34.createElement(LoadingIcon, null);
       } else if (showExpanderIcon) {
-        const defaultIcon = /* @__PURE__ */ React30.createElement(ExpanderIcon, {
+        const defaultIcon = /* @__PURE__ */ React34.createElement(ExpanderIcon, {
           expanded: !collapsed,
           onChange: () => {
             if (!rowInfo.isGroupRow) {
@@ -6036,9 +6811,9 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
           icon = column.renderGroupIcon(renderParam);
         }
       }
-      return /* @__PURE__ */ React30.createElement("div", {
+      return /* @__PURE__ */ React34.createElement("div", {
         className: join(display.flex, alignItems.center, GroupRowExpanderCls)
-      }, icon, /* @__PURE__ */ React30.createElement("div", {
+      }, icon, /* @__PURE__ */ React34.createElement("div", {
         className: cssEllipsisClassName
       }, value != null ? value : null));
     }
@@ -6054,11 +6829,11 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
 }
 
 // src/components/InfiniteTable/hooks/useEffectWithRaf.ts
-var import_react34 = __toModule(require("react"));
+var import_react38 = __toModule(require("react"));
 function useEffectWithRaf(fn, deps) {
-  const rafId = (0, import_react34.useRef)(0);
-  const removeFnRaf = (0, import_react34.useRef)();
-  (0, import_react34.useEffect)(() => {
+  const rafId = (0, import_react38.useRef)(0);
+  const removeFnRaf = (0, import_react38.useRef)();
+  (0, import_react38.useEffect)(() => {
     rafId.current = requestAnimationFrame(() => {
       removeFnRaf.current = fn();
     });
@@ -6075,7 +6850,7 @@ function useEffectWithRaf(fn, deps) {
 }
 
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
-var import_react37 = __toModule(require("react"));
+var import_react41 = __toModule(require("react"));
 
 // src/utils/groupAndPivot/index.ts
 var LAZY_ROOT_KEY_FOR_GROUPS = "____root____";
@@ -6528,7 +7303,7 @@ function enhancedFlatten(param) {
 }
 
 // src/components/DataSource/index.tsx
-var React31 = __toModule(require("react"));
+var React35 = __toModule(require("react"));
 
 // src/utils/multisort/sortTypes.ts
 var numberComparator = function(first, second) {
@@ -6716,15 +7491,15 @@ var GroupRowsState = class {
 };
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-var import_react36 = __toModule(require("react"));
+var import_react40 = __toModule(require("react"));
 
 // src/components/hooks/useEffectWithChanges.ts
-var import_react35 = __toModule(require("react"));
+var import_react39 = __toModule(require("react"));
 function useEffectWithChanges(fn, deps) {
-  const prevRef = (0, import_react35.useRef)({});
-  const oldValuesRef = (0, import_react35.useRef)({});
+  const prevRef = (0, import_react39.useRef)({});
+  const oldValuesRef = (0, import_react39.useRef)({});
   const oldValues = oldValuesRef.current;
-  const changesRef = (0, import_react35.useRef)({});
+  const changesRef = (0, import_react39.useRef)({});
   const changes = changesRef.current;
   const useEffectDeps = [];
   for (const k in deps) {
@@ -6737,7 +7512,7 @@ function useEffectWithChanges(fn, deps) {
     }
   }
   prevRef.current = deps;
-  (0, import_react35.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     const changes2 = changesRef.current;
     const result = fn(changes2, oldValues);
     changesRef.current = {};
@@ -7005,12 +7780,12 @@ function useLoadData() {
     livePaginationCursor,
     cursorId: stateCursorId
   } = componentState;
-  const [scrollbars, setScrollbars] = (0, import_react36.useState)({
+  const [scrollbars, setScrollbars] = (0, import_react40.useState)({
     vertical: false,
     horizontal: false
   });
-  const scrollbarsRef = (0, import_react36.useRef)(scrollbars);
-  (0, import_react36.useEffect)(() => {
+  const scrollbarsRef = (0, import_react40.useRef)(scrollbars);
+  (0, import_react40.useEffect)(() => {
     notifyScrollbarsChange.onChange((scrollbars2) => {
       if (!scrollbars2) {
         return;
@@ -7020,7 +7795,7 @@ function useLoadData() {
     });
     return () => notifyScrollbarsChange.destroy();
   }, [notifyScrollbarsChange]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!livePagination) {
       return;
     }
@@ -7034,7 +7809,7 @@ function useLoadData() {
     });
     return () => cancelAnimationFrame(frameId);
   }, [livePaginationCursor]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!livePagination || livePaginationCursor !== void 0) {
       return;
     }
@@ -7048,7 +7823,7 @@ function useLoadData() {
     });
     return () => cancelAnimationFrame(frameId);
   }, [dataArray.length, livePaginationCursor]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     const state = getComponentState();
     const { livePaginationCursor: livePaginationCursor2, livePagination: livePagination2, dataArray: dataArray2 } = state;
     if (!scrollbars.vertical && livePagination2) {
@@ -7066,7 +7841,7 @@ function useLoadData() {
     filterValue,
     cursorId: livePagination ? stateCursorId : null
   };
-  const initialRef = (0, import_react36.useRef)(true);
+  const initialRef = (0, import_react40.useRef)(true);
   useLazyLoadRange();
   useEffectWithChanges(() => {
     const componentState2 = getComponentState();
@@ -7098,7 +7873,7 @@ function useLazyLoadRange() {
     componentActions: actions,
     componentState
   } = useComponentState();
-  (0, import_react36.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     actions.lazyLoadCacheOfLoadedBatches = new DeepMap();
   }, [componentState.data, componentState.dataParams]);
   const {
@@ -7107,7 +7882,7 @@ function useLazyLoadRange() {
     dataArray,
     scrollStopDelayUpdatedByTable
   } = componentState;
-  const latestRenderRangeRef = (0, import_react36.useRef)(null);
+  const latestRenderRangeRef = (0, import_react40.useRef)(null);
   const loadRange = (renderRange, cache = getComponentState().lazyLoadCacheOfLoadedBatches) => {
     const componentState2 = getComponentState();
     renderRange = renderRange || latestRenderRangeRef.current;
@@ -7126,8 +7901,8 @@ function useLazyLoadRange() {
       componentActions: actions
     }, cache);
   };
-  const debouncedLoadRange = (0, import_react36.useMemo)(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
-  (0, import_react36.useEffect)(() => {
+  const debouncedLoadRange = (0, import_react40.useMemo)(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
+  (0, import_react40.useEffect)(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       return notifyRenderRangeChange.onChange((renderRange) => {
         latestRenderRangeRef.current = renderRange;
@@ -7136,7 +7911,7 @@ function useLazyLoadRange() {
     }
     return;
   }, [lazyLoadBatchSize]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
     }
@@ -7939,7 +8714,7 @@ function DataSourceWithContext(props) {
   if (typeof children === "function") {
     children = children(computedValues);
   }
-  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, children);
+  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, children);
 }
 var DataSourceRoot = getComponentStateRoot({
   initSetupState,
@@ -7962,14 +8737,14 @@ function DataSourceCmp({ children }) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
-  return /* @__PURE__ */ React31.createElement(DataSourceContext.Provider, {
+  return /* @__PURE__ */ React35.createElement(DataSourceContext.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ React31.createElement(DataSourceWithContext, {
+  }, /* @__PURE__ */ React35.createElement(DataSourceWithContext, {
     children
   }));
 }
 function DataSource(props) {
-  return /* @__PURE__ */ React31.createElement(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ React31.createElement(DataSourceCmp, {
+  return /* @__PURE__ */ React35.createElement(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ React35.createElement(DataSourceCmp, {
     children: props.children
   }));
 }
@@ -7977,7 +8752,7 @@ function DataSource(props) {
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
 function useToggleGroupRow() {
   const { getState: getDataSourceState, componentActions: dataSourceActions } = useDataSourceContextValue();
-  const toggleGroupRow = (0, import_react37.useCallback)((groupKeys) => {
+  const toggleGroupRow = (0, import_react41.useCallback)((groupKeys) => {
     const state = getDataSourceState();
     const newState = new GroupRowsState(state.groupRowsState);
     newState.toggleGroupRow(groupKeys);
@@ -8009,7 +8784,7 @@ function useToggleGroupRow() {
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
 function useGroupByMap(groupBy) {
-  const groupByMap = (0, import_react38.useMemo)(() => {
+  const groupByMap = (0, import_react42.useMemo)(() => {
     return groupBy.reduce((acc, groupBy2, index) => {
       acc.set(groupBy2.field, {
         groupBy: groupBy2,
@@ -8033,13 +8808,13 @@ function useColumnsWhen() {
     }
   } = useComponentState();
   const groupByMap = useGroupByMap(groupBy);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
   }, [groupRenderStrategy]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (pivotGrandTotalColumnPosition != void 0) {
       dataSourceActions.pivotGrandTotalColumnPosition = pivotGrandTotalColumnPosition;
     }
@@ -8113,7 +8888,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
     });
     return computedColumns.size === 0 ? void 0 : computedColumns;
   }
-  (0, import_react38.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     const update = () => {
       componentActions.columnsWhenInlineGroupRenderStrategy = computeColumnsWhenInlineGroupRenderStrategy(columns, groupByMap, groupRenderStrategy, toggleGroupRow);
     };
@@ -8142,7 +8917,7 @@ function useColumnsWhenGrouping() {
     }
   } = useComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  (0, import_react38.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     const update = () => {
       const columnsWhenGrouping = getColumnsWhenGrouping({
         columns,
@@ -8278,7 +9053,7 @@ function useHideColumns(groupByMap) {
     hideEmptyGroupColumns ? groupRowsState : null,
     hideEmptyGroupColumns
   ]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     const isGrouped = groupBy.length > 0;
     const currentState = getComponentState();
     const { controlledColumnVisibility, columnVisibility } = currentState;
@@ -8393,145 +9168,7 @@ function getColumnsWhenGrouping(params) {
 }
 
 // src/components/InfiniteTable/hooks/useComputedVisibleColumns.ts
-var import_react40 = __toModule(require("react"));
-
-// src/components/flexbox/index.ts
-var computeFlex = (params) => {
-  const {
-    availableSize,
-    items,
-    minSize: defaultMinSize,
-    maxSize: defaultMaxSize
-  } = params;
-  if (availableSize < 0) {
-    throw "The provided availableSize cannot be negative!";
-  }
-  let totalFixedSize = 0;
-  let totalFlex = 0;
-  let totalFlexCount = 0;
-  const minSizes = [];
-  const maxSizes = [];
-  items.forEach((item, i) => {
-    var _a, _b, _c, _d, _e, _f;
-    let maxSize = (_b = (_a = item.maxSize) != null ? _a : defaultMaxSize) != null ? _b : void 0;
-    let minSize = (_d = (_c = item.minSize) != null ? _c : defaultMinSize) != null ? _d : void 0;
-    minSizes.push(minSize);
-    maxSizes.push(maxSize);
-    if (item.size != null) {
-      if (maxSize != null && item.size > maxSize) {
-        item.size = maxSize;
-      }
-      if (minSize != null && item.size < minSize) {
-        item.size = minSize;
-      }
-    }
-    if (item.size == null && item.flex == null) {
-      throw `Items must specify either a size or a flex property. Item at index ${i} doesn't have either of those.`;
-    }
-    if (item.flex != null) {
-      totalFlexCount += 1;
-    }
-    totalFlex += (_e = item.flex) != null ? _e : 0;
-    totalFixedSize += (_f = item.size) != null ? _f : 0;
-  });
-  let availableSizeForFlex = Math.max(availableSize - totalFixedSize, 0);
-  let sizePerFlex = availableSizeForFlex / totalFlex;
-  let maxxedFlexItems = {};
-  let minnedFlexItems = {};
-  let constrainedCount = 0;
-  items.forEach((item, index) => {
-    var _a, _b, _c, _d;
-    if (item.flex != null) {
-      const approxFlexSize = sizePerFlex * item.flex;
-      let maxSize = (_b = (_a = item.maxSize) != null ? _a : defaultMaxSize) != null ? _b : void 0;
-      let minSize = (_d = (_c = item.minSize) != null ? _c : defaultMinSize) != null ? _d : void 0;
-      let constrained = false;
-      let substractSize = 0;
-      if (maxSize != null && approxFlexSize > maxSize) {
-        maxxedFlexItems[index] = true;
-        constrained = true;
-        substractSize = maxSize;
-      }
-      if (minSize != null && approxFlexSize < minSize) {
-        minnedFlexItems[index] = true;
-        constrained = true;
-        substractSize = minSize;
-      }
-      if (constrained) {
-        constrainedCount += 1;
-        totalFlexCount -= 1;
-        totalFlex -= item.flex;
-        availableSizeForFlex -= substractSize;
-      }
-    }
-  });
-  if (constrainedCount) {
-    sizePerFlex = availableSizeForFlex / totalFlex;
-  }
-  let flexSizes = [];
-  let currentFlexCount = 0;
-  let remainingSizeForFlex = availableSizeForFlex;
-  let remainingFlex = totalFlex;
-  let totalTakenSize = 0;
-  let flexSizeSum = 0;
-  const computedSizes = [];
-  const resultItems = items.map((item, index) => {
-    var _a, _b, _c, _d, _e;
-    const sizedItem = __spreadValues({}, item);
-    let maxSize = (_b = (_a = item.maxSize) != null ? _a : defaultMaxSize) != null ? _b : void 0;
-    let minSize = (_d = (_c = item.minSize) != null ? _c : defaultMinSize) != null ? _d : void 0;
-    let flexSize = 0;
-    const maxxed = maxxedFlexItems[index];
-    const minned = minnedFlexItems[index];
-    const constrained = maxxed || minned;
-    let computedSize = (_e = item.size) != null ? _e : 0;
-    if (item.flex != null) {
-      if (constrained) {
-        if (minned) {
-          flexSize = minSize;
-        }
-        if (maxxed) {
-          flexSize = maxSize;
-        }
-      } else {
-        currentFlexCount += 1;
-        const constrain = (size) => {
-          if (maxSize != null && size > maxSize) {
-            size = maxSize;
-          }
-          if (minSize != null && size < minSize) {
-            size = minSize;
-          }
-          return size;
-        };
-        if (currentFlexCount === totalFlexCount) {
-          flexSize = constrain(remainingSizeForFlex);
-        } else {
-          flexSize = constrain(Math.round(item.flex * sizePerFlex));
-          flexSizeSum += flexSize;
-          remainingSizeForFlex = availableSizeForFlex - flexSizeSum;
-          remainingFlex -= item.flex;
-          sizePerFlex = remainingSizeForFlex / remainingFlex;
-        }
-      }
-      computedSize = flexSize;
-      sizedItem.flexSize = flexSize;
-    }
-    flexSizes.push(flexSize);
-    computedSizes.push(computedSize);
-    sizedItem.computedSize = computedSize;
-    totalTakenSize += computedSize;
-    return sizedItem;
-  });
-  return {
-    items: resultItems,
-    flexSizes,
-    minSizes,
-    maxSizes,
-    computedSizes,
-    remainingSize: Math.round(availableSize - totalTakenSize)
-  };
-};
+var import_react44 = __toModule(require("react"));
 
 // src/components/InfiniteTable/utils/adjustColumnOrderForPinning.ts
 var order = ["start", void 0, "end"];
@@ -8725,8 +9362,8 @@ var getComputedVisibleColumns = ({
     const computedSortIndex = (_c = sortingInfo == null ? void 0 : sortingInfo.index) != null ? _c : -1;
     const computedWidth = computedSizes[i];
     const computedFlex = flexSizes[i] || null;
-    const computedMinWidth = minSizes[i] || null;
-    const computedMaxWidth = maxSizes[i] || null;
+    const computedMinWidth = minSizes[i] || 0;
+    const computedMaxWidth = maxSizes[i] || 1e4;
     const computedPinned = getComputedPinned(id, columnPinning);
     const computedLast = i === visibleColumnOrder.length - 1;
     const computedPinningOffset = computedPinned === "start" ? computedPinnedStartColumnsWidth : computedPinned === "end" ? computedPinnedEndColumnsWidth : computedOffset - computedPinnedStartColumnsWidth;
@@ -8879,10 +9516,10 @@ var getComputedVisibleColumns = ({
 };
 
 // src/components/InfiniteTable/hooks/useRerenderOnKeyChange.ts
-var import_react39 = __toModule(require("react"));
+var import_react43 = __toModule(require("react"));
 var useRerenderOnKeyChange = (map2) => {
   const [renderId, rerender] = useRerender();
-  (0, import_react39.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     const update = rafFn(rerender);
     return interceptMap(map2, {
       set: update,
@@ -8936,7 +9573,7 @@ var useComputedVisibleColumns = ({
     computedPinnedEndOffset,
     computedPinnedEndWidth,
     computedPinnedStartWidth
-  } = (0, import_react40.useMemo)(() => {
+  } = (0, import_react44.useMemo)(() => {
     return getComputedVisibleColumns({
       columns,
       bodySize,
@@ -8968,6 +9605,7 @@ var useComputedVisibleColumns = ({
     columnMinWidth,
     columnMaxWidth,
     columnDefaultWidth,
+    viewportReservedWidth,
     sortable,
     sortInfo,
     setSortInfo,
@@ -8976,6 +9614,7 @@ var useComputedVisibleColumns = ({
     columnOrder,
     columnVisibility,
     columnVisibilityAssumeVisible,
+    resizableColumns,
     pinnedEndMaxWidth,
     pinnedStartMaxWidth,
     columnSizing,
@@ -9005,7 +9644,7 @@ var useComputedVisibleColumns = ({
 };
 
 // src/components/InfiniteTable/hooks/useScrollbars.ts
-var import_react41 = __toModule(require("react"));
+var import_react45 = __toModule(require("react"));
 var INITIAL_SCROLLBARS = {
   vertical: false,
   horizontal: false
@@ -9013,8 +9652,8 @@ var INITIAL_SCROLLBARS = {
 function useScrollbars(brain) {
   const { getComponentState: getInfiniteTableState } = useComponentState();
   const { getState: getDataSourceState } = useDataSourceContextValue();
-  const [scrollbars, setScrollbars] = (0, import_react41.useState)(INITIAL_SCROLLBARS);
-  (0, import_react41.useEffect)(() => {
+  const [scrollbars, setScrollbars] = (0, import_react45.useState)(INITIAL_SCROLLBARS);
+  (0, import_react45.useEffect)(() => {
     return brain.onRenderCountChange(() => {
       const { scrollTopMax, scrollLeftMax } = brain;
       setScrollbars({
@@ -9023,7 +9662,7 @@ function useScrollbars(brain) {
       });
     });
   }, [brain]);
-  (0, import_react41.useLayoutEffect)(() => {
+  (0, import_react45.useLayoutEffect)(() => {
     const dataSourceState = getDataSourceState();
     const { onScrollbarsChange } = getInfiniteTableState();
     const { notifyScrollbarsChange } = dataSourceState;
@@ -9054,7 +9693,7 @@ function useComputed() {
     bodySize,
     showSeparatePivotColumnForSingleAggregation
   } = componentState;
-  (0, import_react42.useState)(() => {
+  (0, import_react46.useState)(() => {
     componentState.onRowHeightCSSVarChange.onChange((rowHeight) => {
       if (rowHeight) {
         componentActions.rowHeight = rowHeight;
@@ -9066,13 +9705,13 @@ function useComputed() {
       }
     });
   });
-  (0, import_react42.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     dataSourceActions.showSeparatePivotColumnForSingleAggregation = showSeparatePivotColumnForSingleAggregation;
   }, [showSeparatePivotColumnForSingleAggregation]);
   const { multiSort, filterValue } = dataSourceState;
   useColumnGroups();
   const { toggleGroupRow } = useColumnsWhen();
-  const setSortInfo = (0, import_react42.useCallback)((sortInfo) => {
+  const setSortInfo = (0, import_react46.useCallback)((sortInfo) => {
     var _a2;
     const newSortInfo = getDataSourceState().multiSort ? sortInfo : (_a2 = sortInfo[0]) != null ? _a2 : null;
     dataSourceActions.sortInfo = newSortInfo;
@@ -9150,6 +9789,10 @@ function useComputed() {
 }
 
 // src/components/InfiniteTable/hooks/useDOMProps.ts
+var columnWidthAtIndex4 = stripVar(InternalVars.columnWidthAtIndex);
+var columnOffsetAtIndex2 = stripVar(InternalVars.columnOffsetAtIndex);
+var activeCellColWidth = stripVar(InternalVars.activeCellColWidth);
+var activeCellColOffset = stripVar(InternalVars.activeCellColOffset);
 function useDOMProps(initialDOMProps) {
   const { computed, componentState, componentActions } = useInfiniteTable();
   const {
@@ -9160,9 +9803,24 @@ function useDOMProps(initialDOMProps) {
     onBlurWithin,
     onFocusWithin,
     onSelfFocus,
-    onSelfBlur
+    onSelfBlur,
+    activeCellIndex
   } = componentState;
-  const { computedPinnedStartColumnsWidth, computedPinnedEndColumnsWidth } = computed;
+  const {
+    computedPinnedStartColumnsWidth,
+    computedPinnedEndColumnsWidth,
+    computedVisibleColumns
+  } = computed;
+  const cssVars = computedVisibleColumns.reduce((vars, col) => {
+    const index = col.computedVisibleIndex;
+    vars[`${columnWidthAtIndex4}-${index}`] = col.computedWidth + "px";
+    vars[`${columnOffsetAtIndex2}-${index}`] = col.computedOffset + "px";
+    return vars;
+  }, {});
+  if (activeCellIndex != null) {
+    cssVars[activeCellColWidth] = `var(${getCSSVarNameForColWidth(activeCellIndex[1])})`;
+    cssVars[activeCellColOffset] = `var(${getCSSVarNameForColOffset(activeCellIndex[1])})`;
+  }
   const setFocused = rafFn((focused2) => {
     componentActions.focused = focused2;
   });
@@ -9217,7 +9875,7 @@ function useDOMProps(initialDOMProps) {
     focusedWithin
   }));
   domProps.className = className;
-  domProps.style = __spreadValues({}, initialDOMProps == null ? void 0 : initialDOMProps.style);
+  domProps.style = __spreadValues(__spreadValues({}, initialDOMProps == null ? void 0 : initialDOMProps.style), cssVars);
   if (focused) {
     if (componentState.focusedStyle) {
       Object.assign(domProps.style, componentState.focusedStyle);
@@ -9232,7 +9890,7 @@ function useDOMProps(initialDOMProps) {
 }
 
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
-var import_react43 = __toModule(require("react"));
+var import_react47 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useLicense/crc32.ts
 var DEFAULT_ReversedPolynomial = 3988292384;
@@ -9390,10 +10048,10 @@ var isInsideSandbox = () => {
 };
 var isInsidePlayground = isInsideSandbox() || isInsideSandpack();
 var useLicense = (licenseKey = "") => {
-  const valid = (0, import_react43.useMemo)(() => {
+  const valid = (0, import_react47.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.3.12"
+      version: "0.3.15"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -9524,10 +10182,23 @@ function handleCellNavigation(options) {
   actions.activeCellIndex = [rowIndex, colIndex];
   return true;
 }
+var validKeys = {
+  ArrowUp: true,
+  ArrowDown: true,
+  ArrowLeft: true,
+  ArrowRight: true,
+  PageUp: true,
+  PageDown: true,
+  Home: true,
+  End: true
+};
 function handleKeyboardNavigation(options) {
   const { getState } = options;
   const state = getState();
   const { activeRowIndex, activeCellIndex, keyboardNavigation } = state;
+  if (!validKeys[options.key]) {
+    return false;
+  }
   if (activeRowIndex != null && keyboardNavigation === "row") {
     return handleRowNavigation(options);
   }
@@ -9538,7 +10209,7 @@ function handleKeyboardNavigation(options) {
 }
 
 // src/components/InfiniteTable/state/getInitialState.ts
-var import_react44 = __toModule(require("react"));
+var import_react48 = __toModule(require("react"));
 
 // src/components/VirtualBrain/ScrollListener.ts
 var initialScrollPosition = {
@@ -9618,6 +10289,7 @@ function initSetupState2() {
   });
   if (false) {
     globalThis.brain = brain;
+    globalThis.headerBrain = headerBrain;
   }
   const { renderer, onRenderUpdater } = createRenderer2(brain);
   brain.onAvailableSizeChange((size) => {
@@ -9633,9 +10305,10 @@ function initSetupState2() {
     brain,
     headerBrain,
     columnShifts: null,
-    domRef: (0, import_react44.createRef)(),
-    scrollerDOMRef: (0, import_react44.createRef)(),
-    portalDOMRef: (0, import_react44.createRef)(),
+    domRef: (0, import_react48.createRef)(),
+    scrollerDOMRef: (0, import_react48.createRef)(),
+    portalDOMRef: (0, import_react48.createRef)(),
+    activeCellIndicatorDOMRef: (0, import_react48.createRef)(),
     onRowHeightCSSVarChange: buildSubscriptionCallback(),
     onColumnHeaderHeightCSSVarChange: buildSubscriptionCallback(),
     bodySize: {
@@ -9691,7 +10364,7 @@ var forwardProps3 = (setupState) => {
     viewportReservedWidth: (viewportReservedWidth) => viewportReservedWidth != null ? viewportReservedWidth : 0,
     resizableColumns: (resizableColumns) => resizableColumns != null ? resizableColumns : true,
     columnMinWidth: (columnMinWidth) => columnMinWidth != null ? columnMinWidth : 30,
-    columnMaxWidth: (columnMaxWidth) => columnMaxWidth != null ? columnMaxWidth : 2e3,
+    columnMaxWidth: (columnMaxWidth) => columnMaxWidth != null ? columnMaxWidth : 5e3,
     columnDefaultWidth: (columnDefaultWidth) => columnDefaultWidth != null ? columnDefaultWidth : 200,
     columnCssEllipsis: (columnCssEllipsis) => columnCssEllipsis != null ? columnCssEllipsis : true,
     draggableColumns: (draggableColumns) => draggableColumns != null ? draggableColumns : true,
@@ -9794,7 +10467,7 @@ var InfiniteTableRoot = getComponentStateRoot({
   getParentState: () => useDataSource(),
   debugName: "InfiniteTable"
 });
-var InfiniteTableComponent = React32.memo(function InfiniteTableComponent2() {
+var InfiniteTableComponent = React36.memo(function InfiniteTableComponent2() {
   var _a;
   const {
     componentState,
@@ -9808,7 +10481,7 @@ var InfiniteTableComponent = React32.memo(function InfiniteTableComponent2() {
     getState: getDataSourceState,
     componentActions: dataSourceActions
   } = useDataSourceContextValue();
-  const [imperativeApi] = (0, import_react45.useState)(() => {
+  const [imperativeApi] = (0, import_react49.useState)(() => {
     return getImperativeApi(getState, getComputed, getDataSourceState, actions);
   });
   const {
@@ -9832,14 +10505,14 @@ var InfiniteTableComponent = React32.memo(function InfiniteTableComponent2() {
     activeCellIndex,
     onRenderUpdater
   } = componentState;
-  (0, import_react45.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (activeRowIndex != null) {
       imperativeApi.scrollRowIntoView(activeRowIndex, {
         offset: 30
       });
     }
   }, [activeRowIndex]);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (activeCellIndex != null) {
       imperativeApi.scrollCellIntoView(activeCellIndex[0], activeCellIndex[1], {
         offset: 30
@@ -9856,7 +10529,7 @@ var InfiniteTableComponent = React32.memo(function InfiniteTableComponent2() {
     bodySize,
     computed
   });
-  React32.useEffect(() => {
+  React36.useEffect(() => {
     const dataSourceState = getDataSourceState();
     const onChange = debounce((renderRange) => {
       dataSourceState.notifyRenderRangeChange({
@@ -9869,12 +10542,12 @@ var InfiniteTableComponent = React32.memo(function InfiniteTableComponent2() {
   const licenseValid = useLicense(licenseKey);
   const domProps = useDOMProps(componentState.domProps);
   const LoadMaskCmp = (_a = components == null ? void 0 : components.LoadMask) != null ? _a : LoadMask;
-  React32.useEffect(() => {
+  React36.useEffect(() => {
     brain.setScrollStopDelay(scrollStopDelay);
     dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
   }, [scrollStopDelay]);
   useAutoSizeColumns();
-  const onKeyDown = (0, import_react45.useCallback)((event) => {
+  const onKeyDown = (0, import_react49.useCallback)((event) => {
     if (handleKeyboardNavigation({
       getState,
       actions,
@@ -9886,13 +10559,14 @@ var InfiniteTableComponent = React32.memo(function InfiniteTableComponent2() {
       event.preventDefault();
     }
   }, []);
-  return /* @__PURE__ */ React32.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React36.createElement("div", __spreadValues({
     onKeyDown,
     ref: domRef
-  }, domProps), header ? /* @__PURE__ */ React32.createElement(TableHeaderWrapper, {
-    brain: headerBrain,
+  }, domProps), header ? /* @__PURE__ */ React36.createElement(TableHeaderWrapper, {
+    bodyBrain: brain,
+    headerBrain,
     scrollbars
-  }) : null, /* @__PURE__ */ React32.createElement(InfiniteTableBody, null, /* @__PURE__ */ React32.createElement(HeadlessTable, {
+  }) : null, /* @__PURE__ */ React36.createElement(InfiniteTableBody, null, /* @__PURE__ */ React36.createElement(HeadlessTable, {
     tabIndex: 0,
     activeRowIndex: componentState.ready && keyboardNavigation === "row" ? activeRowIndex : null,
     activeCellIndex: componentState.ready && keyboardNavigation === "cell" ? activeCellIndex : null,
@@ -9903,18 +10577,18 @@ var InfiniteTableComponent = React32.memo(function InfiniteTableComponent2() {
     renderCell,
     cellHoverClassNames: HOVERED_CLASS_NAMES,
     scrollerDOMRef
-  }), /* @__PURE__ */ React32.createElement(LoadMaskCmp, {
+  }), /* @__PURE__ */ React36.createElement(LoadMaskCmp, {
     visible: loading
-  }, loadingText)), /* @__PURE__ */ React32.createElement("div", {
+  }, loadingText)), /* @__PURE__ */ React36.createElement("div", {
     ref: portalDOMRef,
     className: join(`${rootClassName2}Portal`, zIndex[1e3], position.absolute, top[0], left[0])
-  }), rowHeightCSSVar ? /* @__PURE__ */ React32.createElement(CSSVariableWatch, {
+  }), rowHeightCSSVar ? /* @__PURE__ */ React36.createElement(CSSVariableWatch, {
     varName: rowHeightCSSVar,
     onChange: onRowHeightCSSVarChange
-  }) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ React32.createElement(CSSVariableWatch, {
+  }) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ React36.createElement(CSSVariableWatch, {
     varName: columnHeaderHeightCSSVar,
     onChange: onColumnHeaderHeightCSSVarChange
-  }) : null, /* @__PURE__ */ React32.createElement(InfiniteTableFooter, null), licenseValid ? null : /* @__PURE__ */ React32.createElement(InfiniteTableLicenseFooter, null));
+  }) : null, /* @__PURE__ */ React36.createElement(InfiniteTableFooter, null), licenseValid ? null : /* @__PURE__ */ React36.createElement(InfiniteTableLicenseFooter, null));
 });
 function InfiniteTableContextProvider() {
   const { componentActions, componentState } = useComponentState();
@@ -9934,33 +10608,34 @@ function InfiniteTableContextProvider() {
     getState
   };
   useResizeObserver(scrollerDOMRef, (size) => {
-    var _a, _b;
     const bodySize = {
       width: size.width,
       height: size.height
     };
-    bodySize.width = (_b = (_a = scrollerDOMRef.current) == null ? void 0 : _a.scrollWidth) != null ? _b : bodySize.width;
     componentActions.bodySize = bodySize;
-  }, { earlyAttach: true });
-  React32.useEffect(() => {
+  }, { earlyAttach: true, debounce: 50 });
+  React36.useEffect(() => {
     return () => {
       componentState.onRowHeightCSSVarChange.destroy();
       componentState.onColumnHeaderHeightCSSVarChange.destroy();
     };
   }, []);
-  React32.useEffect(() => {
+  React36.useEffect(() => {
     if (scrollerDOMRef.current) {
       scrollerDOMRef.current.scrollTop = 0;
     }
   }, [scrollTopKey, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
-  return /* @__PURE__ */ React32.createElement(TableContext2.Provider, {
+  return /* @__PURE__ */ React36.createElement(TableContext2.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ React32.createElement(InfiniteTableComponent, null));
+  }, /* @__PURE__ */ React36.createElement(InfiniteTableComponent, null));
 }
 function InfiniteTable(props) {
-  const table = /* @__PURE__ */ React32.createElement(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ React32.createElement(InfiniteTableContextProvider, null));
-  return /* @__PURE__ */ React32.createElement(React32.StrictMode, null, table);
+  const table = /* @__PURE__ */ React36.createElement(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ React36.createElement(InfiniteTableContextProvider, null));
+  if (false) {
+    return /* @__PURE__ */ React36.createElement(React36.StrictMode, null, table);
+  }
+  return table;
 }
 InfiniteTable.defaultProps = {
   rowHeight: 40,