@infinite-table/infinite-react 0.3.3 → 0.3.6

package/index.js

@@ -665,7 +665,8 @@ function debounce(fn, { wait }) {
 }
 
 // src/components/InfiniteTable/index.tsx
-var React30 = __toModule(require("react"));
+var React32 = __toModule(require("react"));
+var import_react45 = __toModule(require("react"));
 
 // src/utils/join.ts
 var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
@@ -874,8 +875,8 @@ function useDataSourceContextValue() {
 }
 
 // src/components/HeadlessTable/index.tsx
-var React10 = __toModule(require("react"));
-var import_react8 = __toModule(require("react"));
+var React12 = __toModule(require("react"));
+var import_react11 = __toModule(require("react"));
 
 // src/components/VirtualList/SpacePlaceholder.tsx
 var React5 = __toModule(require("react"));
@@ -2512,6 +2513,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;
@@ -3088,8 +3254,11 @@ function createRenderer(brain) {
 function RawTableFn(props) {
   const { brain, renderCell } = props;
   const { renderer, onRenderUpdater } = (0, import_react7.useMemo)(() => {
-    return createRenderer(brain);
-  }, [brain]);
+    return props.onRenderUpdater && props.renderer ? {
+      renderer: props.renderer,
+      onRenderUpdater: props.onRenderUpdater
+    } : createRenderer(brain);
+  }, [brain, props.onRenderUpdater, props.renderer]);
   (0, import_react7.useEffect)(() => {
     renderer.cellHoverClassNames = props.cellHoverClassNames || [];
   }, [renderer, props.cellHoverClassNames]);
@@ -3123,6 +3292,144 @@ function RawTableFn(props) {
 }
 var RawTable = React9.memo(RawTableFn);
 
+// src/components/InfiniteTable/components/ActiveRowIndicator.tsx
+var React10 = __toModule(require("react"));
+var import_react9 = __toModule(require("react"));
+
+// src/components/hooks/useRerender.ts
+var import_react8 = __toModule(require("react"));
+var useRerender = () => {
+  const [state, setState] = (0, import_react8.useState)(0);
+  return [
+    state,
+    (0, import_react8.useCallback)(() => {
+      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] = (0, import_react9.useState)({
+    top: 0,
+    rowHeight: 0
+  });
+  const domRef = (0, import_react9.useRef)(null);
+  const stateRef = (0, import_react9.useRef)(state);
+  const active = props.activeRowIndex != null && brain.getRowCount() > props.activeRowIndex;
+  const [rerenderId, rerender] = useRerender();
+  (0, import_react9.useLayoutEffect)(() => {
+    if (props.activeRowIndex == null) {
+      return;
+    }
+    setState(stateRef.current = {
+      top: brain.getItemOffsetFor(props.activeRowIndex, "vertical"),
+      rowHeight: brain.getRowHeight(props.activeRowIndex)
+    });
+  }, [props.activeRowIndex, rerenderId]);
+  (0, import_react9.useEffect)(() => {
+    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__ */ React10.createElement("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 = React10.memo(ActiveRowIndicatorFn);
+
+// src/components/InfiniteTable/components/ActiveCellIndicator.tsx
+var React11 = __toModule(require("react"));
+var import_react10 = __toModule(require("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] = (0, import_react10.useState)({
+    top: 0,
+    rowHeight: 0,
+    colWidth: 0,
+    left: 0
+  });
+  const domRef = (0, import_react10.useRef)(null);
+  const stateRef = (0, import_react10.useRef)(state);
+  const active = props.activeCellIndex != null && brain.getRowCount() > props.activeCellIndex[0];
+  (0, import_react10.useLayoutEffect)(() => {
+    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]);
+  (0, import_react10.useEffect)(() => {
+    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__ */ React11.createElement("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 = React11.memo(ActiveCellIndicatorFn);
+
 // src/components/HeadlessTable/index.tsx
 function useMatrixBrain(brain, brainOptions, fixedCellsInfo) {
   if (fixedCellsInfo && (fixedCellsInfo.fixedColsStart || fixedCellsInfo.fixedColsEnd || fixedCellsInfo.fixedRowsStart || fixedCellsInfo.fixedRowsEnd)) {
@@ -3150,25 +3457,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 = (0, import_react8.useRef)(null);
-  const [scrollSize, setTotalScrollSize] = (0, import_react8.useState)({
+  const domRef = (0, import_react11.useRef)(null);
+  const [scrollSize, setTotalScrollSize] = (0, import_react11.useState)({
     width: 0,
     height: 0
   });
-  (0, import_react8.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (scrollStopDelay != null) {
       brain.setScrollStopDelay(scrollStopDelay);
     }
   }, [scrollStopDelay, brain]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     var _a2;
     const node = (_a2 = domRef.current) == null ? void 0 : _a2.parentNode;
     if (!node) {
@@ -3184,39 +3499,47 @@ function HeadlessTable(props) {
     const remove = setupResizeObserver(node, onResize);
     return remove;
   }, []);
-  const onContainerScroll = (0, import_react8.useCallback)((scrollPos) => {
+  const onContainerScroll = (0, import_react11.useCallback)((scrollPos) => {
     brain.setScrollPosition(scrollPos, (scrollPos2) => {
       domRef.current.style.transform = `translate3d(${-scrollPos2.scrollLeft}px, ${-scrollPos2.scrollTop}px, 0px)`;
     });
   }, [brain]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const removeOnRenderCount = brain.onRenderCountChange(() => {
       setTotalScrollSize(brain.getTotalSize());
     });
     setTotalScrollSize(brain.getTotalSize());
     return removeOnRenderCount;
   }, [brain]);
-  return /* @__PURE__ */ React10.createElement(VirtualScrollContainer, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React12.createElement(VirtualScrollContainer, __spreadProps(__spreadValues({
     onContainerScroll
   }, domProps), {
     ref: scrollerDOMRef
-  }), /* @__PURE__ */ React10.createElement("div", {
+  }), /* @__PURE__ */ React12.createElement("div", {
     ref: domRef,
     className: scrollTransformTargetCls,
     "data-name": "scroll-transform-target"
-  }, /* @__PURE__ */ React10.createElement(RawTable, {
+  }, /* @__PURE__ */ React12.createElement(RawTable, {
+    renderer,
+    onRenderUpdater,
     renderCell,
     brain,
     cellHoverClassNames
-  })), /* @__PURE__ */ React10.createElement(SpacePlaceholder, {
+  })), /* @__PURE__ */ React12.createElement(ActiveRowIndicator, {
+    brain,
+    activeRowIndex
+  }), /* @__PURE__ */ React12.createElement(ActiveCellIndicator, {
+    brain,
+    activeCellIndex
+  }), /* @__PURE__ */ React12.createElement(SpacePlaceholder, {
     width: scrollSize.width,
     height: scrollSize.height
   }));
 }
 
 // src/components/hooks/useComponentState/index.tsx
-var React11 = __toModule(require("react"));
-var import_react11 = __toModule(require("react"));
+var React13 = __toModule(require("react"));
+var import_react14 = __toModule(require("react"));
 
 // src/utils/proxyFnCall.ts
 function proxyFn(fn, config) {
@@ -3259,18 +3582,18 @@ function isControlled(propName, props) {
 }
 
 // src/components/hooks/useLatest.tsx
-var import_react9 = __toModule(require("react"));
+var import_react12 = __toModule(require("react"));
 function useLatest(value) {
-  const ref = (0, import_react9.useRef)(value);
+  const ref = (0, import_react12.useRef)(value);
   ref.current = value;
-  return (0, import_react9.useCallback)(() => ref.current, []);
+  return (0, import_react12.useCallback)(() => ref.current, []);
 }
 
 // src/components/hooks/usePrevious.ts
-var import_react10 = __toModule(require("react"));
+var import_react13 = __toModule(require("react"));
 var usePrevious = (value, initialValue) => {
-  const ref = (0, import_react10.useRef)(initialValue === void 0 ? value : initialValue);
-  (0, import_react10.useLayoutEffect)(() => {
+  const ref = (0, import_react13.useRef)(initialValue === void 0 ? value : initialValue);
+  (0, import_react13.useLayoutEffect)(() => {
     ref.current = value;
   });
   return ref.current;
@@ -3291,7 +3614,7 @@ function getComponentStateContext() {
   if (ComponentContext) {
     return ComponentContext;
   }
-  return ComponentContext = (0, import_react11.createContext)(null);
+  return ComponentContext = (0, import_react14.createContext)(null);
 }
 function getReducerGeneratedActions(dispatch, getState, getProps, propsToForward, allowedControlledPropOverrides, interceptedActions) {
   const state = getState();
@@ -3350,16 +3673,16 @@ function forwardProps(propsToForward, props) {
   return mappedState;
 }
 function getComponentStateRoot(config) {
-  return React11.memo(function ComponentStateRoot(props) {
+  return React13.memo(function ComponentStateRoot(props) {
     var _a, _b;
-    const [initialSetupState] = (0, import_react11.useState)(() => {
+    const [initialSetupState] = (0, import_react14.useState)(() => {
       return config.initSetupState ? config.initSetupState() : {};
     });
-    const propsToStateSetRef = (0, import_react11.useRef)(new Set());
-    const propsToForward = (0, import_react11.useMemo)(() => config.forwardProps ? config.forwardProps(initialSetupState) : {}, [initialSetupState]);
+    const propsToStateSetRef = (0, import_react14.useRef)(new Set());
+    const propsToForward = (0, import_react14.useMemo)(() => 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] = (0, import_react11.useState)(() => {
+    const [wholeState] = (0, import_react14.useState)(() => {
       let mappedState = {};
       if (propsToForward) {
         mappedState = forwardProps(propsToForward, props);
@@ -3426,10 +3749,10 @@ function getComponentStateRoot(config) {
       }) : newState;
       return result;
     };
-    const [state, dispatch] = (0, import_react11.useReducer)(theReducer, wholeState);
+    const [state, dispatch] = (0, import_react14.useReducer)(theReducer, wholeState);
     const getComponentState = useLatest(state);
     const { allowedControlledPropOverrides } = config;
-    const actions = (0, import_react11.useMemo)(() => {
+    const actions = (0, import_react14.useMemo)(() => {
       const generatedActions = getReducerGeneratedActions(dispatch, getComponentState, getProps, propsToForward, allowedControlledPropOverrides, config.interceptActions);
       return generatedActions;
     }, [
@@ -3438,13 +3761,13 @@ function getComponentStateRoot(config) {
       allowedControlledPropOverrides
     ]);
     const Context = getComponentStateContext();
-    const contextValue = (0, import_react11.useMemo)(() => ({
+    const contextValue = (0, import_react14.useMemo)(() => ({
       componentState: state,
       componentActions: actions,
       getComponentState
     }), [state, actions, getComponentState]);
     const prevProps = usePrevious(props);
-    (0, import_react11.useEffect)(() => {
+    (0, import_react14.useEffect)(() => {
       const currentProps = props;
       const newMappedState = {};
       let newMappedStateCount = 0;
@@ -3500,24 +3823,18 @@ function getComponentStateRoot(config) {
         }
       }
     });
-    return /* @__PURE__ */ React11.createElement(Context.Provider, {
+    return /* @__PURE__ */ React13.createElement(Context.Provider, {
       value: contextValue
     }, props.children);
   });
 }
 function useComponentState() {
   const Context = getComponentStateContext();
-  return React11.useContext(Context);
+  return React13.useContext(Context);
 }
 
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
-var React12 = __toModule(require("react"));
-
-// src/components/InfiniteTable/internalProps.ts
-var rootClassName2 = "Infinite";
-var internalProps = {
-  rootClassName: rootClassName2
-};
+var React14 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useInternalProps.ts
 var useInternalProps = () => {
@@ -3525,45 +3842,45 @@ var useInternalProps = () => {
 };
 
 // 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 = React12.forwardRef(function InfiniteTableBody2(props, ref) {
-  const { rootClassName: rootClassName9 } = useInternalProps();
-  return /* @__PURE__ */ React12.createElement("div", __spreadProps(__spreadValues({
+var InfiniteTableBody = React14.forwardRef(function InfiniteTableBody2(props, ref) {
+  const { rootClassName: rootClassName11 } = useInternalProps();
+  return /* @__PURE__ */ React14.createElement("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
-var React13 = __toModule(require("react"));
-var InfiniteTableFooter = React13.forwardRef(function InfiniteTableFooter2(props, ref) {
-  const { rootClassName: rootClassName9 } = useInternalProps();
-  return /* @__PURE__ */ React13.createElement("div", __spreadProps(__spreadValues({
+var React15 = __toModule(require("react"));
+var InfiniteTableFooter = React15.forwardRef(function InfiniteTableFooter2(props, ref) {
+  const { rootClassName: rootClassName11 } = useInternalProps();
+  return /* @__PURE__ */ React15.createElement("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)
   }));
 });
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
-var React18 = __toModule(require("react"));
-var import_react19 = __toModule(require("react"));
+var React20 = __toModule(require("react"));
+var import_react22 = __toModule(require("react"));
 var import_react_dom = __toModule(require("react-dom"));
 
 // src/components/DataSource/defaultFilterTypes.ts
@@ -3636,6 +3953,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
   };
@@ -3666,25 +3984,25 @@ function useCellClassName(column, baseClasses, variants, extraFlags) {
 
 // src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
 var import_binary_search2 = __toModule(require_binary_search());
-var import_react14 = __toModule(require("react"));
+var import_react17 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useInfiniteTable.ts
-var import_react13 = __toModule(require("react"));
+var import_react16 = __toModule(require("react"));
 
 // src/components/InfiniteTable/InfiniteTableContext.ts
-var import_react12 = __toModule(require("react"));
+var import_react15 = __toModule(require("react"));
 var TableContext;
 function getInfiniteTableContext() {
   if (TableContext) {
     return TableContext;
   }
-  return TableContext = (0, import_react12.createContext)(null);
+  return TableContext = (0, import_react15.createContext)(null);
 }
 
 // src/components/InfiniteTable/hooks/useInfiniteTable.ts
 var useInfiniteTable = () => {
   const TableContext2 = getInfiniteTableContext();
-  return (0, import_react13.useContext)(TableContext2);
+  return (0, import_react16.useContext)(TableContext2);
 };
 
 // src/components/InfiniteTable/utils/moveXatY.ts
@@ -3719,18 +4037,18 @@ var useColumnPointerEvents = ({
   columns,
   computedRemainingSpace
 }) => {
-  const [draggingDiff, setDraggingDiff] = (0, import_react14.useState)(null);
-  const [proxyOffset, setProxyOffset] = (0, import_react14.useState)(null);
-  const breakpointsRef = (0, import_react14.useRef)([]);
-  const pointerMoveRef = (0, import_react14.useRef)(null);
-  const didDragRef = (0, import_react14.useRef)(false);
-  const initialClientPos = (0, import_react14.useRef)(null);
-  const currentDropIndexRef = (0, import_react14.useRef)(null);
+  const [draggingDiff, setDraggingDiff] = (0, import_react17.useState)(null);
+  const [proxyOffset, setProxyOffset] = (0, import_react17.useState)(null);
+  const breakpointsRef = (0, import_react17.useRef)([]);
+  const pointerMoveRef = (0, import_react17.useRef)(null);
+  const didDragRef = (0, import_react17.useRef)(false);
+  const initialClientPos = (0, import_react17.useRef)(null);
+  const currentDropIndexRef = (0, import_react17.useRef)(null);
   const dragging = draggingDiff != null;
   const { componentActions, computed } = useInfiniteTable();
   const { computedColumnOrder } = computed;
-  const column = (0, import_react14.useMemo)(() => columns.get(columnId), [columnId, columns]);
-  const { columnIndex, columnWidth, columnsArray } = (0, import_react14.useMemo)(() => {
+  const column = (0, import_react17.useMemo)(() => columns.get(columnId), [columnId, columns]);
+  const { columnIndex, columnWidth, columnsArray } = (0, import_react17.useMemo)(() => {
     const columnsArray2 = Array.from(columns.values());
     return {
       columnsArray: columnsArray2,
@@ -3738,8 +4056,8 @@ var useColumnPointerEvents = ({
       columnWidth: column.computedWidth
     };
   }, [columns, columnId, column]);
-  let cursorRef = (0, import_react14.useRef)("auto");
-  const onPointerDown = (0, import_react14.useCallback)((e) => {
+  let cursorRef = (0, import_react17.useRef)("auto");
+  const onPointerDown = (0, import_react17.useCallback)((e) => {
     const target = domRef.current;
     cursorRef.current = target.style.cursor;
     didDragRef.current = false;
@@ -3802,7 +4120,7 @@ var useColumnPointerEvents = ({
     target.addEventListener("pointermove", onPointerMove);
     target.setPointerCapture(e.pointerId);
   }, [columns, column, columnIndex, columnsArray, computedRemainingSpace]);
-  const onPointerUp = (0, import_react14.useCallback)((e) => {
+  const onPointerUp = (0, import_react17.useCallback)((e) => {
     const target = domRef.current;
     target.style.cursor = cursorRef.current;
     target.releasePointerCapture(e.pointerId);
@@ -3842,7 +4160,7 @@ function RenderHookComponent(props) {
 }
 
 // src/components/InfiniteTable/components/FilterEditors.tsx
-var import_react15 = __toModule(require("react"));
+var import_react18 = __toModule(require("react"));
 function getFilterEditors() {
   return {
     string: StringFilterEditor,
@@ -3851,7 +4169,7 @@ function getFilterEditors() {
 }
 var defaultFilterEditors = getFilterEditors();
 function StringFilterEditor(props) {
-  return /* @__PURE__ */ import_react15.default.createElement("input", {
+  return /* @__PURE__ */ import_react18.default.createElement("input", {
     "aria-label": `Filter for ${props.ariaLabel}`,
     type: "text",
     value: props.filterValue,
@@ -3862,7 +4180,7 @@ function StringFilterEditor(props) {
   });
 }
 function NumberFilterEditor(props) {
-  return /* @__PURE__ */ import_react15.default.createElement("input", {
+  return /* @__PURE__ */ import_react18.default.createElement("input", {
     "aria-label": `Filter for ${props.ariaLabel}`,
     type: "number",
     value: props.filterValue,
@@ -3878,24 +4196,24 @@ function NumberFilterEditor(props) {
 }
 
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
-var React15 = __toModule(require("react"));
-var import_react16 = __toModule(require("react"));
+var React17 = __toModule(require("react"));
+var import_react19 = __toModule(require("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 = {
@@ -3906,8 +4224,8 @@ var defaultLineStyle = {
 var InfiniteTableIconClassName = "InfiniteTableIcon";
 function SortIcon(props) {
   var _a;
-  const [rendered, setRendered] = (0, import_react16.useState)(true);
-  const [opacity, setOpacity] = (0, import_react16.useState)(0);
+  const [rendered, setRendered] = (0, import_react19.useState)(true);
+  const [opacity, setOpacity] = (0, import_react19.useState)(0);
   const { direction, lineWidth = 1, style, className, index } = props;
   const showIndex = index != null && index > 0;
   const size = (_a = props.size) != null ? _a : 16;
@@ -3921,16 +4239,21 @@ function SortIcon(props) {
   }), props.lineStyle), {
     opacity
   });
-  (0, import_react16.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     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;
@@ -3946,44 +4269,44 @@ function SortIcon(props) {
   if (direction === -1) {
     indexStyle.top = "100%";
   }
-  return /* @__PURE__ */ React15.createElement("div", {
+  return /* @__PURE__ */ React17.createElement("div", {
     style: __spreadProps(__spreadValues({}, style), { width: size }),
     className: join(className, InfiniteTableIconClassName, `${InfiniteTableIconClassName}-sort`)
-  }, showIndex ? /* @__PURE__ */ React15.createElement("div", {
+  }, showIndex ? /* @__PURE__ */ React17.createElement("div", {
     "data-name": "index",
     style: indexStyle,
     className: HeaderSortIconIndexCls
-  }, index) : null, /* @__PURE__ */ React15.createElement("div", {
+  }, index) : null, /* @__PURE__ */ React17.createElement("div", {
     style: __spreadValues({ width: sizes[0] }, lineStyle),
     onTransitionEnd
-  }), /* @__PURE__ */ React15.createElement("div", {
+  }), /* @__PURE__ */ React17.createElement("div", {
     style: __spreadValues({ width: sizes[1] }, lineStyle)
-  }), /* @__PURE__ */ React15.createElement("div", {
+  }), /* @__PURE__ */ React17.createElement("div", {
     style: __spreadValues({ width: sizes[2] }, lineStyle)
   }));
 }
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
-var React16 = __toModule(require("react"));
+var React18 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useInfiniteTableState.ts
-var import_react17 = __toModule(require("react"));
+var import_react20 = __toModule(require("react"));
 var useInfiniteTableState = () => {
   const TableContext2 = getInfiniteTableContext();
-  const { componentState } = (0, import_react17.useContext)(TableContext2);
+  const { componentState } = (0, import_react20.useContext)(TableContext2);
   return componentState;
 };
 
 // src/components/InfiniteTable/components/cell.css.ts
 var import_createRuntimeFn2 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var CellClsVariants = { shifting: "_1eexc2a3", dragging: "_1eexc2a4" };
-var ColumnCellCls = "_1eexc2a5 _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, {
@@ -4037,35 +4360,35 @@ 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__ */ React16.createElement(React16.Fragment, null, beforeChildren, /* @__PURE__ */ React16.createElement("div", {
+    children: /* @__PURE__ */ React18.createElement(React18.Fragment, null, beforeChildren, /* @__PURE__ */ React18.createElement("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__ */ React16.createElement(RenderComponent, __spreadValues({}, finalDOMProps));
+    return /* @__PURE__ */ React18.createElement(RenderComponent, __spreadValues({}, finalDOMProps));
   }
-  return /* @__PURE__ */ React16.createElement("div", __spreadProps(__spreadValues({}, finalDOMProps), {
+  return /* @__PURE__ */ React18.createElement("div", __spreadProps(__spreadValues({}, finalDOMProps), {
     ref: domRef
   }));
 }
-var InfiniteTableCell = React16.memo(InfiniteTableCellFn);
+var InfiniteTableCell = React18.memo(InfiniteTableCellFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
-var React17 = __toModule(require("react"));
-var import_react18 = __toModule(require("react"));
-var { rootClassName: rootClassName4 } = internalProps;
-var InfiniteTableColumnHeaderFilterClassName = `${rootClassName4}HeaderCell__filter`;
+var React19 = __toModule(require("react"));
+var import_react21 = __toModule(require("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] = (0, import_react18.useState)((_b = (_a = props.columnFilterValue) == null ? void 0 : _a.filterValue) != null ? _b : "");
+  const [theValue, setTheValue] = (0, import_react21.useState)((_b = (_a = props.columnFilterValue) == null ? void 0 : _a.filterValue) != null ? _b : "");
   const onInputChange = (filterValue) => {
     setTheValue(filterValue);
     props.onChange(filterValue);
   };
-  (0, import_react18.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     var _a2;
     if (props.columnFilterValue) {
       if (theValue !== props.columnFilterValue.filterValue) {
@@ -4092,15 +4415,15 @@ function InfiniteTableColumnHeaderFilter(props) {
     onChange: onInputChange
   };
   const FilterEditor = props.filterEditor;
-  return /* @__PURE__ */ React17.createElement("div", {
+  return /* @__PURE__ */ React19.createElement("div", {
     onPointerUp: stopPropagation,
     onPointerDown: stopPropagation,
     className: `${InfiniteTableColumnHeaderFilterClassName} ${HeaderFilterCls}`,
     style: { height: props.columnHeaderHeight }
-  }, FilterEditor ? /* @__PURE__ */ React17.createElement(FilterEditor, __spreadValues({}, filterEditorProps)) : null);
+  }, FilterEditor ? /* @__PURE__ */ React19.createElement(FilterEditor, __spreadValues({}, filterEditorProps)) : null);
 }
 function InfiniteTableColumnHeaderFilterEmpty() {
-  return /* @__PURE__ */ React17.createElement("div", {
+  return /* @__PURE__ */ React19.createElement("div", {
     onPointerUp: stopPropagation,
     onPointerDown: stopPropagation,
     className: `${InfiniteTableColumnHeaderFilterClassName} ${HeaderFilterCls}`,
@@ -4109,9 +4432,9 @@ function InfiniteTableColumnHeaderFilterEmpty() {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
-var InfiniteTableHeaderCellContext = React18.createContext(null);
-var { rootClassName: rootClassName5 } = internalProps;
-var InfiniteTableHeaderCellClassName = `${rootClassName5}HeaderCell`;
+var InfiniteTableHeaderCellContext = React20.createContext(null);
+var { rootClassName: rootClassName7 } = internalProps;
+var InfiniteTableHeaderCellClassName = `${rootClassName7}HeaderCell`;
 function InfiniteTableHeaderCell(props) {
   var _a, _b, _c, _d, _e;
   const column = props.column;
@@ -4119,13 +4442,13 @@ function InfiniteTableHeaderCell(props) {
   const { onResize, height, width, headerOptions } = props;
   const sortInfo = column.computedSortInfo;
   let header = column.header;
-  const ref = (0, import_react19.useCallback)((node) => {
+  const ref = (0, import_react22.useCallback)((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__ */ React18.createElement(SortIcon, {
+  const sortTool = column.computedSorted || alwaysShow ? /* @__PURE__ */ React20.createElement(SortIcon, {
     index: column.computedMultiSort ? column.computedSortIndex + 1 : void 0,
     className: `${InfiniteTableHeaderCellClassName}__sort-icon ${HeaderSortIconCls} ${HeaderSortIconRecipe({
       align: column.align || "start"
@@ -4142,15 +4465,15 @@ function InfiniteTableHeaderCell(props) {
   const align = column.align || "start";
   const renderChildren = () => {
     if (header instanceof Function) {
-      header = /* @__PURE__ */ React18.createElement(RenderHookComponent, {
+      header = /* @__PURE__ */ React20.createElement(RenderHookComponent, {
         render: header,
         renderParam
       });
     }
     header = header != null ? header : column.name;
-    return /* @__PURE__ */ React18.createElement(React18.Fragment, null, align === "end" ? sortTool : null, header, align !== "end" ? sortTool : null);
+    return /* @__PURE__ */ React20.createElement(React20.Fragment, null, align === "end" ? sortTool : null, header, align !== "end" ? sortTool : null);
   };
-  const domRef = (0, import_react19.useRef)(null);
+  const domRef = (0, import_react22.useRef)(null);
   const {
     computed: { computedRemainingSpace, showColumnFilters },
     componentState: { portalDOMRef, columnHeaderHeight, filterEditors }
@@ -4160,7 +4483,7 @@ function InfiniteTableHeaderCell(props) {
     getState: getDataSourceState,
     componentState: { filterDelay, filterTypes }
   } = useDataSourceContextValue();
-  (0, import_react19.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     let clearOnResize = null;
     const node = domRef.current;
     if (onResize && node) {
@@ -4181,7 +4504,7 @@ function InfiniteTableHeaderCell(props) {
   });
   let draggingProxy = null;
   if (dragging) {
-    draggingProxy = /* @__PURE__ */ React18.createElement("div", {
+    draggingProxy = /* @__PURE__ */ React20.createElement("div", {
       className: `${InfiniteTableHeaderCellClassName}Proxy ${HeaderCellProxy}`,
       style: {
         position: "absolute",
@@ -4198,7 +4521,7 @@ function InfiniteTableHeaderCell(props) {
   const contentRecipeVariants = {
     filtered: column.computedFiltered
   };
-  const setFilterValue = (0, import_react19.useCallback)((filterValue) => {
+  const setFilterValue = (0, import_react22.useCallback)((filterValue) => {
     var _a2;
     const state = getDataSourceState();
     let newFilterValue = (_a2 = state.filterValue) != null ? _a2 : [];
@@ -4222,7 +4545,7 @@ function InfiniteTableHeaderCell(props) {
     });
     dataSourceActions.filterValue = newFilterValue;
   }, [column, filterTypes]);
-  const debouncedOnFilterValueChange = React18.useMemo(() => {
+  const debouncedOnFilterValueChange = React20.useMemo(() => {
     const fn = (filterValue) => {
       let newFilterValueForColumn;
       if (column.computedFilterValue) {
@@ -4259,9 +4582,9 @@ function InfiniteTableHeaderCell(props) {
   ]);
   const filterType = column.computedFilterType;
   const FilterEditor = filterEditors[filterType] || defaultFilterEditors[filterType] || StringFilterEditor;
-  return /* @__PURE__ */ React18.createElement(ContextProvider, {
+  return /* @__PURE__ */ React20.createElement(ContextProvider, {
     value: renderParam
-  }, /* @__PURE__ */ React18.createElement(InfiniteTableCell, {
+  }, /* @__PURE__ */ React20.createElement(InfiniteTableCell, {
     domRef: ref,
     cellType: "header",
     column,
@@ -4273,9 +4596,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__ */ React18.createElement(InfiniteTableColumnHeaderFilter, {
+    afterChildren: showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React20.createElement(InfiniteTableColumnHeaderFilter, {
       filterEditor: FilterEditor,
       filterTypes,
       onChange: debouncedOnFilterValueChange,
@@ -4283,17 +4606,17 @@ function InfiniteTableHeaderCell(props) {
       columnLabel: column.field || column.name || column.id,
       columnFilterValue: column.computedFilterValue,
       columnHeaderHeight
-    }) : /* @__PURE__ */ React18.createElement(InfiniteTableColumnHeaderFilterEmpty, null) : null,
+    }) : /* @__PURE__ */ React20.createElement(InfiniteTableColumnHeaderFilterEmpty, null) : null,
     renderChildren
   }), draggingProxy);
 }
 function useInfiniteHeaderCell() {
-  const result = (0, import_react19.useContext)(InfiniteTableHeaderCellContext);
+  const result = (0, import_react22.useContext)(InfiniteTableHeaderCellContext);
   return result;
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
-var React21 = __toModule(require("react"));
+var React23 = __toModule(require("react"));
 
 // src/components/utils/getScrollbarWidth.ts
 var scrollbarWidth;
@@ -4415,11 +4738,11 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
-var React20 = __toModule(require("react"));
-var import_react20 = __toModule(require("react"));
+var React22 = __toModule(require("react"));
+var import_react23 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
-var React19 = __toModule(require("react"));
+var React21 = __toModule(require("react"));
 var TableHeaderGroupClassName = `${rootClassName2}HeaderGroup`;
 function InfiniteTableHeaderGroup(props) {
   const { columnGroup, height, width } = props;
@@ -4429,19 +4752,19 @@ function InfiniteTableHeaderGroup(props) {
       columnGroup
     });
   }
-  return /* @__PURE__ */ React19.createElement("div", {
+  return /* @__PURE__ */ React21.createElement("div", {
     ref: props.domRef,
     "data-group-id": columnGroup.uniqueGroupId,
     className: join(HeaderGroupCls, TableHeaderGroupClassName),
     style: { width, height }
-  }, /* @__PURE__ */ React19.createElement("div", {
+  }, /* @__PURE__ */ React21.createElement("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,
@@ -4457,7 +4780,7 @@ function InfiniteTableHeaderFn(props) {
     componentState: { headerBrain, headerOptions }
   } = useInfiniteTable();
   const { computedVisibleColumnsMap, showColumnFilters } = computed;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     const onScroll = (scrollPosition) => {
       if (domRef.current) {
         domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
@@ -4466,7 +4789,7 @@ function InfiniteTableHeaderFn(props) {
     const removeOnScroll = brain.onScroll(onScroll);
     return removeOnScroll;
   }, [brain]);
-  const domRef = (0, import_react20.useRef)(null);
+  const domRef = (0, import_react23.useRef)(null);
   const headerCls = HeaderClsRecipe({
     overflow: false,
     virtualized: true
@@ -4476,7 +4799,7 @@ function InfiniteTableHeaderFn(props) {
     className: join(TableHeaderClassName, `${TableHeaderClassName}--virtualized`, className, headerCls),
     style: __spreadProps(__spreadValues({}, style), { height: columnHeaderHeight })
   };
-  const renderCell = (0, import_react20.useCallback)((params) => {
+  const renderCell = (0, import_react23.useCallback)((params) => {
     const {
       rowIndex,
       colIndex,
@@ -4501,7 +4824,7 @@ function InfiniteTableHeaderFn(props) {
         computedWidth: colGroupItem.computedWidth,
         groupOffset: colGroupItem.groupOffset
       });
-      return /* @__PURE__ */ React20.createElement(InfiniteTableHeaderGroup, {
+      return /* @__PURE__ */ React22.createElement(InfiniteTableHeaderGroup, {
         domRef: domRef2,
         columns: columns2,
         width: widthWithColspan,
@@ -4509,7 +4832,7 @@ function InfiniteTableHeaderFn(props) {
         columnGroup: computedColumnGroup
       });
     }
-    return /* @__PURE__ */ React20.createElement(InfiniteTableHeaderCell, {
+    return /* @__PURE__ */ React22.createElement(InfiniteTableHeaderCell, {
       domRef: domRef2,
       column,
       headerOptions,
@@ -4525,13 +4848,13 @@ function InfiniteTableHeaderFn(props) {
     columnGroupsMaxDepth,
     showColumnFilters
   ]);
-  return /* @__PURE__ */ React20.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React20.createElement(RawTable, {
+  return /* @__PURE__ */ React22.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React22.createElement(RawTable, {
     renderCell,
     brain: headerBrain,
     cellHoverClassNames: []
   }));
 }
-var InfiniteTableHeader = React20.memo(InfiniteTableHeaderFn);
+var InfiniteTableHeader = React22.memo(InfiniteTableHeaderFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
 function TableHeaderWrapper(props) {
@@ -4554,13 +4877,13 @@ function TableHeaderWrapper(props) {
   } = tableContextValue;
   const rows = !computedColumnGroups || !computedColumnGroups.size ? 1 : columnGroupsMaxDepth + 2;
   const height = rows * columnHeaderHeight + (showColumnFilters ? columnHeaderHeight : 0);
-  const columnAndGroupTreeInfo = React21.useMemo(() => {
+  const columnAndGroupTreeInfo = React23.useMemo(() => {
     if (!computedColumnGroups || !computedColumnGroups.size) {
       return void 0;
     }
     return buildColumnAndGroupTree(computedVisibleColumns, computedColumnGroups, columnGroupsDepthsMap, columnGroupsMaxDepth);
   }, [computedVisibleColumns, computedColumnGroups, columnGroupsDepthsMap]);
-  const cellspan = React21.useCallback(({ rowIndex, colIndex }) => {
+  const cellspan = React23.useCallback(({ rowIndex, colIndex }) => {
     const column = computedVisibleColumns[colIndex];
     const rowspan2 = 1;
     const colspan2 = 1;
@@ -4593,9 +4916,9 @@ function TableHeaderWrapper(props) {
     rows,
     columnGroupsDepthsMap
   ]);
-  const rowspan = React21.useCallback(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).rowspan, [cellspan]);
-  const colspan = React21.useCallback(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).colspan, [cellspan]);
-  const rowHeight = React21.useCallback((index) => {
+  const rowspan = React23.useCallback(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).rowspan, [cellspan]);
+  const colspan = React23.useCallback(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).colspan, [cellspan]);
+  const rowHeight = React23.useCallback((index) => {
     return showColumnFilters ? index < rows - 1 ? columnHeaderHeight : 2 * columnHeaderHeight : columnHeaderHeight;
   }, [rows, showColumnFilters, columnHeaderHeight]);
   useMatrixBrain(brain, {
@@ -4610,21 +4933,21 @@ function TableHeaderWrapper(props) {
     fixedColsEnd: computedPinnedEndColumns.length,
     fixedColsStart: computedPinnedStartColumns.length
   });
-  const header = /* @__PURE__ */ React21.createElement(InfiniteTableHeader, {
+  const header = /* @__PURE__ */ React23.createElement(InfiniteTableHeader, {
     columns: computedVisibleColumns,
     brain,
     columnHeaderHeight: height,
     columnGroupsMaxDepth,
     columnAndGroupTreeInfo
   });
-  const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ React21.createElement("div", {
+  const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ React23.createElement("div", {
     className: HeaderScrollbarPlaceholderCls,
     style: {
       zIndex: 1e3,
       width: getScrollbarWidth()
     }
   }) : null;
-  return /* @__PURE__ */ React21.createElement("div", {
+  return /* @__PURE__ */ React23.createElement("div", {
     className: HeaderWrapperCls,
     style: {
       height
@@ -4633,8 +4956,8 @@ function TableHeaderWrapper(props) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
-var React22 = __toModule(require("react"));
-var import_react21 = __toModule(require("react"));
+var React24 = __toModule(require("react"));
+var import_react24 = __toModule(require("react"));
 
 // src/components/utils/decamelize.ts
 function decamelize(str, options) {
@@ -4643,15 +4966,15 @@ 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)", activeBackground: "var(--infinite-active-cell-background)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
 
 // 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 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 PinnedRowsContainerClsVariants = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "", variantClassNames: { pinned: { start: "_1yeub2vh", end: "_1yeub2vi", false: "_1yeub2vj" } }, defaultVariants: {}, compoundVariants: [] });
+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: [[{ focused: false, focusedWithin: false }, "_1yeub2ve"]] });
+var InfiniteClsShiftingColumns = "_16lm1iwp";
+var PinnedRowsContainerClsVariants = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "", variantClassNames: { pinned: { start: "_1yeub2vi", end: "_1yeub2vj", false: "_1yeub2vk" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
 var defaultStyle = {
@@ -4680,10 +5003,10 @@ var enforceStyle = (node, style) => {
     node.style.setProperty(decamelize(propertyName), propertyValue, "important");
   }
 };
-var InfiniteTableLicenseFooter = React22.forwardRef(function InfiniteTableLicenseFooter2(props, ref) {
-  const { rootClassName: rootClassName9 } = useInternalProps();
-  const domRef = React22.useRef(null);
-  const domCallback = React22.useCallback((node) => {
+var InfiniteTableLicenseFooter = React24.forwardRef(function InfiniteTableLicenseFooter2(props, ref) {
+  const { rootClassName: rootClassName11 } = useInternalProps();
+  const domRef = React24.useRef(null);
+  const domCallback = React24.useCallback((node) => {
     domRef.current = node;
     if (!ref) {
       return;
@@ -4694,7 +5017,7 @@ var InfiniteTableLicenseFooter = React22.forwardRef(function InfiniteTableLicens
       ref.current = node;
     }
   }, []);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     const forceStyle = () => {
       requestAnimationFrame(() => {
         var _a;
@@ -4708,12 +5031,12 @@ var InfiniteTableLicenseFooter = React22.forwardRef(function InfiniteTableLicens
       clearInterval(intervalId);
     };
   }, []);
-  return /* @__PURE__ */ React22.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React24.createElement("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__ */ React22.createElement("a", {
+  }), "Powered by", " ", /* @__PURE__ */ React24.createElement("a", {
     href: "https://infinite-table.com",
     rel: "noopener noreferrer",
     role: "link",
@@ -4722,11 +5045,11 @@ var InfiniteTableLicenseFooter = React22.forwardRef(function InfiniteTableLicens
 });
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
-var React23 = __toModule(require("react"));
-var import_react22 = __toModule(require("react"));
-var { rootClassName: rootClassName7 } = internalProps;
-var InfiniteTableColumnCellContext = React23.createContext(null);
-var InfiniteTableColumnCellClassName = `${rootClassName7}ColumnCell`;
+var React25 = __toModule(require("react"));
+var import_react25 = __toModule(require("react"));
+var { rootClassName: rootClassName9 } = internalProps;
+var InfiniteTableColumnCellContext = React25.createContext(null);
+var InfiniteTableColumnCellClassName = `${rootClassName9}ColumnCell`;
 function isColumnWithField(c) {
   return typeof c.field === "string";
 }
@@ -4750,13 +5073,16 @@ function InfiniteTableColumnCellFn(props) {
     showZebraRows
   } = props;
   if (!column) {
-    return /* @__PURE__ */ React23.createElement("div", {
+    return /* @__PURE__ */ React25.createElement("div", {
       ref: domRef
     }, "no column");
   }
   const { data, isGroupRow, dataSourceHasGrouping } = rowInfo;
   const groupBy = dataSourceHasGrouping ? rowInfo.groupBy : void 0;
   const groupRowInfo = null;
+  const { getState, componentActions } = useInfiniteTable();
+  const { activeRowIndex, keyboardNavigation } = getState();
+  const rowActive = rowIndex === activeRowIndex && keyboardNavigation === "row";
   let value = isGroupRow && groupBy && column.groupByField ? rowInfo.value : isColumnWithField(column) ? data == null ? void 0 : data[column.field] : null;
   if (column.valueGetter) {
     if (!rowInfo.isGroupRow && rowInfo.data) {
@@ -4768,27 +5094,43 @@ function InfiniteTableColumnCellFn(props) {
       data: rowInfo.data,
       isGroupRow,
       rowInfo,
+      rowActive,
       field: column.field,
       value
     } : {
       data: rowInfo.data,
       isGroupRow,
+      rowActive,
       rowInfo,
       field: column.field,
       value
     });
   }
+  const onClick = (0, import_react25.useCallback)(() => {
+    if (keyboardNavigation === "row") {
+      componentActions.activeRowIndex = rowIndex;
+      return;
+    }
+    if (keyboardNavigation === "cell") {
+      componentActions.activeCellIndex = [
+        rowIndex,
+        column.computedVisibleIndex
+      ];
+    }
+  }, [rowIndex, column.computedVisibleIndex, keyboardNavigation]);
   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
   };
@@ -4804,28 +5146,28 @@ function InfiniteTableColumnCellFn(props) {
     isGroupRow,
     rowIndex,
     toggleGroupRow,
-    toggleCurrentGroupRow: () => {
+    toggleCurrentGroupRow: (0, import_react25.useCallback)(() => {
       if (!rowInfo.isGroupRow) {
         return;
       }
       toggleGroupRow(rowInfo.groupKeys);
-    },
+    }, []),
     groupBy: computedDataSource.groupBy,
     pivotBy: computedDataSource.pivotBy
   });
-  const renderChildren = () => {
+  const renderChildren = (0, import_react25.useCallback)(() => {
     if (hidden) {
       return null;
     }
     const renderFn = column.render || column.renderValue;
     if (renderFn) {
-      return /* @__PURE__ */ React23.createElement(RenderHookComponent, {
+      return /* @__PURE__ */ React25.createElement(RenderHookComponent, {
         render: renderFn,
         renderParam
       });
     }
     return renderValue;
-  };
+  }, [column, hidden, ...Object.values(renderParam)]);
   const rowPropsAndStyleArgs = __spreadProps(__spreadValues({}, rest), {
     rowIndex
   });
@@ -4838,6 +5180,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 = (0, import_react25.useMemo)(() => 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 = {
@@ -4847,21 +5190,22 @@ 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__ */ React23.createElement(ContextProvider, {
+  return /* @__PURE__ */ React25.createElement(ContextProvider, {
     value: renderParam
-  }, /* @__PURE__ */ React23.createElement(InfiniteTableCell, __spreadValues({}, cellProps)));
+  }, /* @__PURE__ */ React25.createElement(InfiniteTableCell, __spreadValues({}, cellProps)));
 }
-var InfiniteTableColumnCell = React23.memo(InfiniteTableColumnCellFn);
+var InfiniteTableColumnCell = React25.memo(InfiniteTableColumnCellFn);
 function useInfiniteColumnCell() {
-  const result = (0, import_react22.useContext)(InfiniteTableColumnCellContext);
+  const result = (0, import_react25.useContext)(InfiniteTableColumnCellContext);
   return result;
 }
 
@@ -4872,30 +5216,92 @@ var RowClsRecipe = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassNa
 var RowHoverCls = "_7pupv01";
 
 // src/components/InfiniteTable/components/LoadMask.tsx
-var React24 = __toModule(require("react"));
+var React26 = __toModule(require("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__ */ React24.createElement("div", {
-    className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls}`
-  }, /* @__PURE__ */ React24.createElement("div", {
-    className: `${LoadMaskOverlayCls} ${baseCls}-Overlay`
-  }), /* @__PURE__ */ React24.createElement("div", {
-    className: `${LoadMaskTextCls} ${baseCls}-Text`
+  return /* @__PURE__ */ React26.createElement("div", {
+    className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls3}`
+  }, /* @__PURE__ */ React26.createElement("div", {
+    className: `${LoadMaskOverlayCls} ${baseCls3}-Overlay`
+  }), /* @__PURE__ */ React26.createElement("div", {
+    className: `${LoadMaskTextCls} ${baseCls3}-Text`
   }, children));
 }
-var LoadMask = React24.memo(LoadMaskFn);
+var LoadMask = React26.memo(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
-var import_react23 = __toModule(require("react"));
+var import_react26 = __toModule(require("react"));
 var OFFSET = 10;
 function getColumnContentMaxWidths(domRef, options) {
   var _a;
@@ -4955,11 +5361,11 @@ function useAutoSizeColumns() {
     componentActions,
     componentState: { domRef, ready, autoSizeColumnsKey, brain }
   } = useComponentState();
-  const [refreshId, setRefreshId] = (0, import_react23.useState)(0);
+  const [refreshId, setRefreshId] = (0, import_react26.useState)(0);
   const theKey = typeof autoSizeColumnsKey === "object" ? autoSizeColumnsKey.key : autoSizeColumnsKey;
   const getTheKey = useLatest(theKey);
-  const lastExecutedIdentifierRef = (0, import_react23.useRef)(null);
-  (0, import_react23.useEffect)(() => {
+  const lastExecutedIdentifierRef = (0, import_react26.useRef)(null);
+  (0, import_react26.useEffect)(() => {
     const key = getTheKey();
     if (key == null) {
       return;
@@ -4972,7 +5378,7 @@ function useAutoSizeColumns() {
     };
     return brain.onRenderRangeChange(onChange);
   }, [brain]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     var _a;
     if (theKey == null) {
       return;
@@ -5017,20 +5423,8 @@ function useAutoSizeColumns() {
 }
 
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
-var import_react25 = __toModule(require("react"));
-var import_react26 = __toModule(require("react"));
-
-// src/components/hooks/useRerender.ts
-var import_react24 = __toModule(require("react"));
-var useRerender = () => {
-  const [state, setState] = (0, import_react24.useState)(0);
-  return [
-    state,
-    (0, import_react24.useCallback)(() => {
-      setState((state2) => state2 + 1);
-    }, [setState])
-  ];
-};
+var import_react27 = __toModule(require("react"));
+var import_react28 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
 function useYourBrain(param) {
@@ -5060,7 +5454,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,
@@ -5100,13 +5494,13 @@ function useCellRendering(param) {
     bodySize,
     rowspan
   });
-  const scrollTopMaxRef = (0, import_react25.useRef)(0);
-  (0, import_react25.useEffect)(() => {
+  const scrollTopMaxRef = (0, import_react27.useRef)(0);
+  (0, import_react27.useEffect)(() => {
     return brain.onRenderCountChange(() => {
       scrollTopMaxRef.current = brain.scrollTopMax;
     });
   }, [brain]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     return brain.onScrollStop((scrollPosition) => {
       const { scrollTop } = scrollPosition;
       if (scrollTop === 0) {
@@ -5123,31 +5517,21 @@ function useCellRendering(param) {
       }
     });
   }, [brain, onScrollToTop, onScrollToBottom]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     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();
-  (0, import_react25.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     rerender();
   }, [dataSourceState]);
-  const renderCell = (0, import_react25.useCallback)((params) => {
+  const renderCell = (0, import_react27.useCallback)((params) => {
     const {
       rowIndex,
       colIndex,
@@ -5182,7 +5566,7 @@ function useCellRendering(param) {
       rowStyle,
       rowClassName
     };
-    return /* @__PURE__ */ import_react26.default.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
+    return /* @__PURE__ */ import_react28.default.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
   }, [
     rowHeight,
     getData,
@@ -5200,13 +5584,13 @@ function useCellRendering(param) {
 }
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-var import_react40 = __toModule(require("react"));
+var import_react42 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useColumnGroups.ts
-var import_react28 = __toModule(require("react"));
+var import_react30 = __toModule(require("react"));
 
 // src/components/hooks/useInterceptedMap.ts
-var import_react27 = __toModule(require("react"));
+var import_react29 = __toModule(require("react"));
 function interceptMap(map2, fns) {
   const { set, delete: deleteKey, clear } = map2;
   if (fns.set) {
@@ -5294,7 +5678,7 @@ function useColumnGroups() {
     componentActions,
     getComponentState
   } = useComponentState();
-  (0, import_react28.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     const recompute = () => {
       componentActions.columnGroupsDepthsMap = computeColumnGroupsDepths(computedColumnGroups);
     };
@@ -5305,7 +5689,7 @@ function useColumnGroups() {
       set: update
     });
   }, [computedColumnGroups]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     return interceptMap(collapsedColumnGroups, {
       set: (key, visibleCol) => {
         const colIds = key.slice(1);
@@ -5340,10 +5724,10 @@ function useColumnGroups() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnRowspan.ts
-var import_react29 = __toModule(require("react"));
+var import_react31 = __toModule(require("react"));
 function useColumnRowspan(computedVisibleColumns) {
   const { getState: getDataSourceState } = useDataSourceContextValue();
-  const rowspan = (0, import_react29.useMemo)(() => {
+  const rowspan = (0, import_react31.useMemo)(() => {
     const colsWithRowspan = computedVisibleColumns.filter((col) => typeof col.rowspan === "function");
     return colsWithRowspan.length ? ({ rowIndex, colIndex }) => {
       const dataArray = getDataSourceState().dataArray;
@@ -5369,10 +5753,10 @@ function useColumnRowspan(computedVisibleColumns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnSizeFn.ts
-var import_react30 = __toModule(require("react"));
+var import_react32 = __toModule(require("react"));
 var debug4 = dbg("useColumnSizeFn");
 function useColumnSizeFn(columns) {
-  const columnSize = (0, import_react30.useCallback)((index) => {
+  const columnSize = (0, import_react32.useCallback)((index) => {
     const column = columns[index];
     if (!column) {
       debug4("cannot find column at index", index, columns);
@@ -5383,10 +5767,10 @@ function useColumnSizeFn(columns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-var import_react36 = __toModule(require("react"));
+var import_react38 = __toModule(require("react"));
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
-var React28 = __toModule(require("react"));
+var React30 = __toModule(require("react"));
 
 // src/utils/stripVar.ts
 function stripVar(cssVariableWithVarString) {
@@ -5402,19 +5786,19 @@ var showLoadingIcon = (rowInfo) => {
 };
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
-var React26 = __toModule(require("react"));
-var import_react31 = __toModule(require("react"));
+var React28 = __toModule(require("react"));
+var import_react33 = __toModule(require("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] = (0, import_react31.useState)((_a = props.expanded) != null ? _a : props.defaultExpanded);
+  const [expanded, setExpanded] = (0, import_react33.useState)((_a = props.expanded) != null ? _a : props.defaultExpanded);
   const onClick = () => {
     var _a2;
     (_a2 = props.onChange) == null ? void 0 : _a2.call(props, !expanded);
@@ -5422,12 +5806,12 @@ function ExpanderIcon(props) {
       setExpanded(!expanded);
     }
   };
-  React26.useEffect(() => {
+  React28.useEffect(() => {
     if (isControlled("expanded", props)) {
       setExpanded(props.expanded);
     }
   }, [props.expanded]);
-  return /* @__PURE__ */ React26.createElement("svg", {
+  return /* @__PURE__ */ React28.createElement("svg", {
     "data-name": "expander-icon",
     xmlns: "http://www.w3.org/2000/svg",
     height: `${size}px`,
@@ -5438,20 +5822,20 @@ function ExpanderIcon(props) {
     className: join(props.className, ExpanderIconCls, ExpanderIconClsVariants({
       expanded
     }), "InfiniteIcon", "InfiniteIcon-expander", `InfiniteIcon-expander--${expanded ? "expanded" : "collapsed"}`)
-  }, /* @__PURE__ */ React26.createElement("path", {
+  }, /* @__PURE__ */ React28.createElement("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
-var React27 = __toModule(require("react"));
+var React29 = __toModule(require("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__ */ React27.createElement("svg", {
+  return /* @__PURE__ */ React29.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     style: {
       margin: "auto",
@@ -5463,14 +5847,14 @@ var LoadingIcon = (props) => {
     viewBox: "0 0 100 100",
     preserveAspectRatio: "xMidYMid",
     className: join(props.className, LoadingIconCls, "InfiniteIcon", "InfiniteIcon-loading")
-  }, /* @__PURE__ */ React27.createElement("circle", {
+  }, /* @__PURE__ */ React29.createElement("circle", {
     cx: "50",
     cy: "50",
     fill: "none",
     strokeWidth: "10",
     r: "35",
     strokeDasharray: "164.93361431346415 56.97787143782138"
-  }, /* @__PURE__ */ React27.createElement("animateTransform", {
+  }, /* @__PURE__ */ React29.createElement("animateTransform", {
     attributeName: "transform",
     type: "rotate",
     repeatCount: "indefinite",
@@ -5490,7 +5874,7 @@ function getGroupColumnRender({
     var _a, _b, _c;
     let { value, rowInfo, column, groupBy, pivotBy } = renderOptions;
     if (column.renderValue) {
-      value = /* @__PURE__ */ React28.createElement(RenderHookComponent, {
+      value = /* @__PURE__ */ React30.createElement(RenderHookComponent, {
         render: column.renderValue,
         renderParam: renderOptions
       });
@@ -5520,22 +5904,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__ */ React28.createElement(LoadingIcon, null);
+      icon = /* @__PURE__ */ React30.createElement(LoadingIcon, null);
     } else if (showExpanderIcon) {
-      const defaultIcon = /* @__PURE__ */ React28.createElement(ExpanderIcon, {
+      const defaultIcon = /* @__PURE__ */ React30.createElement(ExpanderIcon, {
         expanded: !collapsed,
         onChange: () => {
           toggleGroupRow(groupKeys);
         }
       });
-      icon = column.renderGroupIcon ? /* @__PURE__ */ React28.createElement(RenderHookComponent, {
+      icon = column.renderGroupIcon ? /* @__PURE__ */ React30.createElement(RenderHookComponent, {
         render: column.renderGroupIcon,
         renderParam: Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)
       }) : defaultIcon;
     }
-    return /* @__PURE__ */ React28.createElement("div", {
+    return /* @__PURE__ */ React30.createElement("div", {
       className: join(display.flex, alignItems.center)
-    }, icon, /* @__PURE__ */ React28.createElement("div", {
+    }, icon, /* @__PURE__ */ React30.createElement("div", {
       className: cssEllipsisClassName
     }, value != null ? value : null));
   };
@@ -5580,9 +5964,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__ */ React28.createElement(LoadingIcon, null);
+        icon = /* @__PURE__ */ React30.createElement(LoadingIcon, null);
       } else if (showExpanderIcon) {
-        const defaultIcon = /* @__PURE__ */ React28.createElement(ExpanderIcon, {
+        const defaultIcon = /* @__PURE__ */ React30.createElement(ExpanderIcon, {
           expanded: !collapsed,
           onChange: () => {
             if (!rowInfo.isGroupRow) {
@@ -5597,9 +5981,9 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
           icon = column.renderGroupIcon(renderParam);
         }
       }
-      return /* @__PURE__ */ React28.createElement("div", {
+      return /* @__PURE__ */ React30.createElement("div", {
         className: join(display.flex, alignItems.center, GroupRowExpanderCls)
-      }, icon, /* @__PURE__ */ React28.createElement("div", {
+      }, icon, /* @__PURE__ */ React30.createElement("div", {
         className: cssEllipsisClassName
       }, value != null ? value : null));
     }
@@ -5615,11 +5999,11 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
 }
 
 // src/components/InfiniteTable/hooks/useEffectWithRaf.ts
-var import_react32 = __toModule(require("react"));
+var import_react34 = __toModule(require("react"));
 function useEffectWithRaf(fn, deps) {
-  const rafId = (0, import_react32.useRef)(0);
-  const removeFnRaf = (0, import_react32.useRef)();
-  (0, import_react32.useEffect)(() => {
+  const rafId = (0, import_react34.useRef)(0);
+  const removeFnRaf = (0, import_react34.useRef)();
+  (0, import_react34.useEffect)(() => {
     rafId.current = requestAnimationFrame(() => {
       removeFnRaf.current = fn();
     });
@@ -5636,7 +6020,7 @@ function useEffectWithRaf(fn, deps) {
 }
 
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
-var import_react35 = __toModule(require("react"));
+var import_react37 = __toModule(require("react"));
 
 // src/utils/groupAndPivot/index.ts
 var LAZY_ROOT_KEY_FOR_GROUPS = "____root____";
@@ -6089,7 +6473,7 @@ function enhancedFlatten(param) {
 }
 
 // src/components/DataSource/index.tsx
-var React29 = __toModule(require("react"));
+var React31 = __toModule(require("react"));
 
 // src/utils/multisort/sortTypes.ts
 var numberComparator = function(first, second) {
@@ -6277,15 +6661,15 @@ var GroupRowsState = class {
 };
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-var import_react34 = __toModule(require("react"));
+var import_react36 = __toModule(require("react"));
 
 // src/components/hooks/useEffectWithChanges.ts
-var import_react33 = __toModule(require("react"));
+var import_react35 = __toModule(require("react"));
 function useEffectWithChanges(fn, deps) {
-  const prevRef = (0, import_react33.useRef)({});
-  const oldValuesRef = (0, import_react33.useRef)({});
+  const prevRef = (0, import_react35.useRef)({});
+  const oldValuesRef = (0, import_react35.useRef)({});
   const oldValues = oldValuesRef.current;
-  const changesRef = (0, import_react33.useRef)({});
+  const changesRef = (0, import_react35.useRef)({});
   const changes = changesRef.current;
   const useEffectDeps = [];
   for (const k in deps) {
@@ -6298,7 +6682,7 @@ function useEffectWithChanges(fn, deps) {
     }
   }
   prevRef.current = deps;
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     const changes2 = changesRef.current;
     const result = fn(changes2, oldValues);
     changesRef.current = {};
@@ -6566,12 +6950,12 @@ function useLoadData() {
     livePaginationCursor,
     cursorId: stateCursorId
   } = componentState;
-  const [scrollbars, setScrollbars] = (0, import_react34.useState)({
+  const [scrollbars, setScrollbars] = (0, import_react36.useState)({
     vertical: false,
     horizontal: false
   });
-  const scrollbarsRef = (0, import_react34.useRef)(scrollbars);
-  (0, import_react34.useEffect)(() => {
+  const scrollbarsRef = (0, import_react36.useRef)(scrollbars);
+  (0, import_react36.useEffect)(() => {
     notifyScrollbarsChange.onChange((scrollbars2) => {
       if (!scrollbars2) {
         return;
@@ -6581,7 +6965,7 @@ function useLoadData() {
     });
     return () => notifyScrollbarsChange.destroy();
   }, [notifyScrollbarsChange]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!livePagination) {
       return;
     }
@@ -6595,7 +6979,7 @@ function useLoadData() {
     });
     return () => cancelAnimationFrame(frameId);
   }, [livePaginationCursor]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!livePagination || livePaginationCursor !== void 0) {
       return;
     }
@@ -6609,7 +6993,7 @@ function useLoadData() {
     });
     return () => cancelAnimationFrame(frameId);
   }, [dataArray.length, livePaginationCursor]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     const state = getComponentState();
     const { livePaginationCursor: livePaginationCursor2, livePagination: livePagination2, dataArray: dataArray2 } = state;
     if (!scrollbars.vertical && livePagination2) {
@@ -6627,7 +7011,7 @@ function useLoadData() {
     filterValue,
     cursorId: livePagination ? stateCursorId : null
   };
-  const initialRef = (0, import_react34.useRef)(true);
+  const initialRef = (0, import_react36.useRef)(true);
   useLazyLoadRange();
   useEffectWithChanges(() => {
     const componentState2 = getComponentState();
@@ -6659,7 +7043,7 @@ function useLazyLoadRange() {
     componentActions: actions,
     componentState
   } = useComponentState();
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     actions.lazyLoadCacheOfLoadedBatches = new DeepMap();
   }, [componentState.data, componentState.dataParams]);
   const {
@@ -6668,7 +7052,7 @@ function useLazyLoadRange() {
     dataArray,
     scrollStopDelayUpdatedByTable
   } = componentState;
-  const latestRenderRangeRef = (0, import_react34.useRef)(null);
+  const latestRenderRangeRef = (0, import_react36.useRef)(null);
   const loadRange = (renderRange, cache = getComponentState().lazyLoadCacheOfLoadedBatches) => {
     const componentState2 = getComponentState();
     renderRange = renderRange || latestRenderRangeRef.current;
@@ -6687,8 +7071,8 @@ function useLazyLoadRange() {
       componentActions: actions
     }, cache);
   };
-  const debouncedLoadRange = (0, import_react34.useMemo)(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
-  (0, import_react34.useEffect)(() => {
+  const debouncedLoadRange = (0, import_react36.useMemo)(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
+  (0, import_react36.useEffect)(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       return notifyRenderRangeChange.onChange((renderRange) => {
         latestRenderRangeRef.current = renderRange;
@@ -6697,7 +7081,7 @@ function useLazyLoadRange() {
     }
     return;
   }, [lazyLoadBatchSize]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
     }
@@ -6933,6 +7317,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,
@@ -6976,7 +7361,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
   };
@@ -7367,7 +7752,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",
@@ -7376,7 +7761,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;
@@ -7418,7 +7803,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;
@@ -7498,7 +7884,7 @@ function DataSourceWithContext(props) {
   if (typeof children === "function") {
     children = children(computedValues);
   }
-  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, children);
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, children);
 }
 var DataSourceRoot = getComponentStateRoot({
   initSetupState,
@@ -7521,14 +7907,14 @@ function DataSourceCmp({ children }) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
-  return /* @__PURE__ */ React29.createElement(DataSourceContext.Provider, {
+  return /* @__PURE__ */ React31.createElement(DataSourceContext.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ React29.createElement(DataSourceWithContext, {
+  }, /* @__PURE__ */ React31.createElement(DataSourceWithContext, {
     children
   }));
 }
 function DataSource(props) {
-  return /* @__PURE__ */ React29.createElement(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ React29.createElement(DataSourceCmp, {
+  return /* @__PURE__ */ React31.createElement(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ React31.createElement(DataSourceCmp, {
     children: props.children
   }));
 }
@@ -7536,7 +7922,7 @@ function DataSource(props) {
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
 function useToggleGroupRow() {
   const { getState: getDataSourceState, componentActions: dataSourceActions } = useDataSourceContextValue();
-  const toggleGroupRow = (0, import_react35.useCallback)((groupKeys) => {
+  const toggleGroupRow = (0, import_react37.useCallback)((groupKeys) => {
     const state = getDataSourceState();
     const newState = new GroupRowsState(state.groupRowsState);
     newState.toggleGroupRow(groupKeys);
@@ -7568,7 +7954,7 @@ function useToggleGroupRow() {
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
 function useGroupByMap(groupBy) {
-  const groupByMap = (0, import_react36.useMemo)(() => {
+  const groupByMap = (0, import_react38.useMemo)(() => {
     return groupBy.reduce((acc, groupBy2, index) => {
       acc.set(groupBy2.field, {
         groupBy: groupBy2,
@@ -7592,13 +7978,13 @@ function useColumnsWhen() {
     }
   } = useComponentState();
   const groupByMap = useGroupByMap(groupBy);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
   }, [groupRenderStrategy]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (pivotGrandTotalColumnPosition != void 0) {
       dataSourceActions.pivotGrandTotalColumnPosition = pivotGrandTotalColumnPosition;
     }
@@ -7672,7 +8058,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
     });
     return computedColumns.size === 0 ? void 0 : computedColumns;
   }
-  (0, import_react36.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     const update = () => {
       componentActions.columnsWhenInlineGroupRenderStrategy = computeColumnsWhenInlineGroupRenderStrategy(columns, groupByMap, groupRenderStrategy, toggleGroupRow);
     };
@@ -7701,7 +8087,7 @@ function useColumnsWhenGrouping() {
     }
   } = useComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  (0, import_react36.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     const update = () => {
       const columnsWhenGrouping = getColumnsWhenGrouping({
         columns,
@@ -7837,7 +8223,7 @@ function useHideColumns(groupByMap) {
     hideEmptyGroupColumns ? groupRowsState : null,
     hideEmptyGroupColumns
   ]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     const isGrouped = groupBy.length > 0;
     const currentState = getComponentState();
     const { controlledColumnVisibility, columnVisibility } = currentState;
@@ -7952,7 +8338,7 @@ function getColumnsWhenGrouping(params) {
 }
 
 // src/components/InfiniteTable/hooks/useComputedVisibleColumns.ts
-var import_react38 = __toModule(require("react"));
+var import_react40 = __toModule(require("react"));
 
 // src/components/flexbox/index.ts
 var computeFlex = (params) => {
@@ -8265,7 +8651,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);
@@ -8290,16 +8676,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,
@@ -8313,7 +8709,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,
@@ -8322,7 +8718,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,
@@ -8372,7 +8768,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);
@@ -8413,10 +8809,10 @@ var getComputedVisibleColumns = ({
 };
 
 // src/components/InfiniteTable/hooks/useRerenderOnKeyChange.ts
-var import_react37 = __toModule(require("react"));
+var import_react39 = __toModule(require("react"));
 var useRerenderOnKeyChange = (map2) => {
   const [renderId, rerender] = useRerender();
-  (0, import_react37.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     const update = rafFn(rerender);
     return interceptMap(map2, {
       set: update,
@@ -8469,7 +8865,7 @@ var useComputedVisibleColumns = ({
     computedPinnedEndOffset,
     computedPinnedEndWidth,
     computedPinnedStartWidth
-  } = (0, import_react38.useMemo)(() => {
+  } = (0, import_react40.useMemo)(() => {
     return getComputedVisibleColumns({
       columns,
       bodySize,
@@ -8537,7 +8933,7 @@ var useComputedVisibleColumns = ({
 };
 
 // src/components/InfiniteTable/hooks/useScrollbars.ts
-var import_react39 = __toModule(require("react"));
+var import_react41 = __toModule(require("react"));
 var INITIAL_SCROLLBARS = {
   vertical: false,
   horizontal: false
@@ -8545,8 +8941,8 @@ var INITIAL_SCROLLBARS = {
 function useScrollbars(brain) {
   const { getComponentState: getInfiniteTableState } = useComponentState();
   const { getState: getDataSourceState } = useDataSourceContextValue();
-  const [scrollbars, setScrollbars] = (0, import_react39.useState)(INITIAL_SCROLLBARS);
-  (0, import_react39.useEffect)(() => {
+  const [scrollbars, setScrollbars] = (0, import_react41.useState)(INITIAL_SCROLLBARS);
+  (0, import_react41.useEffect)(() => {
     return brain.onRenderCountChange(() => {
       const { scrollTopMax, scrollLeftMax } = brain;
       setScrollbars({
@@ -8555,7 +8951,7 @@ function useScrollbars(brain) {
       });
     });
   }, [brain]);
-  (0, import_react39.useLayoutEffect)(() => {
+  (0, import_react41.useLayoutEffect)(() => {
     const dataSourceState = getDataSourceState();
     const { onScrollbarsChange } = getInfiniteTableState();
     const { notifyScrollbarsChange } = dataSourceState;
@@ -8586,7 +8982,7 @@ function useComputed() {
     bodySize,
     showSeparatePivotColumnForSingleAggregation
   } = componentState;
-  (0, import_react40.useState)(() => {
+  (0, import_react42.useState)(() => {
     componentState.onRowHeightCSSVarChange.onChange((rowHeight) => {
       if (rowHeight) {
         componentActions.rowHeight = rowHeight;
@@ -8598,13 +8994,13 @@ function useComputed() {
       }
     });
   });
-  (0, import_react40.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     dataSourceActions.showSeparatePivotColumnForSingleAggregation = showSeparatePivotColumnForSingleAggregation;
   }, [showSeparatePivotColumnForSingleAggregation]);
   const { multiSort, filterValue } = dataSourceState;
   useColumnGroups();
   const { toggleGroupRow } = useColumnsWhen();
-  const setSortInfo = (0, import_react40.useCallback)((sortInfo) => {
+  const setSortInfo = (0, import_react42.useCallback)((sortInfo) => {
     var _a2;
     const newSortInfo = getDataSourceState().multiSort ? sortInfo : (_a2 = sortInfo[0]) != null ? _a2 : null;
     dataSourceActions.sortInfo = newSortInfo;
@@ -8763,7 +9159,7 @@ function useDOMProps(initialDOMProps) {
 }
 
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
-var import_react41 = __toModule(require("react"));
+var import_react43 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useLicense/crc32.ts
 var DEFAULT_ReversedPolynomial = 3988292384;
@@ -8921,10 +9317,10 @@ var isInsideSandbox = () => {
 };
 var isInsidePlayground = isInsideSandbox() || isInsideSandpack();
 var useLicense = (licenseKey = "") => {
-  const valid = (0, import_react41.useMemo)(() => {
+  const valid = (0, import_react43.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.3.3"
+      version: "0.3.6"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -8934,8 +9330,142 @@ 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, keyboardNavigation } = state;
+  if (activeRowIndex != null && keyboardNavigation === "row") {
+    return handleRowNavigation(options);
+  }
+  if (activeCellIndex != null && keyboardNavigation === "cell") {
+    return handleCellNavigation(options);
+  }
+  return false;
+}
+
 // src/components/InfiniteTable/state/getInitialState.ts
-var import_react42 = __toModule(require("react"));
+var import_react44 = __toModule(require("react"));
 
 // src/components/VirtualBrain/ScrollListener.ts
 var initialScrollPosition = {
@@ -8991,6 +9521,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();
@@ -9004,17 +9546,23 @@ 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,
     columnShifts: null,
-    domRef: (0, import_react42.createRef)(),
-    scrollerDOMRef: (0, import_react42.createRef)(),
-    portalDOMRef: (0, import_react42.createRef)(),
+    domRef: (0, import_react44.createRef)(),
+    scrollerDOMRef: (0, import_react44.createRef)(),
+    portalDOMRef: (0, import_react44.createRef)(),
     onRowHeightCSSVarChange: buildSubscriptionCallback(),
     onColumnHeaderHeightCSSVarChange: buildSubscriptionCallback(),
     bodySize: {
@@ -9068,7 +9616,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,
@@ -9083,6 +9630,9 @@ var forwardProps3 = (setupState) => {
     pivotTotalColumnPosition: (pivotTotalColumnPosition) => pivotTotalColumnPosition != null ? pivotTotalColumnPosition : "end",
     pivotGrandTotalColumnPosition: 1,
     licenseKey: (licenseKey) => licenseKey || "",
+    keyboardNavigation: (keyboardNavigation) => keyboardNavigation || "cell",
+    activeRowIndex: 1,
+    activeCellIndex: 1,
     columnOrder: (columnOrder) => columnOrder != null ? columnOrder : true,
     header: (header) => header != null ? header : true,
     showZebraRows: (showZebraRows) => showZebraRows != null ? showZebraRows : true,
@@ -9153,14 +9703,23 @@ var InfiniteTableRoot = getComponentStateRoot({
   getParentState: () => useDataSource(),
   debugName: "InfiniteTable"
 });
-var InfiniteTableComponent = React30.memo(function InfiniteTableComponent2() {
+var InfiniteTableComponent = React32.memo(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] = (0, import_react45.useState)(() => {
+    return getImperativeApi(getState, getComputed, getDataSourceState, actions);
+  });
   const {
     domRef,
     scrollerDOMRef,
@@ -9175,18 +9734,38 @@ var InfiniteTableComponent = React30.memo(function InfiniteTableComponent2() {
     components,
     scrollStopDelay,
     brain,
-    headerBrain
+    headerBrain,
+    renderer,
+    keyboardNavigation,
+    activeRowIndex,
+    activeCellIndex,
+    onRenderUpdater
   } = componentState;
+  (0, import_react45.useEffect)(() => {
+    if (activeRowIndex != null) {
+      imperativeApi.scrollRowIntoView(activeRowIndex, {
+        offset: 30
+      });
+    }
+  }, [activeRowIndex]);
+  (0, import_react45.useEffect)(() => {
+    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
   });
-  React30.useEffect(() => {
+  React32.useEffect(() => {
     const dataSourceState = getDataSourceState();
     const onChange = debounce((renderRange) => {
       dataSourceState.notifyRenderRangeChange({
@@ -9199,35 +9778,52 @@ var InfiniteTableComponent = React30.memo(function InfiniteTableComponent2() {
   const licenseValid = useLicense(licenseKey);
   const domProps = useDOMProps(componentState.domProps);
   const LoadMaskCmp = (_a = components == null ? void 0 : components.LoadMask) != null ? _a : LoadMask;
-  React30.useEffect(() => {
+  React32.useEffect(() => {
     brain.setScrollStopDelay(scrollStopDelay);
     dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
   }, [scrollStopDelay]);
   useAutoSizeColumns();
-  return /* @__PURE__ */ React30.createElement("div", __spreadValues({
+  const onKeyDown = (0, import_react45.useCallback)((event) => {
+    if (handleKeyboardNavigation({
+      getState,
+      actions,
+      getDataSourceState,
+      getComputed,
+      key: event.key,
+      shiftKey: !!event.shiftKey
+    })) {
+      event.preventDefault();
+    }
+  }, []);
+  return /* @__PURE__ */ React32.createElement("div", __spreadValues({
+    onKeyDown,
     ref: domRef
-  }, domProps), header ? /* @__PURE__ */ React30.createElement(TableHeaderWrapper, {
+  }, domProps), header ? /* @__PURE__ */ React32.createElement(TableHeaderWrapper, {
     brain: headerBrain,
     scrollbars
-  }) : null, /* @__PURE__ */ React30.createElement(InfiniteTableBody, null, /* @__PURE__ */ React30.createElement(HeadlessTable, {
+  }) : null, /* @__PURE__ */ React32.createElement(InfiniteTableBody, null, /* @__PURE__ */ React32.createElement(HeadlessTable, {
     tabIndex: 0,
+    activeRowIndex: componentState.ready && keyboardNavigation === "row" ? activeRowIndex : null,
+    activeCellIndex: componentState.ready && keyboardNavigation === "cell" ? activeCellIndex : null,
     scrollStopDelay,
+    renderer,
+    onRenderUpdater,
     brain,
     renderCell,
     cellHoverClassNames: HOVERED_CLASS_NAMES,
     scrollerDOMRef
-  }), /* @__PURE__ */ React30.createElement(LoadMaskCmp, {
+  }), /* @__PURE__ */ React32.createElement(LoadMaskCmp, {
     visible: loading
-  }, loadingText)), /* @__PURE__ */ React30.createElement("div", {
+  }, loadingText)), /* @__PURE__ */ React32.createElement("div", {
     ref: portalDOMRef,
     className: join(`${rootClassName2}Portal`, zIndex[1e3], position.absolute, top[0], left[0])
-  }), rowHeightCSSVar ? /* @__PURE__ */ React30.createElement(CSSVariableWatch, {
+  }), rowHeightCSSVar ? /* @__PURE__ */ React32.createElement(CSSVariableWatch, {
     varName: rowHeightCSSVar,
     onChange: onRowHeightCSSVarChange
-  }) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ React30.createElement(CSSVariableWatch, {
+  }) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ React32.createElement(CSSVariableWatch, {
     varName: columnHeaderHeightCSSVar,
     onChange: onColumnHeaderHeightCSSVarChange
-  }) : null, /* @__PURE__ */ React30.createElement(InfiniteTableFooter, null), licenseValid ? null : /* @__PURE__ */ React30.createElement(InfiniteTableLicenseFooter, null));
+  }) : null, /* @__PURE__ */ React32.createElement(InfiniteTableFooter, null), licenseValid ? null : /* @__PURE__ */ React32.createElement(InfiniteTableLicenseFooter, null));
 });
 function InfiniteTableContextProvider() {
   const { componentActions, componentState } = useComponentState();
@@ -9255,25 +9851,25 @@ function InfiniteTableContextProvider() {
     bodySize.width = (_b = (_a = scrollerDOMRef.current) == null ? void 0 : _a.scrollWidth) != null ? _b : bodySize.width;
     componentActions.bodySize = bodySize;
   }, { earlyAttach: true });
-  React30.useEffect(() => {
+  React32.useEffect(() => {
     return () => {
       componentState.onRowHeightCSSVarChange.destroy();
       componentState.onColumnHeaderHeightCSSVarChange.destroy();
     };
   }, []);
-  React30.useEffect(() => {
+  React32.useEffect(() => {
     if (scrollerDOMRef.current) {
       scrollerDOMRef.current.scrollTop = 0;
     }
   }, [scrollTopKey, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
-  return /* @__PURE__ */ React30.createElement(TableContext2.Provider, {
+  return /* @__PURE__ */ React32.createElement(TableContext2.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ React30.createElement(InfiniteTableComponent, null));
+  }, /* @__PURE__ */ React32.createElement(InfiniteTableComponent, null));
 }
 function InfiniteTable(props) {
-  const table = /* @__PURE__ */ React30.createElement(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ React30.createElement(InfiniteTableContextProvider, null));
-  return /* @__PURE__ */ React30.createElement(React30.StrictMode, null, table);
+  const table = /* @__PURE__ */ React32.createElement(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ React32.createElement(InfiniteTableContextProvider, null));
+  return /* @__PURE__ */ React32.createElement(React32.StrictMode, null, table);
 }
 InfiniteTable.defaultProps = {
   rowHeight: 40,