@infinite-table/infinite-react 5.0.0-canary.8 → 5.0.0

package/index.dev.mjs

@@ -1253,49 +1253,6 @@ function buildSubscriptionCallback(withRaf = false) {
   return updater;
 }
 
-// src/components/InfiniteTable/vars.css.ts
-var ThemeVars = { color: { accent: "var(--infinite-accent-color)", success: "var(--infinite-success-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)", iconSize: "var(--infinite-icon-size)", runtime: { bodyWidth: "var(--infinite-runtime-body-content-width)", totalVisibleColumnsWidthValue: "var(--infinite-runtime-total-visible-columns-width)", totalVisibleColumnsWidthVar: "var(--infinite-runtime-total-visible-columns-width-var)", visibleColumnsCount: "var(--infinite-runtime-visible-columns-count)", browserScrollbarWidth: "var(--infinite-runtime-browser-scrollbar-width)" }, 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)", border: "var(--infinite-header-cell-border)", 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)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", borderRight: "var(--infinite-header-cell-border-right)", 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)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, ActiveCellIndicator: { inset: "var(--infinite-active-cell-indicator-inset)" }, Cell: { flashingDuration: "var(--infinite-flashing-duration)", flashingAnimationName: "var(--infinite-flashing-animation-name)", flashingOverlayZIndex: "var(--infinite-flashing-overlay-z-index)", flashingBackground: "var(--infinite-flashing-background)", flashingUpBackground: "var(--infinite-flashing-up-background)", flashingDownBackground: "var(--infinite-flashing-down-background)", padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderLeft: "var(--infinite-cell-border-left)", borderRight: "var(--infinite-cell-border-right)", borderTop: "var(--infinite-cell-border-top)", 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)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", 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)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", separatorColor: "var(--infinite-menu-separator-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetail: { background: "var(--infinite-rowdetail-background)", padding: "var(--infinite-rowdetail-padding)", gridHeight: "var(--infinite-rowdetail-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", disabledBackground: "var(--infinite-row-disabled-background)", oddDisabledBackground: "var(--infinite-row-odd-disabled-background)", selectedBackground: "var(--infinite-row-selected-background)", disabledOpacity: "var(--infinite-row-disabled-opacity)", 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)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", selectedDisabledBackground: "var(--infinite-row-selected-disabled-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
-var columnHeaderHeightName = "column-header-height";
-
-// src/components/HeadlessTable/ReactHeadlessTableRenderer.tsx
-import * as React9 from "react";
-
-// src/utils/mathIntersection.ts
-function arrayIntersection(...arrays) {
-  if (!arrays.length) {
-    return [];
-  }
-  const map2 = /* @__PURE__ */ new Map();
-  arrays.forEach((arr) => {
-    for (let i = 0, len2 = arr.length; i < len2; i++) {
-      const item = arr[i];
-      const count = map2.get(item) ?? 0;
-      map2.set(item, count + 1);
-    }
-    return map2;
-  });
-  const len = arrays.length;
-  return arrays[0].filter((x) => {
-    return map2.get(x) === len;
-  });
-}
-
-// src/utils/raf.ts
-var raf = getGlobal().requestAnimationFrame || ((fn) => {
-  return setTimeout(fn, 16);
-});
-var cancelRaf = getGlobal().cancelAnimationFrame || ((timeoutId) => {
-  return clearTimeout(timeoutId);
-});
-
-// src/utils/stripVar.ts
-function stripVar(cssVariableWithVarString) {
-  return cssVariableWithVarString.slice(4, -1);
-}
-
-// src/components/InfiniteTable/internalVars.css.ts
-var InternalVars = { currentColumnTransformX: "var(--currentColumnTransformX__16hkbkc0)", y: "var(--y__16hkbkc1)", currentFlashingBackground: "var(--currentFlashingBackground__16hkbkc2)", currentFlashingDuration: "var(--currentFlashingDuration__16hkbkc3)", activeCellRowOffset: "var(--activeCellRowOffset__16hkbkc4)", activeCellRowOffsetX: "var(--activeCellRowOffsetX__16hkbkc5)", activeCellRowHeight: "var(--activeCellRowHeight__16hkbkc6)", activeCellOffsetX: "var(--activeCellOffsetX__16hkbkc7)", activeCellOffsetY: "var(--activeCellOffsetY__16hkbkc8)", scrollTopForActiveRow: "var(--scrollTopForActiveRow__16hkbkc9)", scrollLeftForActiveRowWhenHorizontalLayout: "var(--scrollLeftForActiveRowWhenHorizontalLayout__16hkbkca)", activeCellColWidth: "var(--activeCellColWidth__16hkbkcb)", activeCellColOffset: "var(--activeCellColOffset__16hkbkcc)", columnReorderEffectDurationAtIndex: "var(--columnReorderEffectDurationAtIndex__16hkbkcd)", columnWidthAtIndex: "var(--columnWidthAtIndex__16hkbkce)", columnOffsetAtIndex: "var(--columnOffsetAtIndex__16hkbkcf)", columnOffsetAtIndexWhileReordering: "var(--columnOffsetAtIndexWhileReordering__16hkbkcg)", columnZIndexAtIndex: "var(--columnZIndexAtIndex__16hkbkch)", pinnedStartWidth: "var(--pinnedStartWidth__16hkbkci)", pinnedEndWidth: "var(--pinnedEndWidth__16hkbkcj)", pinnedEndOffset: "var(--pinnedEndOffset__16hkbkck)", computedVisibleColumnsCount: "var(--computedVisibleColumnsCount__16hkbkcl)", baseZIndexForCells: "var(--baseZIndexForCells__16hkbkcm)", bodyWidth: "var(--bodyWidth__16hkbkcn)", bodyHeight: "var(--bodyHeight__16hkbkco)", scrollbarWidthHorizontal: "var(--scrollbarWidthHorizontal__16hkbkcp)", scrollbarWidthVertical: "var(--scrollbarWidthVertical__16hkbkcq)", scrollLeft: "var(--scrollLeft__16hkbkcr)", scrollTop: "var(--scrollTop__16hkbkcs)" };
-
 // src/utils/selectParent.ts
 function selectParent(el, selector2) {
   let node = el;
@@ -1331,12 +1288,24 @@ function selectParentUntil(el, selector2, root) {
   return null;
 }
 
+// src/utils/stripVar.ts
+function stripVar(cssVariableWithVarString) {
+  return cssVariableWithVarString.slice(4, -1);
+}
+
 // src/components/InfiniteTable/internalProps.ts
 var rootClassName2 = "Infinite";
 var internalProps = {
   rootClassName: rootClassName2
 };
 
+// src/components/InfiniteTable/internalVars.css.ts
+var InternalVars = { currentColumnTransformX: "var(--currentColumnTransformX__16hkbkc0)", y: "var(--y__16hkbkc1)", currentFlashingBackground: "var(--currentFlashingBackground__16hkbkc2)", currentFlashingDuration: "var(--currentFlashingDuration__16hkbkc3)", activeCellRowOffset: "var(--activeCellRowOffset__16hkbkc4)", activeCellRowOffsetX: "var(--activeCellRowOffsetX__16hkbkc5)", activeCellRowHeight: "var(--activeCellRowHeight__16hkbkc6)", activeCellOffsetX: "var(--activeCellOffsetX__16hkbkc7)", activeCellOffsetY: "var(--activeCellOffsetY__16hkbkc8)", scrollTopForActiveRow: "var(--scrollTopForActiveRow__16hkbkc9)", scrollLeftForActiveRowWhenHorizontalLayout: "var(--scrollLeftForActiveRowWhenHorizontalLayout__16hkbkca)", activeCellColWidth: "var(--activeCellColWidth__16hkbkcb)", activeCellColOffset: "var(--activeCellColOffset__16hkbkcc)", columnReorderEffectDurationAtIndex: "var(--columnReorderEffectDurationAtIndex__16hkbkcd)", columnWidthAtIndex: "var(--columnWidthAtIndex__16hkbkce)", columnOffsetAtIndex: "var(--columnOffsetAtIndex__16hkbkcf)", columnOffsetAtIndexWhileReordering: "var(--columnOffsetAtIndexWhileReordering__16hkbkcg)", columnZIndexAtIndex: "var(--columnZIndexAtIndex__16hkbkch)", pinnedStartWidth: "var(--pinnedStartWidth__16hkbkci)", pinnedEndWidth: "var(--pinnedEndWidth__16hkbkcj)", pinnedEndOffset: "var(--pinnedEndOffset__16hkbkck)", computedVisibleColumnsCount: "var(--computedVisibleColumnsCount__16hkbkcl)", baseZIndexForCells: "var(--baseZIndexForCells__16hkbkcm)", bodyWidth: "var(--bodyWidth__16hkbkcn)", bodyHeight: "var(--bodyHeight__16hkbkco)", scrollbarWidthHorizontal: "var(--scrollbarWidthHorizontal__16hkbkcp)", scrollbarWidthVertical: "var(--scrollbarWidthVertical__16hkbkcq)", scrollLeft: "var(--scrollLeft__16hkbkcr)", scrollTop: "var(--scrollTop__16hkbkcs)" };
+
+// src/components/InfiniteTable/vars.css.ts
+var ThemeVars = { color: { accent: "var(--infinite-accent-color)", success: "var(--infinite-success-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)", iconSize: "var(--infinite-icon-size)", runtime: { bodyWidth: "var(--infinite-runtime-body-content-width)", totalVisibleColumnsWidthValue: "var(--infinite-runtime-total-visible-columns-width)", totalVisibleColumnsWidthVar: "var(--infinite-runtime-total-visible-columns-width-var)", visibleColumnsCount: "var(--infinite-runtime-visible-columns-count)", browserScrollbarWidth: "var(--infinite-runtime-browser-scrollbar-width)" }, 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)", border: "var(--infinite-header-cell-border)", 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)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", borderRight: "var(--infinite-header-cell-border-right)", 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)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, ActiveCellIndicator: { inset: "var(--infinite-active-cell-indicator-inset)" }, Cell: { flashingDuration: "var(--infinite-flashing-duration)", flashingAnimationName: "var(--infinite-flashing-animation-name)", flashingOverlayZIndex: "var(--infinite-flashing-overlay-z-index)", flashingBackground: "var(--infinite-flashing-background)", flashingUpBackground: "var(--infinite-flashing-up-background)", flashingDownBackground: "var(--infinite-flashing-down-background)", padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderLeft: "var(--infinite-cell-border-left)", borderRight: "var(--infinite-cell-border-right)", borderTop: "var(--infinite-cell-border-top)", 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)", horizontalLayoutColumnReorderDisabledPageOpacity: "var(--infinite-horizontal-layout-column-reorder-disabled-page-opacity)", color: "var(--infinite-cell-color)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", 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)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", separatorColor: "var(--infinite-menu-separator-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetail: { background: "var(--infinite-rowdetail-background)", padding: "var(--infinite-rowdetail-padding)", gridHeight: "var(--infinite-rowdetail-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", disabledBackground: "var(--infinite-row-disabled-background)", oddDisabledBackground: "var(--infinite-row-odd-disabled-background)", selectedBackground: "var(--infinite-row-selected-background)", disabledOpacity: "var(--infinite-row-disabled-opacity)", 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)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", selectedDisabledBackground: "var(--infinite-row-selected-disabled-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
+var columnHeaderHeightName = "column-header-height";
+
 // src/components/InfiniteTable/utils/infiniteDOMUtils.ts
 var InfiniteSelector = `.${internalProps.rootClassName}`;
 function getParentInfiniteNode(node) {
@@ -1359,34 +1328,20 @@ function setInfiniteVarOnRoot(varName, varValue, node) {
 }
 function setInfiniteVarOnNode(varName, varValue, node) {
   if (node) {
-    const prop = InternalVars[varName] ? stripVar(InternalVars[varName]) : varName;
+    const name = varName;
+    const prop = InternalVars[name] ? stripVar(InternalVars[name]) : varName;
     node.style.setProperty(prop, `${varValue}`);
   }
 }
 function setInfiniteVarsOnNode(vars, node) {
   if (node) {
     for (var varName in vars) {
-      node.style.setProperty(
-        InternalVars[varName] ? stripVar(InternalVars[varName]) : varName,
-        `${vars[varName]}`
-      );
+      const propName = InternalVars[varName] ? stripVar(InternalVars[varName]) : varName;
+      const propValue = `${vars[varName]}`;
+      node.style.setProperty(propName, propValue);
     }
   }
 }
-function setInfiniteColumnWidth(colIndex, colWidth, node) {
-  setInfiniteVarOnRoot(
-    `${columnWidthAtIndex}-${colIndex}`,
-    typeof colWidth === "number" ? colWidth + "px" : colWidth,
-    node
-  );
-}
-function setInfiniteColumnOffset(colIndex, colOffset, node) {
-  setInfiniteVarOnRoot(
-    `${columnOffsetAtIndex}-${colIndex}`,
-    typeof colOffset === "number" ? colOffset + "px" : colOffset,
-    node
-  );
-}
 function addToInfiniteColumnOffset(column, amountToAdd, node) {
   setInfiniteVarOnRoot(
     `${columnOffsetAtIndex}-${column.computedVisibleIndex}`,
@@ -1423,12 +1378,42 @@ function restoreInfiniteColumnReorderDuration(colIndex, node) {
     node
   );
 }
-function getCSSVarNameForColWidth(colIndex) {
-  return `${columnWidthAtIndex}-${colIndex}`;
-}
-function getCSSVarNameForColOffset(colIndex) {
-  return `${columnOffsetAtIndex}-${colIndex}`;
-}
+var InternalVarUtils = {
+  columnWidths: {
+    get(index) {
+      return `var(${this.getVarName(index)})`;
+    },
+    getVarName(index) {
+      return this.varName.get(index);
+    },
+    varName: {
+      get(index) {
+        return `${columnWidthAtIndex}-${index}`;
+      }
+    },
+    set(index, value, node) {
+      value = typeof value === "number" ? value + "px" : value;
+      setInfiniteVarOnRoot(this.varName.get(index), value, node);
+    }
+  },
+  columnOffsets: {
+    get(index) {
+      return `var(${this.getVarName(index)})`;
+    },
+    getVarName(index) {
+      return this.varName.get(index);
+    },
+    varName: {
+      get(index) {
+        return `${columnOffsetAtIndex}-${index}`;
+      }
+    },
+    set(index, value, node) {
+      value = typeof value === "number" ? value + "px" : value;
+      setInfiniteVarOnRoot(this.varName.get(index), value, node);
+    }
+  }
+};
 function setInfiniteScrollPosition(scrollPosition, node) {
   setInfiniteVarsOnNode(
     {
@@ -1439,6 +1424,37 @@ function setInfiniteScrollPosition(scrollPosition, node) {
   );
 }
 
+// src/components/HeadlessTable/ReactHeadlessTableRenderer.tsx
+import * as React9 from "react";
+
+// src/utils/mathIntersection.ts
+function arrayIntersection(...arrays) {
+  if (!arrays.length) {
+    return [];
+  }
+  const map2 = /* @__PURE__ */ new Map();
+  arrays.forEach((arr) => {
+    for (let i = 0, len2 = arr.length; i < len2; i++) {
+      const item = arr[i];
+      const count = map2.get(item) ?? 0;
+      map2.set(item, count + 1);
+    }
+    return map2;
+  });
+  const len = arrays.length;
+  return arrays[0].filter((x) => {
+    return map2.get(x) === len;
+  });
+}
+
+// src/utils/raf.ts
+var raf = getGlobal().requestAnimationFrame || ((fn) => {
+  return setTimeout(fn, 16);
+});
+var cancelRaf = getGlobal().cancelAnimationFrame || ((timeoutId) => {
+  return clearTimeout(timeoutId);
+});
+
 // src/components/VirtualBrain/MatrixBrain.ts
 var import_binary_search = __toESM(require_binary_search());
 
@@ -1449,7 +1465,41 @@ var ALL_DIRECTIONS = {
   vertical: true
 };
 
+// src/components/VirtualBrain/getGreatestCountVisibleInSize.ts
+function getGreatestCountVisibleInSize(availableSize, itemSizes) {
+  const len = itemSizes.length;
+  if (!len) {
+    return 0;
+  }
+  let maxCount = -1;
+  for (let start = 0; start < len; start++) {
+    let sum2 = 0;
+    let count = 0;
+    if (len - start <= maxCount) {
+      break;
+    }
+    for (let i = start; i < len; i++) {
+      sum2 += itemSizes[i];
+      count++;
+      if (sum2 > availableSize) {
+        if (count > maxCount) {
+          maxCount = count;
+        }
+        break;
+      }
+    }
+  }
+  return maxCount < 0 ? len : Math.min(maxCount, len);
+}
+
 // src/components/VirtualBrain/MatrixBrain.ts
+var DEFAULT_EXTEND_BY = {
+  start: 0,
+  end: 0
+};
+var immediateCallback = (fn) => {
+  fn();
+};
 var getRenderRangeCellCount = (range) => {
   const { start, end } = range;
   const [startRow, startCol] = start;
@@ -1474,6 +1524,8 @@ var MatrixBrain = class extends Logger {
     const logName = `MatrixBrain${name ? `:${name}` : ""}`;
     super(logName);
     this.scrolling = false;
+    this.RENDER_COUNT_SAFETY_MARGIN_START = 1;
+    this.RENDER_COUNT_SAFETY_MARGIN_END = 1;
     this.availableWidth = 0;
     this.availableRenderWidth = 0;
     this.isHorizontalLayoutBrain = false;
@@ -1482,6 +1534,7 @@ var MatrixBrain = class extends Logger {
     this.availableRenderHeight = 0;
     this.cols = 0;
     this.rows = 0;
+    this.alwaysRenderedColumns = /* @__PURE__ */ new Set();
     this._rowsPerPage = 0;
     this.rowHeight = 0;
     this.colWidth = 0;
@@ -1489,6 +1542,8 @@ var MatrixBrain = class extends Logger {
     this.horizontalTotalSize = 0;
     this.horizontalRenderCount = void 0;
     this.verticalRenderCount = void 0;
+    this.horizontalExtendRangeBy = DEFAULT_EXTEND_BY;
+    this.verticalExtendRangeBy = DEFAULT_EXTEND_BY;
     this.horizontalRenderRange = {
       startIndex: 0,
       endIndex: 0
@@ -1594,14 +1649,15 @@ var MatrixBrain = class extends Logger {
         });
       });
     };
-    this.notifyVerticalRenderRangeChange = () => {
+    this.notifyVerticalRenderRangeChange = (immediate = false) => {
       if (this.destroyed) {
         return;
       }
       const fns = this.onVerticalRenderRangeChangeFns;
       const range = this.verticalRenderRange;
+      const callback = immediate ? immediateCallback : raf2;
       fns.forEach((fn) => {
-        raf2(() => {
+        callback(() => {
           if (this.destroyed) {
             return;
           }
@@ -1611,14 +1667,15 @@ var MatrixBrain = class extends Logger {
         });
       });
     };
-    this.notifyHorizontalRenderRangeChange = () => {
+    this.notifyHorizontalRenderRangeChange = (immediate = false) => {
       if (this.destroyed) {
         return;
       }
       const fns = this.onHorizontalRenderRangeChangeFns;
       const range = this.horizontalRenderRange;
+      const callback = immediate ? immediateCallback : raf2;
       fns.forEach((fn) => {
-        raf2(() => {
+        callback(() => {
           if (this.destroyed) {
             return;
           }
@@ -1628,34 +1685,6 @@ var MatrixBrain = class extends Logger {
         });
       });
     };
-    this.computeDirectionalRenderCount = (direction, itemSize, count, theRenderSize) => {
-      let renderCount = 0;
-      let size = direction === "horizontal" ? theRenderSize.width : theRenderSize.height;
-      size -= this.getFixedSize(direction);
-      if (size <= 0) {
-        return 0;
-      }
-      if (typeof itemSize === "function") {
-        const sizes = [];
-        for (let i = 0; i < count; i++) {
-          sizes.push(this.getItemSize(i, direction));
-        }
-        sizes.sort(SORT_ASC);
-        let sum2 = 0;
-        for (let i = 0; i < count; i++) {
-          sum2 += sizes[i];
-          renderCount++;
-          if (sum2 > size) {
-            break;
-          }
-        }
-        renderCount += 1;
-      } else {
-        renderCount = (itemSize ? Math.ceil(size / itemSize) : 0) + 1;
-      }
-      renderCount = Math.min(count, renderCount);
-      return renderCount;
-    };
     this.isColFixedEnd = (colIndex) => {
       if (!this.fixedColsEnd) {
         return false;
@@ -1922,7 +1951,8 @@ var MatrixBrain = class extends Logger {
       };
     };
     this.computeDirectionalRenderRange = (direction) => {
-      const renderCount = direction === "horizontal" ? this.horizontalRenderCount : this.verticalRenderCount;
+      const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
+      let renderCount = direction === "horizontal" ? this.horizontalRenderCount : this.verticalRenderCount;
       const count = direction === "horizontal" ? this.cols : this.rows;
       if (!renderCount) {
         return {
@@ -1933,7 +1963,22 @@ var MatrixBrain = class extends Logger {
       const fixedStartIndex = (direction === "horizontal" ? this.fixedColsStart : this.fixedRowsStart) || 0;
       let scrollPositionForDirection = direction === "horizontal" ? this.scrollPosition.scrollLeft : this.scrollPosition.scrollTop;
       scrollPositionForDirection += this.getFixedStartSize(direction);
+      const isItemSizeConstant = typeof itemSize !== "function";
+      const extendBy = direction === "horizontal" ? this.horizontalExtendRangeBy : this.verticalExtendRangeBy;
       let startIndex = this.getItemAt(scrollPositionForDirection, direction);
+      let extendByStart = extendBy.start || 0;
+      let extendByEnd = extendBy.end || 0;
+      if (!isItemSizeConstant) {
+        extendByStart += this.RENDER_COUNT_SAFETY_MARGIN_START;
+        extendByEnd += this.RENDER_COUNT_SAFETY_MARGIN_END;
+      }
+      if (extendByStart) {
+        startIndex = Math.max(0, startIndex - extendByStart);
+        renderCount += extendByStart;
+      }
+      if (extendByEnd) {
+        renderCount += extendByEnd;
+      }
       let endIndex = startIndex + renderCount;
       const theEnd = Math.max(
         fixedStartIndex,
@@ -1977,7 +2022,6 @@ var MatrixBrain = class extends Logger {
         return searchResult;
       }
       return ~searchResult - 1;
-      return 0;
     };
     this.computeCacheFor = (itemIndex, direction) => {
       const itemSizeValueOrFn = direction === "horizontal" ? this.colWidth : this.rowHeight;
@@ -2142,6 +2186,15 @@ var MatrixBrain = class extends Logger {
       }
       return cachedSize;
     };
+    this.keepColumnRendered = (colIndex) => {
+      this.alwaysRenderedColumns.add(colIndex);
+      return () => {
+        this.alwaysRenderedColumns.delete(colIndex);
+      };
+    };
+    this.getAlwaysRenderedColumns = () => {
+      return Array.from(this.alwaysRenderedColumns);
+    };
     this.setRenderRange = ({
       horizontal,
       vertical,
@@ -2411,28 +2464,30 @@ var MatrixBrain = class extends Logger {
    * @param options.right - if true, extends the right side with the amount of current visible columns, otherwise with the specified number
    */
   extendRenderRange(options) {
-    const leftAmount = typeof options.left === "number" ? options.left : options.left === true ? this.getInitialCols() : 0;
-    const rightAmount = typeof options.right === "number" ? options.right : options.right === true ? this.getInitialCols() : 0;
-    const currentRenderCount = this.horizontalRenderCount;
+    const { direction } = options;
+    const horizontal = direction === "horizontal";
+    const extendValueWhenTrue = horizontal ? this.horizontalRenderCount || this.getInitialCols() : this.verticalRenderCount || this.getInitialRows();
+    const startAmount = typeof options.start === "number" ? options.start : options.start === true ? extendValueWhenTrue : 0;
+    const endAmount = typeof options.end === "number" ? options.end : options.end === true ? extendValueWhenTrue : 0;
+    if (horizontal) {
+      this.horizontalExtendRangeBy = {
+        start: startAmount,
+        end: endAmount
+      };
+    } else {
+      this.verticalExtendRangeBy = {
+        start: startAmount,
+        end: endAmount
+      };
+    }
+    this.updateRenderRange({ horizontal, vertical: !horizontal });
     const restore = () => {
-      this.setRenderCount({
-        horizontal: currentRenderCount,
-        vertical: void 0
+      this.extendRenderRange({
+        start: 0,
+        end: 0,
+        direction
       });
     };
-    const { start, end } = this.getRenderRange();
-    const [startRow, startCol] = start;
-    const [endRow, endCol] = end;
-    this.setRenderRange({
-      horizontal: {
-        startIndex: Math.max(0, startCol - leftAmount),
-        endIndex: Math.min(this.cols, endCol + rightAmount)
-      },
-      vertical: {
-        startIndex: startRow,
-        endIndex: endRow
-      }
-    });
     return restore;
   }
   updateRenderCount(which = ALL_DIRECTIONS) {
@@ -2477,14 +2532,15 @@ var MatrixBrain = class extends Logger {
       this.notifyScrollChange();
     }
   }
-  notifyRenderRangeChange() {
+  notifyRenderRangeChange(immediate = false) {
     if (this.destroyed) {
       return;
     }
     const fns = this.onRenderRangeChangeFns;
     const range = this.getRenderRange();
+    const callback = immediate ? immediateCallback : raf2;
     fns.forEach((fn) => {
-      raf2(() => {
+      callback(() => {
         if (this.destroyed) {
           return;
         }
@@ -2504,6 +2560,25 @@ var MatrixBrain = class extends Logger {
       fns[i](scrollPosition);
     }
   }
+  computeDirectionalRenderCount(direction, itemSize, count, theRenderSize) {
+    let renderCount = 0;
+    let size = direction === "horizontal" ? theRenderSize.width : theRenderSize.height;
+    size -= this.getFixedSize(direction);
+    if (size <= 0) {
+      return 0;
+    }
+    if (typeof itemSize === "function") {
+      const sizes = [];
+      for (let i = 0; i < count; i++) {
+        sizes.push(this.getItemSize(i, direction));
+      }
+      renderCount = getGreatestCountVisibleInSize(size, sizes);
+    } else {
+      renderCount = (itemSize ? Math.ceil(size / itemSize) : 0) + 1;
+    }
+    renderCount = Math.min(count, renderCount);
+    return renderCount;
+  }
   getFixedSize(direction) {
     return direction === "horizontal" ? this.getFixedStartColsWidth() + this.getFixedEndColsWidth() : this.getFixedStartRowsHeight() + this.getFixedEndRowsHeight();
   }
@@ -2617,6 +2692,9 @@ var MatrixBrain = class extends Logger {
     this.reset();
     this.rowspanParent.clear();
     this.colspanParent.clear();
+    this.alwaysRenderedColumns.clear();
+    this.horizontalExtendRangeBy = DEFAULT_EXTEND_BY;
+    this.verticalExtendRangeBy = DEFAULT_EXTEND_BY;
     this.destroyed = true;
     this.onDestroyFns = [];
     this.onScrollFns = [];
@@ -2650,6 +2728,9 @@ var MappedCells = class extends Logger {
       }
       return elementsOutsideItemRange.pop();
     };
+    this.getElementFromListForRow = (elementsOutsideItemRange, _rowIndex) => {
+      return elementsOutsideItemRange.pop();
+    };
     /**
      * Retrieves the elements that contain rendered cells that are outside
      * of the specified range
@@ -2947,7 +3028,8 @@ var ReactHeadlessTableRenderer = class extends Logger {
     this.detailRowUpdaters = [];
     this.items = [];
     this.detailItems = [];
-    this.currentHoveredRow = -1;
+    this.lastEnteredRow = -1;
+    this.lastExitedRow = -1;
     this.hoverRowUpdatesInProgress = /* @__PURE__ */ new Map();
     this.infiniteNode = null;
     this.setDetailTransform = (element, _rowIndex, {
@@ -2969,14 +3051,14 @@ var ReactHeadlessTableRenderer = class extends Logger {
       scrollLeft: scrollLeft2,
       scrollTop: scrollTop2
     }, zIndex2) => {
-      const columnOffsetX = `${columnOffsetAtIndex2}-${colIndex}`;
+      const columnOffsetX = InternalVarUtils.columnOffsets.get(colIndex);
       const columnOffsetXWhileReordering = `${columnOffsetAtIndexWhileReordering2}-${colIndex}`;
       const currentTransformYValue = scrollTop2 ? `calc( ${y}px + var(${scrollTopCSSVar}) )` : `${y}px`;
       if (element.__currentTransformY !== currentTransformYValue) {
         element.__currentTransformY = currentTransformYValue;
         element.style.setProperty(currentTransformY, currentTransformYValue);
       }
-      const transformValue = `translate3d(var(${columnOffsetXWhileReordering}, var(${columnOffsetX})), var(${currentTransformY}), 0)`;
+      const transformValue = `translate3d(var(${columnOffsetXWhileReordering}, ${columnOffsetX}), var(${currentTransformY}), 0)`;
       if (element.__transformValue !== transformValue) {
         element.__transformValue = transformValue;
         element.style.transform = transformValue;
@@ -3376,11 +3458,14 @@ var ReactHeadlessTableRenderer = class extends Logger {
       return covered ? [rowspanParent, colspanParent] : false;
     };
     this.onMouseEnter = (rowIndex) => {
-      this.currentHoveredRow = rowIndex;
+      this.lastEnteredRow = rowIndex;
+      this.lastExitedRow = -1;
       if (this.scrolling) {
         return;
       }
-      this.addHoverClass(rowIndex);
+      if (rowIndex != -1) {
+        this.addHoverClass(rowIndex);
+      }
     };
     this.addHoverClass = (rowIndex) => {
       this.mappedCells.getElementsForRowIndex(rowIndex).forEach((elIndex) => {
@@ -3393,14 +3478,14 @@ var ReactHeadlessTableRenderer = class extends Logger {
       });
     };
     this.onMouseLeave = (rowIndex) => {
-      if (this.currentHoveredRow != -1 && this.currentHoveredRow === rowIndex) {
-        this.removeHoverClass(rowIndex);
-      }
-      this.currentHoveredRow = -1;
+      this.lastExitedRow = rowIndex;
+      this.lastEnteredRow = -1;
       if (this.scrolling) {
         return;
       }
-      this.removeHoverClass(rowIndex);
+      if (rowIndex != -1) {
+        this.removeHoverClass(rowIndex);
+      }
     };
     this.removeHoverClass = (rowIndex) => {
       this.mappedCells.getElementsForRowIndex(rowIndex).forEach((elIndex) => {
@@ -3424,8 +3509,8 @@ var ReactHeadlessTableRenderer = class extends Logger {
       }
       this.hoverRowUpdatesInProgress.set(rowIndex, true);
       const checkHoverClass = () => {
-        if (this.currentHoveredRow != -1 && !this.scrolling) {
-          if (this.currentHoveredRow === rowIndex) {
+        if (!this.scrolling && this.lastEnteredRow != -1) {
+          if (this.lastEnteredRow === rowIndex) {
             this.addHoverClass(rowIndex);
           } else {
             this.removeHoverClass(rowIndex);
@@ -3518,11 +3603,17 @@ var ReactHeadlessTableRenderer = class extends Logger {
     };
     this.onScrollStart = () => {
       this.scrolling = true;
+      if (this.lastEnteredRow != -1) {
+        this.removeHoverClass(this.lastEnteredRow);
+      }
     };
     this.onScrollStop = () => {
       this.scrolling = false;
-      if (this.currentHoveredRow != -1) {
-        this.addHoverClass(this.currentHoveredRow);
+      if (this.lastEnteredRow != -1) {
+        this.addHoverClass(this.lastEnteredRow);
+      }
+      if (this.lastExitedRow != -1) {
+        this.removeHoverClass(this.lastExitedRow);
       }
     };
     this.adjustFixedElementsOnScroll = (scrollPosition = this.brain.getScrollPosition()) => {
@@ -3789,12 +3880,27 @@ var ReactHeadlessTableRenderer = class extends Logger {
       return [];
     }
     const { start, end } = range;
+    const horizontalLayout = this.brain.isHorizontalLayoutBrain;
     if (false) {
       this.debug(`Render range ${start}-${end}. Force ${force}`);
     }
     const { mappedCells, mappedDetailRows } = this;
     const fixedRanges = this.getFixedRanges(range);
     const ranges = [range, ...fixedRanges];
+    const alwaysRenderedColumns = this.brain.getAlwaysRenderedColumns();
+    if (alwaysRenderedColumns.length > 0) {
+      const startCol = range.start[1];
+      const endCol = range.end[1];
+      alwaysRenderedColumns.forEach((colIndex) => {
+        const colInRange = startCol <= colIndex && colIndex < endCol;
+        if (!colInRange) {
+          ranges.push({
+            start: [range.start[0], colIndex],
+            end: [range.end[0], colIndex + 1]
+          });
+        }
+      });
+    }
     const extraCellsMap = /* @__PURE__ */ new Map();
     const extraCells = ranges.map(this.getExtraSpanCellsForRange).flat();
     if (extraCells) {
@@ -3914,9 +4020,15 @@ var ReactHeadlessTableRenderer = class extends Logger {
           if (cellRendered && !force && cellMappedCorrectly) {
             continue;
           }
-          const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : mappedCells.getElementFromListForColumn(
-            elementsOutsideItemRange,
-            col
+          const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : (
+            // TODO when horizontal layout, just do elementsOutsideItemRange.pop()
+            horizontalLayout ? mappedCells.getElementFromListForRow(
+              elementsOutsideItemRange,
+              row
+            ) : mappedCells.getElementFromListForColumn(
+              elementsOutsideItemRange,
+              col
+            )
           );
           if (elementIndex == null) {
             if (false) {
@@ -4159,17 +4271,18 @@ var HorizontalLayoutTableRenderer = class extends ReactHeadlessTableRenderer {
       );
       const pageWidth = ThemeVars.runtime.totalVisibleColumnsWidthVar;
       const pageOffset = pageIndex ? `calc(${pageWidth} * ${pageIndex})` : "0px";
-      const columnOffsetX = `${columnOffsetAtIndex2}-${horizontalLayoutCoords.colIndex}`;
+      const columnOffsetX = InternalVarUtils.columnOffsets.get(
+        horizontalLayoutCoords.colIndex
+      );
       const columnOffsetXWhileReordering = `${columnOffsetAtIndexWhileReordering2}-${horizontalLayoutCoords.colIndex}`;
       const currentTransformYValue = `${y}px`;
       if (element.__currentTransformY !== currentTransformYValue) {
         element.__currentTransformY = currentTransformYValue;
         element.style.setProperty(currentTransformY, currentTransformYValue);
       }
-      const xOffset = `calc(var(${columnOffsetX}) + ${pageOffset})`;
-      const transformX2 = `var(${columnOffsetXWhileReordering}, ${xOffset})`;
+      const xOffset = `calc(var(${columnOffsetXWhileReordering}, ${columnOffsetX}) + ${pageOffset})`;
       const transformY = `var(${currentTransformY})`;
-      const transformValue = `translate3d(${transformX2}, ${transformY}, 0px)`;
+      const transformValue = `translate3d(${xOffset}, ${transformY}, 0px)`;
       if (element.__transformValue !== transformValue) {
         element.__transformValue = transformValue;
         element.style.transform = transformValue;
@@ -4232,7 +4345,7 @@ function createRenderer(brain) {
 
 // src/components/HeadlessTable/RawTable.tsx
 function RawTableFn(props) {
-  const { brain, renderCell, renderDetailRow } = props;
+  const { brain, renderCell, renderDetailRow, forceRerenderTimestamp } = props;
   const { renderer, onRenderUpdater } = useMemo2(() => {
     return props.onRenderUpdater && props.renderer ? {
       renderer: props.renderer,
@@ -4250,7 +4363,14 @@ function RawTableFn(props) {
       renderCell,
       renderDetailRow
     });
-  }, [renderer, brain, renderCell, renderDetailRow, onRenderUpdater]);
+  }, [
+    renderer,
+    brain,
+    renderCell,
+    renderDetailRow,
+    onRenderUpdater,
+    forceRerenderTimestamp
+  ]);
   useEffect4(() => {
     const remove = brain.onRenderRangeChange((renderRange) => {
       renderer.renderRange(renderRange, {
@@ -4589,6 +4709,7 @@ function HeadlessTable(props) {
     activeCellIndex,
     onRenderUpdater,
     wrapRowsHorizontally,
+    forceRerenderTimestamp,
     ...domProps
   } = props;
   const { autoFocus } = domProps;
@@ -4656,6 +4777,7 @@ function HeadlessTable(props) {
       /* @__PURE__ */ React13.createElement(
         RawTable,
         {
+          forceRerenderTimestamp,
           renderer,
           onRenderUpdater,
           renderCell,
@@ -5278,22 +5400,22 @@ import { useEffect as useEffect10, useLayoutEffect as useLayoutEffect8, useState
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
 var CellCls = "cell_CellCls__1eexc2a5 utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q utilities_position_absolute__16lm1iw2 utilities_willChange_transform__16lm1iw22 utilities_whiteSpace_nowrap__16lm1iw23 utilities_userSelect_none__16lm1iw17";
-var HeaderCellContentRecipe = createRuntimeFn({ defaultClassName: "header_HeaderCellContentRecipe__12zfob124 utilities_height_100%__16lm1iw19 utilities_width_100%__16lm1iw1b utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q utilities_justifyContent_start__16lm1iw1v", variantClassNames: { filtered: { false: "header_HeaderCellContentRecipe_filtered_false__12zfob125", true: "header_HeaderCellContentRecipe_filtered_true__12zfob126" }, verticalAlign: { start: "header_HeaderCellContentRecipe_verticalAlign_start__12zfob127", end: "header_HeaderCellContentRecipe_verticalAlign_end__12zfob128", center: "header_HeaderCellContentRecipe_verticalAlign_center__12zfob129" }, align: { start: "header_HeaderCellContentRecipe_align_start__12zfob12a", end: "header_HeaderCellContentRecipe_align_end__12zfob12b", center: "header_HeaderCellContentRecipe_align_center__12zfob12c" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderCellContentRecipe = createRuntimeFn({ defaultClassName: "header_HeaderCellContentRecipe__12zfob126 utilities_height_100%__16lm1iw19 utilities_width_100%__16lm1iw1b utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q utilities_justifyContent_start__16lm1iw1v", variantClassNames: { filtered: { false: "header_HeaderCellContentRecipe_filtered_false__12zfob127", true: "header_HeaderCellContentRecipe_filtered_true__12zfob128" }, verticalAlign: { start: "header_HeaderCellContentRecipe_verticalAlign_start__12zfob129", end: "header_HeaderCellContentRecipe_verticalAlign_end__12zfob12a", center: "header_HeaderCellContentRecipe_verticalAlign_center__12zfob12b" }, align: { start: "header_HeaderCellContentRecipe_align_start__12zfob12c", end: "header_HeaderCellContentRecipe_align_end__12zfob12d", center: "header_HeaderCellContentRecipe_align_center__12zfob12e" } }, defaultVariants: {}, compoundVariants: [] });
 var HeaderCellProxy = "header_HeaderCellProxy__12zfob1n utilities_whiteSpace_nowrap__16lm1iw23 utilities_textOverflow_ellipsis__16lm1iw24 utilities_overflow_hidden__16lm1iw1x";
-var HeaderCellRecipe = createRuntimeFn({ defaultClassName: "header_HeaderCellRecipe__12zfob1o utilities_display_block__16lm1iw12", variantClassNames: { rowActive: { false: "header_HeaderCellRecipe_rowActive_false__12zfob1p", true: "header_HeaderCellRecipe_rowActive_true__12zfob1q" }, cellSelected: { false: "header_HeaderCellRecipe_cellSelected_false__12zfob1r", true: "header_HeaderCellRecipe_cellSelected_true__12zfob1s" }, rowSelected: { false: "header_HeaderCellRecipe_rowSelected_false__12zfob1t", true: "header_HeaderCellRecipe_rowSelected_true__12zfob1u", null: "header_HeaderCellRecipe_rowSelected_null__12zfob1v" }, rowDisabled: { false: "header_HeaderCellRecipe_rowDisabled_false__12zfob1w", true: "header_HeaderCellRecipe_rowDisabled_true__12zfob1x" }, firstRow: { false: "header_HeaderCellRecipe_firstRow_false__12zfob1y", true: "header_HeaderCellRecipe_firstRow_true__12zfob1z" }, firstRowInHorizontalLayoutPage: { false: "header_HeaderCellRecipe_firstRowInHorizontalLayoutPage_false__12zfob110", true: "header_HeaderCellRecipe_firstRowInHorizontalLayoutPage_true__12zfob111" }, groupRow: { false: "header_HeaderCellRecipe_groupRow_false__12zfob112", true: "header_HeaderCellRecipe_groupRow_true__12zfob113" }, groupCell: { false: "header_HeaderCellRecipe_groupCell_false__12zfob114", true: "header_HeaderCellRecipe_groupCell_true__12zfob115" }, align: { start: "header_HeaderCellRecipe_align_start__12zfob116", end: "header_HeaderCellRecipe_align_end__12zfob117", center: "header_HeaderCellRecipe_align_center__12zfob118" }, verticalAlign: { start: "header_HeaderCellRecipe_verticalAlign_start__12zfob119", end: "header_HeaderCellRecipe_verticalAlign_end__12zfob11a", center: "header_HeaderCellRecipe_verticalAlign_center__12zfob11b" }, zebra: { false: "header_HeaderCellRecipe_zebra_false__12zfob11c", even: "header_HeaderCellRecipe_zebra_even__12zfob11d", odd: "header_HeaderCellRecipe_zebra_odd__12zfob11e" }, dragging: { true: "header_HeaderCellRecipe_dragging_true__12zfob11f", false: "header_HeaderCellRecipe_dragging_false__12zfob11g" }, first: { true: "header_HeaderCellRecipe_first_true__12zfob11h", false: "header_HeaderCellRecipe_first_false__12zfob11i" }, last: { true: "header_HeaderCellRecipe_last_true__12zfob11j", false: "header_HeaderCellRecipe_last_false__12zfob11k" }, groupByField: { true: "header_HeaderCellRecipe_groupByField_true__12zfob11l", false: "header_HeaderCellRecipe_groupByField_false__12zfob11m" }, firstInCategory: { true: "header_HeaderCellRecipe_firstInCategory_true__12zfob11n", false: "header_HeaderCellRecipe_firstInCategory_false__12zfob11o" }, lastInCategory: { true: "header_HeaderCellRecipe_lastInCategory_true__12zfob11p", false: "header_HeaderCellRecipe_lastInCategory_false__12zfob11q" }, pinned: { start: "header_HeaderCellRecipe_pinned_start__12zfob11r", end: "header_HeaderCellRecipe_pinned_end__12zfob11s", false: "header_HeaderCellRecipe_pinned_false__12zfob11t" }, filtered: { true: "header_HeaderCellRecipe_filtered_true__12zfob11u", false: "header_HeaderCellRecipe_filtered_false__12zfob11v" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "header_HeaderCellRecipe_compound_0__12zfob11w"], [{ pinned: "end", firstInCategory: true }, "header_HeaderCellRecipe_compound_1__12zfob11x"], [{ pinned: false, lastInCategory: true }, "header_HeaderCellRecipe_compound_2__12zfob11y"]] });
+var HeaderCellRecipe = createRuntimeFn({ defaultClassName: "header_HeaderCellRecipe__12zfob1o utilities_display_block__16lm1iw12", variantClassNames: { rowActive: { false: "header_HeaderCellRecipe_rowActive_false__12zfob1p", true: "header_HeaderCellRecipe_rowActive_true__12zfob1q" }, cellSelected: { false: "header_HeaderCellRecipe_cellSelected_false__12zfob1r", true: "header_HeaderCellRecipe_cellSelected_true__12zfob1s" }, rowSelected: { false: "header_HeaderCellRecipe_rowSelected_false__12zfob1t", true: "header_HeaderCellRecipe_rowSelected_true__12zfob1u", null: "header_HeaderCellRecipe_rowSelected_null__12zfob1v" }, rowDisabled: { false: "header_HeaderCellRecipe_rowDisabled_false__12zfob1w", true: "header_HeaderCellRecipe_rowDisabled_true__12zfob1x" }, firstRow: { false: "header_HeaderCellRecipe_firstRow_false__12zfob1y", true: "header_HeaderCellRecipe_firstRow_true__12zfob1z" }, firstRowInHorizontalLayoutPage: { false: "header_HeaderCellRecipe_firstRowInHorizontalLayoutPage_false__12zfob110", true: "header_HeaderCellRecipe_firstRowInHorizontalLayoutPage_true__12zfob111" }, groupRow: { false: "header_HeaderCellRecipe_groupRow_false__12zfob112", true: "header_HeaderCellRecipe_groupRow_true__12zfob113" }, groupCell: { false: "header_HeaderCellRecipe_groupCell_false__12zfob114", true: "header_HeaderCellRecipe_groupCell_true__12zfob115" }, align: { start: "header_HeaderCellRecipe_align_start__12zfob116", end: "header_HeaderCellRecipe_align_end__12zfob117", center: "header_HeaderCellRecipe_align_center__12zfob118" }, verticalAlign: { start: "header_HeaderCellRecipe_verticalAlign_start__12zfob119", end: "header_HeaderCellRecipe_verticalAlign_end__12zfob11a", center: "header_HeaderCellRecipe_verticalAlign_center__12zfob11b" }, zebra: { false: "header_HeaderCellRecipe_zebra_false__12zfob11c", even: "header_HeaderCellRecipe_zebra_even__12zfob11d", odd: "header_HeaderCellRecipe_zebra_odd__12zfob11e" }, dragging: { true: "header_HeaderCellRecipe_dragging_true__12zfob11f", false: "header_HeaderCellRecipe_dragging_false__12zfob11g" }, insideDisabledDraggingPage: { true: "header_HeaderCellRecipe_insideDisabledDraggingPage_true__12zfob11h", false: "header_HeaderCellRecipe_insideDisabledDraggingPage_false__12zfob11i" }, first: { true: "header_HeaderCellRecipe_first_true__12zfob11j", false: "header_HeaderCellRecipe_first_false__12zfob11k" }, last: { true: "header_HeaderCellRecipe_last_true__12zfob11l", false: "header_HeaderCellRecipe_last_false__12zfob11m" }, groupByField: { true: "header_HeaderCellRecipe_groupByField_true__12zfob11n", false: "header_HeaderCellRecipe_groupByField_false__12zfob11o" }, firstInCategory: { true: "header_HeaderCellRecipe_firstInCategory_true__12zfob11p", false: "header_HeaderCellRecipe_firstInCategory_false__12zfob11q" }, lastInCategory: { true: "header_HeaderCellRecipe_lastInCategory_true__12zfob11r", false: "header_HeaderCellRecipe_lastInCategory_false__12zfob11s" }, pinned: { start: "header_HeaderCellRecipe_pinned_start__12zfob11t", end: "header_HeaderCellRecipe_pinned_end__12zfob11u", false: "header_HeaderCellRecipe_pinned_false__12zfob11v" }, filtered: { true: "header_HeaderCellRecipe_filtered_true__12zfob11w", false: "header_HeaderCellRecipe_filtered_false__12zfob11x" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "header_HeaderCellRecipe_compound_0__12zfob11y"], [{ pinned: "end", firstInCategory: true }, "header_HeaderCellRecipe_compound_1__12zfob11z"], [{ pinned: false, lastInCategory: true }, "header_HeaderCellRecipe_compound_2__12zfob120"]] });
 var HeaderClsRecipe = createRuntimeFn({ defaultClassName: "header_HeaderClsRecipe__12zfob19 utilities_display_block__16lm1iw12 utilities_position_absolute__16lm1iw2", variantClassNames: { pinned: { start: "header_HeaderClsRecipe_pinned_start__12zfob1a", end: "header_HeaderClsRecipe_pinned_end__12zfob1b", false: "header_HeaderClsRecipe_pinned_false__12zfob1c" }, firstInCategory: { true: "header_HeaderClsRecipe_firstInCategory_true__12zfob1d", false: "header_HeaderClsRecipe_firstInCategory_false__12zfob1e" }, lastInCategory: { true: "header_HeaderClsRecipe_lastInCategory_true__12zfob1f", false: "header_HeaderClsRecipe_lastInCategory_false__12zfob1g" }, overflow: { true: "header_HeaderClsRecipe_overflow_true__12zfob1h", false: "header_HeaderClsRecipe_overflow_false__12zfob1i" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "header_HeaderClsRecipe_compound_0__12zfob1j"], [{ pinned: "start", firstInCategory: true }, "header_HeaderClsRecipe_compound_1__12zfob1k"], [{ overflow: true, pinned: "end" }, "header_HeaderClsRecipe_compound_2__12zfob1l"], [{ pinned: "end", lastInCategory: true }, "header_HeaderClsRecipe_compound_3__12zfob1m"]] });
-var HeaderFilterEditorCls = "header_HeaderFilterEditorCls__12zfob12m utilities_width_100%__16lm1iw1b utilities_height_100%__16lm1iw19";
+var HeaderFilterEditorCls = "header_HeaderFilterEditorCls__12zfob12o utilities_width_100%__16lm1iw1b utilities_height_100%__16lm1iw19";
 var HeaderFilterIconIndexCls = "header_HeaderFilterIconIndexCls__12zfob17";
-var HeaderFilterOperatorCls = "header_HeaderFilterOperatorCls__12zfob12i utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q utilities_position_relative__16lm1iw1";
-var HeaderFilterOperatorIconRecipe = createRuntimeFn({ defaultClassName: "header_HeaderFilterOperatorIconRecipe__12zfob12j utilities_position_relative__16lm1iw1 utilities_top_0__16lm1iw1c", variantClassNames: { disabled: { true: "header_HeaderFilterOperatorIconRecipe_disabled_true__12zfob12k", false: "header_HeaderFilterOperatorIconRecipe_disabled_false__12zfob12l" } }, defaultVariants: {}, compoundVariants: [] });
-var HeaderFilterRecipe = createRuntimeFn({ defaultClassName: "header_HeaderFilterRecipe__12zfob12f utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_stretch__16lm1iw1r utilities_position_relative__16lm1iw1", variantClassNames: { active: { true: "header_HeaderFilterRecipe_active_true__12zfob12g", false: "header_HeaderFilterRecipe_active_false__12zfob12h" } }, defaultVariants: {}, compoundVariants: [] });
-var HeaderGroupCls = "header_HeaderGroupCls__12zfob12e utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q";
-var HeaderMenuIconCls = createRuntimeFn({ defaultClassName: "header_HeaderMenuIconCls__12zfob11z utilities_position_relative__16lm1iw1 utilities_display_flex__16lm1iwz utilities_flexFlow_column__16lm1iw1m utilities_justifyContent_spaceAround__16lm1iw1u utilities_visibility_hidden__16lm1iw21", variantClassNames: { menuVisible: { true: "header_HeaderMenuIconCls_menuVisible_true__12zfob120" }, reserveSpaceWhenHidden: { true: "header_HeaderMenuIconCls_reserveSpaceWhenHidden_true__12zfob121", false: "header_HeaderMenuIconCls_reserveSpaceWhenHidden_false__12zfob122" } }, defaultVariants: {}, compoundVariants: [[{ menuVisible: true, reserveSpaceWhenHidden: false }, "header_HeaderMenuIconCls_compound_0__12zfob123"]] });
+var HeaderFilterOperatorCls = "header_HeaderFilterOperatorCls__12zfob12k utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q utilities_position_relative__16lm1iw1";
+var HeaderFilterOperatorIconRecipe = createRuntimeFn({ defaultClassName: "header_HeaderFilterOperatorIconRecipe__12zfob12l utilities_position_relative__16lm1iw1 utilities_top_0__16lm1iw1c", variantClassNames: { disabled: { true: "header_HeaderFilterOperatorIconRecipe_disabled_true__12zfob12m", false: "header_HeaderFilterOperatorIconRecipe_disabled_false__12zfob12n" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderFilterRecipe = createRuntimeFn({ defaultClassName: "header_HeaderFilterRecipe__12zfob12h utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_stretch__16lm1iw1r utilities_position_relative__16lm1iw1", variantClassNames: { active: { true: "header_HeaderFilterRecipe_active_true__12zfob12i", false: "header_HeaderFilterRecipe_active_false__12zfob12j" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderGroupCls = "header_HeaderGroupCls__12zfob12g utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q";
+var HeaderMenuIconCls = createRuntimeFn({ defaultClassName: "header_HeaderMenuIconCls__12zfob121 utilities_position_relative__16lm1iw1 utilities_display_flex__16lm1iwz utilities_flexFlow_column__16lm1iw1m utilities_justifyContent_spaceAround__16lm1iw1u utilities_visibility_hidden__16lm1iw21", variantClassNames: { menuVisible: { true: "header_HeaderMenuIconCls_menuVisible_true__12zfob122" }, reserveSpaceWhenHidden: { true: "header_HeaderMenuIconCls_reserveSpaceWhenHidden_true__12zfob123", false: "header_HeaderMenuIconCls_reserveSpaceWhenHidden_false__12zfob124" } }, defaultVariants: {}, compoundVariants: [[{ menuVisible: true, reserveSpaceWhenHidden: false }, "header_HeaderMenuIconCls_compound_0__12zfob125"]] });
 var HeaderScrollbarPlaceholderCls = "header_HeaderScrollbarPlaceholderCls__12zfob18 utilities_position_absolute__16lm1iw2";
 var HeaderSortIconCls = "utilities_position_relative__16lm1iw1";
 var HeaderSortIconIndexCls = "header_HeaderSortIconIndexCls__12zfob16";
 var HeaderSortIconRecipe = createRuntimeFn({ defaultClassName: "header__12zfob12", variantClassNames: { align: { start: "header_HeaderSortIconRecipe_align_start__12zfob13", center: "header_HeaderSortIconRecipe_align_center__12zfob14", end: "header_HeaderSortIconRecipe_align_end__12zfob15" } }, defaultVariants: {}, compoundVariants: [] });
-var HeaderWrapperCls = "header_HeaderWrapperCls__12zfob12d utilities_overflow_hidden__16lm1iw1x utilities_position_relative__16lm1iw1 utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o";
+var HeaderWrapperCls = "header_HeaderWrapperCls__12zfob12f utilities_overflow_hidden__16lm1iw1x utilities_position_relative__16lm1iw1 utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o";
 
 // src/components/InfiniteTable/components/icons/InfiniteTableIconClassName.ts
 var InfiniteTableIconClassName = "InfiniteTableIcon";
@@ -6735,6 +6857,7 @@ function useCellClassName(column, baseClasses, variants, extraFlags) {
     rowSelected: extraFlags.rowSelected ?? "null",
     rowActive: extraFlags.rowActive,
     dragging: extraFlags.dragging,
+    insideDisabledDraggingPage: extraFlags.insideDisabledDraggingPage,
     firstRow: extraFlags.firstRow ?? false,
     firstRowInHorizontalLayoutPage: extraFlags.firstRowInHorizontalLayoutPage ?? false,
     rowDisabled: extraFlags.rowDisabled,
@@ -6802,11 +6925,11 @@ import { useCallback as useCallback8, useState as useState7 } from "react";
 // src/components/InfiniteTable/InfiniteCls.css.ts
 var FooterCls = "utilities_position_relative__16lm1iw1";
 var InfiniteCls = "InfiniteCls_InfiniteCls__1yeub2v0 utilities_position_relative__16lm1iw1 utilities_display_flex__16lm1iwz utilities_flexFlow_column__16lm1iw1m utilities_boxSizingBorderBox__16lm1iw0";
-var InfiniteClsHasPinnedEnd = "InfiniteCls_InfiniteClsHasPinnedEnd__1yeub2vq";
-var InfiniteClsHasPinnedStart = "InfiniteCls_InfiniteClsHasPinnedStart__1yeub2vp";
-var InfiniteClsRecipe = createRuntimeFn({ defaultClassName: "InfiniteCls__1yeub2v2", variantClassNames: { focused: { true: "InfiniteCls_InfiniteClsRecipe_focused_true__1yeub2v3", false: "InfiniteCls_InfiniteClsRecipe_focused_false__1yeub2v4" }, focusedWithin: { true: "InfiniteCls_InfiniteClsRecipe_focusedWithin_true__1yeub2v5", false: "InfiniteCls_InfiniteClsRecipe_focusedWithin_false__1yeub2v6" }, hasPinnedStart: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedStart_true__1yeub2v7", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedStart_false__1yeub2v8" }, hasPinnedEnd: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedEnd_true__1yeub2v9", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedEnd_false__1yeub2va" }, hasPinnedStartOverflow: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedStartOverflow_true__1yeub2vb", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedStartOverflow_false__1yeub2vc" }, hasPinnedEndOverflow: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedEndOverflow_true__1yeub2vd", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedEndOverflow_false__1yeub2ve" } }, defaultVariants: {}, compoundVariants: [[{ focused: false, focusedWithin: false }, "InfiniteCls_InfiniteClsRecipe_compound_0__1yeub2vf"]] });
-var InfiniteClsShiftingColumns = "InfiniteCls_shiftingcols__1yeub2vn";
-var PinnedRowsContainerClsVariants = createRuntimeFn({ defaultClassName: "InfiniteCls__1yeub2vj", variantClassNames: { pinned: { start: "InfiniteCls_PinnedRowsContainerClsVariants_pinned_start__1yeub2vk", end: "InfiniteCls_PinnedRowsContainerClsVariants_pinned_end__1yeub2vl", false: "InfiniteCls_PinnedRowsContainerClsVariants_pinned_false__1yeub2vm" } }, defaultVariants: {}, compoundVariants: [] });
+var InfiniteClsHasPinnedEnd = "InfiniteCls_InfiniteClsHasPinnedEnd__1yeub2vs";
+var InfiniteClsHasPinnedStart = "InfiniteCls_InfiniteClsHasPinnedStart__1yeub2vr";
+var InfiniteClsRecipe = createRuntimeFn({ defaultClassName: "InfiniteCls__1yeub2v2", variantClassNames: { horizontalLayout: { true: "InfiniteCls_InfiniteClsRecipe_horizontalLayout_true__1yeub2v3", false: "InfiniteCls_InfiniteClsRecipe_horizontalLayout_false__1yeub2v4" }, focused: { true: "InfiniteCls_InfiniteClsRecipe_focused_true__1yeub2v5", false: "InfiniteCls_InfiniteClsRecipe_focused_false__1yeub2v6" }, focusedWithin: { true: "InfiniteCls_InfiniteClsRecipe_focusedWithin_true__1yeub2v7", false: "InfiniteCls_InfiniteClsRecipe_focusedWithin_false__1yeub2v8" }, hasPinnedStart: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedStart_true__1yeub2v9", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedStart_false__1yeub2va" }, hasPinnedEnd: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedEnd_true__1yeub2vb", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedEnd_false__1yeub2vc" }, hasPinnedStartOverflow: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedStartOverflow_true__1yeub2vd", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedStartOverflow_false__1yeub2ve" }, hasPinnedEndOverflow: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedEndOverflow_true__1yeub2vf", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedEndOverflow_false__1yeub2vg" } }, defaultVariants: {}, compoundVariants: [[{ focused: false, focusedWithin: false }, "InfiniteCls_InfiniteClsRecipe_compound_0__1yeub2vh"]] });
+var InfiniteClsShiftingColumns = "InfiniteCls_shiftingcols__1yeub2vp";
+var PinnedRowsContainerClsVariants = createRuntimeFn({ defaultClassName: "InfiniteCls__1yeub2vl", variantClassNames: { pinned: { start: "InfiniteCls_PinnedRowsContainerClsVariants_pinned_start__1yeub2vm", end: "InfiniteCls_PinnedRowsContainerClsVariants_pinned_end__1yeub2vn", false: "InfiniteCls_PinnedRowsContainerClsVariants_pinned_false__1yeub2vo" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/InfiniteTable/utils/rafFn.ts
 var rafFn = (fn) => {
@@ -6847,7 +6970,6 @@ var scrollbarWidthHorizontal = stripVar(
 );
 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);
@@ -6889,7 +7011,8 @@ function useDOMProps(initialDOMProps) {
     onSelfFocus,
     onSelfBlur,
     bodySize,
-    activeCellIndex
+    activeCellIndex,
+    wrapRowsHorizontally
   } = state;
   const {
     computedPinnedStartColumnsWidth,
@@ -6904,11 +7027,11 @@ function useDOMProps(initialDOMProps) {
   const cssVars = computedVisibleColumns.reduce(
     (vars, col) => {
       const index = col.computedVisibleIndex;
-      vars[`${columnWidthAtIndex2}-${index}`] = col.computedWidth + "px";
-      vars[`${columnOffsetAtIndex3}-${index}`] = col.computedPinned === "start" ? `calc( ${col.computedOffset}px + var(${scrollLeftCSSVar}) )` : col.computedPinned === "end" ? (
+      vars[InternalVarUtils.columnWidths.varName.get(index)] = col.computedWidth + "px";
+      vars[InternalVarUtils.columnOffsets.varName.get(index)] = col.computedPinned === "start" ? `calc( ${col.computedOffset}px + var(${scrollLeftCSSVar}) )` : col.computedPinned === "end" ? (
         // see #startcoloffsets-pinnedend
         `calc( var(${pinnedEndOffsetCSSVar}) ${prevPinnedEndCols.length ? "+" : ""} ${prevPinnedEndCols.map(
-          (c) => `var(${columnWidthAtIndex2}-${c.computedVisibleIndex})`
+          (c) => InternalVarUtils.columnWidths.get(c.computedVisibleIndex)
         ).join(" + ")} + var(${scrollLeftCSSVar}) )`
       ) : `${col.computedOffset}px`;
       const zIndexValue = getColumnZIndex(col, {
@@ -6933,12 +7056,12 @@ function useDOMProps(initialDOMProps) {
   }).join(" + ")})`;
   cssVars[publicRuntimeVars.visibleColumnsCount.name] = computedVisibleColumns.length;
   if (activeCellIndex != null) {
-    cssVars[activeCellColWidth] = `var(${getCSSVarNameForColWidth(
+    cssVars[activeCellColWidth] = InternalVarUtils.columnWidths.get(
       activeCellIndex[1]
-    )})`;
-    const defaultActiveCellColOffset = `var(${getCSSVarNameForColOffset(
+    );
+    const defaultActiveCellColOffset = InternalVarUtils.columnOffsets.get(
       activeCellIndex[1]
-    )})`;
+    );
     if (state.brain.isHorizontalLayoutBrain) {
       const pageIndex = state.brain.getPageIndexForRow(activeCellIndex[0]);
       cssVars[activeCellColOffset] = pageIndex ? `calc( ${ThemeVars.runtime.totalVisibleColumnsWidthVar} * ${pageIndex} + ${defaultActiveCellColOffset})` : defaultActiveCellColOffset;
@@ -6949,8 +7072,8 @@ function useDOMProps(initialDOMProps) {
   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(" + ") + ")";
-  cssVars[pinnedEndWidthCSSVar] = `calc( ` + computedPinnedEndColumns.map((c) => `var(${getCSSVarNameForColWidth(c.computedVisibleIndex)})`).join(" + ") + ")";
+  cssVars[pinnedStartWidthCSSVar] = `calc( ` + computedPinnedStartColumns.map((c) => InternalVarUtils.columnWidths.get(c.computedVisibleIndex)).join(" + ") + ")";
+  cssVars[pinnedEndWidthCSSVar] = `calc( ` + computedPinnedEndColumns.map((c) => InternalVarUtils.columnWidths.get(c.computedVisibleIndex)).join(" + ") + ")";
   cssVars[baseZIndexForCells] = computedVisibleColumns.length * 10;
   cssVars[pinnedEndOffsetCSSVar] = `calc( var(${bodyWidthCSSVar}) - var(${pinnedEndWidthCSSVar}) - var(${scrollbarWidthVertical}) )`;
   cssVars[bodyWidthCSSVar] = `${bodySize.width}px`;
@@ -7008,6 +7131,7 @@ function useDOMProps(initialDOMProps) {
   const className = join(
     InfiniteTableClassName,
     InfiniteCls,
+    wrapRowsHorizontally ? `${InfiniteTableClassName}--horizontal-layout` : null,
     domProps?.className,
     computedPinnedStartColumnsWidth ? `${InfiniteTableClassName}--has-pinned-start ${InfiniteClsHasPinnedStart}` : null,
     computedPinnedEndColumnsWidth ? `${InfiniteTableClassName}--has-pinned-end  ${InfiniteClsHasPinnedEnd}` : null,
@@ -7018,6 +7142,7 @@ function useDOMProps(initialDOMProps) {
     computed.computedPinnedStartOverflow ? `${InfiniteTableClassName}--has-pinned-start-overflow` : null,
     computed.computedPinnedEndOverflow ? `${InfiniteTableClassName}--has-pinned-end-overflow` : null,
     InfiniteClsRecipe({
+      horizontalLayout: !!wrapRowsHorizontally,
       hasPinnedStart: !!computedPinnedStartColumnsWidth,
       hasPinnedEnd: !!computedPinnedEndColumnsWidth,
       // hasPinnedStartOverflow: !!computed.computedPinnedStartOverflow,
@@ -7047,6 +7172,68 @@ function useDOMProps(initialDOMProps) {
 // src/components/InfiniteTable/hooks/reorderColumnsOnDrag.ts
 var import_binary_search2 = __toESM(require_binary_search());
 
+// src/components/InfiniteTable/utils/CSSCalc.ts
+function mapToContinuation(args) {
+  return args.map(
+    (arg) => arg instanceof CssContinuation ? arg : new CssContinuation(null, [arg])
+  );
+}
+var CssContinuation = class {
+  constructor(operation, operands = []) {
+    this.__operands = [];
+    this.__operation = null;
+    this.__operands = operands;
+    this.__operation = operation;
+  }
+  add(...args) {
+    return new CssContinuation("+", [this, ...args]);
+  }
+  subtract(...args) {
+    return new CssContinuation("-", [this, ...args]);
+  }
+  minus(...args) {
+    return this.subtract(...args);
+  }
+  multiply(...args) {
+    return new CssContinuation("*", [this, ...args]);
+  }
+  divide(...args) {
+    return new CssContinuation("/", [this, ...args]);
+  }
+  __get(parent) {
+    const { __operation, __operands } = this;
+    const result = __operands.map((operand) => operandToString(operand, this)).join(` ${__operation} `);
+    const skipParens = __operands.length <= 1 ? true : parent?.__operation === "+" || parent?.__operation === "-";
+    return skipParens ? result : `(${result})`;
+  }
+  done() {
+    const str = this.__get();
+    const hasParens = str.startsWith("(") && str.endsWith(")");
+    const value = hasParens ? str : `(${str})`;
+    return `calc${value}`;
+  }
+};
+function operandToString(operand, parent) {
+  if (typeof operand === "string" || typeof operand === "number") {
+    return `${operand}`;
+  }
+  if (!parent) {
+    return operand.done();
+  }
+  return operand.__get(parent);
+}
+var add = (...args) => new CssContinuation("+", mapToContinuation(args));
+var subtract = (...args) => new CssContinuation("-", mapToContinuation(args));
+var multiply = (...args) => new CssContinuation("*", mapToContinuation(args));
+var divide = (...args) => new CssContinuation("/", mapToContinuation(args));
+var CSSCalc = {
+  add,
+  subtract,
+  minus: subtract,
+  multiply,
+  divide
+};
+
 // src/components/InfiniteTable/utils/moveXatY.ts
 var moveXatY = (arr, dragIndex, dropIndex) => {
   arr = [...arr];
@@ -7147,8 +7334,6 @@ var PROXY_OFFSET = 10;
 var pinnedStartWidthCSSVar2 = stripVar(InternalVars.pinnedStartWidth);
 function reorderColumnsOnDrag(params) {
   const {
-    columnOffsetAtIndexCSSVar,
-    columnWidthAtIndexCSSVar,
     computedVisibleColumns,
     computedVisibleColumnsMap,
     computedPinnedEndColumns,
@@ -7160,7 +7345,9 @@ function reorderColumnsOnDrag(params) {
     draggableColumnsRestrictTo,
     tableRect,
     setProxyPosition,
-    api: imperativeApi
+    api: imperativeApi,
+    horizontalLayoutPageIndex,
+    pageWidth
   } = params;
   function getCurrentPinnedWidth(pinned) {
     let currentWidth = pinned === "start" ? pinnedStartInitialWidth : pinnedEndInitialWidth;
@@ -7176,27 +7363,32 @@ function reorderColumnsOnDrag(params) {
     return currentWidth;
   }
   function isColumnVisible2(b) {
-    if (b.index === dragColumnIndex) {
+    if (b.columnIndex === dragColumnIndex) {
+      return true;
+    }
+    if (horizontalLayoutPageIndex != null) {
       return true;
     }
-    const col = computedVisibleColumns[b.index];
+    const col = computedVisibleColumns[b.columnIndex];
     if (col.computedPinned) {
       return true;
     }
     const scrollLeft2 = brain.getScrollPosition().scrollLeft;
-    return col.computedOffset >= scrollLeft2 + getCurrentPinnedWidth("start") && col.computedOffset + col.computedWidth < scrollLeft2 + tableRect.width - getCurrentPinnedWidth("end");
+    const colOffset = col.computedOffset + (horizontalLayoutPageIndex != null && pageWidth != null ? pageWidth * horizontalLayoutPageIndex : 0);
+    const visible = colOffset >= scrollLeft2 + getCurrentPinnedWidth("start") && colOffset + col.computedWidth <= scrollLeft2 + tableRect.width - getCurrentPinnedWidth("end");
+    return visible;
   }
   const getBreakPoints = (columns, options) => {
     const { restrictToParentGroup, dragColumn: dragColumn2 } = options;
     let breakpoints = [];
     columns.forEach((c) => {
+      if (c.computedVisibleIndex === dragColumnIndex) {
+        return;
+      }
       const b = {
         columnId: c.id,
-        index: c.computedVisibleIndex,
-        breakpoint: (
-          // tableRect.left +
-          c.computedOffset + Math.round(c.computedWidth / 2)
-        )
+        columnIndex: c.computedVisibleIndex,
+        offsetX: c.computedOffset + Math.round(c.computedWidth / 2)
       };
       if (isColumnVisible2(b)) {
         breakpoints.push(b);
@@ -7308,7 +7500,7 @@ function reorderColumnsOnDrag(params) {
     }
   }
   function updateDropIndex(newDropIndex) {
-    if (newDropIndex === currentDropIndex) {
+    if (newDropIndex == null || newDropIndex === currentDropIndex) {
       return;
     }
     currentDropIndex = newDropIndex;
@@ -7350,23 +7542,32 @@ function reorderColumnsOnDrag(params) {
         newPosition = isDragColumn ? (
           // this is the column we're dragging to the left
           // so we place it exactly at the offset of the currentDropIndex
-          `var(${columnOffsetAtIndexCSSVar}-${currentDropIndex})`
+          InternalVarUtils.columnOffsets.get(currentDropIndex)
         ) : isOutsideCol ? (
           // this col should have the initial pos, so we're good
-          `var(${columnOffsetAtIndexCSSVar}-${colIndex})`
+          InternalVarUtils.columnOffsets.get(colIndex)
         ) : (
           // place it at the default offset + the width of the drag column
           // as these are columns situated between the dragindex and the dropindex
-          `calc( var(${columnOffsetAtIndexCSSVar}-${colIndex}) + var(${columnWidthAtIndexCSSVar}-${dragColumnIndex}) )`
+          CSSCalc.add(
+            InternalVarUtils.columnOffsets.get(colIndex),
+            InternalVarUtils.columnWidths.get(dragColumnIndex)
+          ).done()
         );
       } else {
         newPosition = isOutsideCol ? (
           // this is the default value for a column
-          `var(${columnOffsetAtIndexCSSVar}-${colIndex})`
+          InternalVarUtils.columnOffsets.get(colIndex)
         ) : isDragColumn ? (
           // this is the column we're dragging to the right
-          `calc( var(${columnOffsetAtIndexCSSVar}-${currentDropIndex - 1}) + var(${columnWidthAtIndexCSSVar}-${currentDropIndex - 1}) - var(${columnWidthAtIndexCSSVar}-${dragColumnIndex}) )`
-        ) : `calc( var(${columnOffsetAtIndexCSSVar}-${colIndex}) - var(${columnWidthAtIndexCSSVar}-${dragColumnIndex}) )`;
+          CSSCalc.add(
+            InternalVarUtils.columnOffsets.get(currentDropIndex - 1),
+            InternalVarUtils.columnWidths.get(currentDropIndex - 1)
+          ).minus(InternalVarUtils.columnWidths.get(dragColumnIndex)).done()
+        ) : CSSCalc.minus(
+          InternalVarUtils.columnOffsets.get(colIndex),
+          InternalVarUtils.columnWidths.get(dragColumnIndex)
+        ).done();
       }
       setInfiniteColumnOffsetWhileReordering(
         colIndex,
@@ -7406,20 +7607,25 @@ function reorderColumnsOnDrag(params) {
       let idx = (0, import_binary_search2.default)(
         breakpoints,
         currentPos,
-        ({ breakpoint }, value) => {
-          return breakpoint < value ? -1 : breakpoint > value ? 1 : 0;
+        ({ offsetX }, value) => {
+          return offsetX < value ? -1 : offsetX > value ? 1 : 0;
         }
       );
       if (idx < 0) {
         idx = ~idx;
       }
-      idx = breakpoints[idx] ? breakpoints[idx].index : breakpoints[breakpoints.length - 1].index + 1;
-      if (idx != null && idx !== currentDropIndex) {
-        if (dir === 1 && currentDropIndex === dragColumnIndex + 1) {
-          idx = dragColumnIndex;
+      if (!breakpoints.length) {
+        if (computedVisibleColumns.length > 1) {
+          console.error("No breakpoints available, something is wrong!");
         }
-        updateDropIndex(idx);
+        idx = 0;
+      } else {
+        idx = breakpoints[idx] ? breakpoints[idx].columnIndex : breakpoints[breakpoints.length - 1].columnIndex + 1;
+      }
+      if (idx === dragColumnIndex + 1) {
+        idx = dragColumnIndex;
       }
+      updateDropIndex(idx);
       const columnPinning = {};
       computedPinnedEndColumns.forEach((col) => {
         columnPinning[col.id] = "end";
@@ -7516,8 +7722,6 @@ function adjustColumnOrderForAllColumns(options) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
-var columnOffsetAtIndex4 = stripVar(InternalVars.columnOffsetAtIndex);
-var columnWidthAtIndex3 = stripVar(InternalVars.columnWidthAtIndex);
 var baseZIndexForCells2 = stripVar(InternalVars.baseZIndexForCells);
 var equalPinning = (pinning1, pinning2) => {
   const empty1 = !pinning1 || Object.keys(pinning1).length === 0;
@@ -7532,7 +7736,8 @@ var equalPinning = (pinning1, pinning2) => {
 };
 var useColumnPointerEvents = ({
   columnId,
-  domRef
+  domRef,
+  horizontalLayoutPageIndex
 }) => {
   const [proxyPosition, setProxyPosition] = useState7(null);
   const {
@@ -7576,13 +7781,20 @@ var useColumnPointerEvents = ({
       const tableRect = rootRef.current.getBoundingClientRect();
       const initialAvailableSize = brain.getAvailableSize();
       const dragColumnIndex = dragColumn.computedVisibleIndex;
+      const dragColumnIndexInHorizontalLayout = brain.getVirtualColIndex(
+        dragColumn.computedVisibleIndex,
+        {
+          pageIndex: horizontalLayoutPageIndex || 0
+        }
+      );
+      const pageWidth = brain.isHorizontalLayoutBrain ? brain.getPageWidth() : null;
       let initialCursor = target.style.cursor ?? "auto";
       let didDragAtLeastOnce = false;
       const dragger = reorderColumnsOnDrag({
         brain,
+        horizontalLayoutPageIndex,
+        pageWidth,
         draggableColumnsRestrictTo,
-        columnOffsetAtIndexCSSVar: columnOffsetAtIndex4,
-        columnWidthAtIndexCSSVar: columnWidthAtIndex3,
         computedPinnedEndColumns,
         computedPinnedStartColumns,
         computedUnpinnedColumns,
@@ -7600,6 +7812,8 @@ var useColumnPointerEvents = ({
         }
       });
       let reorderDragResult = null;
+      let discardAlwaysRenderedColumn;
+      let restoreRenderRange;
       function persistColumnOrder(reorderDragResult2) {
         const { columnPinning, columnOrder } = reorderDragResult2;
         if (!equalPinning(getState().columnPinning, columnPinning)) {
@@ -7628,15 +7842,37 @@ var useColumnPointerEvents = ({
         const { headerBrain, brain: brain2 } = getState();
         if (!didDragAtLeastOnce) {
           didDragAtLeastOnce = true;
-          brain2.setRenderCount({
-            horizontal: computedVisibleColumns.length,
-            vertical: void 0
-          });
-          headerBrain.setRenderCount({
-            horizontal: computedVisibleColumns.length,
-            vertical: void 0
-          });
+          const discardForBody = brain2.keepColumnRendered(
+            dragColumnIndexInHorizontalLayout
+          );
+          const discardForHeader = headerBrain.keepColumnRendered(
+            dragColumnIndexInHorizontalLayout
+          );
+          if (brain2.isHorizontalLayoutBrain) {
+            const extendBy = true;
+            const restoreBodyRange = brain2.extendRenderRange({
+              start: extendBy,
+              end: extendBy,
+              direction: "horizontal"
+            });
+            const restoreHeaderRange = headerBrain.extendRenderRange({
+              start: extendBy,
+              end: extendBy,
+              direction: "horizontal"
+            });
+            restoreRenderRange = () => {
+              restoreBodyRange();
+              restoreHeaderRange();
+            };
+          }
+          discardAlwaysRenderedColumn = () => {
+            discardForBody();
+            discardForHeader();
+          };
           actions.columnReorderDragColumnId = dragColumn.id;
+          if (horizontalLayoutPageIndex != null) {
+            actions.columnReorderInPageIndex = horizontalLayoutPageIndex;
+          }
           setInfiniteColumnZIndex(
             dragColumnIndex,
             `calc( var(${baseZIndexForCells2}) + 10000 )`,
@@ -7655,6 +7891,8 @@ var useColumnPointerEvents = ({
         brain.update({
           ...initialAvailableSize
         });
+        discardAlwaysRenderedColumn?.();
+        restoreRenderRange?.();
         computedVisibleColumns.forEach((col) => {
           clearInfiniteColumnReorderDuration(
             col.computedVisibleIndex,
@@ -7689,12 +7927,15 @@ var useColumnPointerEvents = ({
           persistColumnOrder(reorderDragResult);
         }
         actions.columnReorderDragColumnId = false;
+        if (horizontalLayoutPageIndex != null) {
+          actions.columnReorderInPageIndex = null;
+        }
       };
       target.addEventListener("pointermove", onPointerMove);
       target.addEventListener("pointerup", onPointerUp);
       target.setPointerCapture(e.pointerId);
     },
-    [columnId]
+    [columnId, horizontalLayoutPageIndex]
   );
   return {
     onPointerDown: computed.computedVisibleColumnsMap.get(columnId)?.computedDraggable ? onPointerDown : defaultPointerDown,
@@ -8004,7 +8245,7 @@ function objectValuesExcept(obj, exceptList) {
 
 // src/components/InfiniteTable/components/cell.css.ts
 var ColumnCellCls = "cell_ColumnCellCls__1eexc2a6 cell_CellCls__1eexc2a5 utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q utilities_position_absolute__16lm1iw2 utilities_willChange_transform__16lm1iw22 utilities_whiteSpace_nowrap__16lm1iw23 utilities_userSelect_none__16lm1iw17";
-var ColumnCellRecipe = createRuntimeFn({ defaultClassName: "cell_ColumnCellRecipe__1eexc2am", variantClassNames: { dragging: { false: "cell_ColumnCellRecipe_dragging_false__1eexc2an", true: "cell_ColumnCellRecipe_dragging_true__1eexc2ao" }, cellSelected: { false: "cell_ColumnCellRecipe_cellSelected_false__1eexc2ap", true: "cell_ColumnCellRecipe_cellSelected_true__1eexc2aq" }, align: { start: "cell_ColumnCellRecipe_align_start__1eexc2ar", end: "cell_ColumnCellRecipe_align_end__1eexc2as", center: "cell_ColumnCellRecipe_align_center__1eexc2at" }, verticalAlign: { start: "cell_ColumnCellRecipe_verticalAlign_start__1eexc2au", end: "cell_ColumnCellRecipe_verticalAlign_end__1eexc2av", center: "cell_ColumnCellRecipe_verticalAlign_center__1eexc2aw" }, rowActive: { false: "cell_ColumnCellRecipe_rowActive_false__1eexc2ax", true: "cell_ColumnCellRecipe_rowActive_true__1eexc2ay" }, groupRow: { false: "cell_ColumnCellRecipe_groupRow_false__1eexc2az", true: "cell_ColumnCellRecipe_groupRow_true__1eexc2a10" }, groupCell: { false: "cell_ColumnCellRecipe_groupCell_false__1eexc2a11", true: "cell_ColumnCellRecipe_groupCell_true__1eexc2a12" }, rowDisabled: { false: "cell_ColumnCellRecipe_rowDisabled_false__1eexc2a13", true: "cell_ColumnCellRecipe_rowDisabled_true__1eexc2a14" }, zebra: { false: "cell_ColumnCellRecipe_zebra_false__1eexc2a15", even: "cell_ColumnCellRecipe_zebra_even__1eexc2a16", odd: "cell_ColumnCellRecipe_zebra_odd__1eexc2a17" }, rowSelected: { true: "cell_ColumnCellRecipe_rowSelected_true__1eexc2a18", false: "cell_ColumnCellRecipe_rowSelected_false__1eexc2a19", null: "cell_ColumnCellRecipe_rowSelected_null__1eexc2a1a" }, first: { true: "cell_ColumnCellRecipe_first_true__1eexc2a1b", false: "cell_ColumnCellRecipe_first_false__1eexc2a1c" }, last: { true: "cell_ColumnCellRecipe_last_true__1eexc2a1d", false: "cell_ColumnCellRecipe_last_false__1eexc2a1e" }, groupByField: { true: "cell_ColumnCellRecipe_groupByField_true__1eexc2a1f", false: "cell_ColumnCellRecipe_groupByField_false__1eexc2a1g" }, firstInCategory: { true: "cell_ColumnCellRecipe_firstInCategory_true__1eexc2a1h", false: "cell_ColumnCellRecipe_firstInCategory_false__1eexc2a1i" }, firstRow: { true: "cell_ColumnCellRecipe_firstRow_true__1eexc2a1j", false: "cell_ColumnCellRecipe_firstRow_false__1eexc2a1k" }, firstRowInHorizontalLayoutPage: { true: "cell_ColumnCellRecipe_firstRowInHorizontalLayoutPage_true__1eexc2a1l", false: "cell_ColumnCellRecipe_firstRowInHorizontalLayoutPage_false__1eexc2a1m" }, lastInCategory: { true: "cell_ColumnCellRecipe_lastInCategory_true__1eexc2a1n", false: "cell_ColumnCellRecipe_lastInCategory_false__1eexc2a1o" }, pinned: { start: "cell_ColumnCellRecipe_pinned_start__1eexc2a1p", end: "cell_ColumnCellRecipe_pinned_end__1eexc2a1q", false: "cell_ColumnCellRecipe_pinned_false__1eexc2a1r" }, filtered: { true: "cell_ColumnCellRecipe_filtered_true__1eexc2a1s", false: "cell_ColumnCellRecipe_filtered_false__1eexc2a1t" } }, defaultVariants: {}, compoundVariants: [[{ firstRowInHorizontalLayoutPage: true, firstRow: false }, "cell_ColumnCellRecipe_compound_0__1eexc2a1u"], [{ pinned: "start", lastInCategory: true }, "cell_ColumnCellRecipe_compound_1__1eexc2a1v"], [{ pinned: "start", firstInCategory: true }, "cell_ColumnCellRecipe_compound_2__1eexc2a1w"], [{ pinned: "end", firstInCategory: true }, "cell_ColumnCellRecipe_compound_3__1eexc2a1x"], [{ pinned: "end", lastInCategory: true }, "cell_ColumnCellRecipe_compound_4__1eexc2a1y"], [{ align: "center", groupCell: false }, "cell_ColumnCellRecipe_compound_5__1eexc2a1z"], [{ rowDisabled: true, zebra: "odd" }, "cell_ColumnCellRecipe_compound_6__1eexc2a20"]] });
+var ColumnCellRecipe = createRuntimeFn({ defaultClassName: "cell_ColumnCellRecipe__1eexc2am", variantClassNames: { dragging: { false: "cell_ColumnCellRecipe_dragging_false__1eexc2an", true: "cell_ColumnCellRecipe_dragging_true__1eexc2ao" }, insideDisabledDraggingPage: { true: "cell_ColumnCellRecipe_insideDisabledDraggingPage_true__1eexc2ap", false: "cell_ColumnCellRecipe_insideDisabledDraggingPage_false__1eexc2aq" }, cellSelected: { false: "cell_ColumnCellRecipe_cellSelected_false__1eexc2ar", true: "cell_ColumnCellRecipe_cellSelected_true__1eexc2as" }, align: { start: "cell_ColumnCellRecipe_align_start__1eexc2at", end: "cell_ColumnCellRecipe_align_end__1eexc2au", center: "cell_ColumnCellRecipe_align_center__1eexc2av" }, verticalAlign: { start: "cell_ColumnCellRecipe_verticalAlign_start__1eexc2aw", end: "cell_ColumnCellRecipe_verticalAlign_end__1eexc2ax", center: "cell_ColumnCellRecipe_verticalAlign_center__1eexc2ay" }, rowActive: { false: "cell_ColumnCellRecipe_rowActive_false__1eexc2az", true: "cell_ColumnCellRecipe_rowActive_true__1eexc2a10" }, groupRow: { false: "cell_ColumnCellRecipe_groupRow_false__1eexc2a11", true: "cell_ColumnCellRecipe_groupRow_true__1eexc2a12" }, groupCell: { false: "cell_ColumnCellRecipe_groupCell_false__1eexc2a13", true: "cell_ColumnCellRecipe_groupCell_true__1eexc2a14" }, rowDisabled: { false: "cell_ColumnCellRecipe_rowDisabled_false__1eexc2a15", true: "cell_ColumnCellRecipe_rowDisabled_true__1eexc2a16" }, zebra: { false: "cell_ColumnCellRecipe_zebra_false__1eexc2a17", even: "cell_ColumnCellRecipe_zebra_even__1eexc2a18", odd: "cell_ColumnCellRecipe_zebra_odd__1eexc2a19" }, rowSelected: { true: "cell_ColumnCellRecipe_rowSelected_true__1eexc2a1a", false: "cell_ColumnCellRecipe_rowSelected_false__1eexc2a1b", null: "cell_ColumnCellRecipe_rowSelected_null__1eexc2a1c" }, first: { true: "cell_ColumnCellRecipe_first_true__1eexc2a1d", false: "cell_ColumnCellRecipe_first_false__1eexc2a1e" }, last: { true: "cell_ColumnCellRecipe_last_true__1eexc2a1f", false: "cell_ColumnCellRecipe_last_false__1eexc2a1g" }, groupByField: { true: "cell_ColumnCellRecipe_groupByField_true__1eexc2a1h", false: "cell_ColumnCellRecipe_groupByField_false__1eexc2a1i" }, firstInCategory: { true: "cell_ColumnCellRecipe_firstInCategory_true__1eexc2a1j", false: "cell_ColumnCellRecipe_firstInCategory_false__1eexc2a1k" }, firstRow: { true: "cell_ColumnCellRecipe_firstRow_true__1eexc2a1l", false: "cell_ColumnCellRecipe_firstRow_false__1eexc2a1m" }, firstRowInHorizontalLayoutPage: { true: "cell_ColumnCellRecipe_firstRowInHorizontalLayoutPage_true__1eexc2a1n", false: "cell_ColumnCellRecipe_firstRowInHorizontalLayoutPage_false__1eexc2a1o" }, lastInCategory: { true: "cell_ColumnCellRecipe_lastInCategory_true__1eexc2a1p", false: "cell_ColumnCellRecipe_lastInCategory_false__1eexc2a1q" }, pinned: { start: "cell_ColumnCellRecipe_pinned_start__1eexc2a1r", end: "cell_ColumnCellRecipe_pinned_end__1eexc2a1s", false: "cell_ColumnCellRecipe_pinned_false__1eexc2a1t" }, filtered: { true: "cell_ColumnCellRecipe_filtered_true__1eexc2a1u", false: "cell_ColumnCellRecipe_filtered_false__1eexc2a1v" } }, defaultVariants: {}, compoundVariants: [[{ firstRowInHorizontalLayoutPage: true, firstRow: false }, "cell_ColumnCellRecipe_compound_0__1eexc2a1w"], [{ pinned: "start", lastInCategory: true }, "cell_ColumnCellRecipe_compound_1__1eexc2a1x"], [{ pinned: "start", firstInCategory: true }, "cell_ColumnCellRecipe_compound_2__1eexc2a1y"], [{ pinned: "end", firstInCategory: true }, "cell_ColumnCellRecipe_compound_3__1eexc2a1z"], [{ pinned: "end", lastInCategory: true }, "cell_ColumnCellRecipe_compound_4__1eexc2a20"], [{ align: "center", groupCell: false }, "cell_ColumnCellRecipe_compound_5__1eexc2a21"], [{ rowDisabled: true, zebra: "odd" }, "cell_ColumnCellRecipe_compound_6__1eexc2a22"]] });
 var ColumnCellSelectionIndicatorRecipe = createRuntimeFn({ defaultClassName: "cell_ColumnCellSelectionIndicatorRecipe__1eexc2ad", variantClassNames: { right: { true: "cell_ColumnCellSelectionIndicatorRecipe_right_true__1eexc2ae", false: "cell_ColumnCellSelectionIndicatorRecipe_right_false__1eexc2af" }, left: { true: "cell_ColumnCellSelectionIndicatorRecipe_left_true__1eexc2ag", false: "cell_ColumnCellSelectionIndicatorRecipe_left_false__1eexc2ah" }, top: { true: "cell_ColumnCellSelectionIndicatorRecipe_top_true__1eexc2ai", false: "cell_ColumnCellSelectionIndicatorRecipe_top_false__1eexc2aj" }, bottom: { true: "cell_ColumnCellSelectionIndicatorRecipe_bottom_true__1eexc2ak", false: "cell_ColumnCellSelectionIndicatorRecipe_bottom_false__1eexc2al" } }, defaultVariants: {}, compoundVariants: [] });
 var FlashingColumnCellRecipe = createRuntimeFn({ defaultClassName: "cell_FlashingColumnCellRecipe__1eexc2a9", variantClassNames: { direction: { up: "cell_FlashingColumnCellRecipe_direction_up__1eexc2aa", down: "cell_FlashingColumnCellRecipe_direction_down__1eexc2ab", neutral: "cell_FlashingColumnCellRecipe_direction_neutral__1eexc2ac" } }, defaultVariants: {}, compoundVariants: [] });
 var SelectionCheckboxCls = "cell_SelectionCheckboxCls__1eexc2a7";
@@ -8397,7 +8638,7 @@ import * as React34 from "react";
 var { rootClassName: rootClassName5 } = internalProps;
 var InfiniteTableCellClassName = `${rootClassName5}Cell`;
 var InfiniteTableCellContentClassName = `${rootClassName5}Cell_content`;
-var columnWidthAtIndex4 = stripVar(InternalVars.columnWidthAtIndex);
+var columnWidthAtIndex3 = stripVar(InternalVars.columnWidthAtIndex);
 var columnReorderEffectDurationAtIndex2 = stripVar(
   InternalVars.columnReorderEffectDurationAtIndex
 );
@@ -8422,7 +8663,7 @@ function InfiniteTableCellFn(props) {
   } = props;
   const children = renderChildren();
   const style2 = {
-    width: `var(${columnWidthAtIndex4}-${column.computedVisibleIndex})`,
+    width: `var(${columnWidthAtIndex3}-${column.computedVisibleIndex})`,
     transition: `transform var(${columnReorderEffectDurationAtIndex2}-${column.computedVisibleIndex}, 0s)`,
     ...domProps.style
   };
@@ -8612,7 +8853,7 @@ function InfiniteTableColumnCellFn(props) {
     api: dataSourceApi,
     componentActions: dataSourceActions
   } = useDataSourceContextValue();
-  const { activeRowIndex, keyboardNavigation } = getState();
+  const { activeRowIndex, keyboardNavigation, columnReorderInPageIndex } = getState();
   const rowActive = rowIndex === activeRowIndex && keyboardNavigation === "row";
   const renderingContext = {
     getState,
@@ -8936,6 +9177,7 @@ function InfiniteTableColumnCellFn(props) {
     right: rightSelectionBorder,
     bottom: bottomSelectionBorder
   } : null;
+  const insideDisabledDraggingPage = columnReorderInPageIndex != null ? horizontalLayoutPageIndex !== columnReorderInPageIndex : false;
   const afterChildren = editor;
   const theChildren = renderChildren();
   const cellProps = {
@@ -8960,6 +9202,7 @@ function InfiniteTableColumnCellFn(props) {
         ColumnCellRecipe,
         {
           dragging: false,
+          insideDisabledDraggingPage,
           zebra,
           align: align2,
           verticalAlign,
@@ -9223,7 +9466,7 @@ function getColumnResizer(colIndex, {
   const column = columns[colIndex];
   return {
     resize(diff) {
-      setInfiniteColumnWidth(
+      InternalVarUtils.columnWidths.set(
         colIndex,
         column.computedWidth + diff,
         domRef.current
@@ -9234,7 +9477,7 @@ function getColumnResizer(colIndex, {
         if (!nextColumn) {
           return;
         }
-        setInfiniteColumnWidth(
+        InternalVarUtils.columnWidths.set(
           nextColIndex,
           nextColumn.computedWidth - diff,
           domRef.current
@@ -9242,7 +9485,7 @@ function getColumnResizer(colIndex, {
         if (nextColumn.computedPinned === "start") {
           addToInfiniteColumnOffset(nextColumn, diff, domRef.current);
         } else {
-          setInfiniteColumnOffset(
+          InternalVarUtils.columnOffsets.set(
             nextColIndex,
             nextColumn.computedOffset + diff,
             domRef.current
@@ -9263,7 +9506,11 @@ function getColumnResizer(colIndex, {
           if (col.computedPinned === "end") {
             continue;
           }
-          setInfiniteColumnOffset(i, col.computedOffset + diff, domRef.current);
+          InternalVarUtils.columnOffsets.set(
+            i,
+            col.computedOffset + diff,
+            domRef.current
+          );
         }
         return;
       }
@@ -9272,7 +9519,11 @@ function getColumnResizer(colIndex, {
         if (col.computedPinned) {
           continue;
         }
-        setInfiniteColumnOffset(i, col.computedOffset + diff, domRef.current);
+        InternalVarUtils.columnOffsets.set(
+          i,
+          col.computedOffset + diff,
+          domRef.current
+        );
       }
     }
   };
@@ -9300,12 +9551,12 @@ function getColumnGroupResizer(colIndexes, config) {
         const colIndex = colIndexes[i];
         const column = columns[colIndex];
         const newWidth = column.computedWidth + diff;
-        setInfiniteColumnWidth(colIndex, newWidth, node);
+        InternalVarUtils.columnWidths.set(colIndex, newWidth, node);
         if (column.computedPinned === "end") {
           return;
         }
         if (offset) {
-          setInfiniteColumnOffset(colIndex, offset, node);
+          InternalVarUtils.columnOffsets.set(colIndex, offset, node);
         }
         offset += newWidth;
       });
@@ -9317,7 +9568,11 @@ function getColumnGroupResizer(colIndexes, config) {
         if (col.computedPinned === "end") {
           continue;
         }
-        setInfiniteColumnOffset(i, col.computedOffset + diffSum, node);
+        InternalVarUtils.columnOffsets.set(
+          i,
+          col.computedOffset + diffSum,
+          node
+        );
       }
     }
   };
@@ -9357,12 +9612,14 @@ function ResizeHandleFn(props) {
     const target = e.target;
     if (brain.isHorizontalLayoutBrain) {
       const restoreBodyRange = brain.extendRenderRange({
-        left: true,
-        right: true
+        start: true,
+        end: true,
+        direction: "horizontal"
       });
       const restoreHeaderRange = headerBrain.extendRenderRange({
-        left: true,
-        right: true
+        start: true,
+        end: true,
+        direction: "horizontal"
       });
       restoreRenderRange = () => {
         restoreBodyRange();
@@ -9572,7 +9829,8 @@ function InfiniteTableHeaderCell(props) {
       portalDOMRef,
       columnHeaderHeight,
       columnReorderDragColumnId,
-      columnMenuVisibleForColumnId
+      columnMenuVisibleForColumnId,
+      columnReorderInPageIndex
     },
     getDataSourceMasterContext
   } = useInfiniteTable();
@@ -9583,7 +9841,9 @@ function InfiniteTableHeaderCell(props) {
     componentState: { filterDelay, filterTypes }
   } = useDataSourceContextValue();
   const { allRowsSelected, someRowsSelected, selectionMode } = useDataSourceState();
+  const horizontalLayoutPageIndex = props.horizontalLayoutPageIndex;
   const dragging = columnReorderDragColumnId === column.id;
+  const insideDisabledDraggingPage = columnReorderInPageIndex != null ? horizontalLayoutPageIndex !== columnReorderInPageIndex : false;
   const { onResize, height, width, headerOptions, columnsMap } = props;
   const sortInfo = column.computedSortInfo;
   const header = column.header;
@@ -9648,7 +9908,7 @@ function InfiniteTableHeaderCell(props) {
   const MenuIconCmp = column.components?.MenuIcon || components2?.MenuIcon || MenuIcon;
   const menuIcon = /* @__PURE__ */ React42.createElement(MenuIconCmp, { ...menuIconProps });
   const initialRenderParam = {
-    horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
+    horizontalLayoutPageIndex,
     dragging,
     domRef: ref,
     insideColumnMenu: false,
@@ -9812,7 +10072,8 @@ function InfiniteTableHeaderCell(props) {
   const headerClassName = typeof column.headerClassName === "function" ? column.headerClassName(renderParam) : column.headerClassName;
   const { onPointerDown, proxyPosition } = useColumnPointerEvents({
     columnId: column.id,
-    domRef
+    domRef,
+    horizontalLayoutPageIndex
   });
   let draggingProxy = null;
   if (dragging && proxyPosition) {
@@ -9856,7 +10117,7 @@ function InfiniteTableHeaderCell(props) {
   const FilterEditor = operator?.components?.FilterEditor || filterType?.components?.FilterEditor || column.components?.FilterEditor || StringFilterEditor;
   const FilterOperatorSwitch = filterType?.components?.FilterOperatorSwitch || column.components?.FilterOperatorSwitch;
   const resizeHandle = useColumnResizeHandle(column, {
-    horizontalLayoutPageIndex: props.horizontalLayoutPageIndex
+    horizontalLayoutPageIndex
   });
   const zIndex2 = `var(${columnZIndexAtIndex5}-${column.computedVisibleIndex})`;
   style2.zIndex = zIndex2;
@@ -9896,6 +10157,7 @@ function InfiniteTableHeaderCell(props) {
           HeaderCellRecipe,
           {
             dragging,
+            insideDisabledDraggingPage,
             align: align2,
             verticalAlign,
             rowSelected: false,
@@ -9916,7 +10178,7 @@ function InfiniteTableHeaderCell(props) {
       afterChildren: /* @__PURE__ */ React42.createElement(React42.Fragment, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React42.createElement(
         InfiniteTableColumnHeaderFilter,
         {
-          horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
+          horizontalLayoutPageIndex,
           filterEditor: FilterEditor,
           filterOperatorSwitch: FilterOperatorSwitch ?? InfiniteTableFilterOperatorSwitch,
           operator,
@@ -10234,7 +10496,7 @@ function useColumnGroupResizeHandle(groupColumns, config) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
 var TableHeaderGroupClassName = `${rootClassName2}HeaderGroup`;
-var columnWidthAtIndex5 = stripVar(InternalVars.columnWidthAtIndex);
+var columnWidthAtIndex4 = stripVar(InternalVars.columnWidthAtIndex);
 var columnZIndexAtIndex6 = stripVar(InternalVars.columnZIndexAtIndex);
 function InfiniteTableHeaderGroup(props) {
   const { columnGroup, height, columns, bodyBrain, columnGroupsMaxDepth } = props;
@@ -10253,8 +10515,8 @@ function InfiniteTableHeaderGroup(props) {
   });
   const firstColumn = columns[0];
   const width = columns.length > 1 ? `calc( ` + columns.map(
-    (col) => `var(${columnWidthAtIndex5}-${col.computedVisibleIndex})`
-  ).join(" + ") + " )" : `var(${columnWidthAtIndex5}-${firstColumn.computedVisibleIndex})`;
+    (col) => `var(${columnWidthAtIndex4}-${col.computedVisibleIndex})`
+  ).join(" + ") + " )" : `var(${columnWidthAtIndex4}-${firstColumn.computedVisibleIndex})`;
   const zIndex2 = `calc(var(${columnZIndexAtIndex6}-${firstColumn.computedVisibleIndex}) + ${columnGroupsMaxDepth - columnGroup.depth})`;
   let style2 = typeof userStyle === "function" ? userStyle({
     columnGroup,
@@ -11186,6 +11448,14 @@ function getEnhancedGroupData(options, deepMapValue) {
   };
   return enhancedGroupData;
 }
+function toDuplicateRow(parent, indexInAll, currentPage) {
+  return {
+    ...parent,
+    id: `duplicate_row_on_page_${currentPage}_for__${parent.id}`,
+    indexInAll,
+    duplicateOf: parent.id
+  };
+}
 function completeReducers(reducers, reducerResults, items) {
   if (reducers) {
     for (const key in reducers)
@@ -11202,6 +11472,8 @@ function enhancedFlatten(param) {
   const {
     lazyLoad,
     groupResult,
+    rowsPerPage,
+    repeatWrappedGroupRows,
     withRowInfo,
     toPrimaryKey,
     groupRowsState,
@@ -11267,6 +11539,17 @@ function enhancedFlatten(param) {
         include = false;
       }
       if (include) {
+        if (repeatWrappedGroupRows && rowsPerPage != null && rowsPerPage > 0) {
+          const indexInAll = enhancedGroupData.indexInAll;
+          const currentParents = enhancedGroupData.parents;
+          if (currentParents.length > 0 && indexInAll % rowsPerPage === 0) {
+            const currentPage = indexInAll / rowsPerPage;
+            currentParents.forEach((parent2, i) => {
+              result.push(toDuplicateRow(parent2, indexInAll + i, currentPage));
+            });
+            enhancedGroupData.indexInAll += currentParents.length;
+          }
+        }
         result.push(enhancedGroupData);
         groupRowsIndexes.push(result.length - 1);
       }
@@ -11286,13 +11569,26 @@ function enhancedFlatten(param) {
       if (continueWithChildren) {
         if (!next) {
           if (!pivot) {
-            const startIndex = result.length;
+            let startIndex = result.length;
             if (!collapsed) {
               result.length += items.length;
             }
+            let extraArtificialGroupRows = 0;
             for (let index = 0, len = items.length; index < len; index++) {
               const item = items[index];
-              const indexInAll = startIndex + index;
+              if (!collapsed && repeatWrappedGroupRows && rowsPerPage != null && rowsPerPage > 0) {
+                const currentInsertIndex = startIndex + index + extraArtificialGroupRows;
+                if (currentInsertIndex % rowsPerPage === 0) {
+                  const currentPage = currentInsertIndex / rowsPerPage;
+                  result.length += parents.length;
+                  parents.forEach((parent2) => {
+                    const i = startIndex + index + extraArtificialGroupRows;
+                    result[i] = toDuplicateRow(parent2, i, currentPage);
+                    extraArtificialGroupRows++;
+                  });
+                }
+              }
+              const indexInAll = startIndex + index + extraArtificialGroupRows;
               const itemId = item ? toPrimaryKey(item, indexInAll) : `${groupKeys}-${index}`;
               const rowInfo = {
                 id: itemId,
@@ -11335,7 +11631,7 @@ function enhancedFlatten(param) {
                 parent2.deepRowInfoArray.push(rowInfo);
               });
               if (!collapsed) {
-                result[startIndex + index] = rowInfo;
+                result[startIndex + index + extraArtificialGroupRows] = rowInfo;
               }
             }
           }
@@ -14103,7 +14399,9 @@ function concludeReducer(params) {
     "aggregationReducers",
     "pivotTotalColumnPosition",
     "pivotGrandTotalColumnPosition",
-    "showSeparatePivotColumnForSingleAggregation"
+    "showSeparatePivotColumnForSingleAggregation",
+    "repeatWrappedGroupRows",
+    "rowsPerPage"
   ]);
   const rowInfoReducersChanged = haveDepsChanged(previousState, state, [
     "rowInfoReducers"
@@ -14222,6 +14520,8 @@ function concludeReducer(params) {
         isRowSelected,
         rowSelectionState,
         withRowInfo,
+        repeatWrappedGroupRows: state.repeatWrappedGroupRows && state.rowsPerPage != null,
+        rowsPerPage: state.rowsPerPage,
         groupRowsState: state.groupRowsState,
         generateGroupRows: state.generateGroupRows
       });
@@ -15010,6 +15310,7 @@ function initSetupState() {
   return {
     // TODO cleanup indexer on unmount
     indexer: new Indexer(),
+    repeatWrappedGroupRows: false,
     destroyedRef: {
       current: false
     },
@@ -15024,6 +15325,7 @@ function initSetupState() {
       timestamp: 0,
       mutations: void 0
     },
+    rowsPerPage: null,
     lazyLoadCacheOfLoadedBatches: new DeepMap(),
     dataParams: void 0,
     onCleanup: buildSubscriptionCallback(),
@@ -17005,6 +17307,17 @@ var InfiniteTableApiImpl = class {
   setColumnVisibility(columnVisibility) {
     this.actions.columnVisibility = columnVisibility;
   }
+  get scrollContainer() {
+    return this.getState().scrollerDOMRef.current;
+  }
+  get scrollLeftMax() {
+    const scrollLeftMax = this.getState().brain.scrollLeftMax;
+    return scrollLeftMax;
+  }
+  get scrollTopMax() {
+    const scrollTopMax = this.getState().brain.scrollTopMax;
+    return scrollTopMax;
+  }
   get scrollLeft() {
     const state = this.getState();
     return state.brain.getScrollPosition().scrollLeft;
@@ -18020,6 +18333,28 @@ var HorizontalLayoutMatrixBrain = class extends MatrixBrain {
       });
     }
   }
+  computeDirectionalRenderCount(direction, itemSize, count, theRenderSize) {
+    if (direction === "vertical" || typeof itemSize === "number") {
+      return super.computeDirectionalRenderCount(
+        direction,
+        itemSize,
+        count,
+        theRenderSize
+      );
+    }
+    let renderCount = 0;
+    let size = theRenderSize.width;
+    const pagesInView = Math.floor(size / this.pageWidth);
+    renderCount += pagesInView * this.initialCols;
+    const remainingSize = size - pagesInView * this.pageWidth;
+    const sizes = [];
+    for (let i = 0; i < this.initialCols; i++) {
+      sizes.push(this.getItemSize(i, direction));
+    }
+    renderCount += getGreatestCountVisibleInSize(remainingSize, sizes);
+    renderCount = Math.min(count, renderCount);
+    return renderCount;
+  }
   getRowIndexInPage(rowIndex) {
     return this.rowsPerPage ? rowIndex % this.rowsPerPage : rowIndex;
   }
@@ -18166,6 +18501,9 @@ var HorizontalLayoutMatrixBrain = class extends MatrixBrain {
     }
     this._totalPageCount = value;
   }
+  getPageWidth() {
+    return this.pageWidth;
+  }
   doUpdateRenderCount(which = ALL_DIRECTIONS) {
     const rowHeight = this.getInitialRowHeight();
     let pageWidth = 0;
@@ -18318,6 +18656,7 @@ function initSetupState2({
       scrollLeft: 0
     },
     columnReorderDragColumnId: false,
+    columnReorderInPageIndex: null,
     ready: false,
     focused: false,
     focusedWithin: false,
@@ -18326,7 +18665,8 @@ function initSetupState2({
     pinnedStartScrollListener: new ScrollListener(),
     pinnedEndScrollListener: new ScrollListener(),
     columnsWhenInlineGroupRenderStrategy: void 0,
-    editingCell: null
+    editingCell: null,
+    forceBodyRerenderTimestamp: 0
   };
 }
 var forwardProps4 = (_setupState) => {
@@ -18371,6 +18711,7 @@ var forwardProps4 = (_setupState) => {
     rowProps: 1,
     rowClassName: 1,
     cellClassName: 1,
+    repeatWrappedGroupRows: 1,
     pinnedStartMaxWidth: 1,
     pinnedEndMaxWidth: 1,
     pivotColumn: 1,
@@ -19742,7 +20083,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "5.0.0-canary.8"
+      version: "5.0.0"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -23404,17 +23745,17 @@ function HScrollSyncContent(props) {
 }
 
 // src/components/InfiniteTable/hooks/useVisibleColumnSizes.ts
-var columnWidthAtIndex6 = stripVar(InternalVars.columnWidthAtIndex);
-var columnOffsetAtIndex5 = stripVar(InternalVars.columnOffsetAtIndex);
+var columnWidthAtIndex5 = stripVar(InternalVars.columnWidthAtIndex);
+var columnOffsetAtIndex3 = stripVar(InternalVars.columnOffsetAtIndex);
 function useVisibleColumnSizes() {
   const context = useInfiniteTable();
   return context.computed.computedVisibleColumns.map((column) => {
     return {
       id: column.id,
       width: column.computedWidth,
-      cssVarForWidth: `var(${columnWidthAtIndex6}-${column.computedVisibleIndex})`,
+      cssVarForWidth: `var(${columnWidthAtIndex5}-${column.computedVisibleIndex})`,
       offset: column.computedOffset,
-      cssVarForOffset: `var(${columnOffsetAtIndex5}-${column.computedVisibleIndex})`,
+      cssVarForOffset: `var(${columnOffsetAtIndex3}-${column.computedVisibleIndex})`,
       pinned: column.computedPinned
     };
   });
@@ -23445,6 +23786,52 @@ function useToggleWrapRowsHorizontally() {
   }, [oldWrapRowsHorizontally, wrapRowsHorizontally]);
 }
 
+// src/components/InfiniteTable/hooks/useHorizontalLayout.ts
+import { useEffect as useEffect38 } from "react";
+function useHorizontalLayout() {
+  const { getState, actions, dataSourceActions, getDataSourceState } = useInfiniteTable();
+  const { groupBy } = getDataSourceState();
+  const { brain, wrapRowsHorizontally, repeatWrappedGroupRows } = getState();
+  useEffect38(() => {
+    if (!wrapRowsHorizontally) {
+      return;
+    }
+    const onVerticalRenderRangeChange = () => {
+      const {
+        rowsPerPage: currentRowsPerPage,
+        repeatWrappedGroupRows: currentRepeatWrappedGroupRows
+      } = getDataSourceState();
+      let changes = false;
+      const rowsPerPage = brain.rowsPerPage;
+      const newRowsPerPage = groupBy && groupBy.length > 0 ? rowsPerPage : null;
+      if (currentRowsPerPage != newRowsPerPage) {
+        dataSourceActions.rowsPerPage = newRowsPerPage;
+        changes = true;
+      }
+      if (currentRepeatWrappedGroupRows != !!repeatWrappedGroupRows) {
+        dataSourceActions.repeatWrappedGroupRows = !!repeatWrappedGroupRows;
+        changes = true;
+      }
+      return changes;
+    };
+    onVerticalRenderRangeChange();
+    let timeoutId;
+    const off = brain.onVerticalRenderRangeChange(() => {
+      if (onVerticalRenderRangeChange()) {
+        timeoutId = setTimeout(() => {
+          actions.forceBodyRerenderTimestamp = Date.now();
+        });
+      }
+    });
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      off();
+    };
+  }, [brain, wrapRowsHorizontally, groupBy, repeatWrappedGroupRows]);
+}
+
 // src/components/InfiniteTable/index.tsx
 var InfiniteTableClassName = internalProps.rootClassName;
 var HOVERED_CLASS_NAMES = [RowHoverCls, "InfiniteColumnCell--hovered"];
@@ -23576,6 +23963,7 @@ function InfiniteTableBody() {
   return /* @__PURE__ */ React68.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React68.createElement(
     HeadlessTable,
     {
+      forceRerenderTimestamp: componentState.forceBodyRerenderTimestamp,
       debugId,
       tabIndex: tabIndex ?? 0,
       autoFocus: autoFocus ?? void 0,
@@ -23655,6 +24043,7 @@ var InfiniteTableComponent = React68.memo(
       dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
     }, [scrollStopDelay]);
     useAutoSizeColumns();
+    useHorizontalLayout();
     useEditingCallbackProps();
     const { menuPortal } = useColumnMenu();
     const { menuPortal: cellContextMenuPortal } = useCellContextMenu();
@@ -23800,6 +24189,7 @@ var InfiniteTable = function(props) {
     /* @__PURE__ */ React68.createElement(
       InfiniteTableRoot,
       {
+        repeatWrappedGroupRows: !!props.wrapRowsHorizontally,
         rowHeight: DEFAULT_ROW_HEIGHT,
         columnHeaderHeight: DEFAULT_COLUMN_HEADER_HEIGHT,
         ...props
@@ -24056,7 +24446,7 @@ var keyboardShortcuts = {
 };
 
 // src/components/hooks/useInterceptedMap.ts
-import { useEffect as useEffect39 } from "react";
+import { useEffect as useEffect40 } from "react";
 function interceptMap(map2, fns) {
   const { set, delete: deleteKey, clear } = map2;
   if (fns.set) {
@@ -24218,7 +24608,7 @@ var WeakFixedSizeSet = _WeakFixedSizeSet;
 WeakFixedSizeSet.DEFAULT_SIZE = 10;
 
 // src/components/hooks/useEffectWhenSameDeps.ts
-import { useEffect as useEffect40, useRef as useRef31 } from "react";
+import { useEffect as useEffect41, useRef as useRef31 } from "react";
 var isSameDeps = (deps, prevDeps) => {
   return deps.every((dep, index) => dep === prevDeps[index]);
 };
@@ -24232,7 +24622,7 @@ var useEffectWhenSameDeps = (callback, deps) => {
   effectDepsRef.current = effectDeps;
   const callbackRef = useRef31(callback);
   callbackRef.current = callback;
-  useEffect40(() => {
+  useEffect41(() => {
     if (isInitialRef.current) {
       isInitialRef.current = false;
       return;
@@ -24242,7 +24632,7 @@ var useEffectWhenSameDeps = (callback, deps) => {
 };
 
 // src/components/hooks/useEffectWhen.ts
-import { useEffect as useEffect41, useRef as useRef32 } from "react";
+import { useEffect as useEffect42, useRef as useRef32 } from "react";
 var isSameDeps2 = (deps, prevDeps, compare) => {
   return deps.every((dep, index) => {
     if (compare) {
@@ -24272,7 +24662,7 @@ var useEffectWhen = (callback, options) => {
   if (sameRespected && differentRespected) {
     isInitialRef.current = false;
   }
-  useEffect41(() => {
+  useEffect42(() => {
     if (isInitialRef.current) {
       return;
     }