@infinite-table/infinite-react 0.3.0 → 0.3.3

package/index.js

@@ -632,7 +632,12 @@ __export(exports, {
   InfiniteTable: () => InfiniteTable,
   InfiniteTableClassName: () => InfiniteTableClassName,
   InfiniteTableComponent: () => InfiniteTableComponent,
+  NumberFilterEditor: () => NumberFilterEditor,
+  StringFilterEditor: () => StringFilterEditor,
   debounce: () => debounce,
+  defaultFilterEditors: () => defaultFilterEditors,
+  defaultFilterTypes: () => defaultFilterTypes,
+  filterTypes: () => defaultFilterTypes,
   flatten: () => flatten,
   getComponentStateRoot: () => getComponentStateRoot,
   group: () => group,
@@ -660,7 +665,7 @@ function debounce(fn, { wait }) {
 }
 
 // src/components/InfiniteTable/index.tsx
-var React27 = __toModule(require("react"));
+var React30 = __toModule(require("react"));
 
 // src/utils/join.ts
 var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
@@ -2769,6 +2774,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;
@@ -2807,7 +2815,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) {
@@ -2832,7 +2840,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`;
@@ -2842,9 +2851,6 @@ var ReactHeadlessTableRenderer = class extends Logger {
     };
     this.onScrollStart = () => {
       this.scrolling = true;
-      if (this.currentHoveredRow != -1) {
-        this.removeHoverClass(this.currentHoveredRow);
-      }
     };
     this.onScrollStop = () => {
       this.scrolling = false;
@@ -3027,6 +3033,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,
@@ -3036,7 +3043,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       colspan,
       rowFixed,
       colFixed,
-      hidden: !!covered,
+      hidden,
       heightWithRowspan,
       widthWithColspan,
       onMouseEnter: this.onMouseEnter.bind(null, rowIndex),
@@ -3053,7 +3060,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() {
@@ -3523,6 +3530,7 @@ var cssEllipsisClassName = "_16lm1iw1c _16lm1iw1d _16lm1iw18";
 var cursor = { pointer: "_16lm1iwd" };
 var display = { flex: "_16lm1iwl", block: "_16lm1iwm", inlineBlock: "_16lm1iwn" };
 var flex = { "1": "_16lm1iwe", none: "_16lm1iwf" };
+var flexFlow = { column: "_16lm1iw11", row: "_16lm1iw12" };
 var justifyContent = { center: "_16lm1iw15", start: "_16lm1iw16", end: "_16lm1iw17" };
 var left = { "0": "_16lm1iwv", "100%": "_16lm1iww" };
 var overflow = { hidden: "_16lm1iw18", auto: "_16lm1iw19", visible: "_16lm1iw1a" };
@@ -3534,23 +3542,133 @@ var zIndex = { "1": "_16lm1iwg", "10": "_16lm1iwh", "1000": "_16lm1iwi", "10000"
 
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
 var InfiniteTableBody = React12.forwardRef(function InfiniteTableBody2(props, ref) {
-  const { rootClassName: rootClassName8 } = useInternalProps();
+  const { rootClassName: rootClassName9 } = useInternalProps();
   return /* @__PURE__ */ React12.createElement("div", __spreadProps(__spreadValues({
     ref
   }, props), {
-    className: join(`${rootClassName8}Body`, position.relative, flex["1"], transformTranslateZero, props.className)
+    className: join(`${rootClassName9}Body`, position.relative, flex["1"], transformTranslateZero, props.className)
+  }));
+});
+
+// src/components/InfiniteTable/components/InfiniteTableFooter/InfiniteTableFooter.tsx
+var React13 = __toModule(require("react"));
+var InfiniteTableFooter = React13.forwardRef(function InfiniteTableFooter2(props, ref) {
+  const { rootClassName: rootClassName9 } = useInternalProps();
+  return /* @__PURE__ */ React13.createElement("div", __spreadProps(__spreadValues({
+    ref
+  }, props), {
+    className: join(`${rootClassName9}Footer`, position.relative, display.flex, flexFlow.row, props.className)
   }));
 });
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
-var React15 = __toModule(require("react"));
+var React18 = __toModule(require("react"));
+var import_react19 = __toModule(require("react"));
 var import_react_dom = __toModule(require("react-dom"));
-var import_react17 = __toModule(require("react"));
 
-// src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
-var React13 = __toModule(require("react"));
+// 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/useInfiniteTableState.ts
+// 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,
+    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());
+var import_react14 = __toModule(require("react"));
+
+// src/components/InfiniteTable/hooks/useInfiniteTable.ts
 var import_react13 = __toModule(require("react"));
 
 // src/components/InfiniteTable/InfiniteTableContext.ts
@@ -3563,96 +3681,10 @@ function getInfiniteTableContext() {
   return TableContext = (0, import_react12.createContext)(null);
 }
 
-// src/components/InfiniteTable/hooks/useInfiniteTableState.ts
-var useInfiniteTableState = () => {
-  const TableContext2 = getInfiniteTableContext();
-  const { componentState } = (0, import_react13.useContext)(TableContext2);
-  return componentState;
-};
-
-// 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__ */ React13.createElement(React13.Fragment, null, beforeChildren, /* @__PURE__ */ React13.createElement("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__ */ React13.createElement(RenderComponent, __spreadValues({}, finalDOMProps));
-  }
-  return /* @__PURE__ */ React13.createElement("div", __spreadProps(__spreadValues({}, finalDOMProps), {
-    ref: domRef
-  }));
-}
-var InfiniteTableCell = React13.memo(InfiniteTableCellFn);
-
-// src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
-var import_binary_search2 = __toModule(require_binary_search());
-var import_react15 = __toModule(require("react"));
-
 // src/components/InfiniteTable/hooks/useInfiniteTable.ts
-var import_react14 = __toModule(require("react"));
 var useInfiniteTable = () => {
   const TableContext2 = getInfiniteTableContext();
-  return (0, import_react14.useContext)(TableContext2);
+  return (0, import_react13.useContext)(TableContext2);
 };
 
 // src/components/InfiniteTable/utils/moveXatY.ts
@@ -3687,18 +3719,18 @@ var useColumnPointerEvents = ({
   columns,
   computedRemainingSpace
 }) => {
-  const [draggingDiff, setDraggingDiff] = (0, import_react15.useState)(null);
-  const [proxyOffset, setProxyOffset] = (0, import_react15.useState)(null);
-  const breakpointsRef = (0, import_react15.useRef)([]);
-  const pointerMoveRef = (0, import_react15.useRef)(null);
-  const didDragRef = (0, import_react15.useRef)(false);
-  const initialClientPos = (0, import_react15.useRef)(null);
-  const currentDropIndexRef = (0, import_react15.useRef)(null);
+  const [draggingDiff, setDraggingDiff] = (0, import_react14.useState)(null);
+  const [proxyOffset, setProxyOffset] = (0, import_react14.useState)(null);
+  const breakpointsRef = (0, import_react14.useRef)([]);
+  const pointerMoveRef = (0, import_react14.useRef)(null);
+  const didDragRef = (0, import_react14.useRef)(false);
+  const initialClientPos = (0, import_react14.useRef)(null);
+  const currentDropIndexRef = (0, import_react14.useRef)(null);
   const dragging = draggingDiff != null;
   const { componentActions, computed } = useInfiniteTable();
   const { computedColumnOrder } = computed;
-  const column = (0, import_react15.useMemo)(() => columns.get(columnId), [columnId, columns]);
-  const { columnIndex, columnWidth, columnsArray } = (0, import_react15.useMemo)(() => {
+  const column = (0, import_react14.useMemo)(() => columns.get(columnId), [columnId, columns]);
+  const { columnIndex, columnWidth, columnsArray } = (0, import_react14.useMemo)(() => {
     const columnsArray2 = Array.from(columns.values());
     return {
       columnsArray: columnsArray2,
@@ -3706,8 +3738,8 @@ var useColumnPointerEvents = ({
       columnWidth: column.computedWidth
     };
   }, [columns, columnId, column]);
-  let cursorRef = (0, import_react15.useRef)("auto");
-  const onPointerDown = (0, import_react15.useCallback)((e) => {
+  let cursorRef = (0, import_react14.useRef)("auto");
+  const onPointerDown = (0, import_react14.useCallback)((e) => {
     const target = domRef.current;
     cursorRef.current = target.style.cursor;
     didDragRef.current = false;
@@ -3770,7 +3802,7 @@ var useColumnPointerEvents = ({
     target.addEventListener("pointermove", onPointerMove);
     target.setPointerCapture(e.pointerId);
   }, [columns, column, columnIndex, columnsArray, computedRemainingSpace]);
-  const onPointerUp = (0, import_react15.useCallback)((e) => {
+  const onPointerUp = (0, import_react14.useCallback)((e) => {
     const target = domRef.current;
     target.style.cursor = cursorRef.current;
     target.releasePointerCapture(e.pointerId);
@@ -3803,47 +3835,69 @@ 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
+var import_react15 = __toModule(require("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__ */ import_react15.default.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__ */ import_react15.default.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
-var React14 = __toModule(require("react"));
+var React15 = __toModule(require("react"));
 var import_react16 = __toModule(require("react"));
+
+// src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
+var import_createRuntimeFn = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var CellCls = "_1eexc2a5 _16lm1iwl _16lm1iw12 _16lm1iw13 _16lm1iw2 _16lm1iw1b _16lm1iw1c";
+var HeaderCellContentRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zfob115 _16lm1iwq _16lm1iws _16lm1iwl _16lm1iw12 _16lm1iw13", variantClassNames: { filtered: { false: "_12zfob116", true: "_12zfob117" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderCellProxy = "_12zfob10";
+var HeaderCellRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zfob1h _16lm1iwm", variantClassNames: { zebra: { false: "_12zfob1i", even: "_12zfob1j", odd: "_12zfob1k" }, dragging: { true: "_12zfob1l", false: "_12zfob1m" }, first: { true: "_12zfob1n", false: "_12zfob1o" }, last: { true: "_12zfob1p", false: "_12zfob1q" }, groupByField: { true: "_12zfob1r", false: "_12zfob1s" }, firstInCategory: { true: "_12zfob1t", false: "_12zfob1u" }, lastInCategory: { true: "_12zfob1v", false: "_12zfob1w" }, pinned: { start: "_12zfob1x", end: "_12zfob1y", false: "_12zfob1z" }, filtered: { true: "_12zfob110", false: "_12zfob111" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob112"], [{ pinned: "end", firstInCategory: true }, "_12zfob113"], [{ pinned: false, lastInCategory: true }, "_12zfob114"]] });
+var HeaderClsRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zfob17 _16lm1iwm _16lm1iw2", variantClassNames: { pinned: { start: "_12zfob18", end: "_12zfob19", false: "_12zfob1a" }, virtualized: { true: "_12zfob1b", false: "_12zfob1c" }, overflow: { true: "_12zfob1d", false: "_12zfob1e" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1f"], [{ overflow: true, pinned: "end" }, "_12zfob1g"]] });
+var HeaderFilterCls = "_12zfob11a _16lm1iwl _16lm1iw12 _16lm1iw13 _16lm1iw1";
+var HeaderFilterEditorCls = "_16lm1iws _16lm1iwq";
+var HeaderGroupCls = "_12zfob119 _16lm1iwl _16lm1iw12 _16lm1iw13";
+var HeaderScrollbarPlaceholderCls = "_12zfob16 _16lm1iw2";
+var HeaderSortIconCls = "_16lm1iw1";
+var HeaderSortIconIndexCls = "_12zfob15";
+var HeaderSortIconRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "", variantClassNames: { align: { start: "_12zfob12", center: "_12zfob13", end: "_12zfob14" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderWrapperCls = "_12zfob118 _16lm1iw18 _16lm1iw1 _16lm1iwl _16lm1iw12";
+
+// src/components/InfiniteTable/components/icons/SortIcon.tsx
 var defaultLineStyle = {
   marginTop: 2,
   marginBottom: 2,
@@ -3888,91 +3942,225 @@ 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__ */ React14.createElement("div", {
+  return /* @__PURE__ */ React15.createElement("div", {
     style: __spreadProps(__spreadValues({}, style), { width: size }),
     className: join(className, InfiniteTableIconClassName, `${InfiniteTableIconClassName}-sort`)
-  }, showIndex ? /* @__PURE__ */ React14.createElement("div", {
+  }, showIndex ? /* @__PURE__ */ React15.createElement("div", {
     "data-name": "index",
-    style: indexStyle
-  }, index) : null, /* @__PURE__ */ React14.createElement("div", {
+    style: indexStyle,
+    className: HeaderSortIconIndexCls
+  }, index) : null, /* @__PURE__ */ React15.createElement("div", {
     style: __spreadValues({ width: sizes[0] }, lineStyle),
     onTransitionEnd
-  }), /* @__PURE__ */ React14.createElement("div", {
+  }), /* @__PURE__ */ React15.createElement("div", {
     style: __spreadValues({ width: sizes[1] }, lineStyle)
-  }), /* @__PURE__ */ React14.createElement("div", {
+  }), /* @__PURE__ */ React15.createElement("div", {
     style: __spreadValues({ width: sizes[2] }, lineStyle)
   }));
 }
 
-// src/components/InfiniteTable/components/InfiniteTableHeader/header.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";
+// src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
+var React16 = __toModule(require("react"));
 
-// src/components/InfiniteTable/utils/RenderHookComponent.tsx
-function RenderHookComponent(props) {
-  var _a;
-  return (_a = props.render(props.renderParam)) != null ? _a : null;
-}
+// src/components/InfiniteTable/hooks/useInfiniteTableState.ts
+var import_react17 = __toModule(require("react"));
+var useInfiniteTableState = () => {
+  const TableContext2 = getInfiniteTableContext();
+  const { componentState } = (0, import_react17.useContext)(TableContext2);
+  return componentState;
+};
 
-// src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
-var InfiniteTableHeaderCellContext = React15.createContext(null);
-var { rootClassName: rootClassName4 } = internalProps;
-var InfiniteTableHeaderCellClassName = `${rootClassName4}HeaderCell`;
-function InfiniteTableHeaderCell(props) {
-  var _a, _b, _c, _d;
-  const column = props.column;
-  const columns = props.columns;
-  const { onResize, height, width } = props;
-  const sortInfo = column.computedSortInfo;
-  let header = column.header;
-  const ref = (0, import_react17.useCallback)((node) => {
-    var _a2;
-    domRef.current = node;
-    (_a2 = props.domRef) == null ? void 0 : _a2.call(props, node);
-  }, [props.domRef]);
-  const sortTool = /* @__PURE__ */ React15.createElement(SortIcon, {
-    index: column.computedMultiSort ? column.computedSortIndex + 1 : void 0,
-    className: `${InfiniteTableHeaderCellClassName}__sort-icon ${HeaderSortIconCls}`,
-    direction: column.computedSorted ? column.computedSortedAsc ? 1 : -1 : 0
-  });
-  const renderParam = {
-    domRef: ref,
-    column,
-    columnSortInfo: sortInfo,
-    sortTool
-  };
-  const renderChildren = () => {
-    if (header instanceof Function) {
-      header = /* @__PURE__ */ React15.createElement(RenderHookComponent, {
-        render: header,
-        renderParam
+// src/components/InfiniteTable/components/cell.css.ts
+var import_createRuntimeFn2 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var CellClsVariants = { shifting: "_1eexc2a3", dragging: "_1eexc2a4" };
+var ColumnCellCls = "_1eexc2a5 _16lm1iwl _16lm1iw12 _16lm1iw13 _16lm1iw2 _16lm1iw1b _16lm1iw1c";
+var ColumnCellRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1eexc2a7", variantClassNames: { dragging: { false: "_1eexc2a8", true: "_1eexc2a9" }, zebra: { false: "_1eexc2aa", even: "_1eexc2ab", odd: "_1eexc2ac" }, first: { true: "_1eexc2ad", false: "_1eexc2ae" }, last: { true: "_1eexc2af", false: "_1eexc2ag" }, groupByField: { true: "_1eexc2ah", false: "_1eexc2ai" }, firstInCategory: { true: "_1eexc2aj", false: "_1eexc2ak" }, lastInCategory: { true: "_1eexc2al", false: "_1eexc2am" }, pinned: { start: "_1eexc2an", end: "_1eexc2ao", false: "_1eexc2ap" }, filtered: { true: "_1eexc2aq", false: "_1eexc2ar" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2as"], [{ pinned: "end", firstInCategory: true }, "_1eexc2at"]] });
+
+// 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;
+  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__ */ React16.createElement(React16.Fragment, null, beforeChildren, /* @__PURE__ */ React16.createElement("div", {
+      className: join(InfiniteTableCellContentClassName, cssEllipsis ? cssEllipsisClassName : overflow.hidden, contentClassName),
+      style: contentStyle
+    }, children), afterChildren)
+  });
+  const RenderComponent = cellType === "body" ? (_c = column.components) == null ? void 0 : _c.ColumnCell : (_d = column.components) == null ? void 0 : _d.HeaderCell;
+  if (RenderComponent) {
+    return /* @__PURE__ */ React16.createElement(RenderComponent, __spreadValues({}, finalDOMProps));
+  }
+  return /* @__PURE__ */ React16.createElement("div", __spreadProps(__spreadValues({}, finalDOMProps), {
+    ref: domRef
+  }));
+}
+var InfiniteTableCell = React16.memo(InfiniteTableCellFn);
+
+// src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
+var React17 = __toModule(require("react"));
+var import_react18 = __toModule(require("react"));
+var { rootClassName: rootClassName4 } = internalProps;
+var InfiniteTableColumnHeaderFilterClassName = `${rootClassName4}HeaderCell__filter`;
+var stopPropagation = (e) => e.stopPropagation();
+function InfiniteTableColumnHeaderFilter(props) {
+  var _a, _b, _c, _d;
+  const [theValue, setTheValue] = (0, import_react18.useState)((_b = (_a = props.columnFilterValue) == null ? void 0 : _a.filterValue) != null ? _b : "");
+  const onInputChange = (filterValue) => {
+    setTheValue(filterValue);
+    props.onChange(filterValue);
+  };
+  (0, import_react18.useEffect)(() => {
+    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__ */ React17.createElement("div", {
+    onPointerUp: stopPropagation,
+    onPointerDown: stopPropagation,
+    className: `${InfiniteTableColumnHeaderFilterClassName} ${HeaderFilterCls}`,
+    style: { height: props.columnHeaderHeight }
+  }, FilterEditor ? /* @__PURE__ */ React17.createElement(FilterEditor, __spreadValues({}, filterEditorProps)) : null);
+}
+function InfiniteTableColumnHeaderFilterEmpty() {
+  return /* @__PURE__ */ React17.createElement("div", {
+    onPointerUp: stopPropagation,
+    onPointerDown: stopPropagation,
+    className: `${InfiniteTableColumnHeaderFilterClassName} ${HeaderFilterCls}`,
+    style: { height: "100%" }
+  });
+}
+
+// src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
+var InfiniteTableHeaderCellContext = React18.createContext(null);
+var { rootClassName: rootClassName5 } = internalProps;
+var InfiniteTableHeaderCellClassName = `${rootClassName5}HeaderCell`;
+function InfiniteTableHeaderCell(props) {
+  var _a, _b, _c, _d, _e;
+  const column = props.column;
+  const columns = props.columns;
+  const { onResize, height, width, headerOptions } = props;
+  const sortInfo = column.computedSortInfo;
+  let header = column.header;
+  const ref = (0, import_react19.useCallback)((node) => {
+    var _a2;
+    domRef.current = node;
+    (_a2 = props.domRef) == null ? void 0 : _a2.call(props, node);
+  }, [props.domRef]);
+  const alwaysShow = headerOptions.alwaysReserveSpaceForSortIcon;
+  const sortTool = column.computedSorted || alwaysShow ? /* @__PURE__ */ React18.createElement(SortIcon, {
+    index: column.computedMultiSort ? column.computedSortIndex + 1 : void 0,
+    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__ */ React18.createElement(RenderHookComponent, {
+        render: header,
+        renderParam
       });
     }
     header = header != null ? header : column.name;
-    return header;
+    return /* @__PURE__ */ React18.createElement(React18.Fragment, null, align === "end" ? sortTool : null, header, align !== "end" ? sortTool : null);
   };
-  const domRef = (0, import_react17.useRef)(null);
+  const domRef = (0, import_react19.useRef)(null);
   const {
-    computed: { computedRemainingSpace },
-    componentState: { portalDOMRef }
+    computed: { computedRemainingSpace, showColumnFilters },
+    componentState: { portalDOMRef, columnHeaderHeight, filterEditors }
   } = useInfiniteTable();
-  (0, import_react17.useEffect)(() => {
+  const {
+    componentActions: dataSourceActions,
+    getState: getDataSourceState,
+    componentState: { filterDelay, filterTypes }
+  } = useDataSourceContextValue();
+  (0, import_react19.useEffect)(() => {
     let clearOnResize = null;
     const node = domRef.current;
     if (onResize && node) {
@@ -3993,7 +4181,7 @@ function InfiniteTableHeaderCell(props) {
   });
   let draggingProxy = null;
   if (dragging) {
-    draggingProxy = /* @__PURE__ */ React15.createElement("div", {
+    draggingProxy = /* @__PURE__ */ React18.createElement("div", {
       className: `${InfiniteTableHeaderCellClassName}Proxy ${HeaderCellProxy}`,
       style: {
         position: "absolute",
@@ -4007,9 +4195,73 @@ function InfiniteTableHeaderCell(props) {
     draggingProxy = (0, import_react_dom.createPortal)(draggingProxy, portalDOMRef.current);
   }
   const ContextProvider = InfiniteTableHeaderCellContext.Provider;
-  return /* @__PURE__ */ React15.createElement(ContextProvider, {
+  const contentRecipeVariants = {
+    filtered: column.computedFiltered
+  };
+  const setFilterValue = (0, import_react19.useCallback)((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 = React18.useMemo(() => {
+    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__ */ React18.createElement(ContextProvider, {
     value: renderParam
-  }, /* @__PURE__ */ React15.createElement(InfiniteTableCell, {
+  }, /* @__PURE__ */ React18.createElement(InfiniteTableCell, {
     domRef: ref,
     cellType: "header",
     column,
@@ -4019,19 +4271,29 @@ function InfiniteTableHeaderCell(props) {
     width,
     onPointerDown,
     onPointerUp,
+    contentClassName: join(HeaderCellContentRecipe(contentRecipeVariants), justifyContent[(_c = column.align) != null ? _c : "start"]),
+    contentStyle: showColumnFilters ? { height: height / 2 } : void 0,
     className: join(InfiniteTableHeaderCellClassName, userSelect.none, column.computedSortable ? cursor.pointer : "", useCellClassName(column, [InfiniteTableHeaderCellClassName, InfiniteTableCellClassName], HeaderCellRecipe, { dragging, zebra: false }), CellCls),
-    cssEllipsis: (_d = (_c = column.headerCssEllipsis) != null ? _c : column.cssEllipsis) != null ? _d : true,
-    afterChildren: sortTool,
+    cssEllipsis: (_e = (_d = column.headerCssEllipsis) != null ? _d : column.cssEllipsis) != null ? _e : true,
+    afterChildren: showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React18.createElement(InfiniteTableColumnHeaderFilter, {
+      filterEditor: FilterEditor,
+      filterTypes,
+      onChange: debouncedOnFilterValueChange,
+      columnFilterType: filterType,
+      columnLabel: column.field || column.name || column.id,
+      columnFilterValue: column.computedFilterValue,
+      columnHeaderHeight
+    }) : /* @__PURE__ */ React18.createElement(InfiniteTableColumnHeaderFilterEmpty, null) : null,
     renderChildren
   }), draggingProxy);
 }
 function useInfiniteHeaderCell() {
-  const result = (0, import_react17.useContext)(InfiniteTableHeaderCellContext);
+  const result = (0, import_react19.useContext)(InfiniteTableHeaderCellContext);
   return result;
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
-var React18 = __toModule(require("react"));
+var React21 = __toModule(require("react"));
 
 // src/components/utils/getScrollbarWidth.ts
 var scrollbarWidth;
@@ -4153,11 +4415,11 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
-var React17 = __toModule(require("react"));
-var import_react18 = __toModule(require("react"));
+var React20 = __toModule(require("react"));
+var import_react20 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
-var React16 = __toModule(require("react"));
+var React19 = __toModule(require("react"));
 var TableHeaderGroupClassName = `${rootClassName2}HeaderGroup`;
 function InfiniteTableHeaderGroup(props) {
   const { columnGroup, height, width } = props;
@@ -4167,35 +4429,35 @@ function InfiniteTableHeaderGroup(props) {
       columnGroup
     });
   }
-  return /* @__PURE__ */ React16.createElement("div", {
+  return /* @__PURE__ */ React19.createElement("div", {
     ref: props.domRef,
     "data-group-id": columnGroup.uniqueGroupId,
     className: join(HeaderGroupCls, TableHeaderGroupClassName),
     style: { width, height }
-  }, /* @__PURE__ */ React16.createElement("div", {
+  }, /* @__PURE__ */ React19.createElement("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: rootClassName6 } = internalProps;
+var TableHeaderClassName = `${rootClassName6}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;
-  (0, import_react18.useEffect)(() => {
+  const { computedVisibleColumnsMap, showColumnFilters } = computed;
+  (0, import_react20.useEffect)(() => {
     const onScroll = (scrollPosition) => {
       if (domRef.current) {
         domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
@@ -4204,7 +4466,7 @@ function InfiniteTableHeaderFn(props) {
     const removeOnScroll = brain.onScroll(onScroll);
     return removeOnScroll;
   }, [brain]);
-  const domRef = (0, import_react18.useRef)(null);
+  const domRef = (0, import_react20.useRef)(null);
   const headerCls = HeaderClsRecipe({
     overflow: false,
     virtualized: true
@@ -4212,9 +4474,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 = (0, import_react18.useCallback)((params) => {
+  const renderCell = (0, import_react20.useCallback)((params) => {
     const {
       rowIndex,
       colIndex,
@@ -4239,7 +4501,7 @@ function InfiniteTableHeaderFn(props) {
         computedWidth: colGroupItem.computedWidth,
         groupOffset: colGroupItem.groupOffset
       });
-      return /* @__PURE__ */ React17.createElement(InfiniteTableHeaderGroup, {
+      return /* @__PURE__ */ React20.createElement(InfiniteTableHeaderGroup, {
         domRef: domRef2,
         columns: columns2,
         width: widthWithColspan,
@@ -4247,21 +4509,29 @@ function InfiniteTableHeaderFn(props) {
         columnGroup: computedColumnGroup
       });
     }
-    return /* @__PURE__ */ React17.createElement(InfiniteTableHeaderCell, {
+    return /* @__PURE__ */ React20.createElement(InfiniteTableHeaderCell, {
       domRef: domRef2,
       column,
+      headerOptions,
       width: widthWithColspan,
       height: heightWithRowspan,
       columns: computedVisibleColumnsMap
     });
-  }, [columns, headerHeight, columnAndGroupTreeInfo, columnGroupsMaxDepth]);
-  return /* @__PURE__ */ React17.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React17.createElement(RawTable, {
+  }, [
+    headerOptions,
+    columns,
+    columnHeaderHeight,
+    columnAndGroupTreeInfo,
+    columnGroupsMaxDepth,
+    showColumnFilters
+  ]);
+  return /* @__PURE__ */ React20.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React20.createElement(RawTable, {
     renderCell,
     brain: headerBrain,
     cellHoverClassNames: []
   }));
 }
-var InfiniteTableHeader = React17.memo(InfiniteTableHeaderFn);
+var InfiniteTableHeader = React20.memo(InfiniteTableHeaderFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
 function TableHeaderWrapper(props) {
@@ -4271,25 +4541,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 = React18.useMemo(() => {
+  const height = rows * columnHeaderHeight + (showColumnFilters ? columnHeaderHeight : 0);
+  const columnAndGroupTreeInfo = React21.useMemo(() => {
     if (!computedColumnGroups || !computedColumnGroups.size) {
       return void 0;
     }
     return buildColumnAndGroupTree(computedVisibleColumns, computedColumnGroups, columnGroupsDepthsMap, columnGroupsMaxDepth);
   }, [computedVisibleColumns, computedColumnGroups, columnGroupsDepthsMap]);
-  const cellspan = React18.useCallback(({ rowIndex, colIndex }) => {
+  const cellspan = React21.useCallback(({ rowIndex, colIndex }) => {
     const column = computedVisibleColumns[colIndex];
     const rowspan2 = 1;
     const colspan2 = 1;
@@ -4322,11 +4593,14 @@ function TableHeaderWrapper(props) {
     rows,
     columnGroupsDepthsMap
   ]);
-  const rowspan = React18.useCallback(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).rowspan, [cellspan]);
-  const colspan = React18.useCallback(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).colspan, [cellspan]);
+  const rowspan = React21.useCallback(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).rowspan, [cellspan]);
+  const colspan = React21.useCallback(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).colspan, [cellspan]);
+  const rowHeight = React21.useCallback((index) => {
+    return showColumnFilters ? index < rows - 1 ? columnHeaderHeight : 2 * columnHeaderHeight : columnHeaderHeight;
+  }, [rows, showColumnFilters, columnHeaderHeight]);
   useMatrixBrain(brain, {
     colWidth: columnSize,
-    rowHeight: headerHeight,
+    rowHeight,
     rows,
     cols: computedVisibleColumns.length,
     height,
@@ -4336,21 +4610,21 @@ function TableHeaderWrapper(props) {
     fixedColsEnd: computedPinnedEndColumns.length,
     fixedColsStart: computedPinnedStartColumns.length
   });
-  const header = /* @__PURE__ */ React18.createElement(InfiniteTableHeader, {
+  const header = /* @__PURE__ */ React21.createElement(InfiniteTableHeader, {
     columns: computedVisibleColumns,
     brain,
-    headerHeight: height,
+    columnHeaderHeight: height,
     columnGroupsMaxDepth,
     columnAndGroupTreeInfo
   });
-  const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ React18.createElement("div", {
+  const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ React21.createElement("div", {
     className: HeaderScrollbarPlaceholderCls,
     style: {
       zIndex: 1e3,
       width: getScrollbarWidth()
     }
   }) : null;
-  return /* @__PURE__ */ React18.createElement("div", {
+  return /* @__PURE__ */ React21.createElement("div", {
     className: HeaderWrapperCls,
     style: {
       height
@@ -4359,8 +4633,8 @@ function TableHeaderWrapper(props) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
-var React19 = __toModule(require("react"));
-var import_react19 = __toModule(require("react"));
+var React22 = __toModule(require("react"));
+var import_react21 = __toModule(require("react"));
 
 // src/components/utils/decamelize.ts
 function decamelize(str, options) {
@@ -4369,7 +4643,7 @@ 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)" }, 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)" } } };
 
 // src/components/InfiniteTable/InfiniteCls.css.ts
 var import_createRuntimeFn3 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
@@ -4406,10 +4680,10 @@ var enforceStyle = (node, style) => {
     node.style.setProperty(decamelize(propertyName), propertyValue, "important");
   }
 };
-var InfiniteTableLicenseFooter = React19.forwardRef(function InfiniteTableLicenseFooter2(props, ref) {
-  const { rootClassName: rootClassName8 } = useInternalProps();
-  const domRef = React19.useRef(null);
-  const domCallback = React19.useCallback((node) => {
+var InfiniteTableLicenseFooter = React22.forwardRef(function InfiniteTableLicenseFooter2(props, ref) {
+  const { rootClassName: rootClassName9 } = useInternalProps();
+  const domRef = React22.useRef(null);
+  const domCallback = React22.useCallback((node) => {
     domRef.current = node;
     if (!ref) {
       return;
@@ -4420,7 +4694,7 @@ var InfiniteTableLicenseFooter = React19.forwardRef(function InfiniteTableLicens
       ref.current = node;
     }
   }, []);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const forceStyle = () => {
       requestAnimationFrame(() => {
         var _a;
@@ -4434,12 +4708,12 @@ var InfiniteTableLicenseFooter = React19.forwardRef(function InfiniteTableLicens
       clearInterval(intervalId);
     };
   }, []);
-  return /* @__PURE__ */ React19.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React22.createElement("div", __spreadProps(__spreadValues({
     ref: domCallback
   }, props), {
-    className: join(`${rootClassName8}-Footer`, FooterCls, props.className),
+    className: join(`${rootClassName9}-Footer`, FooterCls, props.className),
     style: defaultStyle
-  }), "Powered by", " ", /* @__PURE__ */ React19.createElement("a", {
+  }), "Powered by", " ", /* @__PURE__ */ React22.createElement("a", {
     href: "https://infinite-table.com",
     rel: "noopener noreferrer",
     role: "link",
@@ -4448,11 +4722,11 @@ var InfiniteTableLicenseFooter = React19.forwardRef(function InfiniteTableLicens
 });
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
-var React20 = __toModule(require("react"));
-var import_react20 = __toModule(require("react"));
-var { rootClassName: rootClassName6 } = internalProps;
-var InfiniteTableColumnCellContext = React20.createContext(null);
-var InfiniteTableColumnCellClassName = `${rootClassName6}ColumnCell`;
+var React23 = __toModule(require("react"));
+var import_react22 = __toModule(require("react"));
+var { rootClassName: rootClassName7 } = internalProps;
+var InfiniteTableColumnCellContext = React23.createContext(null);
+var InfiniteTableColumnCellClassName = `${rootClassName7}ColumnCell`;
 function isColumnWithField(c) {
   return typeof c.field === "string";
 }
@@ -4460,6 +4734,8 @@ function InfiniteTableColumnCellFn(props) {
   var _a;
   const {
     rowInfo,
+    rowStyle,
+    rowClassName,
     width,
     column,
     onMouseLeave,
@@ -4474,7 +4750,7 @@ function InfiniteTableColumnCellFn(props) {
     showZebraRows
   } = props;
   if (!column) {
-    return /* @__PURE__ */ React20.createElement("div", {
+    return /* @__PURE__ */ React23.createElement("div", {
       ref: domRef
     }, "no column");
   }
@@ -4483,37 +4759,49 @@ 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 { componentState: computedDataSource } = useDataSourceContextValue();
   const rest = rowInfo.isGroupRow ? {
     rowInfo,
-    data: rowInfo.data
+    isGroupRow: rowInfo.isGroupRow,
+    data: rowInfo.data,
+    value,
+    field: column.field
   } : {
     rowInfo,
-    data: rowInfo.data
+    isGroupRow: rowInfo.isGroupRow,
+    data: rowInfo.data,
+    value,
+    field: column.field
   };
   const stylingRenderParam = __spreadValues({
-    value,
-    column,
-    isGroupRow
+    column
   }, rest);
   const renderValue = value;
   const renderParam = __spreadProps(__spreadValues({
-    value,
     column,
     domRef,
-    groupRowInfo,
-    isGroupRow
+    groupRowInfo
   }, rest), {
+    isGroupRow,
     rowIndex,
     toggleGroupRow,
     toggleCurrentGroupRow: () => {
@@ -4531,15 +4819,23 @@ function InfiniteTableColumnCellFn(props) {
     }
     const renderFn = column.render || column.renderValue;
     if (renderFn) {
-      return /* @__PURE__ */ React20.createElement(RenderHookComponent, {
+      return /* @__PURE__ */ React23.createElement(RenderHookComponent, {
         render: renderFn,
         renderParam
       });
     }
     return renderValue;
   };
+  const rowPropsAndStyleArgs = __spreadProps(__spreadValues({}, rest), {
+    rowIndex
+  });
+  const rowComputedClassName = typeof rowClassName === "function" ? rowClassName(rowPropsAndStyleArgs) : rowClassName;
   const colClassName = column.className ? typeof column.className === "function" ? column.className(stylingRenderParam) : column.className : void 0;
-  const style = column.style ? typeof column.style === "function" ? column.style(stylingRenderParam) || {} : __spreadValues({}, column.style) : {};
+  let style;
+  if (rowStyle) {
+    style = typeof rowStyle === "function" ? __spreadValues(__spreadValues({}, style), rowStyle(rowPropsAndStyleArgs)) : __spreadValues(__spreadValues({}, style), rowStyle);
+  }
+  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 odd = (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
@@ -4555,17 +4851,17 @@ function InfiniteTableColumnCellFn(props) {
     onMouseLeave,
     onMouseEnter,
     cssEllipsis: (_a = column.cssEllipsis) != null ? _a : true,
-    className: join(useCellClassName(column, [InfiniteTableColumnCellClassName, InfiniteTableCellClassName], ColumnCellRecipe, { dragging: false, zebra }), colClassName),
+    className: join(useCellClassName(column, [InfiniteTableColumnCellClassName, InfiniteTableCellClassName], ColumnCellRecipe, { dragging: false, zebra }), colClassName, rowComputedClassName),
     renderChildren
   };
   const ContextProvider = InfiniteTableColumnCellContext.Provider;
-  return /* @__PURE__ */ React20.createElement(ContextProvider, {
+  return /* @__PURE__ */ React23.createElement(ContextProvider, {
     value: renderParam
-  }, /* @__PURE__ */ React20.createElement(InfiniteTableCell, __spreadValues({}, cellProps)));
+  }, /* @__PURE__ */ React23.createElement(InfiniteTableCell, __spreadValues({}, cellProps)));
 }
-var InfiniteTableColumnCell = React20.memo(InfiniteTableColumnCellFn);
+var InfiniteTableColumnCell = React23.memo(InfiniteTableColumnCellFn);
 function useInfiniteColumnCell() {
-  const result = (0, import_react20.useContext)(InfiniteTableColumnCellContext);
+  const result = (0, import_react22.useContext)(InfiniteTableColumnCellContext);
   return result;
 }
 
@@ -4576,7 +4872,7 @@ var RowClsRecipe = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassNa
 var RowHoverCls = "_7pupv01";
 
 // src/components/InfiniteTable/components/LoadMask.tsx
-var React21 = __toModule(require("react"));
+var React24 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/LoadMask.css.ts
 var LoadMaskCls = { visible: "qy58ya1 qy58ya0 _16lm1iw2 _16lm1iwt _16lm1iwv _16lm1iwz _16lm1iwx", hidden: "qy58ya2 qy58ya0 _16lm1iw2 _16lm1iwt _16lm1iwv _16lm1iwz _16lm1iwx" };
@@ -4584,22 +4880,22 @@ var LoadMaskOverlayCls = "qy58ya3 _16lm1iw2 _16lm1iwt _16lm1iwv _16lm1iwz _16lm1
 var LoadMaskTextCls = "qy58ya4";
 
 // src/components/InfiniteTable/components/LoadMask.tsx
-var { rootClassName: rootClassName7 } = internalProps;
-var baseCls = `${rootClassName7}-LoadMask`;
+var { rootClassName: rootClassName8 } = internalProps;
+var baseCls = `${rootClassName8}-LoadMask`;
 function LoadMaskFn(props) {
   const { visible, children = "Loading" } = props;
-  return /* @__PURE__ */ React21.createElement("div", {
+  return /* @__PURE__ */ React24.createElement("div", {
     className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls}`
-  }, /* @__PURE__ */ React21.createElement("div", {
+  }, /* @__PURE__ */ React24.createElement("div", {
     className: `${LoadMaskOverlayCls} ${baseCls}-Overlay`
-  }), /* @__PURE__ */ React21.createElement("div", {
+  }), /* @__PURE__ */ React24.createElement("div", {
     className: `${LoadMaskTextCls} ${baseCls}-Text`
   }, children));
 }
-var LoadMask = React21.memo(LoadMaskFn);
+var LoadMask = React24.memo(LoadMaskFn);
 
 // src/components/InfiniteTable/hooks/useAutoSizeColumns.ts
-var import_react21 = __toModule(require("react"));
+var import_react23 = __toModule(require("react"));
 var OFFSET = 10;
 function getColumnContentMaxWidths(domRef, options) {
   var _a;
@@ -4621,6 +4917,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);
@@ -4658,11 +4955,11 @@ function useAutoSizeColumns() {
     componentActions,
     componentState: { domRef, ready, autoSizeColumnsKey, brain }
   } = useComponentState();
-  const [refreshId, setRefreshId] = (0, import_react21.useState)(0);
+  const [refreshId, setRefreshId] = (0, import_react23.useState)(0);
   const theKey = typeof autoSizeColumnsKey === "object" ? autoSizeColumnsKey.key : autoSizeColumnsKey;
   const getTheKey = useLatest(theKey);
-  const lastExecutedIdentifierRef = (0, import_react21.useRef)(null);
-  (0, import_react21.useEffect)(() => {
+  const lastExecutedIdentifierRef = (0, import_react23.useRef)(null);
+  (0, import_react23.useEffect)(() => {
     const key = getTheKey();
     if (key == null) {
       return;
@@ -4675,7 +4972,7 @@ function useAutoSizeColumns() {
     };
     return brain.onRenderRangeChange(onChange);
   }, [brain]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     var _a;
     if (theKey == null) {
       return;
@@ -4720,16 +5017,16 @@ function useAutoSizeColumns() {
 }
 
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
-var import_react23 = __toModule(require("react"));
-var import_react24 = __toModule(require("react"));
+var import_react25 = __toModule(require("react"));
+var import_react26 = __toModule(require("react"));
 
 // src/components/hooks/useRerender.ts
-var import_react22 = __toModule(require("react"));
+var import_react24 = __toModule(require("react"));
 var useRerender = () => {
-  const [state, setState] = (0, import_react22.useState)(0);
+  const [state, setState] = (0, import_react24.useState)(0);
   return [
     state,
-    (0, import_react22.useCallback)(() => {
+    (0, import_react24.useCallback)(() => {
       setState((state2) => state2 + 1);
     }, [setState])
   ];
@@ -4785,6 +5082,8 @@ function useCellRendering(param) {
     groupRenderStrategy,
     brain,
     showZebraRows,
+    rowStyle,
+    rowClassName,
     onScrollToTop,
     onScrollToBottom,
     scrollToBottomOffset
@@ -4801,13 +5100,13 @@ function useCellRendering(param) {
     bodySize,
     rowspan
   });
-  const scrollTopMaxRef = (0, import_react23.useRef)(0);
-  (0, import_react23.useEffect)(() => {
+  const scrollTopMaxRef = (0, import_react25.useRef)(0);
+  (0, import_react25.useEffect)(() => {
     return brain.onRenderCountChange(() => {
       scrollTopMaxRef.current = brain.scrollTopMax;
     });
   }, [brain]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     return brain.onScrollStop((scrollPosition) => {
       const { scrollTop } = scrollPosition;
       if (scrollTop === 0) {
@@ -4824,7 +5123,7 @@ function useCellRendering(param) {
       }
     });
   }, [brain, onScrollToTop, onScrollToBottom]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!bodySize.height) {
       return;
     }
@@ -4845,10 +5144,10 @@ function useCellRendering(param) {
     }
   }, [!!bodySize.height]);
   const [, rerender] = useRerender();
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     rerender();
   }, [dataSourceState]);
-  const renderCell = (0, import_react23.useCallback)((params) => {
+  const renderCell = (0, import_react25.useCallback)((params) => {
     const {
       rowIndex,
       colIndex,
@@ -4879,9 +5178,11 @@ function useCellRendering(param) {
       onMouseLeave,
       domRef,
       width,
-      column
+      column,
+      rowStyle,
+      rowClassName
     };
-    return /* @__PURE__ */ import_react24.default.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
+    return /* @__PURE__ */ import_react26.default.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
   }, [
     rowHeight,
     getData,
@@ -4889,7 +5190,9 @@ function useCellRendering(param) {
     groupRenderStrategy,
     toggleGroupRow,
     showZebraRows,
-    repaintId
+    repaintId,
+    rowStyle,
+    rowClassName
   ]);
   return {
     renderCell
@@ -4897,13 +5200,13 @@ function useCellRendering(param) {
 }
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-var import_react38 = __toModule(require("react"));
+var import_react40 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useColumnGroups.ts
-var import_react26 = __toModule(require("react"));
+var import_react28 = __toModule(require("react"));
 
 // src/components/hooks/useInterceptedMap.ts
-var import_react25 = __toModule(require("react"));
+var import_react27 = __toModule(require("react"));
 function interceptMap(map2, fns) {
   const { set, delete: deleteKey, clear } = map2;
   if (fns.set) {
@@ -4991,7 +5294,7 @@ function useColumnGroups() {
     componentActions,
     getComponentState
   } = useComponentState();
-  (0, import_react26.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const recompute = () => {
       componentActions.columnGroupsDepthsMap = computeColumnGroupsDepths(computedColumnGroups);
     };
@@ -5002,7 +5305,7 @@ function useColumnGroups() {
       set: update
     });
   }, [computedColumnGroups]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     return interceptMap(collapsedColumnGroups, {
       set: (key, visibleCol) => {
         const colIds = key.slice(1);
@@ -5037,14 +5340,17 @@ function useColumnGroups() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnRowspan.ts
-var import_react27 = __toModule(require("react"));
+var import_react29 = __toModule(require("react"));
 function useColumnRowspan(computedVisibleColumns) {
   const { getState: getDataSourceState } = useDataSourceContextValue();
-  const rowspan = (0, import_react27.useMemo)(() => {
+  const rowspan = (0, import_react29.useMemo)(() => {
     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) {
@@ -5063,10 +5369,10 @@ function useColumnRowspan(computedVisibleColumns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnSizeFn.ts
-var import_react28 = __toModule(require("react"));
+var import_react30 = __toModule(require("react"));
 var debug4 = dbg("useColumnSizeFn");
 function useColumnSizeFn(columns) {
-  const columnSize = (0, import_react28.useCallback)((index) => {
+  const columnSize = (0, import_react30.useCallback)((index) => {
     const column = columns[index];
     if (!column) {
       debug4("cannot find column at index", index, columns);
@@ -5077,10 +5383,10 @@ function useColumnSizeFn(columns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-var import_react34 = __toModule(require("react"));
+var import_react36 = __toModule(require("react"));
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
-var React25 = __toModule(require("react"));
+var React28 = __toModule(require("react"));
 
 // src/utils/stripVar.ts
 function stripVar(cssVariableWithVarString) {
@@ -5096,8 +5402,8 @@ var showLoadingIcon = (rowInfo) => {
 };
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
-var React23 = __toModule(require("react"));
-var import_react29 = __toModule(require("react"));
+var React26 = __toModule(require("react"));
+var import_react31 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.css.ts
 var import_createRuntimeFn5 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
@@ -5108,7 +5414,7 @@ var ExpanderIconClsVariants = (0, import_createRuntimeFn5.createRuntimeFn)({ def
 function ExpanderIcon(props) {
   var _a;
   const { size = 24 } = props;
-  const [expanded, setExpanded] = (0, import_react29.useState)((_a = props.expanded) != null ? _a : props.defaultExpanded);
+  const [expanded, setExpanded] = (0, import_react31.useState)((_a = props.expanded) != null ? _a : props.defaultExpanded);
   const onClick = () => {
     var _a2;
     (_a2 = props.onChange) == null ? void 0 : _a2.call(props, !expanded);
@@ -5116,12 +5422,12 @@ function ExpanderIcon(props) {
       setExpanded(!expanded);
     }
   };
-  React23.useEffect(() => {
+  React26.useEffect(() => {
     if (isControlled("expanded", props)) {
       setExpanded(props.expanded);
     }
   }, [props.expanded]);
-  return /* @__PURE__ */ React23.createElement("svg", {
+  return /* @__PURE__ */ React26.createElement("svg", {
     "data-name": "expander-icon",
     xmlns: "http://www.w3.org/2000/svg",
     height: `${size}px`,
@@ -5132,20 +5438,20 @@ function ExpanderIcon(props) {
     className: join(props.className, ExpanderIconCls, ExpanderIconClsVariants({
       expanded
     }), "InfiniteIcon", "InfiniteIcon-expander", `InfiniteIcon-expander--${expanded ? "expanded" : "collapsed"}`)
-  }, /* @__PURE__ */ React23.createElement("path", {
+  }, /* @__PURE__ */ React26.createElement("path", {
     d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
   }));
 }
 
 // src/components/InfiniteTable/components/icons/LoadingIcon.tsx
-var React24 = __toModule(require("react"));
+var React27 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/icons/LoadingIcon.css.ts
 var LoadingIconCls = "_16lm1iw8 _16lm1iwf _16lm1iwd";
 
 // src/components/InfiniteTable/components/icons/LoadingIcon.tsx
 var LoadingIcon = (props) => {
-  return /* @__PURE__ */ React24.createElement("svg", {
+  return /* @__PURE__ */ React27.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     style: {
       margin: "auto",
@@ -5157,14 +5463,14 @@ var LoadingIcon = (props) => {
     viewBox: "0 0 100 100",
     preserveAspectRatio: "xMidYMid",
     className: join(props.className, LoadingIconCls, "InfiniteIcon", "InfiniteIcon-loading")
-  }, /* @__PURE__ */ React24.createElement("circle", {
+  }, /* @__PURE__ */ React27.createElement("circle", {
     cx: "50",
     cy: "50",
     fill: "none",
     strokeWidth: "10",
     r: "35",
     strokeDasharray: "164.93361431346415 56.97787143782138"
-  }, /* @__PURE__ */ React24.createElement("animateTransform", {
+  }, /* @__PURE__ */ React27.createElement("animateTransform", {
     attributeName: "transform",
     type: "rotate",
     repeatCount: "indefinite",
@@ -5184,7 +5490,7 @@ function getGroupColumnRender({
     var _a, _b, _c;
     let { value, rowInfo, column, groupBy, pivotBy } = renderOptions;
     if (column.renderValue) {
-      value = /* @__PURE__ */ React25.createElement(RenderHookComponent, {
+      value = /* @__PURE__ */ React28.createElement(RenderHookComponent, {
         render: column.renderValue,
         renderParam: renderOptions
       });
@@ -5214,22 +5520,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__ */ React25.createElement(LoadingIcon, null);
+      icon = /* @__PURE__ */ React28.createElement(LoadingIcon, null);
     } else if (showExpanderIcon) {
-      const defaultIcon = /* @__PURE__ */ React25.createElement(ExpanderIcon, {
+      const defaultIcon = /* @__PURE__ */ React28.createElement(ExpanderIcon, {
         expanded: !collapsed,
         onChange: () => {
           toggleGroupRow(groupKeys);
         }
       });
-      icon = column.renderGroupIcon ? /* @__PURE__ */ React25.createElement(RenderHookComponent, {
+      icon = column.renderGroupIcon ? /* @__PURE__ */ React28.createElement(RenderHookComponent, {
         render: column.renderGroupIcon,
         renderParam: Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)
       }) : defaultIcon;
     }
-    return /* @__PURE__ */ React25.createElement("div", {
+    return /* @__PURE__ */ React28.createElement("div", {
       className: join(display.flex, alignItems.center)
-    }, icon, /* @__PURE__ */ React25.createElement("div", {
+    }, icon, /* @__PURE__ */ React28.createElement("div", {
       className: cssEllipsisClassName
     }, value != null ? value : null));
   };
@@ -5274,9 +5580,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__ */ React25.createElement(LoadingIcon, null);
+        icon = /* @__PURE__ */ React28.createElement(LoadingIcon, null);
       } else if (showExpanderIcon) {
-        const defaultIcon = /* @__PURE__ */ React25.createElement(ExpanderIcon, {
+        const defaultIcon = /* @__PURE__ */ React28.createElement(ExpanderIcon, {
           expanded: !collapsed,
           onChange: () => {
             if (!rowInfo.isGroupRow) {
@@ -5291,9 +5597,9 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
           icon = column.renderGroupIcon(renderParam);
         }
       }
-      return /* @__PURE__ */ React25.createElement("div", {
+      return /* @__PURE__ */ React28.createElement("div", {
         className: join(display.flex, alignItems.center, GroupRowExpanderCls)
-      }, icon, /* @__PURE__ */ React25.createElement("div", {
+      }, icon, /* @__PURE__ */ React28.createElement("div", {
         className: cssEllipsisClassName
       }, value != null ? value : null));
     }
@@ -5309,11 +5615,11 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
 }
 
 // src/components/InfiniteTable/hooks/useEffectWithRaf.ts
-var import_react30 = __toModule(require("react"));
+var import_react32 = __toModule(require("react"));
 function useEffectWithRaf(fn, deps) {
-  const rafId = (0, import_react30.useRef)(0);
-  const removeFnRaf = (0, import_react30.useRef)();
-  (0, import_react30.useEffect)(() => {
+  const rafId = (0, import_react32.useRef)(0);
+  const removeFnRaf = (0, import_react32.useRef)();
+  (0, import_react32.useEffect)(() => {
     rafId.current = requestAnimationFrame(() => {
       removeFnRaf.current = fn();
     });
@@ -5330,7 +5636,7 @@ function useEffectWithRaf(fn, deps) {
 }
 
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
-var import_react33 = __toModule(require("react"));
+var import_react35 = __toModule(require("react"));
 
 // src/utils/groupAndPivot/index.ts
 var LAZY_ROOT_KEY_FOR_GROUPS = "____root____";
@@ -5398,21 +5704,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]) {
@@ -5431,10 +5734,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 = {
@@ -5597,6 +5898,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 {
@@ -5605,9 +5907,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];
@@ -5618,7 +5920,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;
@@ -5632,6 +5934,7 @@ function getEnhancedGroupData(options, deepMapValue) {
     collapsed,
     dataSourceHasGrouping: true,
     selfLoaded,
+    error: options.error,
     parents,
     deepRowInfoArray: [],
     collapsedChildrenCount: 0,
@@ -5695,6 +5998,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),
@@ -5740,8 +6044,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,
@@ -5752,7 +6057,7 @@ function enhancedFlatten(param) {
               parents: Array.from(parents),
               indexInParentGroups: [...indexInParentGroups, index],
               indexInGroup: index,
-              indexInAll: startIndex + index,
+              indexInAll,
               groupBy: groupByStrings,
               groupNesting,
               groupCount: enhancedGroupData.groupCount
@@ -5784,7 +6089,7 @@ function enhancedFlatten(param) {
 }
 
 // src/components/DataSource/index.tsx
-var React26 = __toModule(require("react"));
+var React29 = __toModule(require("react"));
 
 // src/utils/multisort/sortTypes.ts
 var numberComparator = function(first, second) {
@@ -5795,11 +6100,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) => {
@@ -5812,7 +6117,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;
   }
@@ -5827,8 +6133,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);
   };
 };
@@ -5860,16 +6166,126 @@ var getMultisortFunction = (sortInfo, get) => {
   };
 };
 
+// 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);
+      }
+    }
+  }
+  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
-var import_react32 = __toModule(require("react"));
+var import_react34 = __toModule(require("react"));
 
 // src/components/hooks/useEffectWithChanges.ts
-var import_react31 = __toModule(require("react"));
+var import_react33 = __toModule(require("react"));
 function useEffectWithChanges(fn, deps) {
-  const prevRef = (0, import_react31.useRef)({});
-  const oldValuesRef = (0, import_react31.useRef)({});
+  const prevRef = (0, import_react33.useRef)({});
+  const oldValuesRef = (0, import_react33.useRef)({});
   const oldValues = oldValuesRef.current;
-  const changesRef = (0, import_react31.useRef)({});
+  const changesRef = (0, import_react33.useRef)({});
   const changes = changesRef.current;
   const useEffectDeps = [];
   for (const k in deps) {
@@ -5882,7 +6298,7 @@ function useEffectWithChanges(fn, deps) {
     }
   }
   prevRef.current = deps;
-  (0, import_react31.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     const changes2 = changesRef.current;
     const result = fn(changes2, oldValues);
     changesRef.current = {};
@@ -5891,6 +6307,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;
@@ -5916,6 +6351,7 @@ function buildDataSourceDataParams(componentState, overrides) {
     sortInfo,
     groupBy: componentState.groupBy,
     pivotBy: componentState.pivotBy,
+    filterValue: componentState.filterValue,
     aggregationReducers: componentState.aggregationReducers
   };
   if (dataSourceParams.groupBy) {
@@ -5935,6 +6371,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) {
@@ -5955,6 +6398,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;
@@ -5980,7 +6430,8 @@ function loadData(data, componentState, actions, overrides) {
         childrenLoading: true,
         childrenAvailable: false,
         cache: CACHE_DEFAULT,
-        totalCount: 0
+        totalCount: 0,
+        totalCountUnfiltered: 0
       });
     }
     actions.originalLazyGroupDataChangeDetect = getChangeDetect();
@@ -6004,6 +6455,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;
@@ -6014,24 +6468,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;
@@ -6049,13 +6498,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
@@ -6112,16 +6561,17 @@ function useLoadData() {
     sortInfo,
     groupBy,
     pivotBy,
+    filterValue,
     livePagination,
     livePaginationCursor,
     cursorId: stateCursorId
   } = componentState;
-  const [scrollbars, setScrollbars] = (0, import_react32.useState)({
+  const [scrollbars, setScrollbars] = (0, import_react34.useState)({
     vertical: false,
     horizontal: false
   });
-  const scrollbarsRef = (0, import_react32.useRef)(scrollbars);
-  (0, import_react32.useEffect)(() => {
+  const scrollbarsRef = (0, import_react34.useRef)(scrollbars);
+  (0, import_react34.useEffect)(() => {
     notifyScrollbarsChange.onChange((scrollbars2) => {
       if (!scrollbars2) {
         return;
@@ -6131,7 +6581,7 @@ function useLoadData() {
     });
     return () => notifyScrollbarsChange.destroy();
   }, [notifyScrollbarsChange]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (!livePagination) {
       return;
     }
@@ -6145,7 +6595,7 @@ function useLoadData() {
     });
     return () => cancelAnimationFrame(frameId);
   }, [livePaginationCursor]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (!livePagination || livePaginationCursor !== void 0) {
       return;
     }
@@ -6159,7 +6609,7 @@ function useLoadData() {
     });
     return () => cancelAnimationFrame(frameId);
   }, [dataArray.length, livePaginationCursor]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     const state = getComponentState();
     const { livePaginationCursor: livePaginationCursor2, livePagination: livePagination2, dataArray: dataArray2 } = state;
     if (!scrollbars.vertical && livePagination2) {
@@ -6174,9 +6624,10 @@ function useLoadData() {
     sortInfo,
     groupBy,
     pivotBy,
+    filterValue,
     cursorId: livePagination ? stateCursorId : null
   };
-  const initialRef = (0, import_react32.useRef)(true);
+  const initialRef = (0, import_react34.useRef)(true);
   useLazyLoadRange();
   useEffectWithChanges(() => {
     const componentState2 = getComponentState();
@@ -6208,7 +6659,7 @@ function useLazyLoadRange() {
     componentActions: actions,
     componentState
   } = useComponentState();
-  (0, import_react32.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     actions.lazyLoadCacheOfLoadedBatches = new DeepMap();
   }, [componentState.data, componentState.dataParams]);
   const {
@@ -6217,7 +6668,7 @@ function useLazyLoadRange() {
     dataArray,
     scrollStopDelayUpdatedByTable
   } = componentState;
-  const latestRenderRangeRef = (0, import_react32.useRef)(null);
+  const latestRenderRangeRef = (0, import_react34.useRef)(null);
   const loadRange = (renderRange, cache = getComponentState().lazyLoadCacheOfLoadedBatches) => {
     const componentState2 = getComponentState();
     renderRange = renderRange || latestRenderRangeRef.current;
@@ -6236,8 +6687,8 @@ function useLazyLoadRange() {
       componentActions: actions
     }, cache);
   };
-  const debouncedLoadRange = (0, import_react32.useMemo)(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
-  (0, import_react32.useEffect)(() => {
+  const debouncedLoadRange = (0, import_react34.useMemo)(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
+  (0, import_react34.useEffect)(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       return notifyRenderRangeChange.onChange((renderRange) => {
         latestRenderRangeRef.current = renderRange;
@@ -6246,7 +6697,7 @@ function useLazyLoadRange() {
     }
     return;
   }, [lazyLoadBatchSize]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
     }
@@ -6279,7 +6730,7 @@ function lazyLoadRange(options, cache) {
       theGroupKeys.pop();
     }
     const cacheKeys = theGroupKeys.length ? theGroupKeys : rootGroupKeys;
-    const indexInGroup = rowInfo.indexInGroup;
+    const indexInGroup = rowInfo.dataSourceHasGrouping ? rowInfo.indexInGroup : rowInfo.indexInAll;
     if (rowInfo.isGroupRow && !rowInfo.collapsed && !rowInfo.childrenAvailable) {
       const currentFnCall = {
         lazyLoadStartIndex: 0,
@@ -6302,7 +6753,7 @@ function lazyLoadRange(options, cache) {
     if (!rowLoaded) {
       let cachedFnCalls = perGroupFnCalls.get(cacheKeys);
       const batchStartIndexInGroup = Math.floor(indexInGroup / lazyLoadBatchSize) * lazyLoadBatchSize;
-      const offset = rowInfo.indexInGroup - batchStartIndexInGroup;
+      const offset = indexInGroup - batchStartIndexInGroup;
       const absoluteIndexOfBatchStart = dataArray[rowInfo.indexInAll - offset].indexInAll;
       const batchStartRowLoaded = isRowLoaded(absoluteIndexOfBatchStart);
       const batchStartRowId = dataArray[absoluteIndexOfBatchStart].id;
@@ -6400,116 +6851,6 @@ function discardCallsWithEqualArg(fn, timeframe = 50, getCompareObject) {
   };
 }
 
-// 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);
-      }
-    }
-  }
-  collapseGroupRow(keys) {
-    this.setGroupRowExpanded(keys, false);
-  }
-  expandGroupRow(keys) {
-    this.setGroupRowExpanded(keys, true);
-  }
-  toggleGroupRow(keys) {
-    this.setGroupRowExpanded(keys, !this.isGroupRowExpanded(keys));
-  }
-};
-
 // src/components/DataSource/state/normalizeSortInfo.ts
 var EMPTY_ARRAY = Object.freeze([]);
 var normalizeSortInfo = (initialSortInfo, weakMap) => {
@@ -6555,9 +6896,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,
@@ -6580,6 +6924,15 @@ 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);
+    },
     aggregationReducers: 1,
     collapseGroupRowsOnDataFunctionChange: (collapseGroupRowsOnDataFunctionChange) => collapseGroupRowsOnDataFunctionChange != null ? collapseGroupRowsOnDataFunctionChange : true,
     loading: (loading) => loading != null ? loading : false,
@@ -6605,10 +6958,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) ? "client" : typeof props.data === "function" ? "server" : "client",
     multiSort: Array.isArray(controlledSort ? props.sortInfo : props.defaultSortInfo),
     lazyLoadBatchSize: typeof props.lazyLoad === "object" ? props.lazyLoad.batchSize : void 0
   };
@@ -6673,6 +7041,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
@@ -6754,7 +7134,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;
         }
@@ -6803,7 +7183,7 @@ function getPivotColumnsAndColumnGroups({
           sortable: false,
           columnGroup: parentColumnGroupId,
           header,
-          valueGetter: ({ rowInfo }) => {
+          valueFormatter: ({ rowInfo }) => {
             var _a, _b;
             if (!rowInfo.isGroupRow) {
               return null;
@@ -6858,7 +7238,7 @@ function getPivotColumnsAndColumnGroups({
             pivotIndex: keys.length - 1,
             pivotBy,
             sortable: false,
-            valueGetter: ({ rowInfo }) => {
+            valueFormatter: ({ rowInfo }) => {
               var _a, _b;
               if (!rowInfo.isGroupRow) {
                 return null;
@@ -6902,14 +7282,72 @@ function toRowInfo(data, id, index) {
     data,
     id,
     indexInAll: index,
-    indexInGroup: index,
     isGroupRow: false,
     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) {
@@ -6927,15 +7365,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 === "client";
+  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 === "client" && (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",
@@ -6944,23 +7391,43 @@ 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;
+  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;
   if (shouldSort) {
+    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({
@@ -7003,7 +7470,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;
@@ -7031,7 +7498,7 @@ function DataSourceWithContext(props) {
   if (typeof children === "function") {
     children = children(computedValues);
   }
-  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, children);
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, children);
 }
 var DataSourceRoot = getComponentStateRoot({
   initSetupState,
@@ -7054,14 +7521,14 @@ function DataSourceCmp({ children }) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
-  return /* @__PURE__ */ React26.createElement(DataSourceContext.Provider, {
+  return /* @__PURE__ */ React29.createElement(DataSourceContext.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ React26.createElement(DataSourceWithContext, {
+  }, /* @__PURE__ */ React29.createElement(DataSourceWithContext, {
     children
   }));
 }
 function DataSource(props) {
-  return /* @__PURE__ */ React26.createElement(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ React26.createElement(DataSourceCmp, {
+  return /* @__PURE__ */ React29.createElement(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ React29.createElement(DataSourceCmp, {
     children: props.children
   }));
 }
@@ -7069,7 +7536,7 @@ function DataSource(props) {
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
 function useToggleGroupRow() {
   const { getState: getDataSourceState, componentActions: dataSourceActions } = useDataSourceContextValue();
-  const toggleGroupRow = (0, import_react33.useCallback)((groupKeys) => {
+  const toggleGroupRow = (0, import_react35.useCallback)((groupKeys) => {
     const state = getDataSourceState();
     const newState = new GroupRowsState(state.groupRowsState);
     newState.toggleGroupRow(groupKeys);
@@ -7101,7 +7568,7 @@ function useToggleGroupRow() {
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
 function useGroupByMap(groupBy) {
-  const groupByMap = (0, import_react34.useMemo)(() => {
+  const groupByMap = (0, import_react36.useMemo)(() => {
     return groupBy.reduce((acc, groupBy2, index) => {
       acc.set(groupBy2.field, {
         groupBy: groupBy2,
@@ -7125,13 +7592,13 @@ function useColumnsWhen() {
     }
   } = useComponentState();
   const groupByMap = useGroupByMap(groupBy);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
   }, [groupRenderStrategy]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (pivotGrandTotalColumnPosition != void 0) {
       dataSourceActions.pivotGrandTotalColumnPosition = pivotGrandTotalColumnPosition;
     }
@@ -7161,7 +7628,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;
           },
@@ -7205,7 +7672,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
     });
     return computedColumns.size === 0 ? void 0 : computedColumns;
   }
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     const update = () => {
       componentActions.columnsWhenInlineGroupRenderStrategy = computeColumnsWhenInlineGroupRenderStrategy(columns, groupByMap, groupRenderStrategy, toggleGroupRow);
     };
@@ -7234,7 +7701,7 @@ function useColumnsWhenGrouping() {
     }
   } = useComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     const update = () => {
       const columnsWhenGrouping = getColumnsWhenGrouping({
         columns,
@@ -7370,7 +7837,7 @@ function useHideColumns(groupByMap) {
     hideEmptyGroupColumns ? groupRowsState : null,
     hideEmptyGroupColumns
   ]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     const isGrouped = groupBy.length > 0;
     const currentState = getComponentState();
     const { controlledColumnVisibility, columnVisibility } = currentState;
@@ -7485,7 +7952,7 @@ function getColumnsWhenGrouping(params) {
 }
 
 // src/components/InfiniteTable/hooks/useComputedVisibleColumns.ts
-var import_react36 = __toModule(require("react"));
+var import_react38 = __toModule(require("react"));
 
 // src/components/flexbox/index.ts
 var computeFlex = (params) => {
@@ -7642,7 +8109,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) {
@@ -7658,22 +8127,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) => {
@@ -7694,6 +8147,7 @@ var getComputedVisibleColumns = ({
   columnHeaderCssEllipsis,
   pinnedStartMaxWidth,
   pinnedEndMaxWidth,
+  filterValue,
   sortable,
   sortInfo,
   setSortInfo,
@@ -7708,9 +8162,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;
@@ -7758,7 +8222,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;
@@ -7801,7 +8265,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;
     const id = visibleColumnOrder[i];
     const nextColumnId = visibleColumnOrder[i + 1];
     const colType = getColumnComputedType(c, columnTypes);
@@ -7812,47 +8276,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;
@@ -7861,23 +8284,36 @@ 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 result2 = __spreadProps(__spreadValues({
       align: colType.align,
       verticalAlign: colType.verticalAlign,
       defaultHiddenWhenGroupedBy: colType.defaultHiddenWhenGroupedBy,
       valueGetter: colType.valueGetter,
+      valueFormatter: colType.valueFormatter,
       renderValue: colType.renderValue,
       render: colType.render,
       style: colType.style,
       components: colType.components
     }, 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: (_o = (_n = (_m = c.sortable) != null ? _m : colType.sortable) != null ? _n : sortable) != null ? _o : true,
       computedSortInfo,
       computedSortIndex,
       computedMultiSort: multiSort,
@@ -7886,14 +8322,57 @@ var getComputedVisibleColumns = ({
       computedSortedDesc,
       computedVisibleIndex: i,
       computedPinned,
-      computedDraggable: (_o = (_n = c.draggable) != null ? _n : draggableColumns) != null ? _o : true,
+      computedDraggable: (_q = (_p = c.draggable) != null ? _p : draggableColumns) != null ? _q : 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: (_t = (_s = (_r = c.header) != null ? _r : colType.header) != null ? _s : c.name) != null ? _t : c.field
     });
     computedOffset += computedWidth;
     computedVisibleColumnsMap.set(result2.id, result2);
@@ -7934,10 +8413,10 @@ var getComputedVisibleColumns = ({
 };
 
 // src/components/InfiniteTable/hooks/useRerenderOnKeyChange.ts
-var import_react35 = __toModule(require("react"));
+var import_react37 = __toModule(require("react"));
 var useRerenderOnKeyChange = (map2) => {
   const [renderId, rerender] = useRerender();
-  (0, import_react35.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     const update = rafFn(rerender);
     return interceptMap(map2, {
       set: update,
@@ -7962,6 +8441,7 @@ var useComputedVisibleColumns = ({
   sortInfo,
   multiSort,
   setSortInfo,
+  filterValue,
   columnOrder,
   columnPinning,
   columnTypes,
@@ -7989,7 +8469,7 @@ var useComputedVisibleColumns = ({
     computedPinnedEndOffset,
     computedPinnedEndWidth,
     computedPinnedStartWidth
-  } = (0, import_react36.useMemo)(() => {
+  } = (0, import_react38.useMemo)(() => {
     return getComputedVisibleColumns({
       columns,
       bodySize,
@@ -7999,6 +8479,7 @@ var useComputedVisibleColumns = ({
       columnCssEllipsis,
       columnHeaderCssEllipsis,
       viewportReservedWidth,
+      filterValue,
       sortable,
       sortInfo,
       setSortInfo,
@@ -8023,6 +8504,7 @@ var useComputedVisibleColumns = ({
     sortInfo,
     setSortInfo,
     multiSort,
+    filterValue,
     columnOrder,
     columnVisibility,
     columnVisibilityAssumeVisible,
@@ -8055,7 +8537,7 @@ var useComputedVisibleColumns = ({
 };
 
 // src/components/InfiniteTable/hooks/useScrollbars.ts
-var import_react37 = __toModule(require("react"));
+var import_react39 = __toModule(require("react"));
 var INITIAL_SCROLLBARS = {
   vertical: false,
   horizontal: false
@@ -8063,8 +8545,8 @@ var INITIAL_SCROLLBARS = {
 function useScrollbars(brain) {
   const { getComponentState: getInfiniteTableState } = useComponentState();
   const { getState: getDataSourceState } = useDataSourceContextValue();
-  const [scrollbars, setScrollbars] = (0, import_react37.useState)(INITIAL_SCROLLBARS);
-  (0, import_react37.useEffect)(() => {
+  const [scrollbars, setScrollbars] = (0, import_react39.useState)(INITIAL_SCROLLBARS);
+  (0, import_react39.useEffect)(() => {
     return brain.onRenderCountChange(() => {
       const { scrollTopMax, scrollLeftMax } = brain;
       setScrollbars({
@@ -8073,7 +8555,7 @@ function useScrollbars(brain) {
       });
     });
   }, [brain]);
-  (0, import_react37.useLayoutEffect)(() => {
+  (0, import_react39.useLayoutEffect)(() => {
     const dataSourceState = getDataSourceState();
     const { onScrollbarsChange } = getInfiniteTableState();
     const { notifyScrollbarsChange } = dataSourceState;
@@ -8104,27 +8586,27 @@ function useComputed() {
     bodySize,
     showSeparatePivotColumnForSingleAggregation
   } = componentState;
-  (0, import_react38.useState)(() => {
+  (0, import_react40.useState)(() => {
     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;
       }
     });
   });
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     dataSourceActions.showSeparatePivotColumnForSingleAggregation = showSeparatePivotColumnForSingleAggregation;
   }, [showSeparatePivotColumnForSingleAggregation]);
-  const { multiSort } = dataSourceState;
+  const { multiSort, filterValue } = dataSourceState;
   useColumnGroups();
   const { toggleGroupRow } = useColumnsWhen();
-  const setSortInfo = (0, import_react38.useCallback)((sortInfo) => {
+  const setSortInfo = (0, import_react40.useCallback)((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;
@@ -8163,6 +8645,7 @@ function useComputed() {
     columnVisibility,
     columnVisibilityAssumeVisible: true,
     columnPinning,
+    filterValue,
     columnSizing,
     columnTypes
   });
@@ -8172,6 +8655,7 @@ function useComputed() {
   const computedPinnedStartOverflow = computedPinnedStartWidth ? computedPinnedStartColumnsWidth > computedPinnedStartWidth : false;
   const computedPinnedEndOverflow = computedPinnedEndWidth ? computedPinnedEndColumnsWidth > computedPinnedEndWidth : false;
   return {
+    showColumnFilters: !!dataSourceState.filterValue,
     scrollbars,
     columnSize,
     rowspan,
@@ -8279,7 +8763,7 @@ function useDOMProps(initialDOMProps) {
 }
 
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
-var import_react39 = __toModule(require("react"));
+var import_react41 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useLicense/crc32.ts
 var DEFAULT_ReversedPolynomial = 3988292384;
@@ -8437,10 +8921,10 @@ var isInsideSandbox = () => {
 };
 var isInsidePlayground = isInsideSandbox() || isInsideSandpack();
 var useLicense = (licenseKey = "") => {
-  const valid = (0, import_react39.useMemo)(() => {
+  const valid = (0, import_react41.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.3.0"
+      version: "0.3.3"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -8451,7 +8935,7 @@ var useLicense = (licenseKey = "") => {
 };
 
 // src/components/InfiniteTable/state/getInitialState.ts
-var import_react40 = __toModule(require("react"));
+var import_react42 = __toModule(require("react"));
 
 // src/components/VirtualBrain/ScrollListener.ts
 var initialScrollPosition = {
@@ -8528,11 +9012,11 @@ function initSetupState2() {
     brain,
     headerBrain,
     columnShifts: null,
-    domRef: (0, import_react40.createRef)(),
-    scrollerDOMRef: (0, import_react40.createRef)(),
-    portalDOMRef: (0, import_react40.createRef)(),
+    domRef: (0, import_react42.createRef)(),
+    scrollerDOMRef: (0, import_react42.createRef)(),
+    portalDOMRef: (0, import_react42.createRef)(),
     onRowHeightCSSVarChange: buildSubscriptionCallback(),
-    onHeaderHeightCSSVarChange: buildSubscriptionCallback(),
+    onColumnHeaderHeightCSSVarChange: buildSubscriptionCallback(),
     bodySize: {
       width: 0,
       height: 0
@@ -8582,6 +9066,7 @@ 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,
@@ -8589,6 +9074,9 @@ var forwardProps3 = (setupState) => {
     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,
@@ -8601,7 +9089,7 @@ var forwardProps3 = (setupState) => {
     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")),
@@ -8647,7 +9135,7 @@ var mapPropsToState2 = (params) => {
     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 : ""
   };
 };
 
@@ -8660,12 +9148,12 @@ var InfiniteTableRoot = getComponentStateRoot({
   mapPropsToState: mapPropsToState2,
   allowedControlledPropOverrides: {
     rowHeight: true,
-    headerHeight: true
+    columnHeaderHeight: true
   },
   getParentState: () => useDataSource(),
   debugName: "InfiniteTable"
 });
-var InfiniteTableComponent = React27.memo(function InfiniteTableComponent2() {
+var InfiniteTableComponent = React30.memo(function InfiniteTableComponent2() {
   var _a;
   const { componentState, getComputed, computed } = useInfiniteTable();
   const {
@@ -8681,9 +9169,9 @@ var InfiniteTableComponent = React27.memo(function InfiniteTableComponent2() {
     loadingText,
     header,
     onRowHeightCSSVarChange,
-    onHeaderHeightCSSVarChange,
+    onColumnHeaderHeightCSSVarChange,
     rowHeightCSSVar,
-    headerHeightCSSVar,
+    columnHeaderHeightCSSVar,
     components,
     scrollStopDelay,
     brain,
@@ -8698,7 +9186,7 @@ var InfiniteTableComponent = React27.memo(function InfiniteTableComponent2() {
     bodySize,
     computed
   });
-  React27.useEffect(() => {
+  React30.useEffect(() => {
     const dataSourceState = getDataSourceState();
     const onChange = debounce((renderRange) => {
       dataSourceState.notifyRenderRangeChange({
@@ -8711,35 +9199,35 @@ var InfiniteTableComponent = React27.memo(function InfiniteTableComponent2() {
   const licenseValid = useLicense(licenseKey);
   const domProps = useDOMProps(componentState.domProps);
   const LoadMaskCmp = (_a = components == null ? void 0 : components.LoadMask) != null ? _a : LoadMask;
-  React27.useEffect(() => {
+  React30.useEffect(() => {
     brain.setScrollStopDelay(scrollStopDelay);
     dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
   }, [scrollStopDelay]);
   useAutoSizeColumns();
-  return /* @__PURE__ */ React27.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React30.createElement("div", __spreadValues({
     ref: domRef
-  }, domProps), header ? /* @__PURE__ */ React27.createElement(TableHeaderWrapper, {
+  }, domProps), header ? /* @__PURE__ */ React30.createElement(TableHeaderWrapper, {
     brain: headerBrain,
     scrollbars
-  }) : null, /* @__PURE__ */ React27.createElement(InfiniteTableBody, null, /* @__PURE__ */ React27.createElement(HeadlessTable, {
+  }) : null, /* @__PURE__ */ React30.createElement(InfiniteTableBody, null, /* @__PURE__ */ React30.createElement(HeadlessTable, {
     tabIndex: 0,
     scrollStopDelay,
     brain,
     renderCell,
     cellHoverClassNames: HOVERED_CLASS_NAMES,
     scrollerDOMRef
-  }), /* @__PURE__ */ React27.createElement(LoadMaskCmp, {
+  }), /* @__PURE__ */ React30.createElement(LoadMaskCmp, {
     visible: loading
-  }, loadingText)), licenseValid ? null : /* @__PURE__ */ React27.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React27.createElement("div", {
+  }, loadingText)), /* @__PURE__ */ React30.createElement("div", {
     ref: portalDOMRef,
     className: join(`${rootClassName2}Portal`, zIndex[1e3], position.absolute, top[0], left[0])
-  }), rowHeightCSSVar ? /* @__PURE__ */ React27.createElement(CSSVariableWatch, {
+  }), rowHeightCSSVar ? /* @__PURE__ */ React30.createElement(CSSVariableWatch, {
     varName: rowHeightCSSVar,
     onChange: onRowHeightCSSVarChange
-  }) : null, headerHeightCSSVar ? /* @__PURE__ */ React27.createElement(CSSVariableWatch, {
-    varName: headerHeightCSSVar,
-    onChange: onHeaderHeightCSSVarChange
-  }) : null);
+  }) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ React30.createElement(CSSVariableWatch, {
+    varName: columnHeaderHeightCSSVar,
+    onChange: onColumnHeaderHeightCSSVarChange
+  }) : null, /* @__PURE__ */ React30.createElement(InfiniteTableFooter, null), licenseValid ? null : /* @__PURE__ */ React30.createElement(InfiniteTableLicenseFooter, null));
 });
 function InfiniteTableContextProvider() {
   const { componentActions, componentState } = useComponentState();
@@ -8767,27 +9255,27 @@ function InfiniteTableContextProvider() {
     bodySize.width = (_b = (_a = scrollerDOMRef.current) == null ? void 0 : _a.scrollWidth) != null ? _b : bodySize.width;
     componentActions.bodySize = bodySize;
   }, { earlyAttach: true });
-  React27.useEffect(() => {
+  React30.useEffect(() => {
     return () => {
       componentState.onRowHeightCSSVarChange.destroy();
-      componentState.onHeaderHeightCSSVarChange.destroy();
+      componentState.onColumnHeaderHeightCSSVarChange.destroy();
     };
   }, []);
-  React27.useEffect(() => {
+  React30.useEffect(() => {
     if (scrollerDOMRef.current) {
       scrollerDOMRef.current.scrollTop = 0;
     }
   }, [scrollTopKey, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
-  return /* @__PURE__ */ React27.createElement(TableContext2.Provider, {
+  return /* @__PURE__ */ React30.createElement(TableContext2.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ React27.createElement(InfiniteTableComponent, null));
+  }, /* @__PURE__ */ React30.createElement(InfiniteTableComponent, null));
 }
 function InfiniteTable(props) {
-  const table = /* @__PURE__ */ React27.createElement(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ React27.createElement(InfiniteTableContextProvider, null));
-  return /* @__PURE__ */ React27.createElement(React27.StrictMode, null, table);
+  const table = /* @__PURE__ */ React30.createElement(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ React30.createElement(InfiniteTableContextProvider, null));
+  return /* @__PURE__ */ React30.createElement(React30.StrictMode, null, table);
 }
 InfiniteTable.defaultProps = {
   rowHeight: 40,
-  headerHeight: ThemeVars.components.Header.height
+  columnHeaderHeight: ThemeVars.components.Header.columnHeaderHeight
 };