@infinite-table/infinite-react 0.3.18 → 0.3.21

package/index.esm.js

@@ -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)", 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 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)", columnReorderEffectDurationAtIndex: "var(--_1slvgu9a)", columnWidthAtIndex: "var(--_1slvgu9b)", columnOffsetAtIndex: "var(--_1slvgu9c)", columnOffsetAtIndexWhileReordering: "var(--_1slvgu9d)", columnZIndexAtIndex: "var(--_1slvgu9e)", pinnedStartWidth: "var(--_1slvgu9f)", pinnedEndWidth: "var(--_1slvgu9g)", pinnedStartDraggingWidth: "var(--_1slvgu9h)", pinnedEndDraggingWidth: "var(--_1slvgu9i)", pinnedEndOffset: "var(--_1slvgu9j)", computedVisibleColumnsCount: "var(--_1slvgu9k)", baseZIndexForCells: "var(--_1slvgu9l)", bodyWidth: "var(--_1slvgu9m)", bodyHeight: "var(--_1slvgu9n)", scrollbarWidthHorizontal: "var(--_1slvgu9o)", scrollbarWidthVertical: "var(--_1slvgu9p)", scrollLeft: "var(--_1slvgu9q)", scrollTop: "var(--_1slvgu9r)" };
+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)", pinnedBorder: "var(--infinite-pinned-cell-border)", 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
@@ -1129,8 +1129,11 @@ var InfiniteSelector = `.${internalProps.rootClassName}`;
 function getParentInfiniteNode(node) {
   return selectParent(node, InfiniteSelector);
 }
+var scrollLeft = stripVar(InternalVars.scrollLeft);
+var scrollTop = stripVar(InternalVars.scrollTop);
 var columnWidthAtIndex = stripVar(InternalVars.columnWidthAtIndex);
 var columnOffsetAtIndex = stripVar(InternalVars.columnOffsetAtIndex);
+var columnReorderEffectDurationAtIndex = stripVar(InternalVars.columnReorderEffectDurationAtIndex);
 var columnOffsetAtIndexWhileReordering = stripVar(InternalVars.columnOffsetAtIndexWhileReordering);
 var columnZIndexAtIndex = stripVar(InternalVars.columnZIndexAtIndex);
 function setInfiniteVarOnRoot(varName, varValue, node) {
@@ -1156,18 +1159,34 @@ function setInfiniteColumnWidth(colIndex, colWidth, node) {
 function setInfiniteColumnOffset(colIndex, colOffset, node) {
   setInfiniteVarOnRoot(`${columnOffsetAtIndex}-${colIndex}`, typeof colOffset === "number" ? colOffset + "px" : colOffset, node);
 }
+function addToInfiniteColumnOffset(column, amountToAdd, node) {
+  setInfiniteVarOnRoot(`${columnOffsetAtIndex}-${column.computedVisibleIndex}`, !column.computedPinned ? `${column.computedAbsoluteOffset + amountToAdd}px` : `calc( ${column.computedAbsoluteOffset + amountToAdd}px + var(${scrollLeft}))`, 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 clearInfiniteColumnReorderDuration(colIndex, node, defaultValue) {
+  setInfiniteVarOnRoot(`${columnReorderEffectDurationAtIndex}-${colIndex}`, defaultValue != null ? defaultValue : "", node);
+}
+function restoreInfiniteColumnReorderDuration(colIndex, node) {
+  const varName = `${columnReorderEffectDurationAtIndex}-${colIndex}`;
+  setInfiniteVarOnRoot(varName, ThemeVars.components.Cell.reorderEffectDuration, node);
+}
 function getCSSVarNameForColWidth(colIndex) {
   return `${columnWidthAtIndex}-${colIndex}`;
 }
 function getCSSVarNameForColOffset(colIndex) {
   return `${columnOffsetAtIndex}-${colIndex}`;
 }
+function setInfiniteScrollPosition(scrollPosition, node) {
+  setInfiniteVarsOnNode({
+    [scrollLeft]: `${scrollPosition.scrollLeft}px`,
+    [scrollTop]: `${scrollPosition.scrollTop}px`
+  }, node);
+}
 
 // src/components/VirtualBrain/MatrixBrain.ts
 var import_binary_search = __toModule(require_binary_search());
@@ -1501,11 +1520,11 @@ var MatrixBrain = class extends Logger {
       }
       return sum2;
     };
-    this.getFixedEndColsOffsets = () => {
+    this.getFixedEndColsOffsets = ({ skipScroll } = { skipScroll: false }) => {
       if (!this.fixedColsEnd) {
         return [];
       }
-      const { scrollLeft } = this.scrollPosition;
+      const { scrollLeft: scrollLeft2 } = this.scrollPosition;
       const { width } = this.getAvailableSize();
       const offsets = [];
       const widths = [];
@@ -1515,7 +1534,7 @@ var MatrixBrain = class extends Logger {
         widths.push(colWidth);
         sum2 += colWidth;
       }
-      const baseOffset = width - sum2 + scrollLeft;
+      const baseOffset = width - sum2 + (skipScroll ? 0 : scrollLeft2);
       sum2 = 0;
       let index = 0;
       for (let colIndex = this.cols - this.fixedColsEnd; colIndex < this.cols; colIndex++) {
@@ -1526,11 +1545,11 @@ var MatrixBrain = class extends Logger {
       }
       return offsets;
     };
-    this.getFixedEndRowsOffsets = () => {
+    this.getFixedEndRowsOffsets = ({ skipScroll } = { skipScroll: false }) => {
       if (!this.fixedRowsEnd) {
         return [];
       }
-      const { scrollTop } = this.scrollPosition;
+      const { scrollTop: scrollTop2 } = this.scrollPosition;
       const { height } = this.getAvailableSize();
       const offsets = [];
       const heights = [];
@@ -1540,7 +1559,7 @@ var MatrixBrain = class extends Logger {
         heights.push(rowHeight);
         sum2 += rowHeight;
       }
-      const baseOffset = height - sum2 + scrollTop;
+      const baseOffset = height - sum2 + (skipScroll ? 0 : scrollTop2);
       sum2 = 0;
       let index = 0;
       for (let rowIndex = this.rows - this.fixedRowsEnd; rowIndex < this.rows; rowIndex++) {
@@ -1602,6 +1621,12 @@ var MatrixBrain = class extends Logger {
       horizontal,
       vertical
     }) => {
+      if (horizontal === void 0) {
+        horizontal = this.horizontalRenderCount;
+      }
+      if (vertical === void 0) {
+        vertical = this.verticalRenderCount;
+      }
       const horizontalSame = horizontal === this.horizontalRenderCount;
       const verticalSame = vertical === this.verticalRenderCount;
       if (horizontalSame && verticalSame) {
@@ -2670,6 +2695,7 @@ var MappedCells = class extends Logger {
 // src/components/HeadlessTable/ReactHeadlessTableRenderer.tsx
 var ITEM_POSITION_WITH_TRANSFORM = true;
 var currentColumnTransformY = stripVar(InternalVars.currentColumnTransformY);
+var scrollTopCSSVar = stripVar(InternalVars.scrollTop);
 var columnOffsetAtIndex2 = stripVar(InternalVars.columnOffsetAtIndex);
 var columnOffsetAtIndexWhileReordering2 = stripVar(InternalVars.columnOffsetAtIndexWhileReordering);
 var ReactHeadlessTableRenderer = class extends Logger {
@@ -2686,14 +2712,15 @@ var ReactHeadlessTableRenderer = class extends Logger {
     this.currentHoveredRow = -1;
     this.hoverRowUpdatesInProgress = new Map();
     this.infiniteNode = null;
-    this.setTransform = (element, _rowIndex, colIndex, x, y, zIndex2) => {
+    this.setTransform = (element, _rowIndex, colIndex, {
+      x,
+      y,
+      scrollLeft: scrollLeft2,
+      scrollTop: scrollTop2
+    }, zIndex2) => {
       const columnOffsetX = `${columnOffsetAtIndex2}-${colIndex}`;
       const columnOffsetXWhileReordering = `${columnOffsetAtIndexWhileReordering2}-${colIndex}`;
-      if (!this.infiniteNode) {
-        this.infiniteNode = getParentInfiniteNode(element);
-      }
-      this.infiniteNode.style.setProperty(columnOffsetX, `${x}px`);
-      element.style.setProperty(currentColumnTransformY, `${y}px`);
+      element.style.setProperty(currentColumnTransformY, scrollTop2 ? `calc( ${y}px + var(${scrollTopCSSVar}) )` : `${y}px`);
       element.style.transform = `translate3d(var(${columnOffsetXWhileReordering}, var(${columnOffsetX})), ${InternalVars.currentColumnTransformY}, 0)`;
       if (zIndex2 != null) {
       }
@@ -2737,18 +2764,18 @@ var ReactHeadlessTableRenderer = class extends Logger {
       if (!scrollAdjustPosition) {
         scrollAdjustPosition = rowOffset > bottom - fixedEndRowsHeight ? "end" : rowOffset < top2 + fixedStartRowsHeight ? "start" : "end";
       }
-      let scrollTop = scrollPosition.scrollTop;
+      let scrollTop2 = scrollPosition.scrollTop;
       if (scrollAdjustPosition === "center") {
-        scrollTop = rowOffset - Math.floor((brain.getAvailableSize().height - fixedStartRowsHeight - fixedEndRowsHeight) / 2);
+        scrollTop2 = rowOffset - Math.floor((brain.getAvailableSize().height - fixedStartRowsHeight - fixedEndRowsHeight) / 2);
       } else if (scrollAdjustPosition === "start") {
         offset = -offset;
-        scrollTop += rowOffset - top2 + offset - fixedStartRowsHeight;
+        scrollTop2 += rowOffset - top2 + offset - fixedStartRowsHeight;
       } else {
         offset += rowHeight;
-        scrollTop += rowOffset - bottom + offset + fixedEndRowsHeight;
+        scrollTop2 += rowOffset - bottom + offset + fixedEndRowsHeight;
       }
       return __spreadProps(__spreadValues({}, scrollPosition), {
-        scrollTop
+        scrollTop: scrollTop2
       });
     };
     this.getScrollPositionForScrollColumnIntoView = (colIndex, config = { offset: 0 }) => {
@@ -2771,18 +2798,18 @@ var ReactHeadlessTableRenderer = class extends Logger {
       if (!scrollAdjustPosition) {
         scrollAdjustPosition = colOffset > right - fixedEndColsWidth ? "end" : colOffset < left2 + fixedStartColsWidth ? "start" : "end";
       }
-      let scrollLeft = scrollPosition.scrollLeft;
+      let scrollLeft2 = scrollPosition.scrollLeft;
       if (scrollAdjustPosition === "center") {
-        scrollLeft = colOffset - Math.floor((brain.getAvailableSize().width - fixedStartColsWidth - fixedEndColsWidth) / 2);
+        scrollLeft2 = colOffset - Math.floor((brain.getAvailableSize().width - fixedStartColsWidth - fixedEndColsWidth) / 2);
       } else if (scrollAdjustPosition === "start") {
         offset = -offset;
-        scrollLeft += colOffset - left2 + offset - fixedStartColsWidth;
+        scrollLeft2 += colOffset - left2 + offset - fixedStartColsWidth;
       } else {
         offset += colWidth;
-        scrollLeft += colOffset - right + offset + fixedEndColsWidth;
+        scrollLeft2 += colOffset - right + offset + fixedEndColsWidth;
       }
       return __spreadProps(__spreadValues({}, scrollPosition), {
-        scrollLeft
+        scrollLeft: scrollLeft2
       });
     };
     this.getScrollPositionForScrollCellIntoView = (rowIndex, colIndex, config = { offsetLeft: 0, offsetTop: 0 }) => {
@@ -2797,9 +2824,9 @@ var ReactHeadlessTableRenderer = class extends Logger {
       if (!scrollPosForCol || !scrollPosForRow) {
         return null;
       }
-      const { scrollLeft } = scrollPosForCol;
-      const { scrollTop } = scrollPosForRow;
-      return { scrollLeft, scrollTop };
+      const { scrollLeft: scrollLeft2 } = scrollPosForCol;
+      const { scrollTop: scrollTop2 } = scrollPosForRow;
+      return { scrollLeft: scrollLeft2, scrollTop: scrollTop2 };
     };
     this.isRowFullyVisible = (rowIndex, offsetMargin = 2) => {
       return this.isRowVisible(rowIndex, this.brain.getRowHeight(rowIndex) - offsetMargin);
@@ -3186,10 +3213,10 @@ var ReactHeadlessTableRenderer = class extends Logger {
         }
       };
       raf(() => {
-        checkHoverClass();
-        if (false) {
+        if (this.destroyed) {
           return;
         }
+        checkHoverClass();
         this.hoverRowUpdatesInProgress.delete(rowIndex);
       });
     };
@@ -3213,7 +3240,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, null);
+          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);
@@ -3242,8 +3269,15 @@ var ReactHeadlessTableRenderer = class extends Logger {
       if (!fixedColsStart && !fixedColsEnd && !fixedRowsStart && !fixedRowsEnd) {
         return;
       }
-      const fixedEndColsOffsets = this.brain.getFixedEndColsOffsets();
-      const fixedEndRowsOffsets = this.brain.getFixedEndRowsOffsets();
+      if (itemDOMElements[0]) {
+        setInfiniteScrollPosition(scrollPosition, this.getInfiniteNode(itemDOMElements[0]));
+      }
+      const fixedEndColsOffsets = this.brain.getFixedEndColsOffsets({
+        skipScroll: true
+      });
+      const fixedEndRowsOffsets = this.brain.getFixedEndRowsOffsets({
+        skipScroll: true
+      });
       const { start, end } = this.brain.getRenderRange();
       const [startRow, startCol] = start;
       const [endRow, endCol] = end;
@@ -3255,33 +3289,48 @@ var ReactHeadlessTableRenderer = class extends Logger {
         const itemPosition = brain.getCellOffset(rowIndex, colIndex);
         const node = itemDOMElements[elementIndex];
         if (elementIndex != null && node && itemPosition) {
-          fn(rowIndex, colIndex, node, itemPosition, scrollPosition);
+          fn(rowIndex, colIndex, node, itemPosition);
         }
       }
-      const adjustColStart = (_rowIndex, colIndex, node, { x, y }, { scrollLeft }) => {
-        this.setTransform(node, _rowIndex, colIndex, x + scrollLeft, y, fixedColsStart - colIndex);
+      const adjustColStart = (_rowIndex, colIndex, node, { x, y }) => {
+        this.setTransform(node, _rowIndex, colIndex, { x, y, scrollLeft: true }, fixedColsStart - colIndex);
       };
-      const adjustRowStart = (rowIndex, _colIndex, node, coords, scrollPosition2) => {
-        this.setTransform(node, rowIndex, _colIndex, coords.x, coords.y + scrollPosition2.scrollTop, fixedRowsStart - rowIndex);
+      const adjustRowStart = (rowIndex, _colIndex, node, coords) => {
+        this.setTransform(node, rowIndex, _colIndex, { x: coords.x, y: coords.y, scrollTop: true }, fixedRowsStart - rowIndex);
       };
       const adjustColEnd = (_rowIndex, colIndex, node, { y }) => {
         const val = fixedEndColsOffsets[colIndex];
-        this.setTransform(node, _rowIndex, colIndex, val, y, cols - colIndex);
+        this.setTransform(node, _rowIndex, colIndex, { x: val, y, scrollLeft: true }, cols - colIndex);
       };
       const adjustRowEnd = (rowIndex, _colIndex, node, coords) => {
-        this.setTransform(node, rowIndex, _colIndex, coords.x, fixedEndRowsOffsets[rowIndex], rows - rowIndex);
+        this.setTransform(node, rowIndex, _colIndex, { x: coords.x, y: fixedEndRowsOffsets[rowIndex], scrollTop: true }, rows - rowIndex);
       };
-      const adjustColStartRowStart = (_rowIndex, _colIndex, node, { x, y }, scrollPosition2) => {
-        this.setTransform(node, _rowIndex, _colIndex, x + scrollPosition2.scrollLeft, y + scrollPosition2.scrollTop, 1e5);
+      const adjustColStartRowStart = (_rowIndex, _colIndex, node, { x, y }) => {
+        this.setTransform(node, _rowIndex, _colIndex, { x, scrollLeft: true, y, scrollTop: true }, 1e5);
       };
-      const adjustColStartRowEnd = (_rowIndex, _colIndex, node, { x }, scrollPosition2) => {
-        this.setTransform(node, _rowIndex, _colIndex, x + scrollPosition2.scrollLeft, fixedEndRowsOffsets[_rowIndex], 2e5);
+      const adjustColStartRowEnd = (_rowIndex, _colIndex, node, { x }) => {
+        this.setTransform(node, _rowIndex, _colIndex, {
+          x,
+          scrollLeft: true,
+          y: fixedEndRowsOffsets[_rowIndex],
+          scrollTop: true
+        }, 2e5);
       };
       const adjustColEndRowStart = (_rowIndex, colIndex, node, coords) => {
-        this.setTransform(node, _rowIndex, colIndex, fixedEndColsOffsets[colIndex], coords.y + scrollPosition.scrollTop, 3e5);
+        this.setTransform(node, _rowIndex, colIndex, {
+          x: fixedEndColsOffsets[colIndex],
+          y: coords.y,
+          scrollLeft: true,
+          scrollTop: true
+        }, 3e5);
       };
       const adjustColEndRowEnd = (rowIndex, colIndex, node) => {
-        this.setTransform(node, rowIndex, colIndex, fixedEndColsOffsets[colIndex], fixedEndRowsOffsets[rowIndex], 4e5);
+        this.setTransform(node, rowIndex, colIndex, {
+          x: fixedEndColsOffsets[colIndex],
+          y: fixedEndRowsOffsets[rowIndex],
+          scrollLeft: true,
+          scrollTop: true
+        }, 4e5);
       };
       if (fixedColsStart || fixedColsEnd) {
         for (let rowIndex = startRow; rowIndex < endRow; rowIndex++) {
@@ -3360,6 +3409,9 @@ var ReactHeadlessTableRenderer = class extends Logger {
     const removeOnSizeChange = brain.onAvailableSizeChange(() => {
       this.adjustFixedElementsOnScroll();
       raf(() => {
+        if (this.destroyed) {
+          return;
+        }
         this.adjustFixedElementsOnScroll();
       });
     });
@@ -3372,6 +3424,12 @@ var ReactHeadlessTableRenderer = class extends Logger {
       removeOnScrollStop();
     };
   }
+  getInfiniteNode(node) {
+    if (!this.infiniteNode) {
+      this.infiniteNode = getParentInfiniteNode(node);
+    }
+    return this.infiniteNode;
+  }
   renderElement(elementIndex) {
     const domRef = (node) => {
       if (node) {
@@ -3517,11 +3575,11 @@ var useRerender = () => {
 };
 
 // src/components/InfiniteTable/components/ActiveCellIndicator.css.ts
-var ActiveCellIndicatorCls = { visible: "nxbq1c2 nxbq1c1 _16lm1iwf _16lm1iw3 _16lm1iwz _16lm1iwx", hidden: "nxbq1c3 nxbq1c1 _16lm1iwf _16lm1iw3 _16lm1iwz _16lm1iwx" };
-var ActiveIndicatorWrapperCls = "_16lm1iwf _16lm1iw3 _16lm1iwz _16lm1iwx _16lm1iwt _16lm1iwn";
+var ActiveCellIndicatorCls = { visible: "nxbq1c2 nxbq1c1 _16lm1iwf _16lm1iw3 _16lm1iw14 _16lm1iw12", hidden: "nxbq1c3 nxbq1c1 _16lm1iwf _16lm1iw3 _16lm1iw14 _16lm1iw12" };
+var ActiveIndicatorWrapperCls = "_16lm1iwf _16lm1iw3 _16lm1iw14 _16lm1iw12 _16lm1iwy _16lm1iwo";
 
 // src/components/InfiniteTable/components/ActiveRowIndicator.css.ts
-var ActiveRowIndicatorCls = { visible: "j26lrx1 j26lrx0 _16lm1iwf _16lm1iw3 _16lm1iww _16lm1iwx _16lm1iwz", hidden: "j26lrx2 j26lrx0 _16lm1iwf _16lm1iw3 _16lm1iww _16lm1iwx _16lm1iwz" };
+var ActiveRowIndicatorCls = { visible: "j26lrx1 j26lrx0 _16lm1iwf _16lm1iw3 _16lm1iw11 _16lm1iw12 _16lm1iw14", hidden: "j26lrx2 j26lrx0 _16lm1iwf _16lm1iw3 _16lm1iw11 _16lm1iw12 _16lm1iw14" };
 
 // src/components/InfiniteTable/components/ActiveRowIndicator.tsx
 var { rootClassName: rootClassName3 } = internalProps;
@@ -4062,20 +4120,20 @@ var useInternalProps = () => {
 };
 
 // src/components/InfiniteTable/utilities.css.ts
-var alignItems = { center: "_16lm1iw17", stretch: "_16lm1iw18" };
-var cssEllipsisClassName = "_16lm1iw1g _16lm1iw1h _16lm1iw1c";
+var alignItems = { center: "_16lm1iw1e", stretch: "_16lm1iw1f" };
+var cssEllipsisClassName = "_16lm1iw1p _16lm1iw1q _16lm1iw1j";
 var cursor = { pointer: "_16lm1iwd", colResize: "_16lm1iwe" };
-var display = { flex: "_16lm1iwp", block: "_16lm1iwq", inlineBlock: "_16lm1iwr" };
+var display = { flex: "_16lm1iwt", none: "_16lm1iwu", block: "_16lm1iwv", inlineBlock: "_16lm1iww" };
 var flex = { "1": "_16lm1iwg", none: "_16lm1iwh" };
-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 flexFlow = { column: "_16lm1iw1c", row: "_16lm1iw1d" };
+var justifyContent = { center: "_16lm1iw1g", start: "_16lm1iw1h", end: "_16lm1iw1i" };
+var left = { "0": "_16lm1iw14", "100%": "_16lm1iw15", auto: "_16lm1iw16" };
+var overflow = { hidden: "_16lm1iw1j", auto: "_16lm1iw1k", visible: "_16lm1iw1l" };
 var position = { relative: "_16lm1iw1", absolute: "_16lm1iw2", sticky: "_16lm1iw3", fixed: "_16lm1iw4" };
-var top = { "0": "_16lm1iwx", "100%": "_16lm1iwy" };
+var top = { "0": "_16lm1iw12", "100%": "_16lm1iw13" };
 var transformTranslateZero = "_16lm1iwa";
-var userSelect = { none: "_16lm1iws" };
-var zIndex = { "1": "_16lm1iwi", "10": "_16lm1iwj", "1000": "_16lm1iwk", "10000": "_16lm1iwl", "100000": "_16lm1iwm", "1000000": "_16lm1iwn", "10000000": "_16lm1iwo" };
+var userSelect = { none: "_16lm1iwx" };
+var zIndex = { "1": "_16lm1iwi", "10": "_16lm1iwj", "100": "_16lm1iwk", "1000": "_16lm1iwl", "10000": "_16lm1iwm", "100000": "_16lm1iwn", "1000000": "_16lm1iwo", "10000000": "_16lm1iwp", "1k": "_16lm1iwq", "10k": "_16lm1iwr", "100k": "_16lm1iws" };
 
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
 var InfiniteTableBody = forwardRef2(function InfiniteTableBody2(props, ref) {
@@ -4106,7 +4164,7 @@ import {
   Fragment as Fragment2,
   createContext as createContext4,
   createElement as createElement16,
-  useMemo as useMemo5
+  useMemo as useMemo4
 } from "react";
 import { useCallback as useCallback8, useContext as useContext4, useEffect as useEffect11, useRef as useRef12 } from "react";
 import { createPortal } from "react-dom";
@@ -4212,7 +4270,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, useState as useState5 } from "react";
+import { useCallback as useCallback6, useState as useState5 } from "react";
 
 // src/components/InfiniteTable/hooks/useInfiniteTable.ts
 import { useContext as useContext3 } from "react";
@@ -4253,10 +4311,36 @@ var moveXatY = (arr, dragIndex, dropIndex) => {
 // 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 InfiniteCls = "_1yeub2v0 _16lm1iw1 _16lm1iwt _16lm1iw1c _16lm1iw0";
+var InfiniteClsHasPinnedEnd = "_1yeub2vo";
+var InfiniteClsHasPinnedStart = "_1yeub2vn";
 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 PinnedEndIndicatorBorder = "_1yeub2vr _1yeub2vp _16lm1iw2 _16lm1iw12 _16lm1iwe _16lm1iwx _16lm1iw10 _16lm1iw1n _16lm1iwf _16lm1iwl";
 var PinnedRowsContainerClsVariants = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "", variantClassNames: { pinned: { start: "_1yeub2vi", end: "_1yeub2vj", false: "_1yeub2vk" } }, defaultVariants: {}, compoundVariants: [] });
+var PinnedStartIndicatorBorder = "_1yeub2vq _1yeub2vp _16lm1iw2 _16lm1iw12 _16lm1iwe _16lm1iwx _16lm1iw10 _16lm1iw1n _16lm1iwf _16lm1iwl";
+
+// src/components/utils/getScrollbarWidth.ts
+var scrollbarWidth;
+function getScrollbarWidth() {
+  var _a, _b;
+  if (scrollbarWidth != null) {
+    return scrollbarWidth;
+  }
+  const doc = (_a = getGlobal().document) != null ? _a : null;
+  if (!doc) {
+    return 0;
+  }
+  const outer = doc.createElement("div");
+  outer.style.visibility = "hidden";
+  outer.style.overflow = "scroll";
+  doc.body.appendChild(outer);
+  const inner = doc.createElement("div");
+  outer.appendChild(inner);
+  scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+  (_b = outer.parentNode) == null ? void 0 : _b.removeChild(outer);
+  return scrollbarWidth;
+}
 
 // src/components/InfiniteTable/utils/rafFn.ts
 var rafFn = (fn) => {
@@ -4273,12 +4357,22 @@ var rafFn = (fn) => {
 };
 
 // src/components/InfiniteTable/hooks/useDOMProps.ts
+var scrollbarWidthHorizontal = stripVar(InternalVars.scrollbarWidthHorizontal);
+var scrollbarWidthVertical = stripVar(InternalVars.scrollbarWidthVertical);
 var columnWidthAtIndex2 = stripVar(InternalVars.columnWidthAtIndex);
 var columnOffsetAtIndex3 = stripVar(InternalVars.columnOffsetAtIndex);
 var columnZIndexAtIndex3 = stripVar(InternalVars.columnZIndexAtIndex);
+var scrollLeftCSSVar = stripVar(InternalVars.scrollLeft);
 var activeCellColWidth = stripVar(InternalVars.activeCellColWidth);
 var activeCellColOffset = stripVar(InternalVars.activeCellColOffset);
 var baseZIndexForCells = stripVar(InternalVars.baseZIndexForCells);
+var pinnedStartWidthCSSVar = stripVar(InternalVars.pinnedStartWidth);
+var pinnedStartDraggingWidthCSSVar = stripVar(InternalVars.pinnedStartDraggingWidth);
+var bodyWidthCSSVar = stripVar(InternalVars.bodyWidth);
+var bodyHeightCSSVar = stripVar(InternalVars.bodyHeight);
+var pinnedEndOffsetCSSVar = stripVar(InternalVars.pinnedEndOffset);
+var pinnedEndWidthCSSVar = stripVar(InternalVars.pinnedEndWidth);
+var pinnedEndDraggingWidthCSSVar = stripVar(InternalVars.pinnedEndDraggingWidth);
 var computedVisibleColumnsCountCSSVar = stripVar(InternalVars.computedVisibleColumnsCount);
 function getColumnZIndex(col, params) {
   let computedZIndex = "auto";
@@ -4287,7 +4381,7 @@ function getColumnZIndex(col, params) {
     if (col.computedPinned === "start") {
       computedZIndex = params.pinnedStartColsCount - col.computedVisibleIndexInCategory;
     } else if (col.computedPinned === "end") {
-      computedZIndex = params.visibleColsCount - col.computedVisibleIndexInCategory;
+      computedZIndex = params.visibleColsCount + col.computedVisibleIndexInCategory;
     }
   } else {
     computedZIndex = -index * 10;
@@ -4296,6 +4390,7 @@ function getColumnZIndex(col, params) {
   return zIndexValue;
 }
 function useDOMProps(initialDOMProps) {
+  const scrollbarWidth2 = getScrollbarWidth();
   const { computed, componentState, componentActions } = useInfiniteTable();
   const {
     focused,
@@ -4305,23 +4400,30 @@ function useDOMProps(initialDOMProps) {
     onFocusWithin,
     onSelfFocus,
     onSelfBlur,
+    bodySize,
     activeCellIndex
   } = componentState;
   const {
     computedPinnedStartColumnsWidth,
     computedPinnedEndColumnsWidth,
     computedPinnedStartColumns,
-    computedVisibleColumns
+    computedPinnedEndColumns,
+    computedVisibleColumns,
+    scrollbars
   } = computed;
+  const prevPinnedEndCols = [];
   const cssVars = computedVisibleColumns.reduce((vars, col) => {
     const index = col.computedVisibleIndex;
     vars[`${columnWidthAtIndex2}-${index}`] = col.computedWidth + "px";
-    vars[`${columnOffsetAtIndex3}-${index}`] = col.computedOffset + "px";
+    vars[`${columnOffsetAtIndex3}-${index}`] = col.computedPinned === "start" ? `calc( ${col.computedOffset}px + var(${scrollLeftCSSVar}) )` : col.computedPinned === "end" ? `calc( var(${pinnedEndOffsetCSSVar}) ${prevPinnedEndCols.length ? "+" : ""} ${prevPinnedEndCols.map((c) => `var(${columnWidthAtIndex2}-${c.computedVisibleIndex})`).join(" + ")} + var(${scrollLeftCSSVar}) )` : `${col.computedOffset}px`;
     const zIndexValue = getColumnZIndex(col, {
       pinnedStartColsCount: computedPinnedStartColumns.length,
       visibleColsCount: computedVisibleColumns.length
     });
     vars[`${columnZIndexAtIndex3}-${index}`] = `${zIndexValue}`;
+    if (col.computedPinned === "end") {
+      prevPinnedEndCols.push(col);
+    }
     return vars;
   }, {});
   if (activeCellIndex != null) {
@@ -4329,7 +4431,14 @@ function useDOMProps(initialDOMProps) {
     cssVars[activeCellColOffset] = `var(${getCSSVarNameForColOffset(activeCellIndex[1])})`;
   }
   cssVars[computedVisibleColumnsCountCSSVar] = computedVisibleColumns.length;
+  cssVars[scrollbarWidthHorizontal] = scrollbars.horizontal ? `${scrollbarWidth2}px` : "0px";
+  cssVars[scrollbarWidthVertical] = scrollbars.vertical ? `${scrollbarWidth2}px` : "0px";
+  cssVars[pinnedStartWidthCSSVar] = `calc( ` + computedPinnedStartColumns.map((c) => `var(${getCSSVarNameForColWidth(c.computedVisibleIndex)})`).join(" + ") + ` - var(${pinnedStartDraggingWidthCSSVar}, 0px) )`;
+  cssVars[pinnedEndWidthCSSVar] = `calc( ` + computedPinnedEndColumns.map((c) => `var(${getCSSVarNameForColWidth(c.computedVisibleIndex)})`).join(" + ") + ` - var(${pinnedEndDraggingWidthCSSVar}, 0px) )`;
   cssVars[baseZIndexForCells] = computedVisibleColumns.length * 10;
+  cssVars[pinnedEndOffsetCSSVar] = `calc( var(${bodyWidthCSSVar}) - var(${pinnedEndWidthCSSVar}) - var(${scrollbarWidthVertical}) )`;
+  cssVars[bodyWidthCSSVar] = `${bodySize.width}px`;
+  cssVars[bodyHeightCSSVar] = `${bodySize.height}px`;
   const setFocused = rafFn((focused2) => {
     componentActions.focused = focused2;
   });
@@ -4377,7 +4486,7 @@ function useDOMProps(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({
+  const className = join(InfiniteTableClassName, InfiniteCls, domProps == null ? void 0 : domProps.className, computedPinnedStartColumnsWidth ? `${InfiniteTableClassName}--has-pinned-start ${InfiniteClsHasPinnedStart}` : null, computedPinnedEndColumnsWidth ? `${InfiniteTableClassName}--has-pinned-end  ${InfiniteClsHasPinnedEnd}` : 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,
@@ -4398,64 +4507,169 @@ function useDOMProps(initialDOMProps) {
   return domProps;
 }
 
+// src/components/InfiniteTable/utils/progressiveSpeedScroller.ts
+var progressiveSpeedScroller = (staticOptions) => {
+  let scrollLeftRafId = null;
+  let scrollRightRafId = null;
+  return {
+    stop() {
+      if (scrollLeftRafId !== null) {
+        cancelRaf(scrollLeftRafId);
+      }
+      if (scrollRightRafId != null) {
+        cancelRaf(scrollRightRafId);
+      }
+    },
+    scroll(dynamicOptions) {
+      if (scrollLeftRafId !== null) {
+        cancelRaf(scrollLeftRafId);
+      }
+      if (scrollRightRafId != null) {
+        cancelRaf(scrollRightRafId);
+      }
+      const opts = __spreadValues(__spreadValues({
+        offset: 100,
+        scrollAmountsPerRaf: [1, 1, 2, 4, 6, 8, 11, 15]
+      }, staticOptions), dynamicOptions);
+      const self = this;
+      function scrollLeft2() {
+        const marginDistance = opts.scrollOffsetStart + opts.offset - opts.mousePosition.clientX;
+        const shouldScrollLeft = marginDistance > 0 && marginDistance <= opts.offset;
+        if (!shouldScrollLeft) {
+          return false;
+        }
+        const segmentCount = opts.scrollAmountsPerRaf.length;
+        const segmentDistance = Math.round(opts.offset / segmentCount);
+        let speed = 0;
+        for (let i = 0; i < segmentCount; i++) {
+          if (marginDistance > (i + 1) * segmentDistance) {
+            speed = opts.scrollAmountsPerRaf[i];
+          }
+        }
+        dynamicOptions.scrollLeft = dynamicOptions.scrollLeft - speed;
+        scrollLeftRafId = raf(() => {
+          self.scroll(dynamicOptions);
+        });
+        return true;
+      }
+      function scrollRight() {
+        const marginDistance = opts.mousePosition.clientX - (opts.scrollOffsetEnd - opts.offset);
+        const shouldScrollRight = marginDistance > 0 && marginDistance <= opts.offset;
+        if (!shouldScrollRight) {
+          return false;
+        }
+        const segmentCount = opts.scrollAmountsPerRaf.length;
+        const segmentDistance = Math.round(opts.offset / segmentCount);
+        let speed = 0;
+        for (let i = 0; i < segmentCount; i++) {
+          if (marginDistance > (i + 1) * segmentDistance) {
+            speed = opts.scrollAmountsPerRaf[i];
+          }
+        }
+        dynamicOptions.scrollLeft = dynamicOptions.scrollLeft + speed;
+        scrollRightRafId = raf(() => {
+          self.scroll(dynamicOptions);
+        });
+        return true;
+      }
+      if (scrollLeft2()) {
+        return true;
+      }
+      if (scrollRight()) {
+        return true;
+      }
+      return false;
+    }
+  };
+};
+
 // src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
 var columnOffsetAtIndex4 = stripVar(InternalVars.columnOffsetAtIndex);
 var columnWidthAtIndex3 = stripVar(InternalVars.columnWidthAtIndex);
+var baseZIndexForCells2 = stripVar(InternalVars.baseZIndexForCells);
 var PROXY_OFFSET = 10;
 var getBreakPoints = (columns) => {
-  return Array.from(columns.values()).map((c) => {
+  return columns.map((c) => {
     return {
       columnId: c.id,
-      breakpoint: c.computedAbsoluteOffset + Math.round(c.computedWidth / 2)
+      index: c.computedVisibleIndex,
+      breakpoint: c.computedOffset + Math.round(c.computedWidth / 2)
     };
   }).filter(Boolean);
 };
 var useColumnPointerEvents = ({
   columnId,
-  domRef,
-  columns,
-  computedRemainingSpace,
-  pinnedStartColsCount,
-  visibleColsCount
+  domRef
 }) => {
+  var _a;
   const [proxyPosition, setProxyPosition] = useState5(null);
-  const dragging = proxyPosition != null;
   const {
     componentActions,
     computed,
-    componentState: { domRef: rootRef, brain }
+    getComputed,
+    imperativeApi,
+    componentState: { domRef: rootRef, brain, headerBrain }
   } = useInfiniteTable();
-  const { computedColumnOrder } = computed;
-  const column = useMemo4(() => columns.get(columnId), [columnId, columns]);
-  const { dragColumnIndex, columnsArray } = useMemo4(() => {
-    const columnsArray2 = Array.from(columns.values());
-    const columnIndex = columnsArray2.findIndex((c) => c.id === columnId);
-    return {
-      columnsArray: columnsArray2,
-      dragColumnIndex: columnIndex,
-      columnWidth: column.computedWidth,
-      columnOffsetVar: `var(${columnOffsetAtIndex4}-${column.computedVisibleIndex})`
-    };
-  }, [columns, columnId, column]);
   const onPointerDown = useCallback6((e) => {
-    var _a;
-    let breakpoints = [];
+    var _a2;
+    const {
+      computedVisibleColumns,
+      computedVisibleColumnsMap,
+      computedPinnedStartColumns
+    } = getComputed();
+    const dragColumn = computedVisibleColumnsMap.get(columnId);
+    const initialBreakpoints = getBreakPoints(computedVisibleColumns);
     const target = domRef.current;
+    const targetRect = target.getBoundingClientRect();
+    const tableRect = rootRef.current.getBoundingClientRect();
+    const initialAvailableSize = brain.getAvailableSize();
+    const dragColumnIndex = dragColumn.computedVisibleIndex;
+    let currentColumnIndexes = computedVisibleColumns.map((c) => c.computedVisibleIndex);
+    const initialColumnIndexes = currentColumnIndexes;
+    const pinnedStartCurrentWidth = brain.getFixedStartColsWidth() - (dragColumn.computedPinned === "start" ? dragColumn.computedWidth : 0);
+    const pinnedStartColsRight = tableRect.left + pinnedStartCurrentWidth;
+    const pinnedEndCurrentWidth = brain.getFixedEndColsWidth() - (dragColumn.computedPinned === "end" ? dragColumn.computedWidth : 0);
+    const pinnedEndColsLeft = tableRect.right - pinnedEndCurrentWidth;
+    const speedScroller = progressiveSpeedScroller({
+      scrollOffsetStart: pinnedStartColsRight,
+      scrollOffsetEnd: pinnedEndColsLeft
+    });
+    const isColumnVisible2 = (columnIndex, { scrollLeft: scrollLeft2 }) => {
+      if (columnIndex === dragColumnIndex) {
+        return true;
+      }
+      const col = computedVisibleColumns[columnIndex];
+      if (col.computedPinned) {
+        return true;
+      }
+      return col.computedOffset >= scrollLeft2 + pinnedStartCurrentWidth && col.computedOffset + col.computedWidth < scrollLeft2 + tableRect.width - pinnedEndCurrentWidth;
+    };
     const initialClientPos = {
       clientX: Math.round(e.clientX),
       clientY: Math.round(e.clientY)
     };
+    let currentScrollPosition = {
+      scrollLeft: 0,
+      scrollTop: 0
+    };
     const initialScrollPosition2 = brain.getScrollPosition();
+    const updateScrollPosition = (scrollPosition) => {
+      currentScrollPosition = scrollPosition;
+    };
+    updateScrollPosition(initialScrollPosition2);
+    const removeOnScroll = brain.onScroll((scrollPosition) => {
+      currentScrollPosition = scrollPosition;
+    });
     const initialProxyPosition = {
-      left: PROXY_OFFSET - initialScrollPosition2.scrollLeft,
-      top: PROXY_OFFSET
+      left: initialClientPos.clientX - tableRect.left - (initialClientPos.clientX - targetRect.left) + PROXY_OFFSET,
+      top: initialClientPos.clientY - tableRect.top - (initialClientPos.clientY - targetRect.top) + PROXY_OFFSET
     };
     let currentClientPos = initialClientPos;
     let currentDiff = {
       x: 0,
       y: 0
     };
-    function updateColumnOffsets(pos) {
+    function updateProxyPosition(pos) {
       const clientX = Math.round(pos.clientX);
       const clientY = Math.round(pos.clientY);
       if (clientX === currentClientPos.clientX && clientY === currentClientPos.clientY) {
@@ -4469,96 +4683,134 @@ var useColumnPointerEvents = ({
         top: initialProxyPosition.top + currentDiff.y
       });
     }
-    updateColumnOffsets(initialClientPos);
-    let initialCursor = (_a = target.style.cursor) != null ? _a : "auto";
+    updateProxyPosition(initialClientPos);
+    let initialCursor = (_a2 = target.style.cursor) != null ? _a2 : "auto";
     let didDragAtLeastOnce = false;
     let currentDropIndex = dragColumnIndex;
     const onPointerMove = (e2) => {
-      var _a2;
+      var _a3;
       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);
+        brain.setRenderCount({
+          horizontal: computedVisibleColumns.length,
+          vertical: void 0
+        });
+        headerBrain.setRenderCount({
+          horizontal: computedVisibleColumns.length,
+          vertical: void 0
+        });
+        componentActions.columnReorderDragColumnId = dragColumn.id;
+        setInfiniteColumnZIndex(dragColumnIndex, `calc( var(${baseZIndexForCells2}) + 10000 )`, rootRef.current);
+        (_a3 = rootRef.current) == null ? void 0 : _a3.classList.add(InfiniteClsShiftingColumns);
         target.style.cursor = "grabbing";
       }
-      updateColumnOffsets(e2);
-      const diffX = currentDiff.x;
+      updateProxyPosition(e2);
+      const scrollLeft2 = currentScrollPosition.scrollLeft;
+      const scrollLeftDiff = scrollLeft2 - initialScrollPosition2.scrollLeft;
+      let diffX = currentDiff.x + scrollLeftDiff;
       const dir = diffX < 0 ? -1 : 1;
-      let currentPos = dir === -1 ? column.computedAbsoluteOffset + diffX : column.computedAbsoluteOffset + column.computedWidth + diffX;
+      let currentPos = dir === -1 ? dragColumn.computedOffset + diffX : dragColumn.computedOffset + dragColumn.computedWidth + diffX;
+      speedScroller.scroll({
+        mousePosition: currentClientPos,
+        get scrollLeft() {
+          return brain.getScrollPosition().scrollLeft;
+        },
+        set scrollLeft(value) {
+          imperativeApi.scrollLeft = value;
+        }
+      });
+      const breakpoints = initialBreakpoints.filter((b) => isColumnVisible2(b.index, {
+        scrollLeft: currentScrollPosition.scrollLeft
+      })).map((b) => {
+        return __spreadProps(__spreadValues({}, b), { breakpoint: b.breakpoint - scrollLeft2 });
+      });
       let idx = (0, import_binary_search2.default)(breakpoints, currentPos, ({ breakpoint }, value) => {
         return breakpoint < value ? -1 : breakpoint > value ? 1 : 0;
       });
       if (idx < 0) {
         idx = ~idx;
+        console.log("found breakpoint", breakpoints[idx], "at index", idx, "for currentPos", currentPos, JSON.parse(JSON.stringify(breakpoints)));
       }
-      if (idx !== currentDropIndex) {
+      idx = breakpoints[idx] ? breakpoints[idx].index : breakpoints[breakpoints.length - 1].index + 1;
+      if (idx != null && idx !== currentDropIndex) {
         currentDropIndex = idx;
         if (dir === 1 && currentDropIndex === dragColumnIndex + 1) {
           currentDropIndex = dragColumnIndex;
         }
-        columnsArray.forEach((col) => {
+        const newColumnIndexes = moveXatY(initialColumnIndexes, dragColumnIndex, currentDropIndex > dragColumnIndex ? currentDropIndex - 1 : currentDropIndex);
+        const indexesWithTransition = new Set();
+        newColumnIndexes.forEach((newIndex, i) => {
+          const currentIndex = currentColumnIndexes[i];
+          if (newIndex !== currentIndex) {
+            indexesWithTransition.add(newIndex);
+          }
+        });
+        console.log(JSON.stringify(currentColumnIndexes));
+        console.log(JSON.stringify(newColumnIndexes));
+        console.log("switched", indexesWithTransition);
+        console.log("----");
+        currentColumnIndexes = newColumnIndexes;
+        computedVisibleColumns.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;
+          if (indexesWithTransition.has(colIndex)) {
+            restoreInfiniteColumnReorderDuration(colIndex, rootRef.current);
+          } else {
+            clearInfiniteColumnReorderDuration(colIndex, rootRef.current);
           }
-          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;
+          const isDragColumn = colIndex === dragColumnIndex;
+          let isOutsideCol = dir === -1 ? colIndex < currentDropIndex || colIndex > dragColumnIndex : colIndex < dragColumnIndex || colIndex >= currentDropIndex;
+          let newPosition = "";
+          if (dir === -1) {
+            newPosition = isDragColumn ? `var(${columnOffsetAtIndex4}-${currentDropIndex})` : isOutsideCol ? `var(${columnOffsetAtIndex4}-${colIndex})` : `calc( var(${columnOffsetAtIndex4}-${colIndex}) + var(${columnWidthAtIndex3}-${dragColumnIndex}) )`;
+          } else {
+            newPosition = isOutsideCol ? `var(${columnOffsetAtIndex4}-${colIndex})` : isDragColumn ? `calc( var(${columnOffsetAtIndex4}-${currentDropIndex - 1}) + var(${columnWidthAtIndex3}-${currentDropIndex - 1}) - var(${columnWidthAtIndex3}-${dragColumnIndex}) )` : `calc( var(${columnOffsetAtIndex4}-${colIndex}) - var(${columnWidthAtIndex3}-${dragColumnIndex}) )`;
           }
+          setInfiniteColumnOffsetWhileReordering(colIndex, newPosition, rootRef.current);
         });
       }
     };
+    function persistColumnOrder() {
+      if (currentDropIndex != null && currentDropIndex !== dragColumnIndex) {
+        const newOrder = moveXatY(getComputed().computedColumnOrder, dragColumnIndex, currentDropIndex > dragColumnIndex ? currentDropIndex - 1 : currentDropIndex);
+        computedVisibleColumns.forEach((col) => {
+          setInfiniteColumnOffsetWhileReordering(col.computedVisibleIndex, "", rootRef.current);
+        });
+        componentActions.columnOrder = newOrder;
+      }
+    }
     const onPointerUp = (e2) => {
-      var _a2;
+      var _a3;
       const target2 = domRef.current;
-      (_a2 = rootRef.current) == null ? void 0 : _a2.classList.remove(InfiniteClsShiftingColumns);
-      columnsArray.forEach((col) => {
+      (_a3 = rootRef.current) == null ? void 0 : _a3.classList.remove(InfiniteClsShiftingColumns);
+      removeOnScroll();
+      speedScroller.stop();
+      brain.setAvailableSize(__spreadValues({}, initialAvailableSize));
+      computedVisibleColumns.forEach((col) => {
+        clearInfiniteColumnReorderDuration(col.computedVisibleIndex, rootRef.current);
         setInfiniteColumnOffsetWhileReordering(col.computedVisibleIndex, "", rootRef.current);
       });
-      setInfiniteColumnZIndex(dragColumnIndex, getColumnZIndex(column, {
-        pinnedStartColsCount,
-        visibleColsCount
+      setInfiniteColumnZIndex(dragColumnIndex, getColumnZIndex(dragColumn, {
+        pinnedStartColsCount: computedPinnedStartColumns.length,
+        visibleColsCount: computedVisibleColumns.length
       }), rootRef.current);
       target2.style.cursor = initialCursor;
       target2.releasePointerCapture(e2.pointerId);
       target2.removeEventListener("pointermove", onPointerMove);
       target2.removeEventListener("pointerup", onPointerUp);
       setProxyPosition(null);
-      if (!didDragAtLeastOnce && column.computedSortable) {
-        column.toggleSort();
-      }
-      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;
+      if (!didDragAtLeastOnce && dragColumn.computedSortable) {
+        dragColumn.toggleSort();
       }
-      componentActions.columnReorderInProgress = false;
-      breakpoints = [];
+      persistColumnOrder();
+      componentActions.columnReorderDragColumnId = false;
     };
     target.addEventListener("pointermove", onPointerMove);
     target.addEventListener("pointerup", onPointerUp);
     target.setPointerCapture(e.pointerId);
-  }, [
-    columns,
-    column,
-    dragColumnIndex,
-    visibleColsCount,
-    pinnedStartColsCount,
-    columnsArray,
-    computedRemainingSpace,
-    computedColumnOrder
-  ]);
+  }, [columnId]);
   return {
-    onPointerDown: column.computedDraggable ? onPointerDown : () => {
+    onPointerDown: ((_a = computed.computedVisibleColumnsMap.get(columnId)) == null ? void 0 : _a.computedDraggable) ? onPointerDown : () => {
     },
-    dragging,
     proxyPosition
   };
 };
@@ -4613,19 +4865,19 @@ import { useEffect as useEffect9, useState as useState6 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
 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 CellCls = "_1eexc2a5 _16lm1iwt _16lm1iw1d _16lm1iw1e _16lm1iw2 _16lm1iw1o _16lm1iw1p";
+var HeaderCellContentRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob11b _16lm1iwz _16lm1iw11 _16lm1iwt _16lm1iw1d _16lm1iw1e", variantClassNames: { filtered: { false: "_12zfob11c", true: "_12zfob11d" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderCellProxy = "_12zfob1k _16lm1iw1p _16lm1iw1q _16lm1iw1j";
+var HeaderCellRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob1l _16lm1iwv", variantClassNames: { rowActive: { false: "_12zfob1m", true: "_12zfob1n" }, zebra: { false: "_12zfob1o", even: "_12zfob1p", odd: "_12zfob1q" }, dragging: { true: "_12zfob1r", false: "_12zfob1s" }, first: { true: "_12zfob1t", false: "_12zfob1u" }, last: { true: "_12zfob1v", false: "_12zfob1w" }, groupByField: { true: "_12zfob1x", false: "_12zfob1y" }, firstInCategory: { true: "_12zfob1z", false: "_12zfob110" }, lastInCategory: { true: "_12zfob111", false: "_12zfob112" }, pinned: { start: "_12zfob113", end: "_12zfob114", false: "_12zfob115" }, filtered: { true: "_12zfob116", false: "_12zfob117" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob118"], [{ pinned: "end", firstInCategory: true }, "_12zfob119"], [{ pinned: false, lastInCategory: true }, "_12zfob11a"]] });
+var HeaderClsRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob16 _16lm1iwv _16lm1iw2", variantClassNames: { pinned: { start: "_12zfob17", end: "_12zfob18", false: "_12zfob19" }, firstInCategory: { true: "_12zfob1a", false: "_12zfob1b" }, lastInCategory: { true: "_12zfob1c", false: "_12zfob1d" }, overflow: { true: "_12zfob1e", false: "_12zfob1f" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1g"], [{ pinned: "start", firstInCategory: true }, "_12zfob1h"], [{ overflow: true, pinned: "end" }, "_12zfob1i"], [{ pinned: "end", lastInCategory: true }, "_12zfob1j"]] });
+var HeaderFilterCls = "_12zfob11g _16lm1iwt _16lm1iw1d _16lm1iw1e _16lm1iw1";
+var HeaderFilterEditorCls = "_16lm1iw11 _16lm1iwz";
+var HeaderGroupCls = "_12zfob11f _16lm1iwt _16lm1iw1d _16lm1iw1e";
 var HeaderScrollbarPlaceholderCls = "_12zfob15 _16lm1iw2";
 var HeaderSortIconCls = "_16lm1iw1";
 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";
+var HeaderWrapperCls = "_12zfob11e _16lm1iw1j _16lm1iw1 _16lm1iwt _16lm1iw1d";
 
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
 var defaultLineStyle = {
@@ -4707,14 +4959,15 @@ import {
 
 // src/components/InfiniteTable/components/cell.css.ts
 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"]] });
+var ColumnCellCls = "_1eexc2a6 _1eexc2a5 _16lm1iwt _16lm1iw1d _16lm1iw1e _16lm1iw2 _16lm1iw1o _16lm1iw1p";
+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: "start", firstInCategory: true }, "_1eexc2av"], [{ pinned: "end", firstInCategory: true }, "_1eexc2aw"], [{ pinned: "end", lastInCategory: true }, "_1eexc2ax"]] });
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
 var { rootClassName: rootClassName5 } = internalProps;
 var InfiniteTableCellClassName = `${rootClassName5}Cell`;
 var InfiniteTableCellContentClassName = `${rootClassName5}Cell_content`;
 var columnWidthAtIndex4 = stripVar(InternalVars.columnWidthAtIndex);
+var columnReorderEffectDurationAtIndex2 = stripVar(InternalVars.columnReorderEffectDurationAtIndex);
 function InfiniteTableCellFn(props) {
   var _b, _c, _d;
   const _a = props, {
@@ -4748,7 +5001,8 @@ function InfiniteTableCellFn(props) {
   ]);
   const children = renderChildren();
   const style = __spreadValues({
-    width: `var(${columnWidthAtIndex4}-${column.computedVisibleIndex})`
+    width: `var(${columnWidthAtIndex4}-${column.computedVisibleIndex})`,
+    transition: `transform var(${columnReorderEffectDurationAtIndex2}-${column.computedVisibleIndex}, 0s)`
   }, domProps.style);
   const finalDOMProps = __spreadProps(__spreadValues({}, domProps), {
     style,
@@ -5190,11 +5444,36 @@ function getColumnResizer(colIndex, {
           return;
         }
         setInfiniteColumnWidth(nextColIndex, nextColumn.computedWidth - diff, domRef.current);
-        setInfiniteColumnOffset(nextColIndex, nextColumn.computedOffset + diff, domRef.current);
+        if (nextColumn.computedPinned === "start") {
+          addToInfiniteColumnOffset(nextColumn, diff, domRef.current);
+        } else {
+          setInfiniteColumnOffset(nextColIndex, nextColumn.computedOffset + diff, domRef.current);
+        }
+        return;
+      }
+      if (column.computedPinned === "end") {
+        return;
+      }
+      if (column.computedPinned === "start") {
+        for (let i = nextColIndex, len = columns.length; i < len; i++) {
+          const col = columns[i];
+          if (col.computedPinned === "start") {
+            addToInfiniteColumnOffset(col, diff, domRef.current);
+            continue;
+          }
+          if (col.computedPinned === "end") {
+            continue;
+          }
+          setInfiniteColumnOffset(i, col.computedOffset + diff, domRef.current);
+        }
         return;
       }
       for (let i = nextColIndex, len = columns.length; i < len; i++) {
-        setInfiniteColumnOffset(i, columns[i].computedOffset + diff, domRef.current);
+        const col = columns[i];
+        if (col.computedPinned) {
+          continue;
+        }
+        setInfiniteColumnOffset(i, col.computedOffset + diff, domRef.current);
       }
     }
   };
@@ -5204,7 +5483,8 @@ function getColumnGroupResizer(colIndexes, config) {
   return {
     resize(diffs) {
       const { columns, domRef } = config;
-      let offset = columns[colIndexes[0]].computedOffset;
+      const firstCol = columns[colIndexes[0]];
+      let offset = firstCol.computedOffset;
       let diffSum = 0;
       const node = domRef.current;
       diffs.forEach((diff, i) => {
@@ -5213,13 +5493,23 @@ function getColumnGroupResizer(colIndexes, config) {
         const column = columns[colIndex];
         const newWidth = column.computedWidth + diff;
         setInfiniteColumnWidth(colIndex, newWidth, node);
+        if (column.computedPinned === "end") {
+          return;
+        }
         if (offset) {
           setInfiniteColumnOffset(colIndex, offset, node);
         }
         offset += newWidth;
       });
+      if (firstCol.computedPinned === "end") {
+        return;
+      }
       for (let i = lastColIndex + 1; i < columns.length; i++) {
-        setInfiniteColumnOffset(i, columns[i].computedOffset + diffSum, node);
+        const col = columns[i];
+        if (col.computedPinned === "end") {
+          continue;
+        }
+        setInfiniteColumnOffset(i, col.computedOffset + diffSum, node);
       }
     }
   };
@@ -5227,8 +5517,9 @@ function getColumnGroupResizer(colIndexes, config) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/ResizeHandle.css.ts
 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: [] });
+var ResizeHandleCls = "zneyzh0 _16lm1iw2 _16lm1iw12 _16lm1iw19 _16lm1iw17 _16lm1iwe _16lm1iw1j";
+var ResizeHandleDraggerClsRecipe = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "zneyzhb _16lm1iw2 _16lm1iw12 _16lm1iw17", variantClassNames: { constrained: { false: "zneyzhc", true: "zneyzhd" } }, defaultVariants: {}, compoundVariants: [] });
+var ResizeHandleRecipeCls = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "", variantClassNames: { computedPinned: { start: "zneyzh1", end: "zneyzh2 _16lm1iw14 _16lm1iw1b", false: "zneyzh3" }, computedFirstInCategory: { true: "zneyzh4", false: "zneyzh5" }, computedLastInCategory: { true: "zneyzh6", false: "zneyzh7" } }, defaultVariants: {}, compoundVariants: [[{ computedPinned: "end", computedLastInCategory: false, computedFirstInCategory: true }, "zneyzh8"], [{ computedPinned: false, computedFirstInCategory: false, computedLastInCategory: true }, "zneyzh9"], [{ computedPinned: "start", computedFirstInCategory: false, computedLastInCategory: true }, "zneyzha"]] });
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/index.tsx
 var { rootClassName: rootClassName7 } = internalProps;
@@ -5238,6 +5529,13 @@ function ResizeHandleFn(props) {
   const [constrained, setConstrained] = useState8(false);
   const constrainedRef = useRef11(constrained);
   constrainedRef.current = constrained;
+  const col = props.columns[props.columnIndex];
+  if (!col) {
+    return null;
+  }
+  const computedPinned = col.computedPinned;
+  const computedFirstInCategory = col.computedFirstInCategory;
+  const computedLastInCategory = col.computedLastInCategory;
   const onPointerDown = (e) => {
     e.stopPropagation();
     const shareSpaceOnResize = !!e.shiftKey;
@@ -5251,6 +5549,9 @@ function ResizeHandleFn(props) {
       domRef
     });
     const resizeDiff = (diff) => {
+      if (computedPinned === "end") {
+        diff *= -1;
+      }
       const { adjustedDiff, constrained: constrained2 } = props.computeResize({
         diff,
         shareSpaceOnResize
@@ -5275,11 +5576,19 @@ function ResizeHandleFn(props) {
     target.addEventListener("pointermove", onPointerMove);
     target.addEventListener("pointerup", onPointerUp);
   };
+  const style = (computedPinned === false || computedPinned === "start") && computedLastInCategory ? {
+    right: computedPinned === "start" ? 0 : 0
+  } : computedPinned === "end" && computedFirstInCategory ? { right: "none", left: 0 } : void 0;
   return /* @__PURE__ */ React20.createElement("div", {
     ref: domRef,
-    className: `${InfiniteTableHeaderCellResizeHandleCls} ${ResizeHandleCls}`,
+    className: `${InfiniteTableHeaderCellResizeHandleCls} ${ResizeHandleCls} ${ResizeHandleRecipeCls({
+      computedPinned,
+      computedFirstInCategory,
+      computedLastInCategory
+    })}`,
     onPointerDown
   }, /* @__PURE__ */ React20.createElement("div", {
+    style,
     className: ResizeHandleDraggerClsRecipe({
       constrained
     })
@@ -5357,11 +5666,19 @@ 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;
-  const columns = props.columns;
+  const {
+    computed: { showColumnFilters },
+    componentState: {
+      portalDOMRef,
+      columnHeaderHeight,
+      filterEditors,
+      columnReorderDragColumnId
+    }
+  } = useInfiniteTable();
+  const dragging = columnReorderDragColumnId === column.id;
   const { onResize, height, width, headerOptions } = props;
   const sortInfo = column.computedSortInfo;
   let header = column.header;
@@ -5379,6 +5696,7 @@ function InfiniteTableHeaderCell(props) {
     direction: column.computedSorted ? column.computedSortedAsc ? 1 : -1 : 0
   }) : null;
   const renderParam = {
+    dragging,
     domRef: ref,
     column,
     columnSortInfo: sortInfo,
@@ -5397,15 +5715,6 @@ function InfiniteTableHeaderCell(props) {
     return /* @__PURE__ */ createElement16(Fragment2, null, align === "end" ? sortTool : null, header, align !== "end" ? sortTool : null);
   };
   const domRef = useRef12(null);
-  const {
-    computed: {
-      computedRemainingSpace,
-      showColumnFilters,
-      computedVisibleColumns,
-      computedPinnedStartColumns
-    },
-    componentState: { portalDOMRef, columnHeaderHeight, filterEditors }
-  } = useInfiniteTable();
   const {
     componentActions: dataSourceActions,
     getState: getDataSourceState,
@@ -5421,26 +5730,27 @@ function InfiniteTableHeaderCell(props) {
       clearOnResize == null ? void 0 : clearOnResize();
     };
   }, [domRef.current, props.onResize]);
-  const style = {
+  let style = {
     height
   };
-  const { onPointerDown, dragging, proxyPosition } = useColumnPointerEvents({
-    pinnedStartColsCount: computedPinnedStartColumns.length,
-    visibleColsCount: computedVisibleColumns.length,
-    computedRemainingSpace,
+  if (column.headerStyle) {
+    style = typeof column.headerStyle === "function" ? __spreadValues(__spreadValues({}, style), column.headerStyle(renderParam) || {}) : __spreadValues(__spreadValues({}, style), column.headerStyle);
+  }
+  const headerClassName = typeof column.headerClassName === "function" ? column.headerClassName(renderParam) : column.headerClassName;
+  const { onPointerDown, proxyPosition } = useColumnPointerEvents({
     columnId: column.id,
-    domRef,
-    columns
+    domRef
   });
   let draggingProxy = null;
-  if (dragging) {
+  if (dragging && proxyPosition) {
     draggingProxy = /* @__PURE__ */ createElement16("div", {
+      key: column.id,
       className: `${InfiniteTableHeaderCellClassName}Proxy ${HeaderCellProxy}`,
       style: {
         position: "absolute",
         height,
         width,
-        left: `calc( var(${columnOffsetAtIndex5}-${column.computedVisibleIndex}) + ${(_a = proxyPosition.left) != null ? _a : 0}px)`,
+        left: (_a = proxyPosition.left) != null ? _a : 0,
         top: (_b = proxyPosition.top) != null ? _b : 0,
         zIndex: 1e9
       }
@@ -5475,7 +5785,7 @@ function InfiniteTableHeaderCell(props) {
     });
     dataSourceActions.filterValue = newFilterValue;
   }, [column, filterTypes]);
-  const debouncedOnFilterValueChange = useMemo5(() => {
+  const debouncedOnFilterValueChange = useMemo4(() => {
     const fn = (filterValue) => {
       let newFilterValueForColumn;
       if (column.computedFilterValue) {
@@ -5529,7 +5839,11 @@ function InfiniteTableHeaderCell(props) {
     onPointerDown,
     contentClassName: join(HeaderCellContentRecipe(contentRecipeVariants), justifyContent[(_c = column.align) != null ? _c : "start"]),
     contentStyle: showColumnFilters ? { height: height / 2 } : void 0,
-    className: join(InfiniteTableHeaderCellClassName, userSelect.none, column.computedSortable ? cursor.pointer : "", useCellClassName(column, [InfiniteTableHeaderCellClassName, InfiniteTableCellClassName], HeaderCellRecipe, { dragging, zebra: false, rowActive: false }), CellCls),
+    className: join(InfiniteTableHeaderCellClassName, userSelect.none, column.computedSortable ? cursor.pointer : "", headerClassName, useCellClassName(column, [InfiniteTableHeaderCellClassName, InfiniteTableCellClassName], HeaderCellRecipe, {
+      dragging,
+      zebra: false,
+      rowActive: false
+    }), CellCls),
     cssEllipsis: (_e = (_d = column.headerCssEllipsis) != null ? _d : column.cssEllipsis) != null ? _e : true,
     afterChildren: /* @__PURE__ */ createElement16(Fragment2, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ createElement16(InfiniteTableColumnHeaderFilter, {
       filterEditor: FilterEditor,
@@ -5552,50 +5866,30 @@ function useInfiniteHeaderCell() {
 import {
   createElement as createElement20,
   useCallback as useCallback11,
-  useMemo as useMemo6
+  useMemo as useMemo5
 } from "react";
 
-// src/components/utils/getScrollbarWidth.ts
-var scrollbarWidth;
-function getScrollbarWidth() {
-  var _a, _b;
-  if (scrollbarWidth != null) {
-    return scrollbarWidth;
-  }
-  const doc = (_a = getGlobal().document) != null ? _a : null;
-  if (!doc) {
-    return 0;
-  }
-  const outer = doc.createElement("div");
-  outer.style.visibility = "hidden";
-  outer.style.overflow = "scroll";
-  doc.body.appendChild(outer);
-  const inner = doc.createElement("div");
-  outer.appendChild(inner);
-  scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
-  (_b = outer.parentNode) == null ? void 0 : _b.removeChild(outer);
-  return scrollbarWidth;
-}
-
 // src/components/InfiniteTable/components/InfiniteTableHeader/buildColumnAndGroupTree.ts
 function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap, columnGroupsMaxDepth) {
   const map2 = new Map();
   const temporaryMap = new Map();
   const mapOfAllParentGroupsForColumns = new Map();
   columns.forEach((col, index) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     const colId = col.id;
-    const previousColumnId = (_b = (_a = columns[index - 1]) == null ? void 0 : _a.id) != null ? _b : "";
+    const previousColumn = columns[index - 1];
+    const previousColumnId = (_a = previousColumn == null ? void 0 : previousColumn.id) != null ? _a : "";
     const parentGroups = new Set();
-    const parentGroupsOfPreviousColumn = (_c = mapOfAllParentGroupsForColumns.get(previousColumnId)) != null ? _c : new Set();
+    const parentGroupsOfPreviousColumn = (previousColumn == null ? void 0 : previousColumn.computedPinned) !== col.computedPinned ? new Set() : (_b = mapOfAllParentGroupsForColumns.get(previousColumnId)) != null ? _b : new Set();
     mapOfAllParentGroupsForColumns.set(colId, parentGroups);
     const colItem = {
       type: "column",
       id: colId,
       ref: col,
       groupOffset: 0,
+      computedPinned: col.computedPinned,
       computedWidth: col.computedWidth,
-      depth: col.columnGroup ? ((_d = columnGroupsDepthsMap.get(col.columnGroup)) != null ? _d : 0) + 1 : 0
+      depth: col.columnGroup ? ((_c = columnGroupsDepthsMap.get(col.columnGroup)) != null ? _c : 0) + 1 : 0
     };
     map2.set([colId], colItem);
     let groupId = col.columnGroup;
@@ -5617,7 +5911,8 @@ function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap, c
             groupOffset: 0,
             uniqueGroupId: [groupId],
             computedWidth: 0,
-            depth: (_e = columnGroupsDepthsMap.get(groupId)) != null ? _e : 0
+            computedPinned: colItem.computedPinned,
+            depth: (_d = columnGroupsDepthsMap.get(groupId)) != null ? _d : 0
           };
           map2.set(groupAbsoluteId, colGroupItem);
           temporaryMap.set(groupId, colGroupItem);
@@ -5701,6 +5996,13 @@ function GroupResizeHandleFn(props) {
   const [constrained, setConstrained] = useState9(false);
   const constrainedRef = useRef13(constrained);
   constrainedRef.current = constrained;
+  const col = props.groupColumns[0];
+  if (!col) {
+    return null;
+  }
+  const computedPinned = col.computedPinned;
+  const computedFirstInCategory = col.computedFirstInCategory;
+  const computedLastInCategory = col.computedLastInCategory;
   const onPointerDown = (e) => {
     e.stopPropagation();
     const pointerId = e.pointerId;
@@ -5713,6 +6015,9 @@ function GroupResizeHandleFn(props) {
       domRef
     });
     const resizeDiff = (diff) => {
+      if (computedPinned === "end") {
+        diff *= -1;
+      }
       const { constrained: constrained2, adjustedDiffs, adjustedDiff } = props.computeResize(diff);
       if (constrainedRef.current !== constrained2) {
         setConstrained(constrained2);
@@ -5722,8 +6027,8 @@ function GroupResizeHandleFn(props) {
     };
     const onPointerMove = (e2) => {
       if (initialMove) {
-        const maxDiff = props.groupColumns.reduce((diff, col) => {
-          return diff + col.computedWidth - col.computedMinWidth;
+        const maxDiff = props.groupColumns.reduce((diff, col2) => {
+          return diff + col2.computedWidth - col2.computedMinWidth;
         }, 0);
         const currentSize = props.brain.getAvailableSize();
         const newSize = {
@@ -5746,12 +6051,19 @@ function GroupResizeHandleFn(props) {
     target.addEventListener("pointermove", onPointerMove);
     target.addEventListener("pointerup", onPointerUp);
   };
+  const style = (computedPinned === false || computedPinned === "start") && computedLastInCategory ? {
+    right: computedPinned === "start" ? 0 : ThemeVars.components.HeaderCell.resizeHandleWidth
+  } : computedPinned === "end" && computedFirstInCategory ? { right: "none", left: 0 } : void 0;
   return /* @__PURE__ */ React23.createElement("div", {
     ref: domRef,
-    className: `${InfiniteTableHeaderCellResizeHandleCls2} ${ResizeHandleCls}`,
+    className: `${InfiniteTableHeaderCellResizeHandleCls2} ${ResizeHandleCls} ${ResizeHandleRecipeCls({
+      computedPinned,
+      computedFirstInCategory,
+      computedLastInCategory
+    })}`,
     onPointerDown
   }, /* @__PURE__ */ React23.createElement("div", {
-    style: props.style,
+    style: __spreadValues(__spreadValues({}, style), props.style),
     className: ResizeHandleDraggerClsRecipe({
       constrained
     })
@@ -5801,12 +6113,12 @@ function useColumnGroupResizeHandle(groupColumns, config) {
       })
     });
     return result;
-  }, []);
+  }, [lastColumnInGroup]);
   const onColumnResize = useCallback9((diff) => {
     const { columnSizing, reservedWidth } = computeResizeForDiff(diff);
     componentActions.viewportReservedWidth = reservedWidth;
     componentActions.columnSizing = columnSizing;
-  }, []);
+  }, [computeResizeForDiff]);
   const groupResizable = groupColumns.some((c) => c.computedResizable);
   const resizeHandle = groupResizable ? /* @__PURE__ */ createElement17(GroupResizeHandle, {
     brain: bodyBrain,
@@ -5883,8 +6195,7 @@ function InfiniteTableHeaderFn(props) {
   }, [brain]);
   const domRef = useRef14(null);
   const headerCls = HeaderClsRecipe({
-    overflow: false,
-    virtualized: true
+    overflow: false
   });
   const domProps = {
     ref: domRef,
@@ -5972,7 +6283,7 @@ function TableHeaderWrapper(props) {
   } = tableContextValue;
   const rows = !computedColumnGroups || !computedColumnGroups.size ? 1 : columnGroupsMaxDepth + 2;
   const height = rows * columnHeaderHeight + (showColumnFilters ? columnHeaderHeight : 0);
-  const columnAndGroupTreeInfo = useMemo6(() => {
+  const columnAndGroupTreeInfo = useMemo5(() => {
     if (!computedColumnGroups || !computedColumnGroups.size) {
       return void 0;
     }
@@ -6109,7 +6420,7 @@ var InfiniteTableLicenseFooter = forwardRef4(function InfiniteTableLicenseFooter
   }, []);
   useEffect13(() => {
     const forceStyle = () => {
-      requestAnimationFrame(() => {
+      raf(() => {
         var _a;
         enforceStyle(domRef.current, defaultStyle);
         enforceStyle((_a = domRef.current) == null ? void 0 : _a.firstElementChild, anchorStyle);
@@ -6140,7 +6451,7 @@ import {
   createElement as createElement22,
   memo as memo9
 } from "react";
-import { useCallback as useCallback13, useContext as useContext5, useMemo as useMemo7 } from "react";
+import { useCallback as useCallback13, useContext as useContext5, useMemo as useMemo6 } from "react";
 var { rootClassName: rootClassName11 } = internalProps;
 var columnZIndexAtIndex6 = stripVar(InternalVars.columnZIndexAtIndex);
 var InfiniteTableColumnCellContext = createContext5(null);
@@ -6273,7 +6584,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(${columnZIndexAtIndex6}-${column.computedVisibleIndex})`;
-  const memoizedStyle = useMemo7(() => style, [!style ? null : JSON.stringify(style)]);
+  const memoizedStyle = useMemo6(() => style, [!style ? null : JSON.stringify(style)]);
   const odd = (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
   const zebra = showZebraRows ? odd ? "odd" : "even" : false;
   const cellProps = {
@@ -6313,8 +6624,8 @@ import {
 } from "react";
 
 // src/components/InfiniteTable/components/LoadMask.css.ts
-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 LoadMaskCls = { visible: "qy58ya1 qy58ya0 _16lm1iw2 _16lm1iw12 _16lm1iw14 _16lm1iw19 _16lm1iw17", hidden: "qy58ya2 qy58ya0 _16lm1iw2 _16lm1iw12 _16lm1iw14 _16lm1iw19 _16lm1iw17" };
+var LoadMaskOverlayCls = "qy58ya3 _16lm1iw2 _16lm1iw12 _16lm1iw14 _16lm1iw19 _16lm1iw17";
 var LoadMaskTextCls = "qy58ya4";
 
 // src/components/InfiniteTable/components/LoadMask.tsx
@@ -6343,6 +6654,22 @@ function getImperativeApi(getState, getComputed, getDataSourceState, componentAc
     },
     getState,
     getDataSourceState,
+    get scrollLeft() {
+      const state = getState();
+      return state.brain.getScrollPosition().scrollLeft;
+    },
+    set scrollLeft(scrollLeft2) {
+      const state = getState();
+      state.scrollerDOMRef.current.scrollLeft = Math.max(scrollLeft2, 0);
+    },
+    get scrollTop() {
+      const state = getState();
+      return state.brain.getScrollPosition().scrollTop;
+    },
+    set scrollTop(scrollTop2) {
+      const state = getState();
+      state.scrollerDOMRef.current.scrollTop = Math.max(scrollTop2, 0);
+    },
     scrollRowIntoView(rowIndex, config = { offset: 0 }) {
       const state = getState();
       const scrollPosition = state.renderer.getScrollPositionForScrollRowIntoView(rowIndex, config);
@@ -6637,12 +6964,12 @@ function useCellRendering(param) {
   }, [brain]);
   useEffect15(() => {
     return brain.onScrollStop((scrollPosition) => {
-      const { scrollTop } = scrollPosition;
-      if (scrollTop === 0) {
+      const { scrollTop: scrollTop2 } = scrollPosition;
+      if (scrollTop2 === 0) {
         onScrollToTop == null ? void 0 : onScrollToTop();
       }
       const offset = scrollToBottomOffset != null ? scrollToBottomOffset : SCROLL_BOTTOM_OFFSET;
-      const isScrollBottom = scrollTop + offset >= scrollTopMaxRef.current;
+      const isScrollBottom = scrollTop2 + offset >= scrollTopMaxRef.current;
       if (isScrollBottom) {
         onScrollToBottom == null ? void 0 : onScrollToBottom();
         const { livePagination, livePaginationCursor, dataArray: dataArray2 } = getDataSourceState();
@@ -6845,10 +7172,10 @@ function useColumnGroups() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnRowspan.ts
-import { useMemo as useMemo8 } from "react";
+import { useMemo as useMemo7 } from "react";
 function useColumnRowspan(computedVisibleColumns) {
   const { getState: getDataSourceState } = useDataSourceContextValue();
-  const rowspan = useMemo8(() => {
+  const rowspan = useMemo7(() => {
     const colsWithRowspan = computedVisibleColumns.filter((col) => typeof col.rowspan === "function");
     return colsWithRowspan.length ? ({ rowIndex, colIndex }) => {
       const dataArray = getDataSourceState().dataArray;
@@ -6888,7 +7215,7 @@ function useColumnSizeFn(columns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-import { useEffect as useEffect22, useMemo as useMemo10 } from "react";
+import { useEffect as useEffect22, useMemo as useMemo9 } from "react";
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
 import {
@@ -7787,7 +8114,7 @@ var GroupRowsState = class {
 };
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-import { useEffect as useEffect21, useMemo as useMemo9, useRef as useRef20, useState as useState12 } from "react";
+import { useEffect as useEffect21, useMemo as useMemo8, useRef as useRef20, useState as useState12 } from "react";
 
 // src/components/hooks/useEffectWithChanges.ts
 import { useEffect as useEffect20, useRef as useRef19 } from "react";
@@ -7846,7 +8173,7 @@ function getChangeDetect() {
 // src/components/DataSource/privateHooks/useLoadData.ts
 var CACHE_DEFAULT = true;
 var getRafPromise = () => new Promise((resolve) => {
-  requestAnimationFrame(resolve);
+  raf(resolve);
 });
 var SKIP_DATA_CHANGES_KEYS = {
   originalDataArray: true,
@@ -8012,17 +8339,15 @@ function loadData(data, componentState, actions, overrides) {
               lazyGroupData.set(theKey, currentGroupRowInfo);
             }
           } else {
-            if (parentKeys) {
-              newGroupRowInfo.children.forEach((child) => {
-                if (child && child.dataset) {
-                  childDatasets.push({
-                    keys: child.keys,
-                    dataset: child.dataset
-                  });
-                }
-              });
-              newGroupRowInfo.children.length = newGroupRowInfo.totalCount;
-            }
+            newGroupRowInfo.children.forEach((child) => {
+              if (child && child.dataset) {
+                childDatasets.push({
+                  keys: child.keys,
+                  dataset: child.dataset
+                });
+              }
+            });
+            newGroupRowInfo.children.length = newGroupRowInfo.totalCount;
             lazyGroupData.set(theKey, newGroupRowInfo);
           }
           let skipTriggerChangeAsAlreadyOriginalArrayWasUpdated = false;
@@ -8174,6 +8499,7 @@ function useLazyLoadRange() {
   }, [componentState.data, componentState.dataParams]);
   const {
     lazyLoadBatchSize,
+    lazyLoad,
     notifyRenderRangeChange,
     dataArray,
     scrollStopDelayUpdatedByTable
@@ -8186,27 +8512,33 @@ function useLazyLoadRange() {
       return;
     }
     const { renderStartIndex: startIndex, renderEndIndex: endIndex } = renderRange;
-    if (!lazyLoadBatchSize || lazyLoadBatchSize <= 0) {
+    const { lazyLoadBatchSize: lazyLoadBatchSize2, lazyLoad: lazyLoad2 } = componentState2;
+    if (!lazyLoad2) {
       return;
     }
+    if (!lazyLoadBatchSize2 || lazyLoadBatchSize2 <= 0) {
+      if (!componentState2.groupBy || componentState2.groupBy.length === 0) {
+        return;
+      }
+    }
     lazyLoadRange({
       startIndex,
       endIndex,
-      lazyLoadBatchSize,
+      lazyLoadBatchSize: lazyLoadBatchSize2,
       componentState: componentState2,
       componentActions: actions
     }, cache);
   };
-  const debouncedLoadRange = useMemo9(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
+  const debouncedLoadRange = useMemo8(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
   useEffect21(() => {
-    if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
+    if (lazyLoad) {
       return notifyRenderRangeChange.onChange((renderRange) => {
         latestRenderRangeRef.current = renderRange;
         loadRange(renderRange);
       });
     }
     return;
-  }, [lazyLoadBatchSize]);
+  }, [lazyLoadBatchSize, lazyLoad]);
   useEffect21(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
@@ -8260,7 +8592,7 @@ function lazyLoadRange(options, cache) {
         }
       }
     }
-    if (!rowLoaded) {
+    if (!rowLoaded && lazyLoadBatchSize != void 0) {
       let cachedFnCalls = perGroupFnCalls.get(cacheKeys);
       const batchStartIndexInGroup = Math.floor(indexInGroup / lazyLoadBatchSize) * lazyLoadBatchSize;
       const offset = indexInGroup - batchStartIndexInGroup;
@@ -8523,7 +8855,7 @@ function getInterceptActions() {
       });
       actions.dataParams = dataParams;
       if (state.livePagination) {
-        requestAnimationFrame(() => {
+        raf(() => {
           actions.livePaginationCursor = null;
         });
       }
@@ -8535,7 +8867,7 @@ function getInterceptActions() {
       });
       actions.dataParams = dataParams;
       if (state.livePagination) {
-        requestAnimationFrame(() => {
+        raf(() => {
           actions.livePaginationCursor = null;
         });
       }
@@ -8547,7 +8879,7 @@ function getInterceptActions() {
       });
       actions.dataParams = dataParams;
       if (state.livePagination) {
-        requestAnimationFrame(() => {
+        raf(() => {
           actions.livePaginationCursor = null;
         });
       }
@@ -8559,7 +8891,7 @@ function getInterceptActions() {
       });
       actions.dataParams = dataParams;
       if (state.livePagination) {
-        requestAnimationFrame(() => {
+        raf(() => {
           actions.livePaginationCursor = null;
         });
       }
@@ -9080,7 +9412,7 @@ function useToggleGroupRow() {
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
 function useGroupByMap(groupBy) {
-  const groupByMap = useMemo10(() => {
+  const groupByMap = useMemo9(() => {
     return groupBy.reduce((acc, groupBy2, index) => {
       acc.set(groupBy2.field, {
         groupBy: groupBy2,
@@ -9464,15 +9796,15 @@ function getColumnsWhenGrouping(params) {
 }
 
 // src/components/InfiniteTable/hooks/useComputedVisibleColumns.ts
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo10 } from "react";
 
 // src/components/InfiniteTable/utils/adjustColumnOrderForPinning.ts
 var order = ["start", void 0, "end"];
 var adjustColumnOrderForPinning = (columnOrder, columnPinning) => {
-  if (columnPinning.size > 0) {
+  if (columnPinning && Object.keys(columnPinning).length > 0) {
     columnOrder.sort((colId1, colId2) => {
-      let p1 = columnPinning.get(colId1);
-      let p2 = columnPinning.get(colId2);
+      let p1 = columnPinning[colId1];
+      let p2 = columnPinning[colId2];
       if (p1 === true) {
         p1 = "start";
       }
@@ -9513,7 +9845,10 @@ var isColumnVisible = (columnVisibility, _columnVisibilityAssumeVisible, colId)
   return columnVisibility[colId] !== false;
 };
 var getComputedPinned = (colId, columnPinning) => {
-  const pinned = columnPinning.get(colId);
+  if (!columnPinning) {
+    return false;
+  }
+  const pinned = columnPinning[colId];
   const computedPinned = pinned === "start" || pinned === true ? "start" : pinned === "end" ? "end" : false;
   return computedPinned;
 };
@@ -9701,6 +10036,8 @@ var getComputedVisibleColumns = ({
       renderValue: colType.renderValue,
       render: colType.render,
       style: colType.style,
+      headerStyle: colType.headerStyle,
+      headerClassName: colType.headerClassName,
       components: colType.components,
       columnGroup: colType.columnGroup,
       field
@@ -9863,7 +10200,6 @@ var useComputedVisibleColumns = ({
   columnSizing
 }) => {
   const columnsRenderId = useRerenderOnKeyChange(columns);
-  const pinningRenderId = useRerenderOnKeyChange(columnPinning);
   const {
     computedRemainingSpace,
     computedColumnOrder,
@@ -9879,7 +10215,7 @@ var useComputedVisibleColumns = ({
     computedPinnedEndOffset,
     computedPinnedEndWidth,
     computedPinnedStartWidth
-  } = useMemo11(() => {
+  } = useMemo10(() => {
     return getComputedVisibleColumns({
       columns,
       bodySize,
@@ -9926,8 +10262,7 @@ var useComputedVisibleColumns = ({
     columnSizing,
     columnTypes,
     columnPinning,
-    columnsRenderId,
-    pinningRenderId
+    columnsRenderId
   ]);
   const result = {
     columns,
@@ -10095,7 +10430,7 @@ function useComputed() {
 }
 
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
-import { useMemo as useMemo12 } from "react";
+import { useMemo as useMemo11 } from "react";
 
 // src/components/InfiniteTable/hooks/useLicense/crc32.ts
 var DEFAULT_ReversedPolynomial = 3988292384;
@@ -10253,10 +10588,10 @@ var isInsideSandbox = () => {
 };
 var isInsidePlayground = isInsideSandbox() || isInsideSandpack();
 var useLicense = (licenseKey = "") => {
-  const valid = useMemo12(() => {
+  const valid = useMemo11(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.3.18"
+      version: "0.3.21"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -10283,7 +10618,7 @@ function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
       let tryScroll = function(times = 0) {
         times++;
         cancelAnimationFrame(rafId.current);
-        rafId.current = requestAnimationFrame(() => {
+        rafId.current = raf(() => {
           didScrollRef.current = imperativeApi.scrollCellIntoView(activeCellIndex[0], activeCellIndex[1], {
             offset: 30
           });
@@ -10590,7 +10925,7 @@ function initSetupState2() {
       scrollTop: 0,
       scrollLeft: 0
     },
-    columnReorderInProgress: false,
+    columnReorderDragColumnId: false,
     ready: false,
     focused: false,
     focusedWithin: false,
@@ -10659,7 +10994,6 @@ var forwardProps3 = (setupState) => {
     columnHeaderHeight: (columnHeaderHeight) => typeof columnHeaderHeight === "number" ? columnHeaderHeight : 30,
     columns: (columns) => toMap(columns, setupState.propsCache.get("columns")),
     columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : {},
-    columnPinning: (columnPinning) => toMap(columnPinning, setupState.propsCache.get("columnPinning")),
     columnSizing: (columnSizing) => columnSizing || {},
     columnTypes: (columnTypes) => columnTypes || {},
     collapsedColumnGroups: (collapsedColumnGroups) => collapsedColumnGroups != null ? collapsedColumnGroups : new Map(),
@@ -10706,11 +11040,13 @@ var mapPropsToState2 = (params) => {
   });
   const computedColumns = state.columnsWhenGrouping || state.columnsWhenInlineGroupRenderStrategy || state.columns;
   return {
+    columnPinning: state.columnPinningWhileDragging || state.columnPinning || props.columnPinning,
+    columnPinningWhileDragging: state.columnPinningWhileDragging,
     controlledColumnVisibility: !!props.columnVisibility,
     groupRenderStrategy,
     groupBy,
     computedColumns,
-    keyboardNavigation: (_a = state.keyboardNavigation) != null ? _a : state.activeCellIndex != null ? "cell" : state.activeRowIndex != null ? "row" : "cell",
+    keyboardNavigation: (_a = props.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,
@@ -10745,16 +11081,14 @@ var InfiniteTableComponent = memo11(function InfiniteTableComponent2() {
     getComputed,
     computed,
     componentActions: actions,
-    getState
+    getState,
+    imperativeApi
   } = useInfiniteTable();
   const {
     componentState: { loading, dataArray },
     getState: getDataSourceState,
     componentActions: dataSourceActions
   } = useDataSourceContextValue();
-  const [imperativeApi] = useState15(() => {
-    return getImperativeApi(getState, getComputed, getDataSourceState, actions);
-  });
   const {
     domRef,
     scrollerDOMRef,
@@ -10827,7 +11161,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" && !componentState.columnReorderInProgress ? activeCellIndex : null,
+    activeCellIndex: componentState.ready && keyboardNavigation === "cell" && !componentState.columnReorderDragColumnId ? activeCellIndex : null,
     scrollStopDelay,
     renderer,
     onRenderUpdater,
@@ -10840,6 +11174,12 @@ var InfiniteTableComponent = memo11(function InfiniteTableComponent2() {
   }, loadingText)), /* @__PURE__ */ createElement28("div", {
     ref: portalDOMRef,
     className: join(`${rootClassName2}Portal`, zIndex[1e7], position.absolute, top[0], left[0])
+  }), /* @__PURE__ */ createElement28("div", {
+    "data-name": "pinned-start-border",
+    className: PinnedStartIndicatorBorder
+  }), /* @__PURE__ */ createElement28("div", {
+    "data-name": "pinned-end-border",
+    className: PinnedEndIndicatorBorder
   }), rowHeightCSSVar ? /* @__PURE__ */ createElement28(CSSVariableWatch, {
     varName: rowHeightCSSVar,
     onChange: onRowHeightCSSVarChange
@@ -10858,12 +11198,17 @@ function InfiniteTableContextProvider() {
     globalThis.getState = getState;
     globalThis.getComputed = getComputed;
   }
+  const { getState: getDataSourceState } = useDataSourceContextValue();
+  const [imperativeApi] = useState15(() => {
+    return getImperativeApi(getState, getComputed, getDataSourceState, componentActions);
+  });
   const contextValue = {
     componentActions,
     componentState,
     computed,
     getComputed,
-    getState
+    getState,
+    imperativeApi
   };
   useResizeObserver(scrollerDOMRef, (size) => {
     const bodySize = {