@infinite-table/infinite-react 0.3.13 → 0.3.16

package/index.esm.js

@@ -638,9 +638,9 @@ import {
   StrictMode,
   createElement as createElement28,
   memo as memo11,
-  useEffect as useEffect26
+  useEffect as useEffect28
 } from "react";
-import { useCallback as useCallback18, useEffect as useEffect27, useState as useState16 } from "react";
+import { useCallback as useCallback18, useState as useState15 } from "react";
 
 // src/utils/join.ts
 var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
@@ -878,7 +878,7 @@ import {
   useCallback as useCallback4,
   useEffect as useEffect7,
   useRef as useRef7,
-  useState as useState4
+  useState as useState3
 } from "react";
 
 // src/components/VirtualList/SpacePlaceholder.tsx
@@ -1100,8 +1100,8 @@ function stripVar(cssVariableWithVarString) {
 }
 
 // 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 InternalVars = { currentColumnWidth: "var(--_1slvgu90)", currentColumnTransformX: "var(--_1slvgu91)", currentColumnTransformY: "var(--_1slvgu92)", activeCellRowOffset: "var(--_1slvgu93)", activeCellRowHeight: "var(--_1slvgu94)", activeCellOffsetX: "var(--_1slvgu95)", activeCellOffsetY: "var(--_1slvgu96)", scrollTopForActiveRow: "var(--_1slvgu97)", activeCellColWidth: "var(--_1slvgu98)", activeCellColOffset: "var(--_1slvgu99)", columnWidthAtIndex: "var(--_1slvgu9a)", columnOffsetAtIndex: "var(--_1slvgu9b)", columnOffsetAtIndexWhileReordering: "var(--_1slvgu9c)", columnZIndexAtIndex: "var(--_1slvgu9d)", computedVisibleColumnsCount: "var(--_1slvgu9e)", baseZIndexForCells: "var(--_1slvgu9f)" };
+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: { 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)", reorderEffectDuration: "var(--infinite-column-reorder-effect-duration)", 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
@@ -1131,6 +1131,8 @@ function getParentInfiniteNode(node) {
 }
 var columnWidthAtIndex = stripVar(InternalVars.columnWidthAtIndex);
 var columnOffsetAtIndex = stripVar(InternalVars.columnOffsetAtIndex);
+var columnOffsetAtIndexWhileReordering = stripVar(InternalVars.columnOffsetAtIndexWhileReordering);
+var columnZIndexAtIndex = stripVar(InternalVars.columnZIndexAtIndex);
 function setInfiniteVarOnRoot(varName, varValue, node) {
   const infinite = node ? getParentInfiniteNode(node) : document.querySelector(InfiniteSelector);
   setInfiniteVarOnNode(varName, varValue, infinite);
@@ -1154,6 +1156,12 @@ function setInfiniteColumnWidth(colIndex, colWidth, node) {
 function setInfiniteColumnOffset(colIndex, colOffset, node) {
   setInfiniteVarOnRoot(`${columnOffsetAtIndex}-${colIndex}`, typeof colOffset === "number" ? colOffset + "px" : colOffset, node);
 }
+function setInfiniteColumnZIndex(colIndex, colZIndex, node) {
+  setInfiniteVarOnRoot(`${columnZIndexAtIndex}-${colIndex}`, `${colZIndex}`, node);
+}
+function setInfiniteColumnOffsetWhileReordering(colIndex, offset, node) {
+  setInfiniteVarOnRoot(`${columnOffsetAtIndexWhileReordering}-${colIndex}`, typeof offset === "number" ? `calc( var(${columnOffsetAtIndex}-${colIndex}) + ${offset}px )` : offset, node);
+}
 function getCSSVarNameForColWidth(colIndex) {
   return `${columnWidthAtIndex}-${colIndex}`;
 }
@@ -1453,6 +1461,36 @@ var MatrixBrain = class extends Logger {
       renderCount = Math.min(count, renderCount);
       return renderCount;
     };
+    this.isColFixedEnd = (colIndex) => {
+      if (!this.fixedColsEnd) {
+        return false;
+      }
+      return colIndex >= this.cols - this.fixedColsEnd;
+    };
+    this.isColFixedStart = (colIndex) => {
+      if (!this.fixedColsStart) {
+        return false;
+      }
+      return colIndex < this.fixedColsStart;
+    };
+    this.isRowFixedEnd = (rowIndex) => {
+      if (!this.fixedRowsEnd) {
+        return false;
+      }
+      return rowIndex >= this.rows - this.fixedRowsEnd;
+    };
+    this.isRowFixedStart = (rowIndex) => {
+      if (!this.fixedRowsStart) {
+        return false;
+      }
+      return rowIndex < this.fixedRowsStart;
+    };
+    this.isColFixed = (colIndex) => {
+      return this.isColFixedStart(colIndex) || this.isColFixedEnd(colIndex);
+    };
+    this.isRowFixed = (rowIndex) => {
+      return this.isRowFixedStart(rowIndex) || this.isRowFixedEnd(rowIndex);
+    };
     this.getFixedEndColsWidth = () => {
       if (!this.fixedColsEnd) {
         return 0;
@@ -2632,7 +2670,8 @@ 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 columnOffsetAtIndex2 = stripVar(InternalVars.columnOffsetAtIndex);
+var columnOffsetAtIndexWhileReordering2 = stripVar(InternalVars.columnOffsetAtIndexWhileReordering);
 var ReactHeadlessTableRenderer = class extends Logger {
   constructor(brain) {
     super("ReactHeadlessTableRenderer");
@@ -2647,14 +2686,17 @@ var ReactHeadlessTableRenderer = class extends Logger {
     this.currentHoveredRow = -1;
     this.hoverRowUpdatesInProgress = new Map();
     this.infiniteNode = null;
-    this.setTransform = (element, _rowIndex, colIndex, x, y) => {
-      const transformXVar = `${columnTransformX}-${colIndex}`;
+    this.setTransform = (element, _rowIndex, colIndex, x, y, zIndex2) => {
+      const columnOffsetX = `${columnOffsetAtIndex2}-${colIndex}`;
+      const columnOffsetXWhileReordering = `${columnOffsetAtIndexWhileReordering2}-${colIndex}`;
       if (!this.infiniteNode) {
         this.infiniteNode = getParentInfiniteNode(element);
       }
-      this.infiniteNode.style.setProperty(transformXVar, `${x}px`);
+      this.infiniteNode.style.setProperty(columnOffsetX, `${x}px`);
       element.style.setProperty(currentColumnTransformY, `${y}px`);
-      element.style.transform = `translate3d(var(${transformXVar}), ${InternalVars.currentColumnTransformY}, 0)`;
+      element.style.transform = `translate3d(var(${columnOffsetXWhileReordering}, var(${columnOffsetX})), ${InternalVars.currentColumnTransformY}, 0)`;
+      if (zIndex2 != null) {
+      }
     };
     this.getFullyVisibleRowsRange = () => {
       let {
@@ -2684,21 +2726,26 @@ var ReactHeadlessTableRenderer = class extends Logger {
       }
       const rowOffset = brain.getItemOffsetFor(rowIndex, "vertical");
       const rowHeight = brain.getItemSize(rowIndex, "vertical");
+      const fixedStartRowsHeight = brain.getFixedStartRowsHeight();
+      const fixedEndRowsHeight = brain.getFixedEndRowsHeight();
       const top2 = scrollPosition.scrollTop;
       const availableSize = brain.getAvailableSize();
+      if (!availableSize.height) {
+        return null;
+      }
       const bottom = top2 + availableSize.height;
       if (!scrollAdjustPosition) {
-        scrollAdjustPosition = rowOffset > bottom ? "end" : rowOffset < top2 ? "start" : "end";
+        scrollAdjustPosition = rowOffset > bottom - fixedEndRowsHeight ? "end" : rowOffset < top2 + fixedStartRowsHeight ? "start" : "end";
       }
       let scrollTop = scrollPosition.scrollTop;
       if (scrollAdjustPosition === "center") {
-        scrollTop = rowOffset - Math.floor(brain.getAvailableSize().height / 2);
+        scrollTop = rowOffset - Math.floor((brain.getAvailableSize().height - fixedStartRowsHeight - fixedEndRowsHeight) / 2);
       } else if (scrollAdjustPosition === "start") {
         offset = -offset;
-        scrollTop += rowOffset - top2 + offset;
+        scrollTop += rowOffset - top2 + offset - fixedStartRowsHeight;
       } else {
         offset += rowHeight;
-        scrollTop += rowOffset - bottom + offset;
+        scrollTop += rowOffset - bottom + offset + fixedEndRowsHeight;
       }
       return __spreadProps(__spreadValues({}, scrollPosition), {
         scrollTop
@@ -2711,37 +2758,47 @@ var ReactHeadlessTableRenderer = class extends Logger {
       if (this.isColumnFullyVisible(colIndex) && !scrollAdjustPosition) {
         return scrollPosition;
       }
-      const rowOffset = brain.getItemOffsetFor(colIndex, "horizontal");
+      const colOffset = brain.getItemOffsetFor(colIndex, "horizontal");
       const colWidth = brain.getItemSize(colIndex, "horizontal");
+      const fixedStartColsWidth = brain.getFixedStartColsWidth();
+      const fixedEndColsWidth = brain.getFixedStartColsWidth();
       const left2 = scrollPosition.scrollLeft;
       const availableSize = brain.getAvailableSize();
+      if (!availableSize.width) {
+        return null;
+      }
       const right = left2 + availableSize.width;
       if (!scrollAdjustPosition) {
-        scrollAdjustPosition = rowOffset > right ? "end" : rowOffset < left2 ? "start" : "end";
+        scrollAdjustPosition = colOffset > right - fixedEndColsWidth ? "end" : colOffset < left2 + fixedStartColsWidth ? "start" : "end";
       }
       let scrollLeft = scrollPosition.scrollLeft;
       if (scrollAdjustPosition === "center") {
-        scrollLeft = rowOffset - Math.floor(brain.getAvailableSize().width / 2);
+        scrollLeft = colOffset - Math.floor((brain.getAvailableSize().width - fixedStartColsWidth - fixedEndColsWidth) / 2);
       } else if (scrollAdjustPosition === "start") {
         offset = -offset;
-        scrollLeft += rowOffset - left2 + offset;
+        scrollLeft += colOffset - left2 + offset - fixedStartColsWidth;
       } else {
         offset += colWidth;
-        scrollLeft += rowOffset - right + offset;
+        scrollLeft += colOffset - right + offset + fixedEndColsWidth;
       }
       return __spreadProps(__spreadValues({}, scrollPosition), {
         scrollLeft
       });
     };
     this.getScrollPositionForScrollCellIntoView = (rowIndex, colIndex, config = { offsetLeft: 0, offsetTop: 0 }) => {
-      const { scrollLeft } = this.getScrollPositionForScrollColumnIntoView(colIndex, {
+      const scrollPosForCol = this.getScrollPositionForScrollColumnIntoView(colIndex, {
         scrollAdjustPosition: config.colScrollAdjustPosition || config.scrollAdjustPosition,
         offset: config.offsetLeft
       });
-      const { scrollTop } = this.getScrollPositionForScrollRowIntoView(rowIndex, {
+      const scrollPosForRow = this.getScrollPositionForScrollRowIntoView(rowIndex, {
         scrollAdjustPosition: config.rowScrollAdjustPosition || config.scrollAdjustPosition,
         offset: config.offsetTop
       });
+      if (!scrollPosForCol || !scrollPosForRow) {
+        return null;
+      }
+      const { scrollLeft } = scrollPosForCol;
+      const { scrollTop } = scrollPosForRow;
       return { scrollLeft, scrollTop };
     };
     this.isRowFullyVisible = (rowIndex, offsetMargin = 2) => {
@@ -2752,6 +2809,9 @@ var ReactHeadlessTableRenderer = class extends Logger {
         return false;
       }
       const { brain } = this;
+      if (brain.isRowFixed(rowIndex)) {
+        return true;
+      }
       const {
         start: [startRow],
         end: [endRow]
@@ -2791,23 +2851,26 @@ var ReactHeadlessTableRenderer = class extends Logger {
         return false;
       }
       const { brain } = this;
+      if (brain.isColFixed(colIndex)) {
+        return true;
+      }
       const {
         start: [_, startCol],
         end: [__, endCol]
       } = brain.getRenderRange();
-      const midCol = Math.floor((startCol + endCol) / 2);
       if (colIndex < startCol) {
         return false;
       }
       if (colIndex >= endCol) {
         return false;
       }
+      const midCol = Math.floor((startCol + endCol) / 2);
       if (colIndex >= midCol) {
-        const lastVisibleCol = brain.getItemAt(brain.getAvailableSize().width + brain.getScrollPosition().scrollLeft - offsetMargin, "horizontal");
+        const lastVisibleCol = brain.getItemAt(brain.getAvailableSize().width + brain.getScrollPosition().scrollLeft - offsetMargin - brain.getFixedEndColsWidth(), "horizontal");
         return colIndex <= lastVisibleCol;
       }
       if (colIndex < midCol) {
-        const firstVisibleCol = brain.getItemAt(brain.getScrollPosition().scrollLeft + offsetMargin, "horizontal");
+        const firstVisibleCol = brain.getItemAt(brain.getScrollPosition().scrollLeft + offsetMargin + brain.getFixedStartColsWidth(), "horizontal");
         return colIndex >= firstVisibleCol;
       }
       return true;
@@ -3150,7 +3213,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
         itemElement.dataset.rowIndex = rowIndex;
         itemElement.dataset.colIndex = colIndex;
         if (ITEM_POSITION_WITH_TRANSFORM) {
-          this.setTransform(itemElement, rowIndex, colIndex, x, y);
+          this.setTransform(itemElement, rowIndex, colIndex, x, y, null);
           itemElement.style.willChange = "transform";
           itemElement.style.backfaceVisibility = "hidden";
           const hidden = options ? options.hidden : !!this.isCellCovered(rowIndex, colIndex);
@@ -3196,37 +3259,29 @@ var ReactHeadlessTableRenderer = class extends Logger {
         }
       }
       const adjustColStart = (_rowIndex, colIndex, node, { x, y }, { scrollLeft }) => {
-        node.style.zIndex = `${fixedColsStart - colIndex}`;
-        this.setTransform(node, _rowIndex, colIndex, x + scrollLeft, y);
+        this.setTransform(node, _rowIndex, colIndex, x + scrollLeft, y, fixedColsStart - colIndex);
       };
       const adjustRowStart = (rowIndex, _colIndex, node, coords, scrollPosition2) => {
-        node.style.zIndex = `${fixedRowsStart - rowIndex}`;
-        this.setTransform(node, rowIndex, _colIndex, coords.x, coords.y + scrollPosition2.scrollTop);
+        this.setTransform(node, rowIndex, _colIndex, coords.x, coords.y + scrollPosition2.scrollTop, fixedRowsStart - rowIndex);
       };
       const adjustColEnd = (_rowIndex, colIndex, node, { y }) => {
-        node.style.zIndex = `${cols - colIndex}`;
         const val = fixedEndColsOffsets[colIndex];
-        this.setTransform(node, _rowIndex, colIndex, val, y);
+        this.setTransform(node, _rowIndex, colIndex, val, y, cols - colIndex);
       };
       const adjustRowEnd = (rowIndex, _colIndex, node, coords) => {
-        node.style.zIndex = `${rows - rowIndex}`;
-        this.setTransform(node, rowIndex, _colIndex, coords.x, fixedEndRowsOffsets[rowIndex]);
+        this.setTransform(node, rowIndex, _colIndex, coords.x, fixedEndRowsOffsets[rowIndex], rows - rowIndex);
       };
       const adjustColStartRowStart = (_rowIndex, _colIndex, node, { x, y }, scrollPosition2) => {
-        node.style.zIndex = `1000000`;
-        this.setTransform(node, _rowIndex, _colIndex, x + scrollPosition2.scrollLeft, y + scrollPosition2.scrollTop);
+        this.setTransform(node, _rowIndex, _colIndex, x + scrollPosition2.scrollLeft, y + scrollPosition2.scrollTop, 1e5);
       };
       const adjustColStartRowEnd = (_rowIndex, _colIndex, node, { x }, scrollPosition2) => {
-        node.style.zIndex = `2000000`;
-        this.setTransform(node, _rowIndex, _colIndex, x + scrollPosition2.scrollLeft, fixedEndRowsOffsets[_rowIndex]);
+        this.setTransform(node, _rowIndex, _colIndex, x + scrollPosition2.scrollLeft, fixedEndRowsOffsets[_rowIndex], 2e5);
       };
       const adjustColEndRowStart = (_rowIndex, colIndex, node, coords) => {
-        node.style.zIndex = `3000000`;
-        this.setTransform(node, _rowIndex, colIndex, fixedEndColsOffsets[colIndex], coords.y + scrollPosition.scrollTop);
+        this.setTransform(node, _rowIndex, colIndex, fixedEndColsOffsets[colIndex], coords.y + scrollPosition.scrollTop, 3e5);
       };
       const adjustColEndRowEnd = (rowIndex, colIndex, node) => {
-        node.style.zIndex = `4000000`;
-        this.setTransform(node, rowIndex, colIndex, fixedEndColsOffsets[colIndex], fixedEndRowsOffsets[rowIndex]);
+        this.setTransform(node, rowIndex, colIndex, fixedEndColsOffsets[colIndex], fixedEndRowsOffsets[rowIndex], 4e5);
       };
       if (fixedColsStart || fixedColsEnd) {
         for (let rowIndex = startRow; rowIndex < endRow; rowIndex++) {
@@ -3447,7 +3502,7 @@ import {
   createElement as createElement6,
   memo as memo4
 } from "react";
-import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect3, useRef as useRef5, useState as useState3 } from "react";
+import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect3, useRef as useRef5 } from "react";
 
 // src/components/hooks/useRerender.ts
 import { useCallback as useCallback3, useState as useState2 } from "react";
@@ -3462,39 +3517,43 @@ var useRerender = () => {
 };
 
 // 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";
+var ActiveCellIndicatorCls = { visible: "nxbq1c2 nxbq1c1 _16lm1iwf _16lm1iw3 _16lm1iwz _16lm1iwx", hidden: "nxbq1c3 nxbq1c1 _16lm1iwf _16lm1iw3 _16lm1iwz _16lm1iwx" };
+var ActiveIndicatorWrapperCls = "_16lm1iwf _16lm1iw3 _16lm1iwz _16lm1iwx _16lm1iwt _16lm1iwn";
 
 // src/components/InfiniteTable/components/ActiveRowIndicator.css.ts
-var ActiveRowIndicatorCls = { visible: "j26lrx1 j26lrx0 _16lm1iwf _16lm1iw3 _16lm1iwu _16lm1iwv _16lm1iwx", hidden: "j26lrx2 j26lrx0 _16lm1iwf _16lm1iw3 _16lm1iwu _16lm1iwv _16lm1iwx" };
+var ActiveRowIndicatorCls = { visible: "j26lrx1 j26lrx0 _16lm1iwf _16lm1iw3 _16lm1iww _16lm1iwx _16lm1iwz", hidden: "j26lrx2 j26lrx0 _16lm1iwf _16lm1iw3 _16lm1iww _16lm1iwx _16lm1iwz" };
 
 // src/components/InfiniteTable/components/ActiveRowIndicator.tsx
 var { rootClassName: rootClassName3 } = internalProps;
 var baseCls = `${rootClassName3}-ActiveRowIndicator`;
+var ActiveStyle = {
+  [stripVar(InternalVars.activeCellOffsetY)]: InternalVars.activeCellRowOffset,
+  transform: `translate3d(0px, calc( ${InternalVars.activeCellOffsetY} + ${InternalVars.scrollTopForActiveRow}), 0px)`,
+  height: InternalVars.activeCellRowHeight
+};
 var ActiveRowIndicatorFn = (props) => {
   const { brain } = props;
-  const [state, setState] = useState3({
-    top: 0,
-    rowHeight: 0
-  });
   const domRef = useRef5(null);
-  const stateRef = useRef5(state);
   const active = props.activeRowIndex != null && brain.getRowCount() > props.activeRowIndex;
-  const [rerenderId, rerender] = useRerender();
+  const [_rerenderId, rerender] = useRerender();
   useLayoutEffect3(() => {
     if (props.activeRowIndex == null) {
       return;
     }
-    setState(stateRef.current = {
-      top: brain.getItemOffsetFor(props.activeRowIndex, "vertical"),
-      rowHeight: brain.getRowHeight(props.activeRowIndex)
-    });
-  }, [props.activeRowIndex, rerenderId]);
+    const rowIndex = props.activeRowIndex;
+    const activeCellRowHeight = brain.getRowHeight(rowIndex);
+    const activeCellRowOffset = brain.getItemOffsetFor(rowIndex, "vertical");
+    const node = domRef.current;
+    setInfiniteVarsOnNode({
+      activeCellRowHeight: `${activeCellRowHeight}px`,
+      activeCellRowOffset: `${activeCellRowOffset}px`
+    }, node);
+  }, [props.activeRowIndex]);
   useEffect5(() => {
-    const removeOnScroll = brain.onScroll((scrollPos) => {
-      const node = domRef.current;
-      const topOffset = stateRef.current.top;
-      node.style.transform = `translate3d(0px, ${-scrollPos.scrollTop + topOffset}px, 0px)`;
+    const removeOnScroll = brain.onScroll((scrollPosition) => {
+      setInfiniteVarsOnNode({
+        scrollTopForActiveRow: `${-scrollPosition.scrollTop}px`
+      }, domRef.current);
     });
     const removeOnRenderCountChange = brain.onRenderCountChange(rerender);
     return () => {
@@ -3509,10 +3568,7 @@ var ActiveRowIndicatorFn = (props) => {
     ref: domRef,
     "data-name": "active-row-indicator",
     className: `${baseCls} ${active ? ActiveRowIndicatorCls.visible : ActiveRowIndicatorCls.hidden}`,
-    style: active ? {
-      transform: `translate3d(0px, ${-brain.getScrollPosition().scrollTop + state.top}px,0)`,
-      height: state.rowHeight
-    } : void 0
+    style: active ? ActiveStyle : void 0
   }));
 };
 var ActiveRowIndicator = memo4(ActiveRowIndicatorFn);
@@ -3525,15 +3581,17 @@ import {
 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} )`,
+var columnZIndexAtIndex2 = stripVar(InternalVars.columnZIndexAtIndex);
+var ActiveStyle2 = {
+  [stripVar(InternalVars.activeCellOffsetX)]: InternalVars.activeCellColOffset,
+  [stripVar(InternalVars.activeCellOffsetY)]: 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 domRef = useRef6(null);
   const active = props.activeCellIndex != null && brain.getRowCount() > props.activeCellIndex[0];
   useLayoutEffect4(() => {
@@ -3544,33 +3602,30 @@ var ActiveCellIndicatorFn = (props) => {
     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((scrollPosition) => {
-      setInfiniteVarsOnNode({
-        scrollTopForActiveCell: `${-scrollPosition.scrollTop}px`,
-        scrollLeftForActiveCell: `${-scrollPosition.scrollLeft}px`
-      }, domRef.current);
+    const removeOnRenderCountChange = brain.onRenderCountChange(() => {
+      rerender();
     });
     return () => {
-      removeOnSCroll();
+      removeOnRenderCountChange();
     };
   }, [brain]);
   return /* @__PURE__ */ createElement7("div", {
     className: ActiveIndicatorWrapperCls,
-    "data-name": "active-cell"
+    "data-name": "active-cell",
+    style: active ? {
+      zIndex: `var(${columnZIndexAtIndex2}-${props.activeCellIndex[1]})`
+    } : void 0
   }, /* @__PURE__ */ createElement7("div", {
     ref: domRef,
     "data-name": "active-cell-indicator",
     className: `${baseCls2} ${active ? ActiveCellIndicatorCls.visible : ActiveCellIndicatorCls.hidden}`,
-    style: active ? ActiveStyle : void 0
+    style: active ? ActiveStyle2 : void 0
   }));
 };
 var ActiveCellIndicator = memo5(ActiveCellIndicatorFn);
@@ -3619,7 +3674,7 @@ function HeadlessTable(props) {
     "onRenderUpdater"
   ]);
   const domRef = useRef7(null);
-  const [scrollSize, setTotalScrollSize] = useState4({
+  const [scrollSize, setTotalScrollSize] = useState3({
     width: 0,
     height: 0
   });
@@ -3670,12 +3725,12 @@ function HeadlessTable(props) {
     renderCell,
     brain,
     cellHoverClassNames
-  })), /* @__PURE__ */ createElement8(ActiveRowIndicator, {
-    brain,
-    activeRowIndex
   }), /* @__PURE__ */ createElement8(ActiveCellIndicator, {
     brain,
     activeCellIndex
+  })), /* @__PURE__ */ createElement8(ActiveRowIndicator, {
+    brain,
+    activeRowIndex
   }), /* @__PURE__ */ createElement8(SpacePlaceholder, {
     width: scrollSize.width,
     height: scrollSize.height
@@ -3693,7 +3748,7 @@ import {
   createContext as createContext2,
   useMemo as useMemo3,
   useEffect as useEffect8,
-  useState as useState5,
+  useState as useState4,
   useRef as useRef10
 } from "react";
 
@@ -3831,14 +3886,14 @@ function forwardProps(propsToForward, props) {
 function getComponentStateRoot(config) {
   return memo6(function ComponentStateRoot(props) {
     var _a, _b;
-    const [initialSetupState] = useState5(() => {
+    const [initialSetupState] = useState4(() => {
       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] = useState5(() => {
+    const [wholeState] = useState4(() => {
       let mappedState = {};
       if (propsToForward) {
         mappedState = forwardProps(propsToForward, props);
@@ -4007,20 +4062,20 @@ var useInternalProps = () => {
 };
 
 // src/components/InfiniteTable/utilities.css.ts
-var alignItems = { center: "_16lm1iw15", stretch: "_16lm1iw16" };
-var cssEllipsisClassName = "_16lm1iw1e _16lm1iw1f _16lm1iw1a";
+var alignItems = { center: "_16lm1iw17", stretch: "_16lm1iw18" };
+var cssEllipsisClassName = "_16lm1iw1g _16lm1iw1h _16lm1iw1c";
 var cursor = { pointer: "_16lm1iwd", colResize: "_16lm1iwe" };
-var display = { flex: "_16lm1iwn", block: "_16lm1iwo", inlineBlock: "_16lm1iwp" };
+var display = { flex: "_16lm1iwp", block: "_16lm1iwq", inlineBlock: "_16lm1iwr" };
 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 flexFlow = { column: "_16lm1iw15", row: "_16lm1iw16" };
+var justifyContent = { center: "_16lm1iw19", start: "_16lm1iw1a", end: "_16lm1iw1b" };
+var left = { "0": "_16lm1iwz", "100%": "_16lm1iw10" };
+var overflow = { hidden: "_16lm1iw1c", auto: "_16lm1iw1d", visible: "_16lm1iw1e" };
 var position = { relative: "_16lm1iw1", absolute: "_16lm1iw2", sticky: "_16lm1iw3", fixed: "_16lm1iw4" };
-var top = { "0": "_16lm1iwv", "100%": "_16lm1iww" };
+var top = { "0": "_16lm1iwx", "100%": "_16lm1iwy" };
 var transformTranslateZero = "_16lm1iwa";
-var userSelect = { none: "_16lm1iwq" };
-var zIndex = { "1": "_16lm1iwi", "10": "_16lm1iwj", "1000": "_16lm1iwk", "10000": "_16lm1iwl", "100000": "_16lm1iwm" };
+var userSelect = { none: "_16lm1iws" };
+var zIndex = { "1": "_16lm1iwi", "10": "_16lm1iwj", "1000": "_16lm1iwk", "10000": "_16lm1iwl", "100000": "_16lm1iwm", "1000000": "_16lm1iwn", "10000000": "_16lm1iwo" };
 
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
 var InfiniteTableBody = forwardRef2(function InfiniteTableBody2(props, ref) {
@@ -4053,7 +4108,7 @@ import {
   createElement as createElement16,
   useMemo as useMemo5
 } from "react";
-import { useCallback as useCallback8, useContext as useContext5, useEffect as useEffect11, useRef as useRef13 } from "react";
+import { useCallback as useCallback8, useContext as useContext4, useEffect as useEffect11, useRef as useRef12 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/DataSource/defaultFilterTypes.ts
@@ -4157,12 +4212,7 @@ function useCellClassName(column, baseClasses, variants, extraFlags) {
 
 // src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
 var import_binary_search2 = __toModule(require_binary_search());
-import {
-  useCallback as useCallback6,
-  useMemo as useMemo4,
-  useRef as useRef11,
-  useState as useState6
-} from "react";
+import { useCallback as useCallback6, useMemo as useMemo4, useState as useState5 } from "react";
 
 // src/components/InfiniteTable/hooks/useInfiniteTable.ts
 import { useContext as useContext3 } from "react";
@@ -4200,120 +4250,297 @@ var moveXatY = (arr, dragIndex, dropIndex) => {
   return arr;
 };
 
+// src/components/InfiniteTable/InfiniteCls.css.ts
+var import_createRuntimeFn = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var FooterCls = "_16lm1iw1";
+var InfiniteCls = "_1yeub2v0 _16lm1iw1 _16lm1iwp _16lm1iw15 _16lm1iw0";
+var InfiniteClsRecipe = (0, import_createRuntimeFn.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 = "_1yeub2vl";
+var PinnedRowsContainerClsVariants = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "", variantClassNames: { pinned: { start: "_1yeub2vi", end: "_1yeub2vj", false: "_1yeub2vk" } }, defaultVariants: {}, compoundVariants: [] });
+
+// src/components/InfiniteTable/utils/rafFn.ts
+var rafFn = (fn) => {
+  let rafId = 0;
+  return (...args) => {
+    if (rafId) {
+      cancelAnimationFrame(rafId);
+    }
+    rafId = requestAnimationFrame(() => {
+      rafId = 0;
+      fn(...args);
+    });
+  };
+};
+
+// src/components/InfiniteTable/hooks/useDOMProps.ts
+var columnWidthAtIndex2 = stripVar(InternalVars.columnWidthAtIndex);
+var columnOffsetAtIndex3 = stripVar(InternalVars.columnOffsetAtIndex);
+var columnZIndexAtIndex3 = stripVar(InternalVars.columnZIndexAtIndex);
+var activeCellColWidth = stripVar(InternalVars.activeCellColWidth);
+var activeCellColOffset = stripVar(InternalVars.activeCellColOffset);
+var baseZIndexForCells = stripVar(InternalVars.baseZIndexForCells);
+var computedVisibleColumnsCountCSSVar = stripVar(InternalVars.computedVisibleColumnsCount);
+function getColumnZIndex(col, params) {
+  let computedZIndex = "auto";
+  const index = col.computedVisibleIndex;
+  if (col.computedPinned) {
+    if (col.computedPinned === "start") {
+      computedZIndex = params.pinnedStartColsCount - col.computedVisibleIndexInCategory;
+    } else if (col.computedPinned === "end") {
+      computedZIndex = params.visibleColsCount - col.computedVisibleIndexInCategory;
+    }
+  } else {
+    computedZIndex = -index * 10;
+  }
+  const zIndexValue = typeof computedZIndex === "number" ? `calc( var(${baseZIndexForCells}) ` + (computedZIndex < 0 ? "-" : "+") + ` ${Math.abs(computedZIndex)} )` : "auto";
+  return zIndexValue;
+}
+function useDOMProps(initialDOMProps) {
+  const { computed, componentState, componentActions } = useInfiniteTable();
+  const {
+    focused,
+    focusedWithin,
+    domRef,
+    onBlurWithin,
+    onFocusWithin,
+    onSelfFocus,
+    onSelfBlur,
+    activeCellIndex
+  } = componentState;
+  const {
+    computedPinnedStartColumnsWidth,
+    computedPinnedEndColumnsWidth,
+    computedPinnedStartColumns,
+    computedVisibleColumns
+  } = computed;
+  const cssVars = computedVisibleColumns.reduce((vars, col) => {
+    const index = col.computedVisibleIndex;
+    vars[`${columnWidthAtIndex2}-${index}`] = col.computedWidth + "px";
+    vars[`${columnOffsetAtIndex3}-${index}`] = col.computedOffset + "px";
+    const zIndexValue = getColumnZIndex(col, {
+      pinnedStartColsCount: computedPinnedStartColumns.length,
+      visibleColsCount: computedVisibleColumns.length
+    });
+    vars[`${columnZIndexAtIndex3}-${index}`] = `${zIndexValue}`;
+    return vars;
+  }, {});
+  if (activeCellIndex != null) {
+    cssVars[activeCellColWidth] = `var(${getCSSVarNameForColWidth(activeCellIndex[1])})`;
+    cssVars[activeCellColOffset] = `var(${getCSSVarNameForColOffset(activeCellIndex[1])})`;
+  }
+  cssVars[computedVisibleColumnsCountCSSVar] = computedVisibleColumns.length;
+  cssVars[baseZIndexForCells] = computedVisibleColumns.length * 10;
+  const setFocused = rafFn((focused2) => {
+    componentActions.focused = focused2;
+  });
+  const setFocusedWithin = rafFn((focused2) => {
+    componentActions.focusedWithin = focused2;
+  });
+  const onFocus = (event) => {
+    var _a;
+    (_a = initialDOMProps == null ? void 0 : initialDOMProps.onFocus) == null ? void 0 : _a.call(initialDOMProps, event);
+    if (event.target === domRef.current) {
+      setFocused(true);
+      onSelfFocus == null ? void 0 : onSelfFocus(event);
+      if (focusedWithin) {
+        setFocusedWithin(false);
+        onBlurWithin == null ? void 0 : onBlurWithin(event);
+      }
+    } else {
+      if (!focusedWithin) {
+        setFocusedWithin(true);
+        onFocusWithin == null ? void 0 : onFocusWithin(event);
+      }
+    }
+  };
+  const onBlur = (event) => {
+    var _a, _b;
+    (_a = initialDOMProps == null ? void 0 : initialDOMProps.onBlur) == null ? void 0 : _a.call(initialDOMProps, event);
+    if (event.target === domRef.current) {
+      setFocused(false);
+      onSelfBlur == null ? void 0 : onSelfBlur(event);
+      if (focusedWithin) {
+        setFocusedWithin(false);
+        onBlurWithin == null ? void 0 : onBlurWithin(event);
+      }
+    } else {
+      const contained = (_b = domRef.current) == null ? void 0 : _b.contains(event.relatedTarget);
+      if (!contained) {
+        setFocusedWithin(false);
+        onBlurWithin == null ? void 0 : onBlurWithin(event);
+      }
+    }
+  };
+  const domProps = __spreadProps(__spreadValues({
+    tabIndex: 0
+  }, initialDOMProps), {
+    onFocus,
+    onBlur
+  });
+  const className = join(InfiniteTableClassName, InfiniteCls, domProps == null ? void 0 : domProps.className, computedPinnedStartColumnsWidth ? `${InfiniteTableClassName}--has-pinned-start` : null, computedPinnedEndColumnsWidth ? `${InfiniteTableClassName}--has-pinned-end` : null, focused ? `${InfiniteTableClassName}--focused` : null, focusedWithin ? `${InfiniteTableClassName}--focused-within` : null, focused && componentState.focusedClassName ? componentState.focusedClassName : null, focusedWithin && componentState.focusedWithinClassName ? componentState.focusedWithinClassName : null, computed.computedPinnedStartOverflow ? `${InfiniteTableClassName}--has-pinned-start-overflow` : null, computed.computedPinnedEndOverflow ? `${InfiniteTableClassName}--has-pinned-end-overflow` : null, InfiniteClsRecipe({
+    hasPinnedStart: !!computedPinnedStartColumnsWidth,
+    hasPinnedEnd: !!computedPinnedEndColumnsWidth,
+    focused,
+    focusedWithin
+  }));
+  domProps.className = className;
+  domProps.style = __spreadValues(__spreadValues({}, initialDOMProps == null ? void 0 : initialDOMProps.style), cssVars);
+  if (focused) {
+    if (componentState.focusedStyle) {
+      Object.assign(domProps.style, componentState.focusedStyle);
+    }
+  }
+  if (focusedWithin) {
+    if (componentState.focusedWithinStyle) {
+      Object.assign(domProps.style, componentState.focusedWithinStyle);
+    }
+  }
+  return domProps;
+}
+
 // src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
+var columnOffsetAtIndex4 = stripVar(InternalVars.columnOffsetAtIndex);
+var columnWidthAtIndex3 = stripVar(InternalVars.columnWidthAtIndex);
+var PROXY_OFFSET = 10;
 var getBreakPoints = (columns) => {
   return Array.from(columns.values()).map((c) => {
     return {
       columnId: c.id,
       breakpoint: c.computedAbsoluteOffset + Math.round(c.computedWidth / 2)
     };
-  });
+  }).filter(Boolean);
 };
 var useColumnPointerEvents = ({
   columnId,
   domRef,
   columns,
-  computedRemainingSpace
+  computedRemainingSpace,
+  pinnedStartColsCount,
+  visibleColsCount
 }) => {
-  const [draggingDiff, setDraggingDiff] = useState6(null);
-  const [proxyOffset, setProxyOffset] = useState6(null);
-  const breakpointsRef = useRef11([]);
-  const didDragRef = useRef11(false);
-  const initialClientPos = useRef11(null);
-  const currentDropIndexRef = useRef11(null);
-  const dragging = draggingDiff != null;
-  const { componentActions, computed } = useInfiniteTable();
+  const [proxyPosition, setProxyPosition] = useState5(null);
+  const dragging = proxyPosition != null;
+  const {
+    componentActions,
+    computed,
+    componentState: { domRef: rootRef, brain }
+  } = useInfiniteTable();
   const { computedColumnOrder } = computed;
   const column = useMemo4(() => columns.get(columnId), [columnId, columns]);
-  const { columnIndex, columnWidth, columnsArray } = useMemo4(() => {
+  const { dragColumnIndex, columnsArray } = useMemo4(() => {
     const columnsArray2 = Array.from(columns.values());
+    const columnIndex = columnsArray2.findIndex((c) => c.id === columnId);
     return {
       columnsArray: columnsArray2,
-      columnIndex: columnsArray2.findIndex((c) => c.id === columnId),
-      columnWidth: column.computedWidth
+      dragColumnIndex: columnIndex,
+      columnWidth: column.computedWidth,
+      columnOffsetVar: `var(${columnOffsetAtIndex4}-${column.computedVisibleIndex})`
     };
   }, [columns, columnId, column]);
-  let cursorRef = useRef11("auto");
   const onPointerDown = useCallback6((e) => {
+    var _a;
+    let breakpoints = [];
     const target = domRef.current;
-    cursorRef.current = target.style.cursor;
-    didDragRef.current = false;
-    initialClientPos.current = {
-      clientX: e.clientX,
-      clientY: e.clientY
-    };
+    const initialClientPos = {
+      clientX: Math.round(e.clientX),
+      clientY: Math.round(e.clientY)
+    };
+    const initialScrollPosition2 = brain.getScrollPosition();
+    const initialProxyPosition = {
+      left: PROXY_OFFSET - initialScrollPosition2.scrollLeft,
+      top: PROXY_OFFSET
+    };
+    let currentClientPos = initialClientPos;
+    let currentDiff = {
+      x: 0,
+      y: 0
+    };
+    function updateColumnOffsets(pos) {
+      const clientX = Math.round(pos.clientX);
+      const clientY = Math.round(pos.clientY);
+      if (clientX === currentClientPos.clientX && clientY === currentClientPos.clientY) {
+        return;
+      }
+      currentClientPos = { clientX, clientY };
+      currentDiff.x = currentClientPos.clientX - initialClientPos.clientX;
+      currentDiff.y = currentClientPos.clientY - initialClientPos.clientY;
+      setProxyPosition({
+        left: initialProxyPosition.left + currentDiff.x,
+        top: initialProxyPosition.top + currentDiff.y
+      });
+    }
+    updateColumnOffsets(initialClientPos);
+    let initialCursor = (_a = target.style.cursor) != null ? _a : "auto";
+    let didDragAtLeastOnce = false;
+    let currentDropIndex = dragColumnIndex;
     const onPointerMove = (e2) => {
-      if (!didDragRef.current) {
-        didDragRef.current = true;
-        breakpointsRef.current = getBreakPoints(columns);
-        setDraggingDiff({ top: 0, left: 0 });
-        const rect = target.getBoundingClientRect();
-        setProxyOffset({
-          left: e2.clientX - rect.x - 10,
-          top: e2.clientY - rect.y - 10
-        });
+      var _a2;
+      if (!didDragAtLeastOnce) {
+        didDragAtLeastOnce = true;
+        componentActions.columnReorderInProgress = true;
+        breakpoints = getBreakPoints(columns);
+        setInfiniteColumnZIndex(dragColumnIndex, 1e6, rootRef.current);
+        (_a2 = rootRef.current) == null ? void 0 : _a2.classList.add(InfiniteClsShiftingColumns);
         target.style.cursor = "grabbing";
       }
-      const diffX = e2.clientX - initialClientPos.current.clientX;
-      const diffY = e2.clientY - initialClientPos.current.clientY;
+      updateColumnOffsets(e2);
+      const diffX = currentDiff.x;
       const dir = diffX < 0 ? -1 : 1;
-      const columnPinned = column.computedPinned;
       let currentPos = dir === -1 ? column.computedAbsoluteOffset + diffX : column.computedAbsoluteOffset + column.computedWidth + diffX;
-      const breakpoints = breakpointsRef.current;
-      let index = (0, import_binary_search2.default)(breakpoints, currentPos, ({ breakpoint }, value) => {
+      let idx = (0, import_binary_search2.default)(breakpoints, currentPos, ({ breakpoint }, value) => {
         return breakpoint < value ? -1 : breakpoint > value ? 1 : 0;
       });
-      if (index < 0) {
-        index = ~index;
-      }
-      if (index !== currentDropIndexRef.current) {
-        currentDropIndexRef.current = index;
-        const shifts = columnsArray.map(() => 0);
-        let total = 0;
-        if (dir === -1) {
-          for (let i = index; i < columnIndex; i++) {
-            let shiftBy = columnWidth;
-            if (columnPinned === "end" && columnsArray[i].computedPinned === false && columnsArray[i].computedLastInCategory && computedRemainingSpace > 0) {
-              shiftBy += computedRemainingSpace;
-            }
-            shifts[i] = shiftBy;
-            total -= shiftBy;
+      if (idx < 0) {
+        idx = ~idx;
+      }
+      if (idx !== currentDropIndex) {
+        currentDropIndex = idx;
+        if (dir === 1 && currentDropIndex === dragColumnIndex + 1) {
+          currentDropIndex = dragColumnIndex;
+        }
+        columnsArray.forEach((col) => {
+          const colIndex = col.computedVisibleIndex;
+          if (dir === -1) {
+            let newPosition = colIndex === dragColumnIndex ? `var(${columnOffsetAtIndex4}-${currentDropIndex})` : colIndex < currentDropIndex || colIndex > dragColumnIndex ? `var(${columnOffsetAtIndex4}-${colIndex})` : `calc( var(${columnOffsetAtIndex4}-${colIndex}) + var(${columnWidthAtIndex3}-${dragColumnIndex}) )`;
+            setInfiniteColumnOffsetWhileReordering(colIndex, newPosition, rootRef.current);
+            return;
           }
-        } else {
-          for (let i = columnIndex + 1; i < index; i++) {
-            shifts[i] = -columnWidth;
-            total += columnWidth;
+          if (dir === 1) {
+            let newPosition = colIndex < dragColumnIndex || colIndex >= currentDropIndex ? `var(${columnOffsetAtIndex4}-${colIndex})` : colIndex === dragColumnIndex ? `calc( var(${columnOffsetAtIndex4}-${currentDropIndex - 1}) + var(${columnWidthAtIndex3}-${currentDropIndex - 1}) - var(${columnWidthAtIndex3}-${dragColumnIndex}) )` : `calc( var(${columnOffsetAtIndex4}-${colIndex}) - var(${columnWidthAtIndex3}-${dragColumnIndex}) )`;
+            setInfiniteColumnOffsetWhileReordering(colIndex, newPosition, rootRef.current);
+            return;
           }
-        }
-        if (index !== columnIndex) {
-          shifts[columnIndex] = total;
-        }
-        componentActions.columnShifts = shifts;
-        componentActions.draggingColumnId = column.id;
+        });
       }
-      setDraggingDiff({ left: diffX, top: diffY });
     };
     const onPointerUp = (e2) => {
+      var _a2;
       const target2 = domRef.current;
-      target2.style.cursor = cursorRef.current;
+      (_a2 = rootRef.current) == null ? void 0 : _a2.classList.remove(InfiniteClsShiftingColumns);
+      columnsArray.forEach((col) => {
+        setInfiniteColumnOffsetWhileReordering(col.computedVisibleIndex, "", rootRef.current);
+      });
+      setInfiniteColumnZIndex(dragColumnIndex, getColumnZIndex(column, {
+        pinnedStartColsCount,
+        visibleColsCount
+      }), rootRef.current);
+      target2.style.cursor = initialCursor;
       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) {
+      setProxyPosition(null);
+      if (!didDragAtLeastOnce && column.computedSortable) {
         column.toggleSort();
       }
-      const dropIndex = currentDropIndexRef.current;
-      if (dropIndex != null && dropIndex !== columnIndex) {
-        const newOrder = moveXatY(computedColumnOrder, columnIndex, dropIndex > columnIndex ? dropIndex - 1 : dropIndex);
+      if (currentDropIndex != null && currentDropIndex !== dragColumnIndex) {
+        const newOrder = moveXatY(computedColumnOrder, dragColumnIndex, currentDropIndex > dragColumnIndex ? currentDropIndex - 1 : currentDropIndex);
+        columnsArray.forEach((col) => {
+          setInfiniteColumnOffsetWhileReordering(col.computedVisibleIndex, "", rootRef.current);
+        });
         componentActions.columnOrder = newOrder;
       }
-      breakpointsRef.current = [];
-      didDragRef.current = false;
-      initialClientPos.current = null;
-      currentDropIndexRef.current = null;
+      componentActions.columnReorderInProgress = false;
+      breakpoints = [];
     };
     target.addEventListener("pointermove", onPointerMove);
     target.addEventListener("pointerup", onPointerUp);
@@ -4321,7 +4548,9 @@ var useColumnPointerEvents = ({
   }, [
     columns,
     column,
-    columnIndex,
+    dragColumnIndex,
+    visibleColsCount,
+    pinnedStartColsCount,
     columnsArray,
     computedRemainingSpace,
     computedColumnOrder
@@ -4330,8 +4559,7 @@ var useColumnPointerEvents = ({
     onPointerDown: column.computedDraggable ? onPointerDown : () => {
     },
     dragging,
-    proxyOffset,
-    draggingDiff: draggingDiff != null ? draggingDiff : { top: 0, left: 0 }
+    proxyPosition
   };
 };
 
@@ -4381,23 +4609,23 @@ function NumberFilterEditor(props) {
 import {
   createElement as createElement12
 } from "react";
-import { useEffect as useEffect9, useState as useState7 } from "react";
+import { useEffect as useEffect9, useState as useState6 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
-var import_createRuntimeFn = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
-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 _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 import_createRuntimeFn2 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var CellCls = "_1eexc2a5 _16lm1iwp _16lm1iw16 _16lm1iw17 _16lm1iw2 _16lm1iw1f _16lm1iw1g";
+var HeaderCellContentRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob117 _16lm1iwu _16lm1iww _16lm1iwp _16lm1iw16 _16lm1iw17", variantClassNames: { filtered: { false: "_12zfob118", true: "_12zfob119" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderCellProxy = "_12zfob1g _16lm1iw1g _16lm1iw1h _16lm1iw1c";
+var HeaderCellRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob1h _16lm1iwq", 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_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob16 _16lm1iwq _16lm1iw2", variantClassNames: { pinned: { start: "_12zfob17", end: "_12zfob18", false: "_12zfob19" }, virtualized: { true: "_12zfob1a", false: "_12zfob1b" }, overflow: { true: "_12zfob1c", false: "_12zfob1d" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1e"], [{ overflow: true, pinned: "end" }, "_12zfob1f"]] });
+var HeaderFilterCls = "_12zfob11c _16lm1iwp _16lm1iw16 _16lm1iw17 _16lm1iw1";
+var HeaderFilterEditorCls = "_16lm1iww _16lm1iwu";
+var HeaderGroupCls = "_12zfob11b _16lm1iwp _16lm1iw16 _16lm1iw17";
+var HeaderScrollbarPlaceholderCls = "_12zfob15 _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 _16lm1iw1a _16lm1iw1 _16lm1iwn _16lm1iw14";
+var HeaderSortIconIndexCls = "_12zfob14";
+var HeaderSortIconRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "", variantClassNames: { align: { start: "_12zfob11", center: "_12zfob12", end: "_12zfob13" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderWrapperCls = "_12zfob11a _16lm1iw1c _16lm1iw1 _16lm1iwp _16lm1iw16";
 
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
 var defaultLineStyle = {
@@ -4408,8 +4636,8 @@ var defaultLineStyle = {
 var InfiniteTableIconClassName = "InfiniteTableIcon";
 function SortIcon(props) {
   var _a;
-  const [rendered, setRendered] = useState7(true);
-  const [opacity, setOpacity] = useState7(0);
+  const [rendered, setRendered] = useState6(true);
+  const [opacity, setOpacity] = useState6(0);
   const { direction, lineWidth = 1, style, className, index } = props;
   const showIndex = index != null && index > 0;
   const size = (_a = props.size) != null ? _a : 16;
@@ -4477,25 +4705,16 @@ import {
   memo as memo7
 } from "react";
 
-// src/components/InfiniteTable/hooks/useInfiniteTableState.ts
-import { useContext as useContext4 } from "react";
-var useInfiniteTableState = () => {
-  const TableContext2 = getInfiniteTableContext();
-  const { componentState } = useContext4(TableContext2);
-  return componentState;
-};
-
 // 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 _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"]] });
+var import_createRuntimeFn3 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var ColumnCellCls = "_1eexc2a6 _1eexc2a5 _16lm1iwp _16lm1iw16 _16lm1iw17 _16lm1iw2 _16lm1iw1f _16lm1iw1g";
+var ColumnCellRecipe = (0, import_createRuntimeFn3.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);
+var columnWidthAtIndex4 = stripVar(InternalVars.columnWidthAtIndex);
 function InfiniteTableCellFn(props) {
   var _b, _c, _d;
   const _a = props, {
@@ -4528,23 +4747,14 @@ function InfiniteTableCellFn(props) {
     "renderChildren"
   ]);
   const children = renderChildren();
-  const { columnShifts } = useInfiniteTableState();
-  const shifting = !!columnShifts;
   const style = __spreadValues({
-    width: `var(${columnWidthAtIndex2}-${column.computedVisibleIndex})`
+    width: `var(${columnWidthAtIndex4}-${column.computedVisibleIndex})`
   }, domProps.style);
-  if (!skipColumnShifting && columnShifts && columnShifts[column.computedVisibleIndex]) {
-    const shiftLeft = columnShifts[column.computedVisibleIndex];
-    if (virtualized) {
-      style.left = shiftLeft;
-    } else {
-      style.transform = `translate3d(${shiftLeft}px, 0px, 0px)`;
-    }
-  }
   const finalDOMProps = __spreadProps(__spreadValues({}, domProps), {
     style,
     "data-column-id": column.id,
-    className: join(domProps.className, justifyContent[(_b = column.align) != null ? _b : "start"], InfiniteTableCellClassName, ColumnCellCls, shifting ? `${InfiniteTableCellClassName}--shifting ${CellClsVariants.shifting}` : ""),
+    "data-z-index": style.zIndex,
+    className: join(domProps.className, justifyContent[(_b = column.align) != null ? _b : "start"], InfiniteTableCellClassName, ColumnCellCls),
     children: /* @__PURE__ */ createElement13(Fragment, null, beforeChildren, /* @__PURE__ */ createElement13("div", {
       className: join(InfiniteTableCellContentClassName, cssEllipsis ? cssEllipsisClassName : overflow.hidden, contentClassName),
       style: contentStyle
@@ -4564,13 +4774,13 @@ var InfiniteTableCell = memo7(InfiniteTableCellFn);
 import {
   createElement as createElement14
 } from "react";
-import { useEffect as useEffect10, useState as useState8 } from "react";
+import { useEffect as useEffect10, useState as useState7 } 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] = useState8((_b = (_a = props.columnFilterValue) == null ? void 0 : _a.filterValue) != null ? _b : "");
+  const [theValue, setTheValue] = useState7((_b = (_a = props.columnFilterValue) == null ? void 0 : _a.filterValue) != null ? _b : "");
   const onInputChange = (filterValue) => {
     setTheValue(filterValue);
     props.onChange(filterValue);
@@ -4664,7 +4874,7 @@ var computeFlex = (params) => {
     totalFlex += itemFlex != null ? itemFlex : 0;
     totalFixedSize += (_e = item.size) != null ? _e : 0;
   });
-  let availableSizeForFlex = Math.max(availableSize - totalFixedSize, 0);
+  let availableSizeForFlex = params.computeSpecialSpaceDistribution ? Math.max(availableSize, 0) : Math.max(availableSize - totalFixedSize, 0);
   let sizePerFlex = availableSizeForFlex / totalFlex;
   let maxxedFlexItems = {};
   let minnedFlexItems = {};
@@ -4900,10 +5110,13 @@ var computeGroupResize = (params) => {
         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) => {
@@ -4958,7 +5171,7 @@ var computeGroupResize = (params) => {
 };
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/index.tsx
-import React20, { useRef as useRef12, useState as useState9 } from "react";
+import React20, { useRef as useRef11, useState as useState8 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/columnResizer.ts
 function getColumnResizer(colIndex, {
@@ -5013,17 +5226,17 @@ function getColumnGroupResizer(colIndexes, config) {
 }
 
 // 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: [] });
+var import_createRuntimeFn4 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var ResizeHandleCls = "zneyzh0 _16lm1iw2 _16lm1iwx _16lm1iw13 _16lm1iw11 _16lm1iwe";
+var ResizeHandleDraggerClsRecipe = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "zneyzh1 _16lm1iw2 _16lm1iwx _16lm1iw11", 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);
+  const domRef = useRef11(null);
+  const [constrained, setConstrained] = useState8(false);
+  const constrainedRef = useRef11(constrained);
   constrainedRef.current = constrained;
   const onPointerDown = (e) => {
     e.stopPropagation();
@@ -5078,7 +5291,6 @@ var ResizeHandle = React20.memo(ResizeHandleFn);
 function useColumnResizeHandle(column) {
   const {
     computed: { computedVisibleColumns },
-    componentState: { domRef },
     getState,
     getComputed,
     componentActions
@@ -5088,12 +5300,12 @@ function useColumnResizeHandle(column) {
     shareSpaceOnResize
   }) => {
     const state = getState();
-    const { columnSizing, viewportReservedWidth, bodySize, activeCellIndex } = state;
+    const { columnSizing, viewportReservedWidth, bodySize } = state;
     const columns = getComputed().computedVisibleColumns;
     let atLeastOneFlex = false;
     const columnSizingWithFlex = columns.reduce((acc, col) => {
       if (col.computedFlex) {
-        acc[col.id] = { flex: col.computedWidth };
+        acc[col.id] = __spreadProps(__spreadValues({}, columnSizing[col.id]), { flex: col.computedWidth });
         atLeastOneFlex = true;
       }
       return acc;
@@ -5116,20 +5328,8 @@ function useColumnResizeHandle(column) {
         };
       })
     });
-    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;
-  }, []);
+  }, [column]);
   const onColumnResize = useCallback7(({
     diff,
     shareSpaceOnResize
@@ -5142,7 +5342,7 @@ function useColumnResizeHandle(column) {
       componentActions.viewportReservedWidth = reservedWidth;
     }
     componentActions.columnSizing = columnSizing;
-  }, []);
+  }, [computeResizeForDiff]);
   const resizeHandle = column.computedResizable ? /* @__PURE__ */ createElement15(ResizeHandle, {
     columns: computedVisibleColumns,
     columnIndex: column.computedVisibleIndex,
@@ -5156,6 +5356,8 @@ function useColumnResizeHandle(column) {
 var InfiniteTableHeaderCellContext = createContext4(null);
 var { rootClassName: rootClassName8 } = internalProps;
 var InfiniteTableHeaderCellClassName = `${rootClassName8}HeaderCell`;
+var columnZIndexAtIndex4 = stripVar(InternalVars.columnZIndexAtIndex);
+var columnOffsetAtIndex5 = stripVar(InternalVars.columnOffsetAtIndex);
 function InfiniteTableHeaderCell(props) {
   var _a, _b, _c, _d, _e;
   const column = props.column;
@@ -5194,12 +5396,13 @@ function InfiniteTableHeaderCell(props) {
     header = header != null ? header : column.name;
     return /* @__PURE__ */ createElement16(Fragment2, null, align === "end" ? sortTool : null, header, align !== "end" ? sortTool : null);
   };
-  const domRef = useRef13(null);
+  const domRef = useRef12(null);
   const {
     computed: {
       computedRemainingSpace,
       showColumnFilters,
-      computedVisibleColumns
+      computedVisibleColumns,
+      computedPinnedStartColumns
     },
     componentState: { portalDOMRef, columnHeaderHeight, filterEditors }
   } = useInfiniteTable();
@@ -5221,7 +5424,9 @@ function InfiniteTableHeaderCell(props) {
   const style = {
     height
   };
-  const { onPointerDown, dragging, draggingDiff, proxyOffset } = useColumnPointerEvents({
+  const { onPointerDown, dragging, proxyPosition } = useColumnPointerEvents({
+    pinnedStartColsCount: computedPinnedStartColumns.length,
+    visibleColsCount: computedVisibleColumns.length,
     computedRemainingSpace,
     columnId: column.id,
     domRef,
@@ -5235,9 +5440,9 @@ function InfiniteTableHeaderCell(props) {
         position: "absolute",
         height,
         width,
-        left: column.computedAbsoluteOffset + draggingDiff.left + ((_a = proxyOffset == null ? void 0 : proxyOffset.left) != null ? _a : 0),
-        top: (draggingDiff == null ? void 0 : draggingDiff.top) + ((_b = proxyOffset == null ? void 0 : proxyOffset.top) != null ? _b : 0),
-        zIndex: 1
+        left: `calc( var(${columnOffsetAtIndex5}-${column.computedVisibleIndex}) + ${(_a = proxyPosition.left) != null ? _a : 0}px)`,
+        top: (_b = proxyPosition.top) != null ? _b : 0,
+        zIndex: 1e9
       }
     }, header);
     draggingProxy = createPortal(draggingProxy, portalDOMRef.current);
@@ -5308,6 +5513,8 @@ function InfiniteTableHeaderCell(props) {
   const filterType = column.computedFilterType;
   const FilterEditor = filterEditors[filterType] || defaultFilterEditors[filterType] || StringFilterEditor;
   const resizeHandle = useColumnResizeHandle(column);
+  const zIndex2 = `var(${columnZIndexAtIndex4}-${column.computedVisibleIndex})`;
+  style.zIndex = zIndex2;
   return /* @__PURE__ */ createElement16(ContextProvider, {
     value: renderParam
   }, /* @__PURE__ */ createElement16(InfiniteTableCell, {
@@ -5316,7 +5523,7 @@ function InfiniteTableHeaderCell(props) {
     column,
     "data-name": `HeaderCell`,
     "data-column-id": column.id,
-    "data-z-index": computedVisibleColumns.length * 10 - column.computedVisibleIndex * 10,
+    "data-z-index": zIndex2,
     style,
     width,
     onPointerDown,
@@ -5337,7 +5544,7 @@ function InfiniteTableHeaderCell(props) {
   }), draggingProxy);
 }
 function useInfiniteHeaderCell() {
-  const result = useContext5(InfiniteTableHeaderCellContext);
+  const result = useContext4(InfiniteTableHeaderCellContext);
   return result;
 }
 
@@ -5472,7 +5679,7 @@ import {
   createElement as createElement19,
   memo as memo8
 } from "react";
-import { useCallback as useCallback10, useEffect as useEffect12, useRef as useRef15 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect12, useRef as useRef14 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
 import {
@@ -5486,13 +5693,13 @@ import {
 import { useCallback as useCallback9 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/GroupResizeHandle.tsx
-import React23, { useRef as useRef14, useState as useState10 } from "react";
+import React23, { useRef as useRef13, useState as useState9 } 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);
+  const domRef = useRef13(null);
+  const [constrained, setConstrained] = useState9(false);
+  const constrainedRef = useRef13(constrained);
   constrainedRef.current = constrained;
   const onPointerDown = (e) => {
     e.stopPropagation();
@@ -5569,7 +5776,7 @@ function useColumnGroupResizeHandle(groupColumns, config) {
     let atLeastOneFlex = false;
     const columnSizingWithFlex = columns.reduce((acc, col) => {
       if (col.computedFlex) {
-        acc[col.id] = { flex: col.computedWidth };
+        acc[col.id] = __spreadProps(__spreadValues({}, columnSizing[col.id]), { flex: col.computedWidth });
         atLeastOneFlex = true;
       }
       return acc;
@@ -5616,7 +5823,7 @@ function useColumnGroupResizeHandle(groupColumns, config) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
 var TableHeaderGroupClassName = `${rootClassName2}HeaderGroup`;
-var columnWidthAtIndex3 = stripVar(InternalVars.columnWidthAtIndex);
+var columnWidthAtIndex5 = stripVar(InternalVars.columnWidthAtIndex);
 function InfiniteTableHeaderGroup(props) {
   const {
     computed: { computedVisibleColumns }
@@ -5635,7 +5842,7 @@ function InfiniteTableHeaderGroup(props) {
     columnGroupsMaxDepth
   });
   const firstColumn = columns[0];
-  const width = columns.length > 1 ? `calc( ` + columns.map((col) => `var(${columnWidthAtIndex3}-${col.computedVisibleIndex})`).join(" + ") + " )" : `var(${columnWidthAtIndex3}-${firstColumn.computedVisibleIndex})`;
+  const width = columns.length > 1 ? `calc( ` + columns.map((col) => `var(${columnWidthAtIndex5}-${col.computedVisibleIndex})`).join(" + ") + " )" : `var(${columnWidthAtIndex5}-${firstColumn.computedVisibleIndex})`;
   const zIndex2 = computedVisibleColumns.length * 10 - firstColumn.computedVisibleIndex * 10 + height * (columnGroupsMaxDepth - columnGroup.depth + 2);
   return /* @__PURE__ */ createElement18("div", {
     ref: props.domRef,
@@ -5676,7 +5883,7 @@ function InfiniteTableHeaderFn(props) {
     const removeOnScroll = brain.onScroll(onScroll);
     return removeOnScroll;
   }, [brain]);
-  const domRef = useRef15(null);
+  const domRef = useRef14(null);
   const headerCls = HeaderClsRecipe({
     overflow: false,
     virtualized: true
@@ -5851,7 +6058,7 @@ import {
   createElement as createElement21,
   forwardRef as forwardRef4,
   useCallback as useCallback12,
-  useRef as useRef16
+  useRef as useRef15
 } from "react";
 import { useEffect as useEffect13 } from "react";
 
@@ -5861,14 +6068,6 @@ 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/InfiniteCls.css.ts
-var import_createRuntimeFn4 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
-var FooterCls = "_16lm1iw1";
-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 = {
   padding: ThemeVars.spacing[2],
@@ -5898,7 +6097,7 @@ var enforceStyle = (node, style) => {
 };
 var InfiniteTableLicenseFooter = forwardRef4(function InfiniteTableLicenseFooter2(props, ref) {
   const { rootClassName: rootClassName13 } = useInternalProps();
-  const domRef = useRef16(null);
+  const domRef = useRef15(null);
   const domCallback = useCallback12((node) => {
     domRef.current = node;
     if (!ref) {
@@ -5943,8 +6142,9 @@ import {
   createElement as createElement22,
   memo as memo9
 } from "react";
-import { useCallback as useCallback13, useContext as useContext6, useMemo as useMemo7 } from "react";
+import { useCallback as useCallback13, useContext as useContext5, useMemo as useMemo7 } from "react";
 var { rootClassName: rootClassName11 } = internalProps;
+var columnZIndexAtIndex5 = stripVar(InternalVars.columnZIndexAtIndex);
 var InfiniteTableColumnCellContext = createContext5(null);
 var InfiniteTableColumnCellClassName = `${rootClassName11}ColumnCell`;
 function isColumnWithField(c) {
@@ -6074,6 +6274,7 @@ function InfiniteTableColumnCellFn(props) {
   }
   style = column.style ? typeof column.style === "function" ? __spreadValues(__spreadValues({}, style), column.style(stylingRenderParam) || {}) : __spreadValues(__spreadValues({}, style), column.style) : style || {};
   style.height = rowHeight;
+  style.zIndex = `var(${columnZIndexAtIndex5}-${column.computedVisibleIndex})`;
   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;
@@ -6097,7 +6298,7 @@ function InfiniteTableColumnCellFn(props) {
 }
 var InfiniteTableColumnCell = memo9(InfiniteTableColumnCellFn);
 function useInfiniteColumnCell() {
-  const result = useContext6(InfiniteTableColumnCellContext);
+  const result = useContext5(InfiniteTableColumnCellContext);
   return result;
 }
 
@@ -6114,8 +6315,8 @@ import {
 } from "react";
 
 // src/components/InfiniteTable/components/LoadMask.css.ts
-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 LoadMaskCls = { visible: "qy58ya1 qy58ya0 _16lm1iw2 _16lm1iwx _16lm1iwz _16lm1iw13 _16lm1iw11", hidden: "qy58ya2 qy58ya0 _16lm1iw2 _16lm1iwx _16lm1iwz _16lm1iw13 _16lm1iw11" };
+var LoadMaskOverlayCls = "qy58ya3 _16lm1iw2 _16lm1iwx _16lm1iwz _16lm1iw13 _16lm1iw11";
 var LoadMaskTextCls = "qy58ya4";
 
 // src/components/InfiniteTable/components/LoadMask.tsx
@@ -6147,24 +6348,40 @@ function getImperativeApi(getState, getComputed, getDataSourceState, componentAc
     scrollRowIntoView(rowIndex, config = { offset: 0 }) {
       const state = getState();
       const scrollPosition = state.renderer.getScrollPositionForScrollRowIntoView(rowIndex, config);
+      if (!scrollPosition) {
+        return false;
+      }
       const currentScrollPosition = state.brain.getScrollPosition();
+      const scrollTopMax = state.brain.scrollTopMax;
+      if (scrollPosition.scrollTop > scrollTopMax + (config.offset || 0)) {
+        return false;
+      }
       if (scrollPosition.scrollTop !== currentScrollPosition.scrollTop) {
         state.scrollerDOMRef.current.scrollTop = scrollPosition.scrollTop;
       }
+      return true;
     },
     scrollColumnIntoView(colId, config = { offset: 0 }) {
       const state = getState();
       const computed = getComputed();
       const computedColumn = computed.computedVisibleColumnsMap.get(colId);
       if (!computedColumn) {
-        return;
+        return false;
       }
       const colIndex = computedColumn.computedVisibleIndex;
       const scrollPosition = state.renderer.getScrollPositionForScrollColumnIntoView(colIndex, config);
+      if (!scrollPosition) {
+        return false;
+      }
       const currentScrollPosition = state.brain.getScrollPosition();
+      const scrollLeftMax = state.brain.scrollLeftMax;
+      if (scrollPosition.scrollLeft > scrollLeftMax + (config.offset || 0)) {
+        return false;
+      }
       if (scrollPosition.scrollLeft !== currentScrollPosition.scrollLeft) {
         state.scrollerDOMRef.current.scrollLeft = scrollPosition.scrollLeft;
       }
+      return true;
     },
     scrollCellIntoView(rowIndex, colIdOrIndex, config = { offset: 0 }) {
       const state = getState();
@@ -6173,33 +6390,48 @@ function getImperativeApi(getState, getComputed, getDataSourceState, componentAc
       if (typeof colIdOrIndex === "string") {
         const computedColumn = computed.computedVisibleColumnsMap.get(colIdOrIndex);
         if (!computedColumn) {
-          return;
+          return false;
         }
         colIndex = computedColumn.computedVisibleIndex;
       }
       const scrollPositionForCol = state.renderer.getScrollPositionForScrollColumnIntoView(colIndex, config);
       const scrollPositionForRow = state.renderer.getScrollPositionForScrollRowIntoView(rowIndex, config);
+      if (!scrollPositionForCol || !scrollPositionForRow) {
+        return false;
+      }
       const newScrollPosition = {
         scrollLeft: scrollPositionForCol.scrollLeft,
         scrollTop: scrollPositionForRow.scrollTop
       };
       const currentScrollPosition = state.brain.getScrollPosition();
+      const scrollLeftMax = state.brain.scrollLeftMax;
+      const scrollTopMax = state.brain.scrollTopMax;
+      if (newScrollPosition.scrollLeft > scrollLeftMax + (config.offset || 0)) {
+        return false;
+      }
+      if (newScrollPosition.scrollTop > scrollTopMax + (config.offset || 0)) {
+        return false;
+      }
       if (newScrollPosition.scrollLeft !== currentScrollPosition.scrollLeft) {
         state.scrollerDOMRef.current.scrollLeft = newScrollPosition.scrollLeft;
       }
       if (newScrollPosition.scrollTop !== currentScrollPosition.scrollTop) {
         state.scrollerDOMRef.current.scrollTop = newScrollPosition.scrollTop;
       }
+      return true;
     }
   };
+  if (false) {
+    globalThis.imperativeApi = imperativeApi;
+  }
   return imperativeApi;
 }
 
 // src/components/InfiniteTable/hooks/useAutoSizeColumns.ts
 import {
   useEffect as useEffect14,
-  useRef as useRef17,
-  useState as useState11
+  useRef as useRef16,
+  useState as useState10
 } from "react";
 var OFFSET = 10;
 function getColumnContentMaxWidths(domRef, options) {
@@ -6266,10 +6498,10 @@ function useAutoSizeColumns() {
     componentActions,
     componentState: { domRef, ready, autoSizeColumnsKey, brain }
   } = useComponentState();
-  const [refreshId, setRefreshId] = useState11(0);
+  const [refreshId, setRefreshId] = useState10(0);
   const theKey = typeof autoSizeColumnsKey === "object" ? autoSizeColumnsKey.key : autoSizeColumnsKey;
   const getTheKey = useLatest(theKey);
-  const lastExecutedIdentifierRef = useRef17(null);
+  const lastExecutedIdentifierRef = useRef16(null);
   useEffect14(() => {
     const key = getTheKey();
     if (key == null) {
@@ -6328,7 +6560,7 @@ function useAutoSizeColumns() {
 }
 
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
-import { useCallback as useCallback14, useEffect as useEffect15, useRef as useRef18 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect15, useRef as useRef17 } from "react";
 import React31 from "react";
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
@@ -6399,7 +6631,7 @@ function useCellRendering(param) {
     bodySize,
     rowspan
   });
-  const scrollTopMaxRef = useRef18(0);
+  const scrollTopMaxRef = useRef17(0);
   useEffect15(() => {
     return brain.onRenderCountChange(() => {
       scrollTopMaxRef.current = brain.scrollTopMax;
@@ -6489,7 +6721,7 @@ function useCellRendering(param) {
 }
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-import { useCallback as useCallback17, useEffect as useEffect25, useState as useState15 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect25, useState as useState14 } from "react";
 
 // src/components/InfiniteTable/hooks/useColumnGroups.ts
 import { useEffect as useEffect17 } from "react";
@@ -6559,20 +6791,6 @@ function computeColumnGroupsDepths(columnGroups) {
   return map2;
 }
 
-// src/components/InfiniteTable/utils/rafFn.ts
-var rafFn = (fn) => {
-  let rafId = 0;
-  return (...args) => {
-    if (rafId) {
-      cancelAnimationFrame(rafId);
-    }
-    rafId = requestAnimationFrame(() => {
-      rafId = 0;
-      fn(...args);
-    });
-  };
-};
-
 // src/components/InfiniteTable/hooks/useColumnGroups.ts
 function useColumnGroups() {
   const {
@@ -6692,7 +6910,7 @@ import {
   createElement as createElement24,
   useEffect as useEffect18
 } from "react";
-import { useState as useState12 } from "react";
+import { useState as useState11 } from "react";
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.css.ts
 var import_createRuntimeFn6 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
@@ -6703,7 +6921,7 @@ var ExpanderIconClsVariants = (0, import_createRuntimeFn6.createRuntimeFn)({ def
 function ExpanderIcon(props) {
   var _a;
   const { size = 24 } = props;
-  const [expanded, setExpanded] = useState12((_a = props.expanded) != null ? _a : props.defaultExpanded);
+  const [expanded, setExpanded] = useState11((_a = props.expanded) != null ? _a : props.defaultExpanded);
   const onClick = () => {
     var _a2;
     (_a2 = props.onChange) == null ? void 0 : _a2.call(props, !expanded);
@@ -6906,10 +7124,10 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
 }
 
 // src/components/InfiniteTable/hooks/useEffectWithRaf.ts
-import { useEffect as useEffect19, useRef as useRef19 } from "react";
+import { useEffect as useEffect19, useRef as useRef18 } from "react";
 function useEffectWithRaf(fn, deps) {
-  const rafId = useRef19(0);
-  const removeFnRaf = useRef19();
+  const rafId = useRef18(0);
+  const removeFnRaf = useRef18();
   useEffect19(() => {
     rafId.current = requestAnimationFrame(() => {
       removeFnRaf.current = fn();
@@ -7571,15 +7789,15 @@ var GroupRowsState = class {
 };
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-import { useEffect as useEffect21, useMemo as useMemo9, useRef as useRef21, useState as useState13 } from "react";
+import { useEffect as useEffect21, useMemo as useMemo9, useRef as useRef20, useState as useState12 } from "react";
 
 // src/components/hooks/useEffectWithChanges.ts
-import { useEffect as useEffect20, useRef as useRef20 } from "react";
+import { useEffect as useEffect20, useRef as useRef19 } from "react";
 function useEffectWithChanges(fn, deps) {
-  const prevRef = useRef20({});
-  const oldValuesRef = useRef20({});
+  const prevRef = useRef19({});
+  const oldValuesRef = useRef19({});
   const oldValues = oldValuesRef.current;
-  const changesRef = useRef20({});
+  const changesRef = useRef19({});
   const changes = changesRef.current;
   const useEffectDeps = [];
   for (const k in deps) {
@@ -7860,11 +8078,11 @@ function useLoadData() {
     livePaginationCursor,
     cursorId: stateCursorId
   } = componentState;
-  const [scrollbars, setScrollbars] = useState13({
+  const [scrollbars, setScrollbars] = useState12({
     vertical: false,
     horizontal: false
   });
-  const scrollbarsRef = useRef21(scrollbars);
+  const scrollbarsRef = useRef20(scrollbars);
   useEffect21(() => {
     notifyScrollbarsChange.onChange((scrollbars2) => {
       if (!scrollbars2) {
@@ -7921,7 +8139,7 @@ function useLoadData() {
     filterValue,
     cursorId: livePagination ? stateCursorId : null
   };
-  const initialRef = useRef21(true);
+  const initialRef = useRef20(true);
   useLazyLoadRange();
   useEffectWithChanges(() => {
     const componentState2 = getComponentState();
@@ -7962,7 +8180,7 @@ function useLazyLoadRange() {
     dataArray,
     scrollStopDelayUpdatedByTable
   } = componentState;
-  const latestRenderRangeRef = useRef21(null);
+  const latestRenderRangeRef = useRef20(null);
   const loadRange = (renderRange, cache = getComponentState().lazyLoadCacheOfLoadedBatches) => {
     const componentState2 = getComponentState();
     renderRange = renderRange || latestRenderRangeRef.current;
@@ -9298,7 +9516,7 @@ var isColumnVisible = (columnVisibility, _columnVisibilityAssumeVisible, colId)
 };
 var getComputedPinned = (colId, columnPinning) => {
   const pinned = columnPinning.get(colId);
-  const computedPinned = pinned === "start" ? "start" : pinned === "end" ? "end" : false;
+  const computedPinned = pinned === "start" || pinned === true ? "start" : pinned === "end" ? "end" : false;
   return computedPinned;
 };
 var getComputedVisibleColumns = ({
@@ -9434,6 +9652,7 @@ var getComputedVisibleColumns = ({
     const id = visibleColumnOrder[i];
     const nextColumnId = visibleColumnOrder[i + 1];
     const colType = getColumnComputedType(c, columnTypes);
+    const computedVisibleIndex = i;
     const sortingInfo = sortedMap[id] ? sortedMap[id] : c.field ? (_a = sortedMap[c.field]) != null ? _a : null : null;
     const computedSortInfo = (_b = sortingInfo == null ? void 0 : sortingInfo.sortInfo) != null ? _b : null;
     const computedSorted = !!computedSortInfo;
@@ -9446,7 +9665,15 @@ var getComputedVisibleColumns = ({
     const computedMaxWidth = maxSizes[i] || 1e4;
     const computedPinned = getComputedPinned(id, columnPinning);
     const computedLast = i === visibleColumnOrder.length - 1;
+    let computedVisibleIndexInCategory = computedVisibleIndex;
     const computedPinningOffset = computedPinned === "start" ? computedPinnedStartColumnsWidth : computedPinned === "end" ? computedPinnedEndColumnsWidth : computedOffset - computedPinnedStartColumnsWidth;
+    if (computedPinned == "start") {
+      computedVisibleIndexInCategory = computedVisibleIndex;
+    } else if (computedPinned === "end") {
+      computedVisibleIndexInCategory = computedVisibleIndex - (computedPinnedStartColumns.length + computedUnpinnedColumns.length);
+    } else {
+      computedVisibleIndexInCategory = computedVisibleIndex - computedPinnedStartColumns.length;
+    }
     const computedAbsoluteOffset = computedPinned === "start" || computedPinned === false ? computedOffset : firstPinnedEndAbsoluteOffset + computedPinnedEndColumnsWidth;
     const computedFirstInCategory = computedPinned !== prevPinned;
     const computedLastInCategory = computedLast || computedPinned !== getComputedPinned(nextColumnId, columnPinning);
@@ -9495,6 +9722,7 @@ var getComputedVisibleColumns = ({
       computedWidth,
       computedAbsoluteOffset,
       computedPinningOffset,
+      computedVisibleIndexInCategory,
       computedOffset,
       computedSortable,
       computedSortInfo,
@@ -9503,7 +9731,7 @@ var getComputedVisibleColumns = ({
       computedSorted,
       computedSortedAsc,
       computedSortedDesc,
-      computedVisibleIndex: i,
+      computedVisibleIndex,
       computedPinned,
       computedDraggable: (_u = (_t = c.draggable) != null ? _t : draggableColumns) != null ? _u : true,
       computedFirstInCategory,
@@ -9694,6 +9922,7 @@ var useComputedVisibleColumns = ({
     columnOrder,
     columnVisibility,
     columnVisibilityAssumeVisible,
+    resizableColumns,
     pinnedEndMaxWidth,
     pinnedStartMaxWidth,
     columnSizing,
@@ -9723,7 +9952,7 @@ var useComputedVisibleColumns = ({
 };
 
 // src/components/InfiniteTable/hooks/useScrollbars.ts
-import { useState as useState14, useEffect as useEffect24, useLayoutEffect as useLayoutEffect6 } from "react";
+import { useState as useState13, useEffect as useEffect24, useLayoutEffect as useLayoutEffect6 } from "react";
 var INITIAL_SCROLLBARS = {
   vertical: false,
   horizontal: false
@@ -9731,7 +9960,7 @@ var INITIAL_SCROLLBARS = {
 function useScrollbars(brain) {
   const { getComponentState: getInfiniteTableState } = useComponentState();
   const { getState: getDataSourceState } = useDataSourceContextValue();
-  const [scrollbars, setScrollbars] = useState14(INITIAL_SCROLLBARS);
+  const [scrollbars, setScrollbars] = useState13(INITIAL_SCROLLBARS);
   useEffect24(() => {
     return brain.onRenderCountChange(() => {
       const { scrollTopMax, scrollLeftMax } = brain;
@@ -9772,7 +10001,7 @@ function useComputed() {
     bodySize,
     showSeparatePivotColumnForSingleAggregation
   } = componentState;
-  useState15(() => {
+  useState14(() => {
     componentState.onRowHeightCSSVarChange.onChange((rowHeight) => {
       if (rowHeight) {
         componentActions.rowHeight = rowHeight;
@@ -9867,107 +10096,6 @@ 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 {
-    columnShifts,
-    focused,
-    focusedWithin,
-    domRef,
-    onBlurWithin,
-    onFocusWithin,
-    onSelfFocus,
-    onSelfBlur,
-    activeCellIndex
-  } = componentState;
-  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;
-  });
-  const setFocusedWithin = rafFn((focused2) => {
-    componentActions.focusedWithin = focused2;
-  });
-  const onFocus = (event) => {
-    var _a;
-    (_a = initialDOMProps == null ? void 0 : initialDOMProps.onFocus) == null ? void 0 : _a.call(initialDOMProps, event);
-    if (event.target === domRef.current) {
-      setFocused(true);
-      onSelfFocus == null ? void 0 : onSelfFocus(event);
-      if (focusedWithin) {
-        setFocusedWithin(false);
-        onBlurWithin == null ? void 0 : onBlurWithin(event);
-      }
-    } else {
-      if (!focusedWithin) {
-        setFocusedWithin(true);
-        onFocusWithin == null ? void 0 : onFocusWithin(event);
-      }
-    }
-  };
-  const onBlur = (event) => {
-    var _a, _b;
-    (_a = initialDOMProps == null ? void 0 : initialDOMProps.onBlur) == null ? void 0 : _a.call(initialDOMProps, event);
-    if (event.target === domRef.current) {
-      setFocused(false);
-      onSelfBlur == null ? void 0 : onSelfBlur(event);
-      if (focusedWithin) {
-        setFocusedWithin(false);
-        onBlurWithin == null ? void 0 : onBlurWithin(event);
-      }
-    } else {
-      const contained = (_b = domRef.current) == null ? void 0 : _b.contains(event.relatedTarget);
-      if (!contained) {
-        setFocusedWithin(false);
-        onBlurWithin == null ? void 0 : onBlurWithin(event);
-      }
-    }
-  };
-  const domProps = __spreadProps(__spreadValues({
-    tabIndex: 0
-  }, initialDOMProps), {
-    onFocus,
-    onBlur
-  });
-  const className = join(InfiniteTableClassName, InfiniteCls, columnShifts ? `${InfiniteClsShiftingColumns} ${InfiniteTableClassName}--shifting` : "", domProps == null ? void 0 : domProps.className, computedPinnedStartColumnsWidth ? `${InfiniteTableClassName}--has-pinned-start` : null, computedPinnedEndColumnsWidth ? `${InfiniteTableClassName}--has-pinned-end` : null, focused ? `${InfiniteTableClassName}--focused` : null, focusedWithin ? `${InfiniteTableClassName}--focused-within` : null, focused && componentState.focusedClassName ? componentState.focusedClassName : null, focusedWithin && componentState.focusedWithinClassName ? componentState.focusedWithinClassName : null, computed.computedPinnedStartOverflow ? `${InfiniteTableClassName}--has-pinned-start-overflow` : null, computed.computedPinnedEndOverflow ? `${InfiniteTableClassName}--has-pinned-end-overflow` : null, InfiniteClsRecipe({
-    hasPinnedStart: !!computedPinnedStartColumnsWidth,
-    hasPinnedEnd: !!computedPinnedEndColumnsWidth,
-    focused,
-    focusedWithin
-  }));
-  domProps.className = className;
-  domProps.style = __spreadValues(__spreadValues({}, initialDOMProps == null ? void 0 : initialDOMProps.style), cssVars);
-  if (focused) {
-    if (componentState.focusedStyle) {
-      Object.assign(domProps.style, componentState.focusedStyle);
-    }
-  }
-  if (focusedWithin) {
-    if (componentState.focusedWithinStyle) {
-      Object.assign(domProps.style, componentState.focusedWithinStyle);
-    }
-  }
-  return domProps;
-}
-
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
 import { useMemo as useMemo12 } from "react";
 
@@ -10130,7 +10258,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo12(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.3.13"
+      version: "0.3.16"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -10140,6 +10268,73 @@ var useLicense = (licenseKey = "") => {
   return valid;
 };
 
+// src/components/InfiniteTable/hooks/useScrollToActiveCell.ts
+import { useRef as useRef21, useEffect as useEffect26 } from "react";
+var RETRIES = 10;
+function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
+  const didScrollRef = useRef21(false);
+  const rafId = useRef21(null);
+  useEffect26(() => {
+    if (activeCellIndex != null) {
+      didScrollRef.current = false;
+      cancelAnimationFrame(rafId.current);
+    }
+  }, [activeCellIndex]);
+  useEffect26(() => {
+    if (activeCellIndex != null && !didScrollRef.current) {
+      let tryScroll = function(times = 0) {
+        times++;
+        cancelAnimationFrame(rafId.current);
+        rafId.current = requestAnimationFrame(() => {
+          didScrollRef.current = imperativeApi.scrollCellIntoView(activeCellIndex[0], activeCellIndex[1], {
+            offset: 30
+          });
+          if (!didScrollRef.current && times < RETRIES) {
+            tryScroll(times);
+          }
+        });
+      };
+      tryScroll();
+    }
+    return () => {
+      cancelAnimationFrame(rafId.current);
+    };
+  }, [activeCellIndex, dataCount]);
+}
+
+// src/components/InfiniteTable/hooks/useScrollToActiveRow.ts
+import { useRef as useRef22, useEffect as useEffect27 } from "react";
+var RETRIES2 = 10;
+function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
+  const didScrollRef = useRef22(false);
+  const rafId = useRef22(null);
+  useEffect27(() => {
+    if (activeRowIndex != null) {
+      didScrollRef.current = false;
+      cancelAnimationFrame(rafId.current);
+    }
+  }, [activeRowIndex]);
+  useEffect27(() => {
+    if (activeRowIndex != null && !didScrollRef.current) {
+      let tryScroll = function(times = 0) {
+        times++;
+        rafId.current = requestAnimationFrame(() => {
+          didScrollRef.current = imperativeApi.scrollRowIntoView(activeRowIndex, {
+            offset: 30
+          });
+          if (!didScrollRef.current && times < RETRIES2) {
+            tryScroll(times);
+          }
+        });
+      };
+      tryScroll();
+    }
+    return () => {
+      cancelAnimationFrame(rafId.current);
+    };
+  }, [activeRowIndex, dataCount]);
+}
+
 // src/components/utils/clamp.ts
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
@@ -10383,7 +10578,6 @@ function initSetupState2() {
     propsCache: new Map([]),
     brain,
     headerBrain,
-    columnShifts: null,
     domRef: createRef(),
     scrollerDOMRef: createRef(),
     portalDOMRef: createRef(),
@@ -10398,11 +10592,11 @@ function initSetupState2() {
       scrollTop: 0,
       scrollLeft: 0
     },
+    columnReorderInProgress: false,
     ready: false,
     focused: false,
     focusedWithin: false,
     columnsWhenGrouping: columnsGeneratedForGrouping,
-    draggingColumnId: null,
     pinnedStartScrollListener: new ScrollListener(),
     pinnedEndScrollListener: new ScrollListener(),
     columnsWhenInlineGroupRenderStrategy: void 0
@@ -10456,7 +10650,6 @@ var forwardProps3 = (setupState) => {
     pivotTotalColumnPosition: (pivotTotalColumnPosition) => pivotTotalColumnPosition != null ? pivotTotalColumnPosition : "end",
     pivotGrandTotalColumnPosition: 1,
     licenseKey: (licenseKey) => licenseKey || "",
-    keyboardNavigation: (keyboardNavigation) => keyboardNavigation != null ? keyboardNavigation : "cell",
     activeRowIndex: 1,
     activeCellIndex: 1,
     columnOrder: (columnOrder) => columnOrder != null ? columnOrder : true,
@@ -10503,7 +10696,7 @@ var cleanupState = (state) => {
   state.pinnedStartScrollListener.destroy();
 };
 var mapPropsToState2 = (params) => {
-  var _a, _b;
+  var _a, _b, _c;
   const { props, state, oldState, parentState } = params;
   const computedColumnGroups = state.pivotColumnGroups || state.columnGroups;
   const columnGroupsDepthsMap = state.columnGroups && state.columnGroups != (oldState == null ? void 0 : oldState.columnGroups) || state.pivotColumnGroups && state.pivotColumnGroups != (oldState == null ? void 0 : oldState.pivotColumnGroups) ? computeColumnGroupsDepths(computedColumnGroups) : state.columnGroupsDepthsMap;
@@ -10519,7 +10712,8 @@ var mapPropsToState2 = (params) => {
     groupRenderStrategy,
     groupBy,
     computedColumns,
-    columnHeaderCssEllipsis: (_b = (_a = props.columnHeaderCssEllipsis) != null ? _a : props.columnCssEllipsis) != null ? _b : true,
+    keyboardNavigation: (_a = state.keyboardNavigation) != null ? _a : state.activeCellIndex != null ? "cell" : state.activeRowIndex != null ? "row" : "cell",
+    columnHeaderCssEllipsis: (_c = (_b = props.columnHeaderCssEllipsis) != null ? _b : props.columnCssEllipsis) != null ? _c : true,
     columnGroupsDepthsMap,
     columnGroupsMaxDepth: columnGroupsDepthsMap != state.columnGroupsDepthsMap ? Math.max(...columnGroupsDepthsMap.values(), 0) : state.columnGroupsMaxDepth,
     computedColumnGroups,
@@ -10556,11 +10750,11 @@ var InfiniteTableComponent = memo11(function InfiniteTableComponent2() {
     getState
   } = useInfiniteTable();
   const {
-    componentState: { loading },
+    componentState: { loading, dataArray },
     getState: getDataSourceState,
     componentActions: dataSourceActions
   } = useDataSourceContextValue();
-  const [imperativeApi] = useState16(() => {
+  const [imperativeApi] = useState15(() => {
     return getImperativeApi(getState, getComputed, getDataSourceState, actions);
   });
   const {
@@ -10584,31 +10778,18 @@ var InfiniteTableComponent = memo11(function InfiniteTableComponent2() {
     activeCellIndex,
     onRenderUpdater
   } = componentState;
-  useEffect27(() => {
-    if (activeRowIndex != null) {
-      imperativeApi.scrollRowIntoView(activeRowIndex, {
-        offset: 30
-      });
-    }
-  }, [activeRowIndex]);
-  useEffect27(() => {
-    if (activeCellIndex != null) {
-      imperativeApi.scrollCellIntoView(activeCellIndex[0], activeCellIndex[1], {
-        offset: 30
-      });
-    }
-  }, [activeCellIndex]);
-  const { columnShifts, bodySize } = componentState;
+  useScrollToActiveRow(activeRowIndex, dataArray.length, imperativeApi);
+  useScrollToActiveCell(activeCellIndex, dataArray.length, imperativeApi);
+  const { bodySize } = componentState;
   const { scrollbars } = computed;
   const { renderCell } = useCellRendering({
     imperativeApi,
     getComputed,
     domRef: componentState.domRef,
-    columnShifts,
     bodySize,
     computed
   });
-  useEffect26(() => {
+  useEffect28(() => {
     const dataSourceState = getDataSourceState();
     const onChange = debounce((renderRange) => {
       dataSourceState.notifyRenderRangeChange({
@@ -10621,7 +10802,7 @@ var InfiniteTableComponent = memo11(function InfiniteTableComponent2() {
   const licenseValid = useLicense(licenseKey);
   const domProps = useDOMProps(componentState.domProps);
   const LoadMaskCmp = (_a = components == null ? void 0 : components.LoadMask) != null ? _a : LoadMask;
-  useEffect26(() => {
+  useEffect28(() => {
     brain.setScrollStopDelay(scrollStopDelay);
     dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
   }, [scrollStopDelay]);
@@ -10648,7 +10829,7 @@ var InfiniteTableComponent = memo11(function InfiniteTableComponent2() {
   }) : null, /* @__PURE__ */ createElement28(InfiniteTableBody, null, /* @__PURE__ */ createElement28(HeadlessTable, {
     tabIndex: 0,
     activeRowIndex: componentState.ready && keyboardNavigation === "row" ? activeRowIndex : null,
-    activeCellIndex: componentState.ready && keyboardNavigation === "cell" ? activeCellIndex : null,
+    activeCellIndex: componentState.ready && keyboardNavigation === "cell" && !componentState.columnReorderInProgress ? activeCellIndex : null,
     scrollStopDelay,
     renderer,
     onRenderUpdater,
@@ -10660,7 +10841,7 @@ var InfiniteTableComponent = memo11(function InfiniteTableComponent2() {
     visible: loading
   }, loadingText)), /* @__PURE__ */ createElement28("div", {
     ref: portalDOMRef,
-    className: join(`${rootClassName2}Portal`, zIndex[1e3], position.absolute, top[0], left[0])
+    className: join(`${rootClassName2}Portal`, zIndex[1e7], position.absolute, top[0], left[0])
   }), rowHeightCSSVar ? /* @__PURE__ */ createElement28(CSSVariableWatch, {
     varName: rowHeightCSSVar,
     onChange: onRowHeightCSSVarChange
@@ -10693,13 +10874,13 @@ function InfiniteTableContextProvider() {
     };
     componentActions.bodySize = bodySize;
   }, { earlyAttach: true, debounce: 50 });
-  useEffect26(() => {
+  useEffect28(() => {
     return () => {
       componentState.onRowHeightCSSVarChange.destroy();
       componentState.onColumnHeaderHeightCSSVarChange.destroy();
     };
   }, []);
-  useEffect26(() => {
+  useEffect28(() => {
     if (scrollerDOMRef.current) {
       scrollerDOMRef.current.scrollTop = 0;
     }