@infinite-table/infinite-react 0.2.10 → 0.2.11

package/index.js

@@ -54,6 +54,40 @@ var __toModule = (module2) => {
   return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
 };
 
+// node_modules/binary-search/index.js
+var require_binary_search = __commonJS({
+  "node_modules/binary-search/index.js"(exports, module2) {
+    module2.exports = function(haystack, needle, comparator, low, high) {
+      var mid, cmp;
+      if (low === void 0)
+        low = 0;
+      else {
+        low = low | 0;
+        if (low < 0 || low >= haystack.length)
+          throw new RangeError("invalid lower bound");
+      }
+      if (high === void 0)
+        high = haystack.length - 1;
+      else {
+        high = high | 0;
+        if (high < low || high >= haystack.length)
+          throw new RangeError("invalid upper bound");
+      }
+      while (low <= high) {
+        mid = low + (high - low >>> 1);
+        cmp = +comparator(haystack[mid], needle, mid, haystack);
+        if (cmp < 0)
+          low = mid + 1;
+        else if (cmp > 0)
+          high = mid - 1;
+        else
+          return mid;
+      }
+      return ~low;
+    };
+  }
+});
+
 // node_modules/ms/index.js
 var require_ms = __commonJS({
   "node_modules/ms/index.js"(exports, module2) {
@@ -587,40 +621,6 @@ var require_vanilla_extract_recipes_createRuntimeFn_cjs = __commonJS({
   }
 });
 
-// node_modules/binary-search/index.js
-var require_binary_search = __commonJS({
-  "node_modules/binary-search/index.js"(exports, module2) {
-    module2.exports = function(haystack, needle, comparator, low, high) {
-      var mid, cmp;
-      if (low === void 0)
-        low = 0;
-      else {
-        low = low | 0;
-        if (low < 0 || low >= haystack.length)
-          throw new RangeError("invalid lower bound");
-      }
-      if (high === void 0)
-        high = haystack.length - 1;
-      else {
-        high = high | 0;
-        if (high < low || high >= haystack.length)
-          throw new RangeError("invalid upper bound");
-      }
-      while (low <= high) {
-        mid = low + (high - low >>> 1);
-        cmp = +comparator(haystack[mid], needle, mid, haystack);
-        if (cmp < 0)
-          low = mid + 1;
-        else if (cmp > 0)
-          high = mid - 1;
-        else
-          return mid;
-      }
-      return ~low;
-    };
-  }
-});
-
 // src/index.tsx
 __export(exports, {
   DataSource: () => DataSource,
@@ -685,15 +685,124 @@ function buildSubscriptionCallback() {
   return updater;
 }
 
-// src/components/VirtualBrain/ScrollListener.ts
+// src/components/VirtualBrain/index.ts
+var import_binary_search = __toModule(require_binary_search());
+
+// src/utils/debug.ts
+var debug = require_browser();
+var debugTable = debug(`InfiniteTable`);
+var dbg = (channelName) => {
+  const result = debugTable.extend(channelName);
+  result.log = console.log.bind(console);
+  return result;
+};
+var err = (channelName) => {
+  const result = debugTable.extend(`${channelName}:error`);
+  result.log = console.error.bind(console);
+  return result;
+};
+var emptyLogFn = () => emptyLogFn;
+emptyLogFn.extend = () => emptyLogFn;
+var Logger = class {
+  constructor(channelName) {
+    this.debug = emptyLogFn;
+    this.error = emptyLogFn;
+    if (true) {
+      this.debug = dbg(channelName);
+      this.error = err(channelName);
+    }
+  }
+};
+
+// src/components/VirtualBrain/index.ts
 var initialScrollPosition = {
   scrollLeft: 0,
   scrollTop: 0
 };
-var ScrollListener = class {
-  constructor() {
+var raf = typeof window !== "undefined" ? requestAnimationFrame : (fn) => setTimeout(fn, 0);
+var ItemIndexBag = Object.seal({ itemIndex: 0 });
+var SORT_ASC = (a, b) => a - b;
+var VirtualBrain = class extends Logger {
+  constructor(options) {
+    super(`VirtualBrain:${options.mainAxis}`);
     this.scrollPosition = initialScrollPosition;
+    this.scrollPositionOnMainAxis = 0;
+    this.destroyed = false;
+    this.totalSize = 0;
     this.onScrollFns = [];
+    this.onTotalSizeChangeFns = [];
+    this.onRenderCountChangeFns = [];
+    this.onRenderRangeChangeFns = [];
+    this.onDestroyFns = [];
+    this.renderCount = 0;
+    this.renderRange = {
+      renderStartIndex: -1,
+      renderEndIndex: -1
+    };
+    this.availableSize = { width: 0, height: 0 };
+    this.setAvailableSize = (size) => {
+      this.availableSize = size;
+      if (true) {
+        this.debug("New available size %d", size[this.options.mainAxis === "vertical" ? "height" : "width"]);
+      }
+      this.updateRenderCount();
+    };
+    this.computeRenderCount = ({
+      itemSize,
+      count,
+      size
+    }) => {
+      let renderCount = 0;
+      if (typeof itemSize === "function") {
+        const sizes = [];
+        for (let i = 0; i < count; i++) {
+          sizes.push(this.getItemSize(i));
+        }
+        sizes.sort(SORT_ASC);
+        let sum = 0;
+        for (let i = 0; i < count; i++) {
+          sum += sizes[i];
+          renderCount++;
+          if (sum > size) {
+            break;
+          }
+        }
+        renderCount += 1;
+      } else {
+        renderCount = Math.ceil(size / itemSize) + 1;
+      }
+      renderCount = Math.min(count, renderCount);
+      return renderCount;
+    };
+    this.setRenderCount = (renderCount) => {
+      if (renderCount === this.renderCount) {
+        this.notifyTotalSizeChange();
+        return;
+      }
+      if (true) {
+        this.debug("set renderCount to %d", renderCount);
+      }
+      this.renderCount = renderCount;
+      this.updateRenderRange();
+      this.notifyRenderCountChange();
+      this.notifyTotalSizeChange();
+    };
+    this.getRenderCount = () => {
+      var _a;
+      return (_a = this.renderCount) != null ? _a : 0;
+    };
+    this.setScrollPosition = (scrollPosition) => {
+      this.scrollPosition = scrollPosition;
+      const oldScrollPosOnMainAxis = this.scrollPositionOnMainAxis;
+      this.scrollPositionOnMainAxis = this.scrollPosition[this.options.mainAxis === "vertical" ? "scrollTop" : "scrollLeft"];
+      if (this.scrollPositionOnMainAxis !== oldScrollPosOnMainAxis) {
+        this.updateRenderRange();
+      }
+      this.notifyScrollChange();
+    };
+    this.getRenderRange = () => {
+      return this.renderRange;
+    };
     this.getScrollPosition = () => {
       return this.scrollPosition;
     };
@@ -703,937 +812,1292 @@ var ScrollListener = class {
         this.onScrollFns = this.onScrollFns.filter((f) => f !== fn);
       };
     };
-    this.setScrollPosition = (scrollPosition) => {
-      this.scrollPosition = scrollPosition;
-      this.notifyScrollChange();
+    this.onTotalSizeChange = (fn) => {
+      this.onTotalSizeChangeFns.push(fn);
+      return () => {
+        this.onTotalSizeChangeFns = this.onTotalSizeChangeFns.filter((f) => f !== fn);
+      };
     };
-    this.destroy = () => {
-      this.onScrollFns = [];
+    this.onRenderCountChange = (fn) => {
+      this.onRenderCountChangeFns.push(fn);
+      return () => {
+        this.onRenderCountChangeFns = this.onRenderCountChangeFns.filter((f) => f !== fn);
+      };
     };
-  }
-  notifyScrollChange() {
-    const { scrollPosition } = this;
-    const fns = this.onScrollFns;
-    for (let i = 0, len = fns.length; i < len; i++) {
-      fns[i](scrollPosition);
-    }
-  }
-};
-
-// src/components/InfiniteTable/utils/toMap.ts
-function toMap(mapOrObject, weakMapCache) {
-  if (!mapOrObject) {
-    return new Map();
-  }
-  if (mapOrObject instanceof Map) {
-    return mapOrObject;
-  }
-  if (weakMapCache && weakMapCache.has(mapOrObject)) {
-    return weakMapCache.get(mapOrObject);
-  }
-  const result = new Map(Object.entries(mapOrObject));
-  if (weakMapCache) {
-    weakMapCache.set(mapOrObject, result);
-  }
-  return result;
-}
-
-// src/components/InfiniteTable/state/computeColumnGroupsDepths.ts
-function computeColumnGroupsDepths(columnGroups) {
-  const map2 = new Map();
-  columnGroups.forEach((colGroup, colGroupId) => {
-    let parentGroupId = colGroup.columnGroup;
-    let depth = 0;
-    while (parentGroupId) {
-      const parent = columnGroups.get(parentGroupId);
-      if (!parent) {
-        if (true) {
-          console.warn(`Cannot find column group ${parentGroupId}`);
-        }
-        break;
-      }
-      depth++;
-      parentGroupId = parent.columnGroup;
-    }
-    map2.set(colGroupId, depth);
-  });
-  return map2;
-}
-
-// src/components/InfiniteTable/state/getInitialState.ts
-function initSetupState() {
-  const columnsGeneratedForGrouping = new Map();
-  return {
-    propsCache: new Map([]),
-    columnShifts: null,
-    domRef: (0, import_react2.createRef)(),
-    scrollerDOMRef: (0, import_react2.createRef)(),
-    portalDOMRef: (0, import_react2.createRef)(),
-    onRowHeightCSSVarChange: buildSubscriptionCallback(),
-    onHeaderHeightCSSVarChange: buildSubscriptionCallback(),
-    bodySize: {
-      width: 0,
-      height: 0
-    },
-    scrollPosition: {
-      scrollTop: 0,
-      scrollLeft: 0
-    },
-    focused: false,
-    focusedWithin: false,
-    columnsWhenGrouping: columnsGeneratedForGrouping,
-    draggingColumnId: null,
-    pinnedStartScrollListener: new ScrollListener(),
-    pinnedEndScrollListener: new ScrollListener(),
-    columnsWhenInlineGroupRenderStrategy: void 0
-  };
-}
-var forwardProps = (setupState) => {
-  return {
-    scrollTopId: 1,
-    components: 1,
-    loadingText: 1,
-    pivotColumns: 1,
-    groupColumn: 1,
-    onReady: 1,
-    domProps: 1,
-    focusedClassName: 1,
-    focusedWithinClassName: 1,
-    focusedStyle: 1,
-    focusedWithinStyle: 1,
-    onSelfFocus: 1,
-    onFocusWithin: 1,
-    onSelfBlur: 1,
-    onBlurWithin: 1,
-    onScrollToTop: 1,
-    onScrollToBottom: 1,
-    onScrollStop: 1,
-    scrollToBottomOffset: 1,
-    rowStyle: 1,
-    rowProps: 1,
-    rowClassName: 1,
-    pinnedStartMaxWidth: 1,
-    pinnedEndMaxWidth: 1,
-    pivotColumn: 1,
-    pivotColumnGroups: 1,
-    onScrollbarsChange: 1,
-    scrollStopDelay: (scrollStopDelay) => scrollStopDelay != null ? scrollStopDelay : 100,
-    viewportReservedWidth: (viewportReservedWidth) => viewportReservedWidth != null ? viewportReservedWidth : 0,
-    activeIndex: (activeIndex) => activeIndex != null ? activeIndex : 0,
-    columnMinWidth: (columnMinWidth) => columnMinWidth != null ? columnMinWidth : 30,
-    columnMaxWidth: (columnMaxWidth) => columnMaxWidth != null ? columnMaxWidth : 2e3,
-    columnDefaultWidth: (columnDefaultWidth) => columnDefaultWidth != null ? columnDefaultWidth : 200,
-    draggableColumns: (draggableColumns) => draggableColumns != null ? draggableColumns : true,
-    showSeparatePivotColumnForSingleAggregation: (showSeparatePivotColumnForSingleAggregation) => showSeparatePivotColumnForSingleAggregation != null ? showSeparatePivotColumnForSingleAggregation : false,
-    sortable: (sortable) => sortable != null ? sortable : true,
-    hideEmptyGroupColumns: (hideEmptyGroupColumns) => hideEmptyGroupColumns != null ? hideEmptyGroupColumns : false,
-    pivotTotalColumnPosition: (pivotTotalColumnPosition) => pivotTotalColumnPosition != null ? pivotTotalColumnPosition : "end",
-    licenseKey: (licenseKey) => licenseKey || "",
-    columnOrder: (columnOrder) => columnOrder != null ? columnOrder : true,
-    header: (header) => header != null ? header : true,
-    showZebraRows: (showZebraRows) => showZebraRows != null ? showZebraRows : true,
-    showHoverRows: (showHoverRows) => showHoverRows != null ? showHoverRows : true,
-    virtualizeColumns: (virtualizeColumns) => virtualizeColumns != null ? virtualizeColumns : true,
-    rowHeight: (rowHeight) => typeof rowHeight === "number" ? rowHeight : 0,
-    headerHeight: (headerHeight) => typeof headerHeight === "number" ? headerHeight : 0,
-    columns: (columns) => toMap(columns, setupState.propsCache.get("columns")),
-    columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : {},
-    columnPinning: (columnPinning) => toMap(columnPinning, setupState.propsCache.get("columnPinning")),
-    columnSizing: (columnSizing) => columnSizing || {},
-    columnTypes: (columnTypes) => columnTypes || {},
-    collapsedColumnGroups: (collapsedColumnGroups) => collapsedColumnGroups != null ? collapsedColumnGroups : new Map(),
-    columnGroups: (columnGroups) => toMap(columnGroups, setupState.propsCache.get("columnGroups"))
-  };
-};
-function getGroupRenderStrategy(options) {
-  const { groupBy, groupColumn, groupRenderStrategy } = options;
-  if (groupRenderStrategy) {
-    return groupRenderStrategy;
-  }
-  if (groupColumn != null && typeof groupColumn === "object") {
-    return "single-column";
-  }
-  const columnsInGroupBy = groupBy.filter((g) => g.column);
-  if (columnsInGroupBy.length) {
-    return "multi-column";
-  }
-  return "multi-column";
-}
-var mapPropsToState = (params) => {
-  const { props, state, oldState, parentState } = params;
-  const { virtualizeColumns, header } = state;
-  const computedColumnGroups = state.pivotColumnGroups || state.columnGroups;
-  const virtualizeHeader = header && virtualizeColumns && (!computedColumnGroups || (computedColumnGroups == null ? void 0 : computedColumnGroups.size) === 0);
-  const columnGroupsDepthsMap = state.columnGroups && state.columnGroups != (oldState == null ? void 0 : oldState.columnGroups) || state.pivotColumnGroups && state.pivotColumnGroups != (oldState == null ? void 0 : oldState.pivotColumnGroups) ? computeColumnGroupsDepths(computedColumnGroups) : state.columnGroupsDepthsMap;
-  const groupBy = parentState == null ? void 0 : parentState.groupBy;
-  const groupRenderStrategy = getGroupRenderStrategy({
-    groupRenderStrategy: props.groupRenderStrategy,
-    groupBy,
-    groupColumn: props.groupColumn
-  });
-  const computedColumns = state.columnsWhenGrouping || state.columnsWhenInlineGroupRenderStrategy || state.columns;
-  return {
-    controlledColumnVisibility: !!props.columnVisibility,
-    groupRenderStrategy,
-    groupBy,
-    computedColumns,
-    virtualizeHeader,
-    columnGroupsDepthsMap,
-    columnGroupsMaxDepth: columnGroupsDepthsMap != state.columnGroupsDepthsMap ? Math.max(...columnGroupsDepthsMap.values(), 0) : state.columnGroupsMaxDepth,
-    computedColumnGroups,
-    rowHeightCSSVar: typeof props.rowHeight === "string" ? props.rowHeight : "",
-    headerHeightCSSVar: typeof props.headerHeight === "string" ? props.headerHeight || "--ITableHeader__height" : ""
-  };
-};
-
-// src/components/ResizeObserver/index.tsx
-var React = __toModule(require("react"));
-var import_react3 = __toModule(require("react"));
-var setupResizeObserver = (node, callback) => {
-  const RO = window.ResizeObserver;
-  const observer = new RO((entries) => {
-    var _a;
-    const entry = entries[0];
-    let { width, height } = entry.contentRect;
-    if ((_a = entry.borderBoxSize) == null ? void 0 : _a[0]) {
-      height = entry.borderBoxSize[0].blockSize;
-      width = entry.borderBoxSize[0].inlineSize;
-    } else {
-      const rect = node.getBoundingClientRect();
-      height = rect.height;
-      width = rect.width;
-    }
-    callback({ width, height });
-  });
-  observer.observe(node);
-  return () => {
-    observer.disconnect();
-  };
-};
-var useResizeObserver = (ref, callback, config = { earlyAttach: false }) => {
-  const sizeRef = (0, import_react3.useRef)({
-    width: 0,
-    height: 0
-  });
-  const effectFn = (callback2) => {
-    let disconnect;
-    if (ref.current) {
-      disconnect = setupResizeObserver(ref.current, (size) => {
-        size = {
-          width: Math.round(size.width),
-          height: Math.round(size.height)
-        };
-        const prevSize = sizeRef.current;
-        if (prevSize.width !== size.width || prevSize.height !== size.height) {
-          sizeRef.current = size;
-          callback2(size);
-        }
+    this.onRenderRangeChange = (fn) => {
+      this.onRenderRangeChangeFns.push(fn);
+      return () => {
+        this.onRenderRangeChangeFns = this.onRenderRangeChangeFns.filter((f) => f !== fn);
+      };
+    };
+    this.onDestroy = (fn) => {
+      this.onDestroyFns.push(fn);
+      return () => {
+        this.onDestroyFns = this.onDestroyFns.filter((f) => f !== fn);
+      };
+    };
+    this.update = (newCount, newItemSize, newItemSpan) => {
+      const { itemSize, count, itemSpan } = this.options;
+      const countChange = count !== newCount;
+      const itemSizeChange = itemSize !== newItemSize;
+      const itemSpanChange = itemSpan !== newItemSpan;
+      if (!countChange && !itemSizeChange && !itemSpanChange) {
+        return;
+      }
+      this.options.count = newCount;
+      this.options.itemSize = newItemSize;
+      this.options.itemSpan = newItemSpan;
+      const size = this.availableSize[this.options.mainAxis === "vertical" ? "height" : "width"];
+      const newRenderCount = this.computeRenderCount({
+        itemSize: newItemSize,
+        count: newCount,
+        size
       });
-    }
-    return () => {
-      if (disconnect) {
-        disconnect();
+      if (!itemSizeChange && !itemSpanChange && countChange && newCount > count) {
+        const currentRenderCount = this.getRenderCount();
+        if (currentRenderCount > newRenderCount) {
+          return;
+        }
       }
+      if (true) {
+        if (itemSizeChange && countChange) {
+          this.debug(`Reset brain: reason itemSize changed and count changed (old ${count}, new ${newCount})`, {
+            oldItemSize: itemSize,
+            newItemSize
+          });
+        } else if (itemSizeChange) {
+          this.debug(`Reset brain: reason itemSize changed`, {
+            oldItemSize: itemSize,
+            newItemSize
+          });
+        } else if (countChange) {
+          this.debug(`Reset brain: reason count changed (old ${count}, new ${newCount})`);
+        }
+      }
+      this.reset();
+      this.updateRenderCount(newRenderCount);
     };
-  };
-  (0, import_react3.useEffect)(() => {
-    if (!config.earlyAttach) {
-      return effectFn(callback);
-    }
-    return () => {
-    };
-  }, [ref.current, callback, config.earlyAttach]);
-  (0, import_react3.useLayoutEffect)(() => {
-    if (config.earlyAttach) {
-      return effectFn(callback);
-    }
-    return () => {
+    this.reset = () => {
+      this.itemSpanParent = [];
+      this.itemSpanValue = [];
+      this.itemSizeCache = [];
+      this.itemOffsetCache = [0];
+      this.renderCount = -1;
+      this.totalSize = 0;
     };
-  }, [ref.current, callback, config.earlyAttach]);
-};
-var ReactResizeObserver = (props) => {
-  const style = (0, import_react3.useMemo)(() => ({
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    boxSizing: "border-box"
-  }), []);
-  const { notifyOnMount, earlyAttach } = props;
-  const firstTime = (0, import_react3.useRef)(true);
-  const ref = (0, import_react3.useRef)(null);
-  const onResize = (0, import_react3.useCallback)((size) => {
-    if (firstTime.current && !notifyOnMount) {
-      firstTime.current = false;
-      return;
-    }
-    props.onResize(size);
-  }, [props.onResize]);
-  useResizeObserver(ref, onResize, { earlyAttach: earlyAttach || false });
-  return /* @__PURE__ */ React.createElement("div", {
-    ref,
-    style
-  });
-};
-ReactResizeObserver.defaultProps = {
-  notifyOnMount: true,
-  earlyAttach: false
-};
-
-// src/components/InfiniteTable/hooks/useInfiniteTable.ts
-var import_react4 = __toModule(require("react"));
-var useInfiniteTable = () => {
-  const TableContext2 = getInfiniteTableContext();
-  return (0, import_react4.useContext)(TableContext2);
-};
-
-// src/components/InfiniteTable/hooks/useComputedVisibleColumns.ts
-var import_react8 = __toModule(require("react"));
-
-// src/components/flexbox/index.tsx
-var computeFlex = (params) => {
-  const {
-    availableSize,
-    items,
-    minSize: defaultMinSize,
-    maxSize: defaultMaxSize
-  } = params;
-  if (availableSize < 0) {
-    throw "The provided availableSize cannot be negative!";
-  }
-  let totalFixedSize = 0;
-  let totalFlex = 0;
-  let totalFlexCount = 0;
-  items.forEach((item, i) => {
-    var _a, _b, _c, _d, _e, _f;
-    let maxSize = (_b = (_a = item.maxSize) != null ? _a : defaultMaxSize) != null ? _b : void 0;
-    let minSize = (_d = (_c = item.minSize) != null ? _c : defaultMinSize) != null ? _d : void 0;
-    if (item.size != null) {
-      if (maxSize != null && item.size > maxSize) {
-        item.size = maxSize;
-      }
-      if (minSize != null && item.size < minSize) {
-        item.size = minSize;
-      }
-    }
-    if (item.size == null && item.flex == null) {
-      throw `Items must specify either a size or a flex property. Item at index ${i} doesn't have either of those.`;
-    }
-    if (item.flex != null) {
-      totalFlexCount += 1;
-    }
-    totalFlex += (_e = item.flex) != null ? _e : 0;
-    totalFixedSize += (_f = item.size) != null ? _f : 0;
-  });
-  let availableSizeForFlex = Math.max(availableSize - totalFixedSize, 0);
-  let sizePerFlex = availableSizeForFlex / totalFlex;
-  let maxxedFlexItems = {};
-  let minnedFlexItems = {};
-  let constrainedCount = 0;
-  items.forEach((item, index) => {
-    var _a, _b, _c, _d;
-    if (item.flex != null) {
-      const approxFlexSize = sizePerFlex * item.flex;
-      let maxSize = (_b = (_a = item.maxSize) != null ? _a : defaultMaxSize) != null ? _b : void 0;
-      let minSize = (_d = (_c = item.minSize) != null ? _c : defaultMinSize) != null ? _d : void 0;
-      let constrained = false;
-      let substractSize = 0;
-      if (maxSize != null && approxFlexSize > maxSize) {
-        maxxedFlexItems[index] = true;
-        constrained = true;
-        substractSize = maxSize;
+    this.computeItemSpanUpTo = (itemIndex) => {
+      const { count, itemSpan } = this.options;
+      if (!itemSpan) {
+        return;
       }
-      if (minSize != null && approxFlexSize < minSize) {
-        minnedFlexItems[index] = true;
-        constrained = true;
-        substractSize = minSize;
+      const cache = this.itemSpanParent;
+      const spanResultArr = this.itemSpanValue;
+      if (cache[itemIndex] === void 0) {
+        let i = cache.length;
+        let lastIndex = Math.min(itemIndex, count - 1);
+        for (; i <= lastIndex; i++) {
+          if (cache[i] === void 0) {
+            ItemIndexBag.itemIndex = i;
+            let spanValue = itemSpan(ItemIndexBag);
+            if (spanValue < 1) {
+              this.debug("itemSpan cannot be less than 1 - got %d for index %d", spanValue, i);
+            }
+            cache[i] = i;
+            spanResultArr[i] = spanValue;
+            let spannedItemIndex = i;
+            while (spanValue > 1) {
+              spannedItemIndex += 1;
+              cache[spannedItemIndex] = i;
+              spanResultArr[spannedItemIndex] = 0;
+              spanValue -= 1;
+            }
+          }
+        }
       }
-      if (constrained) {
-        constrainedCount += 1;
-        totalFlexCount -= 1;
-        totalFlex -= item.flex;
-        availableSizeForFlex -= substractSize;
+    };
+    this.computeCacheFor = (itemIndex) => {
+      if (typeof this.options.itemSize !== "function") {
+        return;
       }
-    }
-  });
-  if (constrainedCount) {
-    sizePerFlex = availableSizeForFlex / totalFlex;
-  }
-  let flexSizes = [];
-  let currentFlexCount = 0;
-  let remainingSizeForFlex = availableSizeForFlex;
-  let remainingFlex = totalFlex;
-  let totalTakenSize = 0;
-  let flexSizeSum = 0;
-  const computedSizes = [];
-  const resultItems = items.map((item, index) => {
-    var _a, _b, _c, _d, _e;
-    const sizedItem = __spreadValues({}, item);
-    let maxSize = (_b = (_a = item.maxSize) != null ? _a : defaultMaxSize) != null ? _b : void 0;
-    let minSize = (_d = (_c = item.minSize) != null ? _c : defaultMinSize) != null ? _d : void 0;
-    let flexSize = 0;
-    const maxxed = maxxedFlexItems[index];
-    const minned = minnedFlexItems[index];
-    const constrained = maxxed || minned;
-    let computedSize = (_e = item.size) != null ? _e : 0;
-    if (item.flex != null) {
-      if (constrained) {
-        if (minned) {
-          flexSize = minSize;
+      const itemSize = this.options.itemSize(itemIndex);
+      this.itemSizeCache[itemIndex] = itemSize;
+      if (itemIndex > 0) {
+        const prevOffset = this.itemOffsetCache[itemIndex - 1];
+        const prevSize = this.itemSizeCache[itemIndex - 1];
+        if (prevOffset == null) {
+          console.error(`Offset was not available for item ${itemIndex - 1}`);
         }
-        if (maxxed) {
-          flexSize = maxSize;
+        if (prevSize == null) {
+          console.error(`Size was not available for item ${itemIndex - 1}`);
         }
-      } else {
-        currentFlexCount += 1;
-        const constrain = (size) => {
-          if (maxSize != null && size > maxSize) {
-            size = maxSize;
-          }
-          if (minSize != null && size < minSize) {
-            size = minSize;
-          }
-          return size;
-        };
-        if (currentFlexCount === totalFlexCount) {
-          flexSize = constrain(remainingSizeForFlex);
-        } else {
-          flexSize = constrain(Math.round(item.flex * sizePerFlex));
-          flexSizeSum += flexSize;
-          remainingSizeForFlex = availableSizeForFlex - flexSizeSum;
-          remainingFlex -= item.flex;
-          sizePerFlex = remainingSizeForFlex / remainingFlex;
+        const offset = prevOffset + prevSize;
+        this.itemOffsetCache[itemIndex] = offset;
+      }
+    };
+    this.getItemSpan = (itemIndex) => {
+      if (!this.options.itemSpan) {
+        return 1;
+      }
+      if (this.itemSpanValue[itemIndex] === void 0) {
+        this.computeItemSpanUpTo(itemIndex);
+      }
+      return this.itemSpanValue[itemIndex] || 1;
+    };
+    this.getItemSpanParent = (itemIndex) => {
+      if (!this.options.itemSpan) {
+        return itemIndex;
+      }
+      if (this.itemSpanParent[itemIndex] === void 0) {
+        this.computeItemSpanUpTo(itemIndex);
+      }
+      return this.itemSpanParent[itemIndex];
+    };
+    this.getItemSizeWithSpan = (itemIndex, itemSpan) => {
+      let itemSize = this.getItemSize(itemIndex);
+      while (itemSpan > 1) {
+        itemIndex += 1;
+        itemSpan -= 1;
+        itemSize += this.getItemSize(itemIndex);
+      }
+      return itemSize;
+    };
+    this.getItemSize = (itemIndex) => {
+      const { itemSize, count } = this.options;
+      if (typeof itemSize !== "function") {
+        return itemSize;
+      }
+      let cachedSize = this.getItemSizeCacheFor(itemIndex);
+      if (cachedSize === void 0) {
+        let i = this.itemSizeCache.length;
+        let lastIndex = Math.min(itemIndex, count - 1);
+        for (; i <= lastIndex; i++) {
+          this.computeCacheFor(i);
         }
+        cachedSize = this.getItemSizeCacheFor(itemIndex);
       }
-      computedSize = flexSize;
-      sizedItem.flexSize = flexSize;
-    }
-    flexSizes.push(flexSize);
-    computedSizes.push(computedSize);
-    sizedItem.computedSize = computedSize;
-    totalTakenSize += computedSize;
-    return sizedItem;
-  });
-  return {
-    items: resultItems,
-    flexSizes,
-    computedSizes,
-    remainingSize: Math.round(availableSize - totalTakenSize)
-  };
-};
-
-// src/components/InfiniteTable/utils/adjustColumnOrderForPinning.ts
-var order = ["start", void 0, "end"];
-var adjustColumnOrderForPinning = (columnOrder, columnPinning) => {
-  if (columnPinning.size > 0) {
-    columnOrder.sort((colId1, colId2) => {
-      let p1 = columnPinning.get(colId1);
-      let p2 = columnPinning.get(colId2);
-      if (p1 === true) {
-        p1 = "start";
+      return cachedSize;
+    };
+    this.getTotalSize = () => {
+      const { count, itemSize } = this.options;
+      if (typeof itemSize !== "function") {
+        return itemSize * count;
       }
-      if (p2 === true) {
-        p2 = "start";
+      if (this.totalSize !== 0) {
+        return this.totalSize;
       }
-      if (p1 == p2) {
-        return 0;
+      const lastItemSize = this.getItemSize(count - 1);
+      const lastItemOffset = this.itemOffsetCache[count - 1];
+      return this.totalSize = lastItemSize + lastItemOffset;
+    };
+    this.getItemAt = (scrollPos) => {
+      const { itemSize, count } = this.options;
+      if (typeof itemSize !== "function") {
+        return Math.min(Math.max(0, Math.floor(scrollPos / itemSize)), count - 1);
       }
-      return order.indexOf(p1) - order.indexOf(p2);
-    });
+      let lastOffsetIndex = this.itemOffsetCache.length - 1;
+      let lastSizeIndex = this.itemSizeCache.length - 1;
+      let lastOffset = this.itemOffsetCache[lastOffsetIndex];
+      let _prev;
+      while (lastOffset < scrollPos) {
+        if (lastOffsetIndex >= count) {
+          return count - 1;
+        }
+        lastSizeIndex += 1;
+        this.computeCacheFor(lastSizeIndex);
+        _prev = lastOffset;
+        lastOffset = this.itemOffsetCache[lastSizeIndex];
+        if (_prev === lastOffset && _prev != 0) {
+          return count - 1;
+        }
+      }
+      const searchResult = (0, import_binary_search.default)(this.itemOffsetCache, scrollPos, SORT_ASC);
+      if (searchResult >= 0) {
+        return searchResult;
+      }
+      return ~searchResult - 1;
+    };
+    this.getItemOffsetFor = (itemIndex) => {
+      if (typeof this.options.itemSize !== "function") {
+        return itemIndex * this.options.itemSize;
+      }
+      let result = this.itemOffsetCache[itemIndex];
+      if (result == null) {
+        let lastSizeIndex = this.itemSizeCache.length - 1;
+        while (lastSizeIndex < itemIndex) {
+          lastSizeIndex += 1;
+          this.computeCacheFor(lastSizeIndex);
+        }
+        result = this.itemOffsetCache[itemIndex];
+      }
+      return result;
+    };
+    this.destroy = () => {
+      if (this.destroyed) {
+        return;
+      }
+      this.notifyDestroy();
+      this.reset();
+      this.destroyed = true;
+      this.onDestroyFns = [];
+      this.onScrollFns = [];
+      this.onTotalSizeChangeFns = [];
+      this.onRenderCountChangeFns = [];
+      this.onRenderRangeChangeFns = [];
+    };
+    this.options = options;
+    this.reset();
+    this.renderCount = 0;
+    this.debug(`Init ${options.mainAxis}`);
+  }
+  getOptions() {
+    return this.options;
+  }
+  updateRenderCount(renderCount) {
+    const { itemSize, mainAxis, count } = this.options;
+    const size = this.availableSize[mainAxis === "vertical" ? "height" : "width"];
+    if (!size) {
+      this.setRenderCount(0);
+      return;
+    }
+    this.setRenderCount(renderCount != null ? renderCount : this.computeRenderCount({ itemSize, count, size }));
+  }
+  updateRenderRange() {
+    this.setRenderRange(this.computeRenderRange());
+  }
+  getRenderStartIndex() {
+    return this.renderRange.renderStartIndex;
+  }
+  notifyScrollChange() {
+    const { scrollPosition } = this;
+    const fns = this.onScrollFns;
+    for (let i = 0, len = fns.length; i < len; i++) {
+      fns[i](scrollPosition);
+    }
+  }
+  notifyDestroy() {
+    const fns = this.onDestroyFns;
+    for (let i = 0, len = fns.length; i < len; i++) {
+      fns[i]();
+    }
+  }
+  notifyTotalSizeChange() {
+    const totalSize = this.getTotalSize();
+    const fns = this.onTotalSizeChangeFns;
+    for (let i = 0, len = fns.length; i < len; i++) {
+      raf(() => {
+        fns[i](totalSize);
+      });
+    }
+  }
+  notifyRenderCountChange() {
+    const { renderCount } = this;
+    const fns = this.onRenderCountChangeFns;
+    for (let i = 0, len = fns.length; i < len; i++) {
+      raf(() => {
+        fns[i](renderCount);
+      });
+    }
+  }
+  notifyRenderRangeChange() {
+    const { renderRange } = this;
+    const fns = this.onRenderRangeChangeFns;
+    for (let i = 0, len = fns.length; i < len; i++) {
+      raf(() => {
+        fns[i](renderRange);
+      });
+    }
+  }
+  setRenderRange(renderRange) {
+    const { renderStartIndex, renderEndIndex } = this.renderRange;
+    if (renderEndIndex !== renderRange.renderEndIndex || renderStartIndex !== renderRange.renderStartIndex) {
+      this.renderRange = renderRange;
+      if (true) {
+        this.debug("Set renderRange to %d-%d", renderRange.renderStartIndex, renderRange.renderEndIndex);
+      }
+      this.notifyRenderRangeChange();
+    }
+  }
+  computeRenderRange() {
+    const count = this.getOptions().count;
+    let renderCount = this.getRenderCount();
+    if (renderCount === 0) {
+      return {
+        renderStartIndex: -1,
+        renderEndIndex: -1
+      };
+    }
+    let renderStartIndex = this.getItemAt(this.scrollPositionOnMainAxis);
+    let renderEndIndex = renderStartIndex + this.renderCount - 1;
+    if (renderEndIndex >= count) {
+      renderEndIndex = count - 1;
+      renderStartIndex = renderEndIndex - renderCount + 1;
+    }
+    if (this.options.itemSpan) {
+      this.computeItemSpanUpTo(renderStartIndex);
+      while (this.itemSpanParent[renderStartIndex] != renderStartIndex) {
+        renderStartIndex--;
+      }
+    }
+    return {
+      renderStartIndex,
+      renderEndIndex
+    };
+  }
+  getItemSizeCacheFor(itemIndex) {
+    return this.itemSizeCache[itemIndex];
   }
-  return columnOrder;
 };
 
-// src/utils/debug.ts
-var debug = require_browser();
-var debugTable = debug(`InfiniteTable`);
-var dbg = (channelName) => {
-  const result = debugTable.extend(channelName);
-  result.log = console.log.bind(console);
-  return result;
-};
-var err = (channelName) => {
-  const result = debugTable.extend(`${channelName}:error`);
-  result.log = console.error.bind(console);
-  return result;
+// src/components/VirtualBrain/ScrollListener.ts
+var initialScrollPosition2 = {
+  scrollLeft: 0,
+  scrollTop: 0
 };
-var emptyLogFn = () => emptyLogFn;
-emptyLogFn.extend = () => emptyLogFn;
-var Logger = class {
-  constructor(channelName) {
-    this.debug = emptyLogFn;
-    this.error = emptyLogFn;
-    if (true) {
-      this.debug = dbg(channelName);
-      this.error = err(channelName);
+var ScrollListener = class {
+  constructor() {
+    this.scrollPosition = initialScrollPosition2;
+    this.onScrollFns = [];
+    this.getScrollPosition = () => {
+      return this.scrollPosition;
+    };
+    this.onScroll = (fn) => {
+      this.onScrollFns.push(fn);
+      return () => {
+        this.onScrollFns = this.onScrollFns.filter((f) => f !== fn);
+      };
+    };
+    this.setScrollPosition = (scrollPosition) => {
+      this.scrollPosition = scrollPosition;
+      this.notifyScrollChange();
+    };
+    this.destroy = () => {
+      this.onScrollFns = [];
+    };
+  }
+  notifyScrollChange() {
+    const { scrollPosition } = this;
+    const fns = this.onScrollFns;
+    for (let i = 0, len = fns.length; i < len; i++) {
+      fns[i](scrollPosition);
     }
   }
 };
 
-// src/utils/getGlobal.ts
-function getGlobal() {
-  return globalThis;
-}
-
-// src/components/utils/getScrollbarWidth.ts
-var scrollbarWidth;
-function getScrollbarWidth() {
-  var _a, _b;
-  if (scrollbarWidth != null) {
-    return scrollbarWidth;
-  }
-  const doc = (_a = getGlobal().document) != null ? _a : null;
-  if (!doc) {
-    return 0;
+// src/components/InfiniteTable/utils/toMap.ts
+function toMap(mapOrObject, weakMapCache) {
+  if (!mapOrObject) {
+    return new Map();
   }
-  const outer = doc.createElement("div");
-  outer.style.visibility = "hidden";
-  outer.style.overflow = "scroll";
-  doc.body.appendChild(outer);
-  const inner = doc.createElement("div");
-  outer.appendChild(inner);
-  scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
-  (_b = outer.parentNode) == null ? void 0 : _b.removeChild(outer);
-  return scrollbarWidth;
-}
-
-// src/components/InfiniteTable/utils/getColumnComputedType.ts
-var emptyType = Object.freeze({});
-function getColumnComputedType(column, columnTypes) {
-  const defaultType = columnTypes["default"] || emptyType;
-  if (column.type === void 0) {
-    return defaultType;
+  if (mapOrObject instanceof Map) {
+    return mapOrObject;
   }
-  if (column.type === null) {
-    return emptyType;
+  if (weakMapCache && weakMapCache.has(mapOrObject)) {
+    return weakMapCache.get(mapOrObject);
   }
-  if (typeof column.type === "string") {
-    const type = columnTypes[column.type] || emptyType;
-    return type;
+  const result = new Map(Object.entries(mapOrObject));
+  if (weakMapCache) {
+    weakMapCache.set(mapOrObject, result);
   }
-  return column.type.reduce((acc, columnType) => Object.assign(acc, columnTypes[columnType]), {});
+  return result;
 }
 
-// src/components/InfiniteTable/utils/assignFiltered.ts
-function assignFiltered(filterFn, target, ...rest) {
-  let result = target;
-  rest.forEach((obj) => {
-    for (const key in obj) {
-      if (obj.hasOwnProperty(key) && filterFn(obj[key], key)) {
-        result[key] = obj[key];
+// src/components/InfiniteTable/state/computeColumnGroupsDepths.ts
+function computeColumnGroupsDepths(columnGroups) {
+  const map2 = new Map();
+  columnGroups.forEach((colGroup, colGroupId) => {
+    let parentGroupId = colGroup.columnGroup;
+    let depth = 0;
+    while (parentGroupId) {
+      const parent = columnGroups.get(parentGroupId);
+      if (!parent) {
+        if (true) {
+          console.warn(`Cannot find column group ${parentGroupId}`);
+        }
+        break;
       }
+      depth++;
+      parentGroupId = parent.columnGroup;
     }
+    map2.set(colGroupId, depth);
   });
-  return result;
-}
-function assignNonNull(target, ...rest) {
-  return assignFiltered((value) => value != null, target, ...rest);
+  return map2;
 }
 
-// src/components/InfiniteTable/utils/getComputedVisibleColumns.ts
-var logError = err("getComputedVisibleColumns");
-var isColumnVisible = (columnVisibility, _columnVisibilityAssumeVisible, colId) => {
-  return columnVisibility[colId] !== false;
+// src/components/InfiniteTable/state/getInitialState.ts
+function initSetupState() {
+  const columnsGeneratedForGrouping = new Map();
+  return {
+    propsCache: new Map([]),
+    horizontalVirtualBrain: new VirtualBrain({
+      count: 0,
+      itemSize: 100,
+      mainAxis: "horizontal"
+    }),
+    verticalVirtualBrain: new VirtualBrain({
+      count: 0,
+      itemSize: 10,
+      mainAxis: "vertical"
+    }),
+    columnShifts: null,
+    domRef: (0, import_react2.createRef)(),
+    scrollerDOMRef: (0, import_react2.createRef)(),
+    portalDOMRef: (0, import_react2.createRef)(),
+    onRowHeightCSSVarChange: buildSubscriptionCallback(),
+    onHeaderHeightCSSVarChange: buildSubscriptionCallback(),
+    bodySize: {
+      width: 0,
+      height: 0
+    },
+    scrollPosition: {
+      scrollTop: 0,
+      scrollLeft: 0
+    },
+    ready: false,
+    focused: false,
+    focusedWithin: false,
+    columnsWhenGrouping: columnsGeneratedForGrouping,
+    draggingColumnId: null,
+    pinnedStartScrollListener: new ScrollListener(),
+    pinnedEndScrollListener: new ScrollListener(),
+    columnsWhenInlineGroupRenderStrategy: void 0
+  };
+}
+var forwardProps = (setupState) => {
+  return {
+    scrollTopKey: 1,
+    components: 1,
+    loadingText: 1,
+    pivotColumns: 1,
+    groupColumn: 1,
+    onReady: 1,
+    domProps: 1,
+    focusedClassName: 1,
+    focusedWithinClassName: 1,
+    focusedStyle: 1,
+    focusedWithinStyle: 1,
+    onSelfFocus: 1,
+    onFocusWithin: 1,
+    onSelfBlur: 1,
+    onBlurWithin: 1,
+    onScrollToTop: 1,
+    onScrollToBottom: 1,
+    onScrollStop: 1,
+    scrollToBottomOffset: 1,
+    rowStyle: 1,
+    rowProps: 1,
+    rowClassName: 1,
+    pinnedStartMaxWidth: 1,
+    pinnedEndMaxWidth: 1,
+    pivotColumn: 1,
+    pivotColumnGroups: 1,
+    onScrollbarsChange: 1,
+    autoSizeColumnsKey: 1,
+    scrollStopDelay: (scrollStopDelay) => scrollStopDelay != null ? scrollStopDelay : 100,
+    viewportReservedWidth: (viewportReservedWidth) => viewportReservedWidth != null ? viewportReservedWidth : 0,
+    activeIndex: (activeIndex) => activeIndex != null ? activeIndex : 0,
+    columnMinWidth: (columnMinWidth) => columnMinWidth != null ? columnMinWidth : 30,
+    columnMaxWidth: (columnMaxWidth) => columnMaxWidth != null ? columnMaxWidth : 2e3,
+    columnDefaultWidth: (columnDefaultWidth) => columnDefaultWidth != null ? columnDefaultWidth : 200,
+    columnCssEllipsis: (columnCssEllipsis) => columnCssEllipsis != null ? columnCssEllipsis : true,
+    draggableColumns: (draggableColumns) => draggableColumns != null ? draggableColumns : true,
+    showSeparatePivotColumnForSingleAggregation: (showSeparatePivotColumnForSingleAggregation) => showSeparatePivotColumnForSingleAggregation != null ? showSeparatePivotColumnForSingleAggregation : false,
+    sortable: (sortable) => sortable != null ? sortable : true,
+    hideEmptyGroupColumns: (hideEmptyGroupColumns) => hideEmptyGroupColumns != null ? hideEmptyGroupColumns : false,
+    pivotTotalColumnPosition: (pivotTotalColumnPosition) => pivotTotalColumnPosition != null ? pivotTotalColumnPosition : "end",
+    licenseKey: (licenseKey) => licenseKey || "",
+    columnOrder: (columnOrder) => columnOrder != null ? columnOrder : true,
+    header: (header) => header != null ? header : true,
+    showZebraRows: (showZebraRows) => showZebraRows != null ? showZebraRows : true,
+    showHoverRows: (showHoverRows) => showHoverRows != null ? showHoverRows : true,
+    virtualizeColumns: (virtualizeColumns) => virtualizeColumns != null ? virtualizeColumns : true,
+    rowHeight: (rowHeight) => typeof rowHeight === "number" ? rowHeight : 0,
+    headerHeight: (headerHeight) => typeof headerHeight === "number" ? headerHeight : 0,
+    columns: (columns) => toMap(columns, setupState.propsCache.get("columns")),
+    columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : {},
+    columnPinning: (columnPinning) => toMap(columnPinning, setupState.propsCache.get("columnPinning")),
+    columnSizing: (columnSizing) => columnSizing || {},
+    columnTypes: (columnTypes) => columnTypes || {},
+    collapsedColumnGroups: (collapsedColumnGroups) => collapsedColumnGroups != null ? collapsedColumnGroups : new Map(),
+    columnGroups: (columnGroups) => toMap(columnGroups, setupState.propsCache.get("columnGroups"))
+  };
 };
-var getComputedPinned = (colId, columnPinning) => {
-  const pinned = columnPinning.get(colId);
-  const computedPinned = pinned === "start" ? "start" : pinned === "end" ? "end" : false;
-  return computedPinned;
+function getGroupRenderStrategy(options) {
+  const { groupBy, groupColumn, groupRenderStrategy } = options;
+  if (groupRenderStrategy) {
+    return groupRenderStrategy;
+  }
+  if (groupColumn != null && typeof groupColumn === "object") {
+    return "single-column";
+  }
+  const columnsInGroupBy = groupBy.filter((g) => g.column);
+  if (columnsInGroupBy.length) {
+    return "multi-column";
+  }
+  return "multi-column";
+}
+var mapPropsToState = (params) => {
+  var _a, _b;
+  const { props, state, oldState, parentState } = params;
+  const { virtualizeColumns, header } = state;
+  const computedColumnGroups = state.pivotColumnGroups || state.columnGroups;
+  const virtualizeHeader = header && virtualizeColumns && (!computedColumnGroups || (computedColumnGroups == null ? void 0 : computedColumnGroups.size) === 0);
+  const columnGroupsDepthsMap = state.columnGroups && state.columnGroups != (oldState == null ? void 0 : oldState.columnGroups) || state.pivotColumnGroups && state.pivotColumnGroups != (oldState == null ? void 0 : oldState.pivotColumnGroups) ? computeColumnGroupsDepths(computedColumnGroups) : state.columnGroupsDepthsMap;
+  const groupBy = parentState == null ? void 0 : parentState.groupBy;
+  const groupRenderStrategy = getGroupRenderStrategy({
+    groupRenderStrategy: props.groupRenderStrategy,
+    groupBy,
+    groupColumn: props.groupColumn
+  });
+  const computedColumns = state.columnsWhenGrouping || state.columnsWhenInlineGroupRenderStrategy || state.columns;
+  return {
+    controlledColumnVisibility: !!props.columnVisibility,
+    groupRenderStrategy,
+    groupBy,
+    computedColumns,
+    virtualizeHeader,
+    columnHeaderCssEllipsis: (_b = (_a = props.columnHeaderCssEllipsis) != null ? _a : props.columnCssEllipsis) != null ? _b : true,
+    columnGroupsDepthsMap,
+    columnGroupsMaxDepth: columnGroupsDepthsMap != state.columnGroupsDepthsMap ? Math.max(...columnGroupsDepthsMap.values(), 0) : state.columnGroupsMaxDepth,
+    computedColumnGroups,
+    rowHeightCSSVar: typeof props.rowHeight === "string" ? props.rowHeight : "",
+    headerHeightCSSVar: typeof props.headerHeight === "string" ? props.headerHeight || "--ITableHeader__height" : ""
+  };
 };
-var getComputedVisibleColumns = ({
-  columns,
-  bodySize,
-  columnMinWidth,
-  columnMaxWidth,
-  columnDefaultWidth,
-  pinnedStartMaxWidth,
-  pinnedEndMaxWidth,
-  sortable,
-  sortInfo,
-  setSortInfo,
-  multiSort,
-  viewportReservedWidth,
-  draggableColumns,
-  columnOrder,
-  columnPinning,
-  columnSizing,
-  columnTypes,
-  columnVisibility,
-  columnVisibilityAssumeVisible
-}) => {
-  let computedOffset = 0;
-  const normalizedColumnOrder = adjustColumnOrderForPinning(columnOrder === true ? [...columns.keys()] : columnOrder, columnPinning);
-  const visibleColumnOrder = normalizedColumnOrder.filter((colId) => {
-    let col = columns.get(colId);
-    if (!col) {
-      logError(`Column with id "${colId}" specified in columnOrder array cannot be found in the columns map.`);
-      return false;
+
+// src/components/ResizeObserver/index.tsx
+var React = __toModule(require("react"));
+var import_react3 = __toModule(require("react"));
+var setupResizeObserver = (node, callback) => {
+  const RO = window.ResizeObserver;
+  const observer = new RO((entries) => {
+    var _a;
+    const entry = entries[0];
+    let { width, height } = entry.contentRect;
+    if ((_a = entry.borderBoxSize) == null ? void 0 : _a[0]) {
+      height = entry.borderBoxSize[0].blockSize;
+      width = entry.borderBoxSize[0].inlineSize;
+    } else {
+      const rect = node.getBoundingClientRect();
+      height = rect.height;
+      width = rect.width;
     }
-    const result2 = isColumnVisible(columnVisibility, columnVisibilityAssumeVisible, colId);
-    return result2;
+    callback({ width, height });
   });
-  const columnsArray = visibleColumnOrder.map((columnId) => columns.get(columnId)).filter(Boolean);
-  const sortedMap = (sortInfo != null ? sortInfo : []).reduce((acc, info, index) => {
-    if (info.id) {
-      acc[info.id] = { sortInfo: info, index };
+  observer.observe(node);
+  return () => {
+    observer.disconnect();
+  };
+};
+var useResizeObserver = (ref, callback, config = { earlyAttach: false }) => {
+  const sizeRef = (0, import_react3.useRef)({
+    width: 0,
+    height: 0
+  });
+  const effectFn = (callback2) => {
+    let disconnect;
+    if (ref.current) {
+      disconnect = setupResizeObserver(ref.current, (size) => {
+        size = {
+          width: Math.round(size.width),
+          height: Math.round(size.height)
+        };
+        const prevSize = sizeRef.current;
+        if (prevSize.width !== size.width || prevSize.height !== size.height) {
+          sizeRef.current = size;
+          callback2(size);
+        }
+      });
     }
-    if (info.field) {
-      acc[info.field] = {
-        sortInfo: info,
-        index
-      };
+    return () => {
+      if (disconnect) {
+        disconnect();
+      }
+    };
+  };
+  (0, import_react3.useEffect)(() => {
+    if (!config.earlyAttach) {
+      return effectFn(callback);
     }
-    return acc;
-  }, {});
-  const flexResult = computeFlex({
-    availableSize: Math.max(bodySize.width - (viewportReservedWidth != null ? viewportReservedWidth : 0) - getScrollbarWidth(), 0),
-    maxSize: columnMaxWidth,
-    minSize: columnMinWidth,
-    items: visibleColumnOrder.map((colId) => {
-      var _a, _b, _c, _d, _e, _f;
-      const column = columns.get(colId);
-      const colType = getColumnComputedType(column, columnTypes);
-      const colTypeSizing = {
-        minWidth: colType == null ? void 0 : colType.minWidth,
-        maxWidth: colType == null ? void 0 : colType.maxWidth,
-        width: colType == null ? void 0 : colType.defaultWidth,
-        flex: colType == null ? void 0 : colType.defaultFlex
-      };
-      let colSizing = assignNonNull({
-        width: column == null ? void 0 : column.defaultWidth,
-        flex: column == null ? void 0 : column.defaultFlex,
-        minWidth: column == null ? void 0 : column.minWidth,
-        maxWidth: column == null ? void 0 : column.maxWidth
-      }, columnSizing[colId]);
-      if (colSizing.width != null) {
-        delete colTypeSizing.flex;
-      }
-      if (colSizing.flex != null) {
-        delete colTypeSizing.width;
-      }
-      colSizing = assignNonNull(colTypeSizing, colSizing);
-      let colFlex = (_a = colSizing.flex) != null ? _a : void 0;
-      const colMinWidth = (_c = (_b = colSizing.minWidth) != null ? _b : column == null ? void 0 : column.minWidth) != null ? _c : columnMinWidth;
-      const colMaxWidth = (_e = (_d = colSizing.maxWidth) != null ? _d : column == null ? void 0 : column.maxWidth) != null ? _e : columnMaxWidth;
-      let size = colFlex != void 0 ? void 0 : (_f = colSizing.width) != null ? _f : columnDefaultWidth;
-      if (!size && colFlex == void 0) {
-        size = colMinWidth;
-      }
-      return {
-        size,
-        flex: colFlex,
-        minSize: colMinWidth,
-        maxSize: colMaxWidth
-      };
-    })
-  });
-  const { computedSizes } = flexResult;
-  const computedPinnedStartColumns = [];
-  const computedPinnedEndColumns = [];
-  const computedUnpinnedColumns = [];
-  const computedVisibleColumns = [];
-  const computedVisibleColumnsMap = new Map();
-  let computedUnpinnedColumnsWidth = 0;
-  let computedPinnedStartColumnsWidth = 0;
-  let computedPinnedEndColumnsWidth = 0;
-  let prevPinned = null;
-  const computedPinnedArray = [];
-  let totalPinnedStartWidth = 0;
-  let totalUnpinnedWidth = 0;
-  let totalPinnedEndWidth = 0;
-  columnsArray.forEach((_c, i) => {
-    const id = visibleColumnOrder[i];
-    const computedWidth = computedSizes[i];
-    const pinned = computedPinnedArray[i] = getComputedPinned(id, columnPinning);
-    if (pinned === "start") {
-      totalPinnedStartWidth += computedWidth;
-    } else if (pinned === "end") {
-      totalPinnedEndWidth += computedWidth;
-    } else {
-      totalUnpinnedWidth += computedWidth;
-    }
-  });
-  const firstPinnedEndAbsoluteOffset = bodySize.width - totalPinnedEndWidth;
-  columnsArray.forEach((c, i) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
-    const id = visibleColumnOrder[i];
-    const nextColumnId = visibleColumnOrder[i + 1];
-    const colType = getColumnComputedType(c, columnTypes);
-    const sortingInfo = sortedMap[id] ? sortedMap[id] : c.field ? (_a = sortedMap[c.field]) != null ? _a : null : null;
-    const computedSortInfo = (_b = sortingInfo == null ? void 0 : sortingInfo.sortInfo) != null ? _b : null;
-    const computedSorted = !!computedSortInfo;
-    const computedSortedAsc = computedSorted && computedSortInfo.dir === 1;
-    const computedSortedDesc = computedSorted && !computedSortedAsc;
-    const computedSortIndex = (_c = sortingInfo == null ? void 0 : sortingInfo.index) != null ? _c : -1;
-    const computedWidth = computedSizes[i];
-    const toggleSort = () => {
-      let currentSortInfo = computedSortInfo;
-      let newColumnSortInfo;
-      if (!currentSortInfo) {
-        newColumnSortInfo = {
-          dir: 1,
-          id,
-          field: c.field,
-          type: c.type
-        };
-      } else {
-        if (computedSortedDesc) {
-          newColumnSortInfo = null;
-        } else {
-          newColumnSortInfo = __spreadProps(__spreadValues({}, computedSortInfo), {
-            dir: -1
-          });
-        }
-      }
-      if (c.field && newColumnSortInfo && !newColumnSortInfo.field) {
-        newColumnSortInfo.field = c.field;
-      }
-      let finalSortInfo = sortInfo ? [...sortInfo] : [];
-      if (multiSort) {
-        if (computedSortIndex === -1) {
-          if (newColumnSortInfo) {
-            finalSortInfo.push(newColumnSortInfo);
-          }
-        } else {
-          finalSortInfo = finalSortInfo.map((info, index) => {
-            if (index === computedSortIndex) {
-              return newColumnSortInfo;
-            }
-            return info;
-          }).filter((x) => x != null);
-        }
-      } else {
-        finalSortInfo = newColumnSortInfo ? [newColumnSortInfo] : [];
-      }
-      setSortInfo(finalSortInfo);
+    return () => {
     };
-    const computedPinned = getComputedPinned(id, columnPinning);
-    const computedLast = i === visibleColumnOrder.length - 1;
-    const computedPinningOffset = computedPinned === "start" ? computedPinnedStartColumnsWidth : computedPinned === "end" ? computedPinnedEndColumnsWidth : computedOffset - computedPinnedStartColumnsWidth;
-    const computedAbsoluteOffset = computedPinned === "start" || computedPinned === false ? computedOffset : firstPinnedEndAbsoluteOffset + computedPinnedEndColumnsWidth;
-    const computedFirstInCategory = computedPinned !== prevPinned;
-    const computedLastInCategory = computedLast || computedPinned !== getComputedPinned(nextColumnId, columnPinning);
-    const result2 = __spreadProps(__spreadValues({
-      align: colType.align,
-      verticalAlign: colType.verticalAlign,
-      defaultHiddenWhenGroupedBy: colType.defaultHiddenWhenGroupedBy,
-      valueGetter: colType.valueGetter,
-      renderValue: colType.renderValue,
-      render: colType.render
-    }, c), {
-      computedWidth,
-      computedAbsoluteOffset,
-      computedPinningOffset,
-      computedOffset,
-      computedSortable: (_f = (_e = (_d = c.sortable) != null ? _d : colType.sortable) != null ? _e : sortable) != null ? _f : true,
-      computedSortInfo,
-      computedSortIndex,
-      computedMultiSort: multiSort,
-      computedSorted,
-      computedSortedAsc,
-      computedSortedDesc,
-      computedVisibleIndex: i,
-      computedPinned,
-      computedDraggable: (_h = (_g = c.draggable) != null ? _g : draggableColumns) != null ? _h : true,
-      computedFirstInCategory,
-      computedLastInCategory,
-      computedFirst: i === 0,
-      computedLast,
-      toggleSort,
-      id,
-      header: (_k = (_j = (_i = c.header) != null ? _i : colType.header) != null ? _j : c.name) != null ? _k : c.field
-    });
-    computedOffset += computedWidth;
-    computedVisibleColumnsMap.set(result2.id, result2);
-    computedVisibleColumns.push(result2);
-    if (computedPinned === "start") {
-      computedPinnedStartColumns.push(result2);
-      computedPinnedStartColumnsWidth += result2.computedWidth;
-    }
-    if (computedPinned === "end") {
-      computedPinnedEndColumns.push(result2);
-      computedPinnedEndColumnsWidth += result2.computedWidth;
+  }, [ref.current, callback, config.earlyAttach]);
+  (0, import_react3.useLayoutEffect)(() => {
+    if (config.earlyAttach) {
+      return effectFn(callback);
     }
-    if (!computedPinned) {
-      computedUnpinnedColumns.push(result2);
-      computedUnpinnedColumnsWidth += result2.computedWidth;
+    return () => {
+    };
+  }, [ref.current, callback, config.earlyAttach]);
+};
+var ReactResizeObserver = (props) => {
+  const style = (0, import_react3.useMemo)(() => ({
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    boxSizing: "border-box"
+  }), []);
+  const { notifyOnMount, earlyAttach } = props;
+  const firstTime = (0, import_react3.useRef)(true);
+  const ref = (0, import_react3.useRef)(null);
+  const onResize = (0, import_react3.useCallback)((size) => {
+    if (firstTime.current && !notifyOnMount) {
+      firstTime.current = false;
+      return;
     }
-    prevPinned = computedPinned;
+    props.onResize(size);
+  }, [props.onResize]);
+  useResizeObserver(ref, onResize, { earlyAttach: earlyAttach || false });
+  return /* @__PURE__ */ React.createElement("div", {
+    ref,
+    style
   });
-  const computedPinnedStartWidth = pinnedStartMaxWidth != null ? Math.min(pinnedStartMaxWidth, computedPinnedStartColumnsWidth) : computedPinnedStartColumnsWidth;
-  const computedPinnedEndWidth = pinnedEndMaxWidth != null ? Math.min(pinnedEndMaxWidth, computedPinnedEndColumnsWidth) : computedPinnedEndColumnsWidth;
-  const result = {
-    computedRemainingSpace: bodySize.width - (totalPinnedStartWidth + totalPinnedEndWidth + totalUnpinnedWidth),
-    computedPinnedStartColumnsWidth,
-    computedPinnedEndColumnsWidth,
-    computedUnpinnedColumnsWidth,
-    computedColumnOrder: normalizedColumnOrder,
-    computedPinnedStartColumns,
-    computedPinnedEndColumns,
-    computedUnpinnedOffset: computedPinnedStartColumnsWidth,
-    computedPinnedEndOffset: computedPinnedStartColumnsWidth + computedUnpinnedColumnsWidth,
-    computedUnpinnedColumns,
-    computedVisibleColumns,
-    computedVisibleColumnsMap,
-    computedPinnedEndWidth,
-    computedPinnedStartWidth
-  };
-  return result;
+};
+ReactResizeObserver.defaultProps = {
+  notifyOnMount: true,
+  earlyAttach: false
 };
 
-// src/components/InfiniteTable/hooks/useRerenderOnKeyChange.ts
-var import_react7 = __toModule(require("react"));
-
-// src/components/hooks/useRerender.ts
-var import_react5 = __toModule(require("react"));
-var useRerender = () => {
-  const [state, setState] = (0, import_react5.useState)(0);
-  return [
-    state,
-    (0, import_react5.useCallback)(() => {
-      setState((state2) => state2 + 1);
-    }, [setState])
-  ];
+// src/components/InfiniteTable/hooks/useInfiniteTable.ts
+var import_react4 = __toModule(require("react"));
+var useInfiniteTable = () => {
+  const TableContext2 = getInfiniteTableContext();
+  return (0, import_react4.useContext)(TableContext2);
 };
 
-// src/components/hooks/useInterceptedMap.ts
-var import_react6 = __toModule(require("react"));
-function interceptMap(map2, fns) {
-  const { set, delete: deleteKey, clear } = map2;
-  if (fns.set) {
-    map2.set = (key, value) => {
-      set.call(map2, key, value);
-      fns.set(key, value);
-      return map2;
-    };
+// src/components/InfiniteTable/hooks/useComputedVisibleColumns.ts
+var import_react8 = __toModule(require("react"));
+
+// src/components/flexbox/index.tsx
+var computeFlex = (params) => {
+  const {
+    availableSize,
+    items,
+    minSize: defaultMinSize,
+    maxSize: defaultMaxSize
+  } = params;
+  if (availableSize < 0) {
+    throw "The provided availableSize cannot be negative!";
   }
-  if (fns.delete) {
-    map2.delete = (key) => {
-      const removed = deleteKey.call(map2, key);
-      fns.delete(key);
-      return removed;
-    };
-  }
-  if (fns.clear || fns.beforeClear) {
-    map2.clear = () => {
-      if (fns.beforeClear) {
-        fns.beforeClear(map2);
+  let totalFixedSize = 0;
+  let totalFlex = 0;
+  let totalFlexCount = 0;
+  items.forEach((item, i) => {
+    var _a, _b, _c, _d, _e, _f;
+    let maxSize = (_b = (_a = item.maxSize) != null ? _a : defaultMaxSize) != null ? _b : void 0;
+    let minSize = (_d = (_c = item.minSize) != null ? _c : defaultMinSize) != null ? _d : void 0;
+    if (item.size != null) {
+      if (maxSize != null && item.size > maxSize) {
+        item.size = maxSize;
       }
-      const result = clear.call(map2);
-      if (fns.clear) {
-        fns.clear();
+      if (minSize != null && item.size < minSize) {
+        item.size = minSize;
       }
-      return result;
-    };
-  }
-  return () => {
-    if (set) {
-      map2.set = set;
     }
-    if (deleteKey) {
-      map2.delete = deleteKey;
+    if (item.size == null && item.flex == null) {
+      throw `Items must specify either a size or a flex property. Item at index ${i} doesn't have either of those.`;
     }
-    if (clear) {
-      map2.clear = clear;
+    if (item.flex != null) {
+      totalFlexCount += 1;
     }
-  };
-}
-
-// src/components/InfiniteTable/utils/rafFn.ts
-var rafFn = (fn) => {
-  let rafId = 0;
-  return (...args) => {
-    if (rafId) {
-      cancelAnimationFrame(rafId);
+    totalFlex += (_e = item.flex) != null ? _e : 0;
+    totalFixedSize += (_f = item.size) != null ? _f : 0;
+  });
+  let availableSizeForFlex = Math.max(availableSize - totalFixedSize, 0);
+  let sizePerFlex = availableSizeForFlex / totalFlex;
+  let maxxedFlexItems = {};
+  let minnedFlexItems = {};
+  let constrainedCount = 0;
+  items.forEach((item, index) => {
+    var _a, _b, _c, _d;
+    if (item.flex != null) {
+      const approxFlexSize = sizePerFlex * item.flex;
+      let maxSize = (_b = (_a = item.maxSize) != null ? _a : defaultMaxSize) != null ? _b : void 0;
+      let minSize = (_d = (_c = item.minSize) != null ? _c : defaultMinSize) != null ? _d : void 0;
+      let constrained = false;
+      let substractSize = 0;
+      if (maxSize != null && approxFlexSize > maxSize) {
+        maxxedFlexItems[index] = true;
+        constrained = true;
+        substractSize = maxSize;
+      }
+      if (minSize != null && approxFlexSize < minSize) {
+        minnedFlexItems[index] = true;
+        constrained = true;
+        substractSize = minSize;
+      }
+      if (constrained) {
+        constrainedCount += 1;
+        totalFlexCount -= 1;
+        totalFlex -= item.flex;
+        availableSizeForFlex -= substractSize;
+      }
     }
-    rafId = requestAnimationFrame(() => {
-      rafId = 0;
-      fn(...args);
-    });
+  });
+  if (constrainedCount) {
+    sizePerFlex = availableSizeForFlex / totalFlex;
+  }
+  let flexSizes = [];
+  let currentFlexCount = 0;
+  let remainingSizeForFlex = availableSizeForFlex;
+  let remainingFlex = totalFlex;
+  let totalTakenSize = 0;
+  let flexSizeSum = 0;
+  const computedSizes = [];
+  const resultItems = items.map((item, index) => {
+    var _a, _b, _c, _d, _e;
+    const sizedItem = __spreadValues({}, item);
+    let maxSize = (_b = (_a = item.maxSize) != null ? _a : defaultMaxSize) != null ? _b : void 0;
+    let minSize = (_d = (_c = item.minSize) != null ? _c : defaultMinSize) != null ? _d : void 0;
+    let flexSize = 0;
+    const maxxed = maxxedFlexItems[index];
+    const minned = minnedFlexItems[index];
+    const constrained = maxxed || minned;
+    let computedSize = (_e = item.size) != null ? _e : 0;
+    if (item.flex != null) {
+      if (constrained) {
+        if (minned) {
+          flexSize = minSize;
+        }
+        if (maxxed) {
+          flexSize = maxSize;
+        }
+      } else {
+        currentFlexCount += 1;
+        const constrain = (size) => {
+          if (maxSize != null && size > maxSize) {
+            size = maxSize;
+          }
+          if (minSize != null && size < minSize) {
+            size = minSize;
+          }
+          return size;
+        };
+        if (currentFlexCount === totalFlexCount) {
+          flexSize = constrain(remainingSizeForFlex);
+        } else {
+          flexSize = constrain(Math.round(item.flex * sizePerFlex));
+          flexSizeSum += flexSize;
+          remainingSizeForFlex = availableSizeForFlex - flexSizeSum;
+          remainingFlex -= item.flex;
+          sizePerFlex = remainingSizeForFlex / remainingFlex;
+        }
+      }
+      computedSize = flexSize;
+      sizedItem.flexSize = flexSize;
+    }
+    flexSizes.push(flexSize);
+    computedSizes.push(computedSize);
+    sizedItem.computedSize = computedSize;
+    totalTakenSize += computedSize;
+    return sizedItem;
+  });
+  return {
+    items: resultItems,
+    flexSizes,
+    computedSizes,
+    remainingSize: Math.round(availableSize - totalTakenSize)
   };
 };
 
-// src/components/InfiniteTable/hooks/useRerenderOnKeyChange.ts
-var useRerenderOnKeyChange = (map2) => {
-  const [renderId, rerender] = useRerender();
-  (0, import_react7.useEffect)(() => {
-    const update = rafFn(rerender);
-    return interceptMap(map2, {
-      set: update,
-      clear: update,
-      delete: update
+// src/components/InfiniteTable/utils/adjustColumnOrderForPinning.ts
+var order = ["start", void 0, "end"];
+var adjustColumnOrderForPinning = (columnOrder, columnPinning) => {
+  if (columnPinning.size > 0) {
+    columnOrder.sort((colId1, colId2) => {
+      let p1 = columnPinning.get(colId1);
+      let p2 = columnPinning.get(colId2);
+      if (p1 === true) {
+        p1 = "start";
+      }
+      if (p2 === true) {
+        p2 = "start";
+      }
+      if (p1 == p2) {
+        return 0;
+      }
+      return order.indexOf(p1) - order.indexOf(p2);
     });
-  }, [map2]);
-  return renderId;
+  }
+  return columnOrder;
 };
 
-// src/components/InfiniteTable/hooks/useComputedVisibleColumns.ts
-var useComputedVisibleColumns = ({
+// src/utils/getGlobal.ts
+function getGlobal() {
+  return globalThis;
+}
+
+// src/components/utils/getScrollbarWidth.ts
+var scrollbarWidth;
+function getScrollbarWidth() {
+  var _a, _b;
+  if (scrollbarWidth != null) {
+    return scrollbarWidth;
+  }
+  const doc = (_a = getGlobal().document) != null ? _a : null;
+  if (!doc) {
+    return 0;
+  }
+  const outer = doc.createElement("div");
+  outer.style.visibility = "hidden";
+  outer.style.overflow = "scroll";
+  doc.body.appendChild(outer);
+  const inner = doc.createElement("div");
+  outer.appendChild(inner);
+  scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+  (_b = outer.parentNode) == null ? void 0 : _b.removeChild(outer);
+  return scrollbarWidth;
+}
+
+// src/components/InfiniteTable/utils/getColumnComputedType.ts
+var emptyType = Object.freeze({});
+function getColumnComputedType(column, columnTypes) {
+  const defaultType = columnTypes["default"] || emptyType;
+  if (column.type === void 0) {
+    return defaultType;
+  }
+  if (column.type === null) {
+    return emptyType;
+  }
+  if (typeof column.type === "string") {
+    const type = columnTypes[column.type] || emptyType;
+    return type;
+  }
+  return column.type.reduce((acc, columnType) => Object.assign(acc, columnTypes[columnType]), {});
+}
+
+// src/components/InfiniteTable/utils/assignFiltered.ts
+function assignFiltered(filterFn, target, ...rest) {
+  let result = target;
+  rest.forEach((obj) => {
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key) && filterFn(obj[key], key)) {
+        result[key] = obj[key];
+      }
+    }
+  });
+  return result;
+}
+function assignNonNull(target, ...rest) {
+  return assignFiltered((value) => value != null, target, ...rest);
+}
+
+// src/components/InfiniteTable/utils/getComputedVisibleColumns.ts
+var logError = err("getComputedVisibleColumns");
+var isColumnVisible = (columnVisibility, _columnVisibilityAssumeVisible, colId) => {
+  return columnVisibility[colId] !== false;
+};
+var getComputedPinned = (colId, columnPinning) => {
+  const pinned = columnPinning.get(colId);
+  const computedPinned = pinned === "start" ? "start" : pinned === "end" ? "end" : false;
+  return computedPinned;
+};
+var getComputedVisibleColumns = ({
   columns,
   bodySize,
   columnMinWidth,
   columnMaxWidth,
   columnDefaultWidth,
+  columnCssEllipsis,
+  columnHeaderCssEllipsis,
+  pinnedStartMaxWidth,
+  pinnedEndMaxWidth,
   sortable,
-  draggableColumns,
   sortInfo,
-  multiSort,
   setSortInfo,
-  columnOrder,
+  multiSort,
+  viewportReservedWidth,
+  draggableColumns,
+  columnOrder,
   columnPinning,
+  columnSizing,
   columnTypes,
-  pinnedEndMaxWidth,
-  pinnedStartMaxWidth,
-  viewportReservedWidth,
   columnVisibility,
-  columnVisibilityAssumeVisible,
-  columnSizing
+  columnVisibilityAssumeVisible
 }) => {
-  const columnsRenderId = useRerenderOnKeyChange(columns);
-  const pinningRenderId = useRerenderOnKeyChange(columnPinning);
-  const {
-    computedRemainingSpace,
-    computedColumnOrder,
-    computedVisibleColumns,
-    computedVisibleColumnsMap,
-    computedPinnedStartColumns,
-    computedPinnedEndColumns,
-    computedUnpinnedColumns,
+  let computedOffset = 0;
+  const normalizedColumnOrder = adjustColumnOrderForPinning(columnOrder === true ? [...columns.keys()] : columnOrder, columnPinning);
+  const visibleColumnOrder = normalizedColumnOrder.filter((colId) => {
+    let col = columns.get(colId);
+    if (!col) {
+      logError(`Column with id "${colId}" specified in columnOrder array cannot be found in the columns map.`);
+      return false;
+    }
+    const result2 = isColumnVisible(columnVisibility, columnVisibilityAssumeVisible, colId);
+    return result2;
+  });
+  const columnsArray = visibleColumnOrder.map((columnId) => columns.get(columnId)).filter(Boolean);
+  const sortedMap = (sortInfo != null ? sortInfo : []).reduce((acc, info, index) => {
+    if (info.id) {
+      acc[info.id] = { sortInfo: info, index };
+    }
+    if (info.field) {
+      acc[info.field] = {
+        sortInfo: info,
+        index
+      };
+    }
+    return acc;
+  }, {});
+  console.log(columnSizing, "columnSizing");
+  const flexResult = computeFlex({
+    availableSize: Math.max(bodySize.width - (viewportReservedWidth != null ? viewportReservedWidth : 0) - getScrollbarWidth(), 0),
+    maxSize: columnMaxWidth,
+    minSize: columnMinWidth,
+    items: visibleColumnOrder.map((colId) => {
+      var _a, _b, _c, _d, _e, _f;
+      const column = columns.get(colId);
+      const colType = getColumnComputedType(column, columnTypes);
+      const colTypeSizing = {
+        minWidth: colType == null ? void 0 : colType.minWidth,
+        maxWidth: colType == null ? void 0 : colType.maxWidth,
+        width: colType == null ? void 0 : colType.defaultWidth,
+        flex: colType == null ? void 0 : colType.defaultFlex
+      };
+      let colSizing = assignNonNull({
+        width: column == null ? void 0 : column.defaultWidth,
+        flex: column == null ? void 0 : column.defaultFlex,
+        minWidth: column == null ? void 0 : column.minWidth,
+        maxWidth: column == null ? void 0 : column.maxWidth
+      }, columnSizing[colId]);
+      if (colSizing.width != null) {
+        delete colTypeSizing.flex;
+      }
+      if (colSizing.flex != null) {
+        delete colTypeSizing.width;
+      }
+      colSizing = assignNonNull(colTypeSizing, colSizing);
+      let colFlex = (_a = colSizing.flex) != null ? _a : void 0;
+      const colMinWidth = (_c = (_b = colSizing.minWidth) != null ? _b : column == null ? void 0 : column.minWidth) != null ? _c : columnMinWidth;
+      const colMaxWidth = (_e = (_d = colSizing.maxWidth) != null ? _d : column == null ? void 0 : column.maxWidth) != null ? _e : columnMaxWidth;
+      let size = colFlex != void 0 ? void 0 : (_f = colSizing.width) != null ? _f : columnDefaultWidth;
+      if (!size && colFlex == void 0) {
+        size = colMinWidth;
+      }
+      return {
+        size,
+        flex: colFlex,
+        minSize: colMinWidth,
+        maxSize: colMaxWidth
+      };
+    })
+  });
+  const { computedSizes } = flexResult;
+  const computedPinnedStartColumns = [];
+  const computedPinnedEndColumns = [];
+  const computedUnpinnedColumns = [];
+  const computedVisibleColumns = [];
+  const computedVisibleColumnsMap = new Map();
+  let computedUnpinnedColumnsWidth = 0;
+  let computedPinnedStartColumnsWidth = 0;
+  let computedPinnedEndColumnsWidth = 0;
+  let prevPinned = null;
+  const computedPinnedArray = [];
+  let totalPinnedStartWidth = 0;
+  let totalUnpinnedWidth = 0;
+  let totalPinnedEndWidth = 0;
+  columnsArray.forEach((_c, i) => {
+    const id = visibleColumnOrder[i];
+    const computedWidth = computedSizes[i];
+    const pinned = computedPinnedArray[i] = getComputedPinned(id, columnPinning);
+    if (pinned === "start") {
+      totalPinnedStartWidth += computedWidth;
+    } else if (pinned === "end") {
+      totalPinnedEndWidth += computedWidth;
+    } else {
+      totalUnpinnedWidth += computedWidth;
+    }
+  });
+  const firstPinnedEndAbsoluteOffset = bodySize.width - totalPinnedEndWidth;
+  columnsArray.forEach((c, i) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+    const id = visibleColumnOrder[i];
+    const nextColumnId = visibleColumnOrder[i + 1];
+    const colType = getColumnComputedType(c, columnTypes);
+    const sortingInfo = sortedMap[id] ? sortedMap[id] : c.field ? (_a = sortedMap[c.field]) != null ? _a : null : null;
+    const computedSortInfo = (_b = sortingInfo == null ? void 0 : sortingInfo.sortInfo) != null ? _b : null;
+    const computedSorted = !!computedSortInfo;
+    const computedSortedAsc = computedSorted && computedSortInfo.dir === 1;
+    const computedSortedDesc = computedSorted && !computedSortedAsc;
+    const computedSortIndex = (_c = sortingInfo == null ? void 0 : sortingInfo.index) != null ? _c : -1;
+    const computedWidth = computedSizes[i];
+    const toggleSort = () => {
+      let currentSortInfo = computedSortInfo;
+      let newColumnSortInfo;
+      if (!currentSortInfo) {
+        newColumnSortInfo = {
+          dir: 1,
+          id,
+          field: c.field,
+          type: c.type
+        };
+      } else {
+        if (computedSortedDesc) {
+          newColumnSortInfo = null;
+        } else {
+          newColumnSortInfo = __spreadProps(__spreadValues({}, computedSortInfo), {
+            dir: -1
+          });
+        }
+      }
+      if (c.field && newColumnSortInfo && !newColumnSortInfo.field) {
+        newColumnSortInfo.field = c.field;
+      }
+      let finalSortInfo = sortInfo ? [...sortInfo] : [];
+      if (multiSort) {
+        if (computedSortIndex === -1) {
+          if (newColumnSortInfo) {
+            finalSortInfo.push(newColumnSortInfo);
+          }
+        } else {
+          finalSortInfo = finalSortInfo.map((info, index) => {
+            if (index === computedSortIndex) {
+              return newColumnSortInfo;
+            }
+            return info;
+          }).filter((x) => x != null);
+        }
+      } else {
+        finalSortInfo = newColumnSortInfo ? [newColumnSortInfo] : [];
+      }
+      setSortInfo(finalSortInfo);
+    };
+    const computedPinned = getComputedPinned(id, columnPinning);
+    const computedLast = i === visibleColumnOrder.length - 1;
+    const computedPinningOffset = computedPinned === "start" ? computedPinnedStartColumnsWidth : computedPinned === "end" ? computedPinnedEndColumnsWidth : computedOffset - computedPinnedStartColumnsWidth;
+    const computedAbsoluteOffset = computedPinned === "start" || computedPinned === false ? computedOffset : firstPinnedEndAbsoluteOffset + computedPinnedEndColumnsWidth;
+    const computedFirstInCategory = computedPinned !== prevPinned;
+    const computedLastInCategory = computedLast || computedPinned !== getComputedPinned(nextColumnId, columnPinning);
+    const cssEllipsis = (_e = (_d = c.cssEllipsis) != null ? _d : colType.cssEllipsis) != null ? _e : columnCssEllipsis;
+    const headerCssEllipsis = (_j = (_i = (_h = (_g = (_f = c.headerCssEllipsis) != null ? _f : colType.cssEllipsis) != null ? _g : c.cssEllipsis) != null ? _h : colType.headerCssEllipsis) != null ? _i : columnHeaderCssEllipsis) != null ? _j : cssEllipsis;
+    const result2 = __spreadProps(__spreadValues({
+      align: colType.align,
+      verticalAlign: colType.verticalAlign,
+      defaultHiddenWhenGroupedBy: colType.defaultHiddenWhenGroupedBy,
+      valueGetter: colType.valueGetter,
+      renderValue: colType.renderValue,
+      render: colType.render,
+      style: colType.style
+    }, c), {
+      cssEllipsis,
+      headerCssEllipsis,
+      computedWidth,
+      computedAbsoluteOffset,
+      computedPinningOffset,
+      computedOffset,
+      computedSortable: (_m = (_l = (_k = c.sortable) != null ? _k : colType.sortable) != null ? _l : sortable) != null ? _m : true,
+      computedSortInfo,
+      computedSortIndex,
+      computedMultiSort: multiSort,
+      computedSorted,
+      computedSortedAsc,
+      computedSortedDesc,
+      computedVisibleIndex: i,
+      computedPinned,
+      computedDraggable: (_o = (_n = c.draggable) != null ? _n : draggableColumns) != null ? _o : true,
+      computedFirstInCategory,
+      computedLastInCategory,
+      computedFirst: i === 0,
+      computedLast,
+      toggleSort,
+      id,
+      header: (_r = (_q = (_p = c.header) != null ? _p : colType.header) != null ? _q : c.name) != null ? _r : c.field
+    });
+    computedOffset += computedWidth;
+    computedVisibleColumnsMap.set(result2.id, result2);
+    computedVisibleColumns.push(result2);
+    if (computedPinned === "start") {
+      computedPinnedStartColumns.push(result2);
+      computedPinnedStartColumnsWidth += result2.computedWidth;
+    }
+    if (computedPinned === "end") {
+      computedPinnedEndColumns.push(result2);
+      computedPinnedEndColumnsWidth += result2.computedWidth;
+    }
+    if (!computedPinned) {
+      computedUnpinnedColumns.push(result2);
+      computedUnpinnedColumnsWidth += result2.computedWidth;
+    }
+    prevPinned = computedPinned;
+  });
+  const computedPinnedStartWidth = pinnedStartMaxWidth != null ? Math.min(pinnedStartMaxWidth, computedPinnedStartColumnsWidth) : computedPinnedStartColumnsWidth;
+  const computedPinnedEndWidth = pinnedEndMaxWidth != null ? Math.min(pinnedEndMaxWidth, computedPinnedEndColumnsWidth) : computedPinnedEndColumnsWidth;
+  const result = {
+    computedRemainingSpace: bodySize.width - (totalPinnedStartWidth + totalPinnedEndWidth + totalUnpinnedWidth),
     computedPinnedStartColumnsWidth,
     computedPinnedEndColumnsWidth,
     computedUnpinnedColumnsWidth,
-    computedUnpinnedOffset,
-    computedPinnedEndOffset,
+    computedColumnOrder: normalizedColumnOrder,
+    computedPinnedStartColumns,
+    computedPinnedEndColumns,
+    computedUnpinnedOffset: computedPinnedStartColumnsWidth,
+    computedPinnedEndOffset: computedPinnedStartColumnsWidth + computedUnpinnedColumnsWidth,
+    computedUnpinnedColumns,
+    computedVisibleColumns,
+    computedVisibleColumnsMap,
     computedPinnedEndWidth,
     computedPinnedStartWidth
-  } = (0, import_react8.useMemo)(() => {
-    return getComputedVisibleColumns({
-      columns,
-      bodySize,
-      columnMinWidth,
-      columnMaxWidth,
-      columnDefaultWidth,
-      viewportReservedWidth,
-      sortable,
-      sortInfo,
-      setSortInfo,
-      multiSort,
-      pinnedEndMaxWidth,
-      pinnedStartMaxWidth,
-      draggableColumns,
-      columnOrder,
-      columnPinning,
-      columnSizing,
-      columnTypes,
-      columnVisibility,
-      columnVisibilityAssumeVisible: columnVisibilityAssumeVisible != null ? columnVisibilityAssumeVisible : true
-    });
-  }, [
-    columns,
-    bodySize.width,
-    columnMinWidth,
-    columnMaxWidth,
+  };
+  return result;
+};
+
+// src/components/InfiniteTable/hooks/useRerenderOnKeyChange.ts
+var import_react7 = __toModule(require("react"));
+
+// src/components/hooks/useRerender.ts
+var import_react5 = __toModule(require("react"));
+var useRerender = () => {
+  const [state, setState] = (0, import_react5.useState)(0);
+  return [
+    state,
+    (0, import_react5.useCallback)(() => {
+      setState((state2) => state2 + 1);
+    }, [setState])
+  ];
+};
+
+// src/components/hooks/useInterceptedMap.ts
+var import_react6 = __toModule(require("react"));
+function interceptMap(map2, fns) {
+  const { set, delete: deleteKey, clear } = map2;
+  if (fns.set) {
+    map2.set = (key, value) => {
+      set.call(map2, key, value);
+      fns.set(key, value);
+      return map2;
+    };
+  }
+  if (fns.delete) {
+    map2.delete = (key) => {
+      const removed = deleteKey.call(map2, key);
+      fns.delete(key);
+      return removed;
+    };
+  }
+  if (fns.clear || fns.beforeClear) {
+    map2.clear = () => {
+      if (fns.beforeClear) {
+        fns.beforeClear(map2);
+      }
+      const result = clear.call(map2);
+      if (fns.clear) {
+        fns.clear();
+      }
+      return result;
+    };
+  }
+  return () => {
+    if (set) {
+      map2.set = set;
+    }
+    if (deleteKey) {
+      map2.delete = deleteKey;
+    }
+    if (clear) {
+      map2.clear = clear;
+    }
+  };
+}
+
+// src/components/InfiniteTable/utils/rafFn.ts
+var rafFn = (fn) => {
+  let rafId = 0;
+  return (...args) => {
+    if (rafId) {
+      cancelAnimationFrame(rafId);
+    }
+    rafId = requestAnimationFrame(() => {
+      rafId = 0;
+      fn(...args);
+    });
+  };
+};
+
+// src/components/InfiniteTable/hooks/useRerenderOnKeyChange.ts
+var useRerenderOnKeyChange = (map2) => {
+  const [renderId, rerender] = useRerender();
+  (0, import_react7.useEffect)(() => {
+    const update = rafFn(rerender);
+    return interceptMap(map2, {
+      set: update,
+      clear: update,
+      delete: update
+    });
+  }, [map2]);
+  return renderId;
+};
+
+// src/components/InfiniteTable/hooks/useComputedVisibleColumns.ts
+var useComputedVisibleColumns = ({
+  columns,
+  bodySize,
+  columnMinWidth,
+  columnMaxWidth,
+  columnDefaultWidth,
+  sortable,
+  columnCssEllipsis,
+  columnHeaderCssEllipsis,
+  draggableColumns,
+  sortInfo,
+  multiSort,
+  setSortInfo,
+  columnOrder,
+  columnPinning,
+  columnTypes,
+  pinnedEndMaxWidth,
+  pinnedStartMaxWidth,
+  viewportReservedWidth,
+  columnVisibility,
+  columnVisibilityAssumeVisible,
+  columnSizing
+}) => {
+  const columnsRenderId = useRerenderOnKeyChange(columns);
+  const pinningRenderId = useRerenderOnKeyChange(columnPinning);
+  const {
+    computedRemainingSpace,
+    computedColumnOrder,
+    computedVisibleColumns,
+    computedVisibleColumnsMap,
+    computedPinnedStartColumns,
+    computedPinnedEndColumns,
+    computedUnpinnedColumns,
+    computedPinnedStartColumnsWidth,
+    computedPinnedEndColumnsWidth,
+    computedUnpinnedColumnsWidth,
+    computedUnpinnedOffset,
+    computedPinnedEndOffset,
+    computedPinnedEndWidth,
+    computedPinnedStartWidth
+  } = (0, import_react8.useMemo)(() => {
+    return getComputedVisibleColumns({
+      columns,
+      bodySize,
+      columnMinWidth,
+      columnMaxWidth,
+      columnDefaultWidth,
+      columnCssEllipsis,
+      columnHeaderCssEllipsis,
+      viewportReservedWidth,
+      sortable,
+      sortInfo,
+      setSortInfo,
+      multiSort,
+      pinnedEndMaxWidth,
+      pinnedStartMaxWidth,
+      draggableColumns,
+      columnOrder,
+      columnPinning,
+      columnSizing,
+      columnTypes,
+      columnVisibility,
+      columnVisibilityAssumeVisible: columnVisibilityAssumeVisible != null ? columnVisibilityAssumeVisible : true
+    });
+  }, [
+    columns,
+    bodySize.width,
+    columnMinWidth,
+    columnMaxWidth,
     columnDefaultWidth,
     sortable,
     sortInfo,
@@ -1644,6 +2108,7 @@ var useComputedVisibleColumns = ({
     columnVisibilityAssumeVisible,
     pinnedEndMaxWidth,
     pinnedStartMaxWidth,
+    columnSizing,
     columnPinning,
     columnsRenderId,
     pinningRenderId
@@ -2121,6 +2586,7 @@ var flex = { "1": "_16lm1iwc", none: "_16lm1iwd" };
 var flexFlow = { column: "_16lm1iwz", row: "_16lm1iw10" };
 var justifyContent = { center: "_16lm1iw13", start: "_16lm1iw14", end: "_16lm1iw15" };
 var left = { "0": "_16lm1iwt", "100%": "_16lm1iwu" };
+var overflow = { hidden: "_16lm1iw16", auto: "_16lm1iw17", visible: "_16lm1iw18" };
 var position = { relative: "_16lm1iw1", absolute: "_16lm1iw2", sticky: "_16lm1iw3", fixed: "_16lm1iw4" };
 var top = { "0": "_16lm1iwr", "100%": "_16lm1iws" };
 var transform = { translateZero: "_16lm1iw9", rotate90: "_16lm1iwa" };
@@ -4471,6 +4937,8 @@ function useComputed() {
     computedPinnedEndWidth
   } = useComputedVisibleColumns({
     columns,
+    columnCssEllipsis: componentState.columnCssEllipsis,
+    columnHeaderCssEllipsis: componentState.columnHeaderCssEllipsis,
     columnMinWidth: componentState.columnMinWidth,
     columnMaxWidth: componentState.columnMaxWidth,
     columnDefaultWidth: componentState.columnDefaultWidth,
@@ -4654,14 +5122,15 @@ var useInfiniteTableState = () => {
 
 // src/components/InfiniteTable/components/cell.css.ts
 var import_createRuntimeFn4 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
-var CellCls2 = "_1eexc2a5 _16lm1iwj _16lm1iw10 _16lm1iw11 _16lm1iw2 _16lm1iw19 _16lm1iw1a";
 var CellClsVariants = { shifting: "_1eexc2a3", dragging: "_1eexc2a4" };
-var ColumnCellRecipe = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "_16lm1iw2 _16lm1iwo _16lm1iw7 _16lm1iwr", variantClassNames: { dragging: { false: "_1eexc2a7" }, first: { true: "_1eexc2a8", false: "_1eexc2a9" }, last: { true: "_1eexc2aa", false: "_1eexc2ab" }, groupByField: { true: "_1eexc2ac", false: "_1eexc2ad" }, firstInCategory: { true: "_1eexc2ae", false: "_1eexc2af" }, lastInCategory: { true: "_1eexc2ag", false: "_1eexc2ah" }, pinned: { start: "_1eexc2ai", end: "_1eexc2aj", false: "_1eexc2ak" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2al"], [{ pinned: "end", firstInCategory: true }, "_1eexc2am"]] });
+var ColumnCellCls = "_1eexc2a5 _16lm1iwj _16lm1iw10 _16lm1iw11 _16lm1iw2 _16lm1iw19 _16lm1iw1a";
+var ColumnCellRecipe = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "_16lm1iw2 _16lm1iwo _16lm1iw7 _16lm1iwr", variantClassNames: { dragging: { false: "_1eexc2a8" }, first: { true: "_1eexc2a9", false: "_1eexc2aa" }, last: { true: "_1eexc2ab", false: "_1eexc2ac" }, groupByField: { true: "_1eexc2ad", false: "_1eexc2ae" }, firstInCategory: { true: "_1eexc2af", false: "_1eexc2ag" }, lastInCategory: { true: "_1eexc2ah", false: "_1eexc2ai" }, pinned: { start: "_1eexc2aj", end: "_1eexc2ak", false: "_1eexc2al" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2am"], [{ pinned: "end", firstInCategory: true }, "_1eexc2an"]] });
 var columnAlignCellStyle = { center: "_1eexc2a0", start: "_1eexc2a1", end: "_1eexc2a2" };
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
 var { rootClassName: rootClassName2 } = internalProps;
 var InfiniteTableCellClassName = `${rootClassName2}Cell`;
+var InfiniteTableCellContentClassName = `${rootClassName2}Cell_content`;
 function InfiniteTableCellFn(props) {
   var _b, _c;
   const _a = props, {
@@ -4705,15 +5174,15 @@ function InfiniteTableCellFn(props) {
     ref: domRef,
     style,
     "data-name": `Cell`,
-    className: join(domProps.className, columnAlignCellStyle[(_b = column.align) != null ? _b : "start"], justifyContent[(_c = column.align) != null ? _c : "start"], InfiniteTableCellClassName, CellCls2, shifting ? `${InfiniteTableCellClassName}--shifting ${CellClsVariants.shifting}` : "")
-  }), beforeChildren, cssEllipsis ? /* @__PURE__ */ React10.createElement("div", {
-    className: `${rootClassName2}Cell_content ${cssEllipsisClassName}`
-  }, children) : children, afterChildren);
+    className: join(domProps.className, columnAlignCellStyle[(_b = column.align) != null ? _b : "start"], justifyContent[(_c = column.align) != null ? _c : "start"], InfiniteTableCellClassName, ColumnCellCls, shifting ? `${InfiniteTableCellClassName}--shifting ${CellClsVariants.shifting}` : "")
+  }), beforeChildren, /* @__PURE__ */ React10.createElement("div", {
+    className: `${InfiniteTableCellContentClassName} ${cssEllipsis ? cssEllipsisClassName : overflow.hidden}`
+  }, children), afterChildren);
 }
 var InfiniteTableCell = React10.memo(InfiniteTableCellFn);
 
 // src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
-var import_binary_search = __toModule(require_binary_search());
+var import_binary_search2 = __toModule(require_binary_search());
 var import_react20 = __toModule(require("react"));
 
 // src/components/InfiniteTable/utils/moveXatY.ts
@@ -4794,7 +5263,7 @@ var useColumnPointerEvents = ({
       const columnPinned = column.computedPinned;
       let currentPos = dir === -1 ? column.computedAbsoluteOffset + diffX : column.computedAbsoluteOffset + column.computedWidth + diffX;
       const breakpoints = breakpointsRef.current;
-      let index = (0, import_binary_search.default)(breakpoints, currentPos, ({ breakpoint }, value) => {
+      let index = (0, import_binary_search2.default)(breakpoints, currentPos, ({ breakpoint }, value) => {
         return breakpoint < value ? -1 : breakpoint > value ? 1 : 0;
       });
       if (index < 0) {
@@ -4912,6 +5381,7 @@ var defaultLineStyle = {
   marginBottom: 2,
   transition: `width 0.25s, opacity 0.25s`
 };
+var InfiniteTableIconClassName = "InfiniteTableIcon";
 function SortIcon(props) {
   var _a;
   const [rendered, setRendered] = (0, import_react21.useState)(true);
@@ -4961,7 +5431,7 @@ function SortIcon(props) {
   }
   return /* @__PURE__ */ React11.createElement("div", {
     style: __spreadProps(__spreadValues({}, style), { width: size }),
-    className: join(className, "ITableIcon", "ITableIcon-sort")
+    className: join(className, InfiniteTableIconClassName, `${InfiniteTableIconClassName}-sort`)
   }, showIndex ? /* @__PURE__ */ React11.createElement("div", {
     "data-name": "index",
     style: indexStyle
@@ -4981,7 +5451,7 @@ var defaultStyle = {
   top: 0
 };
 var { rootClassName: rootClassName3 } = internalProps;
-var baseCls = `${rootClassName3}HeaderCell`;
+var InfiniteTableHeaderCellClassName = `${rootClassName3}HeaderCell`;
 function InfiniteTableHeaderCell(props) {
   var _a, _b, _c, _d;
   const column = props.column;
@@ -5003,7 +5473,7 @@ function InfiniteTableHeaderCell(props) {
   header = header != null ? header : column.name;
   const sortTool = /* @__PURE__ */ React12.createElement(SortIcon, {
     index: column.computedMultiSort ? column.computedSortIndex + 1 : void 0,
-    className: `${baseCls}__sort-icon ${HeaderSortIconCls}`,
+    className: `${InfiniteTableHeaderCellClassName}__sort-icon ${HeaderSortIconCls}`,
     direction: column.computedSorted ? column.computedSortedAsc ? 1 : -1 : 0
   });
   const domRef = (0, import_react22.useRef)(null);
@@ -5040,7 +5510,7 @@ function InfiniteTableHeaderCell(props) {
   let draggingProxy = null;
   if (dragging) {
     draggingProxy = /* @__PURE__ */ React12.createElement("div", {
-      className: `${baseCls}Proxy ${HeaderCellProxy}`,
+      className: `${InfiniteTableHeaderCellClassName}Proxy ${HeaderCellProxy}`,
       style: {
         position: "absolute",
         height: headerHeight,
@@ -5061,7 +5531,7 @@ function InfiniteTableHeaderCell(props) {
     offset,
     onPointerDown,
     onPointerUp,
-    className: join(baseCls, userSelect.none, column.computedSortable ? cursor.pointer : "", useCellClassName(column, [baseCls, InfiniteTableCellClassName], HeaderCellRecipe, { dragging }), CellCls),
+    className: join(InfiniteTableHeaderCellClassName, userSelect.none, column.computedSortable ? cursor.pointer : "", useCellClassName(column, [InfiniteTableHeaderCellClassName, InfiniteTableCellClassName], HeaderCellRecipe, { dragging }), CellCls),
     cssEllipsis: (_d = (_c = column.headerCssEllipsis) != null ? _c : column.cssEllipsis) != null ? _d : true,
     afterChildren: sortTool
   }, header), draggingProxy);
@@ -5933,7 +6403,7 @@ function SpacePlaceholderFn(props) {
 var SpacePlaceholder = React22.memo(SpacePlaceholderFn);
 
 // src/components/InfiniteTable/hooks/useListRendering.tsx
-var import_react41 = __toModule(require("react"));
+var import_react40 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useUnpinnedRendering.tsx
 var React28 = __toModule(require("react"));
@@ -6530,801 +7000,357 @@ var useOnContainerScroll = ({
     scrollingRef.current = scrolling;
     if (scrolling) {
       if (timeoutIdRef.current) {
-        clearTimeout(timeoutIdRef.current);
-      }
-      timeoutIdRef.current = setTimeout(() => {
-        setScrolling(false);
-        timeoutIdRef.current = 0;
-      }, scrollStopDelay);
-    }
-    if (prevScrolling !== scrolling) {
-      if (!scrolling) {
-        const range = verticalVirtualBrain.getRenderRange();
-        onScrollStop({
-          scrollTop: scrollPositionRef.current.scrollTop,
-          firstVisibleRowIndex: range.renderStartIndex,
-          lastVisibleRowIndex: range.renderEndIndex
-        });
-      }
-      const classList = (_a = domRef.current) == null ? void 0 : _a.classList;
-      if (!classList) {
-        return;
-      }
-      if (scrolling) {
-        classList.add(InfiniteClsScrolling, TableClassName__Scrolling);
-      } else {
-        classList.remove(InfiniteClsScrolling, TableClassName__Scrolling);
-      }
-    }
-  }, [scrollStopDelay, onScrollStop]);
-  const onContainerScroll = (0, import_react34.useCallback)((scrollInfo) => {
-    verticalVirtualBrain.setScrollPosition(scrollInfo);
-    horizontalVirtualBrain.setScrollPosition(scrollInfo);
-    setScrolling(true);
-  }, [
-    horizontalVirtualBrain,
-    verticalVirtualBrain,
-    domRef.current,
-    setScrolling
-  ]);
-  const scrollPositionRef = (0, import_react34.useRef)({
-    scrollLeft: 0,
-    scrollTop: 0
-  });
-  const applyScrollHorizontal = (0, import_react34.useCallback)(({ scrollLeft }) => {
-    scrollPositionRef.current.scrollLeft = scrollLeft;
-    onContainerScroll(scrollPositionRef.current);
-  }, [onContainerScroll]);
-  const applyScrollVertical = (0, import_react34.useCallback)(({ scrollTop }) => {
-    scrollPositionRef.current.scrollTop = scrollTop;
-    onContainerScroll(scrollPositionRef.current);
-    if (scrollTop === 0) {
-      onScrollToTop == null ? void 0 : onScrollToTop();
-    }
-    const offset = scrollToBottomOffset != null ? scrollToBottomOffset : SCROLL_BOTTOM_OFFSET;
-    const isScrollBottom = scrollTop + offset >= scrollTopMaxRef.current;
-    if (isScrollBottom) {
-      onScrollToBottom == null ? void 0 : onScrollToBottom();
-      if (getDataSourceState().livePagination) {
-        dataSourceActions.cursorId = Date.now();
-      }
-    }
-  }, [onContainerScroll, scrollToBottomOffset, onScrollToBottom, onScrollToTop]);
-  return {
-    applyScrollHorizontal,
-    applyScrollVertical
-  };
-};
-
-// src/components/InfiniteTable/hooks/usePinnedRendering.tsx
-var React30 = __toModule(require("react"));
-var import_react37 = __toModule(require("react"));
-
-// src/components/VirtualList/RowListWithExternalScrolling.tsx
-var React29 = __toModule(require("react"));
-var import_react36 = __toModule(require("react"));
-
-// src/components/hooks/useOnMount.ts
-var import_react35 = __toModule(require("react"));
-function useOnMount(domRef, props) {
-  (0, import_react35.useEffect)(() => {
-    const { onMount, onUnmount } = props;
-    const node = domRef == null ? void 0 : domRef.current;
-    onMount == null ? void 0 : onMount(node);
-    return () => {
-      onUnmount == null ? void 0 : onUnmount(node);
-    };
-  }, []);
-}
-
-// src/components/VirtualList/InfiniteListRootClassName.ts
-var InfiniteListRootClassName = "InfiniteList";
-
-// src/components/VirtualList/RowListWithExternalScrolling.tsx
-var rootClassName10 = InfiniteListRootClassName;
-var defaultClasses = [
-  willChange.transform,
-  position.relative,
-  transform.translateZero
-];
-var RowListWithExternalScrolling = (props) => {
-  const {
-    renderRow,
-    repaintId,
-    brain,
-    updateScroll,
-    style,
-    className,
-    onMount,
-    onUnmount
-  } = props;
-  const domRef = (0, import_react36.useRef)(null);
-  const renderItem = (0, import_react36.useCallback)((renderProps) => renderRow({
-    domRef: renderProps.domRef,
-    rowHeight: renderProps.itemSize,
-    rowIndex: renderProps.itemIndex
-  }), [renderRow]);
-  useOnMount(domRef, {
-    onMount,
-    onUnmount
-  });
-  (0, import_react36.useEffect)(() => {
-    const onScroll = (scrollPosition) => {
-      const node = domRef.current;
-      if (node) {
-        if (true) {
-          const { renderStartIndex, renderEndIndex } = brain.getRenderRange();
-          node.dataset.renderStartIndex = renderStartIndex;
-          node.dataset.renderEndIndex = renderEndIndex;
-        }
-        if (updateScroll) {
-          updateScroll(node, scrollPosition);
-        } else {
-          node.style.transform = `translate3d(${-scrollPosition.scrollLeft}px, ${-scrollPosition.scrollTop}px, 0px)`;
-        }
-      }
-    };
-    const removeOnScroll = brain.onScroll(onScroll);
-    return () => {
-      removeOnScroll();
-    };
-  }, [brain]);
-  const domProps = {
-    ref: domRef,
-    style,
-    className: join(className, rootClassName10, `${rootClassName10}--vertical`, VirtualListCls, VirtualListClsOrientation.vertical, ...defaultClasses)
-  };
-  if (true) {
-    domProps["data-cmp-name"] = "RowListWithExternalScrolling";
-  }
-  return /* @__PURE__ */ React29.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React29.createElement(RawList, {
-    brain,
-    renderItem,
-    repaintId
-  }));
-};
-
-// src/components/InfiniteTable/hooks/usePinnedRendering.tsx
-var UPDATE_SCROLL3 = (node, brainScrollPosition, horizontalPinnedScrollPosition) => {
-  node.style.transform = `translate3d(${horizontalPinnedScrollPosition ? -horizontalPinnedScrollPosition.scrollLeft : 0}px, ${-brainScrollPosition.scrollTop}px, 0px)`;
-};
-var PinnedRowsContainerClassName = `InfinitePinnedRows`;
-function PinnedRowsContainer(props) {
-  const {
-    maxWidth,
-    pinning,
-    rowWidth,
-    height,
-    pinnedScrollListener,
-    hasOverflow,
-    brain,
-    renderRow
-  } = props;
-  const style = React30.useMemo(() => {
-    const result = pinning === "end" ? {
-      width: rowWidth,
-      height,
-      right: 0
-    } : {};
-    if (!hasOverflow && pinning === "end") {
-      result.position = "absolute";
-    }
-    if (hasOverflow) {
-      result.height = getScrollbarWidth();
-      result.width = getScrollbarWidth();
-    }
-    return result;
-  }, [height, rowWidth, pinning, hasOverflow]);
-  const updateScroll = (0, import_react37.useCallback)((node, scrollPosition) => {
-    UPDATE_SCROLL3(node, scrollPosition, hasOverflow ? pinnedScrollListener.getScrollPosition() : void 0);
-  }, [hasOverflow, pinnedScrollListener]);
-  const rowListProps = {
-    style,
-    brain,
-    renderRow,
-    updateScroll,
-    className: join(`${PinnedRowsContainerClassName}`, PinnedRowsClsVariants[pinning === "start" ? "pinnedStart" : "pinnedEnd"], `${PinnedRowsContainerClassName}--pinned-${pinning}`, `${PinnedRowsContainerClassName}--overflow`, PinnedRowsClsVariants.overflow)
-  };
-  if (hasOverflow) {
-    return /* @__PURE__ */ React30.createElement(VirtualScrollContainer, {
-      scrollable: {
-        horizontal: true,
-        vertical: false
-      },
-      style: {
-        width: maxWidth,
-        height,
-        position: "absolute",
-        [pinning === "start" ? "left" : "right"]: 0,
-        [pinning === "start" ? "right" : "left"]: "unset"
-      },
-      onContainerScroll: pinnedScrollListener == null ? void 0 : pinnedScrollListener.setScrollPosition,
-      className: join(PinnedRowsContainerClsVariants({
-        pinned: pinning
-      }), `${PinnedRowsContainerClassName}Container`, `${PinnedRowsContainerClassName}Container--pinned-${pinning}`)
-    }, /* @__PURE__ */ React30.createElement(RowListWithExternalScrolling, __spreadProps(__spreadValues({}, rowListProps), {
-      onMount: (node) => {
-        pinnedScrollListener == null ? void 0 : pinnedScrollListener.onScroll((scrollPosition) => {
-          updateScroll(node, brain.getScrollPosition(), scrollPosition);
-        });
-      }
-    })), /* @__PURE__ */ React30.createElement(SpacePlaceholder, {
-      width: rowWidth,
-      height: 1
-    }));
-  }
-  return /* @__PURE__ */ React30.createElement(RowListWithExternalScrolling, __spreadValues({}, rowListProps));
-}
-function useRenderPinnedRow(params) {
-  const { getData, getState, columnsWidth, columns, rowSpan, verticalBrain } = params;
-  const renderPinnedRow = (0, import_react37.useCallback)((rowParams) => {
-    const dataArray = getData();
-    const rowInfo = dataArray[rowParams.rowIndex];
-    const { showZebraRows, showHoverRows } = getState();
-    const rowProps = __spreadValues({
-      rowInfo,
-      getData,
-      showZebraRows,
-      showHoverRows,
-      toggleGroupRow: params.toggleGroupRow,
-      virtualizeColumns: false,
-      verticalBrain,
-      brain: null,
-      rowSpan,
-      rowWidth: columnsWidth,
-      columns
-    }, rowParams);
-    return /* @__PURE__ */ React30.createElement(TableRowUnvirtualized, __spreadValues({}, rowProps));
-  }, [columnsWidth, columns, verticalBrain]);
-  return renderPinnedRow;
-}
-function usePinnedRenderingForSide(side, params) {
-  const {
-    getState,
-    getData,
-    rowHeight,
-    bodySize,
-    computedPinnedEndColumns,
-    computedPinnedEndColumnsWidth,
-    computedPinnedStartColumns,
-    computedPinnedStartColumnsWidth,
-    verticalVirtualBrain,
-    computedPinnedEndWidth,
-    computedPinnedEndOverflow,
-    computedPinnedStartWidth,
-    computedPinnedStartOverflow,
-    pinnedStartScrollListener,
-    pinnedEndScrollListener,
-    rowSpan,
-    repaintId,
-    toggleGroupRow,
-    scrollbars: {
-      vertical: hasVerticalScrollbar,
-      horizontal: hasHorizontalScrollbar
-    }
-  } = params;
-  const count = getData().length;
-  const rowWidth = side === "start" ? computedPinnedStartColumnsWidth : computedPinnedEndColumnsWidth;
-  const columns = side === "start" ? computedPinnedStartColumns : computedPinnedEndColumns;
-  const columnsWidth = side === "start" ? computedPinnedStartColumnsWidth : computedPinnedEndColumnsWidth;
-  const maxWidth = side === "start" ? computedPinnedStartWidth : computedPinnedEndWidth;
-  const hasOverflow = side === "start" ? computedPinnedStartOverflow : computedPinnedEndOverflow;
-  const pinnedScrollListener = side === "start" ? pinnedStartScrollListener : pinnedEndScrollListener;
-  const renderRowPinned = useRenderPinnedRow({
-    getData,
-    getState,
-    toggleGroupRow,
-    rowSpan,
-    verticalBrain: verticalVirtualBrain,
-    columns,
-    columnsWidth
-  });
-  const pinnedList = columns.length && rowHeight !== 0 ? /* @__PURE__ */ React30.createElement(PinnedRowsContainer, {
-    pinning: side,
-    pinnedScrollListener,
-    hasOverflow,
-    rowHeight,
-    rowWidth,
-    maxWidth,
-    height: bodySize.height,
-    count,
-    repaintId: `${repaintId}-pin-${side}-${rowHeight}`,
-    brain: verticalVirtualBrain,
-    renderRow: renderRowPinned
-  }) : null;
-  const pinnedScrollbarPlaceholder = pinnedList && hasHorizontalScrollbar && !hasOverflow ? /* @__PURE__ */ React30.createElement(HorizontalScrollbarPlaceholder, {
-    style: side === "end" ? {
-      width: columnsWidth,
-      right: hasVerticalScrollbar ? getScrollbarWidth() : 0
-    } : {
-      width: columnsWidth,
-      left: 0
-    }
-  }) : null;
-  return {
-    renderRowPinned,
-    pinnedList,
-    pinnedScrollbarPlaceholder
-  };
-}
-function usePinnedEndRendering(params) {
-  const {
-    renderRowPinned: renderRowPinnedEnd,
-    pinnedList: pinnedEndList,
-    pinnedScrollbarPlaceholder: pinnedEndScrollbarPlaceholder
-  } = usePinnedRenderingForSide("end", params);
-  return {
-    renderRowPinnedEnd,
-    pinnedEndList,
-    pinnedEndScrollbarPlaceholder
-  };
-}
-function usePinnedStartRendering(params) {
-  const {
-    renderRowPinned: renderRowPinnedStart,
-    pinnedList: pinnedStartList,
-    pinnedScrollbarPlaceholder: pinnedStartScrollbarPlaceholder
-  } = usePinnedRenderingForSide("start", params);
-  const result = {
-    renderRowPinnedStart,
-    pinnedStartList,
-    pinnedStartScrollbarPlaceholder
-  };
-  return result;
-}
-
-// src/components/InfiniteTable/hooks/useYourBrain.ts
-var import_react40 = __toModule(require("react"));
-
-// src/components/hooks/useOnce.ts
-var import_react38 = __toModule(require("react"));
-function useOnce(fn) {
-  const onceFn = (0, import_react38.useMemo)(() => {
-    return once(fn);
-  }, []);
-  return onceFn();
-}
-
-// src/components/VirtualBrain/index.ts
-var import_binary_search2 = __toModule(require_binary_search());
-var initialScrollPosition2 = {
-  scrollLeft: 0,
-  scrollTop: 0
-};
-var raf = typeof window !== "undefined" ? requestAnimationFrame : (fn) => setTimeout(fn, 0);
-var ItemIndexBag = Object.seal({ itemIndex: 0 });
-var SORT_ASC = (a, b) => a - b;
-var VirtualBrain = class extends Logger {
-  constructor(options) {
-    super(`VirtualBrain:${options.mainAxis}`);
-    this.scrollPosition = initialScrollPosition2;
-    this.scrollPositionOnMainAxis = 0;
-    this.destroyed = false;
-    this.totalSize = 0;
-    this.onScrollFns = [];
-    this.onTotalSizeChangeFns = [];
-    this.onRenderCountChangeFns = [];
-    this.onRenderRangeChangeFns = [];
-    this.onDestroyFns = [];
-    this.renderCount = 0;
-    this.renderRange = {
-      renderStartIndex: -1,
-      renderEndIndex: -1
-    };
-    this.availableSize = { width: 0, height: 0 };
-    this.setAvailableSize = (size) => {
-      this.availableSize = size;
-      if (true) {
-        this.debug("New available size %d", size[this.options.mainAxis === "vertical" ? "height" : "width"]);
-      }
-      this.updateRenderCount();
-    };
-    this.computeRenderCount = ({
-      itemSize,
-      count,
-      size
-    }) => {
-      let renderCount = 0;
-      if (typeof itemSize === "function") {
-        const sizes = [];
-        for (let i = 0; i < count; i++) {
-          sizes.push(this.getItemSize(i));
-        }
-        sizes.sort(SORT_ASC);
-        let sum = 0;
-        for (let i = 0; i < count; i++) {
-          sum += sizes[i];
-          renderCount++;
-          if (sum > size) {
-            break;
-          }
-        }
-        renderCount += 1;
-      } else {
-        renderCount = Math.ceil(size / itemSize) + 1;
-      }
-      renderCount = Math.min(count, renderCount);
-      return renderCount;
-    };
-    this.setRenderCount = (renderCount) => {
-      if (renderCount === this.renderCount) {
-        this.notifyTotalSizeChange();
-        return;
-      }
-      if (true) {
-        this.debug("set renderCount to %d", renderCount);
-      }
-      this.renderCount = renderCount;
-      this.updateRenderRange();
-      this.notifyRenderCountChange();
-      this.notifyTotalSizeChange();
-    };
-    this.getRenderCount = () => {
-      var _a;
-      return (_a = this.renderCount) != null ? _a : 0;
-    };
-    this.setScrollPosition = (scrollPosition) => {
-      this.scrollPosition = scrollPosition;
-      const oldScrollPosOnMainAxis = this.scrollPositionOnMainAxis;
-      this.scrollPositionOnMainAxis = this.scrollPosition[this.options.mainAxis === "vertical" ? "scrollTop" : "scrollLeft"];
-      if (this.scrollPositionOnMainAxis !== oldScrollPosOnMainAxis) {
-        this.updateRenderRange();
-      }
-      this.notifyScrollChange();
-    };
-    this.getRenderRange = () => {
-      return this.renderRange;
-    };
-    this.getScrollPosition = () => {
-      return this.scrollPosition;
-    };
-    this.onScroll = (fn) => {
-      this.onScrollFns.push(fn);
-      return () => {
-        this.onScrollFns = this.onScrollFns.filter((f) => f !== fn);
-      };
-    };
-    this.onTotalSizeChange = (fn) => {
-      this.onTotalSizeChangeFns.push(fn);
-      return () => {
-        this.onTotalSizeChangeFns = this.onTotalSizeChangeFns.filter((f) => f !== fn);
-      };
-    };
-    this.onRenderCountChange = (fn) => {
-      this.onRenderCountChangeFns.push(fn);
-      return () => {
-        this.onRenderCountChangeFns = this.onRenderCountChangeFns.filter((f) => f !== fn);
-      };
-    };
-    this.onRenderRangeChange = (fn) => {
-      this.onRenderRangeChangeFns.push(fn);
-      return () => {
-        this.onRenderRangeChangeFns = this.onRenderRangeChangeFns.filter((f) => f !== fn);
-      };
-    };
-    this.onDestroy = (fn) => {
-      this.onDestroyFns.push(fn);
-      return () => {
-        this.onDestroyFns = this.onDestroyFns.filter((f) => f !== fn);
-      };
-    };
-    this.update = (newCount, newItemSize, newItemSpan) => {
-      const { itemSize, count, itemSpan } = this.options;
-      const countChange = count !== newCount;
-      const itemSizeChange = itemSize !== newItemSize;
-      const itemSpanChange = itemSpan !== newItemSpan;
-      if (!countChange && !itemSizeChange && !itemSpanChange) {
-        return;
-      }
-      this.options.count = newCount;
-      this.options.itemSize = newItemSize;
-      this.options.itemSpan = newItemSpan;
-      const size = this.availableSize[this.options.mainAxis === "vertical" ? "height" : "width"];
-      const newRenderCount = this.computeRenderCount({
-        itemSize: newItemSize,
-        count: newCount,
-        size
-      });
-      if (!itemSizeChange && !itemSpanChange && countChange && newCount > count) {
-        const currentRenderCount = this.getRenderCount();
-        if (currentRenderCount > newRenderCount) {
-          return;
-        }
-      }
-      if (true) {
-        if (itemSizeChange && countChange) {
-          this.debug(`Reset brain: reason itemSize changed and count changed (old ${count}, new ${newCount})`, {
-            oldItemSize: itemSize,
-            newItemSize
-          });
-        } else if (itemSizeChange) {
-          this.debug(`Reset brain: reason itemSize changed`, {
-            oldItemSize: itemSize,
-            newItemSize
-          });
-        } else if (countChange) {
-          this.debug(`Reset brain: reason count changed (old ${count}, new ${newCount})`);
-        }
-      }
-      this.reset();
-      this.updateRenderCount(newRenderCount);
-    };
-    this.reset = () => {
-      this.itemSpanParent = [];
-      this.itemSpanValue = [];
-      this.itemSizeCache = [];
-      this.itemOffsetCache = [0];
-      this.renderCount = -1;
-      this.totalSize = 0;
-    };
-    this.computeItemSpanUpTo = (itemIndex) => {
-      const { count, itemSpan } = this.options;
-      if (!itemSpan) {
-        return;
-      }
-      const cache = this.itemSpanParent;
-      const spanResultArr = this.itemSpanValue;
-      if (cache[itemIndex] === void 0) {
-        let i = cache.length;
-        let lastIndex = Math.min(itemIndex, count - 1);
-        for (; i <= lastIndex; i++) {
-          if (cache[i] === void 0) {
-            ItemIndexBag.itemIndex = i;
-            let spanValue = itemSpan(ItemIndexBag);
-            if (spanValue < 1) {
-              this.debug("itemSpan cannot be less than 1 - got %d for index %d", spanValue, i);
-            }
-            cache[i] = i;
-            spanResultArr[i] = spanValue;
-            let spannedItemIndex = i;
-            while (spanValue > 1) {
-              spannedItemIndex += 1;
-              cache[spannedItemIndex] = i;
-              spanResultArr[spannedItemIndex] = 0;
-              spanValue -= 1;
-            }
-          }
-        }
-      }
-    };
-    this.computeCacheFor = (itemIndex) => {
-      if (typeof this.options.itemSize !== "function") {
-        return;
-      }
-      const itemSize = this.options.itemSize(itemIndex);
-      this.itemSizeCache[itemIndex] = itemSize;
-      if (itemIndex > 0) {
-        const prevOffset = this.itemOffsetCache[itemIndex - 1];
-        const prevSize = this.itemSizeCache[itemIndex - 1];
-        if (prevOffset == null) {
-          console.error(`Offset was not available for item ${itemIndex - 1}`);
-        }
-        if (prevSize == null) {
-          console.error(`Size was not available for item ${itemIndex - 1}`);
-        }
-        const offset = prevOffset + prevSize;
-        this.itemOffsetCache[itemIndex] = offset;
-      }
-    };
-    this.getItemSpan = (itemIndex) => {
-      if (!this.options.itemSpan) {
-        return 1;
-      }
-      if (this.itemSpanValue[itemIndex] === void 0) {
-        this.computeItemSpanUpTo(itemIndex);
-      }
-      return this.itemSpanValue[itemIndex] || 1;
-    };
-    this.getItemSpanParent = (itemIndex) => {
-      if (!this.options.itemSpan) {
-        return itemIndex;
-      }
-      if (this.itemSpanParent[itemIndex] === void 0) {
-        this.computeItemSpanUpTo(itemIndex);
-      }
-      return this.itemSpanParent[itemIndex];
-    };
-    this.getItemSizeWithSpan = (itemIndex, itemSpan) => {
-      let itemSize = this.getItemSize(itemIndex);
-      while (itemSpan > 1) {
-        itemIndex += 1;
-        itemSpan -= 1;
-        itemSize += this.getItemSize(itemIndex);
-      }
-      return itemSize;
-    };
-    this.getItemSize = (itemIndex) => {
-      const { itemSize, count } = this.options;
-      if (typeof itemSize !== "function") {
-        return itemSize;
-      }
-      let cachedSize = this.getItemSizeCacheFor(itemIndex);
-      if (cachedSize === void 0) {
-        let i = this.itemSizeCache.length;
-        let lastIndex = Math.min(itemIndex, count - 1);
-        for (; i <= lastIndex; i++) {
-          this.computeCacheFor(i);
-        }
-        cachedSize = this.getItemSizeCacheFor(itemIndex);
-      }
-      return cachedSize;
-    };
-    this.getTotalSize = () => {
-      const { count, itemSize } = this.options;
-      if (typeof itemSize !== "function") {
-        return itemSize * count;
-      }
-      if (this.totalSize !== 0) {
-        return this.totalSize;
-      }
-      const lastItemSize = this.getItemSize(count - 1);
-      const lastItemOffset = this.itemOffsetCache[count - 1];
-      return this.totalSize = lastItemSize + lastItemOffset;
-    };
-    this.getItemAt = (scrollPos) => {
-      const { itemSize, count } = this.options;
-      if (typeof itemSize !== "function") {
-        return Math.min(Math.max(0, Math.floor(scrollPos / itemSize)), count - 1);
-      }
-      let lastOffsetIndex = this.itemOffsetCache.length - 1;
-      let lastSizeIndex = this.itemSizeCache.length - 1;
-      let lastOffset = this.itemOffsetCache[lastOffsetIndex];
-      let _prev;
-      while (lastOffset < scrollPos) {
-        if (lastOffsetIndex >= count) {
-          return count - 1;
-        }
-        lastSizeIndex += 1;
-        this.computeCacheFor(lastSizeIndex);
-        _prev = lastOffset;
-        lastOffset = this.itemOffsetCache[lastSizeIndex];
-        if (_prev === lastOffset && _prev != 0) {
-          return count - 1;
-        }
-      }
-      const searchResult = (0, import_binary_search2.default)(this.itemOffsetCache, scrollPos, SORT_ASC);
-      if (searchResult >= 0) {
-        return searchResult;
-      }
-      return ~searchResult - 1;
-    };
-    this.getItemOffsetFor = (itemIndex) => {
-      if (typeof this.options.itemSize !== "function") {
-        return itemIndex * this.options.itemSize;
-      }
-      let result = this.itemOffsetCache[itemIndex];
-      if (result == null) {
-        let lastSizeIndex = this.itemSizeCache.length - 1;
-        while (lastSizeIndex < itemIndex) {
-          lastSizeIndex += 1;
-          this.computeCacheFor(lastSizeIndex);
-        }
-        result = this.itemOffsetCache[itemIndex];
+        clearTimeout(timeoutIdRef.current);
       }
-      return result;
-    };
-    this.destroy = () => {
-      if (this.destroyed) {
+      timeoutIdRef.current = setTimeout(() => {
+        setScrolling(false);
+        timeoutIdRef.current = 0;
+      }, scrollStopDelay);
+    }
+    if (prevScrolling !== scrolling) {
+      if (!scrolling) {
+        const range = verticalVirtualBrain.getRenderRange();
+        onScrollStop({
+          scrollTop: scrollPositionRef.current.scrollTop,
+          firstVisibleRowIndex: range.renderStartIndex,
+          lastVisibleRowIndex: range.renderEndIndex
+        });
+      }
+      const classList = (_a = domRef.current) == null ? void 0 : _a.classList;
+      if (!classList) {
         return;
       }
-      this.notifyDestroy();
-      this.reset();
-      this.destroyed = true;
-      this.onDestroyFns = [];
-      this.onScrollFns = [];
-      this.onTotalSizeChangeFns = [];
-      this.onRenderCountChangeFns = [];
-      this.onRenderRangeChangeFns = [];
-    };
-    this.options = options;
-    this.reset();
-    this.renderCount = 0;
-    this.debug(`Init ${options.mainAxis}`);
-  }
-  getOptions() {
-    return this.options;
-  }
-  updateRenderCount(renderCount) {
-    const { itemSize, mainAxis, count } = this.options;
-    const size = this.availableSize[mainAxis === "vertical" ? "height" : "width"];
-    if (!size) {
-      this.setRenderCount(0);
-      return;
-    }
-    this.setRenderCount(renderCount != null ? renderCount : this.computeRenderCount({ itemSize, count, size }));
-  }
-  updateRenderRange() {
-    this.setRenderRange(this.computeRenderRange());
-  }
-  getRenderStartIndex() {
-    return this.renderRange.renderStartIndex;
-  }
-  notifyScrollChange() {
-    const { scrollPosition } = this;
-    const fns = this.onScrollFns;
-    for (let i = 0, len = fns.length; i < len; i++) {
-      fns[i](scrollPosition);
-    }
-  }
-  notifyDestroy() {
-    const fns = this.onDestroyFns;
-    for (let i = 0, len = fns.length; i < len; i++) {
-      fns[i]();
-    }
-  }
-  notifyTotalSizeChange() {
-    const totalSize = this.getTotalSize();
-    const fns = this.onTotalSizeChangeFns;
-    for (let i = 0, len = fns.length; i < len; i++) {
-      raf(() => {
-        fns[i](totalSize);
-      });
-    }
-  }
-  notifyRenderCountChange() {
-    const { renderCount } = this;
-    const fns = this.onRenderCountChangeFns;
-    for (let i = 0, len = fns.length; i < len; i++) {
-      raf(() => {
-        fns[i](renderCount);
-      });
+      if (scrolling) {
+        classList.add(InfiniteClsScrolling, TableClassName__Scrolling);
+      } else {
+        classList.remove(InfiniteClsScrolling, TableClassName__Scrolling);
+      }
     }
-  }
-  notifyRenderRangeChange() {
-    const { renderRange } = this;
-    const fns = this.onRenderRangeChangeFns;
-    for (let i = 0, len = fns.length; i < len; i++) {
-      raf(() => {
-        fns[i](renderRange);
-      });
+  }, [scrollStopDelay, onScrollStop]);
+  const onContainerScroll = (0, import_react34.useCallback)((scrollInfo) => {
+    verticalVirtualBrain.setScrollPosition(scrollInfo);
+    horizontalVirtualBrain.setScrollPosition(scrollInfo);
+    setScrolling(true);
+  }, [
+    horizontalVirtualBrain,
+    verticalVirtualBrain,
+    domRef.current,
+    setScrolling
+  ]);
+  const scrollPositionRef = (0, import_react34.useRef)({
+    scrollLeft: 0,
+    scrollTop: 0
+  });
+  const applyScrollHorizontal = (0, import_react34.useCallback)(({ scrollLeft }) => {
+    scrollPositionRef.current.scrollLeft = scrollLeft;
+    onContainerScroll(scrollPositionRef.current);
+  }, [onContainerScroll]);
+  const applyScrollVertical = (0, import_react34.useCallback)(({ scrollTop }) => {
+    scrollPositionRef.current.scrollTop = scrollTop;
+    onContainerScroll(scrollPositionRef.current);
+    if (scrollTop === 0) {
+      onScrollToTop == null ? void 0 : onScrollToTop();
     }
-  }
-  setRenderRange(renderRange) {
-    const { renderStartIndex, renderEndIndex } = this.renderRange;
-    if (renderEndIndex !== renderRange.renderEndIndex || renderStartIndex !== renderRange.renderStartIndex) {
-      this.renderRange = renderRange;
-      if (true) {
-        this.debug("Set renderRange to %d-%d", renderRange.renderStartIndex, renderRange.renderEndIndex);
+    const offset = scrollToBottomOffset != null ? scrollToBottomOffset : SCROLL_BOTTOM_OFFSET;
+    const isScrollBottom = scrollTop + offset >= scrollTopMaxRef.current;
+    if (isScrollBottom) {
+      onScrollToBottom == null ? void 0 : onScrollToBottom();
+      if (getDataSourceState().livePagination) {
+        dataSourceActions.cursorId = Date.now();
       }
-      this.notifyRenderRangeChange();
     }
+  }, [onContainerScroll, scrollToBottomOffset, onScrollToBottom, onScrollToTop]);
+  return {
+    applyScrollHorizontal,
+    applyScrollVertical
+  };
+};
+
+// src/components/InfiniteTable/hooks/usePinnedRendering.tsx
+var React30 = __toModule(require("react"));
+var import_react37 = __toModule(require("react"));
+
+// src/components/VirtualList/RowListWithExternalScrolling.tsx
+var React29 = __toModule(require("react"));
+var import_react36 = __toModule(require("react"));
+
+// src/components/hooks/useOnMount.ts
+var import_react35 = __toModule(require("react"));
+function useOnMount(domRef, props) {
+  (0, import_react35.useEffect)(() => {
+    const { onMount, onUnmount } = props;
+    const node = domRef == null ? void 0 : domRef.current;
+    onMount == null ? void 0 : onMount(node);
+    return () => {
+      onUnmount == null ? void 0 : onUnmount(node);
+    };
+  }, []);
+}
+
+// src/components/VirtualList/InfiniteListRootClassName.ts
+var InfiniteListRootClassName = "InfiniteList";
+
+// src/components/VirtualList/RowListWithExternalScrolling.tsx
+var rootClassName10 = InfiniteListRootClassName;
+var defaultClasses = [
+  willChange.transform,
+  position.relative,
+  transform.translateZero
+];
+var RowListWithExternalScrolling = (props) => {
+  const {
+    renderRow,
+    repaintId,
+    brain,
+    updateScroll,
+    style,
+    className,
+    onMount,
+    onUnmount
+  } = props;
+  const domRef = (0, import_react36.useRef)(null);
+  const renderItem = (0, import_react36.useCallback)((renderProps) => renderRow({
+    domRef: renderProps.domRef,
+    rowHeight: renderProps.itemSize,
+    rowIndex: renderProps.itemIndex
+  }), [renderRow]);
+  useOnMount(domRef, {
+    onMount,
+    onUnmount
+  });
+  (0, import_react36.useEffect)(() => {
+    const onScroll = (scrollPosition) => {
+      const node = domRef.current;
+      if (node) {
+        if (true) {
+          const { renderStartIndex, renderEndIndex } = brain.getRenderRange();
+          node.dataset.renderStartIndex = renderStartIndex;
+          node.dataset.renderEndIndex = renderEndIndex;
+        }
+        if (updateScroll) {
+          updateScroll(node, scrollPosition);
+        } else {
+          node.style.transform = `translate3d(${-scrollPosition.scrollLeft}px, ${-scrollPosition.scrollTop}px, 0px)`;
+        }
+      }
+    };
+    const removeOnScroll = brain.onScroll(onScroll);
+    return () => {
+      removeOnScroll();
+    };
+  }, [brain]);
+  const domProps = {
+    ref: domRef,
+    style,
+    className: join(className, rootClassName10, `${rootClassName10}--vertical`, VirtualListCls, VirtualListClsOrientation.vertical, ...defaultClasses)
+  };
+  if (true) {
+    domProps["data-cmp-name"] = "RowListWithExternalScrolling";
   }
-  computeRenderRange() {
-    const count = this.getOptions().count;
-    let renderCount = this.getRenderCount();
-    if (renderCount === 0) {
-      return {
-        renderStartIndex: -1,
-        renderEndIndex: -1
-      };
+  return /* @__PURE__ */ React29.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React29.createElement(RawList, {
+    brain,
+    renderItem,
+    repaintId
+  }));
+};
+
+// src/components/InfiniteTable/hooks/usePinnedRendering.tsx
+var UPDATE_SCROLL3 = (node, brainScrollPosition, horizontalPinnedScrollPosition) => {
+  node.style.transform = `translate3d(${horizontalPinnedScrollPosition ? -horizontalPinnedScrollPosition.scrollLeft : 0}px, ${-brainScrollPosition.scrollTop}px, 0px)`;
+};
+var PinnedRowsContainerClassName = `InfinitePinnedRows`;
+function PinnedRowsContainer(props) {
+  const {
+    maxWidth,
+    pinning,
+    rowWidth,
+    height,
+    pinnedScrollListener,
+    hasOverflow,
+    brain,
+    renderRow
+  } = props;
+  const style = React30.useMemo(() => {
+    const result = pinning === "end" ? {
+      width: rowWidth,
+      height,
+      right: 0
+    } : {};
+    if (!hasOverflow && pinning === "end") {
+      result.position = "absolute";
     }
-    let renderStartIndex = this.getItemAt(this.scrollPositionOnMainAxis);
-    let renderEndIndex = renderStartIndex + this.renderCount - 1;
-    if (renderEndIndex >= count) {
-      renderEndIndex = count - 1;
-      renderStartIndex = renderEndIndex - renderCount + 1;
+    if (hasOverflow) {
+      result.height = getScrollbarWidth();
+      result.width = getScrollbarWidth();
     }
-    if (this.options.itemSpan) {
-      this.computeItemSpanUpTo(renderStartIndex);
-      while (this.itemSpanParent[renderStartIndex] != renderStartIndex) {
-        renderStartIndex--;
+    return result;
+  }, [height, rowWidth, pinning, hasOverflow]);
+  const updateScroll = (0, import_react37.useCallback)((node, scrollPosition) => {
+    UPDATE_SCROLL3(node, scrollPosition, hasOverflow ? pinnedScrollListener.getScrollPosition() : void 0);
+  }, [hasOverflow, pinnedScrollListener]);
+  const rowListProps = {
+    style,
+    brain,
+    renderRow,
+    updateScroll,
+    className: join(`${PinnedRowsContainerClassName}`, PinnedRowsClsVariants[pinning === "start" ? "pinnedStart" : "pinnedEnd"], `${PinnedRowsContainerClassName}--pinned-${pinning}`, `${PinnedRowsContainerClassName}--overflow`, PinnedRowsClsVariants.overflow)
+  };
+  if (hasOverflow) {
+    return /* @__PURE__ */ React30.createElement(VirtualScrollContainer, {
+      scrollable: {
+        horizontal: true,
+        vertical: false
+      },
+      style: {
+        width: maxWidth,
+        height,
+        position: "absolute",
+        [pinning === "start" ? "left" : "right"]: 0,
+        [pinning === "start" ? "right" : "left"]: "unset"
+      },
+      onContainerScroll: pinnedScrollListener == null ? void 0 : pinnedScrollListener.setScrollPosition,
+      className: join(PinnedRowsContainerClsVariants({
+        pinned: pinning
+      }), `${PinnedRowsContainerClassName}Container`, `${PinnedRowsContainerClassName}Container--pinned-${pinning}`)
+    }, /* @__PURE__ */ React30.createElement(RowListWithExternalScrolling, __spreadProps(__spreadValues({}, rowListProps), {
+      onMount: (node) => {
+        pinnedScrollListener == null ? void 0 : pinnedScrollListener.onScroll((scrollPosition) => {
+          updateScroll(node, brain.getScrollPosition(), scrollPosition);
+        });
       }
-    }
-    return {
-      renderStartIndex,
-      renderEndIndex
-    };
-  }
-  getItemSizeCacheFor(itemIndex) {
-    return this.itemSizeCache[itemIndex];
+    })), /* @__PURE__ */ React30.createElement(SpacePlaceholder, {
+      width: rowWidth,
+      height: 1
+    }));
   }
-};
+  return /* @__PURE__ */ React30.createElement(RowListWithExternalScrolling, __spreadValues({}, rowListProps));
+}
+function useRenderPinnedRow(params) {
+  const { getData, getState, columnsWidth, columns, rowSpan, verticalBrain } = params;
+  const renderPinnedRow = (0, import_react37.useCallback)((rowParams) => {
+    const dataArray = getData();
+    const rowInfo = dataArray[rowParams.rowIndex];
+    const { showZebraRows, showHoverRows } = getState();
+    const rowProps = __spreadValues({
+      rowInfo,
+      getData,
+      showZebraRows,
+      showHoverRows,
+      toggleGroupRow: params.toggleGroupRow,
+      virtualizeColumns: false,
+      verticalBrain,
+      brain: null,
+      rowSpan,
+      rowWidth: columnsWidth,
+      columns
+    }, rowParams);
+    return /* @__PURE__ */ React30.createElement(TableRowUnvirtualized, __spreadValues({}, rowProps));
+  }, [columnsWidth, columns, verticalBrain]);
+  return renderPinnedRow;
+}
+function usePinnedRenderingForSide(side, params) {
+  const {
+    getState,
+    getData,
+    rowHeight,
+    bodySize,
+    computedPinnedEndColumns,
+    computedPinnedEndColumnsWidth,
+    computedPinnedStartColumns,
+    computedPinnedStartColumnsWidth,
+    verticalVirtualBrain,
+    computedPinnedEndWidth,
+    computedPinnedEndOverflow,
+    computedPinnedStartWidth,
+    computedPinnedStartOverflow,
+    pinnedStartScrollListener,
+    pinnedEndScrollListener,
+    rowSpan,
+    repaintId,
+    toggleGroupRow,
+    scrollbars: {
+      vertical: hasVerticalScrollbar,
+      horizontal: hasHorizontalScrollbar
+    }
+  } = params;
+  const count = getData().length;
+  const rowWidth = side === "start" ? computedPinnedStartColumnsWidth : computedPinnedEndColumnsWidth;
+  const columns = side === "start" ? computedPinnedStartColumns : computedPinnedEndColumns;
+  const columnsWidth = side === "start" ? computedPinnedStartColumnsWidth : computedPinnedEndColumnsWidth;
+  const maxWidth = side === "start" ? computedPinnedStartWidth : computedPinnedEndWidth;
+  const hasOverflow = side === "start" ? computedPinnedStartOverflow : computedPinnedEndOverflow;
+  const pinnedScrollListener = side === "start" ? pinnedStartScrollListener : pinnedEndScrollListener;
+  const renderRowPinned = useRenderPinnedRow({
+    getData,
+    getState,
+    toggleGroupRow,
+    rowSpan,
+    verticalBrain: verticalVirtualBrain,
+    columns,
+    columnsWidth
+  });
+  const pinnedList = columns.length && rowHeight !== 0 ? /* @__PURE__ */ React30.createElement(PinnedRowsContainer, {
+    pinning: side,
+    pinnedScrollListener,
+    hasOverflow,
+    rowHeight,
+    rowWidth,
+    maxWidth,
+    height: bodySize.height,
+    count,
+    repaintId: `${repaintId}-pin-${side}-${rowHeight}`,
+    brain: verticalVirtualBrain,
+    renderRow: renderRowPinned
+  }) : null;
+  const pinnedScrollbarPlaceholder = pinnedList && hasHorizontalScrollbar && !hasOverflow ? /* @__PURE__ */ React30.createElement(HorizontalScrollbarPlaceholder, {
+    style: side === "end" ? {
+      width: columnsWidth,
+      right: hasVerticalScrollbar ? getScrollbarWidth() : 0
+    } : {
+      width: columnsWidth,
+      left: 0
+    }
+  }) : null;
+  return {
+    renderRowPinned,
+    pinnedList,
+    pinnedScrollbarPlaceholder
+  };
+}
+function usePinnedEndRendering(params) {
+  const {
+    renderRowPinned: renderRowPinnedEnd,
+    pinnedList: pinnedEndList,
+    pinnedScrollbarPlaceholder: pinnedEndScrollbarPlaceholder
+  } = usePinnedRenderingForSide("end", params);
+  return {
+    renderRowPinnedEnd,
+    pinnedEndList,
+    pinnedEndScrollbarPlaceholder
+  };
+}
+function usePinnedStartRendering(params) {
+  const {
+    renderRowPinned: renderRowPinnedStart,
+    pinnedList: pinnedStartList,
+    pinnedScrollbarPlaceholder: pinnedStartScrollbarPlaceholder
+  } = usePinnedRenderingForSide("start", params);
+  const result = {
+    renderRowPinnedStart,
+    pinnedStartList,
+    pinnedStartScrollbarPlaceholder
+  };
+  return result;
+}
 
-// src/components/InfiniteTable/hooks/useColumnSizeFn.ts
+// src/components/InfiniteTable/hooks/useYourBrain.ts
 var import_react39 = __toModule(require("react"));
+
+// src/components/InfiniteTable/hooks/useColumnSizeFn.ts
+var import_react38 = __toModule(require("react"));
 var debug5 = dbg("useColumnSizeFn");
 function useColumnSizeFn(computedUnpinnedColumns) {
-  const columnSize = (0, import_react39.useCallback)((index) => {
+  const columnSize = (0, import_react38.useCallback)((index) => {
     const column = computedUnpinnedColumns[index];
     if (!column) {
       debug5("cannot find column at index", index, computedUnpinnedColumns);
@@ -7338,6 +7364,8 @@ function useColumnSizeFn(computedUnpinnedColumns) {
 function useYourBrain(param) {
   const {
     dataArray,
+    horizontalVirtualBrain,
+    verticalVirtualBrain,
     computedUnpinnedColumns,
     computedPinnedStartWidth,
     computedPinnedEndWidth,
@@ -7346,42 +7374,19 @@ function useYourBrain(param) {
     rowSpan
   } = param;
   const columnSize = useColumnSizeFn(computedUnpinnedColumns);
-  const horizontalVirtualBrain = useOnce(() => {
-    const brain = new VirtualBrain({
-      count: computedUnpinnedColumns.length,
-      itemSize: columnSize,
-      mainAxis: "horizontal"
-    });
-    return brain;
-  });
-  const verticalVirtualBrain = useOnce(() => {
-    const brain = new VirtualBrain({
-      count: dataArray.length,
-      itemSize: rowHeight,
-      mainAxis: "vertical",
-      itemSpan: rowSpan
-    });
-    return brain;
-  });
-  (0, import_react40.useEffect)(() => {
-    return () => {
-      horizontalVirtualBrain.destroy();
-      verticalVirtualBrain.destroy();
-    };
-  }, []);
   horizontalVirtualBrain.update(computedUnpinnedColumns.length, columnSize);
   verticalVirtualBrain.update(dataArray.length, rowHeight, rowSpan);
   if (true) {
     globalThis.verticalVirtualBrain = verticalVirtualBrain;
     globalThis.horizontalVirtualBrain = horizontalVirtualBrain;
   }
-  (0, import_react40.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     verticalVirtualBrain.setAvailableSize({
       height: bodySize.height,
       width: 0
     });
   }, [bodySize, verticalVirtualBrain]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     horizontalVirtualBrain.setAvailableSize({
       height: 0,
       width: Math.max(bodySize.width - computedPinnedStartWidth - computedPinnedEndWidth, 0)
@@ -7417,15 +7422,19 @@ function useListRendering(param) {
     pinnedStartMaxWidth,
     pinnedEndMaxWidth,
     pinnedStartScrollListener,
-    pinnedEndScrollListener
+    pinnedEndScrollListener,
+    verticalVirtualBrain,
+    horizontalVirtualBrain
   } = componentState;
   const prevDataSourceTimestamp = usePrevious(dataSourceState.updatedAt);
-  const repaintIdRef = (0, import_react41.useRef)(0);
+  const repaintIdRef = (0, import_react40.useRef)(0);
   if (!shallowEqualObjects(prevComputed, computed) || prevDataSourceTimestamp !== dataSourceState.updatedAt) {
     repaintIdRef.current++;
   }
   const repaintId = repaintIdRef.current;
-  const { horizontalVirtualBrain, verticalVirtualBrain } = useYourBrain({
+  useYourBrain({
+    horizontalVirtualBrain,
+    verticalVirtualBrain,
     computedPinnedStartWidth: computed.computedPinnedStartWidth,
     computedPinnedEndWidth: computed.computedPinnedEndWidth,
     computedUnpinnedColumns: computed.computedUnpinnedColumns,
@@ -7437,15 +7446,16 @@ function useListRendering(param) {
   const hasHorizontalScrollbar = computedUnpinnedColumnsWidth > bodySize.width - computedPinnedStartColumnsWidth - computedPinnedEndColumnsWidth;
   const reservedContentHeight = verticalVirtualBrain.getTotalSize() + (hasHorizontalScrollbar ? getScrollbarWidth() : 0);
   const hasVerticalScrollbar = bodySize.height > 0 && bodySize.height < reservedContentHeight;
-  const scrollbars = (0, import_react41.useMemo)(() => ({
+  const scrollbars = (0, import_react40.useMemo)(() => ({
     vertical: hasVerticalScrollbar,
     horizontal: hasHorizontalScrollbar
   }), [hasVerticalScrollbar, hasHorizontalScrollbar]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!bodySize.height) {
       return;
     }
     const { onReady } = getState();
+    componentActions.ready = true;
     if (onReady) {
       const imperativeApi = {
         setColumnOrder: (columnOrder) => {
@@ -7496,7 +7506,7 @@ function useListRendering(param) {
     computedUnpinnedColumns
   });
   const [, rerender] = useRerender();
-  (0, import_react41.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     rerender();
   }, [dataSourceState]);
   const { pinnedStartList, pinnedStartScrollbarPlaceholder } = usePinnedStartRendering(pinnedRenderingParams);
@@ -7520,7 +7530,7 @@ function useListRendering(param) {
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
 var React31 = __toModule(require("react"));
-var import_react42 = __toModule(require("react"));
+var import_react41 = __toModule(require("react"));
 
 // src/components/utils/decamelize.ts
 function decamelize(str, options) {
@@ -7569,7 +7579,7 @@ var InfiniteTableLicenseFooter = React31.forwardRef(function InfiniteTableLicens
       ref.current = node;
     }
   }, []);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     const forceStyle = () => {
       requestAnimationFrame(() => {
         var _a;
@@ -7597,7 +7607,7 @@ var InfiniteTableLicenseFooter = React31.forwardRef(function InfiniteTableLicens
 });
 
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
-var import_react43 = __toModule(require("react"));
+var import_react42 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useLicense/crc32.ts
 var DEFAULT_ReversedPolynomial = 3988292384;
@@ -7755,10 +7765,10 @@ var isInsideSandbox = () => {
 };
 var isInsidePlayground = isInsideSandbox() || isInsideSandpack();
 var useLicense = (licenseKey = "") => {
-  const valid = (0, import_react43.useMemo)(() => {
+  const valid = (0, import_react42.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.2.10"
+      version: "0.2.11"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -7770,7 +7780,7 @@ var useLicense = (licenseKey = "") => {
 
 // src/components/CSSVariableWatch.tsx
 var React32 = __toModule(require("react"));
-var import_react44 = __toModule(require("react"));
+var import_react43 = __toModule(require("react"));
 var error = err("CSSVariableWatch");
 var debug6 = dbg("CSSVariableWatch");
 var WRAPPER_STYLE = {
@@ -7783,7 +7793,7 @@ var WRAPPER_STYLE = {
   overflow: "hidden"
 };
 var useCSSVariableWatch = (params) => {
-  const lastValueRef = (0, import_react44.useRef)(0);
+  const lastValueRef = (0, import_react43.useRef)(0);
   const onResize = React32.useCallback(({ height }) => {
     if (height && height !== lastValueRef.current) {
       lastValueRef.current = height;
@@ -7803,7 +7813,7 @@ var useCSSVariableWatch = (params) => {
   }, []);
 };
 var CSSVariableWatch = (props) => {
-  const domRef = (0, import_react44.useRef)(null);
+  const domRef = (0, import_react43.useRef)(null);
   useCSSVariableWatch(__spreadProps(__spreadValues({}, props), {
     ref: domRef
   }));
@@ -7913,19 +7923,151 @@ var LoadMaskTextCls = "qy58ya4";
 
 // src/components/InfiniteTable/components/LoadMask.tsx
 var { rootClassName: rootClassName11 } = internalProps;
-var baseCls2 = `${rootClassName11}-LoadMask`;
+var baseCls = `${rootClassName11}-LoadMask`;
 function LoadMaskFn(props) {
   const { visible, children = "Loading" } = props;
   return /* @__PURE__ */ React33.createElement("div", {
-    className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls2}`
+    className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls}`
   }, /* @__PURE__ */ React33.createElement("div", {
-    className: `${LoadMaskOverlayCls} ${baseCls2}-Overlay`
+    className: `${LoadMaskOverlayCls} ${baseCls}-Overlay`
   }), /* @__PURE__ */ React33.createElement("div", {
-    className: `${LoadMaskTextCls} ${baseCls2}-Text`
+    className: `${LoadMaskTextCls} ${baseCls}-Text`
   }, children));
 }
 var LoadMask = React33.memo(LoadMaskFn);
 
+// src/components/InfiniteTable/hooks/useAutoSizeColumns.ts
+var import_react44 = __toModule(require("react"));
+var OFFSET = 10;
+function getColumnContentMaxWidths(domRef, options) {
+  var _a;
+  const { includeHeader, columnsToResize, columnsToSkip } = options;
+  const query = `.${InfiniteTableCellClassName} > .${InfiniteTableCellContentClassName}`;
+  let match = (_a = domRef.current) == null ? void 0 : _a.querySelectorAll(query);
+  const measuredMaxWidths = {};
+  const computedPaddingsForColumns = {};
+  if (match && match.length) {
+    match.forEach((content) => {
+      const cell = content.parentElement;
+      const isHeader = cell.matches(`.${InfiniteTableHeaderCellClassName}`);
+      if (includeHeader === false && isHeader) {
+        return;
+      }
+      const colId = cell.getAttribute("data-column-id");
+      const contentClone = content.cloneNode(true);
+      contentClone.style.visibility = "hidden";
+      contentClone.style.pointerEvents = "none";
+      contentClone.classList.remove(...cssEllipsisClassName.split(" "));
+      contentClone.style.position = "absolute";
+      cell.appendChild(contentClone);
+      let measuredWidth = contentClone.offsetWidth;
+      cell.removeChild(contentClone);
+      if (!computedPaddingsForColumns[colId]) {
+        const cellComputedStyle = getGlobal().getComputedStyle(cell);
+        computedPaddingsForColumns[colId] = parseInt(cellComputedStyle.paddingLeft, 10) + parseInt(cellComputedStyle.paddingRight, 10) + parseInt(cellComputedStyle.borderLeftWidth, 10) + parseInt(cellComputedStyle.borderRightWidth, 10) + OFFSET;
+      }
+      measuredWidth += computedPaddingsForColumns[colId];
+      if (isHeader) {
+        let otherElementsLength = 0;
+        cell.childNodes.forEach((child) => {
+          if (child !== content) {
+            const el = child;
+            otherElementsLength += Math.max(el.offsetWidth, parseInt(el.style.width, 10));
+            const style = getGlobal().getComputedStyle(el);
+            otherElementsLength += parseInt(style.marginLeft, 10) + parseInt(style.marginRight, 10);
+          }
+        });
+        measuredWidth += otherElementsLength;
+      }
+      if (columnsToSkip && columnsToSkip.has(colId)) {
+        return;
+      }
+      if (columnsToResize && !columnsToResize.has(colId)) {
+        return;
+      }
+      measuredMaxWidths[colId] = Math.max(measuredWidth, measuredMaxWidths[colId] || 0);
+    });
+  }
+  return measuredMaxWidths;
+}
+function useAutoSizeColumns() {
+  const {
+    getComponentState,
+    componentActions,
+    componentState: {
+      domRef,
+      ready,
+      autoSizeColumnsKey,
+      verticalVirtualBrain,
+      horizontalVirtualBrain
+    }
+  } = useComponentState();
+  const [refreshId, setRefreshId] = (0, import_react44.useState)(0);
+  const theKey = typeof autoSizeColumnsKey === "object" ? autoSizeColumnsKey.key : autoSizeColumnsKey;
+  const getTheKey = useLatest(theKey);
+  const lastExecutedIdentifierRef = (0, import_react44.useRef)(null);
+  (0, import_react44.useEffect)(() => {
+    const key = getTheKey();
+    if (key == null) {
+      return;
+    }
+    const { current } = lastExecutedIdentifierRef;
+    const onChange = () => {
+      if (autoSizeColumnsKey !== current) {
+        setRefreshId(refreshId + 1);
+      }
+    };
+    const removeVertical = verticalVirtualBrain.onRenderRangeChange(onChange);
+    const removeHorizontal = horizontalVirtualBrain.onRenderRangeChange(onChange);
+    return () => {
+      removeVertical();
+      removeHorizontal();
+    };
+  }, [verticalVirtualBrain, horizontalVirtualBrain]);
+  (0, import_react44.useEffect)(() => {
+    var _a;
+    if (theKey == null) {
+      return;
+    }
+    const { autoSizeColumnsKey: autoSizeColumnsKey2 } = getComponentState();
+    let columnsToResize;
+    let columnsToSkip;
+    let includeHeader = true;
+    if (typeof autoSizeColumnsKey2 === "object") {
+      if (autoSizeColumnsKey2.columnsToResize) {
+        columnsToResize = new Set(autoSizeColumnsKey2.columnsToResize);
+      }
+      if (autoSizeColumnsKey2.columnsToSkip) {
+        columnsToSkip = new Set(autoSizeColumnsKey2.columnsToSkip);
+      }
+      includeHeader = (_a = autoSizeColumnsKey2.includeHeader) != null ? _a : includeHeader;
+    }
+    lastExecutedIdentifierRef.current = theKey;
+    const measuredMaxWidths = getColumnContentMaxWidths(domRef, {
+      includeHeader,
+      columnsToResize,
+      columnsToSkip
+    });
+    const colIds = Object.keys(measuredMaxWidths);
+    if (!colIds.length) {
+      return;
+    }
+    const columnSizing = getComponentState().columnSizing;
+    const newColumnSizing = __spreadValues({}, columnSizing);
+    let changed = false;
+    colIds.forEach((colId) => {
+      var _a2;
+      newColumnSizing[colId] = {
+        width: measuredMaxWidths[colId]
+      };
+      changed = changed || newColumnSizing[colId].width !== ((_a2 = columnSizing[colId]) == null ? void 0 : _a2.width);
+    });
+    if (changed) {
+      componentActions.columnSizing = newColumnSizing;
+    }
+  }, [theKey, ready, refreshId]);
+}
+
 // src/components/InfiniteTable/index.tsx
 var InfiniteTableClassName = internalProps.rootClassName;
 var ONLY_VERTICAL_SCROLLBAR = {
@@ -8012,6 +8154,7 @@ var InfiniteTableComponent = React34.memo(function InfiniteTableComponent2() {
   React34.useEffect(() => {
     dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
   }, [scrollStopDelay]);
+  useAutoSizeColumns();
   return /* @__PURE__ */ React34.createElement("div", __spreadValues({
     ref: domRef
   }, domProps), header ? /* @__PURE__ */ React34.createElement(TableHeaderWrapper, {
@@ -8043,7 +8186,7 @@ var InfiniteTableComponent = React34.memo(function InfiniteTableComponent2() {
 });
 function InfiniteTableContextProvider() {
   const { componentActions, componentState } = useComponentState();
-  const { scrollerDOMRef, scrollTopId } = componentState;
+  const { scrollerDOMRef, scrollTopKey } = componentState;
   const computed = useComputed();
   const getComputed = useLatest(computed);
   const getState = useLatest(componentState);
@@ -8082,7 +8225,7 @@ function InfiniteTableContextProvider() {
     if (scrollerDOMRef.current) {
       scrollerDOMRef.current.scrollTop = 0;
     }
-  }, [scrollTopId, scrollerDOMRef]);
+  }, [scrollTopKey, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
   return /* @__PURE__ */ React34.createElement(TableContext2.Provider, {
     value: contextValue