@infinite-table/infinite-react 0.3.1 → 0.3.4

package/index.esm.js

@@ -636,10 +636,11 @@ function debounce(fn, { wait }) {
 // src/components/InfiniteTable/index.tsx
 import {
   StrictMode,
-  createElement as createElement22,
-  memo as memo9,
-  useEffect as useEffect23
+  createElement as createElement26,
+  memo as memo11,
+  useEffect as useEffect26
 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect27, useState as useState15 } from "react";
 
 // src/utils/join.ts
 var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
@@ -865,13 +866,13 @@ function useDataSourceContextValue() {
 
 // src/components/HeadlessTable/index.tsx
 import {
-  createElement as createElement6
+  createElement as createElement8
 } from "react";
 import {
-  useCallback as useCallback3,
-  useEffect as useEffect5,
-  useRef as useRef5,
-  useState as useState2
+  useCallback as useCallback4,
+  useEffect as useEffect7,
+  useRef as useRef7,
+  useState as useState5
 } from "react";
 
 // src/components/VirtualList/SpacePlaceholder.tsx
@@ -2520,6 +2521,171 @@ var ReactHeadlessTableRenderer = class extends Logger {
     this.items = [];
     this.currentHoveredRow = -1;
     this.hoverRowUpdatesInProgress = new Map();
+    this.getFullyVisibleRowsRange = () => {
+      let {
+        start: [startRow],
+        end: [endRow]
+      } = this.brain.getRenderRange();
+      while (!this.isRowFullyVisible(startRow)) {
+        startRow++;
+        if (startRow === endRow) {
+          return null;
+        }
+      }
+      while (!this.isRowFullyVisible(endRow)) {
+        endRow--;
+        if (endRow === startRow) {
+          return null;
+        }
+      }
+      return { start: startRow, end: endRow };
+    };
+    this.getScrollPositionForScrollRowIntoView = (rowIndex, config = { offset: 0 }) => {
+      const { brain } = this;
+      const scrollPosition = brain.getScrollPosition();
+      let { scrollAdjustPosition, offset = 0 } = config;
+      if (this.isRowFullyVisible(rowIndex) && !scrollAdjustPosition) {
+        return scrollPosition;
+      }
+      const rowOffset = brain.getItemOffsetFor(rowIndex, "vertical");
+      const rowHeight = brain.getItemSize(rowIndex, "vertical");
+      const top2 = scrollPosition.scrollTop;
+      const availableSize = brain.getAvailableSize();
+      const bottom = top2 + availableSize.height;
+      if (!scrollAdjustPosition) {
+        scrollAdjustPosition = rowOffset > bottom ? "end" : rowOffset < top2 ? "start" : "end";
+      }
+      let scrollTop = scrollPosition.scrollTop;
+      if (scrollAdjustPosition === "center") {
+        scrollTop = rowOffset - Math.floor(brain.getAvailableSize().height / 2);
+      } else if (scrollAdjustPosition === "start") {
+        offset = -offset;
+        scrollTop += rowOffset - top2 + offset;
+      } else {
+        offset += rowHeight;
+        scrollTop += rowOffset - bottom + offset;
+      }
+      return __spreadProps(__spreadValues({}, scrollPosition), {
+        scrollTop
+      });
+    };
+    this.getScrollPositionForScrollColumnIntoView = (colIndex, config = { offset: 0 }) => {
+      const { brain } = this;
+      const scrollPosition = brain.getScrollPosition();
+      let { scrollAdjustPosition, offset = 0 } = config;
+      if (this.isColumnFullyVisible(colIndex) && !scrollAdjustPosition) {
+        return scrollPosition;
+      }
+      const rowOffset = brain.getItemOffsetFor(colIndex, "horizontal");
+      const colWidth = brain.getItemSize(colIndex, "horizontal");
+      const left2 = scrollPosition.scrollLeft;
+      const availableSize = brain.getAvailableSize();
+      const right = left2 + availableSize.width;
+      if (!scrollAdjustPosition) {
+        scrollAdjustPosition = rowOffset > right ? "end" : rowOffset < left2 ? "start" : "end";
+      }
+      let scrollLeft = scrollPosition.scrollLeft;
+      if (scrollAdjustPosition === "center") {
+        scrollLeft = rowOffset - Math.floor(brain.getAvailableSize().width / 2);
+      } else if (scrollAdjustPosition === "start") {
+        offset = -offset;
+        scrollLeft += rowOffset - left2 + offset;
+      } else {
+        offset += colWidth;
+        scrollLeft += rowOffset - right + offset;
+      }
+      return __spreadProps(__spreadValues({}, scrollPosition), {
+        scrollLeft
+      });
+    };
+    this.getScrollPositionForScrollCellIntoView = (rowIndex, colIndex, config = { offsetLeft: 0, offsetTop: 0 }) => {
+      const { scrollLeft } = this.getScrollPositionForScrollColumnIntoView(colIndex, {
+        scrollAdjustPosition: config.colScrollAdjustPosition || config.scrollAdjustPosition,
+        offset: config.offsetLeft
+      });
+      const { scrollTop } = this.getScrollPositionForScrollRowIntoView(rowIndex, {
+        scrollAdjustPosition: config.rowScrollAdjustPosition || config.scrollAdjustPosition,
+        offset: config.offsetTop
+      });
+      return { scrollLeft, scrollTop };
+    };
+    this.isRowFullyVisible = (rowIndex, offsetMargin = 2) => {
+      return this.isRowVisible(rowIndex, this.brain.getRowHeight(rowIndex) - offsetMargin);
+    };
+    this.isRowVisible = (rowIndex, offsetMargin = 10) => {
+      if (!this.isRowRendered(rowIndex)) {
+        return false;
+      }
+      const { brain } = this;
+      const {
+        start: [startRow],
+        end: [endRow]
+      } = this.brain.getRenderRange();
+      const midRow = Math.floor((startRow + endRow) / 2);
+      if (rowIndex < startRow) {
+        return false;
+      }
+      if (rowIndex >= endRow) {
+        return false;
+      }
+      if (rowIndex >= midRow) {
+        const lastVisibleRow = brain.getItemAt(brain.getAvailableSize().height + brain.getScrollPosition().scrollTop - offsetMargin, "vertical");
+        return rowIndex <= lastVisibleRow;
+      }
+      if (rowIndex < midRow) {
+        const firstVisibleRow = brain.getItemAt(brain.getScrollPosition().scrollTop + offsetMargin, "vertical");
+        return rowIndex >= firstVisibleRow;
+      }
+      return true;
+    };
+    this.isRowRendered = (rowIndex) => {
+      const elements = this.mappedCells.getElementsForRowIndex(rowIndex);
+      return elements.length > 0;
+    };
+    this.isCellVisible = (rowIndex, colIndex) => {
+      return this.isRowVisible(rowIndex) && this.isColumnVisible(colIndex);
+    };
+    this.isCellFullyVisible = (rowIndex, colIndex) => {
+      return this.isRowFullyVisible(rowIndex) && this.isColumnVisible(colIndex);
+    };
+    this.isColumnFullyVisible = (colIndex, offsetMargin = 2) => {
+      return this.isColumnVisible(colIndex, this.brain.getColWidth(colIndex) - offsetMargin);
+    };
+    this.isColumnVisible = (colIndex, offsetMargin = 10) => {
+      if (!this.isColumnRendered(colIndex)) {
+        return false;
+      }
+      const { brain } = this;
+      const {
+        start: [_, startCol],
+        end: [__, endCol]
+      } = brain.getRenderRange();
+      const midCol = Math.floor((startCol + endCol) / 2);
+      if (colIndex < startCol) {
+        return false;
+      }
+      if (colIndex >= endCol) {
+        return false;
+      }
+      if (colIndex >= midCol) {
+        const lastVisibleCol = brain.getItemAt(brain.getAvailableSize().width + brain.getScrollPosition().scrollLeft - offsetMargin, "horizontal");
+        return colIndex <= lastVisibleCol;
+      }
+      if (colIndex < midCol) {
+        const firstVisibleCol = brain.getItemAt(brain.getScrollPosition().scrollLeft + offsetMargin, "horizontal");
+        return colIndex >= firstVisibleCol;
+      }
+      return true;
+    };
+    this.isCellRendered = (rowIndex, colIndex) => {
+      return this.isRowRendered(rowIndex) && this.isColumnRendered(colIndex);
+    };
+    this.isColumnRendered = (colIndex) => {
+      const {
+        start: [startRow]
+      } = this.brain.getRenderRange();
+      return this.mappedCells.getRenderedNodeForCell(startRow, colIndex) !== null;
+    };
     this.getExtraSpanCellsForRange = (range) => {
       const { start, end } = range;
       const [startRow, startCol] = start;
@@ -2782,6 +2948,9 @@ var ReactHeadlessTableRenderer = class extends Logger {
       });
     };
     this.onMouseLeave = (rowIndex) => {
+      if (this.currentHoveredRow != -1 && this.currentHoveredRow === rowIndex) {
+        this.removeHoverClass(rowIndex);
+      }
       this.currentHoveredRow = -1;
       if (this.scrolling) {
         return;
@@ -2820,7 +2989,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
         this.hoverRowUpdatesInProgress.delete(rowIndex);
       });
     };
-    this.updateElementPosition = (elementIndex) => {
+    this.updateElementPosition = (elementIndex, options) => {
       const itemElement = this.itemDOMElements[elementIndex];
       const cell = this.mappedCells.getRenderedCellAtElement(elementIndex);
       if (cell == null) {
@@ -2845,7 +3014,8 @@ var ReactHeadlessTableRenderer = class extends Logger {
           itemElement.style.transform = `translate3d(${x}px, ${y}px, 0)`;
           itemElement.style.willChange = "transform";
           itemElement.style.backfaceVisibility = "hidden";
-          itemElement.style.zIndex = "auto";
+          const hidden = options ? options.hidden : !!this.isCellCovered(rowIndex, colIndex);
+          itemElement.style.zIndex = hidden ? "-1" : "auto";
         } else {
           itemElement.style.display = "";
           itemElement.style.left = `${x}px`;
@@ -2855,9 +3025,6 @@ var ReactHeadlessTableRenderer = class extends Logger {
     };
     this.onScrollStart = () => {
       this.scrolling = true;
-      if (this.currentHoveredRow != -1) {
-        this.removeHoverClass(this.currentHoveredRow);
-      }
     };
     this.onScrollStop = () => {
       this.scrolling = false;
@@ -3040,6 +3207,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
     const heightWithRowspan = rowspan === 1 ? height : this.brain.getRowHeightWithSpan(rowIndex, colIndex, rowspan);
     const widthWithColspan = colspan === 1 ? width : this.brain.getColWidthWithSpan(rowIndex, colIndex, colspan);
     const { row: rowFixed, col: colFixed } = this.isCellFixed(rowIndex, colIndex);
+    const hidden = !!covered;
     const renderedNode = renderCell({
       rowIndex,
       colIndex,
@@ -3049,7 +3217,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       colspan,
       rowFixed,
       colFixed,
-      hidden: !!covered,
+      hidden,
       heightWithRowspan,
       widthWithColspan,
       onMouseEnter: this.onMouseEnter.bind(null, rowIndex),
@@ -3066,7 +3234,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       this.debug(`Render cell ${rowIndex},${colIndex} at element ${elementIndex}`);
     }
     itemUpdater(renderedNode);
-    this.updateElementPosition(elementIndex);
+    this.updateElementPosition(elementIndex, { hidden, rowspan, colspan });
     return;
   }
   reset() {
@@ -3094,8 +3262,11 @@ function createRenderer(brain) {
 function RawTableFn(props) {
   const { brain, renderCell } = props;
   const { renderer, onRenderUpdater } = useMemo2(() => {
-    return createRenderer(brain);
-  }, [brain]);
+    return props.onRenderUpdater && props.renderer ? {
+      renderer: props.renderer,
+      onRenderUpdater: props.onRenderUpdater
+    } : createRenderer(brain);
+  }, [brain, props.onRenderUpdater, props.renderer]);
   useEffect4(() => {
     renderer.cellHoverClassNames = props.cellHoverClassNames || [];
   }, [renderer, props.cellHoverClassNames]);
@@ -3129,6 +3300,150 @@ function RawTableFn(props) {
 }
 var RawTable = memo3(RawTableFn);
 
+// src/components/InfiniteTable/components/ActiveRowIndicator.tsx
+import {
+  createElement as createElement6,
+  memo as memo4
+} from "react";
+import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect3, useRef as useRef5, useState as useState3 } from "react";
+
+// src/components/hooks/useRerender.ts
+import { useCallback as useCallback3, useState as useState2 } from "react";
+var useRerender = () => {
+  const [state, setState] = useState2(0);
+  return [
+    state,
+    useCallback3(() => {
+      setState((state2) => state2 + 1);
+    }, [setState])
+  ];
+};
+
+// src/components/InfiniteTable/internalProps.ts
+var rootClassName2 = "Infinite";
+var internalProps = {
+  rootClassName: rootClassName2
+};
+
+// src/components/InfiniteTable/components/ActiveRowIndicator.css.ts
+var ActiveRowIndicatorCls = { visible: "j26lrx1 j26lrx0 _16lm1iwe _16lm1iw3 _16lm1iwt _16lm1iwu _16lm1iww", hidden: "j26lrx2 j26lrx0 _16lm1iwe _16lm1iw3 _16lm1iwt _16lm1iwu _16lm1iww" };
+
+// src/components/InfiniteTable/components/ActiveRowIndicator.tsx
+var { rootClassName: rootClassName3 } = internalProps;
+var baseCls = `${rootClassName3}-ActiveRowIndicator`;
+var ActiveRowIndicatorFn = (props) => {
+  const { brain } = props;
+  const [state, setState] = useState3({
+    top: 0,
+    rowHeight: 0
+  });
+  const domRef = useRef5(null);
+  const stateRef = useRef5(state);
+  const active = props.activeRowIndex != null && brain.getRowCount() > props.activeRowIndex;
+  const [rerenderId, rerender] = useRerender();
+  useLayoutEffect3(() => {
+    if (props.activeRowIndex == null) {
+      return;
+    }
+    setState(stateRef.current = {
+      top: brain.getItemOffsetFor(props.activeRowIndex, "vertical"),
+      rowHeight: brain.getRowHeight(props.activeRowIndex)
+    });
+  }, [props.activeRowIndex, rerenderId]);
+  useEffect5(() => {
+    const removeOnScroll = brain.onScroll((scrollPos) => {
+      const node = domRef.current;
+      const topOffset = stateRef.current.top;
+      node.style.transform = `translate3d(0px, ${-scrollPos.scrollTop + topOffset}px, 0px)`;
+    });
+    const removeOnRenderCountChange = brain.onRenderCountChange(rerender);
+    return () => {
+      removeOnRenderCountChange();
+      removeOnScroll();
+    };
+  }, [brain]);
+  return /* @__PURE__ */ createElement6("div", {
+    ref: domRef,
+    "data-name": "active-row-indicator",
+    className: `${baseCls} ${active ? ActiveRowIndicatorCls.visible : ActiveRowIndicatorCls.hidden}`,
+    style: active ? {
+      transform: `translate3d(0px, ${-brain.getScrollPosition().scrollTop + state.top}px,0)`,
+      height: state.rowHeight
+    } : void 0
+  });
+};
+var ActiveRowIndicator = memo4(ActiveRowIndicatorFn);
+
+// src/components/InfiniteTable/components/ActiveCellIndicator.tsx
+import {
+  createElement as createElement7,
+  memo as memo5
+} from "react";
+import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect4, useRef as useRef6, useState as useState4 } from "react";
+
+// src/components/InfiniteTable/components/ActiveCellIndicator.css.ts
+var ActiveCellIndicatorCls = { visible: "nxbq1c1 nxbq1c0 _16lm1iwe _16lm1iw3 _16lm1iww _16lm1iwu", hidden: "nxbq1c2 nxbq1c0 _16lm1iwe _16lm1iw3 _16lm1iww _16lm1iwu" };
+
+// src/components/InfiniteTable/components/ActiveCellIndicator.tsx
+var { rootClassName: rootClassName4 } = internalProps;
+var baseCls2 = `${rootClassName4}-ActiveCellIndicator`;
+var ActiveCellIndicatorFn = (props) => {
+  const { brain } = props;
+  const [rerenderId, rerender] = useRerender();
+  const [state, setState] = useState4({
+    top: 0,
+    rowHeight: 0,
+    colWidth: 0,
+    left: 0
+  });
+  const domRef = useRef6(null);
+  const stateRef = useRef6(state);
+  const active = props.activeCellIndex != null && brain.getRowCount() > props.activeCellIndex[0];
+  useLayoutEffect4(() => {
+    if (props.activeCellIndex == null) {
+      return;
+    }
+    const rowIndex = props.activeCellIndex[0];
+    setState(stateRef.current = {
+      top: brain.getItemOffsetFor(rowIndex, "vertical"),
+      rowHeight: brain.getRowHeight(rowIndex),
+      left: brain.getItemOffsetFor(props.activeCellIndex[1], "horizontal"),
+      colWidth: brain.getColWidth(props.activeCellIndex[1])
+    });
+  }, [props.activeCellIndex, rerenderId]);
+  useEffect6(() => {
+    const removeOnSCroll = brain.onScroll((scrollPos) => {
+      const node = domRef.current;
+      const topOffset = stateRef.current.top;
+      const leftOffset = stateRef.current.left;
+      node.style.transform = `translate3d(${-scrollPos.scrollLeft + leftOffset}px, ${-scrollPos.scrollTop + topOffset}px, 0px)`;
+    });
+    const removeOnRenderCountChange = brain.onRenderCountChange(() => {
+      rerender();
+    });
+    const removeOnAvailableSizeChange = brain.onAvailableSizeChange(() => {
+      rerender();
+    });
+    return () => {
+      removeOnAvailableSizeChange();
+      removeOnRenderCountChange();
+      removeOnSCroll();
+    };
+  }, [brain]);
+  const scrollPosition = brain.getScrollPosition();
+  return /* @__PURE__ */ createElement7("div", {
+    ref: domRef,
+    "data-name": "active-cell-indicator",
+    className: `${baseCls2} ${active ? ActiveCellIndicatorCls.visible : ActiveCellIndicatorCls.hidden}`,
+    style: active ? {
+      transform: `translate3d(${-scrollPosition.scrollLeft + state.left}px, ${-scrollPosition.scrollTop + state.top}px,0)`,
+      width: state.colWidth,
+      height: state.rowHeight
+    } : void 0
+  });
+};
+var ActiveCellIndicator = memo5(ActiveCellIndicatorFn);
+
 // src/components/HeadlessTable/index.tsx
 function useMatrixBrain(brain, brainOptions, fixedCellsInfo) {
   if (fixedCellsInfo && (fixedCellsInfo.fixedColsStart || fixedCellsInfo.fixedColsEnd || fixedCellsInfo.fixedRowsStart || fixedCellsInfo.fixedRowsEnd)) {
@@ -3156,25 +3471,33 @@ function HeadlessTable(props) {
     scrollerDOMRef,
     scrollStopDelay,
     renderCell,
-    cellHoverClassNames
+    cellHoverClassNames,
+    renderer,
+    activeRowIndex,
+    activeCellIndex,
+    onRenderUpdater
   } = _a, domProps = __objRest(_a, [
     "brain",
     "scrollerDOMRef",
     "scrollStopDelay",
     "renderCell",
-    "cellHoverClassNames"
+    "cellHoverClassNames",
+    "renderer",
+    "activeRowIndex",
+    "activeCellIndex",
+    "onRenderUpdater"
   ]);
-  const domRef = useRef5(null);
-  const [scrollSize, setTotalScrollSize] = useState2({
+  const domRef = useRef7(null);
+  const [scrollSize, setTotalScrollSize] = useState5({
     width: 0,
     height: 0
   });
-  useEffect5(() => {
+  useEffect7(() => {
     if (scrollStopDelay != null) {
       brain.setScrollStopDelay(scrollStopDelay);
     }
   }, [scrollStopDelay, brain]);
-  useEffect5(() => {
+  useEffect7(() => {
     var _a2;
     const node = (_a2 = domRef.current) == null ? void 0 : _a2.parentNode;
     if (!node) {
@@ -3190,31 +3513,39 @@ function HeadlessTable(props) {
     const remove = setupResizeObserver(node, onResize);
     return remove;
   }, []);
-  const onContainerScroll = useCallback3((scrollPos) => {
+  const onContainerScroll = useCallback4((scrollPos) => {
     brain.setScrollPosition(scrollPos, (scrollPos2) => {
       domRef.current.style.transform = `translate3d(${-scrollPos2.scrollLeft}px, ${-scrollPos2.scrollTop}px, 0px)`;
     });
   }, [brain]);
-  useEffect5(() => {
+  useEffect7(() => {
     const removeOnRenderCount = brain.onRenderCountChange(() => {
       setTotalScrollSize(brain.getTotalSize());
     });
     setTotalScrollSize(brain.getTotalSize());
     return removeOnRenderCount;
   }, [brain]);
-  return /* @__PURE__ */ createElement6(VirtualScrollContainer, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ createElement8(VirtualScrollContainer, __spreadProps(__spreadValues({
     onContainerScroll
   }, domProps), {
     ref: scrollerDOMRef
-  }), /* @__PURE__ */ createElement6("div", {
+  }), /* @__PURE__ */ createElement8("div", {
     ref: domRef,
     className: scrollTransformTargetCls,
     "data-name": "scroll-transform-target"
-  }, /* @__PURE__ */ createElement6(RawTable, {
+  }, /* @__PURE__ */ createElement8(RawTable, {
+    renderer,
+    onRenderUpdater,
     renderCell,
     brain,
     cellHoverClassNames
-  })), /* @__PURE__ */ createElement6(SpacePlaceholder, {
+  })), /* @__PURE__ */ createElement8(ActiveRowIndicator, {
+    brain,
+    activeRowIndex
+  }), /* @__PURE__ */ createElement8(ActiveCellIndicator, {
+    brain,
+    activeCellIndex
+  }), /* @__PURE__ */ createElement8(SpacePlaceholder, {
     width: scrollSize.width,
     height: scrollSize.height
   }));
@@ -3222,17 +3553,17 @@ function HeadlessTable(props) {
 
 // src/components/hooks/useComponentState/index.tsx
 import {
-  createElement as createElement7,
-  memo as memo4,
+  createElement as createElement9,
+  memo as memo6,
   useContext as useContext2
 } from "react";
 import {
   useReducer,
   createContext as createContext2,
   useMemo as useMemo3,
-  useEffect as useEffect6,
-  useState as useState3,
-  useRef as useRef8
+  useEffect as useEffect8,
+  useState as useState6,
+  useRef as useRef10
 } from "react";
 
 // src/utils/proxyFnCall.ts
@@ -3276,18 +3607,18 @@ function isControlled(propName, props) {
 }
 
 // src/components/hooks/useLatest.tsx
-import { useCallback as useCallback4, useRef as useRef6 } from "react";
+import { useCallback as useCallback5, useRef as useRef8 } from "react";
 function useLatest(value) {
-  const ref = useRef6(value);
+  const ref = useRef8(value);
   ref.current = value;
-  return useCallback4(() => ref.current, []);
+  return useCallback5(() => ref.current, []);
 }
 
 // src/components/hooks/usePrevious.ts
-import { useRef as useRef7, useLayoutEffect as useLayoutEffect3 } from "react";
+import { useRef as useRef9, useLayoutEffect as useLayoutEffect5 } from "react";
 var usePrevious = (value, initialValue) => {
-  const ref = useRef7(initialValue === void 0 ? value : initialValue);
-  useLayoutEffect3(() => {
+  const ref = useRef9(initialValue === void 0 ? value : initialValue);
+  useLayoutEffect5(() => {
     ref.current = value;
   });
   return ref.current;
@@ -3367,16 +3698,16 @@ function forwardProps(propsToForward, props) {
   return mappedState;
 }
 function getComponentStateRoot(config) {
-  return memo4(function ComponentStateRoot(props) {
+  return memo6(function ComponentStateRoot(props) {
     var _a, _b;
-    const [initialSetupState] = useState3(() => {
+    const [initialSetupState] = useState6(() => {
       return config.initSetupState ? config.initSetupState() : {};
     });
-    const propsToStateSetRef = useRef8(new Set());
+    const propsToStateSetRef = useRef10(new Set());
     const propsToForward = useMemo3(() => config.forwardProps ? config.forwardProps(initialSetupState) : {}, [initialSetupState]);
     const parentState = (_b = (_a = config.getParentState) == null ? void 0 : _a.call(config)) != null ? _b : null;
     const getParentState = useLatest(parentState);
-    const [wholeState] = useState3(() => {
+    const [wholeState] = useState6(() => {
       let mappedState = {};
       if (propsToForward) {
         mappedState = forwardProps(propsToForward, props);
@@ -3461,7 +3792,7 @@ function getComponentStateRoot(config) {
       getComponentState
     }), [state, actions, getComponentState]);
     const prevProps = usePrevious(props);
-    useEffect6(() => {
+    useEffect8(() => {
       const currentProps = props;
       const newMappedState = {};
       let newMappedStateCount = 0;
@@ -3517,7 +3848,7 @@ function getComponentStateRoot(config) {
         }
       }
     });
-    return /* @__PURE__ */ createElement7(Context.Provider, {
+    return /* @__PURE__ */ createElement9(Context.Provider, {
       value: contextValue
     }, props.children);
   });
@@ -3529,62 +3860,174 @@ function useComponentState() {
 
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
 import {
-  createElement as createElement8,
+  createElement as createElement10,
   forwardRef as forwardRef2
 } from "react";
 
-// src/components/InfiniteTable/internalProps.ts
-var rootClassName2 = "Infinite";
-var internalProps = {
-  rootClassName: rootClassName2
-};
-
 // src/components/InfiniteTable/hooks/useInternalProps.ts
 var useInternalProps = () => {
   return internalProps;
 };
 
 // src/components/InfiniteTable/utilities.css.ts
-var alignItems = { center: "_16lm1iw13", stretch: "_16lm1iw14" };
-var cssEllipsisClassName = "_16lm1iw1c _16lm1iw1d _16lm1iw18";
+var alignItems = { center: "_16lm1iw14", stretch: "_16lm1iw15" };
+var cssEllipsisClassName = "_16lm1iw1d _16lm1iw1e _16lm1iw19";
 var cursor = { pointer: "_16lm1iwd" };
-var display = { flex: "_16lm1iwl", block: "_16lm1iwm", inlineBlock: "_16lm1iwn" };
-var flex = { "1": "_16lm1iwe", none: "_16lm1iwf" };
-var justifyContent = { center: "_16lm1iw15", start: "_16lm1iw16", end: "_16lm1iw17" };
-var left = { "0": "_16lm1iwv", "100%": "_16lm1iww" };
-var overflow = { hidden: "_16lm1iw18", auto: "_16lm1iw19", visible: "_16lm1iw1a" };
+var display = { flex: "_16lm1iwm", block: "_16lm1iwn", inlineBlock: "_16lm1iwo" };
+var flex = { "1": "_16lm1iwf", none: "_16lm1iwg" };
+var flexFlow = { column: "_16lm1iw12", row: "_16lm1iw13" };
+var justifyContent = { center: "_16lm1iw16", start: "_16lm1iw17", end: "_16lm1iw18" };
+var left = { "0": "_16lm1iww", "100%": "_16lm1iwx" };
+var overflow = { hidden: "_16lm1iw19", auto: "_16lm1iw1a", visible: "_16lm1iw1b" };
 var position = { relative: "_16lm1iw1", absolute: "_16lm1iw2", sticky: "_16lm1iw3", fixed: "_16lm1iw4" };
-var top = { "0": "_16lm1iwt", "100%": "_16lm1iwu" };
+var top = { "0": "_16lm1iwu", "100%": "_16lm1iwv" };
 var transformTranslateZero = "_16lm1iwa";
-var userSelect = { none: "_16lm1iwo" };
-var zIndex = { "1": "_16lm1iwg", "10": "_16lm1iwh", "1000": "_16lm1iwi", "10000": "_16lm1iwj", "100000": "_16lm1iwk" };
+var userSelect = { none: "_16lm1iwp" };
+var zIndex = { "1": "_16lm1iwh", "10": "_16lm1iwi", "1000": "_16lm1iwj", "10000": "_16lm1iwk", "100000": "_16lm1iwl" };
 
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
 var InfiniteTableBody = forwardRef2(function InfiniteTableBody2(props, ref) {
-  const { rootClassName: rootClassName8 } = useInternalProps();
-  return /* @__PURE__ */ createElement8("div", __spreadProps(__spreadValues({
+  const { rootClassName: rootClassName11 } = useInternalProps();
+  return /* @__PURE__ */ createElement10("div", __spreadProps(__spreadValues({
+    ref
+  }, props), {
+    className: join(`${rootClassName11}Body`, position.relative, flex["1"], transformTranslateZero, props.className)
+  }));
+});
+
+// src/components/InfiniteTable/components/InfiniteTableFooter/InfiniteTableFooter.tsx
+import {
+  createElement as createElement11,
+  forwardRef as forwardRef3
+} from "react";
+var InfiniteTableFooter = forwardRef3(function InfiniteTableFooter2(props, ref) {
+  const { rootClassName: rootClassName11 } = useInternalProps();
+  return /* @__PURE__ */ createElement11("div", __spreadProps(__spreadValues({
     ref
   }, props), {
-    className: join(`${rootClassName8}Body`, position.relative, flex["1"], transformTranslateZero, props.className)
+    className: join(`${rootClassName11}Footer`, position.relative, display.flex, flexFlow.row, props.className)
   }));
 });
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
 import {
+  Fragment as Fragment2,
   createContext as createContext4,
-  createElement as createElement11
+  createElement as createElement15,
+  useMemo as useMemo5
 } from "react";
+import { useCallback as useCallback7, useContext as useContext5, useEffect as useEffect11, useRef as useRef12 } from "react";
 import { createPortal } from "react-dom";
-import { useCallback as useCallback6, useContext as useContext5, useEffect as useEffect8, useRef as useRef10 } from "react";
 
-// src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
+// src/components/DataSource/defaultFilterTypes.ts
+function getFilterTypes() {
+  const result = {
+    string: {
+      label: "Text",
+      emptyValues: new Set([""]),
+      defaultOperator: "contains",
+      operators: [
+        {
+          name: "contains",
+          fn: ({ currentValue, filterValue, emptyValues }) => {
+            if (emptyValues.has(currentValue) || emptyValues.has(filterValue)) {
+              return true;
+            }
+            return typeof currentValue === "string" && typeof filterValue == "string" && currentValue.toLowerCase().includes(filterValue.toLowerCase());
+          }
+        },
+        {
+          name: "eq",
+          fn: ({ currentValue: value, filterValue, emptyValues }) => {
+            if (emptyValues.has(value) || emptyValues.has(filterValue)) {
+              return true;
+            }
+            return typeof value === "string" && value === filterValue;
+          }
+        }
+      ]
+    },
+    number: {
+      label: "Number",
+      emptyValues: new Set(["", null, void 0]),
+      defaultOperator: "eq",
+      operators: [
+        {
+          name: "eq",
+          fn: ({ currentValue, filterValue, emptyValues }) => {
+            if (emptyValues.has(currentValue) || emptyValues.has(filterValue)) {
+              return true;
+            }
+            return currentValue == filterValue;
+          }
+        },
+        {
+          name: "between",
+          fn: ({ currentValue, filterValue, emptyValues }) => {
+            if (emptyValues.has(currentValue) || emptyValues.has(filterValue)) {
+              return true;
+            }
+            const [min, max] = filterValue;
+            return currentValue >= min && currentValue <= max;
+          }
+        }
+      ]
+    }
+  };
+  return result;
+}
+var defaultFilterTypes = getFilterTypes();
+
+// src/components/InfiniteTable/hooks/useCellClassName.ts
+function useCellClassName(column, baseClasses, variants, extraFlags) {
+  const result = [...baseClasses];
+  const variantObject = {
+    filtered: column.computedFiltered,
+    first: column.computedFirst,
+    last: column.computedLast,
+    groupByField: !!column.groupByField,
+    firstInCategory: column.computedFirstInCategory,
+    lastInCategory: column.computedLastInCategory,
+    pinned: column.computedPinned || false,
+    rowActive: extraFlags.rowActive,
+    dragging: extraFlags.dragging,
+    zebra: extraFlags.zebra
+  };
+  const theVariant = variants(variantObject);
+  result.push(theVariant);
+  if (column.computedFirst) {
+    result.push(...baseClasses.map((c) => `${c}--first`));
+  }
+  if (column.groupByField) {
+    result.push(...baseClasses.map((c) => `${c}--group-column`));
+  }
+  if (column.computedLast) {
+    result.push(...baseClasses.map((c) => `${c}--last`));
+  }
+  if (column.computedFirstInCategory) {
+    result.push(...baseClasses.map((c) => `${c}--first-in-category`));
+  }
+  if (column.computedLastInCategory) {
+    result.push(...baseClasses.map((c) => `${c}--last-in-category`));
+  }
+  if (column.computedPinned) {
+    result.push(...baseClasses.map((c) => `${c}--pinned-${column.computedPinned}`));
+  } else {
+    result.push(...baseClasses.map((c) => `${c}--unpinned`));
+  }
+  return result.filter(Boolean).join(" ");
+}
+
+// src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
+var import_binary_search2 = __toModule(require_binary_search());
 import {
-  Fragment,
-  createElement as createElement9,
-  memo as memo5
+  useCallback as useCallback6,
+  useMemo as useMemo4,
+  useRef as useRef11,
+  useState as useState7
 } from "react";
 
-// src/components/InfiniteTable/hooks/useInfiniteTableState.ts
+// src/components/InfiniteTable/hooks/useInfiniteTable.ts
 import { useContext as useContext3 } from "react";
 
 // src/components/InfiniteTable/InfiniteTableContext.ts
@@ -3597,119 +4040,28 @@ function getInfiniteTableContext() {
   return TableContext = createContext3(null);
 }
 
-// src/components/InfiniteTable/hooks/useInfiniteTableState.ts
-var useInfiniteTableState = () => {
+// src/components/InfiniteTable/hooks/useInfiniteTable.ts
+var useInfiniteTable = () => {
   const TableContext2 = getInfiniteTableContext();
-  const { componentState } = useContext3(TableContext2);
-  return componentState;
+  return useContext3(TableContext2);
 };
 
-// src/components/InfiniteTable/components/cell.css.ts
-var import_createRuntimeFn = __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_createRuntimeFn.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" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2aq"], [{ pinned: "end", firstInCategory: true }, "_1eexc2ar"]] });
-var columnAlignCellStyle = { center: "_1eexc2a0", start: "_1eexc2a1", end: "_1eexc2a2" };
-
-// src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
-var { rootClassName: rootClassName3 } = internalProps;
-var InfiniteTableCellClassName = `${rootClassName3}Cell`;
-var InfiniteTableCellContentClassName = `${rootClassName3}Cell_content`;
-function InfiniteTableCellFn(props) {
-  var _b, _c, _d, _e;
-  const _a = props, {
-    cssEllipsis = true,
-    virtualized = true,
-    skipColumnShifting = false,
-    offsetProperty = "left",
-    column,
-    domRef,
-    width,
-    afterChildren,
-    beforeChildren,
-    offset,
-    cellType,
-    cssPosition: _cssPosition,
-    renderChildren
-  } = _a, domProps = __objRest(_a, [
-    "cssEllipsis",
-    "virtualized",
-    "skipColumnShifting",
-    "offsetProperty",
-    "column",
-    "domRef",
-    "width",
-    "afterChildren",
-    "beforeChildren",
-    "offset",
-    "cellType",
-    "cssPosition",
-    "renderChildren"
-  ]);
-  const children = renderChildren();
-  const { columnShifts } = useInfiniteTableState();
-  const shifting = !!columnShifts;
-  const style = __spreadValues({
-    width
-  }, domProps.style);
-  if (!skipColumnShifting && columnShifts && columnShifts[column.computedVisibleIndex]) {
-    const shiftLeft = columnShifts[column.computedVisibleIndex] + (offset != null ? offset : 0);
-    if (virtualized) {
-      style.left = shiftLeft;
-    } else {
-      style.transform = `translate3d(${shiftLeft}px, 0px, 0px)`;
-    }
-  }
-  const finalDOMProps = __spreadProps(__spreadValues({}, domProps), {
-    style,
-    "data-column-id": column.id,
-    className: join(domProps.className, columnAlignCellStyle[(_b = column.align) != null ? _b : "start"], justifyContent[(_c = column.align) != null ? _c : "start"], InfiniteTableCellClassName, ColumnCellCls, shifting ? `${InfiniteTableCellClassName}--shifting ${CellClsVariants.shifting}` : ""),
-    children: /* @__PURE__ */ createElement9(Fragment, null, beforeChildren, /* @__PURE__ */ createElement9("div", {
-      className: `${InfiniteTableCellContentClassName} ${cssEllipsis ? cssEllipsisClassName : overflow.hidden}`
-    }, children), afterChildren)
-  });
-  const RenderComponent = cellType === "body" ? (_d = column.components) == null ? void 0 : _d.ColumnCell : (_e = column.components) == null ? void 0 : _e.HeaderCell;
-  if (RenderComponent) {
-    return /* @__PURE__ */ createElement9(RenderComponent, __spreadValues({}, finalDOMProps));
-  }
-  return /* @__PURE__ */ createElement9("div", __spreadProps(__spreadValues({}, finalDOMProps), {
-    ref: domRef
-  }));
-}
-var InfiniteTableCell = memo5(InfiniteTableCellFn);
-
-// src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
-var import_binary_search2 = __toModule(require_binary_search());
-import {
-  useCallback as useCallback5,
-  useMemo as useMemo4,
-  useRef as useRef9,
-  useState as useState4
-} from "react";
-
-// src/components/InfiniteTable/hooks/useInfiniteTable.ts
-import { useContext as useContext4 } from "react";
-var useInfiniteTable = () => {
-  const TableContext2 = getInfiniteTableContext();
-  return useContext4(TableContext2);
-};
-
-// src/components/InfiniteTable/utils/moveXatY.ts
-var moveXatY = (arr, dragIndex, dropIndex) => {
-  arr = [...arr];
-  if (dragIndex === dropIndex || arr[dragIndex] === void 0 || arr[dropIndex] === void 0) {
-    return arr;
-  }
-  const dragItem = arr[dragIndex];
-  if (dropIndex < dragIndex) {
-    arr.splice(dragIndex, 1);
-    arr.splice(dropIndex, 0, dragItem);
-  } else {
-    arr.splice(dragIndex, 1);
-    arr.splice(dropIndex, 0, dragItem);
-  }
-  return arr;
-};
+// src/components/InfiniteTable/utils/moveXatY.ts
+var moveXatY = (arr, dragIndex, dropIndex) => {
+  arr = [...arr];
+  if (dragIndex === dropIndex || arr[dragIndex] === void 0 || arr[dropIndex] === void 0) {
+    return arr;
+  }
+  const dragItem = arr[dragIndex];
+  if (dropIndex < dragIndex) {
+    arr.splice(dragIndex, 1);
+    arr.splice(dropIndex, 0, dragItem);
+  } else {
+    arr.splice(dragIndex, 1);
+    arr.splice(dropIndex, 0, dragItem);
+  }
+  return arr;
+};
 
 // src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
 var getBreakPoints = (columns) => {
@@ -3726,13 +4078,13 @@ var useColumnPointerEvents = ({
   columns,
   computedRemainingSpace
 }) => {
-  const [draggingDiff, setDraggingDiff] = useState4(null);
-  const [proxyOffset, setProxyOffset] = useState4(null);
-  const breakpointsRef = useRef9([]);
-  const pointerMoveRef = useRef9(null);
-  const didDragRef = useRef9(false);
-  const initialClientPos = useRef9(null);
-  const currentDropIndexRef = useRef9(null);
+  const [draggingDiff, setDraggingDiff] = useState7(null);
+  const [proxyOffset, setProxyOffset] = useState7(null);
+  const breakpointsRef = useRef11([]);
+  const pointerMoveRef = useRef11(null);
+  const didDragRef = useRef11(false);
+  const initialClientPos = useRef11(null);
+  const currentDropIndexRef = useRef11(null);
   const dragging = draggingDiff != null;
   const { componentActions, computed } = useInfiniteTable();
   const { computedColumnOrder } = computed;
@@ -3745,8 +4097,8 @@ var useColumnPointerEvents = ({
       columnWidth: column.computedWidth
     };
   }, [columns, columnId, column]);
-  let cursorRef = useRef9("auto");
-  const onPointerDown = useCallback5((e) => {
+  let cursorRef = useRef11("auto");
+  const onPointerDown = useCallback6((e) => {
     const target = domRef.current;
     cursorRef.current = target.style.cursor;
     didDragRef.current = false;
@@ -3809,7 +4161,7 @@ var useColumnPointerEvents = ({
     target.addEventListener("pointermove", onPointerMove);
     target.setPointerCapture(e.pointerId);
   }, [columns, column, columnIndex, columnsArray, computedRemainingSpace]);
-  const onPointerUp = useCallback5((e) => {
+  const onPointerUp = useCallback6((e) => {
     const target = domRef.current;
     target.style.cursor = cursorRef.current;
     target.releasePointerCapture(e.pointerId);
@@ -3842,49 +4194,71 @@ var useColumnPointerEvents = ({
   };
 };
 
-// src/components/InfiniteTable/hooks/useCellClassName.ts
-function useCellClassName(column, baseClasses, variants, extraFlags) {
-  const result = [...baseClasses];
-  const variantObject = {
-    first: column.computedFirst,
-    last: column.computedLast,
-    groupByField: !!column.groupByField,
-    firstInCategory: column.computedFirstInCategory,
-    lastInCategory: column.computedLastInCategory,
-    pinned: column.computedPinned || false,
-    dragging: extraFlags.dragging,
-    zebra: extraFlags.zebra
+// src/components/InfiniteTable/utils/RenderHookComponent.tsx
+function RenderHookComponent(props) {
+  var _a;
+  return (_a = props.render(props.renderParam)) != null ? _a : null;
+}
+
+// src/components/InfiniteTable/components/FilterEditors.tsx
+import React16 from "react";
+function getFilterEditors() {
+  return {
+    string: StringFilterEditor,
+    number: NumberFilterEditor
   };
-  const theVariant = variants(variantObject);
-  result.push(theVariant);
-  if (column.computedFirst) {
-    result.push(...baseClasses.map((c) => `${c}--first`));
-  }
-  if (column.groupByField) {
-    result.push(...baseClasses.map((c) => `${c}--group-column`));
-  }
-  if (column.computedLast) {
-    result.push(...baseClasses.map((c) => `${c}--last`));
-  }
-  if (column.computedFirstInCategory) {
-    result.push(...baseClasses.map((c) => `${c}--first-in-category`));
-  }
-  if (column.computedLastInCategory) {
-    result.push(...baseClasses.map((c) => `${c}--last-in-category`));
-  }
-  if (column.computedPinned) {
-    result.push(...baseClasses.map((c) => `${c}--pinned-${column.computedPinned}`));
-  } else {
-    result.push(...baseClasses.map((c) => `${c}--unpinned`));
-  }
-  return result.filter(Boolean).join(" ");
+}
+var defaultFilterEditors = getFilterEditors();
+function StringFilterEditor(props) {
+  return /* @__PURE__ */ React16.createElement("input", {
+    "aria-label": `Filter for ${props.ariaLabel}`,
+    type: "text",
+    value: props.filterValue,
+    onChange: (event) => {
+      props.onChange(event.target.value);
+    },
+    className: props.className
+  });
+}
+function NumberFilterEditor(props) {
+  return /* @__PURE__ */ React16.createElement("input", {
+    "aria-label": `Filter for ${props.ariaLabel}`,
+    type: "number",
+    value: props.filterValue,
+    onChange: (event) => {
+      let value = event.target.value;
+      if (!isNaN(value + "")) {
+        value = value + "";
+      }
+      props.onChange(value);
+    },
+    className: props.className
+  });
 }
 
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
 import {
-  createElement as createElement10
+  createElement as createElement12
 } from "react";
-import { useEffect as useEffect7, useState as useState5 } from "react";
+import { useEffect as useEffect9, useState as useState8 } from "react";
+
+// src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
+var import_createRuntimeFn = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var CellCls = "_1eexc2a5 _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 _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 = "_12zfob11a _16lm1iw19 _16lm1iw1 _16lm1iwm _16lm1iw13";
+
+// src/components/InfiniteTable/components/icons/SortIcon.tsx
 var defaultLineStyle = {
   marginTop: 2,
   marginBottom: 2,
@@ -3893,8 +4267,8 @@ var defaultLineStyle = {
 var InfiniteTableIconClassName = "InfiniteTableIcon";
 function SortIcon(props) {
   var _a;
-  const [rendered, setRendered] = useState5(true);
-  const [opacity, setOpacity] = useState5(0);
+  const [rendered, setRendered] = useState8(true);
+  const [opacity, setOpacity] = useState8(0);
   const { direction, lineWidth = 1, style, className, index } = props;
   const showIndex = index != null && index > 0;
   const size = (_a = props.size) != null ? _a : 16;
@@ -3908,16 +4282,21 @@ function SortIcon(props) {
   }), props.lineStyle), {
     opacity
   });
-  useEffect7(() => {
+  useEffect9(() => {
     const newOpacity = direction != 0 ? 1 : 0;
     if (!rendered && newOpacity) {
       setRendered(true);
     }
     if (newOpacity !== opacity) {
-      requestAnimationFrame(() => {
+      const rafId = requestAnimationFrame(() => {
         setOpacity(newOpacity);
       });
+      return () => {
+        cancelAnimationFrame(rafId);
+      };
     }
+    return () => {
+    };
   }, [direction, rendered]);
   const onTransitionEnd = () => {
     const hidden = opacity === 0 && direction === 0;
@@ -3929,91 +4308,231 @@ function SortIcon(props) {
   if (!rendered) {
     return null;
   }
-  const indexStyle = {
-    position: "absolute",
-    transition: "top 0.2s",
-    top: 0,
-    right: 2
-  };
+  const indexStyle = {};
   if (direction === -1) {
     indexStyle.top = "100%";
   }
-  return /* @__PURE__ */ createElement10("div", {
+  return /* @__PURE__ */ createElement12("div", {
     style: __spreadProps(__spreadValues({}, style), { width: size }),
     className: join(className, InfiniteTableIconClassName, `${InfiniteTableIconClassName}-sort`)
-  }, showIndex ? /* @__PURE__ */ createElement10("div", {
+  }, showIndex ? /* @__PURE__ */ createElement12("div", {
     "data-name": "index",
-    style: indexStyle
-  }, index) : null, /* @__PURE__ */ createElement10("div", {
+    style: indexStyle,
+    className: HeaderSortIconIndexCls
+  }, index) : null, /* @__PURE__ */ createElement12("div", {
     style: __spreadValues({ width: sizes[0] }, lineStyle),
     onTransitionEnd
-  }), /* @__PURE__ */ createElement10("div", {
+  }), /* @__PURE__ */ createElement12("div", {
     style: __spreadValues({ width: sizes[1] }, lineStyle)
-  }), /* @__PURE__ */ createElement10("div", {
+  }), /* @__PURE__ */ createElement12("div", {
     style: __spreadValues({ width: sizes[2] }, lineStyle)
   }));
 }
 
-// src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
+// src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
+import {
+  Fragment,
+  createElement as createElement13,
+  memo as memo7
+} from "react";
+
+// src/components/InfiniteTable/hooks/useInfiniteTableState.ts
+import { useContext as useContext4 } from "react";
+var useInfiniteTableState = () => {
+  const TableContext2 = getInfiniteTableContext();
+  const { componentState } = useContext4(TableContext2);
+  return componentState;
+};
+
+// src/components/InfiniteTable/components/cell.css.ts
 var import_createRuntimeFn2 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
-var CellCls = "_1eexc2a5 _16lm1iwl _16lm1iw12 _16lm1iw13 _16lm1iw2 _16lm1iw1b _16lm1iw1c";
-var HeaderCellProxy = "_12zfob10";
-var HeaderCellRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob1d", variantClassNames: { zebra: { false: "_12zfob1e", even: "_12zfob1f", odd: "_12zfob1g" }, dragging: { true: "_12zfob1h", false: "_12zfob1i" }, first: { true: "_12zfob1j", false: "_12zfob1k" }, last: { true: "_12zfob1l", false: "_12zfob1m" }, groupByField: { true: "_12zfob1n", false: "_12zfob1o" }, firstInCategory: { true: "_12zfob1p", false: "_12zfob1q" }, lastInCategory: { true: "_12zfob1r", false: "_12zfob1s" }, pinned: { start: "_12zfob1t", end: "_12zfob1u", false: "_12zfob1v" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob1w"], [{ pinned: "end", firstInCategory: true }, "_12zfob1x"], [{ pinned: false, lastInCategory: true }, "_12zfob1y"]] });
-var HeaderClsRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob13 _16lm1iw12 _16lm1iw2", variantClassNames: { pinned: { start: "_12zfob14", end: "_12zfob15", false: "_12zfob16" }, virtualized: { true: "_12zfob17", false: "_12zfob18" }, overflow: { true: "_12zfob19", false: "_12zfob1a" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1b"], [{ overflow: true, pinned: "end" }, "_12zfob1c"]] });
-var HeaderGroupCls = "_12zfob110 _16lm1iwl _16lm1iw12 _16lm1iw13";
-var HeaderScrollbarPlaceholderCls = "_12zfob12 _16lm1iw2";
-var HeaderSortIconCls = "_12zfob11 _16lm1iw1";
-var HeaderWrapperCls = "_12zfob1z _16lm1iw18 _16lm1iw1 _16lm1iwl _16lm1iw12";
+var CellClsVariants = { shifting: "_1eexc2a3", dragging: "_1eexc2a4" };
+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/utils/RenderHookComponent.tsx
-function RenderHookComponent(props) {
-  var _a;
-  return (_a = props.render(props.renderParam)) != null ? _a : null;
+// src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
+var { rootClassName: rootClassName5 } = internalProps;
+var InfiniteTableCellClassName = `${rootClassName5}Cell`;
+var InfiniteTableCellContentClassName = `${rootClassName5}Cell_content`;
+function InfiniteTableCellFn(props) {
+  var _b, _c, _d;
+  const _a = props, {
+    cssEllipsis = true,
+    virtualized = true,
+    skipColumnShifting = false,
+    offsetProperty = "left",
+    contentStyle,
+    column,
+    domRef,
+    width,
+    contentClassName,
+    afterChildren,
+    beforeChildren,
+    offset,
+    cellType,
+    cssPosition: _cssPosition,
+    renderChildren
+  } = _a, domProps = __objRest(_a, [
+    "cssEllipsis",
+    "virtualized",
+    "skipColumnShifting",
+    "offsetProperty",
+    "contentStyle",
+    "column",
+    "domRef",
+    "width",
+    "contentClassName",
+    "afterChildren",
+    "beforeChildren",
+    "offset",
+    "cellType",
+    "cssPosition",
+    "renderChildren"
+  ]);
+  const children = renderChildren();
+  const { columnShifts } = useInfiniteTableState();
+  const shifting = !!columnShifts;
+  const style = __spreadValues({
+    width
+  }, domProps.style);
+  if (!skipColumnShifting && columnShifts && columnShifts[column.computedVisibleIndex]) {
+    const shiftLeft = columnShifts[column.computedVisibleIndex] + (offset != null ? offset : 0);
+    if (virtualized) {
+      style.left = shiftLeft;
+    } else {
+      style.transform = `translate3d(${shiftLeft}px, 0px, 0px)`;
+    }
+  }
+  const finalDOMProps = __spreadProps(__spreadValues({}, domProps), {
+    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__ */ createElement13(Fragment, null, beforeChildren, /* @__PURE__ */ createElement13("div", {
+      className: join(InfiniteTableCellContentClassName, cssEllipsis ? cssEllipsisClassName : overflow.hidden, contentClassName),
+      style: contentStyle
+    }, children), afterChildren)
+  });
+  const RenderComponent = cellType === "body" ? (_c = column.components) == null ? void 0 : _c.ColumnCell : (_d = column.components) == null ? void 0 : _d.HeaderCell;
+  if (RenderComponent) {
+    return /* @__PURE__ */ createElement13(RenderComponent, __spreadValues({}, finalDOMProps));
+  }
+  return /* @__PURE__ */ createElement13("div", __spreadProps(__spreadValues({}, finalDOMProps), {
+    ref: domRef
+  }));
+}
+var InfiniteTableCell = memo7(InfiniteTableCellFn);
+
+// src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
+import {
+  createElement as createElement14
+} from "react";
+import { useEffect as useEffect10, useState as useState9 } from "react";
+var { rootClassName: rootClassName6 } = internalProps;
+var InfiniteTableColumnHeaderFilterClassName = `${rootClassName6}HeaderCell__filter`;
+var stopPropagation = (e) => e.stopPropagation();
+function InfiniteTableColumnHeaderFilter(props) {
+  var _a, _b, _c, _d;
+  const [theValue, setTheValue] = useState9((_b = (_a = props.columnFilterValue) == null ? void 0 : _a.filterValue) != null ? _b : "");
+  const onInputChange = (filterValue) => {
+    setTheValue(filterValue);
+    props.onChange(filterValue);
+  };
+  useEffect10(() => {
+    var _a2;
+    if (props.columnFilterValue) {
+      if (theValue !== props.columnFilterValue.filterValue) {
+        setTheValue(props.columnFilterValue.filterValue);
+      }
+    } else {
+      const currentFilterType = props.filterTypes[(_a2 = props.columnFilterType) != null ? _a2 : "string"];
+      if (currentFilterType) {
+        const emptyValue = [...currentFilterType.emptyValues][0];
+        if (emptyValue !== theValue) {
+          setTheValue(emptyValue);
+        }
+      }
+    }
+  }, [(_c = props.columnFilterValue) == null ? void 0 : _c.filterValue]);
+  const filterType = props.columnFilterValue ? props.columnFilterValue.filterType : (_d = props.columnFilterType) != null ? _d : "string";
+  const operator = props.columnFilterValue ? props.columnFilterValue.operator : props.filterTypes[filterType] ? props.filterTypes[filterType].defaultOperator : props.filterTypes.string.defaultOperator;
+  const filterEditorProps = {
+    ariaLabel: `Filter for ${props.columnLabel}`,
+    filterValue: theValue,
+    className: HeaderFilterEditorCls,
+    operator,
+    filterType,
+    onChange: onInputChange
+  };
+  const FilterEditor = props.filterEditor;
+  return /* @__PURE__ */ createElement14("div", {
+    onPointerUp: stopPropagation,
+    onPointerDown: stopPropagation,
+    className: `${InfiniteTableColumnHeaderFilterClassName} ${HeaderFilterCls}`,
+    style: { height: props.columnHeaderHeight }
+  }, FilterEditor ? /* @__PURE__ */ createElement14(FilterEditor, __spreadValues({}, filterEditorProps)) : null);
+}
+function InfiniteTableColumnHeaderFilterEmpty() {
+  return /* @__PURE__ */ createElement14("div", {
+    onPointerUp: stopPropagation,
+    onPointerDown: stopPropagation,
+    className: `${InfiniteTableColumnHeaderFilterClassName} ${HeaderFilterCls}`,
+    style: { height: "100%" }
+  });
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
 var InfiniteTableHeaderCellContext = createContext4(null);
-var { rootClassName: rootClassName4 } = internalProps;
-var InfiniteTableHeaderCellClassName = `${rootClassName4}HeaderCell`;
+var { rootClassName: rootClassName7 } = internalProps;
+var InfiniteTableHeaderCellClassName = `${rootClassName7}HeaderCell`;
 function InfiniteTableHeaderCell(props) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   const column = props.column;
   const columns = props.columns;
-  const { onResize, height, width } = props;
+  const { onResize, height, width, headerOptions } = props;
   const sortInfo = column.computedSortInfo;
   let header = column.header;
-  const ref = useCallback6((node) => {
+  const ref = useCallback7((node) => {
     var _a2;
     domRef.current = node;
     (_a2 = props.domRef) == null ? void 0 : _a2.call(props, node);
   }, [props.domRef]);
-  const sortTool = /* @__PURE__ */ createElement11(SortIcon, {
+  const alwaysShow = headerOptions.alwaysReserveSpaceForSortIcon;
+  const sortTool = column.computedSorted || alwaysShow ? /* @__PURE__ */ createElement15(SortIcon, {
     index: column.computedMultiSort ? column.computedSortIndex + 1 : void 0,
-    className: `${InfiniteTableHeaderCellClassName}__sort-icon ${HeaderSortIconCls}`,
+    className: `${InfiniteTableHeaderCellClassName}__sort-icon ${HeaderSortIconCls} ${HeaderSortIconRecipe({
+      align: column.align || "start"
+    })}`,
     direction: column.computedSorted ? column.computedSortedAsc ? 1 : -1 : 0
-  });
+  }) : null;
   const renderParam = {
     domRef: ref,
     column,
     columnSortInfo: sortInfo,
+    columnFilterValue: column.computedFilterValue,
     sortTool
   };
+  const align = column.align || "start";
   const renderChildren = () => {
     if (header instanceof Function) {
-      header = /* @__PURE__ */ createElement11(RenderHookComponent, {
+      header = /* @__PURE__ */ createElement15(RenderHookComponent, {
         render: header,
         renderParam
       });
     }
     header = header != null ? header : column.name;
-    return header;
+    return /* @__PURE__ */ createElement15(Fragment2, null, align === "end" ? sortTool : null, header, align !== "end" ? sortTool : null);
   };
-  const domRef = useRef10(null);
+  const domRef = useRef12(null);
   const {
-    computed: { computedRemainingSpace },
-    componentState: { portalDOMRef }
+    computed: { computedRemainingSpace, showColumnFilters },
+    componentState: { portalDOMRef, columnHeaderHeight, filterEditors }
   } = useInfiniteTable();
-  useEffect8(() => {
+  const {
+    componentActions: dataSourceActions,
+    getState: getDataSourceState,
+    componentState: { filterDelay, filterTypes }
+  } = useDataSourceContextValue();
+  useEffect11(() => {
     let clearOnResize = null;
     const node = domRef.current;
     if (onResize && node) {
@@ -4034,7 +4553,7 @@ function InfiniteTableHeaderCell(props) {
   });
   let draggingProxy = null;
   if (dragging) {
-    draggingProxy = /* @__PURE__ */ createElement11("div", {
+    draggingProxy = /* @__PURE__ */ createElement15("div", {
       className: `${InfiniteTableHeaderCellClassName}Proxy ${HeaderCellProxy}`,
       style: {
         position: "absolute",
@@ -4048,9 +4567,73 @@ function InfiniteTableHeaderCell(props) {
     draggingProxy = createPortal(draggingProxy, portalDOMRef.current);
   }
   const ContextProvider = InfiniteTableHeaderCellContext.Provider;
-  return /* @__PURE__ */ createElement11(ContextProvider, {
+  const contentRecipeVariants = {
+    filtered: column.computedFiltered
+  };
+  const setFilterValue = useCallback7((filterValue) => {
+    var _a2;
+    const state = getDataSourceState();
+    let newFilterValue = (_a2 = state.filterValue) != null ? _a2 : [];
+    let found = false;
+    newFilterValue = newFilterValue.map((currentFilterValue) => {
+      if (filterValue.id && currentFilterValue.id === filterValue.id || filterValue.field && currentFilterValue.field === column.field) {
+        found = true;
+        return filterValue;
+      }
+      return currentFilterValue;
+    });
+    if (!found) {
+      newFilterValue.push(filterValue);
+    }
+    newFilterValue = newFilterValue.filter((filterValue2) => {
+      const filterType2 = filterTypes[filterValue2.filterType];
+      if (!filterType2 || filterType2.emptyValues.has(filterValue2.filterValue)) {
+        return false;
+      }
+      return true;
+    });
+    dataSourceActions.filterValue = newFilterValue;
+  }, [column, filterTypes]);
+  const debouncedOnFilterValueChange = useMemo5(() => {
+    const fn = (filterValue) => {
+      let newFilterValueForColumn;
+      if (column.computedFilterValue) {
+        newFilterValueForColumn = __spreadValues({}, column.computedFilterValue);
+      } else {
+        const filterType2 = column.computedFilterType;
+        const filterValueForColumn = {
+          filterType: filterType2,
+          operator: filterTypes[filterType2].defaultOperator,
+          filterValue,
+          valueGetter: column.valueGetter
+        };
+        if (column.field) {
+          filterValueForColumn.field = column.field;
+        } else {
+          filterValueForColumn.id = column.id;
+        }
+        newFilterValueForColumn = filterValueForColumn;
+      }
+      newFilterValueForColumn.filterValue = filterValue;
+      setFilterValue(newFilterValueForColumn);
+    };
+    if (filterDelay > 0) {
+      return debounce(fn, { wait: filterDelay });
+    }
+    return fn;
+  }, [
+    filterDelay,
+    setFilterValue,
+    column.computedFilterValue,
+    column.id,
+    column.field,
+    column.computedFilterType
+  ]);
+  const filterType = column.computedFilterType;
+  const FilterEditor = filterEditors[filterType] || defaultFilterEditors[filterType] || StringFilterEditor;
+  return /* @__PURE__ */ createElement15(ContextProvider, {
     value: renderParam
-  }, /* @__PURE__ */ createElement11(InfiniteTableCell, {
+  }, /* @__PURE__ */ createElement15(InfiniteTableCell, {
     domRef: ref,
     cellType: "header",
     column,
@@ -4060,9 +4643,19 @@ function InfiniteTableHeaderCell(props) {
     width,
     onPointerDown,
     onPointerUp,
-    className: join(InfiniteTableHeaderCellClassName, userSelect.none, column.computedSortable ? cursor.pointer : "", useCellClassName(column, [InfiniteTableHeaderCellClassName, InfiniteTableCellClassName], HeaderCellRecipe, { dragging, zebra: false }), CellCls),
-    cssEllipsis: (_d = (_c = column.headerCssEllipsis) != null ? _c : column.cssEllipsis) != null ? _d : true,
-    afterChildren: sortTool,
+    contentClassName: join(HeaderCellContentRecipe(contentRecipeVariants), justifyContent[(_c = column.align) != null ? _c : "start"]),
+    contentStyle: showColumnFilters ? { height: height / 2 } : void 0,
+    className: join(InfiniteTableHeaderCellClassName, userSelect.none, column.computedSortable ? cursor.pointer : "", useCellClassName(column, [InfiniteTableHeaderCellClassName, InfiniteTableCellClassName], HeaderCellRecipe, { dragging, zebra: false, rowActive: false }), CellCls),
+    cssEllipsis: (_e = (_d = column.headerCssEllipsis) != null ? _d : column.cssEllipsis) != null ? _e : true,
+    afterChildren: showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ createElement15(InfiniteTableColumnHeaderFilter, {
+      filterEditor: FilterEditor,
+      filterTypes,
+      onChange: debouncedOnFilterValueChange,
+      columnFilterType: filterType,
+      columnLabel: column.field || column.name || column.id,
+      columnFilterValue: column.computedFilterValue,
+      columnHeaderHeight
+    }) : /* @__PURE__ */ createElement15(InfiniteTableColumnHeaderFilterEmpty, null) : null,
     renderChildren
   }), draggingProxy);
 }
@@ -4073,9 +4666,9 @@ function useInfiniteHeaderCell() {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
 import {
-  createElement as createElement14,
-  useCallback as useCallback8,
-  useMemo as useMemo5
+  createElement as createElement18,
+  useCallback as useCallback9,
+  useMemo as useMemo6
 } from "react";
 
 // src/components/utils/getScrollbarWidth.ts
@@ -4199,14 +4792,14 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 import {
-  createElement as createElement13,
-  memo as memo6
+  createElement as createElement17,
+  memo as memo8
 } from "react";
-import { useCallback as useCallback7, useEffect as useEffect9, useRef as useRef11 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect12, useRef as useRef13 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
 import {
-  createElement as createElement12
+  createElement as createElement16
 } from "react";
 var TableHeaderGroupClassName = `${rootClassName2}HeaderGroup`;
 function InfiniteTableHeaderGroup(props) {
@@ -4217,35 +4810,35 @@ function InfiniteTableHeaderGroup(props) {
       columnGroup
     });
   }
-  return /* @__PURE__ */ createElement12("div", {
+  return /* @__PURE__ */ createElement16("div", {
     ref: props.domRef,
     "data-group-id": columnGroup.uniqueGroupId,
     className: join(HeaderGroupCls, TableHeaderGroupClassName),
     style: { width, height }
-  }, /* @__PURE__ */ createElement12("div", {
+  }, /* @__PURE__ */ createElement16("div", {
     className: join(`${TableHeaderGroupClassName}__header-content`, cssEllipsisClassName)
   }, header));
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
-var { rootClassName: rootClassName5 } = internalProps;
-var TableHeaderClassName = `${rootClassName5}Header`;
+var { rootClassName: rootClassName8 } = internalProps;
+var TableHeaderClassName = `${rootClassName8}Header`;
 function InfiniteTableHeaderFn(props) {
   const {
     brain,
     columns,
     style,
     className,
-    headerHeight,
+    columnHeaderHeight,
     columnAndGroupTreeInfo,
     columnGroupsMaxDepth
   } = props;
   const {
     computed,
-    componentState: { headerBrain }
+    componentState: { headerBrain, headerOptions }
   } = useInfiniteTable();
-  const { computedVisibleColumnsMap } = computed;
-  useEffect9(() => {
+  const { computedVisibleColumnsMap, showColumnFilters } = computed;
+  useEffect12(() => {
     const onScroll = (scrollPosition) => {
       if (domRef.current) {
         domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
@@ -4254,7 +4847,7 @@ function InfiniteTableHeaderFn(props) {
     const removeOnScroll = brain.onScroll(onScroll);
     return removeOnScroll;
   }, [brain]);
-  const domRef = useRef11(null);
+  const domRef = useRef13(null);
   const headerCls = HeaderClsRecipe({
     overflow: false,
     virtualized: true
@@ -4262,9 +4855,9 @@ function InfiniteTableHeaderFn(props) {
   const domProps = {
     ref: domRef,
     className: join(TableHeaderClassName, `${TableHeaderClassName}--virtualized`, className, headerCls),
-    style: __spreadProps(__spreadValues({}, style), { height: headerHeight })
+    style: __spreadProps(__spreadValues({}, style), { height: columnHeaderHeight })
   };
-  const renderCell = useCallback7((params) => {
+  const renderCell = useCallback8((params) => {
     const {
       rowIndex,
       colIndex,
@@ -4289,7 +4882,7 @@ function InfiniteTableHeaderFn(props) {
         computedWidth: colGroupItem.computedWidth,
         groupOffset: colGroupItem.groupOffset
       });
-      return /* @__PURE__ */ createElement13(InfiniteTableHeaderGroup, {
+      return /* @__PURE__ */ createElement17(InfiniteTableHeaderGroup, {
         domRef: domRef2,
         columns: columns2,
         width: widthWithColspan,
@@ -4297,21 +4890,29 @@ function InfiniteTableHeaderFn(props) {
         columnGroup: computedColumnGroup
       });
     }
-    return /* @__PURE__ */ createElement13(InfiniteTableHeaderCell, {
+    return /* @__PURE__ */ createElement17(InfiniteTableHeaderCell, {
       domRef: domRef2,
       column,
+      headerOptions,
       width: widthWithColspan,
       height: heightWithRowspan,
       columns: computedVisibleColumnsMap
     });
-  }, [columns, headerHeight, columnAndGroupTreeInfo, columnGroupsMaxDepth]);
-  return /* @__PURE__ */ createElement13("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement13(RawTable, {
+  }, [
+    headerOptions,
+    columns,
+    columnHeaderHeight,
+    columnAndGroupTreeInfo,
+    columnGroupsMaxDepth,
+    showColumnFilters
+  ]);
+  return /* @__PURE__ */ createElement17("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement17(RawTable, {
     renderCell,
     brain: headerBrain,
     cellHoverClassNames: []
   }));
 }
-var InfiniteTableHeader = memo6(InfiniteTableHeaderFn);
+var InfiniteTableHeader = memo8(InfiniteTableHeaderFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
 function TableHeaderWrapper(props) {
@@ -4321,25 +4922,26 @@ function TableHeaderWrapper(props) {
     computedPinnedStartColumns,
     computedPinnedEndColumns,
     computedVisibleColumns,
-    columnSize
+    columnSize,
+    showColumnFilters
   } = tableContextValue.computed;
   const {
     componentState: {
-      headerHeight,
+      columnHeaderHeight,
       columnGroupsDepthsMap,
       columnGroupsMaxDepth,
       computedColumnGroups
     }
   } = tableContextValue;
   const rows = !computedColumnGroups || !computedColumnGroups.size ? 1 : columnGroupsMaxDepth + 2;
-  const height = rows * headerHeight;
-  const columnAndGroupTreeInfo = useMemo5(() => {
+  const height = rows * columnHeaderHeight + (showColumnFilters ? columnHeaderHeight : 0);
+  const columnAndGroupTreeInfo = useMemo6(() => {
     if (!computedColumnGroups || !computedColumnGroups.size) {
       return void 0;
     }
     return buildColumnAndGroupTree(computedVisibleColumns, computedColumnGroups, columnGroupsDepthsMap, columnGroupsMaxDepth);
   }, [computedVisibleColumns, computedColumnGroups, columnGroupsDepthsMap]);
-  const cellspan = useCallback8(({ rowIndex, colIndex }) => {
+  const cellspan = useCallback9(({ rowIndex, colIndex }) => {
     const column = computedVisibleColumns[colIndex];
     const rowspan2 = 1;
     const colspan2 = 1;
@@ -4372,11 +4974,14 @@ function TableHeaderWrapper(props) {
     rows,
     columnGroupsDepthsMap
   ]);
-  const rowspan = useCallback8(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).rowspan, [cellspan]);
-  const colspan = useCallback8(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).colspan, [cellspan]);
+  const rowspan = useCallback9(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).rowspan, [cellspan]);
+  const colspan = useCallback9(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).colspan, [cellspan]);
+  const rowHeight = useCallback9((index) => {
+    return showColumnFilters ? index < rows - 1 ? columnHeaderHeight : 2 * columnHeaderHeight : columnHeaderHeight;
+  }, [rows, showColumnFilters, columnHeaderHeight]);
   useMatrixBrain(brain, {
     colWidth: columnSize,
-    rowHeight: headerHeight,
+    rowHeight,
     rows,
     cols: computedVisibleColumns.length,
     height,
@@ -4386,21 +4991,21 @@ function TableHeaderWrapper(props) {
     fixedColsEnd: computedPinnedEndColumns.length,
     fixedColsStart: computedPinnedStartColumns.length
   });
-  const header = /* @__PURE__ */ createElement14(InfiniteTableHeader, {
+  const header = /* @__PURE__ */ createElement18(InfiniteTableHeader, {
     columns: computedVisibleColumns,
     brain,
-    headerHeight: height,
+    columnHeaderHeight: height,
     columnGroupsMaxDepth,
     columnAndGroupTreeInfo
   });
-  const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ createElement14("div", {
+  const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ createElement18("div", {
     className: HeaderScrollbarPlaceholderCls,
     style: {
       zIndex: 1e3,
       width: getScrollbarWidth()
     }
   }) : null;
-  return /* @__PURE__ */ createElement14("div", {
+  return /* @__PURE__ */ createElement18("div", {
     className: HeaderWrapperCls,
     style: {
       height
@@ -4410,12 +5015,12 @@ function TableHeaderWrapper(props) {
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
 import {
-  createElement as createElement15,
-  forwardRef as forwardRef3,
-  useCallback as useCallback9,
-  useRef as useRef12
+  createElement as createElement19,
+  forwardRef as forwardRef4,
+  useCallback as useCallback10,
+  useRef as useRef14
 } from "react";
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect13 } from "react";
 
 // src/components/utils/decamelize.ts
 function decamelize(str, options) {
@@ -4424,14 +5029,14 @@ function decamelize(str, options) {
 }
 
 // src/components/InfiniteTable/theme.css.ts
-var ThemeVars = { color: { accent: "var(--infinite-accent-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", height: "var(--infinite-header-height)" }, HeaderCell: { draggingBackground: "var(--infinite-header-cell-dragging-background)", background: "var(--infinite-header-cell-background)", padding: "var(--infinite-header-cell-padding)", iconSize: "var(--infinite-header-cell-icon-size)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", color: "var(--infinite-cell-color)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", hoverBackground: "var(--infinite-row-hover-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
+var ThemeVars = { color: { accent: "var(--infinite-accent-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { draggingBackground: "var(--infinite-header-cell-dragging-background)", background: "var(--infinite-header-cell-background)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", color: "var(--infinite-cell-color)", activeBorderColor_R: "var(--infinite-active-cell-border-color--r)", activeBorderColor_G: "var(--infinite-active-cell-border-color--g)", activeBorderColor_B: "var(--infinite-active-cell-border-color--b)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBackgroundFromBorder: "var(--infinite-active-cell-background-from-border)", activeBackground: "var(--infinite-active-cell-background)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBackground: "var(--infinite-active-row-background)", activeBackgroundFromBorder: "var(--infinite-active-row-background-from-border)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", hoverBackground: "var(--infinite-row-hover-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
 
 // src/components/InfiniteTable/InfiniteCls.css.ts
 var import_createRuntimeFn3 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var FooterCls = "_16lm1iw1";
-var InfiniteCls = "_1yeub2v0 _16lm1iw1 _16lm1iwl _16lm1iw11 _16lm1iw0";
+var InfiniteCls = "_1yeub2v0 _16lm1iw1 _16lm1iwm _16lm1iw12 _16lm1iw0";
 var InfiniteClsRecipe = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "", variantClassNames: { focused: { true: "_1yeub2v2", false: "_1yeub2v3" }, focusedWithin: { true: "_1yeub2v4", false: "_1yeub2v5" }, hasPinnedStart: { true: "_1yeub2v6", false: "_1yeub2v7" }, hasPinnedEnd: { true: "_1yeub2v8", false: "_1yeub2v9" }, hasPinnedStartOverflow: { true: "_1yeub2va", false: "_1yeub2vb" }, hasPinnedEndOverflow: { true: "_1yeub2vc", false: "_1yeub2vd" } }, defaultVariants: {}, compoundVariants: [] });
-var InfiniteClsShiftingColumns = "_16lm1iwo";
+var InfiniteClsShiftingColumns = "_16lm1iwp";
 var PinnedRowsContainerClsVariants = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "", variantClassNames: { pinned: { start: "_1yeub2vh", end: "_1yeub2vi", false: "_1yeub2vj" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
@@ -4461,10 +5066,10 @@ var enforceStyle = (node, style) => {
     node.style.setProperty(decamelize(propertyName), propertyValue, "important");
   }
 };
-var InfiniteTableLicenseFooter = forwardRef3(function InfiniteTableLicenseFooter2(props, ref) {
-  const { rootClassName: rootClassName8 } = useInternalProps();
-  const domRef = useRef12(null);
-  const domCallback = useCallback9((node) => {
+var InfiniteTableLicenseFooter = forwardRef4(function InfiniteTableLicenseFooter2(props, ref) {
+  const { rootClassName: rootClassName11 } = useInternalProps();
+  const domRef = useRef14(null);
+  const domCallback = useCallback10((node) => {
     domRef.current = node;
     if (!ref) {
       return;
@@ -4475,7 +5080,7 @@ var InfiniteTableLicenseFooter = forwardRef3(function InfiniteTableLicenseFooter
       ref.current = node;
     }
   }, []);
-  useEffect10(() => {
+  useEffect13(() => {
     const forceStyle = () => {
       requestAnimationFrame(() => {
         var _a;
@@ -4489,12 +5094,12 @@ var InfiniteTableLicenseFooter = forwardRef3(function InfiniteTableLicenseFooter
       clearInterval(intervalId);
     };
   }, []);
-  return /* @__PURE__ */ createElement15("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ createElement19("div", __spreadProps(__spreadValues({
     ref: domCallback
   }, props), {
-    className: join(`${rootClassName8}-Footer`, FooterCls, props.className),
+    className: join(`${rootClassName11}-Footer`, FooterCls, props.className),
     style: defaultStyle
-  }), "Powered by", " ", /* @__PURE__ */ createElement15("a", {
+  }), "Powered by", " ", /* @__PURE__ */ createElement19("a", {
     href: "https://infinite-table.com",
     rel: "noopener noreferrer",
     role: "link",
@@ -4505,13 +5110,13 @@ var InfiniteTableLicenseFooter = forwardRef3(function InfiniteTableLicenseFooter
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
 import {
   createContext as createContext5,
-  createElement as createElement16,
-  memo as memo7
+  createElement as createElement20,
+  memo as memo9
 } from "react";
-import { useContext as useContext6 } from "react";
-var { rootClassName: rootClassName6 } = internalProps;
+import { useCallback as useCallback11, useContext as useContext6, useMemo as useMemo7 } from "react";
+var { rootClassName: rootClassName9 } = internalProps;
 var InfiniteTableColumnCellContext = createContext5(null);
-var InfiniteTableColumnCellClassName = `${rootClassName6}ColumnCell`;
+var InfiniteTableColumnCellClassName = `${rootClassName9}ColumnCell`;
 function isColumnWithField(c) {
   return typeof c.field === "string";
 }
@@ -4535,7 +5140,7 @@ function InfiniteTableColumnCellFn(props) {
     showZebraRows
   } = props;
   if (!column) {
-    return /* @__PURE__ */ createElement16("div", {
+    return /* @__PURE__ */ createElement20("div", {
       ref: domRef
     }, "no column");
   }
@@ -4544,33 +5149,62 @@ function InfiniteTableColumnCellFn(props) {
   const groupRowInfo = null;
   let value = isGroupRow && groupBy && column.groupByField ? rowInfo.value : isColumnWithField(column) ? data == null ? void 0 : data[column.field] : null;
   if (column.valueGetter) {
-    value = column.valueGetter(isGroupRow ? {
+    if (!rowInfo.isGroupRow && rowInfo.data) {
+      value = column.valueGetter({ data: rowInfo.data, field: column.field });
+    }
+  }
+  if (column.valueFormatter) {
+    value = column.valueFormatter(isGroupRow ? {
       data: rowInfo.data,
       isGroupRow,
-      rowInfo
+      rowInfo,
+      field: column.field,
+      value
     } : {
       data: rowInfo.data,
       isGroupRow,
-      rowInfo
+      rowInfo,
+      field: column.field,
+      value
     });
   }
+  const { getState, componentActions } = useInfiniteTable();
+  const { activeRowIndex } = getState();
+  const rowActive = rowIndex === activeRowIndex;
+  const onClick = useCallback11(() => {
+    const { activeRowIndex: activeRowIndex2, activeCellIndex } = getState();
+    if (activeRowIndex2 != null) {
+      componentActions.activeRowIndex = rowIndex;
+      return;
+    }
+    if (activeCellIndex != null) {
+      componentActions.activeCellIndex = [
+        rowIndex,
+        column.computedVisibleIndex
+      ];
+    }
+  }, [rowIndex, column.computedVisibleIndex]);
   const { componentState: computedDataSource } = useDataSourceContextValue();
   const rest = rowInfo.isGroupRow ? {
     rowInfo,
     isGroupRow: rowInfo.isGroupRow,
-    data: rowInfo.data
+    data: rowInfo.data,
+    rowActive,
+    value,
+    field: column.field
   } : {
     rowInfo,
     isGroupRow: rowInfo.isGroupRow,
-    data: rowInfo.data
+    data: rowInfo.data,
+    rowActive,
+    value,
+    field: column.field
   };
   const stylingRenderParam = __spreadValues({
-    value,
     column
   }, rest);
   const renderValue = value;
   const renderParam = __spreadProps(__spreadValues({
-    value,
     column,
     domRef,
     groupRowInfo
@@ -4578,28 +5212,28 @@ function InfiniteTableColumnCellFn(props) {
     isGroupRow,
     rowIndex,
     toggleGroupRow,
-    toggleCurrentGroupRow: () => {
+    toggleCurrentGroupRow: useCallback11(() => {
       if (!rowInfo.isGroupRow) {
         return;
       }
       toggleGroupRow(rowInfo.groupKeys);
-    },
+    }, []),
     groupBy: computedDataSource.groupBy,
     pivotBy: computedDataSource.pivotBy
   });
-  const renderChildren = () => {
+  const renderChildren = useCallback11(() => {
     if (hidden) {
       return null;
     }
     const renderFn = column.render || column.renderValue;
     if (renderFn) {
-      return /* @__PURE__ */ createElement16(RenderHookComponent, {
+      return /* @__PURE__ */ createElement20(RenderHookComponent, {
         render: renderFn,
         renderParam
       });
     }
     return renderValue;
-  };
+  }, [column, hidden, ...Object.values(renderParam)]);
   const rowPropsAndStyleArgs = __spreadProps(__spreadValues({}, rest), {
     rowIndex
   });
@@ -4612,6 +5246,7 @@ function InfiniteTableColumnCellFn(props) {
   style = column.style ? typeof column.style === "function" ? __spreadValues(__spreadValues({}, style), column.style(stylingRenderParam) || {}) : __spreadValues(__spreadValues({}, style), column.style) : style || {};
   style.width = width;
   style.height = rowHeight;
+  const memoizedStyle = useMemo7(() => style, [!style ? null : JSON.stringify(style)]);
   const odd = (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
   const zebra = showZebraRows ? odd ? "odd" : "even" : false;
   const cellProps = {
@@ -4621,19 +5256,20 @@ function InfiniteTableColumnCellFn(props) {
     column,
     width,
     offset: virtualized ? 0 : column.computedPinningOffset,
-    style,
+    style: memoizedStyle,
     onMouseLeave,
     onMouseEnter,
+    onClick,
     cssEllipsis: (_a = column.cssEllipsis) != null ? _a : true,
-    className: join(useCellClassName(column, [InfiniteTableColumnCellClassName, InfiniteTableCellClassName], ColumnCellRecipe, { dragging: false, zebra }), colClassName, rowComputedClassName),
+    className: join(useCellClassName(column, [InfiniteTableColumnCellClassName, InfiniteTableCellClassName], ColumnCellRecipe, { dragging: false, zebra, rowActive }), colClassName, rowComputedClassName),
     renderChildren
   };
   const ContextProvider = InfiniteTableColumnCellContext.Provider;
-  return /* @__PURE__ */ createElement16(ContextProvider, {
+  return /* @__PURE__ */ createElement20(ContextProvider, {
     value: renderParam
-  }, /* @__PURE__ */ createElement16(InfiniteTableCell, __spreadValues({}, cellProps)));
+  }, /* @__PURE__ */ createElement20(InfiniteTableCell, __spreadValues({}, cellProps)));
 }
-var InfiniteTableColumnCell = memo7(InfiniteTableColumnCellFn);
+var InfiniteTableColumnCell = memo9(InfiniteTableColumnCellFn);
 function useInfiniteColumnCell() {
   const result = useContext6(InfiniteTableColumnCellContext);
   return result;
@@ -4647,35 +5283,97 @@ var RowHoverCls = "_7pupv01";
 
 // src/components/InfiniteTable/components/LoadMask.tsx
 import {
-  createElement as createElement17,
-  memo as memo8
+  createElement as createElement21,
+  memo as memo10
 } from "react";
 
 // src/components/InfiniteTable/components/LoadMask.css.ts
-var LoadMaskCls = { visible: "qy58ya1 qy58ya0 _16lm1iw2 _16lm1iwt _16lm1iwv _16lm1iwz _16lm1iwx", hidden: "qy58ya2 qy58ya0 _16lm1iw2 _16lm1iwt _16lm1iwv _16lm1iwz _16lm1iwx" };
-var LoadMaskOverlayCls = "qy58ya3 _16lm1iw2 _16lm1iwt _16lm1iwv _16lm1iwz _16lm1iwx";
+var LoadMaskCls = { visible: "qy58ya1 qy58ya0 _16lm1iw2 _16lm1iwu _16lm1iww _16lm1iw10 _16lm1iwy", hidden: "qy58ya2 qy58ya0 _16lm1iw2 _16lm1iwu _16lm1iww _16lm1iw10 _16lm1iwy" };
+var LoadMaskOverlayCls = "qy58ya3 _16lm1iw2 _16lm1iwu _16lm1iww _16lm1iw10 _16lm1iwy";
 var LoadMaskTextCls = "qy58ya4";
 
 // src/components/InfiniteTable/components/LoadMask.tsx
-var { rootClassName: rootClassName7 } = internalProps;
-var baseCls = `${rootClassName7}-LoadMask`;
+var { rootClassName: rootClassName10 } = internalProps;
+var baseCls3 = `${rootClassName10}-LoadMask`;
 function LoadMaskFn(props) {
   const { visible, children = "Loading" } = props;
-  return /* @__PURE__ */ createElement17("div", {
-    className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls}`
-  }, /* @__PURE__ */ createElement17("div", {
-    className: `${LoadMaskOverlayCls} ${baseCls}-Overlay`
-  }), /* @__PURE__ */ createElement17("div", {
-    className: `${LoadMaskTextCls} ${baseCls}-Text`
+  return /* @__PURE__ */ createElement21("div", {
+    className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls3}`
+  }, /* @__PURE__ */ createElement21("div", {
+    className: `${LoadMaskOverlayCls} ${baseCls3}-Overlay`
+  }), /* @__PURE__ */ createElement21("div", {
+    className: `${LoadMaskTextCls} ${baseCls3}-Text`
   }, children));
 }
-var LoadMask = memo8(LoadMaskFn);
+var LoadMask = memo10(LoadMaskFn);
+
+// src/components/InfiniteTable/getImperativeApi.ts
+function getImperativeApi(getState, getComputed, getDataSourceState, componentActions) {
+  const imperativeApi = {
+    setColumnOrder: (columnOrder) => {
+      componentActions.columnOrder = columnOrder;
+    },
+    setColumnVisibility: (columnVisibility) => {
+      componentActions.columnVisibility = columnVisibility;
+    },
+    getState,
+    getDataSourceState,
+    scrollRowIntoView(rowIndex, config = { offset: 0 }) {
+      const state = getState();
+      const scrollPosition = state.renderer.getScrollPositionForScrollRowIntoView(rowIndex, config);
+      const currentScrollPosition = state.brain.getScrollPosition();
+      if (scrollPosition.scrollTop !== currentScrollPosition.scrollTop) {
+        state.scrollerDOMRef.current.scrollTop = scrollPosition.scrollTop;
+      }
+    },
+    scrollColumnIntoView(colId, config = { offset: 0 }) {
+      const state = getState();
+      const computed = getComputed();
+      const computedColumn = computed.computedVisibleColumnsMap.get(colId);
+      if (!computedColumn) {
+        return;
+      }
+      const colIndex = computedColumn.computedVisibleIndex;
+      const scrollPosition = state.renderer.getScrollPositionForScrollColumnIntoView(colIndex, config);
+      const currentScrollPosition = state.brain.getScrollPosition();
+      if (scrollPosition.scrollLeft !== currentScrollPosition.scrollLeft) {
+        state.scrollerDOMRef.current.scrollLeft = scrollPosition.scrollLeft;
+      }
+    },
+    scrollCellIntoView(rowIndex, colIdOrIndex, config = { offset: 0 }) {
+      const state = getState();
+      const computed = getComputed();
+      let colIndex = colIdOrIndex;
+      if (typeof colIdOrIndex === "string") {
+        const computedColumn = computed.computedVisibleColumnsMap.get(colIdOrIndex);
+        if (!computedColumn) {
+          return;
+        }
+        colIndex = computedColumn.computedVisibleIndex;
+      }
+      const scrollPositionForCol = state.renderer.getScrollPositionForScrollColumnIntoView(colIndex, config);
+      const scrollPositionForRow = state.renderer.getScrollPositionForScrollRowIntoView(rowIndex, config);
+      const newScrollPosition = {
+        scrollLeft: scrollPositionForCol.scrollLeft,
+        scrollTop: scrollPositionForRow.scrollTop
+      };
+      const currentScrollPosition = state.brain.getScrollPosition();
+      if (newScrollPosition.scrollLeft !== currentScrollPosition.scrollLeft) {
+        state.scrollerDOMRef.current.scrollLeft = newScrollPosition.scrollLeft;
+      }
+      if (newScrollPosition.scrollTop !== currentScrollPosition.scrollTop) {
+        state.scrollerDOMRef.current.scrollTop = newScrollPosition.scrollTop;
+      }
+    }
+  };
+  return imperativeApi;
+}
 
 // src/components/InfiniteTable/hooks/useAutoSizeColumns.ts
 import {
-  useEffect as useEffect11,
-  useRef as useRef13,
-  useState as useState6
+  useEffect as useEffect14,
+  useRef as useRef15,
+  useState as useState10
 } from "react";
 var OFFSET = 10;
 function getColumnContentMaxWidths(domRef, options) {
@@ -4698,6 +5396,7 @@ function getColumnContentMaxWidths(domRef, options) {
       contentClone.style.pointerEvents = "none";
       contentClone.classList.remove(...cssEllipsisClassName.split(" "));
       contentClone.style.position = "absolute";
+      contentClone.style.width = "auto";
       cell.appendChild(contentClone);
       let measuredWidth = contentClone.offsetWidth;
       cell.removeChild(contentClone);
@@ -4735,11 +5434,11 @@ function useAutoSizeColumns() {
     componentActions,
     componentState: { domRef, ready, autoSizeColumnsKey, brain }
   } = useComponentState();
-  const [refreshId, setRefreshId] = useState6(0);
+  const [refreshId, setRefreshId] = useState10(0);
   const theKey = typeof autoSizeColumnsKey === "object" ? autoSizeColumnsKey.key : autoSizeColumnsKey;
   const getTheKey = useLatest(theKey);
-  const lastExecutedIdentifierRef = useRef13(null);
-  useEffect11(() => {
+  const lastExecutedIdentifierRef = useRef15(null);
+  useEffect14(() => {
     const key = getTheKey();
     if (key == null) {
       return;
@@ -4752,7 +5451,7 @@ function useAutoSizeColumns() {
     };
     return brain.onRenderRangeChange(onChange);
   }, [brain]);
-  useEffect11(() => {
+  useEffect14(() => {
     var _a;
     if (theKey == null) {
       return;
@@ -4797,20 +5496,8 @@ function useAutoSizeColumns() {
 }
 
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
-import { useCallback as useCallback11, useEffect as useEffect12, useRef as useRef14 } from "react";
-import React22 from "react";
-
-// src/components/hooks/useRerender.ts
-import { useCallback as useCallback10, useState as useState7 } from "react";
-var useRerender = () => {
-  const [state, setState] = useState7(0);
-  return [
-    state,
-    useCallback10(() => {
-      setState((state2) => state2 + 1);
-    }, [setState])
-  ];
-};
+import { useCallback as useCallback12, useEffect as useEffect15, useRef as useRef16 } from "react";
+import React27 from "react";
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
 function useYourBrain(param) {
@@ -4840,7 +5527,7 @@ function useYourBrain(param) {
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
 var SCROLL_BOTTOM_OFFSET = 1;
 function useCellRendering(param) {
-  const { computed, bodySize } = param;
+  const { computed, bodySize, imperativeApi } = param;
   const { componentActions, componentState, getState } = useInfiniteTable();
   const {
     computedPinnedStartColumns,
@@ -4880,13 +5567,13 @@ function useCellRendering(param) {
     bodySize,
     rowspan
   });
-  const scrollTopMaxRef = useRef14(0);
-  useEffect12(() => {
+  const scrollTopMaxRef = useRef16(0);
+  useEffect15(() => {
     return brain.onRenderCountChange(() => {
       scrollTopMaxRef.current = brain.scrollTopMax;
     });
   }, [brain]);
-  useEffect12(() => {
+  useEffect15(() => {
     return brain.onScrollStop((scrollPosition) => {
       const { scrollTop } = scrollPosition;
       if (scrollTop === 0) {
@@ -4903,31 +5590,21 @@ function useCellRendering(param) {
       }
     });
   }, [brain, onScrollToTop, onScrollToBottom]);
-  useEffect12(() => {
+  useEffect15(() => {
     if (!bodySize.height) {
       return;
     }
     const { onReady } = getState();
     componentActions.ready = true;
     if (onReady) {
-      const imperativeApi = {
-        setColumnOrder: (columnOrder) => {
-          componentActions.columnOrder = columnOrder;
-        },
-        setColumnVisibility: (columnVisibility) => {
-          componentActions.columnVisibility = columnVisibility;
-        },
-        getState,
-        getDataSourceState
-      };
       onReady(imperativeApi);
     }
   }, [!!bodySize.height]);
   const [, rerender] = useRerender();
-  useEffect12(() => {
+  useEffect15(() => {
     rerender();
   }, [dataSourceState]);
-  const renderCell = useCallback11((params) => {
+  const renderCell = useCallback12((params) => {
     const {
       rowIndex,
       colIndex,
@@ -4962,7 +5639,7 @@ function useCellRendering(param) {
       rowStyle,
       rowClassName
     };
-    return /* @__PURE__ */ React22.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
+    return /* @__PURE__ */ React27.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
   }, [
     rowHeight,
     getData,
@@ -4980,13 +5657,13 @@ function useCellRendering(param) {
 }
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-import { useCallback as useCallback14, useEffect as useEffect22, useState as useState11 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect25, useState as useState14 } from "react";
 
 // src/components/InfiniteTable/hooks/useColumnGroups.ts
-import { useEffect as useEffect14 } from "react";
+import { useEffect as useEffect17 } from "react";
 
 // src/components/hooks/useInterceptedMap.ts
-import { useEffect as useEffect13 } from "react";
+import { useEffect as useEffect16 } from "react";
 function interceptMap(map2, fns) {
   const { set, delete: deleteKey, clear } = map2;
   if (fns.set) {
@@ -5074,7 +5751,7 @@ function useColumnGroups() {
     componentActions,
     getComponentState
   } = useComponentState();
-  useEffect14(() => {
+  useEffect17(() => {
     const recompute = () => {
       componentActions.columnGroupsDepthsMap = computeColumnGroupsDepths(computedColumnGroups);
     };
@@ -5085,7 +5762,7 @@ function useColumnGroups() {
       set: update
     });
   }, [computedColumnGroups]);
-  useEffect14(() => {
+  useEffect17(() => {
     return interceptMap(collapsedColumnGroups, {
       set: (key, visibleCol) => {
         const colIds = key.slice(1);
@@ -5120,14 +5797,17 @@ function useColumnGroups() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnRowspan.ts
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo8 } from "react";
 function useColumnRowspan(computedVisibleColumns) {
   const { getState: getDataSourceState } = useDataSourceContextValue();
-  const rowspan = useMemo6(() => {
+  const rowspan = useMemo8(() => {
     const colsWithRowspan = computedVisibleColumns.filter((col) => typeof col.rowspan === "function");
     return colsWithRowspan.length ? ({ rowIndex, colIndex }) => {
       const dataArray = getDataSourceState().dataArray;
       const rowInfo = dataArray[rowIndex];
+      if (!rowInfo) {
+        return 1;
+      }
       const data = rowInfo.data;
       const column = computedVisibleColumns[colIndex];
       if (!column || !column.rowspan) {
@@ -5146,10 +5826,10 @@ function useColumnRowspan(computedVisibleColumns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnSizeFn.ts
-import { useCallback as useCallback12 } from "react";
+import { useCallback as useCallback13 } from "react";
 var debug4 = dbg("useColumnSizeFn");
 function useColumnSizeFn(columns) {
-  const columnSize = useCallback12((index) => {
+  const columnSize = useCallback13((index) => {
     const column = columns[index];
     if (!column) {
       debug4("cannot find column at index", index, columns);
@@ -5160,11 +5840,11 @@ function useColumnSizeFn(columns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-import { useEffect as useEffect19, useMemo as useMemo8 } from "react";
+import { useEffect as useEffect22, useMemo as useMemo10 } from "react";
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
 import {
-  createElement as createElement20
+  createElement as createElement24
 } from "react";
 
 // src/utils/stripVar.ts
@@ -5182,21 +5862,21 @@ var showLoadingIcon = (rowInfo) => {
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
 import {
-  createElement as createElement18,
-  useEffect as useEffect15
+  createElement as createElement22,
+  useEffect as useEffect18
 } from "react";
-import { useState as useState8 } from "react";
+import { useState as useState11 } from "react";
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.css.ts
 var import_createRuntimeFn5 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
-var ExpanderIconCls = "_16lm1iw6 _16lm1iwf _16lm1iwd";
+var ExpanderIconCls = "_16lm1iw6 _16lm1iwg _16lm1iwd";
 var ExpanderIconClsVariants = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "", variantClassNames: { expanded: { true: "_16lm1iwc", false: "_198z9782" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
 function ExpanderIcon(props) {
   var _a;
   const { size = 24 } = props;
-  const [expanded, setExpanded] = useState8((_a = props.expanded) != null ? _a : props.defaultExpanded);
+  const [expanded, setExpanded] = useState11((_a = props.expanded) != null ? _a : props.defaultExpanded);
   const onClick = () => {
     var _a2;
     (_a2 = props.onChange) == null ? void 0 : _a2.call(props, !expanded);
@@ -5204,12 +5884,12 @@ function ExpanderIcon(props) {
       setExpanded(!expanded);
     }
   };
-  useEffect15(() => {
+  useEffect18(() => {
     if (isControlled("expanded", props)) {
       setExpanded(props.expanded);
     }
   }, [props.expanded]);
-  return /* @__PURE__ */ createElement18("svg", {
+  return /* @__PURE__ */ createElement22("svg", {
     "data-name": "expander-icon",
     xmlns: "http://www.w3.org/2000/svg",
     height: `${size}px`,
@@ -5220,22 +5900,22 @@ function ExpanderIcon(props) {
     className: join(props.className, ExpanderIconCls, ExpanderIconClsVariants({
       expanded
     }), "InfiniteIcon", "InfiniteIcon-expander", `InfiniteIcon-expander--${expanded ? "expanded" : "collapsed"}`)
-  }, /* @__PURE__ */ createElement18("path", {
+  }, /* @__PURE__ */ createElement22("path", {
     d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
   }));
 }
 
 // src/components/InfiniteTable/components/icons/LoadingIcon.tsx
 import {
-  createElement as createElement19
+  createElement as createElement23
 } from "react";
 
 // src/components/InfiniteTable/components/icons/LoadingIcon.css.ts
-var LoadingIconCls = "_16lm1iw8 _16lm1iwf _16lm1iwd";
+var LoadingIconCls = "_16lm1iw8 _16lm1iwg _16lm1iwd";
 
 // src/components/InfiniteTable/components/icons/LoadingIcon.tsx
 var LoadingIcon = (props) => {
-  return /* @__PURE__ */ createElement19("svg", {
+  return /* @__PURE__ */ createElement23("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     style: {
       margin: "auto",
@@ -5247,14 +5927,14 @@ var LoadingIcon = (props) => {
     viewBox: "0 0 100 100",
     preserveAspectRatio: "xMidYMid",
     className: join(props.className, LoadingIconCls, "InfiniteIcon", "InfiniteIcon-loading")
-  }, /* @__PURE__ */ createElement19("circle", {
+  }, /* @__PURE__ */ createElement23("circle", {
     cx: "50",
     cy: "50",
     fill: "none",
     strokeWidth: "10",
     r: "35",
     strokeDasharray: "164.93361431346415 56.97787143782138"
-  }, /* @__PURE__ */ createElement19("animateTransform", {
+  }, /* @__PURE__ */ createElement23("animateTransform", {
     attributeName: "transform",
     type: "rotate",
     repeatCount: "indefinite",
@@ -5274,7 +5954,7 @@ function getGroupColumnRender({
     var _a, _b, _c;
     let { value, rowInfo, column, groupBy, pivotBy } = renderOptions;
     if (column.renderValue) {
-      value = /* @__PURE__ */ createElement20(RenderHookComponent, {
+      value = /* @__PURE__ */ createElement24(RenderHookComponent, {
         render: column.renderValue,
         renderParam: renderOptions
       });
@@ -5304,22 +5984,22 @@ function getGroupColumnRender({
     const showExpanderIcon = pivotBy ? (((_b = groupRowInfo.groupKeys) == null ? void 0 : _b.length) || 0) < (groupBy == null ? void 0 : groupBy.length) : (((_c = groupRowInfo.groupKeys) == null ? void 0 : _c.length) || 0) <= (groupBy == null ? void 0 : groupBy.length);
     const isLoading = showLoadingIcon(groupRowInfo);
     if (isLoading) {
-      icon = /* @__PURE__ */ createElement20(LoadingIcon, null);
+      icon = /* @__PURE__ */ createElement24(LoadingIcon, null);
     } else if (showExpanderIcon) {
-      const defaultIcon = /* @__PURE__ */ createElement20(ExpanderIcon, {
+      const defaultIcon = /* @__PURE__ */ createElement24(ExpanderIcon, {
         expanded: !collapsed,
         onChange: () => {
           toggleGroupRow(groupKeys);
         }
       });
-      icon = column.renderGroupIcon ? /* @__PURE__ */ createElement20(RenderHookComponent, {
+      icon = column.renderGroupIcon ? /* @__PURE__ */ createElement24(RenderHookComponent, {
         render: column.renderGroupIcon,
         renderParam: Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)
       }) : defaultIcon;
     }
-    return /* @__PURE__ */ createElement20("div", {
+    return /* @__PURE__ */ createElement24("div", {
       className: join(display.flex, alignItems.center)
-    }, icon, /* @__PURE__ */ createElement20("div", {
+    }, icon, /* @__PURE__ */ createElement24("div", {
       className: cssEllipsisClassName
     }, value != null ? value : null));
   };
@@ -5364,9 +6044,9 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
       const showExpanderIcon = rowInfo.isGroupRow ? pivotBy ? (((_a = rowInfo.groupKeys) == null ? void 0 : _a.length) || 0) < (groupBy == null ? void 0 : groupBy.length) : (((_b = rowInfo.groupKeys) == null ? void 0 : _b.length) || 0) <= (groupBy == null ? void 0 : groupBy.length) : false;
       const isLoading = showLoadingIcon(rowInfo);
       if (isLoading) {
-        icon = /* @__PURE__ */ createElement20(LoadingIcon, null);
+        icon = /* @__PURE__ */ createElement24(LoadingIcon, null);
       } else if (showExpanderIcon) {
-        const defaultIcon = /* @__PURE__ */ createElement20(ExpanderIcon, {
+        const defaultIcon = /* @__PURE__ */ createElement24(ExpanderIcon, {
           expanded: !collapsed,
           onChange: () => {
             if (!rowInfo.isGroupRow) {
@@ -5381,9 +6061,9 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
           icon = column.renderGroupIcon(renderParam);
         }
       }
-      return /* @__PURE__ */ createElement20("div", {
+      return /* @__PURE__ */ createElement24("div", {
         className: join(display.flex, alignItems.center, GroupRowExpanderCls)
-      }, icon, /* @__PURE__ */ createElement20("div", {
+      }, icon, /* @__PURE__ */ createElement24("div", {
         className: cssEllipsisClassName
       }, value != null ? value : null));
     }
@@ -5399,11 +6079,11 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
 }
 
 // src/components/InfiniteTable/hooks/useEffectWithRaf.ts
-import { useEffect as useEffect16, useRef as useRef15 } from "react";
+import { useEffect as useEffect19, useRef as useRef17 } from "react";
 function useEffectWithRaf(fn, deps) {
-  const rafId = useRef15(0);
-  const removeFnRaf = useRef15();
-  useEffect16(() => {
+  const rafId = useRef17(0);
+  const removeFnRaf = useRef17();
+  useEffect19(() => {
     rafId.current = requestAnimationFrame(() => {
       removeFnRaf.current = fn();
     });
@@ -5420,7 +6100,7 @@ function useEffectWithRaf(fn, deps) {
 }
 
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
-import { useCallback as useCallback13 } from "react";
+import { useCallback as useCallback14 } from "react";
 
 // src/utils/groupAndPivot/index.ts
 var LAZY_ROOT_KEY_FOR_GROUPS = "____root____";
@@ -5488,21 +6168,18 @@ function lazyGroup(groupParams, rootData) {
   rootData.visitDepthFirst((lazyGroupRowInfo, keys, _index, next) => {
     const [_rootKey, ...currentGroupKeys] = keys;
     const dataArray = lazyGroupRowInfo.children;
-    if (currentGroupKeys.length == groupBy.length && groupBy.length) {
-      const deepMapGroupValue = deepMap.get(currentGroupKeys);
-      if (deepMapGroupValue) {
-        deepMapGroupValue.items = dataArray;
-      }
-      return next == null ? void 0 : next();
+    const current = deepMap.get(currentGroupKeys);
+    if (current) {
+      current.cache = lazyGroupRowInfo.cache;
+      current.childrenLoading = lazyGroupRowInfo.childrenLoading;
+      current.childrenAvailable = lazyGroupRowInfo.childrenAvailable;
+      current.error = lazyGroupRowInfo.error;
     }
-    if (lazyGroupRowInfo) {
-      const current = deepMap.get(currentGroupKeys);
+    if (currentGroupKeys.length == groupBy.length && groupBy.length) {
       if (current) {
-        current.cache = lazyGroupRowInfo.cache;
-        current.childrenLoading = lazyGroupRowInfo.childrenLoading;
-        current.childrenAvailable = lazyGroupRowInfo.childrenAvailable;
-        current.error = lazyGroupRowInfo.error;
+        current.items = dataArray;
       }
+      return next == null ? void 0 : next();
     }
     for (let i = 0, len = dataArray.length; i < len; i++) {
       if (!dataArray[i]) {
@@ -5521,10 +6198,8 @@ function lazyGroup(groupParams, rootData) {
       }
       const dataObject = dataArray[i].data;
       const dataKeys = dataArray[i].keys;
-      const item = dataObject;
       if (dataKeys.length) {
-        const { field: groupByProperty } = groupBy[dataKeys.length - 1];
-        const key = item[groupByProperty];
+        const key = dataKeys[dataKeys.length - 1];
         currentGroupKeys.push(key);
       }
       const deepMapGroupValue = {
@@ -5687,6 +6362,7 @@ function flatten(groupResult) {
   return result;
 }
 function getEnhancedGroupData(options, deepMapValue) {
+  var _a;
   const { groupBy, groupKeys, collapsed, parents, reducers, lazyLoad } = options;
   const groupNesting = groupKeys.length;
   const {
@@ -5695,9 +6371,9 @@ function getEnhancedGroupData(options, deepMapValue) {
     pivotDeepMap,
     commonData
   } = deepMapValue;
-  let data = null;
+  let data = commonData != null ? commonData : null;
   if (Object.keys(reducerResults).length > 0) {
-    data = commonData || {};
+    data = __spreadValues({}, commonData);
     for (const key in reducers)
       if (reducers.hasOwnProperty(key)) {
         const reducer = reducers[key];
@@ -5708,7 +6384,7 @@ function getEnhancedGroupData(options, deepMapValue) {
       }
   }
   let selfLoaded = true;
-  let theValue = groupKeys[groupKeys.length - 1];
+  let theValue = (_a = data != null ? data[groupBy[groupKeys.length - 1]] : null) != null ? _a : groupKeys[groupKeys.length - 1];
   if (typeof theValue === "string" && theValue.startsWith(NOT_LOADED_YET_KEY_PREFIX)) {
     selfLoaded = false;
     theValue = null;
@@ -5722,6 +6398,7 @@ function getEnhancedGroupData(options, deepMapValue) {
     collapsed,
     dataSourceHasGrouping: true,
     selfLoaded,
+    error: options.error,
     parents,
     deepRowInfoArray: [],
     collapsedChildrenCount: 0,
@@ -5785,6 +6462,7 @@ function enhancedFlatten(param) {
       indexInParentGroups: Array.from(indexInParentGroups),
       indexInAll: result.length,
       groupKeys,
+      error: deepMapValue.error,
       childrenLoading: deepMapValue.childrenLoading,
       childrenAvailable: deepMapValue.childrenAvailable,
       directChildrenCount: groupKeys.length === groupByStrings.length ? deepMapValue.items.length : deepMap.getDirectChildrenSizeFor(groupKeys),
@@ -5830,8 +6508,9 @@ function enhancedFlatten(param) {
           }
           for (let index = 0, len = items.length; index < len; index++) {
             const item = items[index];
+            const indexInAll = startIndex + index;
             const rowInfo = {
-              id: item ? toPrimaryKey(item) : `${groupKeys}-${index}`,
+              id: item ? toPrimaryKey(item, indexInAll) : `${groupKeys}-${index}`,
               data: item,
               dataSourceHasGrouping: true,
               isGroupRow: false,
@@ -5842,7 +6521,7 @@ function enhancedFlatten(param) {
               parents: Array.from(parents),
               indexInParentGroups: [...indexInParentGroups, index],
               indexInGroup: index,
-              indexInAll: startIndex + index,
+              indexInAll,
               groupBy: groupByStrings,
               groupNesting,
               groupCount: enhancedGroupData.groupCount
@@ -5875,8 +6554,8 @@ function enhancedFlatten(param) {
 
 // src/components/DataSource/index.tsx
 import {
-  Fragment as Fragment2,
-  createElement as createElement21
+  Fragment as Fragment3,
+  createElement as createElement25
 } from "react";
 
 // src/utils/multisort/sortTypes.ts
@@ -5888,11 +6567,11 @@ var stringComparator = function(first, second) {
   second = `${second}`;
   return first.localeCompare(second);
 };
-var sortTypes = {
+var defaultSortTypes = {
   number: numberComparator,
   string: stringComparator
 };
-var sortTypes_default = sortTypes;
+var sortTypes_default = defaultSortTypes;
 
 // src/utils/multisort/index.ts
 var multisort = (sortInfo, array, get) => {
@@ -5905,7 +6584,8 @@ var getSingleSortFunction = (info) => {
     return;
   }
   const field = info.field;
-  var dir = info.dir < 0 ? -1 : info.dir > 0 ? 1 : 0;
+  const valueGetter = info.valueGetter;
+  const dir = info.dir < 0 ? -1 : info.dir > 0 ? 1 : 0;
   if (!dir) {
     return;
   }
@@ -5920,8 +6600,8 @@ var getSingleSortFunction = (info) => {
     fn = sortTypes_default.string;
   }
   return (first, second) => {
-    const a = field ? first[field] : first;
-    const b = field ? second[field] : second;
+    const a = valueGetter ? valueGetter(first) : field ? first[field] : first;
+    const b = valueGetter ? valueGetter(second) : field ? second[field] : second;
     return dir * fn(a, b);
   };
 };
@@ -5935,34 +6615,144 @@ var getMultisortFunction = (sortInfo, get) => {
       first = get(first);
       second = get(second);
     }
-    let result = 0;
-    let i = 0;
-    let fn;
-    const len = fns.length;
-    for (; i < len; i++) {
-      fn = fns[i];
-      if (!fn) {
-        continue;
+    let result = 0;
+    let i = 0;
+    let fn;
+    const len = fns.length;
+    for (; i < len; i++) {
+      fn = fns[i];
+      if (!fn) {
+        continue;
+      }
+      result = fn(first, second);
+      if (result !== 0) {
+        return result;
+      }
+    }
+    return result;
+  };
+};
+
+// src/components/DataSource/GroupRowsState.ts
+var GroupRowsState = class {
+  constructor(state) {
+    this.update(state instanceof GroupRowsState ? state.getState() : state);
+  }
+  getState() {
+    var _a, _b, _c, _d;
+    return {
+      expandedRows: this.expandedAll ? true : (_b = (_a = this.expandedMap) == null ? void 0 : _a.topDownKeys()) != null ? _b : [],
+      collapsedRows: this.collapsedAll ? true : (_d = (_c = this.collapsedMap) == null ? void 0 : _c.topDownKeys()) != null ? _d : []
+    };
+  }
+  destroy() {
+    var _a, _b;
+    (_a = this.expandedMap) == null ? void 0 : _a.clear();
+    (_b = this.collapsedMap) == null ? void 0 : _b.clear();
+    delete this.expandedMap;
+    delete this.collapsedMap;
+  }
+  update(state) {
+    var _a, _b, _c, _d;
+    this.initialState = state;
+    const { collapsedRows, expandedRows } = this.initialState;
+    this.collapsedAll = collapsedRows === true;
+    this.expandedAll = expandedRows === true;
+    if (this.collapsedAll && this.expandedAll) {
+      throw `Cannot have both collapsedRows and expandedRows be true!`;
+    }
+    if (collapsedRows !== true) {
+      (_a = this.collapsedMap) == null ? void 0 : _a.clear();
+      this.collapsedMap = (_b = this.collapsedMap) != null ? _b : new DeepMap(collapsedRows.map((keys) => [keys, true]));
+    }
+    if (expandedRows !== true) {
+      (_c = this.expandedMap) == null ? void 0 : _c.clear();
+      this.expandedMap = (_d = this.expandedMap) != null ? _d : new DeepMap(expandedRows.map((keys) => [keys, true]));
+    }
+  }
+  areAllCollapsed() {
+    return this.collapsedAll && (this.expandedMap ? this.expandedMap.size === 0 : true);
+  }
+  areAllExpanded() {
+    return this.expandedAll && (this.collapsedMap ? this.collapsedMap.size === 0 : true);
+  }
+  collapseAll() {
+    this.update({
+      collapsedRows: true,
+      expandedRows: []
+    });
+  }
+  expandAll() {
+    this.update({
+      expandedRows: true,
+      collapsedRows: []
+    });
+  }
+  isGroupRowExpanded(keys) {
+    var _a, _b;
+    if (this.expandedAll === true) {
+      if (this.collapsedAll === true) {
+        throw 'Cannot have both expandedRows and collapsedRows be "true"';
+      }
+      return !((_a = this.collapsedMap) == null ? void 0 : _a.has(keys));
+    }
+    return (_b = this.expandedMap) == null ? void 0 : _b.has(keys);
+  }
+  isGroupRowCollapsed(keys) {
+    return !this.isGroupRowExpanded(keys);
+  }
+  setGroupRowExpanded(keys, shouldExpand) {
+    var _a;
+    if (shouldExpand === this.isGroupRowExpanded(keys)) {
+      return;
+    }
+    if (shouldExpand) {
+      if (this.collapsedAll === true) {
+        if (!this.expandedMap) {
+          throw `No expandedMap found when trying to expand group row ${keys.join(",")}`;
+        }
+        this.expandedMap.set(keys, true);
+      } else if (this.expandedAll === true) {
+        if (!this.collapsedMap) {
+          throw `No collapsedMap found when trying to expand group row ${keys.join(",")}`;
+        }
+        this.collapsedMap.delete(keys);
       }
-      result = fn(first, second);
-      if (result !== 0) {
-        return result;
+    } else {
+      if (this.expandedAll === true) {
+        if (!this.collapsedMap) {
+          throw `No collapsedMap found when trying to collapse group row ${keys.join(",")}`;
+        }
+        this.collapsedMap.set(keys, true);
+      } else if (this.collapsedAll === true) {
+        if (!this.expandedMap) {
+          throw `No expandedMap found when trying to collapse group row ${keys.join(",")}`;
+        }
+        (_a = this.expandedMap) == null ? void 0 : _a.delete(keys);
       }
     }
-    return result;
-  };
+  }
+  collapseGroupRow(keys) {
+    this.setGroupRowExpanded(keys, false);
+  }
+  expandGroupRow(keys) {
+    this.setGroupRowExpanded(keys, true);
+  }
+  toggleGroupRow(keys) {
+    this.setGroupRowExpanded(keys, !this.isGroupRowExpanded(keys));
+  }
 };
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-import { useEffect as useEffect18, useMemo as useMemo7, useRef as useRef17, useState as useState9 } from "react";
+import { useEffect as useEffect21, useMemo as useMemo9, useRef as useRef19, useState as useState12 } from "react";
 
 // src/components/hooks/useEffectWithChanges.ts
-import { useEffect as useEffect17, useRef as useRef16 } from "react";
+import { useEffect as useEffect20, useRef as useRef18 } from "react";
 function useEffectWithChanges(fn, deps) {
-  const prevRef = useRef16({});
-  const oldValuesRef = useRef16({});
+  const prevRef = useRef18({});
+  const oldValuesRef = useRef18({});
   const oldValues = oldValuesRef.current;
-  const changesRef = useRef16({});
+  const changesRef = useRef18({});
   const changes = changesRef.current;
   const useEffectDeps = [];
   for (const k in deps) {
@@ -5975,7 +6765,7 @@ function useEffectWithChanges(fn, deps) {
     }
   }
   prevRef.current = deps;
-  useEffect17(() => {
+  useEffect20(() => {
     const changes2 = changesRef.current;
     const result = fn(changes2, oldValues);
     changesRef.current = {};
@@ -5984,6 +6774,25 @@ function useEffectWithChanges(fn, deps) {
   }, useEffectDeps);
 }
 
+// src/components/InfiniteTable/utils/assignFiltered.ts
+function assignFiltered(filterFn, target, ...rest) {
+  const result = target;
+  rest.forEach((obj) => {
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key) && filterFn(obj[key], key)) {
+        result[key] = obj[key];
+      }
+    }
+  });
+  return result;
+}
+function assignNonNull(target, ...rest) {
+  return assignFiltered((value) => value != null, target, ...rest);
+}
+function assignExcept(exceptKeys, target, ...rest) {
+  return assignFiltered((_value, key) => !(key in exceptKeys), target, ...rest);
+}
+
 // src/components/DataSource/privateHooks/getChangeDetect.ts
 function getChangeDetect() {
   var _a;
@@ -6009,6 +6818,7 @@ function buildDataSourceDataParams(componentState, overrides) {
     sortInfo,
     groupBy: componentState.groupBy,
     pivotBy: componentState.pivotBy,
+    filterValue: componentState.filterValue,
     aggregationReducers: componentState.aggregationReducers
   };
   if (dataSourceParams.groupBy) {
@@ -6028,6 +6838,13 @@ function buildDataSourceDataParams(componentState, overrides) {
   if (overrides) {
     Object.assign(dataSourceParams, overrides);
   }
+  if (dataSourceParams.filterValue && dataSourceParams.filterValue.length) {
+    dataSourceParams.filterValue = dataSourceParams.filterValue.map((f) => {
+      const value = __spreadValues({}, f);
+      delete value.valueGetter;
+      return value;
+    });
+  }
   const changes = {};
   const oldDataSourceParams = componentState.dataParams || {};
   for (const k in dataSourceParams) {
@@ -6048,6 +6865,13 @@ function loadData(data, componentState, actions, overrides) {
     const lazyGroupData = componentState.originalLazyGroupData;
     const key = [LAZY_ROOT_KEY_FOR_GROUPS, ...dataParams.groupKeys || []];
     const existingGroupRowInfo = lazyGroupData.get(key);
+    if (!existingGroupRowInfo) {
+      const groupCacheKeys = [
+        ...dataParams.groupKeys || [],
+        dataParams.lazyLoadStartIndex
+      ];
+      componentState.lazyLoadCacheOfLoadedBatches.set(groupCacheKeys, true);
+    }
     if (existingGroupRowInfo && existingGroupRowInfo.cache && key.length > 1) {
       const items = existingGroupRowInfo.children;
       const len = items.length;
@@ -6073,7 +6897,8 @@ function loadData(data, componentState, actions, overrides) {
         childrenLoading: true,
         childrenAvailable: false,
         cache: CACHE_DEFAULT,
-        totalCount: 0
+        totalCount: 0,
+        totalCountUnfiltered: 0
       });
     }
     actions.originalLazyGroupDataChangeDetect = getChangeDetect();
@@ -6097,6 +6922,9 @@ function loadData(data, componentState, actions, overrides) {
       if (remoteData.mappings) {
         actions.pivotMappings = remoteData.mappings;
       }
+      if (remoteData.totalCountUnfiltered) {
+        actions.unfilteredCount = remoteData.totalCountUnfiltered;
+      }
       if (componentState.lazyLoad) {
         let resolveRemoteData = function(keys, remoteData2, parentKeys) {
           var _a, _b, _c, _d;
@@ -6107,24 +6935,19 @@ function loadData(data, componentState, actions, overrides) {
             childrenLoading: false,
             childrenAvailable: true,
             totalCount: (_a = remoteData2.totalCount) != null ? _a : dataArray2.length,
-            children: dataArray2
+            totalCountUnfiltered: (_b = remoteData2.totalCount) != null ? _b : dataArray2.length,
+            children: dataArray2,
+            error: remoteData2.error
           };
           const childDatasets = [];
           if (dataParams.lazyLoadBatchSize && !parentKeys) {
             const existingGroupRowInfo = lazyGroupData.get(theKey);
-            const currentGroupRowInfo = existingGroupRowInfo != null ? existingGroupRowInfo : {
-              children: [],
-              childrenAvailable: true,
-              childrenLoading: false,
-              totalCount: newGroupRowInfo.totalCount,
-              cache: (_b = newGroupRowInfo.cache) != null ? _b : CACHE_DEFAULT
-            };
-            if (existingGroupRowInfo) {
-              existingGroupRowInfo.cache = newGroupRowInfo.cache;
-              existingGroupRowInfo.totalCount = newGroupRowInfo.totalCount;
-              existingGroupRowInfo.childrenLoading = false;
-              existingGroupRowInfo.childrenAvailable = true;
-              existingGroupRowInfo.error = newGroupRowInfo.error;
+            const isGroupNew = !existingGroupRowInfo;
+            const currentGroupRowInfo = assignExcept({
+              children: true
+            }, existingGroupRowInfo || {}, newGroupRowInfo);
+            if (isGroupNew) {
+              currentGroupRowInfo.chidren = [];
             }
             currentGroupRowInfo.children.length = currentGroupRowInfo.totalCount;
             const start = (_c = dataParams.lazyLoadStartIndex) != null ? _c : 0;
@@ -6142,13 +6965,13 @@ function loadData(data, componentState, actions, overrides) {
                 });
               }
             }
-            if (!existingGroupRowInfo) {
+            if (isGroupNew) {
               lazyGroupData.set(theKey, currentGroupRowInfo);
             }
           } else {
             if (parentKeys) {
               newGroupRowInfo.children.forEach((child) => {
-                if (child.dataset) {
+                if (child && child.dataset) {
                   childDatasets.push({
                     keys: child.keys,
                     dataset: child.dataset
@@ -6205,16 +7028,17 @@ function useLoadData() {
     sortInfo,
     groupBy,
     pivotBy,
+    filterValue,
     livePagination,
     livePaginationCursor,
     cursorId: stateCursorId
   } = componentState;
-  const [scrollbars, setScrollbars] = useState9({
+  const [scrollbars, setScrollbars] = useState12({
     vertical: false,
     horizontal: false
   });
-  const scrollbarsRef = useRef17(scrollbars);
-  useEffect18(() => {
+  const scrollbarsRef = useRef19(scrollbars);
+  useEffect21(() => {
     notifyScrollbarsChange.onChange((scrollbars2) => {
       if (!scrollbars2) {
         return;
@@ -6224,7 +7048,7 @@ function useLoadData() {
     });
     return () => notifyScrollbarsChange.destroy();
   }, [notifyScrollbarsChange]);
-  useEffect18(() => {
+  useEffect21(() => {
     if (!livePagination) {
       return;
     }
@@ -6238,7 +7062,7 @@ function useLoadData() {
     });
     return () => cancelAnimationFrame(frameId);
   }, [livePaginationCursor]);
-  useEffect18(() => {
+  useEffect21(() => {
     if (!livePagination || livePaginationCursor !== void 0) {
       return;
     }
@@ -6252,7 +7076,7 @@ function useLoadData() {
     });
     return () => cancelAnimationFrame(frameId);
   }, [dataArray.length, livePaginationCursor]);
-  useEffect18(() => {
+  useEffect21(() => {
     const state = getComponentState();
     const { livePaginationCursor: livePaginationCursor2, livePagination: livePagination2, dataArray: dataArray2 } = state;
     if (!scrollbars.vertical && livePagination2) {
@@ -6267,9 +7091,10 @@ function useLoadData() {
     sortInfo,
     groupBy,
     pivotBy,
+    filterValue,
     cursorId: livePagination ? stateCursorId : null
   };
-  const initialRef = useRef17(true);
+  const initialRef = useRef19(true);
   useLazyLoadRange();
   useEffectWithChanges(() => {
     const componentState2 = getComponentState();
@@ -6301,7 +7126,7 @@ function useLazyLoadRange() {
     componentActions: actions,
     componentState
   } = useComponentState();
-  useEffect18(() => {
+  useEffect21(() => {
     actions.lazyLoadCacheOfLoadedBatches = new DeepMap();
   }, [componentState.data, componentState.dataParams]);
   const {
@@ -6310,7 +7135,7 @@ function useLazyLoadRange() {
     dataArray,
     scrollStopDelayUpdatedByTable
   } = componentState;
-  const latestRenderRangeRef = useRef17(null);
+  const latestRenderRangeRef = useRef19(null);
   const loadRange = (renderRange, cache = getComponentState().lazyLoadCacheOfLoadedBatches) => {
     const componentState2 = getComponentState();
     renderRange = renderRange || latestRenderRangeRef.current;
@@ -6329,8 +7154,8 @@ function useLazyLoadRange() {
       componentActions: actions
     }, cache);
   };
-  const debouncedLoadRange = useMemo7(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
-  useEffect18(() => {
+  const debouncedLoadRange = useMemo9(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
+  useEffect21(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       return notifyRenderRangeChange.onChange((renderRange) => {
         latestRenderRangeRef.current = renderRange;
@@ -6339,7 +7164,7 @@ function useLazyLoadRange() {
     }
     return;
   }, [lazyLoadBatchSize]);
-  useEffect18(() => {
+  useEffect21(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
     }
@@ -6372,7 +7197,7 @@ function lazyLoadRange(options, cache) {
       theGroupKeys.pop();
     }
     const cacheKeys = theGroupKeys.length ? theGroupKeys : rootGroupKeys;
-    const indexInGroup = rowInfo.isGroupRow ? rowInfo.indexInGroup : rowInfo.indexInAll;
+    const indexInGroup = rowInfo.dataSourceHasGrouping ? rowInfo.indexInGroup : rowInfo.indexInAll;
     if (rowInfo.isGroupRow && !rowInfo.collapsed && !rowInfo.childrenAvailable) {
       const currentFnCall = {
         lazyLoadStartIndex: 0,
@@ -6395,7 +7220,7 @@ function lazyLoadRange(options, cache) {
     if (!rowLoaded) {
       let cachedFnCalls = perGroupFnCalls.get(cacheKeys);
       const batchStartIndexInGroup = Math.floor(indexInGroup / lazyLoadBatchSize) * lazyLoadBatchSize;
-      const offset = (rowInfo.isGroupRow ? rowInfo.indexInGroup : rowInfo.indexInAll) - batchStartIndexInGroup;
+      const offset = indexInGroup - batchStartIndexInGroup;
       const absoluteIndexOfBatchStart = dataArray[rowInfo.indexInAll - offset].indexInAll;
       const batchStartRowLoaded = isRowLoaded(absoluteIndexOfBatchStart);
       const batchStartRowId = dataArray[absoluteIndexOfBatchStart].id;
@@ -6431,177 +7256,67 @@ function lazyLoadRange(options, cache) {
     const args = [componentState.data, componentState, componentActions, fnCall];
     return promise.then(() => getRafPromise()).then(() => loadData(...args));
   }, initialPromise);
-}
-
-// src/utils/shallowEqualObjects.ts
-function shallowEqualObjects(objA, objB, ignoreKeys) {
-  if (objA === objB) {
-    return true;
-  }
-  if (!objA || !objB) {
-    return false;
-  }
-  var aKeys = Object.keys(objA);
-  var bKeys = Object.keys(objB);
-  if (ignoreKeys) {
-    aKeys = aKeys.filter((key2) => !ignoreKeys.has(key2));
-    bKeys = bKeys.filter((key2) => !ignoreKeys.has(key2));
-  }
-  var len = aKeys.length;
-  if (bKeys.length !== len) {
-    return false;
-  }
-  for (var i = 0; i < len; i++) {
-    var key = aKeys[i];
-    if (ignoreKeys) {
-      if (ignoreKeys.has(key)) {
-        continue;
-      }
-    }
-    if (objA[key] !== objB[key] || !Object.prototype.hasOwnProperty.call(objB, key)) {
-      return false;
-    }
-  }
-  return true;
-}
-
-// src/components/utils/discardCallsWithEqualArg.ts
-var map = new WeakMap();
-var getCompareDefault = (a) => a;
-function discardCallsWithEqualArg(fn, timeframe = 50, getCompareObject) {
-  map.set(fn, {
-    lastCallTime: 0,
-    lastCallArg: null
-  });
-  const getCompare = getCompareObject != null ? getCompareObject : getCompareDefault;
-  return (arg) => {
-    const { lastCallTime, lastCallArg } = map.get(fn) || {
-      lastCallTime: 0,
-      lastCallArg: null
-    };
-    const now = Date.now();
-    const diff = now - lastCallTime;
-    const objectsEqual = shallowEqualObjects(getCompare(lastCallArg), getCompare(arg));
-    if (diff < timeframe && objectsEqual) {
-      return;
-    }
-    map.set(fn, {
-      lastCallTime: now,
-      lastCallArg: arg
-    });
-    fn(arg);
-  };
-}
-
-// src/components/DataSource/GroupRowsState.ts
-var GroupRowsState = class {
-  constructor(state) {
-    this.update(state instanceof GroupRowsState ? state.getState() : state);
-  }
-  getState() {
-    var _a, _b, _c, _d;
-    return {
-      expandedRows: this.expandedAll ? true : (_b = (_a = this.expandedMap) == null ? void 0 : _a.topDownKeys()) != null ? _b : [],
-      collapsedRows: this.collapsedAll ? true : (_d = (_c = this.collapsedMap) == null ? void 0 : _c.topDownKeys()) != null ? _d : []
-    };
-  }
-  destroy() {
-    var _a, _b;
-    (_a = this.expandedMap) == null ? void 0 : _a.clear();
-    (_b = this.collapsedMap) == null ? void 0 : _b.clear();
-    delete this.expandedMap;
-    delete this.collapsedMap;
-  }
-  update(state) {
-    var _a, _b, _c, _d;
-    this.initialState = state;
-    const { collapsedRows, expandedRows } = this.initialState;
-    this.collapsedAll = collapsedRows === true;
-    this.expandedAll = expandedRows === true;
-    if (this.collapsedAll && this.expandedAll) {
-      throw `Cannot have both collapsedRows and expandedRows be true!`;
-    }
-    if (collapsedRows !== true) {
-      (_a = this.collapsedMap) == null ? void 0 : _a.clear();
-      this.collapsedMap = (_b = this.collapsedMap) != null ? _b : new DeepMap(collapsedRows.map((keys) => [keys, true]));
-    }
-    if (expandedRows !== true) {
-      (_c = this.expandedMap) == null ? void 0 : _c.clear();
-      this.expandedMap = (_d = this.expandedMap) != null ? _d : new DeepMap(expandedRows.map((keys) => [keys, true]));
-    }
-  }
-  areAllCollapsed() {
-    return this.collapsedAll && (this.expandedMap ? this.expandedMap.size === 0 : true);
-  }
-  areAllExpanded() {
-    return this.expandedAll && (this.collapsedMap ? this.collapsedMap.size === 0 : true);
-  }
-  collapseAll() {
-    this.update({
-      collapsedRows: true,
-      expandedRows: []
-    });
-  }
-  expandAll() {
-    this.update({
-      expandedRows: true,
-      collapsedRows: []
-    });
-  }
-  isGroupRowExpanded(keys) {
-    var _a, _b;
-    if (this.expandedAll === true) {
-      if (this.collapsedAll === true) {
-        throw 'Cannot have both expandedRows and collapsedRows be "true"';
-      }
-      return !((_a = this.collapsedMap) == null ? void 0 : _a.has(keys));
-    }
-    return (_b = this.expandedMap) == null ? void 0 : _b.has(keys);
-  }
-  isGroupRowCollapsed(keys) {
-    return !this.isGroupRowExpanded(keys);
-  }
-  setGroupRowExpanded(keys, shouldExpand) {
-    var _a;
-    if (shouldExpand === this.isGroupRowExpanded(keys)) {
-      return;
-    }
-    if (shouldExpand) {
-      if (this.collapsedAll === true) {
-        if (!this.expandedMap) {
-          throw `No expandedMap found when trying to expand group row ${keys.join(",")}`;
-        }
-        this.expandedMap.set(keys, true);
-      } else if (this.expandedAll === true) {
-        if (!this.collapsedMap) {
-          throw `No collapsedMap found when trying to expand group row ${keys.join(",")}`;
-        }
-        this.collapsedMap.delete(keys);
-      }
-    } else {
-      if (this.expandedAll === true) {
-        if (!this.collapsedMap) {
-          throw `No collapsedMap found when trying to collapse group row ${keys.join(",")}`;
-        }
-        this.collapsedMap.set(keys, true);
-      } else if (this.collapsedAll === true) {
-        if (!this.expandedMap) {
-          throw `No expandedMap found when trying to collapse group row ${keys.join(",")}`;
-        }
-        (_a = this.expandedMap) == null ? void 0 : _a.delete(keys);
-      }
-    }
+}
+
+// src/utils/shallowEqualObjects.ts
+function shallowEqualObjects(objA, objB, ignoreKeys) {
+  if (objA === objB) {
+    return true;
   }
-  collapseGroupRow(keys) {
-    this.setGroupRowExpanded(keys, false);
+  if (!objA || !objB) {
+    return false;
   }
-  expandGroupRow(keys) {
-    this.setGroupRowExpanded(keys, true);
+  var aKeys = Object.keys(objA);
+  var bKeys = Object.keys(objB);
+  if (ignoreKeys) {
+    aKeys = aKeys.filter((key2) => !ignoreKeys.has(key2));
+    bKeys = bKeys.filter((key2) => !ignoreKeys.has(key2));
   }
-  toggleGroupRow(keys) {
-    this.setGroupRowExpanded(keys, !this.isGroupRowExpanded(keys));
+  var len = aKeys.length;
+  if (bKeys.length !== len) {
+    return false;
   }
-};
+  for (var i = 0; i < len; i++) {
+    var key = aKeys[i];
+    if (ignoreKeys) {
+      if (ignoreKeys.has(key)) {
+        continue;
+      }
+    }
+    if (objA[key] !== objB[key] || !Object.prototype.hasOwnProperty.call(objB, key)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+// src/components/utils/discardCallsWithEqualArg.ts
+var map = new WeakMap();
+var getCompareDefault = (a) => a;
+function discardCallsWithEqualArg(fn, timeframe = 50, getCompareObject) {
+  map.set(fn, {
+    lastCallTime: 0,
+    lastCallArg: null
+  });
+  const getCompare = getCompareObject != null ? getCompareObject : getCompareDefault;
+  return (arg) => {
+    const { lastCallTime, lastCallArg } = map.get(fn) || {
+      lastCallTime: 0,
+      lastCallArg: null
+    };
+    const now = Date.now();
+    const diff = now - lastCallTime;
+    const objectsEqual = shallowEqualObjects(getCompare(lastCallArg), getCompare(arg));
+    if (diff < timeframe && objectsEqual) {
+      return;
+    }
+    map.set(fn, {
+      lastCallTime: now,
+      lastCallArg: arg
+    });
+    fn(arg);
+  };
+}
 
 // src/components/DataSource/state/normalizeSortInfo.ts
 var EMPTY_ARRAY = Object.freeze([]);
@@ -6648,9 +7363,12 @@ function initSetupState() {
     pivotColumns: void 0,
     pivotColumnGroups: void 0,
     dataArray,
+    unfilteredCount: dataArray.length,
+    filteredCount: dataArray.length,
     updatedAt: now,
     groupedAt: 0,
     sortedAt: 0,
+    filteredAt: 0,
     reducedAt: now,
     generateGroupRows: true,
     groupDeepMap: void 0,
@@ -6673,6 +7391,16 @@ var forwardProps2 = (setupState) => {
     pivotBy: 1,
     primaryKey: 1,
     livePagination: 1,
+    filterFunction: 1,
+    filterValue: 1,
+    filterDelay: (filterDelay) => filterDelay != null ? filterDelay : 200,
+    filterTypes: (filterTypes) => {
+      return __spreadValues(__spreadValues({}, defaultFilterTypes), filterTypes);
+    },
+    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,
@@ -6698,10 +7426,25 @@ function getLivePaginationCursorValue(livePaginationCursorProp, state) {
   return livePaginationCursor;
 }
 function mapPropsToState(params) {
+  var _a;
   const { props, state, oldState } = params;
   const controlledSort = isControlledValue(props.sortInfo);
+  const controlledFilter = isControlledValue(props.filterValue);
+  const { filterTypes } = state;
+  const operatorsByFilterType = Object.keys(filterTypes).reduce((acc, key) => {
+    const operators = filterTypes[key].operators;
+    acc[key] = acc[key] || {};
+    const currentFilterTypeOperators = acc[key];
+    operators.forEach((operator) => {
+      currentFilterTypeOperators[operator.name] = operator;
+    });
+    return acc;
+  }, {});
   const result = {
+    operatorsByFilterType,
     controlledSort,
+    controlledFilter,
+    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
   };
@@ -6766,6 +7509,18 @@ function getInterceptActions() {
         });
       }
     },
+    filterValue: (filterValue, { actions, state }) => {
+      const dataParams = buildDataSourceDataParams(state, {
+        filterValue,
+        livePaginationCursor: null
+      });
+      actions.dataParams = dataParams;
+      if (state.livePagination) {
+        requestAnimationFrame(() => {
+          actions.livePaginationCursor = null;
+        });
+      }
+    },
     cursorId: (cursorId, { actions, state }) => {
       const dataParams = buildDataSourceDataParams(state, {
         __cursorId: cursorId
@@ -6847,7 +7602,7 @@ function getPivotColumnsAndColumnGroups({
         pivotGroupKeys: [],
         pivotGroupKey: "",
         pivotIndex: -1,
-        valueGetter: ({ rowInfo }) => {
+        valueFormatter: ({ rowInfo }) => {
           var _a;
           return rowInfo.isGroupRow ? (_a = rowInfo.reducerResults) == null ? void 0 : _a[reducer.id] : null;
         }
@@ -6896,7 +7651,7 @@ function getPivotColumnsAndColumnGroups({
           sortable: false,
           columnGroup: parentColumnGroupId,
           header,
-          valueGetter: ({ rowInfo }) => {
+          valueFormatter: ({ rowInfo }) => {
             var _a, _b;
             if (!rowInfo.isGroupRow) {
               return null;
@@ -6951,7 +7706,7 @@ function getPivotColumnsAndColumnGroups({
             pivotIndex: keys.length - 1,
             pivotBy,
             sortable: false,
-            valueGetter: ({ rowInfo }) => {
+            valueFormatter: ({ rowInfo }) => {
               var _a, _b;
               if (!rowInfo.isGroupRow) {
                 return null;
@@ -6999,9 +7754,68 @@ function toRowInfo(data, id, index) {
     selfLoaded: true
   };
 }
+function filterDataSource(params) {
+  const {
+    filterTypes,
+    filterValue: filterValueArray,
+    operatorsByFilterType,
+    filterFunction,
+    toPrimaryKey
+  } = params;
+  let { dataArray } = params;
+  if (filterFunction) {
+    dataArray = dataArray.filter((data, index, arr) => filterFunction({
+      data,
+      index,
+      dataArray: arr,
+      primaryKey: toPrimaryKey(data, index)
+    }));
+  }
+  if (filterValueArray && filterValueArray.length) {
+    return dataArray.filter((data, index, arr) => {
+      var _a;
+      const param = {
+        data,
+        index,
+        dataArray: arr,
+        primaryKey: toPrimaryKey(data, index)
+      };
+      for (let i = 0, len = filterValueArray.length; i < len; i++) {
+        const currentFilterValue = filterValueArray[i];
+        const {
+          disabled,
+          filterValue,
+          field,
+          filterType: filterTypeKey,
+          valueGetter,
+          operator
+        } = currentFilterValue;
+        const filterType = filterTypes[filterTypeKey];
+        if (disabled || !filterType) {
+          continue;
+        }
+        const currentOperator = (_a = operatorsByFilterType[filterTypeKey]) == null ? void 0 : _a[operator];
+        if (!currentOperator) {
+          continue;
+        }
+        const getter = valueGetter || (({ data: data2 }) => field ? data2[field] : data2);
+        const operatorFnParam = __spreadValues({}, param);
+        operatorFnParam.filterValue = filterValue;
+        operatorFnParam.currentValue = getter(param);
+        operatorFnParam.emptyValues = filterType.emptyValues;
+        if (!currentOperator.fn(operatorFnParam)) {
+          return false;
+        }
+      }
+      return true;
+    });
+  }
+  return dataArray;
+}
 function concludeReducer(params) {
   var _a, _b;
   const { state, previousState } = params;
+  const primaryKeyDescriptor = state.primaryKey;
   const sortInfo = state.sortInfo;
   let shouldSort = !!(sortInfo == null ? void 0 : sortInfo.length) && !state.controlledSort;
   if (state.lazyLoad || state.livePagination) {
@@ -7019,15 +7833,24 @@ function concludeReducer(params) {
     state.originalLazyGroupData = new DeepMap();
     originalDataArrayChanged = true;
   }
+  const { filterFunction, filterValue, filterTypes, operatorsByFilterType } = state;
+  const shouldFilter = !!filterFunction || Array.isArray(filterValue) && filterValue.length;
+  const shouldFilterClientSide = shouldFilter && state.filterMode === "local";
+  const filterDepsChanged = haveDepsChanged(previousState, state, [
+    "filterFunction",
+    "filterValue",
+    "filterTypes"
+  ]);
+  const filterChanged = originalDataArrayChanged || filterDepsChanged;
   const sortInfoChanged = haveDepsChanged(previousState, state, ["sortInfo"]);
-  const sortDepsChanged = originalDataArrayChanged || sortInfoChanged;
+  const sortDepsChanged = originalDataArrayChanged || filterDepsChanged || sortInfoChanged;
+  const shouldFilterAgain = state.filterMode === "local" && (filterChanged || !state.lastFilterDataArray);
   const shouldSortAgain = shouldSort && (sortDepsChanged || !state.lastSortDataArray);
   const groupBy = state.groupBy;
   const pivotBy = state.pivotBy;
   const shouldGroup = groupBy.length > 0 || !!pivotBy;
-  const groupsDepsChanged = originalDataArrayChanged || haveDepsChanged(previousState, state, [
+  const groupsDepsChanged = originalDataArrayChanged || sortDepsChanged || haveDepsChanged(previousState, state, [
     "generateGroupRows",
-    "originalDataArray",
     "originalLazyGroupData",
     "originalLazyGroupDataChangeDetect",
     "groupBy",
@@ -7036,23 +7859,44 @@ function concludeReducer(params) {
     "aggregationReducers",
     "pivotTotalColumnPosition",
     "pivotGrandTotalColumnPosition",
-    "showSeparatePivotColumnForSingleAggregation",
-    "sortInfo"
+    "showSeparatePivotColumnForSingleAggregation"
   ]);
   const shouldGroupAgain = shouldGroup && (groupsDepsChanged || !state.lastGroupDataArray);
   const now = Date.now();
   let dataArray = state.originalDataArray;
-  let rowInfoDataArray = state.dataArray;
-  if (shouldSort) {
+  const toPrimaryKey = typeof primaryKeyDescriptor === "function" ? (data, index) => primaryKeyDescriptor({ data, index }) : (data, _index) => {
+    const pk = data[primaryKeyDescriptor];
+    return pk;
+  };
+  if (!shouldFilter) {
+    state.unfilteredCount = dataArray.length;
+  }
+  if (shouldFilterClientSide) {
+    state.unfilteredCount = dataArray.length;
+    dataArray = shouldFilterAgain ? filterDataSource({
+      dataArray,
+      toPrimaryKey,
+      filterTypes,
+      operatorsByFilterType,
+      filterFunction,
+      filterValue
+    }) : state.lastFilterDataArray;
+    state.lastFilterDataArray = dataArray;
+    state.filteredAt = now;
+  }
+  state.filteredCount = dataArray.length;
+  state.postFilterDataArray = dataArray;
+  const shouldSortClientSide = shouldSort && state.sortMode === "local";
+  if (shouldSortClientSide) {
+    const prevKnownTypes = multisort.knownTypes;
+    multisort.knownTypes = state.sortTypes;
     dataArray = shouldSortAgain ? multisort(sortInfo, [...dataArray]) : state.lastSortDataArray;
+    multisort.knownTypes = prevKnownTypes;
     state.lastSortDataArray = dataArray;
     state.sortedAt = now;
   }
   state.postSortDataArray = dataArray;
-  const toPrimaryKey = (data) => {
-    const pk = data[state.primaryKey];
-    return pk;
-  };
+  let rowInfoDataArray = state.dataArray;
   if (shouldGroup) {
     if (shouldGroupAgain) {
       const groupResult = state.lazyLoad ? lazyGroup({
@@ -7095,7 +7939,7 @@ function concludeReducer(params) {
     state.pivotColumns = void 0;
     const arrayDifferentAfterSortStep = previousState.postSortDataArray != state.postSortDataArray;
     if (arrayDifferentAfterSortStep || groupsDepsChanged) {
-      rowInfoDataArray = dataArray.map((data, index) => toRowInfo(data, data ? toPrimaryKey(data) : index, index));
+      rowInfoDataArray = dataArray.map((data, index) => toRowInfo(data, data ? toPrimaryKey(data, index) : index, index));
     }
   }
   state.postGroupDataArray = rowInfoDataArray;
@@ -7123,7 +7967,7 @@ function DataSourceWithContext(props) {
   if (typeof children === "function") {
     children = children(computedValues);
   }
-  return /* @__PURE__ */ createElement21(Fragment2, null, children);
+  return /* @__PURE__ */ createElement25(Fragment3, null, children);
 }
 var DataSourceRoot = getComponentStateRoot({
   initSetupState,
@@ -7146,14 +7990,14 @@ function DataSourceCmp({ children }) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
-  return /* @__PURE__ */ createElement21(DataSourceContext.Provider, {
+  return /* @__PURE__ */ createElement25(DataSourceContext.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ createElement21(DataSourceWithContext, {
+  }, /* @__PURE__ */ createElement25(DataSourceWithContext, {
     children
   }));
 }
 function DataSource(props) {
-  return /* @__PURE__ */ createElement21(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ createElement21(DataSourceCmp, {
+  return /* @__PURE__ */ createElement25(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ createElement25(DataSourceCmp, {
     children: props.children
   }));
 }
@@ -7161,7 +8005,7 @@ function DataSource(props) {
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
 function useToggleGroupRow() {
   const { getState: getDataSourceState, componentActions: dataSourceActions } = useDataSourceContextValue();
-  const toggleGroupRow = useCallback13((groupKeys) => {
+  const toggleGroupRow = useCallback14((groupKeys) => {
     const state = getDataSourceState();
     const newState = new GroupRowsState(state.groupRowsState);
     newState.toggleGroupRow(groupKeys);
@@ -7193,7 +8037,7 @@ function useToggleGroupRow() {
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
 function useGroupByMap(groupBy) {
-  const groupByMap = useMemo8(() => {
+  const groupByMap = useMemo10(() => {
     return groupBy.reduce((acc, groupBy2, index) => {
       acc.set(groupBy2.field, {
         groupBy: groupBy2,
@@ -7217,13 +8061,13 @@ function useColumnsWhen() {
     }
   } = useComponentState();
   const groupByMap = useGroupByMap(groupBy);
-  useEffect19(() => {
+  useEffect22(() => {
     dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
   }, [groupRenderStrategy]);
-  useEffect19(() => {
+  useEffect22(() => {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
-  useEffect19(() => {
+  useEffect22(() => {
     if (pivotGrandTotalColumnPosition != void 0) {
       dataSourceActions.pivotGrandTotalColumnPosition = pivotGrandTotalColumnPosition;
     }
@@ -7253,7 +8097,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
         base = {
           groupByField: field,
           field,
-          valueGetter: ({ rowInfo }) => {
+          valueFormatter: ({ rowInfo }) => {
             var _a;
             return rowInfo.isGroupRow ? (_a = rowInfo.groupKeys) == null ? void 0 : _a[groupIndex] : rowInfo.value;
           },
@@ -7297,7 +8141,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
     });
     return computedColumns.size === 0 ? void 0 : computedColumns;
   }
-  useEffect19(() => {
+  useEffect22(() => {
     const update = () => {
       componentActions.columnsWhenInlineGroupRenderStrategy = computeColumnsWhenInlineGroupRenderStrategy(columns, groupByMap, groupRenderStrategy, toggleGroupRow);
     };
@@ -7326,7 +8170,7 @@ function useColumnsWhenGrouping() {
     }
   } = useComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  useEffect19(() => {
+  useEffect22(() => {
     const update = () => {
       const columnsWhenGrouping = getColumnsWhenGrouping({
         columns,
@@ -7462,7 +8306,7 @@ function useHideColumns(groupByMap) {
     hideEmptyGroupColumns ? groupRowsState : null,
     hideEmptyGroupColumns
   ]);
-  useEffect19(() => {
+  useEffect22(() => {
     const isGrouped = groupBy.length > 0;
     const currentState = getComponentState();
     const { controlledColumnVisibility, columnVisibility } = currentState;
@@ -7577,7 +8421,7 @@ function getColumnsWhenGrouping(params) {
 }
 
 // src/components/InfiniteTable/hooks/useComputedVisibleColumns.ts
-import { useMemo as useMemo9 } from "react";
+import { useMemo as useMemo11 } from "react";
 
 // src/components/flexbox/index.ts
 var computeFlex = (params) => {
@@ -7734,7 +8578,9 @@ var adjustColumnOrderForPinning = (columnOrder, columnPinning) => {
 };
 
 // src/components/InfiniteTable/utils/getColumnComputedType.ts
-var emptyType = Object.freeze({});
+var emptyType = Object.freeze({
+  filterType: "string"
+});
 function getColumnComputedType(column, columnTypes) {
   const defaultType = columnTypes["default"] || emptyType;
   if (column.type === void 0) {
@@ -7750,22 +8596,6 @@ function getColumnComputedType(column, columnTypes) {
   return column.type.reduce((acc, columnType) => Object.assign(acc, columnTypes[columnType]), {});
 }
 
-// src/components/InfiniteTable/utils/assignFiltered.ts
-function assignFiltered(filterFn, target, ...rest) {
-  let result = target;
-  rest.forEach((obj) => {
-    for (const key in obj) {
-      if (obj.hasOwnProperty(key) && filterFn(obj[key], key)) {
-        result[key] = obj[key];
-      }
-    }
-  });
-  return result;
-}
-function assignNonNull(target, ...rest) {
-  return assignFiltered((value) => value != null, target, ...rest);
-}
-
 // src/components/InfiniteTable/utils/getComputedVisibleColumns.ts
 var logError = err("getComputedVisibleColumns");
 var isColumnVisible = (columnVisibility, _columnVisibilityAssumeVisible, colId) => {
@@ -7786,6 +8616,7 @@ var getComputedVisibleColumns = ({
   columnHeaderCssEllipsis,
   pinnedStartMaxWidth,
   pinnedEndMaxWidth,
+  filterValue,
   sortable,
   sortInfo,
   setSortInfo,
@@ -7800,9 +8631,19 @@ var getComputedVisibleColumns = ({
   columnVisibilityAssumeVisible
 }) => {
   let computedOffset = 0;
+  const filterValueRecord = (filterValue || []).reduce((acc, filterValueItem) => {
+    const { id, field } = filterValueItem;
+    if (field) {
+      acc[field] = filterValueItem;
+    }
+    if (id) {
+      acc[id] = filterValueItem;
+    }
+    return acc;
+  }, {});
   const normalizedColumnOrder = adjustColumnOrderForPinning(columnOrder === true ? [...columns.keys()] : columnOrder, columnPinning);
   const visibleColumnOrder = normalizedColumnOrder.filter((colId) => {
-    let col = columns.get(colId);
+    const col = columns.get(colId);
     if (!col) {
       logError(`Column with id "${colId}" specified in columnOrder array cannot be found in the columns map.`);
       return false;
@@ -7850,7 +8691,7 @@ var getComputedVisibleColumns = ({
         delete colTypeSizing.width;
       }
       colSizing = assignNonNull(colTypeSizing, colSizing);
-      let colFlex = (_a = colSizing.flex) != null ? _a : void 0;
+      const colFlex = (_a = colSizing.flex) != null ? _a : void 0;
       const colMinWidth = (_c = (_b = colSizing.minWidth) != null ? _b : column == null ? void 0 : column.minWidth) != null ? _c : columnMinWidth;
       const colMaxWidth = (_e = (_d = colSizing.maxWidth) != null ? _d : column == null ? void 0 : column.maxWidth) != null ? _e : columnMaxWidth;
       let size = colFlex != void 0 ? void 0 : (_f = colSizing.width) != null ? _f : columnDefaultWidth;
@@ -7893,7 +8734,7 @@ var getComputedVisibleColumns = ({
   });
   const firstPinnedEndAbsoluteOffset = bodySize.width - totalPinnedEndWidth;
   columnsArray.forEach((c, i) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+    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);
@@ -7904,47 +8745,6 @@ var getComputedVisibleColumns = ({
     const computedSortedDesc = computedSorted && !computedSortedAsc;
     const computedSortIndex = (_c = sortingInfo == null ? void 0 : sortingInfo.index) != null ? _c : -1;
     const computedWidth = computedSizes[i];
-    const toggleSort = () => {
-      let currentSortInfo = computedSortInfo;
-      let newColumnSortInfo;
-      if (!currentSortInfo) {
-        newColumnSortInfo = {
-          dir: 1,
-          id,
-          field: c.field,
-          type: c.type
-        };
-      } else {
-        if (computedSortedDesc) {
-          newColumnSortInfo = null;
-        } else {
-          newColumnSortInfo = __spreadProps(__spreadValues({}, computedSortInfo), {
-            dir: -1
-          });
-        }
-      }
-      if (c.field && newColumnSortInfo && !newColumnSortInfo.field) {
-        newColumnSortInfo.field = c.field;
-      }
-      let finalSortInfo = sortInfo ? [...sortInfo] : [];
-      if (multiSort) {
-        if (computedSortIndex === -1) {
-          if (newColumnSortInfo) {
-            finalSortInfo.push(newColumnSortInfo);
-          }
-        } else {
-          finalSortInfo = finalSortInfo.map((info, index) => {
-            if (index === computedSortIndex) {
-              return newColumnSortInfo;
-            }
-            return info;
-          }).filter((x) => x != null);
-        }
-      } else {
-        finalSortInfo = newColumnSortInfo ? [newColumnSortInfo] : [];
-      }
-      setSortInfo(finalSortInfo);
-    };
     const computedPinned = getComputedPinned(id, columnPinning);
     const computedLast = i === visibleColumnOrder.length - 1;
     const computedPinningOffset = computedPinned === "start" ? computedPinnedStartColumnsWidth : computedPinned === "end" ? computedPinnedEndColumnsWidth : computedOffset - computedPinnedStartColumnsWidth;
@@ -7953,23 +8753,46 @@ var getComputedVisibleColumns = ({
     const computedLastInCategory = computedLast || computedPinned !== getComputedPinned(nextColumnId, columnPinning);
     const cssEllipsis = (_e = (_d = c.cssEllipsis) != null ? _d : colType.cssEllipsis) != null ? _e : columnCssEllipsis;
     const headerCssEllipsis = (_j = (_i = (_h = (_g = (_f = c.headerCssEllipsis) != null ? _f : colType.cssEllipsis) != null ? _g : c.cssEllipsis) != null ? _h : colType.headerCssEllipsis) != null ? _i : columnHeaderCssEllipsis) != null ? _j : cssEllipsis;
+    const computedFilterValue = filterValueRecord[id] || c.field ? filterValueRecord[c.field] || null : null;
+    const computedFiltered = computedFilterValue != null;
+    const computedFilterable = (_l = (_k = c.defaultFilterable) != null ? _k : colType.defaultFilterable) != null ? _l : true;
+    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,
+      computedFilterType,
       cssEllipsis,
       headerCssEllipsis,
+      computedFilterValue,
+      computedFiltered,
+      computedFilterable,
       computedWidth,
       computedAbsoluteOffset,
       computedPinningOffset,
       computedOffset,
-      computedSortable: (_m = (_l = (_k = c.sortable) != null ? _k : colType.sortable) != null ? _l : sortable) != null ? _m : true,
+      computedSortable,
       computedSortInfo,
       computedSortIndex,
       computedMultiSort: multiSort,
@@ -7978,14 +8801,57 @@ var getComputedVisibleColumns = ({
       computedSortedDesc,
       computedVisibleIndex: i,
       computedPinned,
-      computedDraggable: (_o = (_n = c.draggable) != null ? _n : draggableColumns) != null ? _o : true,
+      computedDraggable: (_r = (_q = c.draggable) != null ? _q : draggableColumns) != null ? _r : true,
       computedFirstInCategory,
       computedLastInCategory,
       computedFirst: i === 0,
       computedLast,
-      toggleSort,
+      toggleSort: () => {
+        const currentSortInfo = computedSortInfo;
+        let newColumnSortInfo;
+        if (!currentSortInfo) {
+          newColumnSortInfo = {
+            dir: 1,
+            id,
+            field: c.field,
+            type: computedSortType
+          };
+        } else {
+          if (computedSortedDesc) {
+            newColumnSortInfo = null;
+          } else {
+            newColumnSortInfo = __spreadProps(__spreadValues({}, computedSortInfo), {
+              dir: -1
+            });
+          }
+        }
+        if (c.field && newColumnSortInfo && !newColumnSortInfo.field) {
+          newColumnSortInfo.field = c.field;
+        }
+        if (c.valueGetter && newColumnSortInfo && !newColumnSortInfo.valueGetter) {
+          newColumnSortInfo.valueGetter = (data) => c.valueGetter({ data, field: c.field });
+        }
+        let finalSortInfo = sortInfo ? [...sortInfo] : [];
+        if (multiSort) {
+          if (computedSortIndex === -1) {
+            if (newColumnSortInfo) {
+              finalSortInfo.push(newColumnSortInfo);
+            }
+          } else {
+            finalSortInfo = finalSortInfo.map((info, index) => {
+              if (index === computedSortIndex) {
+                return newColumnSortInfo;
+              }
+              return info;
+            }).filter((x) => x != null);
+          }
+        } else {
+          finalSortInfo = newColumnSortInfo ? [newColumnSortInfo] : [];
+        }
+        setSortInfo(finalSortInfo);
+      },
       id,
-      header: (_r = (_q = (_p = c.header) != null ? _p : colType.header) != null ? _q : c.name) != null ? _r : 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);
@@ -8026,10 +8892,10 @@ var getComputedVisibleColumns = ({
 };
 
 // src/components/InfiniteTable/hooks/useRerenderOnKeyChange.ts
-import { useEffect as useEffect20 } from "react";
+import { useEffect as useEffect23 } from "react";
 var useRerenderOnKeyChange = (map2) => {
   const [renderId, rerender] = useRerender();
-  useEffect20(() => {
+  useEffect23(() => {
     const update = rafFn(rerender);
     return interceptMap(map2, {
       set: update,
@@ -8054,6 +8920,7 @@ var useComputedVisibleColumns = ({
   sortInfo,
   multiSort,
   setSortInfo,
+  filterValue,
   columnOrder,
   columnPinning,
   columnTypes,
@@ -8081,7 +8948,7 @@ var useComputedVisibleColumns = ({
     computedPinnedEndOffset,
     computedPinnedEndWidth,
     computedPinnedStartWidth
-  } = useMemo9(() => {
+  } = useMemo11(() => {
     return getComputedVisibleColumns({
       columns,
       bodySize,
@@ -8091,6 +8958,7 @@ var useComputedVisibleColumns = ({
       columnCssEllipsis,
       columnHeaderCssEllipsis,
       viewportReservedWidth,
+      filterValue,
       sortable,
       sortInfo,
       setSortInfo,
@@ -8115,6 +8983,7 @@ var useComputedVisibleColumns = ({
     sortInfo,
     setSortInfo,
     multiSort,
+    filterValue,
     columnOrder,
     columnVisibility,
     columnVisibilityAssumeVisible,
@@ -8147,7 +9016,7 @@ var useComputedVisibleColumns = ({
 };
 
 // src/components/InfiniteTable/hooks/useScrollbars.ts
-import { useState as useState10, useEffect as useEffect21, useLayoutEffect as useLayoutEffect4 } from "react";
+import { useState as useState13, useEffect as useEffect24, useLayoutEffect as useLayoutEffect6 } from "react";
 var INITIAL_SCROLLBARS = {
   vertical: false,
   horizontal: false
@@ -8155,8 +9024,8 @@ var INITIAL_SCROLLBARS = {
 function useScrollbars(brain) {
   const { getComponentState: getInfiniteTableState } = useComponentState();
   const { getState: getDataSourceState } = useDataSourceContextValue();
-  const [scrollbars, setScrollbars] = useState10(INITIAL_SCROLLBARS);
-  useEffect21(() => {
+  const [scrollbars, setScrollbars] = useState13(INITIAL_SCROLLBARS);
+  useEffect24(() => {
     return brain.onRenderCountChange(() => {
       const { scrollTopMax, scrollLeftMax } = brain;
       setScrollbars({
@@ -8165,7 +9034,7 @@ function useScrollbars(brain) {
       });
     });
   }, [brain]);
-  useLayoutEffect4(() => {
+  useLayoutEffect6(() => {
     const dataSourceState = getDataSourceState();
     const { onScrollbarsChange } = getInfiniteTableState();
     const { notifyScrollbarsChange } = dataSourceState;
@@ -8196,27 +9065,27 @@ function useComputed() {
     bodySize,
     showSeparatePivotColumnForSingleAggregation
   } = componentState;
-  useState11(() => {
+  useState14(() => {
     componentState.onRowHeightCSSVarChange.onChange((rowHeight) => {
       if (rowHeight) {
         componentActions.rowHeight = rowHeight;
       }
     });
-    componentState.onHeaderHeightCSSVarChange.onChange((headerHeight) => {
-      if (headerHeight) {
-        componentActions.headerHeight = headerHeight;
+    componentState.onColumnHeaderHeightCSSVarChange.onChange((columnHeaderHeight) => {
+      if (columnHeaderHeight) {
+        componentActions.columnHeaderHeight = columnHeaderHeight;
       }
     });
   });
-  useEffect22(() => {
+  useEffect25(() => {
     dataSourceActions.showSeparatePivotColumnForSingleAggregation = showSeparatePivotColumnForSingleAggregation;
   }, [showSeparatePivotColumnForSingleAggregation]);
-  const { multiSort } = dataSourceState;
+  const { multiSort, filterValue } = dataSourceState;
   useColumnGroups();
   const { toggleGroupRow } = useColumnsWhen();
-  const setSortInfo = useCallback14((sortInfo) => {
+  const setSortInfo = useCallback15((sortInfo) => {
     var _a2;
-    const newSortInfo = multiSort ? sortInfo : (_a2 = sortInfo[0]) != null ? _a2 : null;
+    const newSortInfo = getDataSourceState().multiSort ? sortInfo : (_a2 = sortInfo[0]) != null ? _a2 : null;
     dataSourceActions.sortInfo = newSortInfo;
   }, [getDataSourceState]);
   const columns = componentState.computedColumns;
@@ -8255,6 +9124,7 @@ function useComputed() {
     columnVisibility,
     columnVisibilityAssumeVisible: true,
     columnPinning,
+    filterValue,
     columnSizing,
     columnTypes
   });
@@ -8264,6 +9134,7 @@ function useComputed() {
   const computedPinnedStartOverflow = computedPinnedStartWidth ? computedPinnedStartColumnsWidth > computedPinnedStartWidth : false;
   const computedPinnedEndOverflow = computedPinnedEndWidth ? computedPinnedEndColumnsWidth > computedPinnedEndWidth : false;
   return {
+    showColumnFilters: !!dataSourceState.filterValue,
     scrollbars,
     columnSize,
     rowspan,
@@ -8371,7 +9242,7 @@ function useDOMProps(initialDOMProps) {
 }
 
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo12 } from "react";
 
 // src/components/InfiniteTable/hooks/useLicense/crc32.ts
 var DEFAULT_ReversedPolynomial = 3988292384;
@@ -8529,10 +9400,10 @@ var isInsideSandbox = () => {
 };
 var isInsidePlayground = isInsideSandbox() || isInsideSandpack();
 var useLicense = (licenseKey = "") => {
-  const valid = useMemo10(() => {
+  const valid = useMemo12(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.3.1"
+      version: "0.3.4"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -8542,6 +9413,140 @@ var useLicense = (licenseKey = "") => {
   return valid;
 };
 
+// src/components/utils/clamp.ts
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+// src/components/InfiniteTable/keyboardNavigationAndSelection.ts
+function handleRowNavigation(options) {
+  const { key, getState, getDataSourceState, actions } = options;
+  const arrLength = getDataSourceState().dataArray.length;
+  const state = getState();
+  const { brain } = state;
+  let { activeRowIndex } = state;
+  if (activeRowIndex == null) {
+    return false;
+  }
+  const {
+    start: [startRow],
+    end: [endRow]
+  } = brain.getRenderRange();
+  const renderRowCount = endRow - startRow - 1;
+  const min = 0;
+  const max = arrLength - 1;
+  const KeyToFunction = {
+    ArrowDown: () => {
+      activeRowIndex = clamp(activeRowIndex + 1, min, max);
+    },
+    ArrowUp: () => {
+      activeRowIndex = clamp(activeRowIndex - 1, min, max);
+    },
+    PageDown: () => {
+      activeRowIndex = Math.min(activeRowIndex + renderRowCount, arrLength - 1);
+    },
+    PageUp: () => {
+      activeRowIndex = Math.max(activeRowIndex - renderRowCount, min);
+    },
+    End: () => {
+      activeRowIndex = max;
+    },
+    Home: () => {
+      activeRowIndex = min;
+    }
+  };
+  const Fn = KeyToFunction[key];
+  if (!Fn) {
+    return false;
+  }
+  Fn();
+  actions.activeRowIndex = activeRowIndex;
+  return true;
+}
+function handleCellNavigation(options) {
+  const { key, shiftKey, getState, getComputed, getDataSourceState, actions } = options;
+  const state = getState();
+  const { activeCellIndex, brain } = state;
+  if (!activeCellIndex) {
+    return false;
+  }
+  let [rowIndex, colIndex] = activeCellIndex;
+  const {
+    start: [startRow, startCol],
+    end: [endRow, endCol]
+  } = brain.getRenderRange();
+  const renderRowCount = endRow - startRow - 1;
+  const renderColCount = endCol - startCol - 1;
+  const maxRow = getDataSourceState().dataArray.length - 1;
+  const maxCol = getComputed().computedVisibleColumns.length - 1;
+  const minRow = 0;
+  const minCol = 0;
+  rowIndex = clamp(rowIndex, 0, maxRow);
+  colIndex = clamp(colIndex, 0, maxCol);
+  actions.activeCellIndex = [rowIndex, colIndex];
+  const KeyToFunction = {
+    ArrowDown: () => {
+      rowIndex = clamp(rowIndex + 1, minRow, maxRow);
+    },
+    ArrowUp: () => {
+      rowIndex = clamp(rowIndex - 1, minRow, maxRow);
+    },
+    ArrowLeft: () => {
+      colIndex = clamp(colIndex - 1, minCol, maxCol);
+    },
+    ArrowRight: () => {
+      colIndex = clamp(colIndex + 1, minCol, maxCol);
+    },
+    PageDown: () => {
+      if (!shiftKey) {
+        rowIndex = Math.min(rowIndex + renderRowCount, maxRow);
+      } else {
+        colIndex = Math.min(colIndex + renderColCount, maxCol);
+      }
+    },
+    PageUp: () => {
+      if (!shiftKey) {
+        rowIndex = Math.max(rowIndex - renderRowCount, minRow);
+      } else {
+        colIndex = Math.max(colIndex - renderColCount, minCol);
+      }
+    },
+    End: () => {
+      if (!shiftKey) {
+        rowIndex = maxRow;
+      } else {
+        colIndex = maxCol;
+      }
+    },
+    Home: () => {
+      if (!shiftKey) {
+        rowIndex = minRow;
+      } else {
+        colIndex = minCol;
+      }
+    }
+  };
+  const Fn = KeyToFunction[key];
+  if (!Fn) {
+    return false;
+  }
+  Fn();
+  actions.activeCellIndex = [rowIndex, colIndex];
+  return true;
+}
+function handleKeyboardNavigation(options) {
+  const { getState } = options;
+  const state = getState();
+  const { activeRowIndex, activeCellIndex } = state;
+  if (activeRowIndex != null) {
+    return handleRowNavigation(options);
+  }
+  if (activeCellIndex != null) {
+    return handleCellNavigation(options);
+  }
+  return false;
+}
+
 // src/components/InfiniteTable/state/getInitialState.ts
 import { createRef } from "react";
 
@@ -8599,6 +9604,18 @@ function toMap(mapOrObject, weakMapCache) {
 }
 
 // src/components/InfiniteTable/state/getInitialState.ts
+function createRenderer2(brain) {
+  const renderer = new ReactHeadlessTableRenderer(brain);
+  const onRenderUpdater = buildSubscriptionCallback();
+  brain.onDestroy(() => {
+    renderer.destroy();
+    onRenderUpdater.destroy();
+  });
+  return {
+    renderer,
+    onRenderUpdater
+  };
+}
 function initSetupState2() {
   const columnsGeneratedForGrouping = new Map();
   const brain = new MatrixBrain();
@@ -8612,10 +9629,16 @@ function initSetupState2() {
   if (true) {
     globalThis.brain = brain;
   }
+  const { renderer, onRenderUpdater } = createRenderer2(brain);
   brain.onAvailableSizeChange((size) => {
     headerBrain.setAvailableSize({ width: size.width });
   });
+  if (true) {
+    globalThis.renderer = renderer;
+  }
   return {
+    renderer,
+    onRenderUpdater,
     propsCache: new Map([]),
     brain,
     headerBrain,
@@ -8624,7 +9647,7 @@ function initSetupState2() {
     scrollerDOMRef: createRef(),
     portalDOMRef: createRef(),
     onRowHeightCSSVarChange: buildSubscriptionCallback(),
-    onHeaderHeightCSSVarChange: buildSubscriptionCallback(),
+    onColumnHeaderHeightCSSVarChange: buildSubscriptionCallback(),
     bodySize: {
       width: 0,
       height: 0
@@ -8674,26 +9697,31 @@ var forwardProps3 = (setupState) => {
     onScrollbarsChange: 1,
     autoSizeColumnsKey: 1,
     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,
     columnCssEllipsis: (columnCssEllipsis) => columnCssEllipsis != null ? columnCssEllipsis : true,
     draggableColumns: (draggableColumns) => draggableColumns != null ? draggableColumns : true,
+    headerOptions: (headerOptions) => __spreadValues({
+      alwaysReserveSpaceForSortIcon: true
+    }, headerOptions),
     showSeparatePivotColumnForSingleAggregation: (showSeparatePivotColumnForSingleAggregation) => showSeparatePivotColumnForSingleAggregation != null ? showSeparatePivotColumnForSingleAggregation : false,
     sortable: (sortable) => sortable != null ? sortable : true,
     hideEmptyGroupColumns: (hideEmptyGroupColumns) => hideEmptyGroupColumns != null ? hideEmptyGroupColumns : false,
     pivotTotalColumnPosition: (pivotTotalColumnPosition) => pivotTotalColumnPosition != null ? pivotTotalColumnPosition : "end",
     pivotGrandTotalColumnPosition: 1,
     licenseKey: (licenseKey) => licenseKey || "",
+    activeRowIndex: (activeRowIndex) => activeRowIndex != null ? activeRowIndex : null,
+    activeCellIndex: (activeCellIndex) => activeCellIndex != null ? activeCellIndex : null,
     columnOrder: (columnOrder) => columnOrder != null ? columnOrder : true,
     header: (header) => header != null ? header : true,
     showZebraRows: (showZebraRows) => showZebraRows != null ? showZebraRows : true,
     showHoverRows: (showHoverRows) => showHoverRows != null ? showHoverRows : true,
     virtualizeColumns: (virtualizeColumns) => virtualizeColumns != null ? virtualizeColumns : true,
     rowHeight: (rowHeight) => typeof rowHeight === "number" ? rowHeight : 0,
-    headerHeight: (headerHeight) => typeof headerHeight === "number" ? headerHeight : 30,
+    columnHeaderHeight: (columnHeaderHeight) => typeof columnHeaderHeight === "number" ? columnHeaderHeight : 30,
     columns: (columns) => toMap(columns, setupState.propsCache.get("columns")),
     columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : {},
     columnPinning: (columnPinning) => toMap(columnPinning, setupState.propsCache.get("columnPinning")),
@@ -8734,12 +9762,13 @@ var mapPropsToState2 = (params) => {
     groupRenderStrategy,
     groupBy,
     computedColumns,
+    enableKeyboardNavigation: state.activeRowIndex != null,
     columnHeaderCssEllipsis: (_b = (_a = props.columnHeaderCssEllipsis) != null ? _a : props.columnCssEllipsis) != null ? _b : true,
     columnGroupsDepthsMap,
     columnGroupsMaxDepth: columnGroupsDepthsMap != state.columnGroupsDepthsMap ? Math.max(...columnGroupsDepthsMap.values(), 0) : state.columnGroupsMaxDepth,
     computedColumnGroups,
     rowHeightCSSVar: typeof props.rowHeight === "string" ? props.rowHeight : "",
-    headerHeightCSSVar: typeof props.headerHeight === "string" ? props.headerHeight || ThemeVars.components.Header.height : ""
+    columnHeaderHeightCSSVar: typeof props.columnHeaderHeight === "string" ? props.columnHeaderHeight || ThemeVars.components.Header.columnHeaderHeight : ""
   };
 };
 
@@ -8752,19 +9781,28 @@ var InfiniteTableRoot = getComponentStateRoot({
   mapPropsToState: mapPropsToState2,
   allowedControlledPropOverrides: {
     rowHeight: true,
-    headerHeight: true
+    columnHeaderHeight: true
   },
   getParentState: () => useDataSource(),
   debugName: "InfiniteTable"
 });
-var InfiniteTableComponent = memo9(function InfiniteTableComponent2() {
+var InfiniteTableComponent = memo11(function InfiniteTableComponent2() {
   var _a;
-  const { componentState, getComputed, computed } = useInfiniteTable();
+  const {
+    componentState,
+    getComputed,
+    computed,
+    componentActions: actions,
+    getState
+  } = useInfiniteTable();
   const {
     componentState: { loading },
     getState: getDataSourceState,
     componentActions: dataSourceActions
   } = useDataSourceContextValue();
+  const [imperativeApi] = useState15(() => {
+    return getImperativeApi(getState, getComputed, getDataSourceState, actions);
+  });
   const {
     domRef,
     scrollerDOMRef,
@@ -8773,24 +9811,43 @@ var InfiniteTableComponent = memo9(function InfiniteTableComponent2() {
     loadingText,
     header,
     onRowHeightCSSVarChange,
-    onHeaderHeightCSSVarChange,
+    onColumnHeaderHeightCSSVarChange,
     rowHeightCSSVar,
-    headerHeightCSSVar,
+    columnHeaderHeightCSSVar,
     components,
     scrollStopDelay,
     brain,
-    headerBrain
+    headerBrain,
+    renderer,
+    activeRowIndex,
+    activeCellIndex,
+    onRenderUpdater
   } = componentState;
+  useEffect27(() => {
+    if (activeRowIndex != null) {
+      imperativeApi.scrollRowIntoView(activeRowIndex, {
+        offset: 30
+      });
+    }
+  }, [activeRowIndex]);
+  useEffect27(() => {
+    if (activeCellIndex != null) {
+      imperativeApi.scrollCellIntoView(activeCellIndex[0], activeCellIndex[1], {
+        offset: 30
+      });
+    }
+  }, [activeCellIndex]);
   const { columnShifts, bodySize } = componentState;
   const { scrollbars } = computed;
   const { renderCell } = useCellRendering({
+    imperativeApi,
     getComputed,
     domRef: componentState.domRef,
     columnShifts,
     bodySize,
     computed
   });
-  useEffect23(() => {
+  useEffect26(() => {
     const dataSourceState = getDataSourceState();
     const onChange = debounce((renderRange) => {
       dataSourceState.notifyRenderRangeChange({
@@ -8803,35 +9860,52 @@ var InfiniteTableComponent = memo9(function InfiniteTableComponent2() {
   const licenseValid = useLicense(licenseKey);
   const domProps = useDOMProps(componentState.domProps);
   const LoadMaskCmp = (_a = components == null ? void 0 : components.LoadMask) != null ? _a : LoadMask;
-  useEffect23(() => {
+  useEffect26(() => {
     brain.setScrollStopDelay(scrollStopDelay);
     dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
   }, [scrollStopDelay]);
   useAutoSizeColumns();
-  return /* @__PURE__ */ createElement22("div", __spreadValues({
+  const onKeyDown = useCallback16((event) => {
+    if (handleKeyboardNavigation({
+      getState,
+      actions,
+      getDataSourceState,
+      getComputed,
+      key: event.key,
+      shiftKey: !!event.shiftKey
+    })) {
+      event.preventDefault();
+    }
+  }, []);
+  return /* @__PURE__ */ createElement26("div", __spreadValues({
+    onKeyDown,
     ref: domRef
-  }, domProps), header ? /* @__PURE__ */ createElement22(TableHeaderWrapper, {
+  }, domProps), header ? /* @__PURE__ */ createElement26(TableHeaderWrapper, {
     brain: headerBrain,
     scrollbars
-  }) : null, /* @__PURE__ */ createElement22(InfiniteTableBody, null, /* @__PURE__ */ createElement22(HeadlessTable, {
+  }) : null, /* @__PURE__ */ createElement26(InfiniteTableBody, null, /* @__PURE__ */ createElement26(HeadlessTable, {
     tabIndex: 0,
+    activeRowIndex: componentState.ready ? activeRowIndex : null,
+    activeCellIndex: componentState.ready ? activeCellIndex : null,
     scrollStopDelay,
+    renderer,
+    onRenderUpdater,
     brain,
     renderCell,
     cellHoverClassNames: HOVERED_CLASS_NAMES,
     scrollerDOMRef
-  }), /* @__PURE__ */ createElement22(LoadMaskCmp, {
+  }), /* @__PURE__ */ createElement26(LoadMaskCmp, {
     visible: loading
-  }, loadingText)), licenseValid ? null : /* @__PURE__ */ createElement22(InfiniteTableLicenseFooter, null), /* @__PURE__ */ createElement22("div", {
+  }, loadingText)), /* @__PURE__ */ createElement26("div", {
     ref: portalDOMRef,
     className: join(`${rootClassName2}Portal`, zIndex[1e3], position.absolute, top[0], left[0])
-  }), rowHeightCSSVar ? /* @__PURE__ */ createElement22(CSSVariableWatch, {
+  }), rowHeightCSSVar ? /* @__PURE__ */ createElement26(CSSVariableWatch, {
     varName: rowHeightCSSVar,
     onChange: onRowHeightCSSVarChange
-  }) : null, headerHeightCSSVar ? /* @__PURE__ */ createElement22(CSSVariableWatch, {
-    varName: headerHeightCSSVar,
-    onChange: onHeaderHeightCSSVarChange
-  }) : null);
+  }) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ createElement26(CSSVariableWatch, {
+    varName: columnHeaderHeightCSSVar,
+    onChange: onColumnHeaderHeightCSSVarChange
+  }) : null, /* @__PURE__ */ createElement26(InfiniteTableFooter, null), licenseValid ? null : /* @__PURE__ */ createElement26(InfiniteTableLicenseFooter, null));
 });
 function InfiniteTableContextProvider() {
   const { componentActions, componentState } = useComponentState();
@@ -8859,29 +9933,29 @@ function InfiniteTableContextProvider() {
     bodySize.width = (_b = (_a = scrollerDOMRef.current) == null ? void 0 : _a.scrollWidth) != null ? _b : bodySize.width;
     componentActions.bodySize = bodySize;
   }, { earlyAttach: true });
-  useEffect23(() => {
+  useEffect26(() => {
     return () => {
       componentState.onRowHeightCSSVarChange.destroy();
-      componentState.onHeaderHeightCSSVarChange.destroy();
+      componentState.onColumnHeaderHeightCSSVarChange.destroy();
     };
   }, []);
-  useEffect23(() => {
+  useEffect26(() => {
     if (scrollerDOMRef.current) {
       scrollerDOMRef.current.scrollTop = 0;
     }
   }, [scrollTopKey, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
-  return /* @__PURE__ */ createElement22(TableContext2.Provider, {
+  return /* @__PURE__ */ createElement26(TableContext2.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ createElement22(InfiniteTableComponent, null));
+  }, /* @__PURE__ */ createElement26(InfiniteTableComponent, null));
 }
 function InfiniteTable(props) {
-  const table = /* @__PURE__ */ createElement22(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ createElement22(InfiniteTableContextProvider, null));
-  return /* @__PURE__ */ createElement22(StrictMode, null, table);
+  const table = /* @__PURE__ */ createElement26(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ createElement26(InfiniteTableContextProvider, null));
+  return /* @__PURE__ */ createElement26(StrictMode, null, table);
 }
 InfiniteTable.defaultProps = {
   rowHeight: 40,
-  headerHeight: ThemeVars.components.Header.height
+  columnHeaderHeight: ThemeVars.components.Header.columnHeaderHeight
 };
 export {
   DataSource,
@@ -8890,7 +9964,12 @@ export {
   InfiniteTable,
   InfiniteTableClassName,
   InfiniteTableComponent,
+  NumberFilterEditor,
+  StringFilterEditor,
   debounce,
+  defaultFilterEditors,
+  defaultFilterTypes,
+  defaultFilterTypes as filterTypes,
   flatten,
   getComponentStateRoot,
   group,