material-react-table 0.7.2 → 0.7.5

package/dist/menus/{MRT_FilterTypeMenu.d.ts → MRT_FilterOptionMenu.d.ts}

@@ -7,5 +7,5 @@ interface Props {
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
     tableInstance: MRT_TableInstance;
 }
-export declare const MRT_FilterTypeMenu: FC<Props>;
+export declare const MRT_FilterOptionMenu: FC<Props>;
 export {};

package/dist/utils.d.ts

@@ -1,12 +1,12 @@
 import { ColumnDef, Table } from '@tanstack/react-table';
-import { MRT_ColumnDef, MRT_FilterType } from '.';
+import { MRT_ColumnDef, MRT_FilterFn } from '.';
 export declare const getAllLeafColumnDefs: (columns: MRT_ColumnDef[]) => MRT_ColumnDef[];
-export declare const createGroup: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterTypes: {
-    [key: string]: MRT_FilterType;
+export declare const createGroup: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterFns: {
+    [key: string]: MRT_FilterFn<{}>;
 }) => ColumnDef<D>;
-export declare const createDataColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterTypes: {
-    [key: string]: MRT_FilterType;
+export declare const createDataColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterFns: {
+    [key: string]: MRT_FilterFn<{}>;
 }) => ColumnDef<D>;
-export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "footer" | "columns" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "defaultCanHide" | "defaultIsVisible" | "enablePinning" | "defaultCanPin" | "filterFn" | "enableAllFilters" | "enableColumnFilter" | "enableGlobalFilter" | "defaultCanFilter" | "defaultCanColumnFilter" | "defaultCanGlobalFilter" | "sortingFn" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "defaultCanSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "aggregateValue" | "aggregatedCell" | "enableGrouping" | "defaultCanGroup" | "enableResizing" | "defaultCanResize" | "width" | "minWidth" | "maxWidth" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableEditing" | "enabledColumnFilterTypes" | "filter" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChange" | "onColumnFilterValueChange"> & {
+export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "footer" | "columns" | "filterFn" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "defaultCanHide" | "defaultIsVisible" | "enablePinning" | "defaultCanPin" | "enableAllFilters" | "enableColumnFilter" | "enableGlobalFilter" | "defaultCanFilter" | "defaultCanColumnFilter" | "defaultCanGlobalFilter" | "sortingFn" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "defaultCanSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "aggregateValue" | "aggregatedCell" | "enableGrouping" | "defaultCanGroup" | "enableResizing" | "defaultCanResize" | "width" | "minWidth" | "maxWidth" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableEditing" | "enabledColumnFilterOptions" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChange" | "onColumnFilterValueChange"> & {
     header?: string | undefined;
 }) => ColumnDef<D>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.2",
+  "version": "0.7.5",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of react-table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
@@ -28,7 +28,7 @@
   },
   "scripts": {
     "analyze": "size-limit --why",
-    "build": "tsdx build && size-limit && rm -rf material-react-table-docs/node_modules/material-react-table/dist  && cp -r dist material-react-table-docs/node_modules/material-react-table/ && cp -r src material-react-table-docs/node_modules/material-react-table/ && cp -r package.json material-react-table-docs/node_modules/material-react-table/package.json",
+    "build": "tsdx build && size-limit && rm -rf material-react-table-docs/node_modules/material-react-table/dist && cp -r dist material-react-table-docs/node_modules/material-react-table/ && cp -r src material-react-table-docs/node_modules/material-react-table/ && cp -r package.json material-react-table-docs/node_modules/material-react-table/package.json",
     "build-storybook": "build-storybook",
     "format": "prettier -w .",
     "lint": "eslint .",
@@ -59,7 +59,7 @@
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@etchteam/storybook-addon-status": "^4.2.1",
-    "@faker-js/faker": "^6.1.2",
+    "@faker-js/faker": "^6.2.0",
     "@mui/icons-material": "^5.6.2",
     "@mui/material": "^5.6.2",
     "@size-limit/preset-small-lib": "^7.0.8",
@@ -75,7 +75,7 @@
     "@types/react": "^17.0.41",
     "@types/react-dom": "^17.0.14",
     "babel-loader": "^8.2.5",
-    "eslint": "^8.13.0",
+    "eslint": "^8.14.0",
     "eslint-plugin-react-hooks": "^4.4.0",
     "husky": "^7.0.4",
     "prettier": "^2.6.2",
@@ -86,7 +86,7 @@
     "storybook-addon-paddings": "^4.3.0",
     "storybook-dark-mode": "^1.0.9",
     "tsdx": "^0.14.1",
-    "tslib": "^2.3.1",
+    "tslib": "^2.4.0",
     "typescript": "^4.6.3"
   },
   "peerDependencies": {
@@ -97,7 +97,7 @@
     "react": ">=16.8"
   },
   "dependencies": {
-    "@tanstack/react-table": "^8.0.0-alpha.45",
+    "@tanstack/react-table": "^8.0.0-alpha.47",
     "match-sorter": "^6.3.1"
   }
 }

package/src/MaterialReactTable.tsx

@@ -31,7 +31,8 @@ import {
   Column,
   ColumnDef,
   DefaultGenerics,
-  FilterType,
+  FilterFn,
+  FilterFnOption,
   Header,
   HeaderGroup,
   Options,
@@ -44,20 +45,21 @@ import {
 } from '@tanstack/react-table';
 import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
 import { MRT_Default_Icons, MRT_Icons } from './icons';
-import { MRT_FILTER_TYPE } from './enums';
+import { MRT_FILTER_OPTION } from './enums';
 import { MRT_TableRoot } from './table/MRT_TableRoot';
 
 export type MRT_TableOptions<D extends Record<string, any> = {}> = Partial<
   Omit<
     Options<D>,
-    'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'
+    'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn' | 'filterFns'
   >
 > & {
   columns: MRT_ColumnDef<D>[];
   data: D[];
+  expandRowsFn?: (dataRow: D) => D[];
+  filterFns?: MRT_FILTER_OPTION | FilterFn<D> | string | number | symbol;
   initialState?: Partial<MRT_TableState<D>>;
   state?: Partial<MRT_TableState<D>>;
-  expandRowsFn?: (dataRow: D) => D[];
 };
 
 export interface MRT_RowModel<D extends Record<string, any> = {}> {
@@ -96,16 +98,16 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
   options: MaterialReactTableProps<D> & {
     icons: MRT_Icons;
     idPrefix: string;
-    filterTypes: { [key in MRT_FILTER_TYPE]: any };
     localization: MRT_Localization;
   };
+  setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell<D> | null>>;
   setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row<D> | null>>;
-  setCurrentFilterTypes: Dispatch<
+  setCurrentFilterFns: Dispatch<
     SetStateAction<{
-      [key: string]: MRT_FilterType;
+      [key: string]: MRT_FilterFn<D>;
     }>
   >;
-  setCurrentGlobalFilterType: Dispatch<SetStateAction<MRT_FILTER_TYPE>>;
+  setCurrentGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterFn<D>>>;
   setIsDensePadding: Dispatch<SetStateAction<boolean>>;
   setIsFullScreen: Dispatch<SetStateAction<boolean>>;
   setShowFilters: Dispatch<SetStateAction<boolean>>;
@@ -116,9 +118,10 @@ export type MRT_TableState<D extends Record<string, any> = {}> = Omit<
   TableState,
   'pagination'
 > & {
+  currentEditingCell: MRT_Cell<D> | null;
   currentEditingRow: MRT_Row<D> | null;
-  currentFilterTypes: Record<string, string | Function>;
-  currentGlobalFilterType: Record<string, string | Function>;
+  currentFilterFns: Record<string, string | Function>;
+  currentGlobalFilterFn: Record<string, string | Function>;
   isDensePadding: boolean;
   isFullScreen: boolean;
   showFilters: boolean;
@@ -128,23 +131,19 @@ export type MRT_TableState<D extends Record<string, any> = {}> = Omit<
 
 export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
   ColumnDef<D>,
-  'header' | 'footer' | 'columns'
+  'header' | 'footer' | 'columns' | 'filterFn'
 > & {
   Edit?: ({
     cell,
     tableInstance,
-  }: // onChange,
-  {
+  }: {
     cell: MRT_Cell<D>;
     tableInstance: MRT_TableInstance<D>;
-    // onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   }) => ReactNode;
   Filter?: ({
-    // onChange,
     header,
     tableInstance,
   }: {
-    // onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     header: MRT_Header<D>;
     tableInstance: MRT_TableInstance<D>;
   }) => ReactNode;
@@ -174,8 +173,8 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
   enableClickToCopy?: boolean;
   enableColumnActions?: boolean;
   enableEditing?: boolean;
-  enabledColumnFilterTypes?: (MRT_FILTER_TYPE | string)[];
-  filter?: MRT_FilterType | string | FilterType<D>;
+  enabledColumnFilterOptions?: (MRT_FILTER_OPTION | string)[];
+  filterFn?: MRT_FilterFn;
   filterSelectOptions?: (string | { text: string; value: string })[];
   footer?: string;
   header: string;
@@ -261,9 +260,11 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
     tableInstance: MRT_TableInstance<D>;
   }) => void;
   onColumnFilterValueChange?: ({
+    column,
     event,
     filterValue,
   }: {
+    column: MRT_Column<D>;
     event: ChangeEvent<HTMLInputElement>;
     filterValue: any;
   }) => void;
@@ -318,10 +319,17 @@ export type MRT_Cell<D extends Record<string, any> = {}> = Omit<
   row: MRT_Row<D>;
 };
 
-export type MRT_FilterType = MRT_FILTER_TYPE | Function;
+export type MRT_FilterFn<D extends Record<string, any> = {}> =
+  | FilterFn<D>
+  | FilterFnOption<D>
+  | MRT_FILTER_OPTION
+  | number
+  | string
+  | symbol;
 
 export type MaterialReactTableProps<D extends Record<string, any> = {}> =
   MRT_TableOptions<D> & {
+    editingMode?: 'table' | 'row' | 'cell';
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
     enableDensePaddingToggle?: boolean;
@@ -329,6 +337,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     enableExpandAll?: boolean;
     enableFullScreenToggle?: boolean;
     enablePagination?: boolean;
+    enablePersistentState?: boolean;
     enableRowActions?: boolean;
     enableRowNumbers?: boolean;
     enableSelectAll?: boolean;
@@ -338,8 +347,8 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     enableToolbarBottom?: boolean;
     enableToolbarInternalActions?: boolean;
     enableToolbarTop?: boolean;
-    enabledGlobalFilterTypes?: (MRT_FILTER_TYPE | string)[];
-    filterTypes?: { [key in MRT_FILTER_TYPE]: any };
+    enabledColumnFilterOptions?: (MRT_FILTER_OPTION | string)[];
+    enabledGlobalFilterOptions?: (MRT_FILTER_OPTION | string)[];
     icons?: Partial<MRT_Icons>;
     idPrefix?: string;
     isLoading?: boolean;
@@ -557,6 +566,33 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       tableInstance: MRT_TableInstance<D>;
       event: MouseEvent<HTMLTableCellElement>;
     }) => void;
+    onCellEditBlur?: ({
+      cell,
+      event,
+      tableInstance,
+    }: {
+      event: FocusEvent<HTMLInputElement>;
+      cell: MRT_Cell<D>;
+      tableInstance: MRT_TableInstance<D>;
+    }) => void;
+    onCellEditChange?: ({
+      cell,
+      event,
+      tableInstance,
+    }: {
+      event: ChangeEvent<HTMLInputElement>;
+      cell: MRT_Cell<D>;
+      tableInstance: MRT_TableInstance<D>;
+    }) => void;
+    onColumnFilterValueChange?: ({
+      column,
+      event,
+      filterValue,
+    }: {
+      column: MRT_Column<D>;
+      event: ChangeEvent<HTMLInputElement>;
+      filterValue: any;
+    }) => void;
     onDetailPanelClick?: ({
       event,
       row,
@@ -662,6 +698,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       showGlobalFilter: boolean;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
+    persistentStateMode?: 'localStorage' | 'sessionStorage';
     positionActionsColumn?: 'first' | 'last';
     positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarActions?: 'bottom' | 'top';
@@ -723,7 +760,9 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
 
 export default <D extends Record<string, any> = {}>({
   autoResetExpanded = false,
+  autoResetSorting = false,
   columnResizeMode = 'onEnd',
+  editingMode = 'row',
   enableColumnActions = true,
   enableColumnFilters = true,
   enableColumnResizing = false,
@@ -745,6 +784,7 @@ export default <D extends Record<string, any> = {}>({
   enableToolbarTop = true,
   icons,
   localization,
+  persistentStateMode = 'sessionStorage',
   positionActionsColumn = 'first',
   positionPagination = 'bottom',
   positionToolbarActions = 'top',
@@ -753,7 +793,9 @@ export default <D extends Record<string, any> = {}>({
 }: MaterialReactTableProps<D>) => (
   <MRT_TableRoot
     autoResetExpanded={autoResetExpanded}
+    autoResetSorting={autoResetSorting}
     columnResizeMode={columnResizeMode}
+    editingMode={editingMode}
     enableColumnActions={enableColumnActions}
     enableColumnResizing={enableColumnResizing}
     enableColumnFilters={enableColumnFilters}
@@ -775,6 +817,7 @@ export default <D extends Record<string, any> = {}>({
     enableToolbarTop={enableToolbarTop}
     icons={{ ...MRT_Default_Icons, ...icons }}
     localization={{ ...MRT_DefaultLocalization_EN, ...localization }}
+    persistentStateMode={persistentStateMode}
     positionActionsColumn={positionActionsColumn}
     positionPagination={positionPagination}
     positionToolbarActions={positionToolbarActions}

package/src/body/MRT_TableBodyCell.tsx

@@ -14,17 +14,20 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
     getIsSomeColumnsPinned,
     getState,
     options: {
+      editingMode,
       enableClickToCopy,
-      enablePinning,
       enableEditing,
+      enablePinning,
+      idPrefix,
       isLoading,
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
       onCellClick,
     },
+    setCurrentEditingCell,
   } = tableInstance;
 
-  const { currentEditingRow, isDensePadding } = getState();
+  const { currentEditingCell, currentEditingRow, isDensePadding } = getState();
 
   const { column, row } = cell;
 
@@ -53,13 +56,43 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
     [column.columnDefType, column.getWidth()],
   );
 
+  const isEditable =
+    (enableEditing || column.enableEditing) && column.enableEditing !== false;
+
+  const isEditing =
+    isEditable &&
+    (editingMode === 'table' ||
+      currentEditingRow?.id === row.id ||
+      currentEditingCell?.id === cell.id);
+
+  const handleDoubleClick = (_event: MouseEvent<HTMLTableCellElement>) => {
+    if (
+      (enableEditing || column.enableEditing) &&
+      column.enableEditing !== false &&
+      editingMode === 'cell'
+    ) {
+      setCurrentEditingCell(cell);
+      setTimeout(() => {
+        const textField = document.getElementById(
+          `mrt-${idPrefix}-edit-cell-text-field-${cell.id}`,
+        ) as HTMLInputElement;
+        if (textField) {
+          textField.focus();
+          textField.select();
+        }
+      }, 200);
+    }
+  };
+
   return (
     <TableCell
       onClick={(event: MouseEvent<HTMLTableCellElement>) =>
         onCellClick?.({ event, cell, tableInstance })
       }
+      onDoubleClick={handleDoubleClick}
       {...tableCellProps}
       sx={{
+        cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
         maxWidth: `min(${column.getWidth()}px, fit-content)`,
         minWidth: `max(${column.getWidth()}px, ${column.minWidth}px)`,
         p: isDensePadding
@@ -97,9 +130,7 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
           column.id !==
             row.groupingColumnId) ? null : cell.getIsAggregated() ? (
         cell.renderAggregatedCell()
-      ) : enableEditing &&
-        column.enableEditing !== false &&
-        currentEditingRow?.id === row.id ? (
+      ) : isEditing ? (
         <MRT_EditCellTextField cell={cell} tableInstance={tableInstance} />
       ) : (enableClickToCopy || column.enableClickToCopy) &&
         column.enableClickToCopy !== false ? (

package/src/buttons/MRT_CopyButton.tsx

@@ -56,6 +56,7 @@ export const MRT_CopyButton: FC<Props> = ({
           backgroundColor: 'transparent',
           border: 'none',
           color: 'inherit',
+          cursor: 'copy',
           fontFamily: 'inherit',
           fontSize: 'inherit',
           letterSpacing: 'inherit',

package/src/enums.ts

@@ -1,4 +1,4 @@
-export enum MRT_FILTER_TYPE {
+export enum MRT_FILTER_OPTION {
   BEST_MATCH = 'bestMatch',
   BEST_MATCH_FIRST = 'bestMatchFirst',
   CONTAINS = 'contains',

package/src/head/MRT_TableHeadCell.tsx

@@ -60,20 +60,18 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
       : localization.sortedByColumnAsc.replace('{column}', column.header)
     : localization.unsorted;
 
-  const filterType = getState()?.currentFilterTypes?.[header.id];
+  const filterFn = getState()?.currentFilterFns?.[header.id];
 
   const filterTooltip = !!column.getColumnFilterValue()
     ? localization.filteringByColumn
         .replace('{column}', String(column.header))
         .replace(
           '{filterType}',
-          filterType instanceof Function
+          filterFn instanceof Function
             ? ''
             : // @ts-ignore
               localization[
-                `filter${
-                  filterType.charAt(0).toUpperCase() + filterType.slice(1)
-                }`
+                `filter${filterFn.charAt(0).toUpperCase() + filterFn.slice(1)}`
               ],
         )
         .replace('{filterValue}', column.getColumnFilterValue() as string)

package/src/inputs/MRT_EditCellTextField.tsx

@@ -16,7 +16,14 @@ interface Props {
 export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
   const {
     getState,
-    options: { enableEditing, muiTableBodyCellEditTextFieldProps },
+    options: {
+      idPrefix,
+      enableEditing,
+      muiTableBodyCellEditTextFieldProps,
+      onCellEditBlur,
+      onCellEditChange,
+    },
+    setCurrentEditingCell,
     setCurrentEditingRow,
   } = tableInstance;
 
@@ -27,6 +34,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
     column.onCellEditChange?.({ event, cell, tableInstance });
+    onCellEditChange?.({ event, cell, tableInstance });
   };
 
   const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
@@ -34,7 +42,9 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
       row.values[column.id] = value;
       setCurrentEditingRow({ ...getState().currentEditingRow } as MRT_Row);
     }
+    setCurrentEditingCell(null);
     column.onCellEditBlur?.({ event, cell, tableInstance });
+    onCellEditBlur?.({ event, cell, tableInstance });
   };
 
   const mTableBodyCellEditTextFieldProps =
@@ -58,6 +68,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
 
   return (
     <TextField
+      id={`mrt-${idPrefix}-edit-cell-text-field-${cell.id}`}
       margin="dense"
       onBlur={handleBlur}
       onChange={handleChange}

package/src/inputs/MRT_FilterTextField.tsx

@@ -16,8 +16,8 @@ import {
   Tooltip,
 } from '@mui/material';
 import type { MRT_Header, MRT_TableInstance } from '..';
-import { MRT_FilterTypeMenu } from '../menus/MRT_FilterTypeMenu';
-import { MRT_FILTER_TYPE } from '../enums';
+import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
+import { MRT_FILTER_OPTION } from '../enums';
 
 interface Props {
   header: MRT_Header;
@@ -33,12 +33,12 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
       localization,
       muiTableHeadCellFilterTextFieldProps,
     },
-    setCurrentFilterTypes,
+    setCurrentFilterFns,
   } = tableInstance;
 
   const { column } = header;
 
-  const { currentFilterTypes } = getState();
+  const { currentFilterFns } = getState();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -82,9 +82,9 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
   const handleClearFilterChip = () => {
     setFilterValue('');
     column.setColumnFilterValue(undefined);
-    setCurrentFilterTypes((prev) => ({
+    setCurrentFilterFns((prev) => ({
       ...prev,
-      [header.id]: MRT_FILTER_TYPE.BEST_MATCH,
+      [header.id]: MRT_FILTER_OPTION.BEST_MATCH,
     }));
   };
 
@@ -93,16 +93,16 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
   }
 
   const filterId = `mrt-${idPrefix}-${header.id}-filter-text-field`;
-  const filterType = currentFilterTypes?.[header.id];
+  const filterFn = currentFilterFns?.[header.id];
   const isSelectFilter = !!column.filterSelectOptions;
   const filterChipLabel =
-    !(filterType instanceof Function) &&
-    [MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(
-      filterType as MRT_FILTER_TYPE,
+    !(filterFn instanceof Function) &&
+    [MRT_FILTER_OPTION.EMPTY, MRT_FILTER_OPTION.NOT_EMPTY].includes(
+      filterFn as MRT_FILTER_OPTION,
     )
       ? //@ts-ignore
         localization[
-          `filter${filterType.charAt(0).toUpperCase() + filterType.slice(1)}`
+          `filter${filterFn.charAt(0).toUpperCase() + filterFn.slice(1)}`
         ]
       : '';
   const filterPlaceholder = localization.filterByColumn?.replace(
@@ -125,14 +125,14 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
         }}
         helperText={
           <label htmlFor={filterId}>
-            {filterType instanceof Function
+            {filterFn instanceof Function
               ? localization.filterMode.replace(
                   '{filterType}',
                   // @ts-ignore
                   localization[
                     `filter${
-                      filterType.name.charAt(0).toUpperCase() +
-                      filterType.name.slice(1)
+                      filterFn.name.charAt(0).toUpperCase() +
+                      filterFn.name.slice(1)
                     }`
                   ] ?? '',
                 ) ?? ''
@@ -141,7 +141,7 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
                   // @ts-ignore
                   localization[
                     `filter${
-                      filterType.charAt(0).toUpperCase() + filterType.slice(1)
+                      filterFn.charAt(0).toUpperCase() + filterFn.slice(1)
                     }`
                   ],
                 )}
@@ -248,7 +248,7 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
           );
         })}
       </TextField>
-      <MRT_FilterTypeMenu
+      <MRT_FilterOptionMenu
         anchorEl={anchorEl}
         header={header}
         setAnchorEl={setAnchorEl}

package/src/inputs/MRT_SearchTextField.tsx

@@ -13,7 +13,7 @@ import {
   TextField,
   Tooltip,
 } from '@mui/material';
-import { MRT_FilterTypeMenu } from '../menus/MRT_FilterTypeMenu';
+import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 import { MRT_TableInstance } from '..';
 
 interface Props {
@@ -105,7 +105,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
         {...textFieldProps}
         sx={{ justifySelf: 'end', ...textFieldProps?.sx }}
       />
-      <MRT_FilterTypeMenu
+      <MRT_FilterOptionMenu
         anchorEl={anchorEl}
         setAnchorEl={setAnchorEl}
         tableInstance={tableInstance}

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useState } from 'react';
 import { Box, IconButton, ListItemIcon, Menu, MenuItem } from '@mui/material';
 import type { MRT_Header, MRT_TableInstance } from '..';
-import { MRT_FilterTypeMenu } from './MRT_FilterTypeMenu';
+import { MRT_FilterOptionMenu } from './MRT_FilterOptionMenu';
 import { MRT_ShowHideColumnsMenu } from './MRT_ShowHideColumnsMenu';
 
 export const commonMenuItemStyles = {
@@ -240,7 +240,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </IconButton>
             )}
           </MenuItem>,
-          <MRT_FilterTypeMenu
+          <MRT_FilterOptionMenu
             anchorEl={filterMenuAnchorEl}
             header={header}
             key={2}