@infinite-table/infinite-react 0.3.2 → 0.3.3

package/index.esm.js

@@ -636,9 +636,9 @@ function debounce(fn, { wait }) {
 // src/components/InfiniteTable/index.tsx
 import {
   StrictMode,
-  createElement as createElement22,
+  createElement as createElement24,
   memo as memo9,
-  useEffect as useEffect23
+  useEffect as useEffect24
 } from "react";
 
 // src/utils/join.ts
@@ -2782,6 +2782,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;
@@ -2856,9 +2859,6 @@ var ReactHeadlessTableRenderer = class extends Logger {
     };
     this.onScrollStart = () => {
       this.scrolling = true;
-      if (this.currentHoveredRow != -1) {
-        this.removeHoverClass(this.currentHoveredRow);
-      }
     };
     this.onScrollStop = () => {
       this.scrolling = false;
@@ -3552,6 +3552,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" };
@@ -3563,122 +3564,135 @@ var zIndex = { "1": "_16lm1iwg", "10": "_16lm1iwh", "1000": "_16lm1iwi", "10000"
 
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
 var InfiniteTableBody = forwardRef2(function InfiniteTableBody2(props, ref) {
-  const { rootClassName: rootClassName8 } = useInternalProps();
+  const { rootClassName: rootClassName9 } = useInternalProps();
   return /* @__PURE__ */ createElement8("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/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
+// src/components/InfiniteTable/components/InfiniteTableFooter/InfiniteTableFooter.tsx
 import {
-  createContext as createContext4,
-  createElement as createElement11
+  createElement as createElement9,
+  forwardRef as forwardRef3
 } from "react";
-import { createPortal } from "react-dom";
-import { useCallback as useCallback6, useContext as useContext5, useEffect as useEffect8, useRef as useRef10 } from "react";
+var InfiniteTableFooter = forwardRef3(function InfiniteTableFooter2(props, ref) {
+  const { rootClassName: rootClassName9 } = useInternalProps();
+  return /* @__PURE__ */ createElement9("div", __spreadProps(__spreadValues({
+    ref
+  }, props), {
+    className: join(`${rootClassName9}Footer`, position.relative, display.flex, flexFlow.row, props.className)
+  }));
+});
 
-// src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
+// src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
 import {
-  Fragment,
-  createElement as createElement9,
-  memo as memo5
+  Fragment as Fragment2,
+  createContext as createContext4,
+  createElement as createElement13,
+  useMemo as useMemo5
 } from "react";
+import { useCallback as useCallback6, useContext as useContext5, useEffect as useEffect9, useRef as useRef10 } from "react";
+import { createPortal } from "react-dom";
 
-// src/components/InfiniteTable/hooks/useInfiniteTableState.ts
-import { useContext as useContext3 } from "react";
-
-// src/components/InfiniteTable/InfiniteTableContext.ts
-import { createContext as createContext3 } from "react";
-var TableContext;
-function getInfiniteTableContext() {
-  if (TableContext) {
-    return TableContext;
-  }
-  return TableContext = createContext3(null);
+// 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
-var useInfiniteTableState = () => {
-  const TableContext2 = getInfiniteTableContext();
-  const { componentState } = useContext3(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)`;
-    }
+// 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`));
   }
-  const finalDOMProps = __spreadProps(__spreadValues({}, domProps), {
-    style,
-    "data-column-id": column.id,
-    className: join(domProps.className, columnAlignCellStyle[(_b = column.align) != null ? _b : "start"], justifyContent[(_c = column.align) != null ? _c : "start"], InfiniteTableCellClassName, ColumnCellCls, shifting ? `${InfiniteTableCellClassName}--shifting ${CellClsVariants.shifting}` : ""),
-    children: /* @__PURE__ */ createElement9(Fragment, null, beforeChildren, /* @__PURE__ */ createElement9("div", {
-      className: `${InfiniteTableCellContentClassName} ${cssEllipsis ? cssEllipsisClassName : overflow.hidden}`
-    }, children), afterChildren)
-  });
-  const RenderComponent = cellType === "body" ? (_d = column.components) == null ? void 0 : _d.ColumnCell : (_e = column.components) == null ? void 0 : _e.HeaderCell;
-  if (RenderComponent) {
-    return /* @__PURE__ */ createElement9(RenderComponent, __spreadValues({}, finalDOMProps));
+  if (column.groupByField) {
+    result.push(...baseClasses.map((c) => `${c}--group-column`));
   }
-  return /* @__PURE__ */ createElement9("div", __spreadProps(__spreadValues({}, finalDOMProps), {
-    ref: domRef
-  }));
+  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 InfiniteTableCell = memo5(InfiniteTableCellFn);
 
 // src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
 var import_binary_search2 = __toModule(require_binary_search());
@@ -3690,10 +3704,22 @@ import {
 } from "react";
 
 // src/components/InfiniteTable/hooks/useInfiniteTable.ts
-import { useContext as useContext4 } from "react";
+import { useContext as useContext3 } from "react";
+
+// src/components/InfiniteTable/InfiniteTableContext.ts
+import { createContext as createContext3 } from "react";
+var TableContext;
+function getInfiniteTableContext() {
+  if (TableContext) {
+    return TableContext;
+  }
+  return TableContext = createContext3(null);
+}
+
+// src/components/InfiniteTable/hooks/useInfiniteTable.ts
 var useInfiniteTable = () => {
   const TableContext2 = getInfiniteTableContext();
-  return useContext4(TableContext2);
+  return useContext3(TableContext2);
 };
 
 // src/components/InfiniteTable/utils/moveXatY.ts
@@ -3844,42 +3870,46 @@ var useColumnPointerEvents = ({
   };
 };
 
-// src/components/InfiniteTable/hooks/useCellClassName.ts
-function useCellClassName(column, baseClasses, variants, extraFlags) {
-  const result = [...baseClasses];
-  const variantObject = {
-    first: column.computedFirst,
-    last: column.computedLast,
-    groupByField: !!column.groupByField,
-    firstInCategory: column.computedFirstInCategory,
-    lastInCategory: column.computedLastInCategory,
-    pinned: column.computedPinned || false,
-    dragging: extraFlags.dragging,
-    zebra: extraFlags.zebra
+// src/components/InfiniteTable/utils/RenderHookComponent.tsx
+function RenderHookComponent(props) {
+  var _a;
+  return (_a = props.render(props.renderParam)) != null ? _a : null;
+}
+
+// src/components/InfiniteTable/components/FilterEditors.tsx
+import React14 from "react";
+function getFilterEditors() {
+  return {
+    string: StringFilterEditor,
+    number: NumberFilterEditor
   };
-  const theVariant = variants(variantObject);
-  result.push(theVariant);
-  if (column.computedFirst) {
-    result.push(...baseClasses.map((c) => `${c}--first`));
-  }
-  if (column.groupByField) {
-    result.push(...baseClasses.map((c) => `${c}--group-column`));
-  }
-  if (column.computedLast) {
-    result.push(...baseClasses.map((c) => `${c}--last`));
-  }
-  if (column.computedFirstInCategory) {
-    result.push(...baseClasses.map((c) => `${c}--first-in-category`));
-  }
-  if (column.computedLastInCategory) {
-    result.push(...baseClasses.map((c) => `${c}--last-in-category`));
-  }
-  if (column.computedPinned) {
-    result.push(...baseClasses.map((c) => `${c}--pinned-${column.computedPinned}`));
-  } else {
-    result.push(...baseClasses.map((c) => `${c}--unpinned`));
-  }
-  return result.filter(Boolean).join(" ");
+}
+var defaultFilterEditors = getFilterEditors();
+function StringFilterEditor(props) {
+  return /* @__PURE__ */ React14.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__ */ React14.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
@@ -3887,6 +3917,24 @@ import {
   createElement as createElement10
 } from "react";
 import { useEffect as useEffect7, useState as useState5 } from "react";
+
+// src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
+var import_createRuntimeFn = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var CellCls = "_1eexc2a5 _16lm1iwl _16lm1iw12 _16lm1iw13 _16lm1iw2 _16lm1iw1b _16lm1iw1c";
+var HeaderCellContentRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zfob115 _16lm1iwq _16lm1iws _16lm1iwl _16lm1iw12 _16lm1iw13", variantClassNames: { filtered: { false: "_12zfob116", true: "_12zfob117" } }, defaultVariants: {}, compoundVariants: [] });
+var 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,
@@ -3931,12 +3979,7 @@ 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%";
   }
@@ -3945,7 +3988,8 @@ function SortIcon(props) {
     className: join(className, InfiniteTableIconClassName, `${InfiniteTableIconClassName}-sort`)
   }, showIndex ? /* @__PURE__ */ createElement10("div", {
     "data-name": "index",
-    style: indexStyle
+    style: indexStyle,
+    className: HeaderSortIconIndexCls
   }, index) : null, /* @__PURE__ */ createElement10("div", {
     style: __spreadValues({ width: sizes[0] }, lineStyle),
     onTransitionEnd
@@ -3956,32 +4000,166 @@ function SortIcon(props) {
   }));
 }
 
-// src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
+// src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
+import {
+  Fragment,
+  createElement as createElement11,
+  memo as memo5
+} from "react";
+
+// src/components/InfiniteTable/hooks/useInfiniteTableState.ts
+import { useContext as useContext4 } from "react";
+var useInfiniteTableState = () => {
+  const TableContext2 = getInfiniteTableContext();
+  const { componentState } = useContext4(TableContext2);
+  return componentState;
+};
+
+// src/components/InfiniteTable/components/cell.css.ts
 var import_createRuntimeFn2 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
-var CellCls = "_1eexc2a5 _16lm1iwl _16lm1iw12 _16lm1iw13 _16lm1iw2 _16lm1iw1b _16lm1iw1c";
-var HeaderCellProxy = "_12zfob10";
-var HeaderCellRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob1d", variantClassNames: { zebra: { false: "_12zfob1e", even: "_12zfob1f", odd: "_12zfob1g" }, dragging: { true: "_12zfob1h", false: "_12zfob1i" }, first: { true: "_12zfob1j", false: "_12zfob1k" }, last: { true: "_12zfob1l", false: "_12zfob1m" }, groupByField: { true: "_12zfob1n", false: "_12zfob1o" }, firstInCategory: { true: "_12zfob1p", false: "_12zfob1q" }, lastInCategory: { true: "_12zfob1r", false: "_12zfob1s" }, pinned: { start: "_12zfob1t", end: "_12zfob1u", false: "_12zfob1v" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob1w"], [{ pinned: "end", firstInCategory: true }, "_12zfob1x"], [{ pinned: false, lastInCategory: true }, "_12zfob1y"]] });
-var HeaderClsRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob13 _16lm1iw12 _16lm1iw2", variantClassNames: { pinned: { start: "_12zfob14", end: "_12zfob15", false: "_12zfob16" }, virtualized: { true: "_12zfob17", false: "_12zfob18" }, overflow: { true: "_12zfob19", false: "_12zfob1a" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1b"], [{ overflow: true, pinned: "end" }, "_12zfob1c"]] });
-var HeaderGroupCls = "_12zfob110 _16lm1iwl _16lm1iw12 _16lm1iw13";
-var HeaderScrollbarPlaceholderCls = "_12zfob12 _16lm1iw2";
-var HeaderSortIconCls = "_12zfob11 _16lm1iw1";
-var HeaderWrapperCls = "_12zfob1z _16lm1iw18 _16lm1iw1 _16lm1iwl _16lm1iw12";
+var CellClsVariants = { shifting: "_1eexc2a3", dragging: "_1eexc2a4" };
+var ColumnCellCls = "_1eexc2a5 _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/utils/RenderHookComponent.tsx
-function RenderHookComponent(props) {
-  var _a;
-  return (_a = props.render(props.renderParam)) != null ? _a : null;
+// src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
+var { rootClassName: 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__ */ createElement11(Fragment, null, beforeChildren, /* @__PURE__ */ createElement11("div", {
+      className: join(InfiniteTableCellContentClassName, cssEllipsis ? cssEllipsisClassName : overflow.hidden, contentClassName),
+      style: contentStyle
+    }, children), afterChildren)
+  });
+  const RenderComponent = cellType === "body" ? (_c = column.components) == null ? void 0 : _c.ColumnCell : (_d = column.components) == null ? void 0 : _d.HeaderCell;
+  if (RenderComponent) {
+    return /* @__PURE__ */ createElement11(RenderComponent, __spreadValues({}, finalDOMProps));
+  }
+  return /* @__PURE__ */ createElement11("div", __spreadProps(__spreadValues({}, finalDOMProps), {
+    ref: domRef
+  }));
+}
+var InfiniteTableCell = memo5(InfiniteTableCellFn);
+
+// src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
+import {
+  createElement as createElement12
+} from "react";
+import { useEffect as useEffect8, useState as useState6 } from "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] = useState6((_b = (_a = props.columnFilterValue) == null ? void 0 : _a.filterValue) != null ? _b : "");
+  const onInputChange = (filterValue) => {
+    setTheValue(filterValue);
+    props.onChange(filterValue);
+  };
+  useEffect8(() => {
+    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__ */ createElement12("div", {
+    onPointerUp: stopPropagation,
+    onPointerDown: stopPropagation,
+    className: `${InfiniteTableColumnHeaderFilterClassName} ${HeaderFilterCls}`,
+    style: { height: props.columnHeaderHeight }
+  }, FilterEditor ? /* @__PURE__ */ createElement12(FilterEditor, __spreadValues({}, filterEditorProps)) : null);
+}
+function InfiniteTableColumnHeaderFilterEmpty() {
+  return /* @__PURE__ */ createElement12("div", {
+    onPointerUp: stopPropagation,
+    onPointerDown: stopPropagation,
+    className: `${InfiniteTableColumnHeaderFilterClassName} ${HeaderFilterCls}`,
+    style: { height: "100%" }
+  });
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
 var InfiniteTableHeaderCellContext = createContext4(null);
-var { rootClassName: rootClassName4 } = internalProps;
-var InfiniteTableHeaderCellClassName = `${rootClassName4}HeaderCell`;
+var { rootClassName: rootClassName5 } = internalProps;
+var InfiniteTableHeaderCellClassName = `${rootClassName5}HeaderCell`;
 function InfiniteTableHeaderCell(props) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   const column = props.column;
   const columns = props.columns;
-  const { onResize, height, width } = props;
+  const { onResize, height, width, headerOptions } = props;
   const sortInfo = column.computedSortInfo;
   let header = column.header;
   const ref = useCallback6((node) => {
@@ -3989,33 +4167,43 @@ function InfiniteTableHeaderCell(props) {
     domRef.current = node;
     (_a2 = props.domRef) == null ? void 0 : _a2.call(props, node);
   }, [props.domRef]);
-  const sortTool = /* @__PURE__ */ createElement11(SortIcon, {
+  const alwaysShow = headerOptions.alwaysReserveSpaceForSortIcon;
+  const sortTool = column.computedSorted || alwaysShow ? /* @__PURE__ */ createElement13(SortIcon, {
     index: column.computedMultiSort ? column.computedSortIndex + 1 : void 0,
-    className: `${InfiniteTableHeaderCellClassName}__sort-icon ${HeaderSortIconCls}`,
+    className: `${InfiniteTableHeaderCellClassName}__sort-icon ${HeaderSortIconCls} ${HeaderSortIconRecipe({
+      align: column.align || "start"
+    })}`,
     direction: column.computedSorted ? column.computedSortedAsc ? 1 : -1 : 0
-  });
+  }) : null;
   const renderParam = {
     domRef: ref,
     column,
     columnSortInfo: sortInfo,
+    columnFilterValue: column.computedFilterValue,
     sortTool
   };
+  const align = column.align || "start";
   const renderChildren = () => {
     if (header instanceof Function) {
-      header = /* @__PURE__ */ createElement11(RenderHookComponent, {
+      header = /* @__PURE__ */ createElement13(RenderHookComponent, {
         render: header,
         renderParam
       });
     }
     header = header != null ? header : column.name;
-    return header;
+    return /* @__PURE__ */ createElement13(Fragment2, null, align === "end" ? sortTool : null, header, align !== "end" ? sortTool : null);
   };
   const domRef = useRef10(null);
   const {
-    computed: { computedRemainingSpace },
-    componentState: { portalDOMRef }
+    computed: { computedRemainingSpace, showColumnFilters },
+    componentState: { portalDOMRef, columnHeaderHeight, filterEditors }
   } = useInfiniteTable();
-  useEffect8(() => {
+  const {
+    componentActions: dataSourceActions,
+    getState: getDataSourceState,
+    componentState: { filterDelay, filterTypes }
+  } = useDataSourceContextValue();
+  useEffect9(() => {
     let clearOnResize = null;
     const node = domRef.current;
     if (onResize && node) {
@@ -4036,7 +4224,7 @@ function InfiniteTableHeaderCell(props) {
   });
   let draggingProxy = null;
   if (dragging) {
-    draggingProxy = /* @__PURE__ */ createElement11("div", {
+    draggingProxy = /* @__PURE__ */ createElement13("div", {
       className: `${InfiniteTableHeaderCellClassName}Proxy ${HeaderCellProxy}`,
       style: {
         position: "absolute",
@@ -4050,9 +4238,73 @@ function InfiniteTableHeaderCell(props) {
     draggingProxy = createPortal(draggingProxy, portalDOMRef.current);
   }
   const ContextProvider = InfiniteTableHeaderCellContext.Provider;
-  return /* @__PURE__ */ createElement11(ContextProvider, {
+  const contentRecipeVariants = {
+    filtered: column.computedFiltered
+  };
+  const setFilterValue = useCallback6((filterValue) => {
+    var _a2;
+    const state = getDataSourceState();
+    let newFilterValue = (_a2 = state.filterValue) != null ? _a2 : [];
+    let found = false;
+    newFilterValue = newFilterValue.map((currentFilterValue) => {
+      if (filterValue.id && currentFilterValue.id === filterValue.id || filterValue.field && currentFilterValue.field === column.field) {
+        found = true;
+        return filterValue;
+      }
+      return currentFilterValue;
+    });
+    if (!found) {
+      newFilterValue.push(filterValue);
+    }
+    newFilterValue = newFilterValue.filter((filterValue2) => {
+      const filterType2 = filterTypes[filterValue2.filterType];
+      if (!filterType2 || filterType2.emptyValues.has(filterValue2.filterValue)) {
+        return false;
+      }
+      return true;
+    });
+    dataSourceActions.filterValue = newFilterValue;
+  }, [column, filterTypes]);
+  const debouncedOnFilterValueChange = useMemo5(() => {
+    const fn = (filterValue) => {
+      let newFilterValueForColumn;
+      if (column.computedFilterValue) {
+        newFilterValueForColumn = __spreadValues({}, column.computedFilterValue);
+      } else {
+        const filterType2 = column.computedFilterType;
+        const filterValueForColumn = {
+          filterType: filterType2,
+          operator: filterTypes[filterType2].defaultOperator,
+          filterValue,
+          valueGetter: column.valueGetter
+        };
+        if (column.field) {
+          filterValueForColumn.field = column.field;
+        } else {
+          filterValueForColumn.id = column.id;
+        }
+        newFilterValueForColumn = filterValueForColumn;
+      }
+      newFilterValueForColumn.filterValue = filterValue;
+      setFilterValue(newFilterValueForColumn);
+    };
+    if (filterDelay > 0) {
+      return debounce(fn, { wait: filterDelay });
+    }
+    return fn;
+  }, [
+    filterDelay,
+    setFilterValue,
+    column.computedFilterValue,
+    column.id,
+    column.field,
+    column.computedFilterType
+  ]);
+  const filterType = column.computedFilterType;
+  const FilterEditor = filterEditors[filterType] || defaultFilterEditors[filterType] || StringFilterEditor;
+  return /* @__PURE__ */ createElement13(ContextProvider, {
     value: renderParam
-  }, /* @__PURE__ */ createElement11(InfiniteTableCell, {
+  }, /* @__PURE__ */ createElement13(InfiniteTableCell, {
     domRef: ref,
     cellType: "header",
     column,
@@ -4062,9 +4314,19 @@ 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__ */ createElement13(InfiniteTableColumnHeaderFilter, {
+      filterEditor: FilterEditor,
+      filterTypes,
+      onChange: debouncedOnFilterValueChange,
+      columnFilterType: filterType,
+      columnLabel: column.field || column.name || column.id,
+      columnFilterValue: column.computedFilterValue,
+      columnHeaderHeight
+    }) : /* @__PURE__ */ createElement13(InfiniteTableColumnHeaderFilterEmpty, null) : null,
     renderChildren
   }), draggingProxy);
 }
@@ -4075,9 +4337,9 @@ function useInfiniteHeaderCell() {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
 import {
-  createElement as createElement14,
+  createElement as createElement16,
   useCallback as useCallback8,
-  useMemo as useMemo5
+  useMemo as useMemo6
 } from "react";
 
 // src/components/utils/getScrollbarWidth.ts
@@ -4201,14 +4463,14 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 import {
-  createElement as createElement13,
+  createElement as createElement15,
   memo as memo6
 } from "react";
-import { useCallback as useCallback7, useEffect as useEffect9, useRef as useRef11 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect10, useRef as useRef11 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
 import {
-  createElement as createElement12
+  createElement as createElement14
 } from "react";
 var TableHeaderGroupClassName = `${rootClassName2}HeaderGroup`;
 function InfiniteTableHeaderGroup(props) {
@@ -4219,35 +4481,35 @@ function InfiniteTableHeaderGroup(props) {
       columnGroup
     });
   }
-  return /* @__PURE__ */ createElement12("div", {
+  return /* @__PURE__ */ createElement14("div", {
     ref: props.domRef,
     "data-group-id": columnGroup.uniqueGroupId,
     className: join(HeaderGroupCls, TableHeaderGroupClassName),
     style: { width, height }
-  }, /* @__PURE__ */ createElement12("div", {
+  }, /* @__PURE__ */ createElement14("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;
-  useEffect9(() => {
+  const { computedVisibleColumnsMap, showColumnFilters } = computed;
+  useEffect10(() => {
     const onScroll = (scrollPosition) => {
       if (domRef.current) {
         domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
@@ -4264,7 +4526,7 @@ function InfiniteTableHeaderFn(props) {
   const domProps = {
     ref: domRef,
     className: join(TableHeaderClassName, `${TableHeaderClassName}--virtualized`, className, headerCls),
-    style: __spreadProps(__spreadValues({}, style), { height: headerHeight })
+    style: __spreadProps(__spreadValues({}, style), { height: columnHeaderHeight })
   };
   const renderCell = useCallback7((params) => {
     const {
@@ -4291,7 +4553,7 @@ function InfiniteTableHeaderFn(props) {
         computedWidth: colGroupItem.computedWidth,
         groupOffset: colGroupItem.groupOffset
       });
-      return /* @__PURE__ */ createElement13(InfiniteTableHeaderGroup, {
+      return /* @__PURE__ */ createElement15(InfiniteTableHeaderGroup, {
         domRef: domRef2,
         columns: columns2,
         width: widthWithColspan,
@@ -4299,15 +4561,23 @@ function InfiniteTableHeaderFn(props) {
         columnGroup: computedColumnGroup
       });
     }
-    return /* @__PURE__ */ createElement13(InfiniteTableHeaderCell, {
+    return /* @__PURE__ */ createElement15(InfiniteTableHeaderCell, {
       domRef: domRef2,
       column,
+      headerOptions,
       width: widthWithColspan,
       height: heightWithRowspan,
       columns: computedVisibleColumnsMap
     });
-  }, [columns, headerHeight, columnAndGroupTreeInfo, columnGroupsMaxDepth]);
-  return /* @__PURE__ */ createElement13("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement13(RawTable, {
+  }, [
+    headerOptions,
+    columns,
+    columnHeaderHeight,
+    columnAndGroupTreeInfo,
+    columnGroupsMaxDepth,
+    showColumnFilters
+  ]);
+  return /* @__PURE__ */ createElement15("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement15(RawTable, {
     renderCell,
     brain: headerBrain,
     cellHoverClassNames: []
@@ -4323,19 +4593,20 @@ function TableHeaderWrapper(props) {
     computedPinnedStartColumns,
     computedPinnedEndColumns,
     computedVisibleColumns,
-    columnSize
+    columnSize,
+    showColumnFilters
   } = tableContextValue.computed;
   const {
     componentState: {
-      headerHeight,
+      columnHeaderHeight,
       columnGroupsDepthsMap,
       columnGroupsMaxDepth,
       computedColumnGroups
     }
   } = tableContextValue;
   const rows = !computedColumnGroups || !computedColumnGroups.size ? 1 : columnGroupsMaxDepth + 2;
-  const height = rows * headerHeight;
-  const columnAndGroupTreeInfo = useMemo5(() => {
+  const height = rows * columnHeaderHeight + (showColumnFilters ? columnHeaderHeight : 0);
+  const columnAndGroupTreeInfo = useMemo6(() => {
     if (!computedColumnGroups || !computedColumnGroups.size) {
       return void 0;
     }
@@ -4376,9 +4647,12 @@ function TableHeaderWrapper(props) {
   ]);
   const rowspan = useCallback8(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).rowspan, [cellspan]);
   const colspan = useCallback8(({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).colspan, [cellspan]);
+  const rowHeight = useCallback8((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,
@@ -4388,21 +4662,21 @@ function TableHeaderWrapper(props) {
     fixedColsEnd: computedPinnedEndColumns.length,
     fixedColsStart: computedPinnedStartColumns.length
   });
-  const header = /* @__PURE__ */ createElement14(InfiniteTableHeader, {
+  const header = /* @__PURE__ */ createElement16(InfiniteTableHeader, {
     columns: computedVisibleColumns,
     brain,
-    headerHeight: height,
+    columnHeaderHeight: height,
     columnGroupsMaxDepth,
     columnAndGroupTreeInfo
   });
-  const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ createElement14("div", {
+  const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ createElement16("div", {
     className: HeaderScrollbarPlaceholderCls,
     style: {
       zIndex: 1e3,
       width: getScrollbarWidth()
     }
   }) : null;
-  return /* @__PURE__ */ createElement14("div", {
+  return /* @__PURE__ */ createElement16("div", {
     className: HeaderWrapperCls,
     style: {
       height
@@ -4412,12 +4686,12 @@ function TableHeaderWrapper(props) {
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
 import {
-  createElement as createElement15,
-  forwardRef as forwardRef3,
+  createElement as createElement17,
+  forwardRef as forwardRef4,
   useCallback as useCallback9,
   useRef as useRef12
 } from "react";
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect11 } from "react";
 
 // src/components/utils/decamelize.ts
 function decamelize(str, options) {
@@ -4426,7 +4700,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());
@@ -4463,8 +4737,8 @@ var enforceStyle = (node, style) => {
     node.style.setProperty(decamelize(propertyName), propertyValue, "important");
   }
 };
-var InfiniteTableLicenseFooter = forwardRef3(function InfiniteTableLicenseFooter2(props, ref) {
-  const { rootClassName: rootClassName8 } = useInternalProps();
+var InfiniteTableLicenseFooter = forwardRef4(function InfiniteTableLicenseFooter2(props, ref) {
+  const { rootClassName: rootClassName9 } = useInternalProps();
   const domRef = useRef12(null);
   const domCallback = useCallback9((node) => {
     domRef.current = node;
@@ -4477,7 +4751,7 @@ var InfiniteTableLicenseFooter = forwardRef3(function InfiniteTableLicenseFooter
       ref.current = node;
     }
   }, []);
-  useEffect10(() => {
+  useEffect11(() => {
     const forceStyle = () => {
       requestAnimationFrame(() => {
         var _a;
@@ -4491,12 +4765,12 @@ var InfiniteTableLicenseFooter = forwardRef3(function InfiniteTableLicenseFooter
       clearInterval(intervalId);
     };
   }, []);
-  return /* @__PURE__ */ createElement15("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ createElement17("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__ */ createElement15("a", {
+  }), "Powered by", " ", /* @__PURE__ */ createElement17("a", {
     href: "https://infinite-table.com",
     rel: "noopener noreferrer",
     role: "link",
@@ -4507,13 +4781,13 @@ var InfiniteTableLicenseFooter = forwardRef3(function InfiniteTableLicenseFooter
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
 import {
   createContext as createContext5,
-  createElement as createElement16,
+  createElement as createElement18,
   memo as memo7
 } from "react";
 import { useContext as useContext6 } from "react";
-var { rootClassName: rootClassName6 } = internalProps;
+var { rootClassName: rootClassName7 } = internalProps;
 var InfiniteTableColumnCellContext = createContext5(null);
-var InfiniteTableColumnCellClassName = `${rootClassName6}ColumnCell`;
+var InfiniteTableColumnCellClassName = `${rootClassName7}ColumnCell`;
 function isColumnWithField(c) {
   return typeof c.field === "string";
 }
@@ -4537,7 +4811,7 @@ function InfiniteTableColumnCellFn(props) {
     showZebraRows
   } = props;
   if (!column) {
-    return /* @__PURE__ */ createElement16("div", {
+    return /* @__PURE__ */ createElement18("div", {
       ref: domRef
     }, "no column");
   }
@@ -4546,33 +4820,44 @@ 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,
     isGroupRow: rowInfo.isGroupRow,
-    data: rowInfo.data
+    data: rowInfo.data,
+    value,
+    field: column.field
   } : {
     rowInfo,
     isGroupRow: rowInfo.isGroupRow,
-    data: rowInfo.data
+    data: rowInfo.data,
+    value,
+    field: column.field
   };
   const stylingRenderParam = __spreadValues({
-    value,
     column
   }, rest);
   const renderValue = value;
   const renderParam = __spreadProps(__spreadValues({
-    value,
     column,
     domRef,
     groupRowInfo
@@ -4595,7 +4880,7 @@ function InfiniteTableColumnCellFn(props) {
     }
     const renderFn = column.render || column.renderValue;
     if (renderFn) {
-      return /* @__PURE__ */ createElement16(RenderHookComponent, {
+      return /* @__PURE__ */ createElement18(RenderHookComponent, {
         render: renderFn,
         renderParam
       });
@@ -4631,9 +4916,9 @@ function InfiniteTableColumnCellFn(props) {
     renderChildren
   };
   const ContextProvider = InfiniteTableColumnCellContext.Provider;
-  return /* @__PURE__ */ createElement16(ContextProvider, {
+  return /* @__PURE__ */ createElement18(ContextProvider, {
     value: renderParam
-  }, /* @__PURE__ */ createElement16(InfiniteTableCell, __spreadValues({}, cellProps)));
+  }, /* @__PURE__ */ createElement18(InfiniteTableCell, __spreadValues({}, cellProps)));
 }
 var InfiniteTableColumnCell = memo7(InfiniteTableColumnCellFn);
 function useInfiniteColumnCell() {
@@ -4649,7 +4934,7 @@ var RowHoverCls = "_7pupv01";
 
 // src/components/InfiniteTable/components/LoadMask.tsx
 import {
-  createElement as createElement17,
+  createElement as createElement19,
   memo as memo8
 } from "react";
 
@@ -4659,15 +4944,15 @@ 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__ */ createElement17("div", {
+  return /* @__PURE__ */ createElement19("div", {
     className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls}`
-  }, /* @__PURE__ */ createElement17("div", {
+  }, /* @__PURE__ */ createElement19("div", {
     className: `${LoadMaskOverlayCls} ${baseCls}-Overlay`
-  }), /* @__PURE__ */ createElement17("div", {
+  }), /* @__PURE__ */ createElement19("div", {
     className: `${LoadMaskTextCls} ${baseCls}-Text`
   }, children));
 }
@@ -4675,9 +4960,9 @@ var LoadMask = memo8(LoadMaskFn);
 
 // src/components/InfiniteTable/hooks/useAutoSizeColumns.ts
 import {
-  useEffect as useEffect11,
+  useEffect as useEffect12,
   useRef as useRef13,
-  useState as useState6
+  useState as useState7
 } from "react";
 var OFFSET = 10;
 function getColumnContentMaxWidths(domRef, options) {
@@ -4700,6 +4985,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);
@@ -4737,11 +5023,11 @@ function useAutoSizeColumns() {
     componentActions,
     componentState: { domRef, ready, autoSizeColumnsKey, brain }
   } = useComponentState();
-  const [refreshId, setRefreshId] = useState6(0);
+  const [refreshId, setRefreshId] = useState7(0);
   const theKey = typeof autoSizeColumnsKey === "object" ? autoSizeColumnsKey.key : autoSizeColumnsKey;
   const getTheKey = useLatest(theKey);
   const lastExecutedIdentifierRef = useRef13(null);
-  useEffect11(() => {
+  useEffect12(() => {
     const key = getTheKey();
     if (key == null) {
       return;
@@ -4754,7 +5040,7 @@ function useAutoSizeColumns() {
     };
     return brain.onRenderRangeChange(onChange);
   }, [brain]);
-  useEffect11(() => {
+  useEffect12(() => {
     var _a;
     if (theKey == null) {
       return;
@@ -4799,13 +5085,13 @@ function useAutoSizeColumns() {
 }
 
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
-import { useCallback as useCallback11, useEffect as useEffect12, useRef as useRef14 } from "react";
-import React22 from "react";
+import { useCallback as useCallback11, useEffect as useEffect13, useRef as useRef14 } from "react";
+import React25 from "react";
 
 // src/components/hooks/useRerender.ts
-import { useCallback as useCallback10, useState as useState7 } from "react";
+import { useCallback as useCallback10, useState as useState8 } from "react";
 var useRerender = () => {
-  const [state, setState] = useState7(0);
+  const [state, setState] = useState8(0);
   return [
     state,
     useCallback10(() => {
@@ -4883,12 +5169,12 @@ function useCellRendering(param) {
     rowspan
   });
   const scrollTopMaxRef = useRef14(0);
-  useEffect12(() => {
+  useEffect13(() => {
     return brain.onRenderCountChange(() => {
       scrollTopMaxRef.current = brain.scrollTopMax;
     });
   }, [brain]);
-  useEffect12(() => {
+  useEffect13(() => {
     return brain.onScrollStop((scrollPosition) => {
       const { scrollTop } = scrollPosition;
       if (scrollTop === 0) {
@@ -4905,7 +5191,7 @@ function useCellRendering(param) {
       }
     });
   }, [brain, onScrollToTop, onScrollToBottom]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!bodySize.height) {
       return;
     }
@@ -4926,7 +5212,7 @@ function useCellRendering(param) {
     }
   }, [!!bodySize.height]);
   const [, rerender] = useRerender();
-  useEffect12(() => {
+  useEffect13(() => {
     rerender();
   }, [dataSourceState]);
   const renderCell = useCallback11((params) => {
@@ -4964,7 +5250,7 @@ function useCellRendering(param) {
       rowStyle,
       rowClassName
     };
-    return /* @__PURE__ */ React22.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
+    return /* @__PURE__ */ React25.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
   }, [
     rowHeight,
     getData,
@@ -4982,13 +5268,13 @@ function useCellRendering(param) {
 }
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-import { useCallback as useCallback14, useEffect as useEffect22, useState as useState11 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect23, useState as useState12 } from "react";
 
 // src/components/InfiniteTable/hooks/useColumnGroups.ts
-import { useEffect as useEffect14 } from "react";
+import { useEffect as useEffect15 } from "react";
 
 // src/components/hooks/useInterceptedMap.ts
-import { useEffect as useEffect13 } from "react";
+import { useEffect as useEffect14 } from "react";
 function interceptMap(map2, fns) {
   const { set, delete: deleteKey, clear } = map2;
   if (fns.set) {
@@ -5076,7 +5362,7 @@ function useColumnGroups() {
     componentActions,
     getComponentState
   } = useComponentState();
-  useEffect14(() => {
+  useEffect15(() => {
     const recompute = () => {
       componentActions.columnGroupsDepthsMap = computeColumnGroupsDepths(computedColumnGroups);
     };
@@ -5087,7 +5373,7 @@ function useColumnGroups() {
       set: update
     });
   }, [computedColumnGroups]);
-  useEffect14(() => {
+  useEffect15(() => {
     return interceptMap(collapsedColumnGroups, {
       set: (key, visibleCol) => {
         const colIds = key.slice(1);
@@ -5122,10 +5408,10 @@ function useColumnGroups() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnRowspan.ts
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo7 } from "react";
 function useColumnRowspan(computedVisibleColumns) {
   const { getState: getDataSourceState } = useDataSourceContextValue();
-  const rowspan = useMemo6(() => {
+  const rowspan = useMemo7(() => {
     const colsWithRowspan = computedVisibleColumns.filter((col) => typeof col.rowspan === "function");
     return colsWithRowspan.length ? ({ rowIndex, colIndex }) => {
       const dataArray = getDataSourceState().dataArray;
@@ -5165,11 +5451,11 @@ function useColumnSizeFn(columns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-import { useEffect as useEffect19, useMemo as useMemo8 } from "react";
+import { useEffect as useEffect20, useMemo as useMemo9 } from "react";
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
 import {
-  createElement as createElement20
+  createElement as createElement22
 } from "react";
 
 // src/utils/stripVar.ts
@@ -5187,10 +5473,10 @@ var showLoadingIcon = (rowInfo) => {
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
 import {
-  createElement as createElement18,
-  useEffect as useEffect15
+  createElement as createElement20,
+  useEffect as useEffect16
 } from "react";
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.css.ts
 var import_createRuntimeFn5 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
@@ -5201,7 +5487,7 @@ var ExpanderIconClsVariants = (0, import_createRuntimeFn5.createRuntimeFn)({ def
 function ExpanderIcon(props) {
   var _a;
   const { size = 24 } = props;
-  const [expanded, setExpanded] = useState8((_a = props.expanded) != null ? _a : props.defaultExpanded);
+  const [expanded, setExpanded] = useState9((_a = props.expanded) != null ? _a : props.defaultExpanded);
   const onClick = () => {
     var _a2;
     (_a2 = props.onChange) == null ? void 0 : _a2.call(props, !expanded);
@@ -5209,12 +5495,12 @@ function ExpanderIcon(props) {
       setExpanded(!expanded);
     }
   };
-  useEffect15(() => {
+  useEffect16(() => {
     if (isControlled("expanded", props)) {
       setExpanded(props.expanded);
     }
   }, [props.expanded]);
-  return /* @__PURE__ */ createElement18("svg", {
+  return /* @__PURE__ */ createElement20("svg", {
     "data-name": "expander-icon",
     xmlns: "http://www.w3.org/2000/svg",
     height: `${size}px`,
@@ -5225,14 +5511,14 @@ function ExpanderIcon(props) {
     className: join(props.className, ExpanderIconCls, ExpanderIconClsVariants({
       expanded
     }), "InfiniteIcon", "InfiniteIcon-expander", `InfiniteIcon-expander--${expanded ? "expanded" : "collapsed"}`)
-  }, /* @__PURE__ */ createElement18("path", {
+  }, /* @__PURE__ */ createElement20("path", {
     d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
   }));
 }
 
 // src/components/InfiniteTable/components/icons/LoadingIcon.tsx
 import {
-  createElement as createElement19
+  createElement as createElement21
 } from "react";
 
 // src/components/InfiniteTable/components/icons/LoadingIcon.css.ts
@@ -5240,7 +5526,7 @@ var LoadingIconCls = "_16lm1iw8 _16lm1iwf _16lm1iwd";
 
 // src/components/InfiniteTable/components/icons/LoadingIcon.tsx
 var LoadingIcon = (props) => {
-  return /* @__PURE__ */ createElement19("svg", {
+  return /* @__PURE__ */ createElement21("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     style: {
       margin: "auto",
@@ -5252,14 +5538,14 @@ var LoadingIcon = (props) => {
     viewBox: "0 0 100 100",
     preserveAspectRatio: "xMidYMid",
     className: join(props.className, LoadingIconCls, "InfiniteIcon", "InfiniteIcon-loading")
-  }, /* @__PURE__ */ createElement19("circle", {
+  }, /* @__PURE__ */ createElement21("circle", {
     cx: "50",
     cy: "50",
     fill: "none",
     strokeWidth: "10",
     r: "35",
     strokeDasharray: "164.93361431346415 56.97787143782138"
-  }, /* @__PURE__ */ createElement19("animateTransform", {
+  }, /* @__PURE__ */ createElement21("animateTransform", {
     attributeName: "transform",
     type: "rotate",
     repeatCount: "indefinite",
@@ -5279,7 +5565,7 @@ function getGroupColumnRender({
     var _a, _b, _c;
     let { value, rowInfo, column, groupBy, pivotBy } = renderOptions;
     if (column.renderValue) {
-      value = /* @__PURE__ */ createElement20(RenderHookComponent, {
+      value = /* @__PURE__ */ createElement22(RenderHookComponent, {
         render: column.renderValue,
         renderParam: renderOptions
       });
@@ -5309,22 +5595,22 @@ function getGroupColumnRender({
     const showExpanderIcon = pivotBy ? (((_b = groupRowInfo.groupKeys) == null ? void 0 : _b.length) || 0) < (groupBy == null ? void 0 : groupBy.length) : (((_c = groupRowInfo.groupKeys) == null ? void 0 : _c.length) || 0) <= (groupBy == null ? void 0 : groupBy.length);
     const isLoading = showLoadingIcon(groupRowInfo);
     if (isLoading) {
-      icon = /* @__PURE__ */ createElement20(LoadingIcon, null);
+      icon = /* @__PURE__ */ createElement22(LoadingIcon, null);
     } else if (showExpanderIcon) {
-      const defaultIcon = /* @__PURE__ */ createElement20(ExpanderIcon, {
+      const defaultIcon = /* @__PURE__ */ createElement22(ExpanderIcon, {
         expanded: !collapsed,
         onChange: () => {
           toggleGroupRow(groupKeys);
         }
       });
-      icon = column.renderGroupIcon ? /* @__PURE__ */ createElement20(RenderHookComponent, {
+      icon = column.renderGroupIcon ? /* @__PURE__ */ createElement22(RenderHookComponent, {
         render: column.renderGroupIcon,
         renderParam: Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)
       }) : defaultIcon;
     }
-    return /* @__PURE__ */ createElement20("div", {
+    return /* @__PURE__ */ createElement22("div", {
       className: join(display.flex, alignItems.center)
-    }, icon, /* @__PURE__ */ createElement20("div", {
+    }, icon, /* @__PURE__ */ createElement22("div", {
       className: cssEllipsisClassName
     }, value != null ? value : null));
   };
@@ -5369,9 +5655,9 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
       const showExpanderIcon = rowInfo.isGroupRow ? pivotBy ? (((_a = rowInfo.groupKeys) == null ? void 0 : _a.length) || 0) < (groupBy == null ? void 0 : groupBy.length) : (((_b = rowInfo.groupKeys) == null ? void 0 : _b.length) || 0) <= (groupBy == null ? void 0 : groupBy.length) : false;
       const isLoading = showLoadingIcon(rowInfo);
       if (isLoading) {
-        icon = /* @__PURE__ */ createElement20(LoadingIcon, null);
+        icon = /* @__PURE__ */ createElement22(LoadingIcon, null);
       } else if (showExpanderIcon) {
-        const defaultIcon = /* @__PURE__ */ createElement20(ExpanderIcon, {
+        const defaultIcon = /* @__PURE__ */ createElement22(ExpanderIcon, {
           expanded: !collapsed,
           onChange: () => {
             if (!rowInfo.isGroupRow) {
@@ -5386,9 +5672,9 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
           icon = column.renderGroupIcon(renderParam);
         }
       }
-      return /* @__PURE__ */ createElement20("div", {
+      return /* @__PURE__ */ createElement22("div", {
         className: join(display.flex, alignItems.center, GroupRowExpanderCls)
-      }, icon, /* @__PURE__ */ createElement20("div", {
+      }, icon, /* @__PURE__ */ createElement22("div", {
         className: cssEllipsisClassName
       }, value != null ? value : null));
     }
@@ -5404,11 +5690,11 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
 }
 
 // src/components/InfiniteTable/hooks/useEffectWithRaf.ts
-import { useEffect as useEffect16, useRef as useRef15 } from "react";
+import { useEffect as useEffect17, useRef as useRef15 } from "react";
 function useEffectWithRaf(fn, deps) {
   const rafId = useRef15(0);
   const removeFnRaf = useRef15();
-  useEffect16(() => {
+  useEffect17(() => {
     rafId.current = requestAnimationFrame(() => {
       removeFnRaf.current = fn();
     });
@@ -5493,21 +5779,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]) {
@@ -5836,8 +6119,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,
@@ -5848,7 +6132,7 @@ function enhancedFlatten(param) {
               parents: Array.from(parents),
               indexInParentGroups: [...indexInParentGroups, index],
               indexInGroup: index,
-              indexInAll: startIndex + index,
+              indexInAll,
               groupBy: groupByStrings,
               groupNesting,
               groupCount: enhancedGroupData.groupCount
@@ -5881,8 +6165,8 @@ function enhancedFlatten(param) {
 
 // src/components/DataSource/index.tsx
 import {
-  Fragment as Fragment2,
-  createElement as createElement21
+  Fragment as Fragment3,
+  createElement as createElement23
 } from "react";
 
 // src/utils/multisort/sortTypes.ts
@@ -5894,11 +6178,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) => {
@@ -5911,7 +6195,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;
   }
@@ -5926,8 +6211,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);
   };
 };
@@ -5950,20 +6235,130 @@ var getMultisortFunction = (sortInfo, get) => {
       if (!fn) {
         continue;
       }
-      result = fn(first, second);
-      if (result !== 0) {
-        return result;
+      result = fn(first, second);
+      if (result !== 0) {
+        return result;
+      }
+    }
+    return result;
+  };
+};
+
+// src/components/DataSource/GroupRowsState.ts
+var GroupRowsState = class {
+  constructor(state) {
+    this.update(state instanceof GroupRowsState ? state.getState() : state);
+  }
+  getState() {
+    var _a, _b, _c, _d;
+    return {
+      expandedRows: this.expandedAll ? true : (_b = (_a = this.expandedMap) == null ? void 0 : _a.topDownKeys()) != null ? _b : [],
+      collapsedRows: this.collapsedAll ? true : (_d = (_c = this.collapsedMap) == null ? void 0 : _c.topDownKeys()) != null ? _d : []
+    };
+  }
+  destroy() {
+    var _a, _b;
+    (_a = this.expandedMap) == null ? void 0 : _a.clear();
+    (_b = this.collapsedMap) == null ? void 0 : _b.clear();
+    delete this.expandedMap;
+    delete this.collapsedMap;
+  }
+  update(state) {
+    var _a, _b, _c, _d;
+    this.initialState = state;
+    const { collapsedRows, expandedRows } = this.initialState;
+    this.collapsedAll = collapsedRows === true;
+    this.expandedAll = expandedRows === true;
+    if (this.collapsedAll && this.expandedAll) {
+      throw `Cannot have both collapsedRows and expandedRows be true!`;
+    }
+    if (collapsedRows !== true) {
+      (_a = this.collapsedMap) == null ? void 0 : _a.clear();
+      this.collapsedMap = (_b = this.collapsedMap) != null ? _b : new DeepMap(collapsedRows.map((keys) => [keys, true]));
+    }
+    if (expandedRows !== true) {
+      (_c = this.expandedMap) == null ? void 0 : _c.clear();
+      this.expandedMap = (_d = this.expandedMap) != null ? _d : new DeepMap(expandedRows.map((keys) => [keys, true]));
+    }
+  }
+  areAllCollapsed() {
+    return this.collapsedAll && (this.expandedMap ? this.expandedMap.size === 0 : true);
+  }
+  areAllExpanded() {
+    return this.expandedAll && (this.collapsedMap ? this.collapsedMap.size === 0 : true);
+  }
+  collapseAll() {
+    this.update({
+      collapsedRows: true,
+      expandedRows: []
+    });
+  }
+  expandAll() {
+    this.update({
+      expandedRows: true,
+      collapsedRows: []
+    });
+  }
+  isGroupRowExpanded(keys) {
+    var _a, _b;
+    if (this.expandedAll === true) {
+      if (this.collapsedAll === true) {
+        throw 'Cannot have both expandedRows and collapsedRows be "true"';
+      }
+      return !((_a = this.collapsedMap) == null ? void 0 : _a.has(keys));
+    }
+    return (_b = this.expandedMap) == null ? void 0 : _b.has(keys);
+  }
+  isGroupRowCollapsed(keys) {
+    return !this.isGroupRowExpanded(keys);
+  }
+  setGroupRowExpanded(keys, shouldExpand) {
+    var _a;
+    if (shouldExpand === this.isGroupRowExpanded(keys)) {
+      return;
+    }
+    if (shouldExpand) {
+      if (this.collapsedAll === true) {
+        if (!this.expandedMap) {
+          throw `No expandedMap found when trying to expand group row ${keys.join(",")}`;
+        }
+        this.expandedMap.set(keys, true);
+      } else if (this.expandedAll === true) {
+        if (!this.collapsedMap) {
+          throw `No collapsedMap found when trying to expand group row ${keys.join(",")}`;
+        }
+        this.collapsedMap.delete(keys);
+      }
+    } else {
+      if (this.expandedAll === true) {
+        if (!this.collapsedMap) {
+          throw `No collapsedMap found when trying to collapse group row ${keys.join(",")}`;
+        }
+        this.collapsedMap.set(keys, true);
+      } else if (this.collapsedAll === true) {
+        if (!this.expandedMap) {
+          throw `No expandedMap found when trying to collapse group row ${keys.join(",")}`;
+        }
+        (_a = this.expandedMap) == null ? void 0 : _a.delete(keys);
       }
     }
-    return result;
-  };
+  }
+  collapseGroupRow(keys) {
+    this.setGroupRowExpanded(keys, false);
+  }
+  expandGroupRow(keys) {
+    this.setGroupRowExpanded(keys, true);
+  }
+  toggleGroupRow(keys) {
+    this.setGroupRowExpanded(keys, !this.isGroupRowExpanded(keys));
+  }
 };
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-import { useEffect as useEffect18, useMemo as useMemo7, useRef as useRef17, useState as useState9 } from "react";
+import { useEffect as useEffect19, useMemo as useMemo8, useRef as useRef17, useState as useState10 } from "react";
 
 // src/components/hooks/useEffectWithChanges.ts
-import { useEffect as useEffect17, useRef as useRef16 } from "react";
+import { useEffect as useEffect18, useRef as useRef16 } from "react";
 function useEffectWithChanges(fn, deps) {
   const prevRef = useRef16({});
   const oldValuesRef = useRef16({});
@@ -5981,7 +6376,7 @@ function useEffectWithChanges(fn, deps) {
     }
   }
   prevRef.current = deps;
-  useEffect17(() => {
+  useEffect18(() => {
     const changes2 = changesRef.current;
     const result = fn(changes2, oldValues);
     changesRef.current = {};
@@ -6034,6 +6429,7 @@ function buildDataSourceDataParams(componentState, overrides) {
     sortInfo,
     groupBy: componentState.groupBy,
     pivotBy: componentState.pivotBy,
+    filterValue: componentState.filterValue,
     aggregationReducers: componentState.aggregationReducers
   };
   if (dataSourceParams.groupBy) {
@@ -6053,6 +6449,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) {
@@ -6073,6 +6476,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;
@@ -6098,7 +6508,8 @@ function loadData(data, componentState, actions, overrides) {
         childrenLoading: true,
         childrenAvailable: false,
         cache: CACHE_DEFAULT,
-        totalCount: 0
+        totalCount: 0,
+        totalCountUnfiltered: 0
       });
     }
     actions.originalLazyGroupDataChangeDetect = getChangeDetect();
@@ -6122,9 +6533,12 @@ 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;
+          var _a, _b, _c, _d;
           const theKey = [LAZY_ROOT_KEY_FOR_GROUPS, ...keys];
           const dataArray2 = remoteData2.data;
           const newGroupRowInfo = {
@@ -6132,6 +6546,7 @@ function loadData(data, componentState, actions, overrides) {
             childrenLoading: false,
             childrenAvailable: true,
             totalCount: (_a = remoteData2.totalCount) != null ? _a : dataArray2.length,
+            totalCountUnfiltered: (_b = remoteData2.totalCount) != null ? _b : dataArray2.length,
             children: dataArray2,
             error: remoteData2.error
           };
@@ -6146,8 +6561,8 @@ function loadData(data, componentState, actions, overrides) {
               currentGroupRowInfo.chidren = [];
             }
             currentGroupRowInfo.children.length = currentGroupRowInfo.totalCount;
-            const start = (_b = dataParams.lazyLoadStartIndex) != null ? _b : 0;
-            const end = Math.min((_c = remoteData2.totalCount) != null ? _c : dataArray2.length, start + dataParams.lazyLoadBatchSize);
+            const start = (_c = dataParams.lazyLoadStartIndex) != null ? _c : 0;
+            const end = Math.min((_d = remoteData2.totalCount) != null ? _d : dataArray2.length, start + dataParams.lazyLoadBatchSize);
             for (let i = start; i < end; i++) {
               const it = newGroupRowInfo.children[i - start];
               if (!it) {
@@ -6224,16 +6639,17 @@ function useLoadData() {
     sortInfo,
     groupBy,
     pivotBy,
+    filterValue,
     livePagination,
     livePaginationCursor,
     cursorId: stateCursorId
   } = componentState;
-  const [scrollbars, setScrollbars] = useState9({
+  const [scrollbars, setScrollbars] = useState10({
     vertical: false,
     horizontal: false
   });
   const scrollbarsRef = useRef17(scrollbars);
-  useEffect18(() => {
+  useEffect19(() => {
     notifyScrollbarsChange.onChange((scrollbars2) => {
       if (!scrollbars2) {
         return;
@@ -6243,7 +6659,7 @@ function useLoadData() {
     });
     return () => notifyScrollbarsChange.destroy();
   }, [notifyScrollbarsChange]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!livePagination) {
       return;
     }
@@ -6257,7 +6673,7 @@ function useLoadData() {
     });
     return () => cancelAnimationFrame(frameId);
   }, [livePaginationCursor]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!livePagination || livePaginationCursor !== void 0) {
       return;
     }
@@ -6271,7 +6687,7 @@ function useLoadData() {
     });
     return () => cancelAnimationFrame(frameId);
   }, [dataArray.length, livePaginationCursor]);
-  useEffect18(() => {
+  useEffect19(() => {
     const state = getComponentState();
     const { livePaginationCursor: livePaginationCursor2, livePagination: livePagination2, dataArray: dataArray2 } = state;
     if (!scrollbars.vertical && livePagination2) {
@@ -6286,6 +6702,7 @@ function useLoadData() {
     sortInfo,
     groupBy,
     pivotBy,
+    filterValue,
     cursorId: livePagination ? stateCursorId : null
   };
   const initialRef = useRef17(true);
@@ -6320,7 +6737,7 @@ function useLazyLoadRange() {
     componentActions: actions,
     componentState
   } = useComponentState();
-  useEffect18(() => {
+  useEffect19(() => {
     actions.lazyLoadCacheOfLoadedBatches = new DeepMap();
   }, [componentState.data, componentState.dataParams]);
   const {
@@ -6348,8 +6765,8 @@ function useLazyLoadRange() {
       componentActions: actions
     }, cache);
   };
-  const debouncedLoadRange = useMemo7(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
-  useEffect18(() => {
+  const debouncedLoadRange = useMemo8(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
+  useEffect19(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       return notifyRenderRangeChange.onChange((renderRange) => {
         latestRenderRangeRef.current = renderRange;
@@ -6358,7 +6775,7 @@ function useLazyLoadRange() {
     }
     return;
   }, [lazyLoadBatchSize]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
     }
@@ -6391,7 +6808,7 @@ function lazyLoadRange(options, cache) {
       theGroupKeys.pop();
     }
     const cacheKeys = theGroupKeys.length ? theGroupKeys : rootGroupKeys;
-    const indexInGroup = rowInfo.isGroupRow ? rowInfo.indexInGroup : rowInfo.indexInAll;
+    const indexInGroup = rowInfo.dataSourceHasGrouping ? rowInfo.indexInGroup : rowInfo.indexInAll;
     if (rowInfo.isGroupRow && !rowInfo.collapsed && !rowInfo.childrenAvailable) {
       const currentFnCall = {
         lazyLoadStartIndex: 0,
@@ -6414,7 +6831,7 @@ function lazyLoadRange(options, cache) {
     if (!rowLoaded) {
       let cachedFnCalls = perGroupFnCalls.get(cacheKeys);
       const batchStartIndexInGroup = Math.floor(indexInGroup / lazyLoadBatchSize) * lazyLoadBatchSize;
-      const offset = (rowInfo.isGroupRow ? rowInfo.indexInGroup : rowInfo.indexInAll) - batchStartIndexInGroup;
+      const offset = indexInGroup - batchStartIndexInGroup;
       const absoluteIndexOfBatchStart = dataArray[rowInfo.indexInAll - offset].indexInAll;
       const batchStartRowLoaded = isRowLoaded(absoluteIndexOfBatchStart);
       const batchStartRowId = dataArray[absoluteIndexOfBatchStart].id;
@@ -6512,116 +6929,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) => {
@@ -6667,9 +6974,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,
@@ -6692,6 +7002,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,
@@ -6717,10 +7036,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
   };
@@ -6785,6 +7119,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
@@ -6866,7 +7212,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;
         }
@@ -6915,7 +7261,7 @@ function getPivotColumnsAndColumnGroups({
           sortable: false,
           columnGroup: parentColumnGroupId,
           header,
-          valueGetter: ({ rowInfo }) => {
+          valueFormatter: ({ rowInfo }) => {
             var _a, _b;
             if (!rowInfo.isGroupRow) {
               return null;
@@ -6970,7 +7316,7 @@ function getPivotColumnsAndColumnGroups({
             pivotIndex: keys.length - 1,
             pivotBy,
             sortable: false,
-            valueGetter: ({ rowInfo }) => {
+            valueFormatter: ({ rowInfo }) => {
               var _a, _b;
               if (!rowInfo.isGroupRow) {
                 return null;
@@ -7018,9 +7364,68 @@ function toRowInfo(data, id, index) {
     selfLoaded: true
   };
 }
+function filterDataSource(params) {
+  const {
+    filterTypes,
+    filterValue: filterValueArray,
+    operatorsByFilterType,
+    filterFunction,
+    toPrimaryKey
+  } = params;
+  let { dataArray } = params;
+  if (filterFunction) {
+    dataArray = dataArray.filter((data, index, arr) => filterFunction({
+      data,
+      index,
+      dataArray: arr,
+      primaryKey: toPrimaryKey(data, index)
+    }));
+  }
+  if (filterValueArray && filterValueArray.length) {
+    return dataArray.filter((data, index, arr) => {
+      var _a;
+      const param = {
+        data,
+        index,
+        dataArray: arr,
+        primaryKey: toPrimaryKey(data, index)
+      };
+      for (let i = 0, len = filterValueArray.length; i < len; i++) {
+        const currentFilterValue = filterValueArray[i];
+        const {
+          disabled,
+          filterValue,
+          field,
+          filterType: filterTypeKey,
+          valueGetter,
+          operator
+        } = currentFilterValue;
+        const filterType = filterTypes[filterTypeKey];
+        if (disabled || !filterType) {
+          continue;
+        }
+        const currentOperator = (_a = operatorsByFilterType[filterTypeKey]) == null ? void 0 : _a[operator];
+        if (!currentOperator) {
+          continue;
+        }
+        const getter = valueGetter || (({ data: data2 }) => field ? data2[field] : data2);
+        const operatorFnParam = __spreadValues({}, param);
+        operatorFnParam.filterValue = filterValue;
+        operatorFnParam.currentValue = getter(param);
+        operatorFnParam.emptyValues = filterType.emptyValues;
+        if (!currentOperator.fn(operatorFnParam)) {
+          return false;
+        }
+      }
+      return true;
+    });
+  }
+  return dataArray;
+}
 function concludeReducer(params) {
   var _a, _b;
   const { state, previousState } = params;
+  const primaryKeyDescriptor = state.primaryKey;
   const sortInfo = state.sortInfo;
   let shouldSort = !!(sortInfo == null ? void 0 : sortInfo.length) && !state.controlledSort;
   if (state.lazyLoad || state.livePagination) {
@@ -7038,15 +7443,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",
@@ -7055,23 +7469,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({
@@ -7114,7 +7548,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;
@@ -7142,7 +7576,7 @@ function DataSourceWithContext(props) {
   if (typeof children === "function") {
     children = children(computedValues);
   }
-  return /* @__PURE__ */ createElement21(Fragment2, null, children);
+  return /* @__PURE__ */ createElement23(Fragment3, null, children);
 }
 var DataSourceRoot = getComponentStateRoot({
   initSetupState,
@@ -7165,14 +7599,14 @@ function DataSourceCmp({ children }) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
-  return /* @__PURE__ */ createElement21(DataSourceContext.Provider, {
+  return /* @__PURE__ */ createElement23(DataSourceContext.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ createElement21(DataSourceWithContext, {
+  }, /* @__PURE__ */ createElement23(DataSourceWithContext, {
     children
   }));
 }
 function DataSource(props) {
-  return /* @__PURE__ */ createElement21(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ createElement21(DataSourceCmp, {
+  return /* @__PURE__ */ createElement23(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ createElement23(DataSourceCmp, {
     children: props.children
   }));
 }
@@ -7212,7 +7646,7 @@ function useToggleGroupRow() {
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
 function useGroupByMap(groupBy) {
-  const groupByMap = useMemo8(() => {
+  const groupByMap = useMemo9(() => {
     return groupBy.reduce((acc, groupBy2, index) => {
       acc.set(groupBy2.field, {
         groupBy: groupBy2,
@@ -7236,13 +7670,13 @@ function useColumnsWhen() {
     }
   } = useComponentState();
   const groupByMap = useGroupByMap(groupBy);
-  useEffect19(() => {
+  useEffect20(() => {
     dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
   }, [groupRenderStrategy]);
-  useEffect19(() => {
+  useEffect20(() => {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (pivotGrandTotalColumnPosition != void 0) {
       dataSourceActions.pivotGrandTotalColumnPosition = pivotGrandTotalColumnPosition;
     }
@@ -7272,7 +7706,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;
           },
@@ -7316,7 +7750,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
     });
     return computedColumns.size === 0 ? void 0 : computedColumns;
   }
-  useEffect19(() => {
+  useEffect20(() => {
     const update = () => {
       componentActions.columnsWhenInlineGroupRenderStrategy = computeColumnsWhenInlineGroupRenderStrategy(columns, groupByMap, groupRenderStrategy, toggleGroupRow);
     };
@@ -7345,7 +7779,7 @@ function useColumnsWhenGrouping() {
     }
   } = useComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  useEffect19(() => {
+  useEffect20(() => {
     const update = () => {
       const columnsWhenGrouping = getColumnsWhenGrouping({
         columns,
@@ -7481,7 +7915,7 @@ function useHideColumns(groupByMap) {
     hideEmptyGroupColumns ? groupRowsState : null,
     hideEmptyGroupColumns
   ]);
-  useEffect19(() => {
+  useEffect20(() => {
     const isGrouped = groupBy.length > 0;
     const currentState = getComponentState();
     const { controlledColumnVisibility, columnVisibility } = currentState;
@@ -7596,7 +8030,7 @@ function getColumnsWhenGrouping(params) {
 }
 
 // src/components/InfiniteTable/hooks/useComputedVisibleColumns.ts
-import { useMemo as useMemo9 } from "react";
+import { useMemo as useMemo10 } from "react";
 
 // src/components/flexbox/index.ts
 var computeFlex = (params) => {
@@ -7753,7 +8187,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) {
@@ -7789,6 +8225,7 @@ var getComputedVisibleColumns = ({
   columnHeaderCssEllipsis,
   pinnedStartMaxWidth,
   pinnedEndMaxWidth,
+  filterValue,
   sortable,
   sortInfo,
   setSortInfo,
@@ -7803,9 +8240,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;
@@ -7853,7 +8300,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;
@@ -7896,7 +8343,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);
@@ -7907,47 +8354,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;
@@ -7956,23 +8362,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,
@@ -7981,14 +8400,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);
@@ -8029,10 +8491,10 @@ var getComputedVisibleColumns = ({
 };
 
 // src/components/InfiniteTable/hooks/useRerenderOnKeyChange.ts
-import { useEffect as useEffect20 } from "react";
+import { useEffect as useEffect21 } from "react";
 var useRerenderOnKeyChange = (map2) => {
   const [renderId, rerender] = useRerender();
-  useEffect20(() => {
+  useEffect21(() => {
     const update = rafFn(rerender);
     return interceptMap(map2, {
       set: update,
@@ -8057,6 +8519,7 @@ var useComputedVisibleColumns = ({
   sortInfo,
   multiSort,
   setSortInfo,
+  filterValue,
   columnOrder,
   columnPinning,
   columnTypes,
@@ -8084,7 +8547,7 @@ var useComputedVisibleColumns = ({
     computedPinnedEndOffset,
     computedPinnedEndWidth,
     computedPinnedStartWidth
-  } = useMemo9(() => {
+  } = useMemo10(() => {
     return getComputedVisibleColumns({
       columns,
       bodySize,
@@ -8094,6 +8557,7 @@ var useComputedVisibleColumns = ({
       columnCssEllipsis,
       columnHeaderCssEllipsis,
       viewportReservedWidth,
+      filterValue,
       sortable,
       sortInfo,
       setSortInfo,
@@ -8118,6 +8582,7 @@ var useComputedVisibleColumns = ({
     sortInfo,
     setSortInfo,
     multiSort,
+    filterValue,
     columnOrder,
     columnVisibility,
     columnVisibilityAssumeVisible,
@@ -8150,7 +8615,7 @@ var useComputedVisibleColumns = ({
 };
 
 // src/components/InfiniteTable/hooks/useScrollbars.ts
-import { useState as useState10, useEffect as useEffect21, useLayoutEffect as useLayoutEffect4 } from "react";
+import { useState as useState11, useEffect as useEffect22, useLayoutEffect as useLayoutEffect4 } from "react";
 var INITIAL_SCROLLBARS = {
   vertical: false,
   horizontal: false
@@ -8158,8 +8623,8 @@ var INITIAL_SCROLLBARS = {
 function useScrollbars(brain) {
   const { getComponentState: getInfiniteTableState } = useComponentState();
   const { getState: getDataSourceState } = useDataSourceContextValue();
-  const [scrollbars, setScrollbars] = useState10(INITIAL_SCROLLBARS);
-  useEffect21(() => {
+  const [scrollbars, setScrollbars] = useState11(INITIAL_SCROLLBARS);
+  useEffect22(() => {
     return brain.onRenderCountChange(() => {
       const { scrollTopMax, scrollLeftMax } = brain;
       setScrollbars({
@@ -8199,27 +8664,27 @@ function useComputed() {
     bodySize,
     showSeparatePivotColumnForSingleAggregation
   } = componentState;
-  useState11(() => {
+  useState12(() => {
     componentState.onRowHeightCSSVarChange.onChange((rowHeight) => {
       if (rowHeight) {
         componentActions.rowHeight = rowHeight;
       }
     });
-    componentState.onHeaderHeightCSSVarChange.onChange((headerHeight) => {
-      if (headerHeight) {
-        componentActions.headerHeight = headerHeight;
+    componentState.onColumnHeaderHeightCSSVarChange.onChange((columnHeaderHeight) => {
+      if (columnHeaderHeight) {
+        componentActions.columnHeaderHeight = columnHeaderHeight;
       }
     });
   });
-  useEffect22(() => {
+  useEffect23(() => {
     dataSourceActions.showSeparatePivotColumnForSingleAggregation = showSeparatePivotColumnForSingleAggregation;
   }, [showSeparatePivotColumnForSingleAggregation]);
-  const { multiSort } = dataSourceState;
+  const { multiSort, filterValue } = dataSourceState;
   useColumnGroups();
   const { toggleGroupRow } = useColumnsWhen();
   const setSortInfo = useCallback14((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;
@@ -8258,6 +8723,7 @@ function useComputed() {
     columnVisibility,
     columnVisibilityAssumeVisible: true,
     columnPinning,
+    filterValue,
     columnSizing,
     columnTypes
   });
@@ -8267,6 +8733,7 @@ function useComputed() {
   const computedPinnedStartOverflow = computedPinnedStartWidth ? computedPinnedStartColumnsWidth > computedPinnedStartWidth : false;
   const computedPinnedEndOverflow = computedPinnedEndWidth ? computedPinnedEndColumnsWidth > computedPinnedEndWidth : false;
   return {
+    showColumnFilters: !!dataSourceState.filterValue,
     scrollbars,
     columnSize,
     rowspan,
@@ -8374,7 +8841,7 @@ function useDOMProps(initialDOMProps) {
 }
 
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo11 } from "react";
 
 // src/components/InfiniteTable/hooks/useLicense/crc32.ts
 var DEFAULT_ReversedPolynomial = 3988292384;
@@ -8532,10 +8999,10 @@ var isInsideSandbox = () => {
 };
 var isInsidePlayground = isInsideSandbox() || isInsideSandpack();
 var useLicense = (licenseKey = "") => {
-  const valid = useMemo10(() => {
+  const valid = useMemo11(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.3.2"
+      version: "0.3.3"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -8627,7 +9094,7 @@ function initSetupState2() {
     scrollerDOMRef: createRef(),
     portalDOMRef: createRef(),
     onRowHeightCSSVarChange: buildSubscriptionCallback(),
-    onHeaderHeightCSSVarChange: buildSubscriptionCallback(),
+    onColumnHeaderHeightCSSVarChange: buildSubscriptionCallback(),
     bodySize: {
       width: 0,
       height: 0
@@ -8677,6 +9144,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,
@@ -8684,6 +9152,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,
@@ -8696,7 +9167,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")),
@@ -8742,7 +9213,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 : ""
   };
 };
 
@@ -8755,7 +9226,7 @@ var InfiniteTableRoot = getComponentStateRoot({
   mapPropsToState: mapPropsToState2,
   allowedControlledPropOverrides: {
     rowHeight: true,
-    headerHeight: true
+    columnHeaderHeight: true
   },
   getParentState: () => useDataSource(),
   debugName: "InfiniteTable"
@@ -8776,9 +9247,9 @@ var InfiniteTableComponent = memo9(function InfiniteTableComponent2() {
     loadingText,
     header,
     onRowHeightCSSVarChange,
-    onHeaderHeightCSSVarChange,
+    onColumnHeaderHeightCSSVarChange,
     rowHeightCSSVar,
-    headerHeightCSSVar,
+    columnHeaderHeightCSSVar,
     components,
     scrollStopDelay,
     brain,
@@ -8793,7 +9264,7 @@ var InfiniteTableComponent = memo9(function InfiniteTableComponent2() {
     bodySize,
     computed
   });
-  useEffect23(() => {
+  useEffect24(() => {
     const dataSourceState = getDataSourceState();
     const onChange = debounce((renderRange) => {
       dataSourceState.notifyRenderRangeChange({
@@ -8806,35 +9277,35 @@ var InfiniteTableComponent = memo9(function InfiniteTableComponent2() {
   const licenseValid = useLicense(licenseKey);
   const domProps = useDOMProps(componentState.domProps);
   const LoadMaskCmp = (_a = components == null ? void 0 : components.LoadMask) != null ? _a : LoadMask;
-  useEffect23(() => {
+  useEffect24(() => {
     brain.setScrollStopDelay(scrollStopDelay);
     dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
   }, [scrollStopDelay]);
   useAutoSizeColumns();
-  return /* @__PURE__ */ createElement22("div", __spreadValues({
+  return /* @__PURE__ */ createElement24("div", __spreadValues({
     ref: domRef
-  }, domProps), header ? /* @__PURE__ */ createElement22(TableHeaderWrapper, {
+  }, domProps), header ? /* @__PURE__ */ createElement24(TableHeaderWrapper, {
     brain: headerBrain,
     scrollbars
-  }) : null, /* @__PURE__ */ createElement22(InfiniteTableBody, null, /* @__PURE__ */ createElement22(HeadlessTable, {
+  }) : null, /* @__PURE__ */ createElement24(InfiniteTableBody, null, /* @__PURE__ */ createElement24(HeadlessTable, {
     tabIndex: 0,
     scrollStopDelay,
     brain,
     renderCell,
     cellHoverClassNames: HOVERED_CLASS_NAMES,
     scrollerDOMRef
-  }), /* @__PURE__ */ createElement22(LoadMaskCmp, {
+  }), /* @__PURE__ */ createElement24(LoadMaskCmp, {
     visible: loading
-  }, loadingText)), licenseValid ? null : /* @__PURE__ */ createElement22(InfiniteTableLicenseFooter, null), /* @__PURE__ */ createElement22("div", {
+  }, loadingText)), /* @__PURE__ */ createElement24("div", {
     ref: portalDOMRef,
     className: join(`${rootClassName2}Portal`, zIndex[1e3], position.absolute, top[0], left[0])
-  }), rowHeightCSSVar ? /* @__PURE__ */ createElement22(CSSVariableWatch, {
+  }), rowHeightCSSVar ? /* @__PURE__ */ createElement24(CSSVariableWatch, {
     varName: rowHeightCSSVar,
     onChange: onRowHeightCSSVarChange
-  }) : null, headerHeightCSSVar ? /* @__PURE__ */ createElement22(CSSVariableWatch, {
-    varName: headerHeightCSSVar,
-    onChange: onHeaderHeightCSSVarChange
-  }) : null);
+  }) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ createElement24(CSSVariableWatch, {
+    varName: columnHeaderHeightCSSVar,
+    onChange: onColumnHeaderHeightCSSVarChange
+  }) : null, /* @__PURE__ */ createElement24(InfiniteTableFooter, null), licenseValid ? null : /* @__PURE__ */ createElement24(InfiniteTableLicenseFooter, null));
 });
 function InfiniteTableContextProvider() {
   const { componentActions, componentState } = useComponentState();
@@ -8862,29 +9333,29 @@ function InfiniteTableContextProvider() {
     bodySize.width = (_b = (_a = scrollerDOMRef.current) == null ? void 0 : _a.scrollWidth) != null ? _b : bodySize.width;
     componentActions.bodySize = bodySize;
   }, { earlyAttach: true });
-  useEffect23(() => {
+  useEffect24(() => {
     return () => {
       componentState.onRowHeightCSSVarChange.destroy();
-      componentState.onHeaderHeightCSSVarChange.destroy();
+      componentState.onColumnHeaderHeightCSSVarChange.destroy();
     };
   }, []);
-  useEffect23(() => {
+  useEffect24(() => {
     if (scrollerDOMRef.current) {
       scrollerDOMRef.current.scrollTop = 0;
     }
   }, [scrollTopKey, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
-  return /* @__PURE__ */ createElement22(TableContext2.Provider, {
+  return /* @__PURE__ */ createElement24(TableContext2.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ createElement22(InfiniteTableComponent, null));
+  }, /* @__PURE__ */ createElement24(InfiniteTableComponent, null));
 }
 function InfiniteTable(props) {
-  const table = /* @__PURE__ */ createElement22(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ createElement22(InfiniteTableContextProvider, null));
-  return /* @__PURE__ */ createElement22(StrictMode, null, table);
+  const table = /* @__PURE__ */ createElement24(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ createElement24(InfiniteTableContextProvider, null));
+  return /* @__PURE__ */ createElement24(StrictMode, null, table);
 }
 InfiniteTable.defaultProps = {
   rowHeight: 40,
-  headerHeight: ThemeVars.components.Header.height
+  columnHeaderHeight: ThemeVars.components.Header.columnHeaderHeight
 };
 export {
   DataSource,
@@ -8893,7 +9364,12 @@ export {
   InfiniteTable,
   InfiniteTableClassName,
   InfiniteTableComponent,
+  NumberFilterEditor,
+  StringFilterEditor,
   debounce,
+  defaultFilterEditors,
+  defaultFilterTypes,
+  defaultFilterTypes as filterTypes,
   flatten,
   getComponentStateRoot,
   group,