@infinite-table/infinite-react 0.3.12 → 0.3.15

package/index.esm.js

@@ -636,11 +636,11 @@ function debounce(fn, { wait }) {
 // src/components/InfiniteTable/index.tsx
 import {
   StrictMode,
-  createElement as createElement26,
+  createElement as createElement28,
   memo as memo11,
   useEffect as useEffect26
 } from "react";
-import { useCallback as useCallback16, useEffect as useEffect27, useState as useState15 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect27, useState as useState16 } from "react";
 
 // src/utils/join.ts
 var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
@@ -690,13 +690,16 @@ import {
   useLayoutEffect,
   useCallback
 } from "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 {
@@ -704,14 +707,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 = useRef({
     width: 0,
     height: 0
@@ -729,7 +735,7 @@ var useResizeObserver = (ref, callback, config = { earlyAttach: false }) => {
           sizeRef.current = size;
           callback2(size);
         }
-      });
+      }, { debounce: config.debounce });
     }
     return () => {
       if (disconnect) {
@@ -743,7 +749,7 @@ var useResizeObserver = (ref, callback, config = { earlyAttach: false }) => {
     }
     return () => {
     };
-  }, [ref.current, callback, config.earlyAttach]);
+  }, [ref.current, callback, config.earlyAttach, config.debounce]);
   useLayoutEffect(() => {
     if (config.earlyAttach) {
       return effectFn(callback);
@@ -872,7 +878,7 @@ import {
   useCallback as useCallback4,
   useEffect as useEffect7,
   useRef as useRef7,
-  useState as useState5
+  useState as useState4
 } from "react";
 
 // src/components/VirtualList/SpacePlaceholder.tsx
@@ -1088,6 +1094,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) => {
@@ -1123,13 +1196,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;
@@ -1293,14 +1366,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) {
@@ -1308,14 +1383,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) {
@@ -1323,14 +1400,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) {
@@ -1338,14 +1417,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;
@@ -1357,11 +1438,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;
           }
         }
@@ -1376,11 +1457,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) {
@@ -1390,19 +1471,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;
@@ -1415,19 +1496,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;
@@ -1436,31 +1517,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;
@@ -1891,33 +1972,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) => {
@@ -1945,10 +2026,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();
   }
@@ -1994,8 +2075,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;
     }
@@ -2047,14 +2128,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];
@@ -2548,18 +2631,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],
@@ -2756,7 +2852,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]) {
@@ -3010,6 +3106,9 @@ var ReactHeadlessTableRenderer = class extends Logger {
       if (this.scrolling) {
         return;
       }
+      if (false) {
+        return;
+      }
       if (this.hoverRowUpdatesInProgress.has(rowIndex)) {
         return;
       }
@@ -3025,6 +3124,9 @@ var ReactHeadlessTableRenderer = class extends Logger {
       };
       raf(() => {
         checkHoverClass();
+        if (false) {
+          return;
+        }
         this.hoverRowUpdatesInProgress.delete(rowIndex);
       });
     };
@@ -3045,12 +3147,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);
@@ -3095,39 +3195,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++) {
@@ -3361,14 +3461,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;
@@ -3405,6 +3503,9 @@ var ActiveRowIndicatorFn = (props) => {
     };
   }, [brain]);
   return /* @__PURE__ */ createElement6("div", {
+    className: ActiveIndicatorWrapperCls,
+    "data-name": "active-row"
+  }, /* @__PURE__ */ createElement6("div", {
     ref: domRef,
     "data-name": "active-row-indicator",
     className: `${baseCls} ${active ? ActiveRowIndicatorCls.visible : ActiveRowIndicatorCls.hidden}`,
@@ -3412,7 +3513,7 @@ var ActiveRowIndicatorFn = (props) => {
       transform: `translate3d(0px, ${-brain.getScrollPosition().scrollTop + state.top}px,0)`,
       height: state.rowHeight
     } : void 0
-  });
+  }));
 };
 var ActiveRowIndicator = memo4(ActiveRowIndicatorFn);
 
@@ -3421,68 +3522,61 @@ import {
   createElement as createElement7,
   memo as memo5
 } from "react";
-import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect4, useRef as useRef6, useState as useState4 } from "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
+import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect4, useRef as useRef6 } from "react";
 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] = useState4({
-    top: 0,
-    rowHeight: 0,
-    colWidth: 0,
-    left: 0
-  });
+  const [_rerenderId, rerender] = useRerender();
   const domRef = useRef6(null);
-  const stateRef = useRef6(state);
   const active = props.activeCellIndex != null && brain.getRowCount() > props.activeCellIndex[0];
   useLayoutEffect4(() => {
     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]);
   useEffect6(() => {
-    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__ */ createElement7("div", {
+    className: ActiveIndicatorWrapperCls,
+    "data-name": "active-cell"
+  }, /* @__PURE__ */ createElement7("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 = memo5(ActiveCellIndicatorFn);
 
@@ -3530,7 +3624,7 @@ function HeadlessTable(props) {
     "onRenderUpdater"
   ]);
   const domRef = useRef7(null);
-  const [scrollSize, setTotalScrollSize] = useState5({
+  const [scrollSize, setTotalScrollSize] = useState4({
     width: 0,
     height: 0
   });
@@ -3552,7 +3646,7 @@ function HeadlessTable(props) {
       };
       brain.update(size);
     };
-    const remove = setupResizeObserver(node, onResize);
+    const remove = setupResizeObserver(node, onResize, { debounce: 50 });
     return remove;
   }, []);
   const onContainerScroll = useCallback4((scrollPos) => {
@@ -3604,7 +3698,7 @@ import {
   createContext as createContext2,
   useMemo as useMemo3,
   useEffect as useEffect8,
-  useState as useState6,
+  useState as useState5,
   useRef as useRef10
 } from "react";
 
@@ -3742,14 +3836,14 @@ function forwardProps(propsToForward, props) {
 function getComponentStateRoot(config) {
   return memo6(function ComponentStateRoot(props) {
     var _a, _b;
-    const [initialSetupState] = useState6(() => {
+    const [initialSetupState] = useState5(() => {
       return config.initSetupState ? config.initSetupState() : {};
     });
     const propsToStateSetRef = useRef10(new Set());
     const propsToForward = useMemo3(() => config.forwardProps ? config.forwardProps(initialSetupState) : {}, [initialSetupState]);
     const parentState = (_b = (_a = config.getParentState) == null ? void 0 : _a.call(config)) != null ? _b : null;
     const getParentState = useLatest(parentState);
-    const [wholeState] = useState6(() => {
+    const [wholeState] = useState5(() => {
       let mappedState = {};
       if (propsToForward) {
         mappedState = forwardProps(propsToForward, props);
@@ -3918,28 +4012,28 @@ 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 = forwardRef2(function InfiniteTableBody2(props, ref) {
-  const { rootClassName: rootClassName11 } = useInternalProps();
+  const { rootClassName: rootClassName13 } = useInternalProps();
   return /* @__PURE__ */ createElement10("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)
   }));
 });
 
@@ -3949,11 +4043,11 @@ import {
   forwardRef as forwardRef3
 } from "react";
 var InfiniteTableFooter = forwardRef3(function InfiniteTableFooter2(props, ref) {
-  const { rootClassName: rootClassName11 } = useInternalProps();
+  const { rootClassName: rootClassName13 } = useInternalProps();
   return /* @__PURE__ */ createElement11("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)
   }));
 });
 
@@ -3961,10 +4055,10 @@ var InfiniteTableFooter = forwardRef3(function InfiniteTableFooter2(props, ref)
 import {
   Fragment as Fragment2,
   createContext as createContext4,
-  createElement as createElement15,
+  createElement as createElement16,
   useMemo as useMemo5
 } from "react";
-import { useCallback as useCallback7, useContext as useContext5, useEffect as useEffect11, useRef as useRef12 } from "react";
+import { useCallback as useCallback8, useContext as useContext5, useEffect as useEffect11, useRef as useRef13 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/DataSource/defaultFilterTypes.ts
@@ -4072,7 +4166,7 @@ import {
   useCallback as useCallback6,
   useMemo as useMemo4,
   useRef as useRef11,
-  useState as useState7
+  useState as useState6
 } from "react";
 
 // src/components/InfiniteTable/hooks/useInfiniteTable.ts
@@ -4126,10 +4220,9 @@ var useColumnPointerEvents = ({
   columns,
   computedRemainingSpace
 }) => {
-  const [draggingDiff, setDraggingDiff] = useState7(null);
-  const [proxyOffset, setProxyOffset] = useState7(null);
+  const [draggingDiff, setDraggingDiff] = useState6(null);
+  const [proxyOffset, setProxyOffset] = useState6(null);
   const breakpointsRef = useRef11([]);
-  const pointerMoveRef = useRef11(null);
   const didDragRef = useRef11(false);
   const initialClientPos = useRef11(null);
   const currentDropIndexRef = useRef11(null);
@@ -4205,35 +4298,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 = useCallback6((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,
@@ -4288,23 +4386,23 @@ function NumberFilterEditor(props) {
 import {
   createElement as createElement12
 } from "react";
-import { useEffect as useEffect9, useState as useState8 } from "react";
+import { useEffect as useEffect9, useState as useState7 } from "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 = {
@@ -4315,8 +4413,8 @@ var defaultLineStyle = {
 var InfiniteTableIconClassName = "InfiniteTableIcon";
 function SortIcon(props) {
   var _a;
-  const [rendered, setRendered] = useState8(true);
-  const [opacity, setOpacity] = useState8(0);
+  const [rendered, setRendered] = useState7(true);
+  const [opacity, setOpacity] = useState7(0);
   const { direction, lineWidth = 1, style, className, index } = props;
   const showIndex = index != null && index > 0;
   const size = (_a = props.size) != null ? _a : 16;
@@ -4395,20 +4493,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,
@@ -4416,7 +4514,6 @@ function InfiniteTableCellFn(props) {
     contentClassName,
     afterChildren,
     beforeChildren,
-    offset,
     cellType,
     cssPosition: _cssPosition,
     renderChildren
@@ -4424,7 +4521,6 @@ function InfiniteTableCellFn(props) {
     "cssEllipsis",
     "virtualized",
     "skipColumnShifting",
-    "offsetProperty",
     "contentStyle",
     "column",
     "domRef",
@@ -4432,7 +4528,6 @@ function InfiniteTableCellFn(props) {
     "contentClassName",
     "afterChildren",
     "beforeChildren",
-    "offset",
     "cellType",
     "cssPosition",
     "renderChildren"
@@ -4441,10 +4536,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 {
@@ -4474,13 +4569,13 @@ var InfiniteTableCell = memo7(InfiniteTableCellFn);
 import {
   createElement as createElement14
 } from "react";
-import { useEffect as useEffect10, useState as useState9 } from "react";
+import { useEffect as useEffect10, useState as useState8 } from "react";
 var { rootClassName: rootClassName6 } = internalProps;
 var InfiniteTableColumnHeaderFilterClassName = `${rootClassName6}HeaderCell__filter`;
 var stopPropagation = (e) => e.stopPropagation();
 function InfiniteTableColumnHeaderFilter(props) {
   var _a, _b, _c, _d;
-  const [theValue, setTheValue] = useState9((_b = (_a = props.columnFilterValue) == null ? void 0 : _a.filterValue) != null ? _b : "");
+  const [theValue, setTheValue] = useState8((_b = (_a = props.columnFilterValue) == null ? void 0 : _a.filterValue) != null ? _b : "");
   const onInputChange = (filterValue) => {
     setTheValue(filterValue);
     props.onChange(filterValue);
@@ -4528,10 +4623,547 @@ function InfiniteTableColumnHeaderFilterEmpty() {
   });
 }
 
+// src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
+import {
+  createElement as createElement15
+} from "react";
+import { useCallback as useCallback7 } from "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
+import React20, { useRef as useRef12, useState as useState9 } from "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 InfiniteTableHeaderCellResizeHandleCls = `${rootClassName7}HeaderCell_ResizeHandle`;
+function ResizeHandleFn(props) {
+  const domRef = useRef12(null);
+  const [constrained, setConstrained] = useState9(false);
+  const constrainedRef = useRef12(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__ */ React20.createElement("div", {
+    ref: domRef,
+    className: `${InfiniteTableHeaderCellResizeHandleCls} ${ResizeHandleCls}`,
+    onPointerDown
+  }, /* @__PURE__ */ React20.createElement("div", {
+    className: ResizeHandleDraggerClsRecipe({
+      constrained
+    })
+  }));
+}
+var ResizeHandle = React20.memo(ResizeHandleFn);
+
+// src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
+function useColumnResizeHandle(column) {
+  const {
+    computed: { computedVisibleColumns },
+    componentState: { domRef },
+    getState,
+    getComputed,
+    componentActions
+  } = useInfiniteTable();
+  const computeResizeForDiff = useCallback7(({
+    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 = useCallback7(({
+    diff,
+    shareSpaceOnResize
+  }) => {
+    const { columnSizing, reservedWidth } = computeResizeForDiff({
+      diff,
+      shareSpaceOnResize
+    });
+    if (!shareSpaceOnResize) {
+      componentActions.viewportReservedWidth = reservedWidth;
+    }
+    componentActions.columnSizing = columnSizing;
+  }, []);
+  const resizeHandle = column.computedResizable ? /* @__PURE__ */ createElement15(ResizeHandle, {
+    columns: computedVisibleColumns,
+    columnIndex: column.computedVisibleIndex,
+    computeResize: computeResizeForDiff,
+    onResize: onColumnResize
+  }) : null;
+  return resizeHandle;
+}
+
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
 var InfiniteTableHeaderCellContext = createContext4(null);
-var { rootClassName: rootClassName7 } = internalProps;
-var InfiniteTableHeaderCellClassName = `${rootClassName7}HeaderCell`;
+var { rootClassName: rootClassName8 } = internalProps;
+var InfiniteTableHeaderCellClassName = `${rootClassName8}HeaderCell`;
 function InfiniteTableHeaderCell(props) {
   var _a, _b, _c, _d, _e;
   const column = props.column;
@@ -4539,13 +5171,13 @@ function InfiniteTableHeaderCell(props) {
   const { onResize, height, width, headerOptions } = props;
   const sortInfo = column.computedSortInfo;
   let header = column.header;
-  const ref = useCallback7((node) => {
+  const ref = useCallback8((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__ */ createElement15(SortIcon, {
+  const sortTool = column.computedSorted || alwaysShow ? /* @__PURE__ */ createElement16(SortIcon, {
     index: column.computedMultiSort ? column.computedSortIndex + 1 : void 0,
     className: `${InfiniteTableHeaderCellClassName}__sort-icon ${HeaderSortIconCls} ${HeaderSortIconRecipe({
       align: column.align || "start"
@@ -4562,15 +5194,15 @@ function InfiniteTableHeaderCell(props) {
   const align = column.align || "start";
   const renderChildren = () => {
     if (header instanceof Function) {
-      header = /* @__PURE__ */ createElement15(RenderHookComponent, {
+      header = /* @__PURE__ */ createElement16(RenderHookComponent, {
         render: header,
         renderParam
       });
     }
     header = header != null ? header : column.name;
-    return /* @__PURE__ */ createElement15(Fragment2, null, align === "end" ? sortTool : null, header, align !== "end" ? sortTool : null);
+    return /* @__PURE__ */ createElement16(Fragment2, null, align === "end" ? sortTool : null, header, align !== "end" ? sortTool : null);
   };
-  const domRef = useRef12(null);
+  const domRef = useRef13(null);
   const {
     computed: {
       computedRemainingSpace,
@@ -4597,7 +5229,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,
@@ -4605,7 +5237,7 @@ function InfiniteTableHeaderCell(props) {
   });
   let draggingProxy = null;
   if (dragging) {
-    draggingProxy = /* @__PURE__ */ createElement15("div", {
+    draggingProxy = /* @__PURE__ */ createElement16("div", {
       className: `${InfiniteTableHeaderCellClassName}Proxy ${HeaderCellProxy}`,
       style: {
         position: "absolute",
@@ -4622,7 +5254,7 @@ function InfiniteTableHeaderCell(props) {
   const contentRecipeVariants = {
     filtered: column.computedFiltered
   };
-  const setFilterValue = useCallback7((filterValue) => {
+  const setFilterValue = useCallback8((filterValue) => {
     var _a2;
     const state = getDataSourceState();
     let newFilterValue = (_a2 = state.filterValue) != null ? _a2 : [];
@@ -4683,10 +5315,10 @@ function InfiniteTableHeaderCell(props) {
   ]);
   const filterType = column.computedFilterType;
   const FilterEditor = filterEditors[filterType] || defaultFilterEditors[filterType] || StringFilterEditor;
-  const resizeHandle = null;
-  return /* @__PURE__ */ createElement15(ContextProvider, {
+  const resizeHandle = useColumnResizeHandle(column);
+  return /* @__PURE__ */ createElement16(ContextProvider, {
     value: renderParam
-  }, /* @__PURE__ */ createElement15(InfiniteTableCell, {
+  }, /* @__PURE__ */ createElement16(InfiniteTableCell, {
     domRef: ref,
     cellType: "header",
     column,
@@ -4696,12 +5328,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__ */ createElement15(Fragment2, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ createElement15(InfiniteTableColumnHeaderFilter, {
+    afterChildren: /* @__PURE__ */ createElement16(Fragment2, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ createElement16(InfiniteTableColumnHeaderFilter, {
       filterEditor: FilterEditor,
       filterTypes,
       onChange: debouncedOnFilterValueChange,
@@ -4709,7 +5340,7 @@ function InfiniteTableHeaderCell(props) {
       columnLabel: column.field || column.name || column.id,
       columnFilterValue: column.computedFilterValue,
       columnHeaderHeight
-    }) : /* @__PURE__ */ createElement15(InfiniteTableColumnHeaderFilterEmpty, null) : null, resizeHandle),
+    }) : /* @__PURE__ */ createElement16(InfiniteTableColumnHeaderFilterEmpty, null) : null, resizeHandle),
     renderChildren
   }), draggingProxy);
 }
@@ -4720,8 +5351,8 @@ function useInfiniteHeaderCell() {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
 import {
-  createElement as createElement18,
-  useCallback as useCallback9,
+  createElement as createElement20,
+  useCallback as useCallback11,
   useMemo as useMemo6
 } from "react";
 
@@ -4809,7 +5440,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") {
@@ -4834,7 +5465,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") {
@@ -4846,40 +5477,192 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 import {
-  createElement as createElement17,
+  createElement as createElement19,
   memo as memo8
 } from "react";
-import { useCallback as useCallback8, useEffect as useEffect12, useRef as useRef13 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect12, useRef as useRef15 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
 import {
-  createElement as createElement16
+  createElement as createElement18
+} from "react";
+
+// src/components/InfiniteTable/components/InfiniteTableHeader/useColumnGroupResizeHandle.tsx
+import {
+  createElement as createElement17
 } from "react";
+import { useCallback as useCallback9 } from "react";
+
+// src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/GroupResizeHandle.tsx
+import React23, { useRef as useRef14, useState as useState10 } from "react";
+var { rootClassName: rootClassName9 } = internalProps;
+var InfiniteTableHeaderCellResizeHandleCls2 = `${rootClassName9}HeaderCell_ResizeHandle`;
+function GroupResizeHandleFn(props) {
+  const domRef = useRef14(null);
+  const [constrained, setConstrained] = useState10(false);
+  const constrainedRef = useRef14(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__ */ React23.createElement("div", {
+    ref: domRef,
+    className: `${InfiniteTableHeaderCellResizeHandleCls2} ${ResizeHandleCls}`,
+    onPointerDown
+  }, /* @__PURE__ */ React23.createElement("div", {
+    style: props.style,
+    className: ResizeHandleDraggerClsRecipe({
+      constrained
+    })
+  }));
+}
+var GroupResizeHandle = React23.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 = useCallback9((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 = useCallback9((diff) => {
+    const { columnSizing, reservedWidth } = computeResizeForDiff(diff);
+    componentActions.viewportReservedWidth = reservedWidth;
+    componentActions.columnSizing = columnSizing;
+  }, []);
+  const groupResizable = groupColumns.some((c) => c.computedResizable);
+  const resizeHandle = groupResizable ? /* @__PURE__ */ createElement17(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 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__ */ createElement16("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__ */ createElement18("div", {
     ref: props.domRef,
     "data-group-id": columnGroup.uniqueGroupId,
     className: join(HeaderGroupCls, TableHeaderGroupClassName),
-    style: { width, height }
-  }, /* @__PURE__ */ createElement16("div", {
+    style: { width, height },
+    "data-z-index": zIndex2
+  }, /* @__PURE__ */ createElement18("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,
@@ -4901,7 +5684,7 @@ function InfiniteTableHeaderFn(props) {
     const removeOnScroll = brain.onScroll(onScroll);
     return removeOnScroll;
   }, [brain]);
-  const domRef = useRef13(null);
+  const domRef = useRef15(null);
   const headerCls = HeaderClsRecipe({
     overflow: false,
     virtualized: true
@@ -4911,7 +5694,7 @@ function InfiniteTableHeaderFn(props) {
     className: join(TableHeaderClassName, `${TableHeaderClassName}--virtualized`, className, headerCls),
     style: __spreadProps(__spreadValues({}, style), { height: columnHeaderHeight })
   };
-  const renderCell = useCallback8((params) => {
+  const renderCell = useCallback10((params) => {
     const {
       rowIndex,
       colIndex,
@@ -4936,7 +5719,9 @@ function InfiniteTableHeaderFn(props) {
         computedWidth: colGroupItem.computedWidth,
         groupOffset: colGroupItem.groupOffset
       });
-      return /* @__PURE__ */ createElement17(InfiniteTableHeaderGroup, {
+      return /* @__PURE__ */ createElement19(InfiniteTableHeaderGroup, {
+        bodyBrain,
+        columnGroupsMaxDepth,
         domRef: domRef2,
         columns: columns2,
         width: widthWithColspan,
@@ -4944,7 +5729,7 @@ function InfiniteTableHeaderFn(props) {
         columnGroup: computedColumnGroup
       });
     }
-    return /* @__PURE__ */ createElement17(InfiniteTableHeaderCell, {
+    return /* @__PURE__ */ createElement19(InfiniteTableHeaderCell, {
       domRef: domRef2,
       column,
       headerOptions,
@@ -4960,7 +5745,8 @@ function InfiniteTableHeaderFn(props) {
     columnGroupsMaxDepth,
     showColumnFilters
   ]);
-  return /* @__PURE__ */ createElement17("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement17(RawTable, {
+  return /* @__PURE__ */ createElement19("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement19(RawTable, {
+    name: "header",
     renderCell,
     brain: headerBrain,
     cellHoverClassNames: []
@@ -4970,7 +5756,7 @@ var InfiniteTableHeader = memo8(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,
@@ -4995,7 +5781,7 @@ function TableHeaderWrapper(props) {
     }
     return buildColumnAndGroupTree(computedVisibleColumns, computedColumnGroups, columnGroupsDepthsMap, columnGroupsMaxDepth);
   }, [computedVisibleColumns, computedColumnGroups, columnGroupsDepthsMap]);
-  const cellspan = useCallback9(({ rowIndex, colIndex }) => {
+  const cellspan = useCallback11(({ rowIndex, colIndex }) => {
     const column = computedVisibleColumns[colIndex];
     const rowspan2 = 1;
     const colspan2 = 1;
@@ -5028,12 +5814,12 @@ function TableHeaderWrapper(props) {
     rows,
     columnGroupsDepthsMap
   ]);
-  const rowspan = useCallback9(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).rowspan, [cellspan]);
-  const colspan = useCallback9(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).colspan, [cellspan]);
-  const rowHeight = useCallback9((index) => {
+  const rowspan = useCallback11(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).rowspan, [cellspan]);
+  const colspan = useCallback11(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).colspan, [cellspan]);
+  const rowHeight = useCallback11((index) => {
     return showColumnFilters ? index < rows - 1 ? columnHeaderHeight : 2 * columnHeaderHeight : columnHeaderHeight;
   }, [rows, showColumnFilters, columnHeaderHeight]);
-  useMatrixBrain(brain, {
+  useMatrixBrain(headerBrain, {
     colWidth: columnSize,
     rowHeight,
     rows,
@@ -5045,21 +5831,22 @@ function TableHeaderWrapper(props) {
     fixedColsEnd: computedPinnedEndColumns.length,
     fixedColsStart: computedPinnedStartColumns.length
   });
-  const header = /* @__PURE__ */ createElement18(InfiniteTableHeader, {
+  const header = /* @__PURE__ */ createElement20(InfiniteTableHeader, {
     columns: computedVisibleColumns,
-    brain,
+    headerBrain,
+    bodyBrain,
     columnHeaderHeight: height,
     columnGroupsMaxDepth,
     columnAndGroupTreeInfo
   });
-  const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ createElement18("div", {
+  const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ createElement20("div", {
     className: HeaderScrollbarPlaceholderCls,
     style: {
       zIndex: 1e3,
       width: getScrollbarWidth()
     }
   }) : null;
-  return /* @__PURE__ */ createElement18("div", {
+  return /* @__PURE__ */ createElement20("div", {
     className: HeaderWrapperCls,
     style: {
       height
@@ -5069,10 +5856,10 @@ function TableHeaderWrapper(props) {
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
 import {
-  createElement as createElement19,
+  createElement as createElement21,
   forwardRef as forwardRef4,
-  useCallback as useCallback10,
-  useRef as useRef14
+  useCallback as useCallback12,
+  useRef as useRef16
 } from "react";
 import { useEffect as useEffect13 } from "react";
 
@@ -5082,17 +5869,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 = {
@@ -5122,9 +5905,9 @@ var enforceStyle = (node, style) => {
   }
 };
 var InfiniteTableLicenseFooter = forwardRef4(function InfiniteTableLicenseFooter2(props, ref) {
-  const { rootClassName: rootClassName11 } = useInternalProps();
-  const domRef = useRef14(null);
-  const domCallback = useCallback10((node) => {
+  const { rootClassName: rootClassName13 } = useInternalProps();
+  const domRef = useRef16(null);
+  const domCallback = useCallback12((node) => {
     domRef.current = node;
     if (!ref) {
       return;
@@ -5149,12 +5932,12 @@ var InfiniteTableLicenseFooter = forwardRef4(function InfiniteTableLicenseFooter
       clearInterval(intervalId);
     };
   }, []);
-  return /* @__PURE__ */ createElement19("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ createElement21("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__ */ createElement19("a", {
+  }), "Powered by", " ", /* @__PURE__ */ createElement21("a", {
     href: "https://infinite-table.com",
     rel: "noopener noreferrer",
     role: "link",
@@ -5165,13 +5948,13 @@ var InfiniteTableLicenseFooter = forwardRef4(function InfiniteTableLicenseFooter
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
 import {
   createContext as createContext5,
-  createElement as createElement20,
+  createElement as createElement22,
   memo as memo9
 } from "react";
-import { useCallback as useCallback11, useContext as useContext6, useMemo as useMemo7 } from "react";
-var { rootClassName: rootClassName9 } = internalProps;
+import { useCallback as useCallback13, useContext as useContext6, useMemo as useMemo7 } from "react";
+var { rootClassName: rootClassName11 } = internalProps;
 var InfiniteTableColumnCellContext = createContext5(null);
-var InfiniteTableColumnCellClassName = `${rootClassName9}ColumnCell`;
+var InfiniteTableColumnCellClassName = `${rootClassName11}ColumnCell`;
 function isColumnWithField(c) {
   return typeof c.field === "string";
 }
@@ -5185,9 +5968,7 @@ function InfiniteTableColumnCellFn(props) {
     column,
     onMouseLeave,
     onMouseEnter,
-    offsetProperty,
     toggleGroupRow,
-    virtualized,
     rowIndex,
     rowHeight,
     domRef,
@@ -5195,7 +5976,7 @@ function InfiniteTableColumnCellFn(props) {
     showZebraRows
   } = props;
   if (!column) {
-    return /* @__PURE__ */ createElement20("div", {
+    return /* @__PURE__ */ createElement22("div", {
       ref: domRef
     }, "no column");
   }
@@ -5228,7 +6009,7 @@ function InfiniteTableColumnCellFn(props) {
       value
     });
   }
-  const onClick = useCallback11(() => {
+  const onClick = useCallback13(() => {
     if (keyboardNavigation === "row") {
       componentActions.activeRowIndex = rowIndex;
       return;
@@ -5268,7 +6049,7 @@ function InfiniteTableColumnCellFn(props) {
     isGroupRow,
     rowIndex,
     toggleGroupRow,
-    toggleCurrentGroupRow: useCallback11(() => {
+    toggleCurrentGroupRow: useCallback13(() => {
       if (!rowInfo.isGroupRow) {
         return;
       }
@@ -5277,13 +6058,13 @@ function InfiniteTableColumnCellFn(props) {
     groupBy: computedDataSource.groupBy,
     pivotBy: computedDataSource.pivotBy
   });
-  const renderChildren = useCallback11(() => {
+  const renderChildren = useCallback13(() => {
     if (hidden) {
       return null;
     }
     const renderFn = column.render || column.renderValue;
     if (renderFn) {
-      return /* @__PURE__ */ createElement20(RenderHookComponent, {
+      return /* @__PURE__ */ createElement22(RenderHookComponent, {
         render: renderFn,
         renderParam
       });
@@ -5300,18 +6081,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 = useMemo7(() => 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,
@@ -5321,9 +6099,9 @@ function InfiniteTableColumnCellFn(props) {
     renderChildren
   };
   const ContextProvider = InfiniteTableColumnCellContext.Provider;
-  return /* @__PURE__ */ createElement20(ContextProvider, {
+  return /* @__PURE__ */ createElement22(ContextProvider, {
     value: renderParam
-  }, /* @__PURE__ */ createElement20(InfiniteTableCell, __spreadValues({}, cellProps)));
+  }, /* @__PURE__ */ createElement22(InfiniteTableCell, __spreadValues({}, cellProps)));
 }
 var InfiniteTableColumnCell = memo9(InfiniteTableColumnCellFn);
 function useInfiniteColumnCell() {
@@ -5332,32 +6110,32 @@ function useInfiniteColumnCell() {
 }
 
 // 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
 import {
-  createElement as createElement21,
+  createElement as createElement23,
   memo as memo10
 } from "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__ */ createElement21("div", {
+  return /* @__PURE__ */ createElement23("div", {
     className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls3}`
-  }, /* @__PURE__ */ createElement21("div", {
+  }, /* @__PURE__ */ createElement23("div", {
     className: `${LoadMaskOverlayCls} ${baseCls3}-Overlay`
-  }), /* @__PURE__ */ createElement21("div", {
+  }), /* @__PURE__ */ createElement23("div", {
     className: `${LoadMaskTextCls} ${baseCls3}-Text`
   }, children));
 }
@@ -5428,8 +6206,8 @@ function getImperativeApi(getState, getComputed, getDataSourceState, componentAc
 // src/components/InfiniteTable/hooks/useAutoSizeColumns.ts
 import {
   useEffect as useEffect14,
-  useRef as useRef15,
-  useState as useState10
+  useRef as useRef17,
+  useState as useState11
 } from "react";
 var OFFSET = 10;
 function getColumnContentMaxWidths(domRef, options) {
@@ -5466,9 +6244,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;
@@ -5490,10 +6274,10 @@ function useAutoSizeColumns() {
     componentActions,
     componentState: { domRef, ready, autoSizeColumnsKey, brain }
   } = useComponentState();
-  const [refreshId, setRefreshId] = useState10(0);
+  const [refreshId, setRefreshId] = useState11(0);
   const theKey = typeof autoSizeColumnsKey === "object" ? autoSizeColumnsKey.key : autoSizeColumnsKey;
   const getTheKey = useLatest(theKey);
-  const lastExecutedIdentifierRef = useRef15(null);
+  const lastExecutedIdentifierRef = useRef17(null);
   useEffect14(() => {
     const key = getTheKey();
     if (key == null) {
@@ -5552,8 +6336,8 @@ function useAutoSizeColumns() {
 }
 
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
-import { useCallback as useCallback12, useEffect as useEffect15, useRef as useRef16 } from "react";
-import React27 from "react";
+import { useCallback as useCallback14, useEffect as useEffect15, useRef as useRef18 } from "react";
+import React31 from "react";
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
 function useYourBrain(param) {
@@ -5623,7 +6407,7 @@ function useCellRendering(param) {
     bodySize,
     rowspan
   });
-  const scrollTopMaxRef = useRef16(0);
+  const scrollTopMaxRef = useRef18(0);
   useEffect15(() => {
     return brain.onRenderCountChange(() => {
       scrollTopMaxRef.current = brain.scrollTopMax;
@@ -5660,7 +6444,7 @@ function useCellRendering(param) {
   useEffect15(() => {
     rerender();
   }, [dataSourceState]);
-  const renderCell = useCallback12((params) => {
+  const renderCell = useCallback14((params) => {
     const {
       rowIndex,
       colIndex,
@@ -5695,7 +6479,7 @@ function useCellRendering(param) {
       rowStyle,
       rowClassName
     };
-    return /* @__PURE__ */ React27.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
+    return /* @__PURE__ */ React31.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
   }, [
     rowHeight,
     getData,
@@ -5713,7 +6497,7 @@ function useCellRendering(param) {
 }
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-import { useCallback as useCallback15, useEffect as useEffect25, useState as useState14 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect25, useState as useState15 } from "react";
 
 // src/components/InfiniteTable/hooks/useColumnGroups.ts
 import { useEffect as useEffect17 } from "react";
@@ -5882,10 +6666,10 @@ function useColumnRowspan(computedVisibleColumns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnSizeFn.ts
-import { useCallback as useCallback13 } from "react";
+import { useCallback as useCallback15 } from "react";
 var debug4 = dbg("useColumnSizeFn");
 function useColumnSizeFn(columns) {
-  const columnSize = useCallback13((index) => {
+  const columnSize = useCallback15((index) => {
     const column = columns[index];
     if (false) {
       debug4("cannot find column at index", index, columns);
@@ -5900,14 +6684,9 @@ import { useEffect as useEffect22, useMemo as useMemo10 } from "react";
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
 import {
-  createElement as createElement24
+  createElement as createElement26
 } from "react";
 
-// src/utils/stripVar.ts
-function stripVar(cssVariableWithVarString) {
-  return cssVariableWithVarString.slice(4, -1);
-}
-
 // src/components/DataSource/state/rowInfoStatus.ts
 var showLoadingIcon = (rowInfo) => {
   if (rowInfo.dataSourceHasGrouping) {
@@ -5918,21 +6697,21 @@ var showLoadingIcon = (rowInfo) => {
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
 import {
-  createElement as createElement22,
+  createElement as createElement24,
   useEffect as useEffect18
 } from "react";
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "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] = useState11((_a = props.expanded) != null ? _a : props.defaultExpanded);
+  const [expanded, setExpanded] = useState12((_a = props.expanded) != null ? _a : props.defaultExpanded);
   const onClick = () => {
     var _a2;
     (_a2 = props.onChange) == null ? void 0 : _a2.call(props, !expanded);
@@ -5945,7 +6724,7 @@ function ExpanderIcon(props) {
       setExpanded(props.expanded);
     }
   }, [props.expanded]);
-  return /* @__PURE__ */ createElement22("svg", {
+  return /* @__PURE__ */ createElement24("svg", {
     "data-name": "expander-icon",
     xmlns: "http://www.w3.org/2000/svg",
     height: `${size}px`,
@@ -5956,22 +6735,22 @@ function ExpanderIcon(props) {
     className: join(props.className, ExpanderIconCls, ExpanderIconClsVariants({
       expanded
     }), "InfiniteIcon", "InfiniteIcon-expander", `InfiniteIcon-expander--${expanded ? "expanded" : "collapsed"}`)
-  }, /* @__PURE__ */ createElement22("path", {
+  }, /* @__PURE__ */ createElement24("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
 import {
-  createElement as createElement23
+  createElement as createElement25
 } from "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__ */ createElement23("svg", {
+  return /* @__PURE__ */ createElement25("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     style: {
       margin: "auto",
@@ -5983,14 +6762,14 @@ var LoadingIcon = (props) => {
     viewBox: "0 0 100 100",
     preserveAspectRatio: "xMidYMid",
     className: join(props.className, LoadingIconCls, "InfiniteIcon", "InfiniteIcon-loading")
-  }, /* @__PURE__ */ createElement23("circle", {
+  }, /* @__PURE__ */ createElement25("circle", {
     cx: "50",
     cy: "50",
     fill: "none",
     strokeWidth: "10",
     r: "35",
     strokeDasharray: "164.93361431346415 56.97787143782138"
-  }, /* @__PURE__ */ createElement23("animateTransform", {
+  }, /* @__PURE__ */ createElement25("animateTransform", {
     attributeName: "transform",
     type: "rotate",
     repeatCount: "indefinite",
@@ -6010,7 +6789,7 @@ function getGroupColumnRender({
     var _a, _b, _c;
     let { value, rowInfo, column, groupBy, pivotBy } = renderOptions;
     if (column.renderValue) {
-      value = /* @__PURE__ */ createElement24(RenderHookComponent, {
+      value = /* @__PURE__ */ createElement26(RenderHookComponent, {
         render: column.renderValue,
         renderParam: renderOptions
       });
@@ -6040,22 +6819,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__ */ createElement24(LoadingIcon, null);
+      icon = /* @__PURE__ */ createElement26(LoadingIcon, null);
     } else if (showExpanderIcon) {
-      const defaultIcon = /* @__PURE__ */ createElement24(ExpanderIcon, {
+      const defaultIcon = /* @__PURE__ */ createElement26(ExpanderIcon, {
         expanded: !collapsed,
         onChange: () => {
           toggleGroupRow(groupKeys);
         }
       });
-      icon = column.renderGroupIcon ? /* @__PURE__ */ createElement24(RenderHookComponent, {
+      icon = column.renderGroupIcon ? /* @__PURE__ */ createElement26(RenderHookComponent, {
         render: column.renderGroupIcon,
         renderParam: Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)
       }) : defaultIcon;
     }
-    return /* @__PURE__ */ createElement24("div", {
+    return /* @__PURE__ */ createElement26("div", {
       className: join(display.flex, alignItems.center)
-    }, icon, /* @__PURE__ */ createElement24("div", {
+    }, icon, /* @__PURE__ */ createElement26("div", {
       className: cssEllipsisClassName
     }, value != null ? value : null));
   };
@@ -6100,9 +6879,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__ */ createElement24(LoadingIcon, null);
+        icon = /* @__PURE__ */ createElement26(LoadingIcon, null);
       } else if (showExpanderIcon) {
-        const defaultIcon = /* @__PURE__ */ createElement24(ExpanderIcon, {
+        const defaultIcon = /* @__PURE__ */ createElement26(ExpanderIcon, {
           expanded: !collapsed,
           onChange: () => {
             if (!rowInfo.isGroupRow) {
@@ -6117,9 +6896,9 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
           icon = column.renderGroupIcon(renderParam);
         }
       }
-      return /* @__PURE__ */ createElement24("div", {
+      return /* @__PURE__ */ createElement26("div", {
         className: join(display.flex, alignItems.center, GroupRowExpanderCls)
-      }, icon, /* @__PURE__ */ createElement24("div", {
+      }, icon, /* @__PURE__ */ createElement26("div", {
         className: cssEllipsisClassName
       }, value != null ? value : null));
     }
@@ -6135,10 +6914,10 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
 }
 
 // src/components/InfiniteTable/hooks/useEffectWithRaf.ts
-import { useEffect as useEffect19, useRef as useRef17 } from "react";
+import { useEffect as useEffect19, useRef as useRef19 } from "react";
 function useEffectWithRaf(fn, deps) {
-  const rafId = useRef17(0);
-  const removeFnRaf = useRef17();
+  const rafId = useRef19(0);
+  const removeFnRaf = useRef19();
   useEffect19(() => {
     rafId.current = requestAnimationFrame(() => {
       removeFnRaf.current = fn();
@@ -6156,7 +6935,7 @@ function useEffectWithRaf(fn, deps) {
 }
 
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
-import { useCallback as useCallback14 } from "react";
+import { useCallback as useCallback16 } from "react";
 
 // src/utils/groupAndPivot/index.ts
 var LAZY_ROOT_KEY_FOR_GROUPS = "____root____";
@@ -6611,7 +7390,7 @@ function enhancedFlatten(param) {
 // src/components/DataSource/index.tsx
 import {
   Fragment as Fragment3,
-  createElement as createElement25
+  createElement as createElement27
 } from "react";
 
 // src/utils/multisort/sortTypes.ts
@@ -6800,15 +7579,15 @@ var GroupRowsState = class {
 };
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-import { useEffect as useEffect21, useMemo as useMemo9, useRef as useRef19, useState as useState12 } from "react";
+import { useEffect as useEffect21, useMemo as useMemo9, useRef as useRef21, useState as useState13 } from "react";
 
 // src/components/hooks/useEffectWithChanges.ts
-import { useEffect as useEffect20, useRef as useRef18 } from "react";
+import { useEffect as useEffect20, useRef as useRef20 } from "react";
 function useEffectWithChanges(fn, deps) {
-  const prevRef = useRef18({});
-  const oldValuesRef = useRef18({});
+  const prevRef = useRef20({});
+  const oldValuesRef = useRef20({});
   const oldValues = oldValuesRef.current;
-  const changesRef = useRef18({});
+  const changesRef = useRef20({});
   const changes = changesRef.current;
   const useEffectDeps = [];
   for (const k in deps) {
@@ -7089,11 +7868,11 @@ function useLoadData() {
     livePaginationCursor,
     cursorId: stateCursorId
   } = componentState;
-  const [scrollbars, setScrollbars] = useState12({
+  const [scrollbars, setScrollbars] = useState13({
     vertical: false,
     horizontal: false
   });
-  const scrollbarsRef = useRef19(scrollbars);
+  const scrollbarsRef = useRef21(scrollbars);
   useEffect21(() => {
     notifyScrollbarsChange.onChange((scrollbars2) => {
       if (!scrollbars2) {
@@ -7150,7 +7929,7 @@ function useLoadData() {
     filterValue,
     cursorId: livePagination ? stateCursorId : null
   };
-  const initialRef = useRef19(true);
+  const initialRef = useRef21(true);
   useLazyLoadRange();
   useEffectWithChanges(() => {
     const componentState2 = getComponentState();
@@ -7191,7 +7970,7 @@ function useLazyLoadRange() {
     dataArray,
     scrollStopDelayUpdatedByTable
   } = componentState;
-  const latestRenderRangeRef = useRef19(null);
+  const latestRenderRangeRef = useRef21(null);
   const loadRange = (renderRange, cache = getComponentState().lazyLoadCacheOfLoadedBatches) => {
     const componentState2 = getComponentState();
     renderRange = renderRange || latestRenderRangeRef.current;
@@ -8023,7 +8802,7 @@ function DataSourceWithContext(props) {
   if (typeof children === "function") {
     children = children(computedValues);
   }
-  return /* @__PURE__ */ createElement25(Fragment3, null, children);
+  return /* @__PURE__ */ createElement27(Fragment3, null, children);
 }
 var DataSourceRoot = getComponentStateRoot({
   initSetupState,
@@ -8046,14 +8825,14 @@ function DataSourceCmp({ children }) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
-  return /* @__PURE__ */ createElement25(DataSourceContext.Provider, {
+  return /* @__PURE__ */ createElement27(DataSourceContext.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ createElement25(DataSourceWithContext, {
+  }, /* @__PURE__ */ createElement27(DataSourceWithContext, {
     children
   }));
 }
 function DataSource(props) {
-  return /* @__PURE__ */ createElement25(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ createElement25(DataSourceCmp, {
+  return /* @__PURE__ */ createElement27(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ createElement27(DataSourceCmp, {
     children: props.children
   }));
 }
@@ -8061,7 +8840,7 @@ function DataSource(props) {
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
 function useToggleGroupRow() {
   const { getState: getDataSourceState, componentActions: dataSourceActions } = useDataSourceContextValue();
-  const toggleGroupRow = useCallback14((groupKeys) => {
+  const toggleGroupRow = useCallback16((groupKeys) => {
     const state = getDataSourceState();
     const newState = new GroupRowsState(state.groupRowsState);
     newState.toggleGroupRow(groupKeys);
@@ -8479,144 +9258,6 @@ function getColumnsWhenGrouping(params) {
 // src/components/InfiniteTable/hooks/useComputedVisibleColumns.ts
 import { useMemo as useMemo11 } from "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)
-  };
-};
-
 // src/components/InfiniteTable/utils/adjustColumnOrderForPinning.ts
 var order = ["start", void 0, "end"];
 var adjustColumnOrderForPinning = (columnOrder, columnPinning) => {
@@ -8809,8 +9450,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;
@@ -9052,6 +9693,7 @@ var useComputedVisibleColumns = ({
     columnMinWidth,
     columnMaxWidth,
     columnDefaultWidth,
+    viewportReservedWidth,
     sortable,
     sortInfo,
     setSortInfo,
@@ -9060,6 +9702,7 @@ var useComputedVisibleColumns = ({
     columnOrder,
     columnVisibility,
     columnVisibilityAssumeVisible,
+    resizableColumns,
     pinnedEndMaxWidth,
     pinnedStartMaxWidth,
     columnSizing,
@@ -9089,7 +9732,7 @@ var useComputedVisibleColumns = ({
 };
 
 // src/components/InfiniteTable/hooks/useScrollbars.ts
-import { useState as useState13, useEffect as useEffect24, useLayoutEffect as useLayoutEffect6 } from "react";
+import { useState as useState14, useEffect as useEffect24, useLayoutEffect as useLayoutEffect6 } from "react";
 var INITIAL_SCROLLBARS = {
   vertical: false,
   horizontal: false
@@ -9097,7 +9740,7 @@ var INITIAL_SCROLLBARS = {
 function useScrollbars(brain) {
   const { getComponentState: getInfiniteTableState } = useComponentState();
   const { getState: getDataSourceState } = useDataSourceContextValue();
-  const [scrollbars, setScrollbars] = useState13(INITIAL_SCROLLBARS);
+  const [scrollbars, setScrollbars] = useState14(INITIAL_SCROLLBARS);
   useEffect24(() => {
     return brain.onRenderCountChange(() => {
       const { scrollTopMax, scrollLeftMax } = brain;
@@ -9138,7 +9781,7 @@ function useComputed() {
     bodySize,
     showSeparatePivotColumnForSingleAggregation
   } = componentState;
-  useState14(() => {
+  useState15(() => {
     componentState.onRowHeightCSSVarChange.onChange((rowHeight) => {
       if (rowHeight) {
         componentActions.rowHeight = rowHeight;
@@ -9156,7 +9799,7 @@ function useComputed() {
   const { multiSort, filterValue } = dataSourceState;
   useColumnGroups();
   const { toggleGroupRow } = useColumnsWhen();
-  const setSortInfo = useCallback15((sortInfo) => {
+  const setSortInfo = useCallback17((sortInfo) => {
     var _a2;
     const newSortInfo = getDataSourceState().multiSort ? sortInfo : (_a2 = sortInfo[0]) != null ? _a2 : null;
     dataSourceActions.sortInfo = newSortInfo;
@@ -9234,6 +9877,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 {
@@ -9244,9 +9891,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;
   });
@@ -9301,7 +9963,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);
@@ -9477,7 +10139,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo12(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.3.12"
+      version: "0.3.15"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -9608,10 +10270,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);
   }
@@ -9702,6 +10377,7 @@ function initSetupState2() {
   });
   if (false) {
     globalThis.brain = brain;
+    globalThis.headerBrain = headerBrain;
   }
   const { renderer, onRenderUpdater } = createRenderer2(brain);
   brain.onAvailableSizeChange((size) => {
@@ -9720,6 +10396,7 @@ function initSetupState2() {
     domRef: createRef(),
     scrollerDOMRef: createRef(),
     portalDOMRef: createRef(),
+    activeCellIndicatorDOMRef: createRef(),
     onRowHeightCSSVarChange: buildSubscriptionCallback(),
     onColumnHeaderHeightCSSVarChange: buildSubscriptionCallback(),
     bodySize: {
@@ -9775,7 +10452,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,
@@ -9892,7 +10569,7 @@ var InfiniteTableComponent = memo11(function InfiniteTableComponent2() {
     getState: getDataSourceState,
     componentActions: dataSourceActions
   } = useDataSourceContextValue();
-  const [imperativeApi] = useState15(() => {
+  const [imperativeApi] = useState16(() => {
     return getImperativeApi(getState, getComputed, getDataSourceState, actions);
   });
   const {
@@ -9958,7 +10635,7 @@ var InfiniteTableComponent = memo11(function InfiniteTableComponent2() {
     dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
   }, [scrollStopDelay]);
   useAutoSizeColumns();
-  const onKeyDown = useCallback16((event) => {
+  const onKeyDown = useCallback18((event) => {
     if (handleKeyboardNavigation({
       getState,
       actions,
@@ -9970,13 +10647,14 @@ var InfiniteTableComponent = memo11(function InfiniteTableComponent2() {
       event.preventDefault();
     }
   }, []);
-  return /* @__PURE__ */ createElement26("div", __spreadValues({
+  return /* @__PURE__ */ createElement28("div", __spreadValues({
     onKeyDown,
     ref: domRef
-  }, domProps), header ? /* @__PURE__ */ createElement26(TableHeaderWrapper, {
-    brain: headerBrain,
+  }, domProps), header ? /* @__PURE__ */ createElement28(TableHeaderWrapper, {
+    bodyBrain: brain,
+    headerBrain,
     scrollbars
-  }) : null, /* @__PURE__ */ createElement26(InfiniteTableBody, null, /* @__PURE__ */ createElement26(HeadlessTable, {
+  }) : null, /* @__PURE__ */ createElement28(InfiniteTableBody, null, /* @__PURE__ */ createElement28(HeadlessTable, {
     tabIndex: 0,
     activeRowIndex: componentState.ready && keyboardNavigation === "row" ? activeRowIndex : null,
     activeCellIndex: componentState.ready && keyboardNavigation === "cell" ? activeCellIndex : null,
@@ -9987,18 +10665,18 @@ var InfiniteTableComponent = memo11(function InfiniteTableComponent2() {
     renderCell,
     cellHoverClassNames: HOVERED_CLASS_NAMES,
     scrollerDOMRef
-  }), /* @__PURE__ */ createElement26(LoadMaskCmp, {
+  }), /* @__PURE__ */ createElement28(LoadMaskCmp, {
     visible: loading
-  }, loadingText)), /* @__PURE__ */ createElement26("div", {
+  }, loadingText)), /* @__PURE__ */ createElement28("div", {
     ref: portalDOMRef,
     className: join(`${rootClassName2}Portal`, zIndex[1e3], position.absolute, top[0], left[0])
-  }), rowHeightCSSVar ? /* @__PURE__ */ createElement26(CSSVariableWatch, {
+  }), rowHeightCSSVar ? /* @__PURE__ */ createElement28(CSSVariableWatch, {
     varName: rowHeightCSSVar,
     onChange: onRowHeightCSSVarChange
-  }) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ createElement26(CSSVariableWatch, {
+  }) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ createElement28(CSSVariableWatch, {
     varName: columnHeaderHeightCSSVar,
     onChange: onColumnHeaderHeightCSSVarChange
-  }) : null, /* @__PURE__ */ createElement26(InfiniteTableFooter, null), licenseValid ? null : /* @__PURE__ */ createElement26(InfiniteTableLicenseFooter, null));
+  }) : null, /* @__PURE__ */ createElement28(InfiniteTableFooter, null), licenseValid ? null : /* @__PURE__ */ createElement28(InfiniteTableLicenseFooter, null));
 });
 function InfiniteTableContextProvider() {
   const { componentActions, componentState } = useComponentState();
@@ -10018,14 +10696,12 @@ 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 });
+  }, { earlyAttach: true, debounce: 50 });
   useEffect26(() => {
     return () => {
       componentState.onRowHeightCSSVarChange.destroy();
@@ -10038,13 +10714,16 @@ function InfiniteTableContextProvider() {
     }
   }, [scrollTopKey, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
-  return /* @__PURE__ */ createElement26(TableContext2.Provider, {
+  return /* @__PURE__ */ createElement28(TableContext2.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ createElement26(InfiniteTableComponent, null));
+  }, /* @__PURE__ */ createElement28(InfiniteTableComponent, null));
 }
 function InfiniteTable(props) {
-  const table = /* @__PURE__ */ createElement26(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ createElement26(InfiniteTableContextProvider, null));
-  return /* @__PURE__ */ createElement26(StrictMode, null, table);
+  const table = /* @__PURE__ */ createElement28(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ createElement28(InfiniteTableContextProvider, null));
+  if (false) {
+    return /* @__PURE__ */ createElement28(StrictMode, null, table);
+  }
+  return table;
 }
 InfiniteTable.defaultProps = {
   rowHeight: 40,