@infinite-table/infinite-react 0.3.3 → 0.3.4

package/index.esm.js

@@ -636,10 +636,11 @@ function debounce(fn, { wait }) {
 // src/components/InfiniteTable/index.tsx
 import {
   StrictMode,
-  createElement as createElement24,
-  memo as memo9,
-  useEffect as useEffect24
+  createElement as createElement26,
+  memo as memo11,
+  useEffect as useEffect26
 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect27, useState as useState15 } from "react";
 
 // src/utils/join.ts
 var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
@@ -865,13 +866,13 @@ function useDataSourceContextValue() {
 
 // src/components/HeadlessTable/index.tsx
 import {
-  createElement as createElement6
+  createElement as createElement8
 } from "react";
 import {
-  useCallback as useCallback3,
-  useEffect as useEffect5,
-  useRef as useRef5,
-  useState as useState2
+  useCallback as useCallback4,
+  useEffect as useEffect7,
+  useRef as useRef7,
+  useState as useState5
 } from "react";
 
 // src/components/VirtualList/SpacePlaceholder.tsx
@@ -2520,6 +2521,171 @@ var ReactHeadlessTableRenderer = class extends Logger {
     this.items = [];
     this.currentHoveredRow = -1;
     this.hoverRowUpdatesInProgress = new Map();
+    this.getFullyVisibleRowsRange = () => {
+      let {
+        start: [startRow],
+        end: [endRow]
+      } = this.brain.getRenderRange();
+      while (!this.isRowFullyVisible(startRow)) {
+        startRow++;
+        if (startRow === endRow) {
+          return null;
+        }
+      }
+      while (!this.isRowFullyVisible(endRow)) {
+        endRow--;
+        if (endRow === startRow) {
+          return null;
+        }
+      }
+      return { start: startRow, end: endRow };
+    };
+    this.getScrollPositionForScrollRowIntoView = (rowIndex, config = { offset: 0 }) => {
+      const { brain } = this;
+      const scrollPosition = brain.getScrollPosition();
+      let { scrollAdjustPosition, offset = 0 } = config;
+      if (this.isRowFullyVisible(rowIndex) && !scrollAdjustPosition) {
+        return scrollPosition;
+      }
+      const rowOffset = brain.getItemOffsetFor(rowIndex, "vertical");
+      const rowHeight = brain.getItemSize(rowIndex, "vertical");
+      const top2 = scrollPosition.scrollTop;
+      const availableSize = brain.getAvailableSize();
+      const bottom = top2 + availableSize.height;
+      if (!scrollAdjustPosition) {
+        scrollAdjustPosition = rowOffset > bottom ? "end" : rowOffset < top2 ? "start" : "end";
+      }
+      let scrollTop = scrollPosition.scrollTop;
+      if (scrollAdjustPosition === "center") {
+        scrollTop = rowOffset - Math.floor(brain.getAvailableSize().height / 2);
+      } else if (scrollAdjustPosition === "start") {
+        offset = -offset;
+        scrollTop += rowOffset - top2 + offset;
+      } else {
+        offset += rowHeight;
+        scrollTop += rowOffset - bottom + offset;
+      }
+      return __spreadProps(__spreadValues({}, scrollPosition), {
+        scrollTop
+      });
+    };
+    this.getScrollPositionForScrollColumnIntoView = (colIndex, config = { offset: 0 }) => {
+      const { brain } = this;
+      const scrollPosition = brain.getScrollPosition();
+      let { scrollAdjustPosition, offset = 0 } = config;
+      if (this.isColumnFullyVisible(colIndex) && !scrollAdjustPosition) {
+        return scrollPosition;
+      }
+      const rowOffset = brain.getItemOffsetFor(colIndex, "horizontal");
+      const colWidth = brain.getItemSize(colIndex, "horizontal");
+      const left2 = scrollPosition.scrollLeft;
+      const availableSize = brain.getAvailableSize();
+      const right = left2 + availableSize.width;
+      if (!scrollAdjustPosition) {
+        scrollAdjustPosition = rowOffset > right ? "end" : rowOffset < left2 ? "start" : "end";
+      }
+      let scrollLeft = scrollPosition.scrollLeft;
+      if (scrollAdjustPosition === "center") {
+        scrollLeft = rowOffset - Math.floor(brain.getAvailableSize().width / 2);
+      } else if (scrollAdjustPosition === "start") {
+        offset = -offset;
+        scrollLeft += rowOffset - left2 + offset;
+      } else {
+        offset += colWidth;
+        scrollLeft += rowOffset - right + offset;
+      }
+      return __spreadProps(__spreadValues({}, scrollPosition), {
+        scrollLeft
+      });
+    };
+    this.getScrollPositionForScrollCellIntoView = (rowIndex, colIndex, config = { offsetLeft: 0, offsetTop: 0 }) => {
+      const { scrollLeft } = this.getScrollPositionForScrollColumnIntoView(colIndex, {
+        scrollAdjustPosition: config.colScrollAdjustPosition || config.scrollAdjustPosition,
+        offset: config.offsetLeft
+      });
+      const { scrollTop } = this.getScrollPositionForScrollRowIntoView(rowIndex, {
+        scrollAdjustPosition: config.rowScrollAdjustPosition || config.scrollAdjustPosition,
+        offset: config.offsetTop
+      });
+      return { scrollLeft, scrollTop };
+    };
+    this.isRowFullyVisible = (rowIndex, offsetMargin = 2) => {
+      return this.isRowVisible(rowIndex, this.brain.getRowHeight(rowIndex) - offsetMargin);
+    };
+    this.isRowVisible = (rowIndex, offsetMargin = 10) => {
+      if (!this.isRowRendered(rowIndex)) {
+        return false;
+      }
+      const { brain } = this;
+      const {
+        start: [startRow],
+        end: [endRow]
+      } = this.brain.getRenderRange();
+      const midRow = Math.floor((startRow + endRow) / 2);
+      if (rowIndex < startRow) {
+        return false;
+      }
+      if (rowIndex >= endRow) {
+        return false;
+      }
+      if (rowIndex >= midRow) {
+        const lastVisibleRow = brain.getItemAt(brain.getAvailableSize().height + brain.getScrollPosition().scrollTop - offsetMargin, "vertical");
+        return rowIndex <= lastVisibleRow;
+      }
+      if (rowIndex < midRow) {
+        const firstVisibleRow = brain.getItemAt(brain.getScrollPosition().scrollTop + offsetMargin, "vertical");
+        return rowIndex >= firstVisibleRow;
+      }
+      return true;
+    };
+    this.isRowRendered = (rowIndex) => {
+      const elements = this.mappedCells.getElementsForRowIndex(rowIndex);
+      return elements.length > 0;
+    };
+    this.isCellVisible = (rowIndex, colIndex) => {
+      return this.isRowVisible(rowIndex) && this.isColumnVisible(colIndex);
+    };
+    this.isCellFullyVisible = (rowIndex, colIndex) => {
+      return this.isRowFullyVisible(rowIndex) && this.isColumnVisible(colIndex);
+    };
+    this.isColumnFullyVisible = (colIndex, offsetMargin = 2) => {
+      return this.isColumnVisible(colIndex, this.brain.getColWidth(colIndex) - offsetMargin);
+    };
+    this.isColumnVisible = (colIndex, offsetMargin = 10) => {
+      if (!this.isColumnRendered(colIndex)) {
+        return false;
+      }
+      const { brain } = this;
+      const {
+        start: [_, startCol],
+        end: [__, endCol]
+      } = brain.getRenderRange();
+      const midCol = Math.floor((startCol + endCol) / 2);
+      if (colIndex < startCol) {
+        return false;
+      }
+      if (colIndex >= endCol) {
+        return false;
+      }
+      if (colIndex >= midCol) {
+        const lastVisibleCol = brain.getItemAt(brain.getAvailableSize().width + brain.getScrollPosition().scrollLeft - offsetMargin, "horizontal");
+        return colIndex <= lastVisibleCol;
+      }
+      if (colIndex < midCol) {
+        const firstVisibleCol = brain.getItemAt(brain.getScrollPosition().scrollLeft + offsetMargin, "horizontal");
+        return colIndex >= firstVisibleCol;
+      }
+      return true;
+    };
+    this.isCellRendered = (rowIndex, colIndex) => {
+      return this.isRowRendered(rowIndex) && this.isColumnRendered(colIndex);
+    };
+    this.isColumnRendered = (colIndex) => {
+      const {
+        start: [startRow]
+      } = this.brain.getRenderRange();
+      return this.mappedCells.getRenderedNodeForCell(startRow, colIndex) !== null;
+    };
     this.getExtraSpanCellsForRange = (range) => {
       const { start, end } = range;
       const [startRow, startCol] = start;
@@ -3096,8 +3262,11 @@ function createRenderer(brain) {
 function RawTableFn(props) {
   const { brain, renderCell } = props;
   const { renderer, onRenderUpdater } = useMemo2(() => {
-    return createRenderer(brain);
-  }, [brain]);
+    return props.onRenderUpdater && props.renderer ? {
+      renderer: props.renderer,
+      onRenderUpdater: props.onRenderUpdater
+    } : createRenderer(brain);
+  }, [brain, props.onRenderUpdater, props.renderer]);
   useEffect4(() => {
     renderer.cellHoverClassNames = props.cellHoverClassNames || [];
   }, [renderer, props.cellHoverClassNames]);
@@ -3131,6 +3300,150 @@ function RawTableFn(props) {
 }
 var RawTable = memo3(RawTableFn);
 
+// src/components/InfiniteTable/components/ActiveRowIndicator.tsx
+import {
+  createElement as createElement6,
+  memo as memo4
+} from "react";
+import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect3, useRef as useRef5, useState as useState3 } from "react";
+
+// src/components/hooks/useRerender.ts
+import { useCallback as useCallback3, useState as useState2 } from "react";
+var useRerender = () => {
+  const [state, setState] = useState2(0);
+  return [
+    state,
+    useCallback3(() => {
+      setState((state2) => state2 + 1);
+    }, [setState])
+  ];
+};
+
+// src/components/InfiniteTable/internalProps.ts
+var rootClassName2 = "Infinite";
+var internalProps = {
+  rootClassName: rootClassName2
+};
+
+// src/components/InfiniteTable/components/ActiveRowIndicator.css.ts
+var ActiveRowIndicatorCls = { visible: "j26lrx1 j26lrx0 _16lm1iwe _16lm1iw3 _16lm1iwt _16lm1iwu _16lm1iww", hidden: "j26lrx2 j26lrx0 _16lm1iwe _16lm1iw3 _16lm1iwt _16lm1iwu _16lm1iww" };
+
+// src/components/InfiniteTable/components/ActiveRowIndicator.tsx
+var { rootClassName: rootClassName3 } = internalProps;
+var baseCls = `${rootClassName3}-ActiveRowIndicator`;
+var ActiveRowIndicatorFn = (props) => {
+  const { brain } = props;
+  const [state, setState] = useState3({
+    top: 0,
+    rowHeight: 0
+  });
+  const domRef = useRef5(null);
+  const stateRef = useRef5(state);
+  const active = props.activeRowIndex != null && brain.getRowCount() > props.activeRowIndex;
+  const [rerenderId, rerender] = useRerender();
+  useLayoutEffect3(() => {
+    if (props.activeRowIndex == null) {
+      return;
+    }
+    setState(stateRef.current = {
+      top: brain.getItemOffsetFor(props.activeRowIndex, "vertical"),
+      rowHeight: brain.getRowHeight(props.activeRowIndex)
+    });
+  }, [props.activeRowIndex, rerenderId]);
+  useEffect5(() => {
+    const removeOnScroll = brain.onScroll((scrollPos) => {
+      const node = domRef.current;
+      const topOffset = stateRef.current.top;
+      node.style.transform = `translate3d(0px, ${-scrollPos.scrollTop + topOffset}px, 0px)`;
+    });
+    const removeOnRenderCountChange = brain.onRenderCountChange(rerender);
+    return () => {
+      removeOnRenderCountChange();
+      removeOnScroll();
+    };
+  }, [brain]);
+  return /* @__PURE__ */ createElement6("div", {
+    ref: domRef,
+    "data-name": "active-row-indicator",
+    className: `${baseCls} ${active ? ActiveRowIndicatorCls.visible : ActiveRowIndicatorCls.hidden}`,
+    style: active ? {
+      transform: `translate3d(0px, ${-brain.getScrollPosition().scrollTop + state.top}px,0)`,
+      height: state.rowHeight
+    } : void 0
+  });
+};
+var ActiveRowIndicator = memo4(ActiveRowIndicatorFn);
+
+// src/components/InfiniteTable/components/ActiveCellIndicator.tsx
+import {
+  createElement as createElement7,
+  memo as memo5
+} from "react";
+import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect4, useRef as useRef6, useState as useState4 } from "react";
+
+// src/components/InfiniteTable/components/ActiveCellIndicator.css.ts
+var ActiveCellIndicatorCls = { visible: "nxbq1c1 nxbq1c0 _16lm1iwe _16lm1iw3 _16lm1iww _16lm1iwu", hidden: "nxbq1c2 nxbq1c0 _16lm1iwe _16lm1iw3 _16lm1iww _16lm1iwu" };
+
+// src/components/InfiniteTable/components/ActiveCellIndicator.tsx
+var { rootClassName: rootClassName4 } = internalProps;
+var baseCls2 = `${rootClassName4}-ActiveCellIndicator`;
+var ActiveCellIndicatorFn = (props) => {
+  const { brain } = props;
+  const [rerenderId, rerender] = useRerender();
+  const [state, setState] = useState4({
+    top: 0,
+    rowHeight: 0,
+    colWidth: 0,
+    left: 0
+  });
+  const domRef = useRef6(null);
+  const stateRef = useRef6(state);
+  const active = props.activeCellIndex != null && brain.getRowCount() > props.activeCellIndex[0];
+  useLayoutEffect4(() => {
+    if (props.activeCellIndex == null) {
+      return;
+    }
+    const rowIndex = props.activeCellIndex[0];
+    setState(stateRef.current = {
+      top: brain.getItemOffsetFor(rowIndex, "vertical"),
+      rowHeight: brain.getRowHeight(rowIndex),
+      left: brain.getItemOffsetFor(props.activeCellIndex[1], "horizontal"),
+      colWidth: brain.getColWidth(props.activeCellIndex[1])
+    });
+  }, [props.activeCellIndex, rerenderId]);
+  useEffect6(() => {
+    const removeOnSCroll = brain.onScroll((scrollPos) => {
+      const node = domRef.current;
+      const topOffset = stateRef.current.top;
+      const leftOffset = stateRef.current.left;
+      node.style.transform = `translate3d(${-scrollPos.scrollLeft + leftOffset}px, ${-scrollPos.scrollTop + topOffset}px, 0px)`;
+    });
+    const removeOnRenderCountChange = brain.onRenderCountChange(() => {
+      rerender();
+    });
+    const removeOnAvailableSizeChange = brain.onAvailableSizeChange(() => {
+      rerender();
+    });
+    return () => {
+      removeOnAvailableSizeChange();
+      removeOnRenderCountChange();
+      removeOnSCroll();
+    };
+  }, [brain]);
+  const scrollPosition = brain.getScrollPosition();
+  return /* @__PURE__ */ createElement7("div", {
+    ref: domRef,
+    "data-name": "active-cell-indicator",
+    className: `${baseCls2} ${active ? ActiveCellIndicatorCls.visible : ActiveCellIndicatorCls.hidden}`,
+    style: active ? {
+      transform: `translate3d(${-scrollPosition.scrollLeft + state.left}px, ${-scrollPosition.scrollTop + state.top}px,0)`,
+      width: state.colWidth,
+      height: state.rowHeight
+    } : void 0
+  });
+};
+var ActiveCellIndicator = memo5(ActiveCellIndicatorFn);
+
 // src/components/HeadlessTable/index.tsx
 function useMatrixBrain(brain, brainOptions, fixedCellsInfo) {
   if (fixedCellsInfo && (fixedCellsInfo.fixedColsStart || fixedCellsInfo.fixedColsEnd || fixedCellsInfo.fixedRowsStart || fixedCellsInfo.fixedRowsEnd)) {
@@ -3158,25 +3471,33 @@ function HeadlessTable(props) {
     scrollerDOMRef,
     scrollStopDelay,
     renderCell,
-    cellHoverClassNames
+    cellHoverClassNames,
+    renderer,
+    activeRowIndex,
+    activeCellIndex,
+    onRenderUpdater
   } = _a, domProps = __objRest(_a, [
     "brain",
     "scrollerDOMRef",
     "scrollStopDelay",
     "renderCell",
-    "cellHoverClassNames"
+    "cellHoverClassNames",
+    "renderer",
+    "activeRowIndex",
+    "activeCellIndex",
+    "onRenderUpdater"
   ]);
-  const domRef = useRef5(null);
-  const [scrollSize, setTotalScrollSize] = useState2({
+  const domRef = useRef7(null);
+  const [scrollSize, setTotalScrollSize] = useState5({
     width: 0,
     height: 0
   });
-  useEffect5(() => {
+  useEffect7(() => {
     if (scrollStopDelay != null) {
       brain.setScrollStopDelay(scrollStopDelay);
     }
   }, [scrollStopDelay, brain]);
-  useEffect5(() => {
+  useEffect7(() => {
     var _a2;
     const node = (_a2 = domRef.current) == null ? void 0 : _a2.parentNode;
     if (!node) {
@@ -3192,31 +3513,39 @@ function HeadlessTable(props) {
     const remove = setupResizeObserver(node, onResize);
     return remove;
   }, []);
-  const onContainerScroll = useCallback3((scrollPos) => {
+  const onContainerScroll = useCallback4((scrollPos) => {
     brain.setScrollPosition(scrollPos, (scrollPos2) => {
       domRef.current.style.transform = `translate3d(${-scrollPos2.scrollLeft}px, ${-scrollPos2.scrollTop}px, 0px)`;
     });
   }, [brain]);
-  useEffect5(() => {
+  useEffect7(() => {
     const removeOnRenderCount = brain.onRenderCountChange(() => {
       setTotalScrollSize(brain.getTotalSize());
     });
     setTotalScrollSize(brain.getTotalSize());
     return removeOnRenderCount;
   }, [brain]);
-  return /* @__PURE__ */ createElement6(VirtualScrollContainer, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ createElement8(VirtualScrollContainer, __spreadProps(__spreadValues({
     onContainerScroll
   }, domProps), {
     ref: scrollerDOMRef
-  }), /* @__PURE__ */ createElement6("div", {
+  }), /* @__PURE__ */ createElement8("div", {
     ref: domRef,
     className: scrollTransformTargetCls,
     "data-name": "scroll-transform-target"
-  }, /* @__PURE__ */ createElement6(RawTable, {
+  }, /* @__PURE__ */ createElement8(RawTable, {
+    renderer,
+    onRenderUpdater,
     renderCell,
     brain,
     cellHoverClassNames
-  })), /* @__PURE__ */ createElement6(SpacePlaceholder, {
+  })), /* @__PURE__ */ createElement8(ActiveRowIndicator, {
+    brain,
+    activeRowIndex
+  }), /* @__PURE__ */ createElement8(ActiveCellIndicator, {
+    brain,
+    activeCellIndex
+  }), /* @__PURE__ */ createElement8(SpacePlaceholder, {
     width: scrollSize.width,
     height: scrollSize.height
   }));
@@ -3224,17 +3553,17 @@ function HeadlessTable(props) {
 
 // src/components/hooks/useComponentState/index.tsx
 import {
-  createElement as createElement7,
-  memo as memo4,
+  createElement as createElement9,
+  memo as memo6,
   useContext as useContext2
 } from "react";
 import {
   useReducer,
   createContext as createContext2,
   useMemo as useMemo3,
-  useEffect as useEffect6,
-  useState as useState3,
-  useRef as useRef8
+  useEffect as useEffect8,
+  useState as useState6,
+  useRef as useRef10
 } from "react";
 
 // src/utils/proxyFnCall.ts
@@ -3278,18 +3607,18 @@ function isControlled(propName, props) {
 }
 
 // src/components/hooks/useLatest.tsx
-import { useCallback as useCallback4, useRef as useRef6 } from "react";
+import { useCallback as useCallback5, useRef as useRef8 } from "react";
 function useLatest(value) {
-  const ref = useRef6(value);
+  const ref = useRef8(value);
   ref.current = value;
-  return useCallback4(() => ref.current, []);
+  return useCallback5(() => ref.current, []);
 }
 
 // src/components/hooks/usePrevious.ts
-import { useRef as useRef7, useLayoutEffect as useLayoutEffect3 } from "react";
+import { useRef as useRef9, useLayoutEffect as useLayoutEffect5 } from "react";
 var usePrevious = (value, initialValue) => {
-  const ref = useRef7(initialValue === void 0 ? value : initialValue);
-  useLayoutEffect3(() => {
+  const ref = useRef9(initialValue === void 0 ? value : initialValue);
+  useLayoutEffect5(() => {
     ref.current = value;
   });
   return ref.current;
@@ -3369,16 +3698,16 @@ function forwardProps(propsToForward, props) {
   return mappedState;
 }
 function getComponentStateRoot(config) {
-  return memo4(function ComponentStateRoot(props) {
+  return memo6(function ComponentStateRoot(props) {
     var _a, _b;
-    const [initialSetupState] = useState3(() => {
+    const [initialSetupState] = useState6(() => {
       return config.initSetupState ? config.initSetupState() : {};
     });
-    const propsToStateSetRef = useRef8(new Set());
+    const propsToStateSetRef = useRef10(new Set());
     const propsToForward = useMemo3(() => config.forwardProps ? config.forwardProps(initialSetupState) : {}, [initialSetupState]);
     const parentState = (_b = (_a = config.getParentState) == null ? void 0 : _a.call(config)) != null ? _b : null;
     const getParentState = useLatest(parentState);
-    const [wholeState] = useState3(() => {
+    const [wholeState] = useState6(() => {
       let mappedState = {};
       if (propsToForward) {
         mappedState = forwardProps(propsToForward, props);
@@ -3463,7 +3792,7 @@ function getComponentStateRoot(config) {
       getComponentState
     }), [state, actions, getComponentState]);
     const prevProps = usePrevious(props);
-    useEffect6(() => {
+    useEffect8(() => {
       const currentProps = props;
       const newMappedState = {};
       let newMappedStateCount = 0;
@@ -3519,7 +3848,7 @@ function getComponentStateRoot(config) {
         }
       }
     });
-    return /* @__PURE__ */ createElement7(Context.Provider, {
+    return /* @__PURE__ */ createElement9(Context.Provider, {
       value: contextValue
     }, props.children);
   });
@@ -3531,58 +3860,52 @@ function useComponentState() {
 
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
 import {
-  createElement as createElement8,
+  createElement as createElement10,
   forwardRef as forwardRef2
 } from "react";
 
-// src/components/InfiniteTable/internalProps.ts
-var rootClassName2 = "Infinite";
-var internalProps = {
-  rootClassName: rootClassName2
-};
-
 // src/components/InfiniteTable/hooks/useInternalProps.ts
 var useInternalProps = () => {
   return internalProps;
 };
 
 // src/components/InfiniteTable/utilities.css.ts
-var alignItems = { center: "_16lm1iw13", stretch: "_16lm1iw14" };
-var cssEllipsisClassName = "_16lm1iw1c _16lm1iw1d _16lm1iw18";
+var alignItems = { center: "_16lm1iw14", stretch: "_16lm1iw15" };
+var cssEllipsisClassName = "_16lm1iw1d _16lm1iw1e _16lm1iw19";
 var cursor = { pointer: "_16lm1iwd" };
-var display = { flex: "_16lm1iwl", block: "_16lm1iwm", inlineBlock: "_16lm1iwn" };
-var flex = { "1": "_16lm1iwe", none: "_16lm1iwf" };
-var flexFlow = { column: "_16lm1iw11", row: "_16lm1iw12" };
-var justifyContent = { center: "_16lm1iw15", start: "_16lm1iw16", end: "_16lm1iw17" };
-var left = { "0": "_16lm1iwv", "100%": "_16lm1iww" };
-var overflow = { hidden: "_16lm1iw18", auto: "_16lm1iw19", visible: "_16lm1iw1a" };
+var display = { flex: "_16lm1iwm", block: "_16lm1iwn", inlineBlock: "_16lm1iwo" };
+var flex = { "1": "_16lm1iwf", none: "_16lm1iwg" };
+var flexFlow = { column: "_16lm1iw12", row: "_16lm1iw13" };
+var justifyContent = { center: "_16lm1iw16", start: "_16lm1iw17", end: "_16lm1iw18" };
+var left = { "0": "_16lm1iww", "100%": "_16lm1iwx" };
+var overflow = { hidden: "_16lm1iw19", auto: "_16lm1iw1a", visible: "_16lm1iw1b" };
 var position = { relative: "_16lm1iw1", absolute: "_16lm1iw2", sticky: "_16lm1iw3", fixed: "_16lm1iw4" };
-var top = { "0": "_16lm1iwt", "100%": "_16lm1iwu" };
+var top = { "0": "_16lm1iwu", "100%": "_16lm1iwv" };
 var transformTranslateZero = "_16lm1iwa";
-var userSelect = { none: "_16lm1iwo" };
-var zIndex = { "1": "_16lm1iwg", "10": "_16lm1iwh", "1000": "_16lm1iwi", "10000": "_16lm1iwj", "100000": "_16lm1iwk" };
+var userSelect = { none: "_16lm1iwp" };
+var zIndex = { "1": "_16lm1iwh", "10": "_16lm1iwi", "1000": "_16lm1iwj", "10000": "_16lm1iwk", "100000": "_16lm1iwl" };
 
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
 var InfiniteTableBody = forwardRef2(function InfiniteTableBody2(props, ref) {
-  const { rootClassName: rootClassName9 } = useInternalProps();
-  return /* @__PURE__ */ createElement8("div", __spreadProps(__spreadValues({
+  const { rootClassName: rootClassName11 } = useInternalProps();
+  return /* @__PURE__ */ createElement10("div", __spreadProps(__spreadValues({
     ref
   }, props), {
-    className: join(`${rootClassName9}Body`, position.relative, flex["1"], transformTranslateZero, props.className)
+    className: join(`${rootClassName11}Body`, position.relative, flex["1"], transformTranslateZero, props.className)
   }));
 });
 
 // src/components/InfiniteTable/components/InfiniteTableFooter/InfiniteTableFooter.tsx
 import {
-  createElement as createElement9,
+  createElement as createElement11,
   forwardRef as forwardRef3
 } from "react";
 var InfiniteTableFooter = forwardRef3(function InfiniteTableFooter2(props, ref) {
-  const { rootClassName: rootClassName9 } = useInternalProps();
-  return /* @__PURE__ */ createElement9("div", __spreadProps(__spreadValues({
+  const { rootClassName: rootClassName11 } = useInternalProps();
+  return /* @__PURE__ */ createElement11("div", __spreadProps(__spreadValues({
     ref
   }, props), {
-    className: join(`${rootClassName9}Footer`, position.relative, display.flex, flexFlow.row, props.className)
+    className: join(`${rootClassName11}Footer`, position.relative, display.flex, flexFlow.row, props.className)
   }));
 });
 
@@ -3590,10 +3913,10 @@ var InfiniteTableFooter = forwardRef3(function InfiniteTableFooter2(props, ref)
 import {
   Fragment as Fragment2,
   createContext as createContext4,
-  createElement as createElement13,
+  createElement as createElement15,
   useMemo as useMemo5
 } from "react";
-import { useCallback as useCallback6, useContext as useContext5, useEffect as useEffect9, useRef as useRef10 } from "react";
+import { useCallback as useCallback7, useContext as useContext5, useEffect as useEffect11, useRef as useRef12 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/DataSource/defaultFilterTypes.ts
@@ -3666,6 +3989,7 @@ function useCellClassName(column, baseClasses, variants, extraFlags) {
     firstInCategory: column.computedFirstInCategory,
     lastInCategory: column.computedLastInCategory,
     pinned: column.computedPinned || false,
+    rowActive: extraFlags.rowActive,
     dragging: extraFlags.dragging,
     zebra: extraFlags.zebra
   };
@@ -3697,10 +4021,10 @@ function useCellClassName(column, baseClasses, variants, extraFlags) {
 // src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
 var import_binary_search2 = __toModule(require_binary_search());
 import {
-  useCallback as useCallback5,
+  useCallback as useCallback6,
   useMemo as useMemo4,
-  useRef as useRef9,
-  useState as useState4
+  useRef as useRef11,
+  useState as useState7
 } from "react";
 
 // src/components/InfiniteTable/hooks/useInfiniteTable.ts
@@ -3754,13 +4078,13 @@ var useColumnPointerEvents = ({
   columns,
   computedRemainingSpace
 }) => {
-  const [draggingDiff, setDraggingDiff] = useState4(null);
-  const [proxyOffset, setProxyOffset] = useState4(null);
-  const breakpointsRef = useRef9([]);
-  const pointerMoveRef = useRef9(null);
-  const didDragRef = useRef9(false);
-  const initialClientPos = useRef9(null);
-  const currentDropIndexRef = useRef9(null);
+  const [draggingDiff, setDraggingDiff] = useState7(null);
+  const [proxyOffset, setProxyOffset] = useState7(null);
+  const breakpointsRef = useRef11([]);
+  const pointerMoveRef = useRef11(null);
+  const didDragRef = useRef11(false);
+  const initialClientPos = useRef11(null);
+  const currentDropIndexRef = useRef11(null);
   const dragging = draggingDiff != null;
   const { componentActions, computed } = useInfiniteTable();
   const { computedColumnOrder } = computed;
@@ -3773,8 +4097,8 @@ var useColumnPointerEvents = ({
       columnWidth: column.computedWidth
     };
   }, [columns, columnId, column]);
-  let cursorRef = useRef9("auto");
-  const onPointerDown = useCallback5((e) => {
+  let cursorRef = useRef11("auto");
+  const onPointerDown = useCallback6((e) => {
     const target = domRef.current;
     cursorRef.current = target.style.cursor;
     didDragRef.current = false;
@@ -3837,7 +4161,7 @@ var useColumnPointerEvents = ({
     target.addEventListener("pointermove", onPointerMove);
     target.setPointerCapture(e.pointerId);
   }, [columns, column, columnIndex, columnsArray, computedRemainingSpace]);
-  const onPointerUp = useCallback5((e) => {
+  const onPointerUp = useCallback6((e) => {
     const target = domRef.current;
     target.style.cursor = cursorRef.current;
     target.releasePointerCapture(e.pointerId);
@@ -3877,7 +4201,7 @@ function RenderHookComponent(props) {
 }
 
 // src/components/InfiniteTable/components/FilterEditors.tsx
-import React14 from "react";
+import React16 from "react";
 function getFilterEditors() {
   return {
     string: StringFilterEditor,
@@ -3886,7 +4210,7 @@ function getFilterEditors() {
 }
 var defaultFilterEditors = getFilterEditors();
 function StringFilterEditor(props) {
-  return /* @__PURE__ */ React14.createElement("input", {
+  return /* @__PURE__ */ React16.createElement("input", {
     "aria-label": `Filter for ${props.ariaLabel}`,
     type: "text",
     value: props.filterValue,
@@ -3897,7 +4221,7 @@ function StringFilterEditor(props) {
   });
 }
 function NumberFilterEditor(props) {
-  return /* @__PURE__ */ React14.createElement("input", {
+  return /* @__PURE__ */ React16.createElement("input", {
     "aria-label": `Filter for ${props.ariaLabel}`,
     type: "number",
     value: props.filterValue,
@@ -3914,25 +4238,25 @@ function NumberFilterEditor(props) {
 
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
 import {
-  createElement as createElement10
+  createElement as createElement12
 } from "react";
-import { useEffect as useEffect7, useState as useState5 } from "react";
+import { useEffect as useEffect9, useState as useState8 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
 var import_createRuntimeFn = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
-var CellCls = "_1eexc2a5 _16lm1iwl _16lm1iw12 _16lm1iw13 _16lm1iw2 _16lm1iw1b _16lm1iw1c";
-var HeaderCellContentRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zfob115 _16lm1iwq _16lm1iws _16lm1iwl _16lm1iw12 _16lm1iw13", variantClassNames: { filtered: { false: "_12zfob116", true: "_12zfob117" } }, defaultVariants: {}, compoundVariants: [] });
+var CellCls = "_1eexc2a5 _16lm1iwm _16lm1iw13 _16lm1iw14 _16lm1iw2 _16lm1iw1c _16lm1iw1d";
+var HeaderCellContentRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zfob117 _16lm1iwr _16lm1iwt _16lm1iwm _16lm1iw13 _16lm1iw14", variantClassNames: { filtered: { false: "_12zfob118", true: "_12zfob119" } }, defaultVariants: {}, compoundVariants: [] });
 var HeaderCellProxy = "_12zfob10";
-var HeaderCellRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zfob1h _16lm1iwm", variantClassNames: { zebra: { false: "_12zfob1i", even: "_12zfob1j", odd: "_12zfob1k" }, dragging: { true: "_12zfob1l", false: "_12zfob1m" }, first: { true: "_12zfob1n", false: "_12zfob1o" }, last: { true: "_12zfob1p", false: "_12zfob1q" }, groupByField: { true: "_12zfob1r", false: "_12zfob1s" }, firstInCategory: { true: "_12zfob1t", false: "_12zfob1u" }, lastInCategory: { true: "_12zfob1v", false: "_12zfob1w" }, pinned: { start: "_12zfob1x", end: "_12zfob1y", false: "_12zfob1z" }, filtered: { true: "_12zfob110", false: "_12zfob111" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob112"], [{ pinned: "end", firstInCategory: true }, "_12zfob113"], [{ pinned: false, lastInCategory: true }, "_12zfob114"]] });
-var HeaderClsRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zfob17 _16lm1iwm _16lm1iw2", variantClassNames: { pinned: { start: "_12zfob18", end: "_12zfob19", false: "_12zfob1a" }, virtualized: { true: "_12zfob1b", false: "_12zfob1c" }, overflow: { true: "_12zfob1d", false: "_12zfob1e" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1f"], [{ overflow: true, pinned: "end" }, "_12zfob1g"]] });
-var HeaderFilterCls = "_12zfob11a _16lm1iwl _16lm1iw12 _16lm1iw13 _16lm1iw1";
-var HeaderFilterEditorCls = "_16lm1iws _16lm1iwq";
-var HeaderGroupCls = "_12zfob119 _16lm1iwl _16lm1iw12 _16lm1iw13";
+var HeaderCellRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zfob1h _16lm1iwn", variantClassNames: { rowActive: { false: "_12zfob1i", true: "_12zfob1j" }, zebra: { false: "_12zfob1k", even: "_12zfob1l", odd: "_12zfob1m" }, dragging: { true: "_12zfob1n", false: "_12zfob1o" }, first: { true: "_12zfob1p", false: "_12zfob1q" }, last: { true: "_12zfob1r", false: "_12zfob1s" }, groupByField: { true: "_12zfob1t", false: "_12zfob1u" }, firstInCategory: { true: "_12zfob1v", false: "_12zfob1w" }, lastInCategory: { true: "_12zfob1x", false: "_12zfob1y" }, pinned: { start: "_12zfob1z", end: "_12zfob110", false: "_12zfob111" }, filtered: { true: "_12zfob112", false: "_12zfob113" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob114"], [{ pinned: "end", firstInCategory: true }, "_12zfob115"], [{ pinned: false, lastInCategory: true }, "_12zfob116"]] });
+var HeaderClsRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zfob17 _16lm1iwn _16lm1iw2", variantClassNames: { pinned: { start: "_12zfob18", end: "_12zfob19", false: "_12zfob1a" }, virtualized: { true: "_12zfob1b", false: "_12zfob1c" }, overflow: { true: "_12zfob1d", false: "_12zfob1e" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1f"], [{ overflow: true, pinned: "end" }, "_12zfob1g"]] });
+var HeaderFilterCls = "_12zfob11c _16lm1iwm _16lm1iw13 _16lm1iw14 _16lm1iw1";
+var HeaderFilterEditorCls = "_16lm1iwt _16lm1iwr";
+var HeaderGroupCls = "_12zfob11b _16lm1iwm _16lm1iw13 _16lm1iw14";
 var HeaderScrollbarPlaceholderCls = "_12zfob16 _16lm1iw2";
 var HeaderSortIconCls = "_16lm1iw1";
 var HeaderSortIconIndexCls = "_12zfob15";
 var HeaderSortIconRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "", variantClassNames: { align: { start: "_12zfob12", center: "_12zfob13", end: "_12zfob14" } }, defaultVariants: {}, compoundVariants: [] });
-var HeaderWrapperCls = "_12zfob118 _16lm1iw18 _16lm1iw1 _16lm1iwl _16lm1iw12";
+var HeaderWrapperCls = "_12zfob11a _16lm1iw19 _16lm1iw1 _16lm1iwm _16lm1iw13";
 
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
 var defaultLineStyle = {
@@ -3943,8 +4267,8 @@ var defaultLineStyle = {
 var InfiniteTableIconClassName = "InfiniteTableIcon";
 function SortIcon(props) {
   var _a;
-  const [rendered, setRendered] = useState5(true);
-  const [opacity, setOpacity] = useState5(0);
+  const [rendered, setRendered] = useState8(true);
+  const [opacity, setOpacity] = useState8(0);
   const { direction, lineWidth = 1, style, className, index } = props;
   const showIndex = index != null && index > 0;
   const size = (_a = props.size) != null ? _a : 16;
@@ -3958,16 +4282,21 @@ function SortIcon(props) {
   }), props.lineStyle), {
     opacity
   });
-  useEffect7(() => {
+  useEffect9(() => {
     const newOpacity = direction != 0 ? 1 : 0;
     if (!rendered && newOpacity) {
       setRendered(true);
     }
     if (newOpacity !== opacity) {
-      requestAnimationFrame(() => {
+      const rafId = requestAnimationFrame(() => {
         setOpacity(newOpacity);
       });
+      return () => {
+        cancelAnimationFrame(rafId);
+      };
     }
+    return () => {
+    };
   }, [direction, rendered]);
   const onTransitionEnd = () => {
     const hidden = opacity === 0 && direction === 0;
@@ -3983,19 +4312,19 @@ function SortIcon(props) {
   if (direction === -1) {
     indexStyle.top = "100%";
   }
-  return /* @__PURE__ */ createElement10("div", {
+  return /* @__PURE__ */ createElement12("div", {
     style: __spreadProps(__spreadValues({}, style), { width: size }),
     className: join(className, InfiniteTableIconClassName, `${InfiniteTableIconClassName}-sort`)
-  }, showIndex ? /* @__PURE__ */ createElement10("div", {
+  }, showIndex ? /* @__PURE__ */ createElement12("div", {
     "data-name": "index",
     style: indexStyle,
     className: HeaderSortIconIndexCls
-  }, index) : null, /* @__PURE__ */ createElement10("div", {
+  }, index) : null, /* @__PURE__ */ createElement12("div", {
     style: __spreadValues({ width: sizes[0] }, lineStyle),
     onTransitionEnd
-  }), /* @__PURE__ */ createElement10("div", {
+  }), /* @__PURE__ */ createElement12("div", {
     style: __spreadValues({ width: sizes[1] }, lineStyle)
-  }), /* @__PURE__ */ createElement10("div", {
+  }), /* @__PURE__ */ createElement12("div", {
     style: __spreadValues({ width: sizes[2] }, lineStyle)
   }));
 }
@@ -4003,8 +4332,8 @@ function SortIcon(props) {
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
 import {
   Fragment,
-  createElement as createElement11,
-  memo as memo5
+  createElement as createElement13,
+  memo as memo7
 } from "react";
 
 // src/components/InfiniteTable/hooks/useInfiniteTableState.ts
@@ -4018,13 +4347,13 @@ var useInfiniteTableState = () => {
 // src/components/InfiniteTable/components/cell.css.ts
 var import_createRuntimeFn2 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var CellClsVariants = { shifting: "_1eexc2a3", dragging: "_1eexc2a4" };
-var ColumnCellCls = "_1eexc2a5 _16lm1iwl _16lm1iw12 _16lm1iw13 _16lm1iw2 _16lm1iw1b _16lm1iw1c";
-var ColumnCellRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1eexc2a7", variantClassNames: { dragging: { false: "_1eexc2a8", true: "_1eexc2a9" }, zebra: { false: "_1eexc2aa", even: "_1eexc2ab", odd: "_1eexc2ac" }, first: { true: "_1eexc2ad", false: "_1eexc2ae" }, last: { true: "_1eexc2af", false: "_1eexc2ag" }, groupByField: { true: "_1eexc2ah", false: "_1eexc2ai" }, firstInCategory: { true: "_1eexc2aj", false: "_1eexc2ak" }, lastInCategory: { true: "_1eexc2al", false: "_1eexc2am" }, pinned: { start: "_1eexc2an", end: "_1eexc2ao", false: "_1eexc2ap" }, filtered: { true: "_1eexc2aq", false: "_1eexc2ar" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2as"], [{ pinned: "end", firstInCategory: true }, "_1eexc2at"]] });
+var ColumnCellCls = "_1eexc2a5 _16lm1iwm _16lm1iw13 _16lm1iw14 _16lm1iw2 _16lm1iw1c _16lm1iw1d";
+var ColumnCellRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1eexc2a7", variantClassNames: { dragging: { false: "_1eexc2a8", true: "_1eexc2a9" }, rowActive: { false: "_1eexc2aa", true: "_1eexc2ab" }, zebra: { false: "_1eexc2ac", even: "_1eexc2ad", odd: "_1eexc2ae" }, first: { true: "_1eexc2af", false: "_1eexc2ag" }, last: { true: "_1eexc2ah", false: "_1eexc2ai" }, groupByField: { true: "_1eexc2aj", false: "_1eexc2ak" }, firstInCategory: { true: "_1eexc2al", false: "_1eexc2am" }, lastInCategory: { true: "_1eexc2an", false: "_1eexc2ao" }, pinned: { start: "_1eexc2ap", end: "_1eexc2aq", false: "_1eexc2ar" }, filtered: { true: "_1eexc2as", false: "_1eexc2at" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2au"], [{ pinned: "end", firstInCategory: true }, "_1eexc2av"]] });
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
-var { rootClassName: rootClassName3 } = internalProps;
-var InfiniteTableCellClassName = `${rootClassName3}Cell`;
-var InfiniteTableCellContentClassName = `${rootClassName3}Cell_content`;
+var { rootClassName: rootClassName5 } = internalProps;
+var InfiniteTableCellClassName = `${rootClassName5}Cell`;
+var InfiniteTableCellContentClassName = `${rootClassName5}Cell_content`;
 function InfiniteTableCellFn(props) {
   var _b, _c, _d;
   const _a = props, {
@@ -4078,37 +4407,37 @@ function InfiniteTableCellFn(props) {
     style,
     "data-column-id": column.id,
     className: join(domProps.className, justifyContent[(_b = column.align) != null ? _b : "start"], InfiniteTableCellClassName, ColumnCellCls, shifting ? `${InfiniteTableCellClassName}--shifting ${CellClsVariants.shifting}` : ""),
-    children: /* @__PURE__ */ createElement11(Fragment, null, beforeChildren, /* @__PURE__ */ createElement11("div", {
+    children: /* @__PURE__ */ createElement13(Fragment, null, beforeChildren, /* @__PURE__ */ createElement13("div", {
       className: join(InfiniteTableCellContentClassName, cssEllipsis ? cssEllipsisClassName : overflow.hidden, contentClassName),
       style: contentStyle
     }, children), afterChildren)
   });
   const RenderComponent = cellType === "body" ? (_c = column.components) == null ? void 0 : _c.ColumnCell : (_d = column.components) == null ? void 0 : _d.HeaderCell;
   if (RenderComponent) {
-    return /* @__PURE__ */ createElement11(RenderComponent, __spreadValues({}, finalDOMProps));
+    return /* @__PURE__ */ createElement13(RenderComponent, __spreadValues({}, finalDOMProps));
   }
-  return /* @__PURE__ */ createElement11("div", __spreadProps(__spreadValues({}, finalDOMProps), {
+  return /* @__PURE__ */ createElement13("div", __spreadProps(__spreadValues({}, finalDOMProps), {
     ref: domRef
   }));
 }
-var InfiniteTableCell = memo5(InfiniteTableCellFn);
+var InfiniteTableCell = memo7(InfiniteTableCellFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
 import {
-  createElement as createElement12
+  createElement as createElement14
 } from "react";
-import { useEffect as useEffect8, useState as useState6 } from "react";
-var { rootClassName: rootClassName4 } = internalProps;
-var InfiniteTableColumnHeaderFilterClassName = `${rootClassName4}HeaderCell__filter`;
+import { useEffect as useEffect10, useState as useState9 } from "react";
+var { rootClassName: rootClassName6 } = internalProps;
+var InfiniteTableColumnHeaderFilterClassName = `${rootClassName6}HeaderCell__filter`;
 var stopPropagation = (e) => e.stopPropagation();
 function InfiniteTableColumnHeaderFilter(props) {
   var _a, _b, _c, _d;
-  const [theValue, setTheValue] = useState6((_b = (_a = props.columnFilterValue) == null ? void 0 : _a.filterValue) != null ? _b : "");
+  const [theValue, setTheValue] = useState9((_b = (_a = props.columnFilterValue) == null ? void 0 : _a.filterValue) != null ? _b : "");
   const onInputChange = (filterValue) => {
     setTheValue(filterValue);
     props.onChange(filterValue);
   };
-  useEffect8(() => {
+  useEffect10(() => {
     var _a2;
     if (props.columnFilterValue) {
       if (theValue !== props.columnFilterValue.filterValue) {
@@ -4135,15 +4464,15 @@ function InfiniteTableColumnHeaderFilter(props) {
     onChange: onInputChange
   };
   const FilterEditor = props.filterEditor;
-  return /* @__PURE__ */ createElement12("div", {
+  return /* @__PURE__ */ createElement14("div", {
     onPointerUp: stopPropagation,
     onPointerDown: stopPropagation,
     className: `${InfiniteTableColumnHeaderFilterClassName} ${HeaderFilterCls}`,
     style: { height: props.columnHeaderHeight }
-  }, FilterEditor ? /* @__PURE__ */ createElement12(FilterEditor, __spreadValues({}, filterEditorProps)) : null);
+  }, FilterEditor ? /* @__PURE__ */ createElement14(FilterEditor, __spreadValues({}, filterEditorProps)) : null);
 }
 function InfiniteTableColumnHeaderFilterEmpty() {
-  return /* @__PURE__ */ createElement12("div", {
+  return /* @__PURE__ */ createElement14("div", {
     onPointerUp: stopPropagation,
     onPointerDown: stopPropagation,
     className: `${InfiniteTableColumnHeaderFilterClassName} ${HeaderFilterCls}`,
@@ -4153,8 +4482,8 @@ function InfiniteTableColumnHeaderFilterEmpty() {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
 var InfiniteTableHeaderCellContext = createContext4(null);
-var { rootClassName: rootClassName5 } = internalProps;
-var InfiniteTableHeaderCellClassName = `${rootClassName5}HeaderCell`;
+var { rootClassName: rootClassName7 } = internalProps;
+var InfiniteTableHeaderCellClassName = `${rootClassName7}HeaderCell`;
 function InfiniteTableHeaderCell(props) {
   var _a, _b, _c, _d, _e;
   const column = props.column;
@@ -4162,13 +4491,13 @@ function InfiniteTableHeaderCell(props) {
   const { onResize, height, width, headerOptions } = props;
   const sortInfo = column.computedSortInfo;
   let header = column.header;
-  const ref = useCallback6((node) => {
+  const ref = useCallback7((node) => {
     var _a2;
     domRef.current = node;
     (_a2 = props.domRef) == null ? void 0 : _a2.call(props, node);
   }, [props.domRef]);
   const alwaysShow = headerOptions.alwaysReserveSpaceForSortIcon;
-  const sortTool = column.computedSorted || alwaysShow ? /* @__PURE__ */ createElement13(SortIcon, {
+  const sortTool = column.computedSorted || alwaysShow ? /* @__PURE__ */ createElement15(SortIcon, {
     index: column.computedMultiSort ? column.computedSortIndex + 1 : void 0,
     className: `${InfiniteTableHeaderCellClassName}__sort-icon ${HeaderSortIconCls} ${HeaderSortIconRecipe({
       align: column.align || "start"
@@ -4185,15 +4514,15 @@ function InfiniteTableHeaderCell(props) {
   const align = column.align || "start";
   const renderChildren = () => {
     if (header instanceof Function) {
-      header = /* @__PURE__ */ createElement13(RenderHookComponent, {
+      header = /* @__PURE__ */ createElement15(RenderHookComponent, {
         render: header,
         renderParam
       });
     }
     header = header != null ? header : column.name;
-    return /* @__PURE__ */ createElement13(Fragment2, null, align === "end" ? sortTool : null, header, align !== "end" ? sortTool : null);
+    return /* @__PURE__ */ createElement15(Fragment2, null, align === "end" ? sortTool : null, header, align !== "end" ? sortTool : null);
   };
-  const domRef = useRef10(null);
+  const domRef = useRef12(null);
   const {
     computed: { computedRemainingSpace, showColumnFilters },
     componentState: { portalDOMRef, columnHeaderHeight, filterEditors }
@@ -4203,7 +4532,7 @@ function InfiniteTableHeaderCell(props) {
     getState: getDataSourceState,
     componentState: { filterDelay, filterTypes }
   } = useDataSourceContextValue();
-  useEffect9(() => {
+  useEffect11(() => {
     let clearOnResize = null;
     const node = domRef.current;
     if (onResize && node) {
@@ -4224,7 +4553,7 @@ function InfiniteTableHeaderCell(props) {
   });
   let draggingProxy = null;
   if (dragging) {
-    draggingProxy = /* @__PURE__ */ createElement13("div", {
+    draggingProxy = /* @__PURE__ */ createElement15("div", {
       className: `${InfiniteTableHeaderCellClassName}Proxy ${HeaderCellProxy}`,
       style: {
         position: "absolute",
@@ -4241,7 +4570,7 @@ function InfiniteTableHeaderCell(props) {
   const contentRecipeVariants = {
     filtered: column.computedFiltered
   };
-  const setFilterValue = useCallback6((filterValue) => {
+  const setFilterValue = useCallback7((filterValue) => {
     var _a2;
     const state = getDataSourceState();
     let newFilterValue = (_a2 = state.filterValue) != null ? _a2 : [];
@@ -4302,9 +4631,9 @@ function InfiniteTableHeaderCell(props) {
   ]);
   const filterType = column.computedFilterType;
   const FilterEditor = filterEditors[filterType] || defaultFilterEditors[filterType] || StringFilterEditor;
-  return /* @__PURE__ */ createElement13(ContextProvider, {
+  return /* @__PURE__ */ createElement15(ContextProvider, {
     value: renderParam
-  }, /* @__PURE__ */ createElement13(InfiniteTableCell, {
+  }, /* @__PURE__ */ createElement15(InfiniteTableCell, {
     domRef: ref,
     cellType: "header",
     column,
@@ -4316,9 +4645,9 @@ function InfiniteTableHeaderCell(props) {
     onPointerUp,
     contentClassName: join(HeaderCellContentRecipe(contentRecipeVariants), justifyContent[(_c = column.align) != null ? _c : "start"]),
     contentStyle: showColumnFilters ? { height: height / 2 } : void 0,
-    className: join(InfiniteTableHeaderCellClassName, userSelect.none, column.computedSortable ? cursor.pointer : "", useCellClassName(column, [InfiniteTableHeaderCellClassName, InfiniteTableCellClassName], HeaderCellRecipe, { dragging, zebra: false }), CellCls),
+    className: join(InfiniteTableHeaderCellClassName, userSelect.none, column.computedSortable ? cursor.pointer : "", useCellClassName(column, [InfiniteTableHeaderCellClassName, InfiniteTableCellClassName], HeaderCellRecipe, { dragging, zebra: false, rowActive: false }), CellCls),
     cssEllipsis: (_e = (_d = column.headerCssEllipsis) != null ? _d : column.cssEllipsis) != null ? _e : true,
-    afterChildren: showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ createElement13(InfiniteTableColumnHeaderFilter, {
+    afterChildren: showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ createElement15(InfiniteTableColumnHeaderFilter, {
       filterEditor: FilterEditor,
       filterTypes,
       onChange: debouncedOnFilterValueChange,
@@ -4326,7 +4655,7 @@ function InfiniteTableHeaderCell(props) {
       columnLabel: column.field || column.name || column.id,
       columnFilterValue: column.computedFilterValue,
       columnHeaderHeight
-    }) : /* @__PURE__ */ createElement13(InfiniteTableColumnHeaderFilterEmpty, null) : null,
+    }) : /* @__PURE__ */ createElement15(InfiniteTableColumnHeaderFilterEmpty, null) : null,
     renderChildren
   }), draggingProxy);
 }
@@ -4337,8 +4666,8 @@ function useInfiniteHeaderCell() {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
 import {
-  createElement as createElement16,
-  useCallback as useCallback8,
+  createElement as createElement18,
+  useCallback as useCallback9,
   useMemo as useMemo6
 } from "react";
 
@@ -4463,14 +4792,14 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 import {
-  createElement as createElement15,
-  memo as memo6
+  createElement as createElement17,
+  memo as memo8
 } from "react";
-import { useCallback as useCallback7, useEffect as useEffect10, useRef as useRef11 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect12, useRef as useRef13 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
 import {
-  createElement as createElement14
+  createElement as createElement16
 } from "react";
 var TableHeaderGroupClassName = `${rootClassName2}HeaderGroup`;
 function InfiniteTableHeaderGroup(props) {
@@ -4481,19 +4810,19 @@ function InfiniteTableHeaderGroup(props) {
       columnGroup
     });
   }
-  return /* @__PURE__ */ createElement14("div", {
+  return /* @__PURE__ */ createElement16("div", {
     ref: props.domRef,
     "data-group-id": columnGroup.uniqueGroupId,
     className: join(HeaderGroupCls, TableHeaderGroupClassName),
     style: { width, height }
-  }, /* @__PURE__ */ createElement14("div", {
+  }, /* @__PURE__ */ createElement16("div", {
     className: join(`${TableHeaderGroupClassName}__header-content`, cssEllipsisClassName)
   }, header));
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
-var { rootClassName: rootClassName6 } = internalProps;
-var TableHeaderClassName = `${rootClassName6}Header`;
+var { rootClassName: rootClassName8 } = internalProps;
+var TableHeaderClassName = `${rootClassName8}Header`;
 function InfiniteTableHeaderFn(props) {
   const {
     brain,
@@ -4509,7 +4838,7 @@ function InfiniteTableHeaderFn(props) {
     componentState: { headerBrain, headerOptions }
   } = useInfiniteTable();
   const { computedVisibleColumnsMap, showColumnFilters } = computed;
-  useEffect10(() => {
+  useEffect12(() => {
     const onScroll = (scrollPosition) => {
       if (domRef.current) {
         domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
@@ -4518,7 +4847,7 @@ function InfiniteTableHeaderFn(props) {
     const removeOnScroll = brain.onScroll(onScroll);
     return removeOnScroll;
   }, [brain]);
-  const domRef = useRef11(null);
+  const domRef = useRef13(null);
   const headerCls = HeaderClsRecipe({
     overflow: false,
     virtualized: true
@@ -4528,7 +4857,7 @@ function InfiniteTableHeaderFn(props) {
     className: join(TableHeaderClassName, `${TableHeaderClassName}--virtualized`, className, headerCls),
     style: __spreadProps(__spreadValues({}, style), { height: columnHeaderHeight })
   };
-  const renderCell = useCallback7((params) => {
+  const renderCell = useCallback8((params) => {
     const {
       rowIndex,
       colIndex,
@@ -4553,7 +4882,7 @@ function InfiniteTableHeaderFn(props) {
         computedWidth: colGroupItem.computedWidth,
         groupOffset: colGroupItem.groupOffset
       });
-      return /* @__PURE__ */ createElement15(InfiniteTableHeaderGroup, {
+      return /* @__PURE__ */ createElement17(InfiniteTableHeaderGroup, {
         domRef: domRef2,
         columns: columns2,
         width: widthWithColspan,
@@ -4561,7 +4890,7 @@ function InfiniteTableHeaderFn(props) {
         columnGroup: computedColumnGroup
       });
     }
-    return /* @__PURE__ */ createElement15(InfiniteTableHeaderCell, {
+    return /* @__PURE__ */ createElement17(InfiniteTableHeaderCell, {
       domRef: domRef2,
       column,
       headerOptions,
@@ -4577,13 +4906,13 @@ function InfiniteTableHeaderFn(props) {
     columnGroupsMaxDepth,
     showColumnFilters
   ]);
-  return /* @__PURE__ */ createElement15("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement15(RawTable, {
+  return /* @__PURE__ */ createElement17("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement17(RawTable, {
     renderCell,
     brain: headerBrain,
     cellHoverClassNames: []
   }));
 }
-var InfiniteTableHeader = memo6(InfiniteTableHeaderFn);
+var InfiniteTableHeader = memo8(InfiniteTableHeaderFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
 function TableHeaderWrapper(props) {
@@ -4612,7 +4941,7 @@ function TableHeaderWrapper(props) {
     }
     return buildColumnAndGroupTree(computedVisibleColumns, computedColumnGroups, columnGroupsDepthsMap, columnGroupsMaxDepth);
   }, [computedVisibleColumns, computedColumnGroups, columnGroupsDepthsMap]);
-  const cellspan = useCallback8(({ rowIndex, colIndex }) => {
+  const cellspan = useCallback9(({ rowIndex, colIndex }) => {
     const column = computedVisibleColumns[colIndex];
     const rowspan2 = 1;
     const colspan2 = 1;
@@ -4645,9 +4974,9 @@ function TableHeaderWrapper(props) {
     rows,
     columnGroupsDepthsMap
   ]);
-  const rowspan = useCallback8(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).rowspan, [cellspan]);
-  const colspan = useCallback8(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).colspan, [cellspan]);
-  const rowHeight = useCallback8((index) => {
+  const rowspan = useCallback9(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).rowspan, [cellspan]);
+  const colspan = useCallback9(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).colspan, [cellspan]);
+  const rowHeight = useCallback9((index) => {
     return showColumnFilters ? index < rows - 1 ? columnHeaderHeight : 2 * columnHeaderHeight : columnHeaderHeight;
   }, [rows, showColumnFilters, columnHeaderHeight]);
   useMatrixBrain(brain, {
@@ -4662,21 +4991,21 @@ function TableHeaderWrapper(props) {
     fixedColsEnd: computedPinnedEndColumns.length,
     fixedColsStart: computedPinnedStartColumns.length
   });
-  const header = /* @__PURE__ */ createElement16(InfiniteTableHeader, {
+  const header = /* @__PURE__ */ createElement18(InfiniteTableHeader, {
     columns: computedVisibleColumns,
     brain,
     columnHeaderHeight: height,
     columnGroupsMaxDepth,
     columnAndGroupTreeInfo
   });
-  const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ createElement16("div", {
+  const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ createElement18("div", {
     className: HeaderScrollbarPlaceholderCls,
     style: {
       zIndex: 1e3,
       width: getScrollbarWidth()
     }
   }) : null;
-  return /* @__PURE__ */ createElement16("div", {
+  return /* @__PURE__ */ createElement18("div", {
     className: HeaderWrapperCls,
     style: {
       height
@@ -4686,12 +5015,12 @@ function TableHeaderWrapper(props) {
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
 import {
-  createElement as createElement17,
+  createElement as createElement19,
   forwardRef as forwardRef4,
-  useCallback as useCallback9,
-  useRef as useRef12
+  useCallback as useCallback10,
+  useRef as useRef14
 } from "react";
-import { useEffect as useEffect11 } from "react";
+import { useEffect as useEffect13 } from "react";
 
 // src/components/utils/decamelize.ts
 function decamelize(str, options) {
@@ -4700,14 +5029,14 @@ function decamelize(str, options) {
 }
 
 // src/components/InfiniteTable/theme.css.ts
-var ThemeVars = { color: { accent: "var(--infinite-accent-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { draggingBackground: "var(--infinite-header-cell-dragging-background)", background: "var(--infinite-header-cell-background)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", color: "var(--infinite-cell-color)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", hoverBackground: "var(--infinite-row-hover-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
+var ThemeVars = { color: { accent: "var(--infinite-accent-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { draggingBackground: "var(--infinite-header-cell-dragging-background)", background: "var(--infinite-header-cell-background)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", color: "var(--infinite-cell-color)", activeBorderColor_R: "var(--infinite-active-cell-border-color--r)", activeBorderColor_G: "var(--infinite-active-cell-border-color--g)", activeBorderColor_B: "var(--infinite-active-cell-border-color--b)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBackgroundFromBorder: "var(--infinite-active-cell-background-from-border)", activeBackground: "var(--infinite-active-cell-background)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBackground: "var(--infinite-active-row-background)", activeBackgroundFromBorder: "var(--infinite-active-row-background-from-border)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", hoverBackground: "var(--infinite-row-hover-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
 
 // src/components/InfiniteTable/InfiniteCls.css.ts
 var import_createRuntimeFn3 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var FooterCls = "_16lm1iw1";
-var InfiniteCls = "_1yeub2v0 _16lm1iw1 _16lm1iwl _16lm1iw11 _16lm1iw0";
+var InfiniteCls = "_1yeub2v0 _16lm1iw1 _16lm1iwm _16lm1iw12 _16lm1iw0";
 var InfiniteClsRecipe = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "", variantClassNames: { focused: { true: "_1yeub2v2", false: "_1yeub2v3" }, focusedWithin: { true: "_1yeub2v4", false: "_1yeub2v5" }, hasPinnedStart: { true: "_1yeub2v6", false: "_1yeub2v7" }, hasPinnedEnd: { true: "_1yeub2v8", false: "_1yeub2v9" }, hasPinnedStartOverflow: { true: "_1yeub2va", false: "_1yeub2vb" }, hasPinnedEndOverflow: { true: "_1yeub2vc", false: "_1yeub2vd" } }, defaultVariants: {}, compoundVariants: [] });
-var InfiniteClsShiftingColumns = "_16lm1iwo";
+var InfiniteClsShiftingColumns = "_16lm1iwp";
 var PinnedRowsContainerClsVariants = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "", variantClassNames: { pinned: { start: "_1yeub2vh", end: "_1yeub2vi", false: "_1yeub2vj" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
@@ -4738,9 +5067,9 @@ var enforceStyle = (node, style) => {
   }
 };
 var InfiniteTableLicenseFooter = forwardRef4(function InfiniteTableLicenseFooter2(props, ref) {
-  const { rootClassName: rootClassName9 } = useInternalProps();
-  const domRef = useRef12(null);
-  const domCallback = useCallback9((node) => {
+  const { rootClassName: rootClassName11 } = useInternalProps();
+  const domRef = useRef14(null);
+  const domCallback = useCallback10((node) => {
     domRef.current = node;
     if (!ref) {
       return;
@@ -4751,7 +5080,7 @@ var InfiniteTableLicenseFooter = forwardRef4(function InfiniteTableLicenseFooter
       ref.current = node;
     }
   }, []);
-  useEffect11(() => {
+  useEffect13(() => {
     const forceStyle = () => {
       requestAnimationFrame(() => {
         var _a;
@@ -4765,12 +5094,12 @@ var InfiniteTableLicenseFooter = forwardRef4(function InfiniteTableLicenseFooter
       clearInterval(intervalId);
     };
   }, []);
-  return /* @__PURE__ */ createElement17("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ createElement19("div", __spreadProps(__spreadValues({
     ref: domCallback
   }, props), {
-    className: join(`${rootClassName9}-Footer`, FooterCls, props.className),
+    className: join(`${rootClassName11}-Footer`, FooterCls, props.className),
     style: defaultStyle
-  }), "Powered by", " ", /* @__PURE__ */ createElement17("a", {
+  }), "Powered by", " ", /* @__PURE__ */ createElement19("a", {
     href: "https://infinite-table.com",
     rel: "noopener noreferrer",
     role: "link",
@@ -4781,13 +5110,13 @@ var InfiniteTableLicenseFooter = forwardRef4(function InfiniteTableLicenseFooter
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
 import {
   createContext as createContext5,
-  createElement as createElement18,
-  memo as memo7
+  createElement as createElement20,
+  memo as memo9
 } from "react";
-import { useContext as useContext6 } from "react";
-var { rootClassName: rootClassName7 } = internalProps;
+import { useCallback as useCallback11, useContext as useContext6, useMemo as useMemo7 } from "react";
+var { rootClassName: rootClassName9 } = internalProps;
 var InfiniteTableColumnCellContext = createContext5(null);
-var InfiniteTableColumnCellClassName = `${rootClassName7}ColumnCell`;
+var InfiniteTableColumnCellClassName = `${rootClassName9}ColumnCell`;
 function isColumnWithField(c) {
   return typeof c.field === "string";
 }
@@ -4811,7 +5140,7 @@ function InfiniteTableColumnCellFn(props) {
     showZebraRows
   } = props;
   if (!column) {
-    return /* @__PURE__ */ createElement18("div", {
+    return /* @__PURE__ */ createElement20("div", {
       ref: domRef
     }, "no column");
   }
@@ -4839,17 +5168,35 @@ function InfiniteTableColumnCellFn(props) {
       value
     });
   }
+  const { getState, componentActions } = useInfiniteTable();
+  const { activeRowIndex } = getState();
+  const rowActive = rowIndex === activeRowIndex;
+  const onClick = useCallback11(() => {
+    const { activeRowIndex: activeRowIndex2, activeCellIndex } = getState();
+    if (activeRowIndex2 != null) {
+      componentActions.activeRowIndex = rowIndex;
+      return;
+    }
+    if (activeCellIndex != null) {
+      componentActions.activeCellIndex = [
+        rowIndex,
+        column.computedVisibleIndex
+      ];
+    }
+  }, [rowIndex, column.computedVisibleIndex]);
   const { componentState: computedDataSource } = useDataSourceContextValue();
   const rest = rowInfo.isGroupRow ? {
     rowInfo,
     isGroupRow: rowInfo.isGroupRow,
     data: rowInfo.data,
+    rowActive,
     value,
     field: column.field
   } : {
     rowInfo,
     isGroupRow: rowInfo.isGroupRow,
     data: rowInfo.data,
+    rowActive,
     value,
     field: column.field
   };
@@ -4865,28 +5212,28 @@ function InfiniteTableColumnCellFn(props) {
     isGroupRow,
     rowIndex,
     toggleGroupRow,
-    toggleCurrentGroupRow: () => {
+    toggleCurrentGroupRow: useCallback11(() => {
       if (!rowInfo.isGroupRow) {
         return;
       }
       toggleGroupRow(rowInfo.groupKeys);
-    },
+    }, []),
     groupBy: computedDataSource.groupBy,
     pivotBy: computedDataSource.pivotBy
   });
-  const renderChildren = () => {
+  const renderChildren = useCallback11(() => {
     if (hidden) {
       return null;
     }
     const renderFn = column.render || column.renderValue;
     if (renderFn) {
-      return /* @__PURE__ */ createElement18(RenderHookComponent, {
+      return /* @__PURE__ */ createElement20(RenderHookComponent, {
         render: renderFn,
         renderParam
       });
     }
     return renderValue;
-  };
+  }, [column, hidden, ...Object.values(renderParam)]);
   const rowPropsAndStyleArgs = __spreadProps(__spreadValues({}, rest), {
     rowIndex
   });
@@ -4899,6 +5246,7 @@ function InfiniteTableColumnCellFn(props) {
   style = column.style ? typeof column.style === "function" ? __spreadValues(__spreadValues({}, style), column.style(stylingRenderParam) || {}) : __spreadValues(__spreadValues({}, style), column.style) : style || {};
   style.width = width;
   style.height = rowHeight;
+  const memoizedStyle = useMemo7(() => style, [!style ? null : JSON.stringify(style)]);
   const odd = (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
   const zebra = showZebraRows ? odd ? "odd" : "even" : false;
   const cellProps = {
@@ -4908,19 +5256,20 @@ function InfiniteTableColumnCellFn(props) {
     column,
     width,
     offset: virtualized ? 0 : column.computedPinningOffset,
-    style,
+    style: memoizedStyle,
     onMouseLeave,
     onMouseEnter,
+    onClick,
     cssEllipsis: (_a = column.cssEllipsis) != null ? _a : true,
-    className: join(useCellClassName(column, [InfiniteTableColumnCellClassName, InfiniteTableCellClassName], ColumnCellRecipe, { dragging: false, zebra }), colClassName, rowComputedClassName),
+    className: join(useCellClassName(column, [InfiniteTableColumnCellClassName, InfiniteTableCellClassName], ColumnCellRecipe, { dragging: false, zebra, rowActive }), colClassName, rowComputedClassName),
     renderChildren
   };
   const ContextProvider = InfiniteTableColumnCellContext.Provider;
-  return /* @__PURE__ */ createElement18(ContextProvider, {
+  return /* @__PURE__ */ createElement20(ContextProvider, {
     value: renderParam
-  }, /* @__PURE__ */ createElement18(InfiniteTableCell, __spreadValues({}, cellProps)));
+  }, /* @__PURE__ */ createElement20(InfiniteTableCell, __spreadValues({}, cellProps)));
 }
-var InfiniteTableColumnCell = memo7(InfiniteTableColumnCellFn);
+var InfiniteTableColumnCell = memo9(InfiniteTableColumnCellFn);
 function useInfiniteColumnCell() {
   const result = useContext6(InfiniteTableColumnCellContext);
   return result;
@@ -4934,35 +5283,97 @@ var RowHoverCls = "_7pupv01";
 
 // src/components/InfiniteTable/components/LoadMask.tsx
 import {
-  createElement as createElement19,
-  memo as memo8
+  createElement as createElement21,
+  memo as memo10
 } from "react";
 
 // src/components/InfiniteTable/components/LoadMask.css.ts
-var LoadMaskCls = { visible: "qy58ya1 qy58ya0 _16lm1iw2 _16lm1iwt _16lm1iwv _16lm1iwz _16lm1iwx", hidden: "qy58ya2 qy58ya0 _16lm1iw2 _16lm1iwt _16lm1iwv _16lm1iwz _16lm1iwx" };
-var LoadMaskOverlayCls = "qy58ya3 _16lm1iw2 _16lm1iwt _16lm1iwv _16lm1iwz _16lm1iwx";
+var LoadMaskCls = { visible: "qy58ya1 qy58ya0 _16lm1iw2 _16lm1iwu _16lm1iww _16lm1iw10 _16lm1iwy", hidden: "qy58ya2 qy58ya0 _16lm1iw2 _16lm1iwu _16lm1iww _16lm1iw10 _16lm1iwy" };
+var LoadMaskOverlayCls = "qy58ya3 _16lm1iw2 _16lm1iwu _16lm1iww _16lm1iw10 _16lm1iwy";
 var LoadMaskTextCls = "qy58ya4";
 
 // src/components/InfiniteTable/components/LoadMask.tsx
-var { rootClassName: rootClassName8 } = internalProps;
-var baseCls = `${rootClassName8}-LoadMask`;
+var { rootClassName: rootClassName10 } = internalProps;
+var baseCls3 = `${rootClassName10}-LoadMask`;
 function LoadMaskFn(props) {
   const { visible, children = "Loading" } = props;
-  return /* @__PURE__ */ createElement19("div", {
-    className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls}`
-  }, /* @__PURE__ */ createElement19("div", {
-    className: `${LoadMaskOverlayCls} ${baseCls}-Overlay`
-  }), /* @__PURE__ */ createElement19("div", {
-    className: `${LoadMaskTextCls} ${baseCls}-Text`
+  return /* @__PURE__ */ createElement21("div", {
+    className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls3}`
+  }, /* @__PURE__ */ createElement21("div", {
+    className: `${LoadMaskOverlayCls} ${baseCls3}-Overlay`
+  }), /* @__PURE__ */ createElement21("div", {
+    className: `${LoadMaskTextCls} ${baseCls3}-Text`
   }, children));
 }
-var LoadMask = memo8(LoadMaskFn);
+var LoadMask = memo10(LoadMaskFn);
+
+// src/components/InfiniteTable/getImperativeApi.ts
+function getImperativeApi(getState, getComputed, getDataSourceState, componentActions) {
+  const imperativeApi = {
+    setColumnOrder: (columnOrder) => {
+      componentActions.columnOrder = columnOrder;
+    },
+    setColumnVisibility: (columnVisibility) => {
+      componentActions.columnVisibility = columnVisibility;
+    },
+    getState,
+    getDataSourceState,
+    scrollRowIntoView(rowIndex, config = { offset: 0 }) {
+      const state = getState();
+      const scrollPosition = state.renderer.getScrollPositionForScrollRowIntoView(rowIndex, config);
+      const currentScrollPosition = state.brain.getScrollPosition();
+      if (scrollPosition.scrollTop !== currentScrollPosition.scrollTop) {
+        state.scrollerDOMRef.current.scrollTop = scrollPosition.scrollTop;
+      }
+    },
+    scrollColumnIntoView(colId, config = { offset: 0 }) {
+      const state = getState();
+      const computed = getComputed();
+      const computedColumn = computed.computedVisibleColumnsMap.get(colId);
+      if (!computedColumn) {
+        return;
+      }
+      const colIndex = computedColumn.computedVisibleIndex;
+      const scrollPosition = state.renderer.getScrollPositionForScrollColumnIntoView(colIndex, config);
+      const currentScrollPosition = state.brain.getScrollPosition();
+      if (scrollPosition.scrollLeft !== currentScrollPosition.scrollLeft) {
+        state.scrollerDOMRef.current.scrollLeft = scrollPosition.scrollLeft;
+      }
+    },
+    scrollCellIntoView(rowIndex, colIdOrIndex, config = { offset: 0 }) {
+      const state = getState();
+      const computed = getComputed();
+      let colIndex = colIdOrIndex;
+      if (typeof colIdOrIndex === "string") {
+        const computedColumn = computed.computedVisibleColumnsMap.get(colIdOrIndex);
+        if (!computedColumn) {
+          return;
+        }
+        colIndex = computedColumn.computedVisibleIndex;
+      }
+      const scrollPositionForCol = state.renderer.getScrollPositionForScrollColumnIntoView(colIndex, config);
+      const scrollPositionForRow = state.renderer.getScrollPositionForScrollRowIntoView(rowIndex, config);
+      const newScrollPosition = {
+        scrollLeft: scrollPositionForCol.scrollLeft,
+        scrollTop: scrollPositionForRow.scrollTop
+      };
+      const currentScrollPosition = state.brain.getScrollPosition();
+      if (newScrollPosition.scrollLeft !== currentScrollPosition.scrollLeft) {
+        state.scrollerDOMRef.current.scrollLeft = newScrollPosition.scrollLeft;
+      }
+      if (newScrollPosition.scrollTop !== currentScrollPosition.scrollTop) {
+        state.scrollerDOMRef.current.scrollTop = newScrollPosition.scrollTop;
+      }
+    }
+  };
+  return imperativeApi;
+}
 
 // src/components/InfiniteTable/hooks/useAutoSizeColumns.ts
 import {
-  useEffect as useEffect12,
-  useRef as useRef13,
-  useState as useState7
+  useEffect as useEffect14,
+  useRef as useRef15,
+  useState as useState10
 } from "react";
 var OFFSET = 10;
 function getColumnContentMaxWidths(domRef, options) {
@@ -5023,11 +5434,11 @@ function useAutoSizeColumns() {
     componentActions,
     componentState: { domRef, ready, autoSizeColumnsKey, brain }
   } = useComponentState();
-  const [refreshId, setRefreshId] = useState7(0);
+  const [refreshId, setRefreshId] = useState10(0);
   const theKey = typeof autoSizeColumnsKey === "object" ? autoSizeColumnsKey.key : autoSizeColumnsKey;
   const getTheKey = useLatest(theKey);
-  const lastExecutedIdentifierRef = useRef13(null);
-  useEffect12(() => {
+  const lastExecutedIdentifierRef = useRef15(null);
+  useEffect14(() => {
     const key = getTheKey();
     if (key == null) {
       return;
@@ -5040,7 +5451,7 @@ function useAutoSizeColumns() {
     };
     return brain.onRenderRangeChange(onChange);
   }, [brain]);
-  useEffect12(() => {
+  useEffect14(() => {
     var _a;
     if (theKey == null) {
       return;
@@ -5085,20 +5496,8 @@ function useAutoSizeColumns() {
 }
 
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
-import { useCallback as useCallback11, useEffect as useEffect13, useRef as useRef14 } from "react";
-import React25 from "react";
-
-// src/components/hooks/useRerender.ts
-import { useCallback as useCallback10, useState as useState8 } from "react";
-var useRerender = () => {
-  const [state, setState] = useState8(0);
-  return [
-    state,
-    useCallback10(() => {
-      setState((state2) => state2 + 1);
-    }, [setState])
-  ];
-};
+import { useCallback as useCallback12, useEffect as useEffect15, useRef as useRef16 } from "react";
+import React27 from "react";
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
 function useYourBrain(param) {
@@ -5128,7 +5527,7 @@ function useYourBrain(param) {
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
 var SCROLL_BOTTOM_OFFSET = 1;
 function useCellRendering(param) {
-  const { computed, bodySize } = param;
+  const { computed, bodySize, imperativeApi } = param;
   const { componentActions, componentState, getState } = useInfiniteTable();
   const {
     computedPinnedStartColumns,
@@ -5168,13 +5567,13 @@ function useCellRendering(param) {
     bodySize,
     rowspan
   });
-  const scrollTopMaxRef = useRef14(0);
-  useEffect13(() => {
+  const scrollTopMaxRef = useRef16(0);
+  useEffect15(() => {
     return brain.onRenderCountChange(() => {
       scrollTopMaxRef.current = brain.scrollTopMax;
     });
   }, [brain]);
-  useEffect13(() => {
+  useEffect15(() => {
     return brain.onScrollStop((scrollPosition) => {
       const { scrollTop } = scrollPosition;
       if (scrollTop === 0) {
@@ -5191,31 +5590,21 @@ function useCellRendering(param) {
       }
     });
   }, [brain, onScrollToTop, onScrollToBottom]);
-  useEffect13(() => {
+  useEffect15(() => {
     if (!bodySize.height) {
       return;
     }
     const { onReady } = getState();
     componentActions.ready = true;
     if (onReady) {
-      const imperativeApi = {
-        setColumnOrder: (columnOrder) => {
-          componentActions.columnOrder = columnOrder;
-        },
-        setColumnVisibility: (columnVisibility) => {
-          componentActions.columnVisibility = columnVisibility;
-        },
-        getState,
-        getDataSourceState
-      };
       onReady(imperativeApi);
     }
   }, [!!bodySize.height]);
   const [, rerender] = useRerender();
-  useEffect13(() => {
+  useEffect15(() => {
     rerender();
   }, [dataSourceState]);
-  const renderCell = useCallback11((params) => {
+  const renderCell = useCallback12((params) => {
     const {
       rowIndex,
       colIndex,
@@ -5250,7 +5639,7 @@ function useCellRendering(param) {
       rowStyle,
       rowClassName
     };
-    return /* @__PURE__ */ React25.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
+    return /* @__PURE__ */ React27.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
   }, [
     rowHeight,
     getData,
@@ -5268,13 +5657,13 @@ function useCellRendering(param) {
 }
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-import { useCallback as useCallback14, useEffect as useEffect23, useState as useState12 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect25, useState as useState14 } from "react";
 
 // src/components/InfiniteTable/hooks/useColumnGroups.ts
-import { useEffect as useEffect15 } from "react";
+import { useEffect as useEffect17 } from "react";
 
 // src/components/hooks/useInterceptedMap.ts
-import { useEffect as useEffect14 } from "react";
+import { useEffect as useEffect16 } from "react";
 function interceptMap(map2, fns) {
   const { set, delete: deleteKey, clear } = map2;
   if (fns.set) {
@@ -5362,7 +5751,7 @@ function useColumnGroups() {
     componentActions,
     getComponentState
   } = useComponentState();
-  useEffect15(() => {
+  useEffect17(() => {
     const recompute = () => {
       componentActions.columnGroupsDepthsMap = computeColumnGroupsDepths(computedColumnGroups);
     };
@@ -5373,7 +5762,7 @@ function useColumnGroups() {
       set: update
     });
   }, [computedColumnGroups]);
-  useEffect15(() => {
+  useEffect17(() => {
     return interceptMap(collapsedColumnGroups, {
       set: (key, visibleCol) => {
         const colIds = key.slice(1);
@@ -5408,10 +5797,10 @@ function useColumnGroups() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnRowspan.ts
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo8 } from "react";
 function useColumnRowspan(computedVisibleColumns) {
   const { getState: getDataSourceState } = useDataSourceContextValue();
-  const rowspan = useMemo7(() => {
+  const rowspan = useMemo8(() => {
     const colsWithRowspan = computedVisibleColumns.filter((col) => typeof col.rowspan === "function");
     return colsWithRowspan.length ? ({ rowIndex, colIndex }) => {
       const dataArray = getDataSourceState().dataArray;
@@ -5437,10 +5826,10 @@ function useColumnRowspan(computedVisibleColumns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnSizeFn.ts
-import { useCallback as useCallback12 } from "react";
+import { useCallback as useCallback13 } from "react";
 var debug4 = dbg("useColumnSizeFn");
 function useColumnSizeFn(columns) {
-  const columnSize = useCallback12((index) => {
+  const columnSize = useCallback13((index) => {
     const column = columns[index];
     if (!column) {
       debug4("cannot find column at index", index, columns);
@@ -5451,11 +5840,11 @@ function useColumnSizeFn(columns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-import { useEffect as useEffect20, useMemo as useMemo9 } from "react";
+import { useEffect as useEffect22, useMemo as useMemo10 } from "react";
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
 import {
-  createElement as createElement22
+  createElement as createElement24
 } from "react";
 
 // src/utils/stripVar.ts
@@ -5473,21 +5862,21 @@ var showLoadingIcon = (rowInfo) => {
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
 import {
-  createElement as createElement20,
-  useEffect as useEffect16
+  createElement as createElement22,
+  useEffect as useEffect18
 } from "react";
-import { useState as useState9 } from "react";
+import { useState as useState11 } from "react";
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.css.ts
 var import_createRuntimeFn5 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
-var ExpanderIconCls = "_16lm1iw6 _16lm1iwf _16lm1iwd";
+var ExpanderIconCls = "_16lm1iw6 _16lm1iwg _16lm1iwd";
 var ExpanderIconClsVariants = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "", variantClassNames: { expanded: { true: "_16lm1iwc", false: "_198z9782" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
 function ExpanderIcon(props) {
   var _a;
   const { size = 24 } = props;
-  const [expanded, setExpanded] = useState9((_a = props.expanded) != null ? _a : props.defaultExpanded);
+  const [expanded, setExpanded] = useState11((_a = props.expanded) != null ? _a : props.defaultExpanded);
   const onClick = () => {
     var _a2;
     (_a2 = props.onChange) == null ? void 0 : _a2.call(props, !expanded);
@@ -5495,12 +5884,12 @@ function ExpanderIcon(props) {
       setExpanded(!expanded);
     }
   };
-  useEffect16(() => {
+  useEffect18(() => {
     if (isControlled("expanded", props)) {
       setExpanded(props.expanded);
     }
   }, [props.expanded]);
-  return /* @__PURE__ */ createElement20("svg", {
+  return /* @__PURE__ */ createElement22("svg", {
     "data-name": "expander-icon",
     xmlns: "http://www.w3.org/2000/svg",
     height: `${size}px`,
@@ -5511,22 +5900,22 @@ function ExpanderIcon(props) {
     className: join(props.className, ExpanderIconCls, ExpanderIconClsVariants({
       expanded
     }), "InfiniteIcon", "InfiniteIcon-expander", `InfiniteIcon-expander--${expanded ? "expanded" : "collapsed"}`)
-  }, /* @__PURE__ */ createElement20("path", {
+  }, /* @__PURE__ */ createElement22("path", {
     d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
   }));
 }
 
 // src/components/InfiniteTable/components/icons/LoadingIcon.tsx
 import {
-  createElement as createElement21
+  createElement as createElement23
 } from "react";
 
 // src/components/InfiniteTable/components/icons/LoadingIcon.css.ts
-var LoadingIconCls = "_16lm1iw8 _16lm1iwf _16lm1iwd";
+var LoadingIconCls = "_16lm1iw8 _16lm1iwg _16lm1iwd";
 
 // src/components/InfiniteTable/components/icons/LoadingIcon.tsx
 var LoadingIcon = (props) => {
-  return /* @__PURE__ */ createElement21("svg", {
+  return /* @__PURE__ */ createElement23("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     style: {
       margin: "auto",
@@ -5538,14 +5927,14 @@ var LoadingIcon = (props) => {
     viewBox: "0 0 100 100",
     preserveAspectRatio: "xMidYMid",
     className: join(props.className, LoadingIconCls, "InfiniteIcon", "InfiniteIcon-loading")
-  }, /* @__PURE__ */ createElement21("circle", {
+  }, /* @__PURE__ */ createElement23("circle", {
     cx: "50",
     cy: "50",
     fill: "none",
     strokeWidth: "10",
     r: "35",
     strokeDasharray: "164.93361431346415 56.97787143782138"
-  }, /* @__PURE__ */ createElement21("animateTransform", {
+  }, /* @__PURE__ */ createElement23("animateTransform", {
     attributeName: "transform",
     type: "rotate",
     repeatCount: "indefinite",
@@ -5565,7 +5954,7 @@ function getGroupColumnRender({
     var _a, _b, _c;
     let { value, rowInfo, column, groupBy, pivotBy } = renderOptions;
     if (column.renderValue) {
-      value = /* @__PURE__ */ createElement22(RenderHookComponent, {
+      value = /* @__PURE__ */ createElement24(RenderHookComponent, {
         render: column.renderValue,
         renderParam: renderOptions
       });
@@ -5595,22 +5984,22 @@ function getGroupColumnRender({
     const showExpanderIcon = pivotBy ? (((_b = groupRowInfo.groupKeys) == null ? void 0 : _b.length) || 0) < (groupBy == null ? void 0 : groupBy.length) : (((_c = groupRowInfo.groupKeys) == null ? void 0 : _c.length) || 0) <= (groupBy == null ? void 0 : groupBy.length);
     const isLoading = showLoadingIcon(groupRowInfo);
     if (isLoading) {
-      icon = /* @__PURE__ */ createElement22(LoadingIcon, null);
+      icon = /* @__PURE__ */ createElement24(LoadingIcon, null);
     } else if (showExpanderIcon) {
-      const defaultIcon = /* @__PURE__ */ createElement22(ExpanderIcon, {
+      const defaultIcon = /* @__PURE__ */ createElement24(ExpanderIcon, {
         expanded: !collapsed,
         onChange: () => {
           toggleGroupRow(groupKeys);
         }
       });
-      icon = column.renderGroupIcon ? /* @__PURE__ */ createElement22(RenderHookComponent, {
+      icon = column.renderGroupIcon ? /* @__PURE__ */ createElement24(RenderHookComponent, {
         render: column.renderGroupIcon,
         renderParam: Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)
       }) : defaultIcon;
     }
-    return /* @__PURE__ */ createElement22("div", {
+    return /* @__PURE__ */ createElement24("div", {
       className: join(display.flex, alignItems.center)
-    }, icon, /* @__PURE__ */ createElement22("div", {
+    }, icon, /* @__PURE__ */ createElement24("div", {
       className: cssEllipsisClassName
     }, value != null ? value : null));
   };
@@ -5655,9 +6044,9 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
       const showExpanderIcon = rowInfo.isGroupRow ? pivotBy ? (((_a = rowInfo.groupKeys) == null ? void 0 : _a.length) || 0) < (groupBy == null ? void 0 : groupBy.length) : (((_b = rowInfo.groupKeys) == null ? void 0 : _b.length) || 0) <= (groupBy == null ? void 0 : groupBy.length) : false;
       const isLoading = showLoadingIcon(rowInfo);
       if (isLoading) {
-        icon = /* @__PURE__ */ createElement22(LoadingIcon, null);
+        icon = /* @__PURE__ */ createElement24(LoadingIcon, null);
       } else if (showExpanderIcon) {
-        const defaultIcon = /* @__PURE__ */ createElement22(ExpanderIcon, {
+        const defaultIcon = /* @__PURE__ */ createElement24(ExpanderIcon, {
           expanded: !collapsed,
           onChange: () => {
             if (!rowInfo.isGroupRow) {
@@ -5672,9 +6061,9 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
           icon = column.renderGroupIcon(renderParam);
         }
       }
-      return /* @__PURE__ */ createElement22("div", {
+      return /* @__PURE__ */ createElement24("div", {
         className: join(display.flex, alignItems.center, GroupRowExpanderCls)
-      }, icon, /* @__PURE__ */ createElement22("div", {
+      }, icon, /* @__PURE__ */ createElement24("div", {
         className: cssEllipsisClassName
       }, value != null ? value : null));
     }
@@ -5690,11 +6079,11 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
 }
 
 // src/components/InfiniteTable/hooks/useEffectWithRaf.ts
-import { useEffect as useEffect17, useRef as useRef15 } from "react";
+import { useEffect as useEffect19, useRef as useRef17 } from "react";
 function useEffectWithRaf(fn, deps) {
-  const rafId = useRef15(0);
-  const removeFnRaf = useRef15();
-  useEffect17(() => {
+  const rafId = useRef17(0);
+  const removeFnRaf = useRef17();
+  useEffect19(() => {
     rafId.current = requestAnimationFrame(() => {
       removeFnRaf.current = fn();
     });
@@ -5711,7 +6100,7 @@ function useEffectWithRaf(fn, deps) {
 }
 
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
-import { useCallback as useCallback13 } from "react";
+import { useCallback as useCallback14 } from "react";
 
 // src/utils/groupAndPivot/index.ts
 var LAZY_ROOT_KEY_FOR_GROUPS = "____root____";
@@ -6166,7 +6555,7 @@ function enhancedFlatten(param) {
 // src/components/DataSource/index.tsx
 import {
   Fragment as Fragment3,
-  createElement as createElement23
+  createElement as createElement25
 } from "react";
 
 // src/utils/multisort/sortTypes.ts
@@ -6355,15 +6744,15 @@ var GroupRowsState = class {
 };
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-import { useEffect as useEffect19, useMemo as useMemo8, useRef as useRef17, useState as useState10 } from "react";
+import { useEffect as useEffect21, useMemo as useMemo9, useRef as useRef19, useState as useState12 } from "react";
 
 // src/components/hooks/useEffectWithChanges.ts
-import { useEffect as useEffect18, useRef as useRef16 } from "react";
+import { useEffect as useEffect20, useRef as useRef18 } from "react";
 function useEffectWithChanges(fn, deps) {
-  const prevRef = useRef16({});
-  const oldValuesRef = useRef16({});
+  const prevRef = useRef18({});
+  const oldValuesRef = useRef18({});
   const oldValues = oldValuesRef.current;
-  const changesRef = useRef16({});
+  const changesRef = useRef18({});
   const changes = changesRef.current;
   const useEffectDeps = [];
   for (const k in deps) {
@@ -6376,7 +6765,7 @@ function useEffectWithChanges(fn, deps) {
     }
   }
   prevRef.current = deps;
-  useEffect18(() => {
+  useEffect20(() => {
     const changes2 = changesRef.current;
     const result = fn(changes2, oldValues);
     changesRef.current = {};
@@ -6644,12 +7033,12 @@ function useLoadData() {
     livePaginationCursor,
     cursorId: stateCursorId
   } = componentState;
-  const [scrollbars, setScrollbars] = useState10({
+  const [scrollbars, setScrollbars] = useState12({
     vertical: false,
     horizontal: false
   });
-  const scrollbarsRef = useRef17(scrollbars);
-  useEffect19(() => {
+  const scrollbarsRef = useRef19(scrollbars);
+  useEffect21(() => {
     notifyScrollbarsChange.onChange((scrollbars2) => {
       if (!scrollbars2) {
         return;
@@ -6659,7 +7048,7 @@ function useLoadData() {
     });
     return () => notifyScrollbarsChange.destroy();
   }, [notifyScrollbarsChange]);
-  useEffect19(() => {
+  useEffect21(() => {
     if (!livePagination) {
       return;
     }
@@ -6673,7 +7062,7 @@ function useLoadData() {
     });
     return () => cancelAnimationFrame(frameId);
   }, [livePaginationCursor]);
-  useEffect19(() => {
+  useEffect21(() => {
     if (!livePagination || livePaginationCursor !== void 0) {
       return;
     }
@@ -6687,7 +7076,7 @@ function useLoadData() {
     });
     return () => cancelAnimationFrame(frameId);
   }, [dataArray.length, livePaginationCursor]);
-  useEffect19(() => {
+  useEffect21(() => {
     const state = getComponentState();
     const { livePaginationCursor: livePaginationCursor2, livePagination: livePagination2, dataArray: dataArray2 } = state;
     if (!scrollbars.vertical && livePagination2) {
@@ -6705,7 +7094,7 @@ function useLoadData() {
     filterValue,
     cursorId: livePagination ? stateCursorId : null
   };
-  const initialRef = useRef17(true);
+  const initialRef = useRef19(true);
   useLazyLoadRange();
   useEffectWithChanges(() => {
     const componentState2 = getComponentState();
@@ -6737,7 +7126,7 @@ function useLazyLoadRange() {
     componentActions: actions,
     componentState
   } = useComponentState();
-  useEffect19(() => {
+  useEffect21(() => {
     actions.lazyLoadCacheOfLoadedBatches = new DeepMap();
   }, [componentState.data, componentState.dataParams]);
   const {
@@ -6746,7 +7135,7 @@ function useLazyLoadRange() {
     dataArray,
     scrollStopDelayUpdatedByTable
   } = componentState;
-  const latestRenderRangeRef = useRef17(null);
+  const latestRenderRangeRef = useRef19(null);
   const loadRange = (renderRange, cache = getComponentState().lazyLoadCacheOfLoadedBatches) => {
     const componentState2 = getComponentState();
     renderRange = renderRange || latestRenderRangeRef.current;
@@ -6765,8 +7154,8 @@ function useLazyLoadRange() {
       componentActions: actions
     }, cache);
   };
-  const debouncedLoadRange = useMemo8(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
-  useEffect19(() => {
+  const debouncedLoadRange = useMemo9(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
+  useEffect21(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       return notifyRenderRangeChange.onChange((renderRange) => {
         latestRenderRangeRef.current = renderRange;
@@ -6775,7 +7164,7 @@ function useLazyLoadRange() {
     }
     return;
   }, [lazyLoadBatchSize]);
-  useEffect19(() => {
+  useEffect21(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
     }
@@ -7011,6 +7400,7 @@ var forwardProps2 = (setupState) => {
     sortTypes: (sortTypes) => {
       return __spreadValues(__spreadValues({}, sortTypes_default), sortTypes);
     },
+    sortMode: (sortMode) => sortMode != null ? sortMode : "local",
     aggregationReducers: 1,
     collapseGroupRowsOnDataFunctionChange: (collapseGroupRowsOnDataFunctionChange) => collapseGroupRowsOnDataFunctionChange != null ? collapseGroupRowsOnDataFunctionChange : true,
     loading: (loading) => loading != null ? loading : false,
@@ -7054,7 +7444,7 @@ function mapPropsToState(params) {
     operatorsByFilterType,
     controlledSort,
     controlledFilter,
-    filterMode: ((_a = props.filterMode) != null ? _a : props.filterFunction != null) ? "client" : typeof props.data === "function" ? "server" : "client",
+    filterMode: ((_a = props.filterMode) != null ? _a : props.filterFunction != null) ? "local" : typeof props.data === "function" ? "remote" : "local",
     multiSort: Array.isArray(controlledSort ? props.sortInfo : props.defaultSortInfo),
     lazyLoadBatchSize: typeof props.lazyLoad === "object" ? props.lazyLoad.batchSize : void 0
   };
@@ -7445,7 +7835,7 @@ function concludeReducer(params) {
   }
   const { filterFunction, filterValue, filterTypes, operatorsByFilterType } = state;
   const shouldFilter = !!filterFunction || Array.isArray(filterValue) && filterValue.length;
-  const shouldFilterClientSide = shouldFilter && state.filterMode === "client";
+  const shouldFilterClientSide = shouldFilter && state.filterMode === "local";
   const filterDepsChanged = haveDepsChanged(previousState, state, [
     "filterFunction",
     "filterValue",
@@ -7454,7 +7844,7 @@ function concludeReducer(params) {
   const filterChanged = originalDataArrayChanged || filterDepsChanged;
   const sortInfoChanged = haveDepsChanged(previousState, state, ["sortInfo"]);
   const sortDepsChanged = originalDataArrayChanged || filterDepsChanged || sortInfoChanged;
-  const shouldFilterAgain = state.filterMode === "client" && (filterChanged || !state.lastFilterDataArray);
+  const shouldFilterAgain = state.filterMode === "local" && (filterChanged || !state.lastFilterDataArray);
   const shouldSortAgain = shouldSort && (sortDepsChanged || !state.lastSortDataArray);
   const groupBy = state.groupBy;
   const pivotBy = state.pivotBy;
@@ -7496,7 +7886,8 @@ function concludeReducer(params) {
   }
   state.filteredCount = dataArray.length;
   state.postFilterDataArray = dataArray;
-  if (shouldSort) {
+  const shouldSortClientSide = shouldSort && state.sortMode === "local";
+  if (shouldSortClientSide) {
     const prevKnownTypes = multisort.knownTypes;
     multisort.knownTypes = state.sortTypes;
     dataArray = shouldSortAgain ? multisort(sortInfo, [...dataArray]) : state.lastSortDataArray;
@@ -7576,7 +7967,7 @@ function DataSourceWithContext(props) {
   if (typeof children === "function") {
     children = children(computedValues);
   }
-  return /* @__PURE__ */ createElement23(Fragment3, null, children);
+  return /* @__PURE__ */ createElement25(Fragment3, null, children);
 }
 var DataSourceRoot = getComponentStateRoot({
   initSetupState,
@@ -7599,14 +7990,14 @@ function DataSourceCmp({ children }) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
-  return /* @__PURE__ */ createElement23(DataSourceContext.Provider, {
+  return /* @__PURE__ */ createElement25(DataSourceContext.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ createElement23(DataSourceWithContext, {
+  }, /* @__PURE__ */ createElement25(DataSourceWithContext, {
     children
   }));
 }
 function DataSource(props) {
-  return /* @__PURE__ */ createElement23(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ createElement23(DataSourceCmp, {
+  return /* @__PURE__ */ createElement25(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ createElement25(DataSourceCmp, {
     children: props.children
   }));
 }
@@ -7614,7 +8005,7 @@ function DataSource(props) {
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
 function useToggleGroupRow() {
   const { getState: getDataSourceState, componentActions: dataSourceActions } = useDataSourceContextValue();
-  const toggleGroupRow = useCallback13((groupKeys) => {
+  const toggleGroupRow = useCallback14((groupKeys) => {
     const state = getDataSourceState();
     const newState = new GroupRowsState(state.groupRowsState);
     newState.toggleGroupRow(groupKeys);
@@ -7646,7 +8037,7 @@ function useToggleGroupRow() {
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
 function useGroupByMap(groupBy) {
-  const groupByMap = useMemo9(() => {
+  const groupByMap = useMemo10(() => {
     return groupBy.reduce((acc, groupBy2, index) => {
       acc.set(groupBy2.field, {
         groupBy: groupBy2,
@@ -7670,13 +8061,13 @@ function useColumnsWhen() {
     }
   } = useComponentState();
   const groupByMap = useGroupByMap(groupBy);
-  useEffect20(() => {
+  useEffect22(() => {
     dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
   }, [groupRenderStrategy]);
-  useEffect20(() => {
+  useEffect22(() => {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
-  useEffect20(() => {
+  useEffect22(() => {
     if (pivotGrandTotalColumnPosition != void 0) {
       dataSourceActions.pivotGrandTotalColumnPosition = pivotGrandTotalColumnPosition;
     }
@@ -7750,7 +8141,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
     });
     return computedColumns.size === 0 ? void 0 : computedColumns;
   }
-  useEffect20(() => {
+  useEffect22(() => {
     const update = () => {
       componentActions.columnsWhenInlineGroupRenderStrategy = computeColumnsWhenInlineGroupRenderStrategy(columns, groupByMap, groupRenderStrategy, toggleGroupRow);
     };
@@ -7779,7 +8170,7 @@ function useColumnsWhenGrouping() {
     }
   } = useComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  useEffect20(() => {
+  useEffect22(() => {
     const update = () => {
       const columnsWhenGrouping = getColumnsWhenGrouping({
         columns,
@@ -7915,7 +8306,7 @@ function useHideColumns(groupByMap) {
     hideEmptyGroupColumns ? groupRowsState : null,
     hideEmptyGroupColumns
   ]);
-  useEffect20(() => {
+  useEffect22(() => {
     const isGrouped = groupBy.length > 0;
     const currentState = getComponentState();
     const { controlledColumnVisibility, columnVisibility } = currentState;
@@ -8030,7 +8421,7 @@ function getColumnsWhenGrouping(params) {
 }
 
 // src/components/InfiniteTable/hooks/useComputedVisibleColumns.ts
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo11 } from "react";
 
 // src/components/flexbox/index.ts
 var computeFlex = (params) => {
@@ -8343,7 +8734,7 @@ var getComputedVisibleColumns = ({
   });
   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, _s, _t;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
     const id = visibleColumnOrder[i];
     const nextColumnId = visibleColumnOrder[i + 1];
     const colType = getColumnComputedType(c, columnTypes);
@@ -8368,16 +8759,26 @@ var getComputedVisibleColumns = ({
     const computedDataType = c.dataType || colType.dataType || (Array.isArray(c.type) ? c.type[0] : c.type) || "string";
     const computedSortType = c.sortType || colType.sortType || computedDataType;
     const computedFilterType = c.filterType || colType.filterType || computedDataType;
+    const field = (_m = c.field) != null ? _m : colType.field;
+    const valueGetter = (_n = c.valueGetter) != null ? _n : colType.valueGetter;
+    let sortableColumnOrType = (_o = c.sortable) != null ? _o : colType.sortable;
+    if (sortableColumnOrType == null) {
+      if (field == null && valueGetter == null) {
+        sortableColumnOrType = false;
+      }
+    }
+    let computedSortable = (_p = sortableColumnOrType != null ? sortableColumnOrType : sortable) != null ? _p : true;
     const result2 = __spreadProps(__spreadValues({
       align: colType.align,
       verticalAlign: colType.verticalAlign,
       defaultHiddenWhenGroupedBy: colType.defaultHiddenWhenGroupedBy,
-      valueGetter: colType.valueGetter,
+      valueGetter,
       valueFormatter: colType.valueFormatter,
       renderValue: colType.renderValue,
       render: colType.render,
       style: colType.style,
-      components: colType.components
+      components: colType.components,
+      field
     }, c), {
       computedDataType,
       computedSortType,
@@ -8391,7 +8792,7 @@ var getComputedVisibleColumns = ({
       computedAbsoluteOffset,
       computedPinningOffset,
       computedOffset,
-      computedSortable: (_o = (_n = (_m = c.sortable) != null ? _m : colType.sortable) != null ? _n : sortable) != null ? _o : true,
+      computedSortable,
       computedSortInfo,
       computedSortIndex,
       computedMultiSort: multiSort,
@@ -8400,7 +8801,7 @@ var getComputedVisibleColumns = ({
       computedSortedDesc,
       computedVisibleIndex: i,
       computedPinned,
-      computedDraggable: (_q = (_p = c.draggable) != null ? _p : draggableColumns) != null ? _q : true,
+      computedDraggable: (_r = (_q = c.draggable) != null ? _q : draggableColumns) != null ? _r : true,
       computedFirstInCategory,
       computedLastInCategory,
       computedFirst: i === 0,
@@ -8450,7 +8851,7 @@ var getComputedVisibleColumns = ({
         setSortInfo(finalSortInfo);
       },
       id,
-      header: (_t = (_s = (_r = c.header) != null ? _r : colType.header) != null ? _s : c.name) != null ? _t : c.field
+      header: (_u = (_t = (_s = c.header) != null ? _s : colType.header) != null ? _t : c.name) != null ? _u : c.field
     });
     computedOffset += computedWidth;
     computedVisibleColumnsMap.set(result2.id, result2);
@@ -8491,10 +8892,10 @@ var getComputedVisibleColumns = ({
 };
 
 // src/components/InfiniteTable/hooks/useRerenderOnKeyChange.ts
-import { useEffect as useEffect21 } from "react";
+import { useEffect as useEffect23 } from "react";
 var useRerenderOnKeyChange = (map2) => {
   const [renderId, rerender] = useRerender();
-  useEffect21(() => {
+  useEffect23(() => {
     const update = rafFn(rerender);
     return interceptMap(map2, {
       set: update,
@@ -8547,7 +8948,7 @@ var useComputedVisibleColumns = ({
     computedPinnedEndOffset,
     computedPinnedEndWidth,
     computedPinnedStartWidth
-  } = useMemo10(() => {
+  } = useMemo11(() => {
     return getComputedVisibleColumns({
       columns,
       bodySize,
@@ -8615,7 +9016,7 @@ var useComputedVisibleColumns = ({
 };
 
 // src/components/InfiniteTable/hooks/useScrollbars.ts
-import { useState as useState11, useEffect as useEffect22, useLayoutEffect as useLayoutEffect4 } from "react";
+import { useState as useState13, useEffect as useEffect24, useLayoutEffect as useLayoutEffect6 } from "react";
 var INITIAL_SCROLLBARS = {
   vertical: false,
   horizontal: false
@@ -8623,8 +9024,8 @@ var INITIAL_SCROLLBARS = {
 function useScrollbars(brain) {
   const { getComponentState: getInfiniteTableState } = useComponentState();
   const { getState: getDataSourceState } = useDataSourceContextValue();
-  const [scrollbars, setScrollbars] = useState11(INITIAL_SCROLLBARS);
-  useEffect22(() => {
+  const [scrollbars, setScrollbars] = useState13(INITIAL_SCROLLBARS);
+  useEffect24(() => {
     return brain.onRenderCountChange(() => {
       const { scrollTopMax, scrollLeftMax } = brain;
       setScrollbars({
@@ -8633,7 +9034,7 @@ function useScrollbars(brain) {
       });
     });
   }, [brain]);
-  useLayoutEffect4(() => {
+  useLayoutEffect6(() => {
     const dataSourceState = getDataSourceState();
     const { onScrollbarsChange } = getInfiniteTableState();
     const { notifyScrollbarsChange } = dataSourceState;
@@ -8664,7 +9065,7 @@ function useComputed() {
     bodySize,
     showSeparatePivotColumnForSingleAggregation
   } = componentState;
-  useState12(() => {
+  useState14(() => {
     componentState.onRowHeightCSSVarChange.onChange((rowHeight) => {
       if (rowHeight) {
         componentActions.rowHeight = rowHeight;
@@ -8676,13 +9077,13 @@ function useComputed() {
       }
     });
   });
-  useEffect23(() => {
+  useEffect25(() => {
     dataSourceActions.showSeparatePivotColumnForSingleAggregation = showSeparatePivotColumnForSingleAggregation;
   }, [showSeparatePivotColumnForSingleAggregation]);
   const { multiSort, filterValue } = dataSourceState;
   useColumnGroups();
   const { toggleGroupRow } = useColumnsWhen();
-  const setSortInfo = useCallback14((sortInfo) => {
+  const setSortInfo = useCallback15((sortInfo) => {
     var _a2;
     const newSortInfo = getDataSourceState().multiSort ? sortInfo : (_a2 = sortInfo[0]) != null ? _a2 : null;
     dataSourceActions.sortInfo = newSortInfo;
@@ -8841,7 +9242,7 @@ function useDOMProps(initialDOMProps) {
 }
 
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo12 } from "react";
 
 // src/components/InfiniteTable/hooks/useLicense/crc32.ts
 var DEFAULT_ReversedPolynomial = 3988292384;
@@ -8999,10 +9400,10 @@ var isInsideSandbox = () => {
 };
 var isInsidePlayground = isInsideSandbox() || isInsideSandpack();
 var useLicense = (licenseKey = "") => {
-  const valid = useMemo11(() => {
+  const valid = useMemo12(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.3.3"
+      version: "0.3.4"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -9012,6 +9413,140 @@ var useLicense = (licenseKey = "") => {
   return valid;
 };
 
+// src/components/utils/clamp.ts
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+// src/components/InfiniteTable/keyboardNavigationAndSelection.ts
+function handleRowNavigation(options) {
+  const { key, getState, getDataSourceState, actions } = options;
+  const arrLength = getDataSourceState().dataArray.length;
+  const state = getState();
+  const { brain } = state;
+  let { activeRowIndex } = state;
+  if (activeRowIndex == null) {
+    return false;
+  }
+  const {
+    start: [startRow],
+    end: [endRow]
+  } = brain.getRenderRange();
+  const renderRowCount = endRow - startRow - 1;
+  const min = 0;
+  const max = arrLength - 1;
+  const KeyToFunction = {
+    ArrowDown: () => {
+      activeRowIndex = clamp(activeRowIndex + 1, min, max);
+    },
+    ArrowUp: () => {
+      activeRowIndex = clamp(activeRowIndex - 1, min, max);
+    },
+    PageDown: () => {
+      activeRowIndex = Math.min(activeRowIndex + renderRowCount, arrLength - 1);
+    },
+    PageUp: () => {
+      activeRowIndex = Math.max(activeRowIndex - renderRowCount, min);
+    },
+    End: () => {
+      activeRowIndex = max;
+    },
+    Home: () => {
+      activeRowIndex = min;
+    }
+  };
+  const Fn = KeyToFunction[key];
+  if (!Fn) {
+    return false;
+  }
+  Fn();
+  actions.activeRowIndex = activeRowIndex;
+  return true;
+}
+function handleCellNavigation(options) {
+  const { key, shiftKey, getState, getComputed, getDataSourceState, actions } = options;
+  const state = getState();
+  const { activeCellIndex, brain } = state;
+  if (!activeCellIndex) {
+    return false;
+  }
+  let [rowIndex, colIndex] = activeCellIndex;
+  const {
+    start: [startRow, startCol],
+    end: [endRow, endCol]
+  } = brain.getRenderRange();
+  const renderRowCount = endRow - startRow - 1;
+  const renderColCount = endCol - startCol - 1;
+  const maxRow = getDataSourceState().dataArray.length - 1;
+  const maxCol = getComputed().computedVisibleColumns.length - 1;
+  const minRow = 0;
+  const minCol = 0;
+  rowIndex = clamp(rowIndex, 0, maxRow);
+  colIndex = clamp(colIndex, 0, maxCol);
+  actions.activeCellIndex = [rowIndex, colIndex];
+  const KeyToFunction = {
+    ArrowDown: () => {
+      rowIndex = clamp(rowIndex + 1, minRow, maxRow);
+    },
+    ArrowUp: () => {
+      rowIndex = clamp(rowIndex - 1, minRow, maxRow);
+    },
+    ArrowLeft: () => {
+      colIndex = clamp(colIndex - 1, minCol, maxCol);
+    },
+    ArrowRight: () => {
+      colIndex = clamp(colIndex + 1, minCol, maxCol);
+    },
+    PageDown: () => {
+      if (!shiftKey) {
+        rowIndex = Math.min(rowIndex + renderRowCount, maxRow);
+      } else {
+        colIndex = Math.min(colIndex + renderColCount, maxCol);
+      }
+    },
+    PageUp: () => {
+      if (!shiftKey) {
+        rowIndex = Math.max(rowIndex - renderRowCount, minRow);
+      } else {
+        colIndex = Math.max(colIndex - renderColCount, minCol);
+      }
+    },
+    End: () => {
+      if (!shiftKey) {
+        rowIndex = maxRow;
+      } else {
+        colIndex = maxCol;
+      }
+    },
+    Home: () => {
+      if (!shiftKey) {
+        rowIndex = minRow;
+      } else {
+        colIndex = minCol;
+      }
+    }
+  };
+  const Fn = KeyToFunction[key];
+  if (!Fn) {
+    return false;
+  }
+  Fn();
+  actions.activeCellIndex = [rowIndex, colIndex];
+  return true;
+}
+function handleKeyboardNavigation(options) {
+  const { getState } = options;
+  const state = getState();
+  const { activeRowIndex, activeCellIndex } = state;
+  if (activeRowIndex != null) {
+    return handleRowNavigation(options);
+  }
+  if (activeCellIndex != null) {
+    return handleCellNavigation(options);
+  }
+  return false;
+}
+
 // src/components/InfiniteTable/state/getInitialState.ts
 import { createRef } from "react";
 
@@ -9069,6 +9604,18 @@ function toMap(mapOrObject, weakMapCache) {
 }
 
 // src/components/InfiniteTable/state/getInitialState.ts
+function createRenderer2(brain) {
+  const renderer = new ReactHeadlessTableRenderer(brain);
+  const onRenderUpdater = buildSubscriptionCallback();
+  brain.onDestroy(() => {
+    renderer.destroy();
+    onRenderUpdater.destroy();
+  });
+  return {
+    renderer,
+    onRenderUpdater
+  };
+}
 function initSetupState2() {
   const columnsGeneratedForGrouping = new Map();
   const brain = new MatrixBrain();
@@ -9082,10 +9629,16 @@ function initSetupState2() {
   if (true) {
     globalThis.brain = brain;
   }
+  const { renderer, onRenderUpdater } = createRenderer2(brain);
   brain.onAvailableSizeChange((size) => {
     headerBrain.setAvailableSize({ width: size.width });
   });
+  if (true) {
+    globalThis.renderer = renderer;
+  }
   return {
+    renderer,
+    onRenderUpdater,
     propsCache: new Map([]),
     brain,
     headerBrain,
@@ -9146,7 +9699,6 @@ var forwardProps3 = (setupState) => {
     scrollStopDelay: (scrollStopDelay) => scrollStopDelay != null ? scrollStopDelay : 250,
     filterEditors: (filterEditors) => __spreadValues(__spreadValues({}, defaultFilterEditors), filterEditors),
     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,
@@ -9161,6 +9713,8 @@ var forwardProps3 = (setupState) => {
     pivotTotalColumnPosition: (pivotTotalColumnPosition) => pivotTotalColumnPosition != null ? pivotTotalColumnPosition : "end",
     pivotGrandTotalColumnPosition: 1,
     licenseKey: (licenseKey) => licenseKey || "",
+    activeRowIndex: (activeRowIndex) => activeRowIndex != null ? activeRowIndex : null,
+    activeCellIndex: (activeCellIndex) => activeCellIndex != null ? activeCellIndex : null,
     columnOrder: (columnOrder) => columnOrder != null ? columnOrder : true,
     header: (header) => header != null ? header : true,
     showZebraRows: (showZebraRows) => showZebraRows != null ? showZebraRows : true,
@@ -9208,6 +9762,7 @@ var mapPropsToState2 = (params) => {
     groupRenderStrategy,
     groupBy,
     computedColumns,
+    enableKeyboardNavigation: state.activeRowIndex != null,
     columnHeaderCssEllipsis: (_b = (_a = props.columnHeaderCssEllipsis) != null ? _a : props.columnCssEllipsis) != null ? _b : true,
     columnGroupsDepthsMap,
     columnGroupsMaxDepth: columnGroupsDepthsMap != state.columnGroupsDepthsMap ? Math.max(...columnGroupsDepthsMap.values(), 0) : state.columnGroupsMaxDepth,
@@ -9231,14 +9786,23 @@ var InfiniteTableRoot = getComponentStateRoot({
   getParentState: () => useDataSource(),
   debugName: "InfiniteTable"
 });
-var InfiniteTableComponent = memo9(function InfiniteTableComponent2() {
+var InfiniteTableComponent = memo11(function InfiniteTableComponent2() {
   var _a;
-  const { componentState, getComputed, computed } = useInfiniteTable();
+  const {
+    componentState,
+    getComputed,
+    computed,
+    componentActions: actions,
+    getState
+  } = useInfiniteTable();
   const {
     componentState: { loading },
     getState: getDataSourceState,
     componentActions: dataSourceActions
   } = useDataSourceContextValue();
+  const [imperativeApi] = useState15(() => {
+    return getImperativeApi(getState, getComputed, getDataSourceState, actions);
+  });
   const {
     domRef,
     scrollerDOMRef,
@@ -9253,18 +9817,37 @@ var InfiniteTableComponent = memo9(function InfiniteTableComponent2() {
     components,
     scrollStopDelay,
     brain,
-    headerBrain
+    headerBrain,
+    renderer,
+    activeRowIndex,
+    activeCellIndex,
+    onRenderUpdater
   } = componentState;
+  useEffect27(() => {
+    if (activeRowIndex != null) {
+      imperativeApi.scrollRowIntoView(activeRowIndex, {
+        offset: 30
+      });
+    }
+  }, [activeRowIndex]);
+  useEffect27(() => {
+    if (activeCellIndex != null) {
+      imperativeApi.scrollCellIntoView(activeCellIndex[0], activeCellIndex[1], {
+        offset: 30
+      });
+    }
+  }, [activeCellIndex]);
   const { columnShifts, bodySize } = componentState;
   const { scrollbars } = computed;
   const { renderCell } = useCellRendering({
+    imperativeApi,
     getComputed,
     domRef: componentState.domRef,
     columnShifts,
     bodySize,
     computed
   });
-  useEffect24(() => {
+  useEffect26(() => {
     const dataSourceState = getDataSourceState();
     const onChange = debounce((renderRange) => {
       dataSourceState.notifyRenderRangeChange({
@@ -9277,35 +9860,52 @@ var InfiniteTableComponent = memo9(function InfiniteTableComponent2() {
   const licenseValid = useLicense(licenseKey);
   const domProps = useDOMProps(componentState.domProps);
   const LoadMaskCmp = (_a = components == null ? void 0 : components.LoadMask) != null ? _a : LoadMask;
-  useEffect24(() => {
+  useEffect26(() => {
     brain.setScrollStopDelay(scrollStopDelay);
     dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
   }, [scrollStopDelay]);
   useAutoSizeColumns();
-  return /* @__PURE__ */ createElement24("div", __spreadValues({
+  const onKeyDown = useCallback16((event) => {
+    if (handleKeyboardNavigation({
+      getState,
+      actions,
+      getDataSourceState,
+      getComputed,
+      key: event.key,
+      shiftKey: !!event.shiftKey
+    })) {
+      event.preventDefault();
+    }
+  }, []);
+  return /* @__PURE__ */ createElement26("div", __spreadValues({
+    onKeyDown,
     ref: domRef
-  }, domProps), header ? /* @__PURE__ */ createElement24(TableHeaderWrapper, {
+  }, domProps), header ? /* @__PURE__ */ createElement26(TableHeaderWrapper, {
     brain: headerBrain,
     scrollbars
-  }) : null, /* @__PURE__ */ createElement24(InfiniteTableBody, null, /* @__PURE__ */ createElement24(HeadlessTable, {
+  }) : null, /* @__PURE__ */ createElement26(InfiniteTableBody, null, /* @__PURE__ */ createElement26(HeadlessTable, {
     tabIndex: 0,
+    activeRowIndex: componentState.ready ? activeRowIndex : null,
+    activeCellIndex: componentState.ready ? activeCellIndex : null,
     scrollStopDelay,
+    renderer,
+    onRenderUpdater,
     brain,
     renderCell,
     cellHoverClassNames: HOVERED_CLASS_NAMES,
     scrollerDOMRef
-  }), /* @__PURE__ */ createElement24(LoadMaskCmp, {
+  }), /* @__PURE__ */ createElement26(LoadMaskCmp, {
     visible: loading
-  }, loadingText)), /* @__PURE__ */ createElement24("div", {
+  }, loadingText)), /* @__PURE__ */ createElement26("div", {
     ref: portalDOMRef,
     className: join(`${rootClassName2}Portal`, zIndex[1e3], position.absolute, top[0], left[0])
-  }), rowHeightCSSVar ? /* @__PURE__ */ createElement24(CSSVariableWatch, {
+  }), rowHeightCSSVar ? /* @__PURE__ */ createElement26(CSSVariableWatch, {
     varName: rowHeightCSSVar,
     onChange: onRowHeightCSSVarChange
-  }) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ createElement24(CSSVariableWatch, {
+  }) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ createElement26(CSSVariableWatch, {
     varName: columnHeaderHeightCSSVar,
     onChange: onColumnHeaderHeightCSSVarChange
-  }) : null, /* @__PURE__ */ createElement24(InfiniteTableFooter, null), licenseValid ? null : /* @__PURE__ */ createElement24(InfiniteTableLicenseFooter, null));
+  }) : null, /* @__PURE__ */ createElement26(InfiniteTableFooter, null), licenseValid ? null : /* @__PURE__ */ createElement26(InfiniteTableLicenseFooter, null));
 });
 function InfiniteTableContextProvider() {
   const { componentActions, componentState } = useComponentState();
@@ -9333,25 +9933,25 @@ function InfiniteTableContextProvider() {
     bodySize.width = (_b = (_a = scrollerDOMRef.current) == null ? void 0 : _a.scrollWidth) != null ? _b : bodySize.width;
     componentActions.bodySize = bodySize;
   }, { earlyAttach: true });
-  useEffect24(() => {
+  useEffect26(() => {
     return () => {
       componentState.onRowHeightCSSVarChange.destroy();
       componentState.onColumnHeaderHeightCSSVarChange.destroy();
     };
   }, []);
-  useEffect24(() => {
+  useEffect26(() => {
     if (scrollerDOMRef.current) {
       scrollerDOMRef.current.scrollTop = 0;
     }
   }, [scrollTopKey, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
-  return /* @__PURE__ */ createElement24(TableContext2.Provider, {
+  return /* @__PURE__ */ createElement26(TableContext2.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ createElement24(InfiniteTableComponent, null));
+  }, /* @__PURE__ */ createElement26(InfiniteTableComponent, null));
 }
 function InfiniteTable(props) {
-  const table = /* @__PURE__ */ createElement24(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ createElement24(InfiniteTableContextProvider, null));
-  return /* @__PURE__ */ createElement24(StrictMode, null, table);
+  const table = /* @__PURE__ */ createElement26(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ createElement26(InfiniteTableContextProvider, null));
+  return /* @__PURE__ */ createElement26(StrictMode, null, table);
 }
 InfiniteTable.defaultProps = {
   rowHeight: 40,