material-react-table 0.38.3 → 0.40.0

package/dist/esm/menus/MRT_FilterOptionMenu.d.ts

@@ -1,11 +1,7 @@
-import type { MRT_Header, MRT_TableInstance } from '..';
+/// <reference types="react" />
+import type { MRT_Header, MRT_InternalFilterOption, MRT_TableInstance } from '..';
 import { MRT_Localization } from '../localization';
-export declare const internalFilterOptions: (localization: MRT_Localization) => {
-    option: string;
-    symbol: string;
-    label: string;
-    divider: boolean;
-}[];
+export declare const mrtFilterOptions: (localization: MRT_Localization) => MRT_InternalFilterOption[];
 interface Props<TData extends Record<string, any> = {}> {
     anchorEl: HTMLElement | null;
     header?: MRT_Header;

package/dist/esm/menus/MRT_ShowHideColumnsMenu.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> {
     anchorEl: HTMLElement | null;

package/dist/esm/table/MRT_TableRoot.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { MaterialReactTableProps } from '..';
 export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => JSX.Element;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MutableRefObject, Dispatch, SetStateAction, ReactNode, DragEvent } from 'react';
 import { ButtonProps, TextFieldProps, TableCellProps, IconButtonProps, ToolbarProps, LinearProgressProps, CheckboxProps, SkeletonProps, TableBodyProps, TableRowProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, PaperProps, TableProps, ChipProps, AlertProps } from '@mui/material';
 import { Row, Table, TableState, ColumnDef, DeepKeys, Column, Header, HeaderGroup, Cell, SortingFn, FilterFn, TableOptions, OnChangeFn } from '@tanstack/react-table';
@@ -345,7 +346,7 @@ declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<Column
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
     enableColumnDragging?: boolean;
-    enableColumnFilterChangeMode?: boolean;
+    enableColumnFilterModes?: boolean;
     enableColumnOrdering?: boolean;
     enableEditing?: boolean;
     filterFn?: MRT_FilterFn<TData>;
@@ -407,6 +408,10 @@ declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<Column
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
     }) => TableCellProps);
+    renderColumnFilterModeMenuItems?: ({ table, column, }: {
+        table: MRT_TableInstance<TData>;
+        column: MRT_Column<TData>;
+    }) => ReactNode[];
     sortingFn?: MRT_SortingFn;
 };
 declare type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<MRT_ColumnDef<TData>, 'id'> & {
@@ -440,6 +445,12 @@ declare type MRT_SortingOption = LiteralUnion<string & keyof typeof MRT_SortingF
 declare type MRT_SortingFn<TData extends Record<string, any> = {}> = SortingFn<TData> | MRT_SortingOption;
 declare type MRT_FilterOption = LiteralUnion<string & keyof typeof MRT_FilterFns>;
 declare type MRT_FilterFn<TData extends Record<string, any> = {}> = FilterFn<TData> | MRT_FilterOption;
+declare type MRT_InternalFilterOption = {
+    option: string;
+    symbol: string;
+    label: string;
+    divider: boolean;
+};
 declare type MRT_DisplayColumnIds = 'mrt-row-actions' | 'mrt-row-drag' | 'mrt-row-expand' | 'mrt-row-numbers' | 'mrt-row-select';
 /**
  * `columns` and `data` props are the only required props, but there are over 150 other optional props.
@@ -463,13 +474,13 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
     enableColumnDragging?: boolean;
-    enableColumnFilterChangeMode?: boolean;
+    enableColumnFilterModes?: boolean;
     enableColumnOrdering?: boolean;
     enableDensityToggle?: boolean;
     enableEditing?: boolean;
     enableExpandAll?: boolean;
     enableFullScreenToggle?: boolean;
-    enableGlobalFilterChangeMode?: boolean;
+    enableGlobalFilterModes?: boolean;
     enableGlobalFilterRankedResults?: boolean;
     enablePagination?: boolean;
     enableRowActions?: boolean;
@@ -651,10 +662,21 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     renderBottomToolbarCustomActions?: ({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
+    renderColumnFilterModeMenuItems?: ({ column, internalFilterOptions, onSelectFilterMode, table, }: {
+        column: MRT_Column<TData>;
+        internalFilterOptions: MRT_InternalFilterOption[];
+        onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode;
     renderDetailPanel?: ({ row, table, }: {
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
+    renderGlobalFilterModeMenuItems?: ({ internalFilterOptions, onSelectFilterMode, table, }: {
+        internalFilterOptions: MRT_InternalFilterOption[];
+        onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode[];
     renderRowActionMenuItems?: ({ closeMenu, row, table, }: {
         closeMenu: () => void;
         row: MRT_Row<TData>;
@@ -675,11 +697,12 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
     state?: Partial<MRT_TableState<TData>>;
+    tableInstanceRef?: MutableRefObject<MRT_TableInstance<TData> | null>;
     virtualizerProps?: Partial<Options<HTMLDivElement>> | (({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => Partial<Options<HTMLDivElement>>);
 };
-declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilterChangeMode, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterChangeMode, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
+declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilterModes, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterModes, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
 
 interface Props$6<TData extends Record<string, any> = {}> {
     cell: MRT_Cell<TData>;
@@ -718,4 +741,4 @@ interface Props<TData extends Record<string, any> = {}> extends IconButtonProps
 }
 declare const MRT_ToggleGlobalFilterButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props<TData>) => JSX.Element;
 
-export { MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_CopyButton, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterFn, MRT_FilterOption, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_Header, MRT_HeaderGroup, MRT_Icons, MRT_Localization, MRT_Row, MRT_RowModel, MRT_ShowHideColumnsButton, MRT_SortingFn, MRT_SortingOption, MRT_TableInstance, MRT_TableState, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MaterialReactTableProps, _default as default };
+export { MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_CopyButton, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterFn, MRT_FilterOption, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_Header, MRT_HeaderGroup, MRT_Icons, MRT_InternalFilterOption, MRT_Localization, MRT_Row, MRT_RowModel, MRT_ShowHideColumnsButton, MRT_SortingFn, MRT_SortingOption, MRT_TableInstance, MRT_TableState, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MaterialReactTableProps, _default as default };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.38.3",
+  "version": "0.40.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -78,7 +78,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "rollup": "^2.78.0",
+    "rollup": "^2.78.1",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^8.0.1",

package/src/MaterialReactTable.tsx

@@ -260,7 +260,7 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
   enableClickToCopy?: boolean;
   enableColumnActions?: boolean;
   enableColumnDragging?: boolean;
-  enableColumnFilterChangeMode?: boolean;
+  enableColumnFilterModes?: boolean;
   enableColumnOrdering?: boolean;
   enableEditing?: boolean;
   filterFn?: MRT_FilterFn<TData>;
@@ -362,6 +362,13 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
       }) => TableCellProps);
+  renderColumnFilterModeMenuItems?: ({
+    table,
+    column,
+  }: {
+    table: MRT_TableInstance<TData>;
+    column: MRT_Column<TData>;
+  }) => ReactNode[];
   sortingFn?: MRT_SortingFn;
 };
 
@@ -432,6 +439,13 @@ export type MRT_FilterFn<TData extends Record<string, any> = {}> =
   | FilterFn<TData>
   | MRT_FilterOption;
 
+export type MRT_InternalFilterOption = {
+  option: string;
+  symbol: string;
+  label: string;
+  divider: boolean;
+};
+
 export type MRT_DisplayColumnIds =
   | 'mrt-row-actions'
   | 'mrt-row-drag'
@@ -472,13 +486,13 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
     enableColumnDragging?: boolean;
-    enableColumnFilterChangeMode?: boolean;
+    enableColumnFilterModes?: boolean;
     enableColumnOrdering?: boolean;
     enableDensityToggle?: boolean;
     enableEditing?: boolean;
     enableExpandAll?: boolean;
     enableFullScreenToggle?: boolean;
-    enableGlobalFilterChangeMode?: boolean;
+    enableGlobalFilterModes?: boolean;
     enableGlobalFilterRankedResults?: boolean;
     enablePagination?: boolean;
     enableRowActions?: boolean;
@@ -768,6 +782,17 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     }: {
       table: MRT_TableInstance<TData>;
     }) => ReactNode;
+    renderColumnFilterModeMenuItems?: ({
+      column,
+      internalFilterOptions,
+      onSelectFilterMode,
+      table,
+    }: {
+      column: MRT_Column<TData>;
+      internalFilterOptions: MRT_InternalFilterOption[];
+      onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
+      table: MRT_TableInstance<TData>;
+    }) => ReactNode;
     renderDetailPanel?: ({
       row,
       table,
@@ -775,6 +800,15 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
       row: MRT_Row<TData>;
       table: MRT_TableInstance<TData>;
     }) => ReactNode;
+    renderGlobalFilterModeMenuItems?: ({
+      internalFilterOptions,
+      onSelectFilterMode,
+      table,
+    }: {
+      internalFilterOptions: MRT_InternalFilterOption[];
+      onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
+      table: MRT_TableInstance<TData>;
+    }) => ReactNode[];
     renderRowActionMenuItems?: ({
       closeMenu,
       row,
@@ -807,6 +841,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
     state?: Partial<MRT_TableState<TData>>;
+    tableInstanceRef?: MutableRefObject<MRT_TableInstance<TData> | null>;
     virtualizerProps?:
       | Partial<VirtualizerOptions<HTMLDivElement>>
       | (({
@@ -831,7 +866,7 @@ export default <TData extends Record<string, any> = {}>({
   editingMode = 'modal',
   enableBottomToolbar = true,
   enableColumnActions = true,
-  enableColumnFilterChangeMode = false,
+  enableColumnFilterModes = false,
   enableColumnFilters = true,
   enableColumnOrdering = false,
   enableColumnResizing = false,
@@ -840,7 +875,7 @@ export default <TData extends Record<string, any> = {}>({
   enableFilters = true,
   enableFullScreenToggle = true,
   enableGlobalFilter = true,
-  enableGlobalFilterChangeMode = false,
+  enableGlobalFilterModes = false,
   enableGlobalFilterRankedResults = true,
   enableGrouping = false,
   enableHiding = true,
@@ -878,7 +913,7 @@ export default <TData extends Record<string, any> = {}>({
     editingMode={editingMode}
     enableBottomToolbar={enableBottomToolbar}
     enableColumnActions={enableColumnActions}
-    enableColumnFilterChangeMode={enableColumnFilterChangeMode}
+    enableColumnFilterModes={enableColumnFilterModes}
     enableColumnFilters={enableColumnFilters}
     enableColumnOrdering={enableColumnOrdering}
     enableColumnResizing={enableColumnResizing}
@@ -887,7 +922,7 @@ export default <TData extends Record<string, any> = {}>({
     enableFilters={enableFilters}
     enableFullScreenToggle={enableFullScreenToggle}
     enableGlobalFilter={enableGlobalFilter}
-    enableGlobalFilterChangeMode={enableGlobalFilterChangeMode}
+    enableGlobalFilterModes={enableGlobalFilterModes}
     enableGlobalFilterRankedResults={enableGlobalFilterRankedResults}
     enableGrouping={enableGrouping}
     enableHiding={enableHiding}

package/src/body/MRT_TableBody.tsx

@@ -124,6 +124,7 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
                 enableRowVirtualization ? rowOrVirtualRow.index : rowIndex
               }
               table={table}
+              virtualRow={enableRowVirtualization ? rowOrVirtualRow : null}
             />
           );
         },

package/src/body/MRT_TableBodyCell.tsx

@@ -109,7 +109,8 @@ export const MRT_TableBodyCell: FC<Props> = ({
     [isLoading, showSkeletons],
   );
 
-  const handleDoubleClick = (_event: MouseEvent<HTMLTableCellElement>) => {
+  const handleDoubleClick = (event: MouseEvent<HTMLTableCellElement>) => {
+    tableCellProps?.onDoubleClick?.(event);
     if (
       (enableEditing || columnDef.enableEditing) &&
       columnDef.enableEditing !== false &&
@@ -143,7 +144,8 @@ export const MRT_TableBodyCell: FC<Props> = ({
     );
   };
 
-  const handleDragEnter = (_e: DragEvent) => {
+  const handleDragEnter = (e: DragEvent<HTMLTableCellElement>) => {
+    tableCellProps?.onDragEnter?.(e);
     if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
       setHoveredColumn(null);
     }
@@ -179,9 +181,9 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   return (
     <TableCell
-      onDoubleClick={handleDoubleClick}
-      onDragEnter={handleDragEnter}
       {...tableCellProps}
+      onDragEnter={handleDragEnter}
+      onDoubleClick={handleDoubleClick}
       sx={(theme) => ({
         backgroundColor: column.getIsPinned()
           ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)

package/src/body/MRT_TableBodyCellValue.tsx

@@ -12,8 +12,8 @@ export const MRT_TableBodyCellValue: FC<Props> = ({ cell, table }) => {
 
   return (
     <>
-      {cell.getIsAggregated() && column.columnDef.aggregationFn
-        ? columnDef.AggregatedCell?.({
+      {cell.getIsAggregated() && columnDef.AggregatedCell
+        ? columnDef.AggregatedCell({
             cell,
             column,
             row,
@@ -21,15 +21,14 @@ export const MRT_TableBodyCellValue: FC<Props> = ({ cell, table }) => {
           })
         : row.getIsGrouped() && !cell.getIsGrouped()
         ? null
-        : (cell.getIsGrouped() &&
-            columnDef.GroupedCell?.({
-              cell,
-              column,
-              row,
-              table,
-            })) ||
-          (columnDef?.Cell?.({ cell, column, row, table }) ??
-            cell.renderValue())}
+        : cell.getIsGrouped() && columnDef.GroupedCell
+        ? columnDef.GroupedCell({
+            cell,
+            column,
+            row,
+            table,
+          })
+        : columnDef?.Cell?.({ cell, column, row, table }) ?? cell.renderValue()}
     </>
   );
 };

package/src/body/MRT_TableBodyRow.tsx

@@ -8,9 +8,15 @@ interface Props {
   row: MRT_Row;
   rowIndex: number;
   table: MRT_TableInstance;
+  virtualRow?: any;
 }
 
-export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
+export const MRT_TableBodyRow: FC<Props> = ({
+  row,
+  rowIndex,
+  table,
+  virtualRow,
+}) => {
   const theme = useTheme();
   const {
     getIsSomeColumnsPinned,
@@ -31,7 +37,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
     }
   };
 
-  const rowRef = useRef<HTMLTableRowElement>(null);
+  const rowRef = useRef<HTMLTableRowElement | null>(null);
 
   const draggingBorder =
     draggingRow?.id === row.id
@@ -52,7 +58,12 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
         onDragEnter={handleDragEnter}
         hover
         selected={row.getIsSelected()}
-        ref={rowRef}
+        ref={(node) => {
+          rowRef.current = node;
+          if (virtualRow?.measureRef) {
+            virtualRow.measureRef = node;
+          }
+        }}
         {...tableRowProps}
         sx={(theme) => ({
           backgroundColor: lighten(theme.palette.background.default, 0.06),

package/src/column.utils.ts

@@ -25,7 +25,7 @@ export const defaultDisplayColumnDefOptions = {
   enableSorting: false,
 } as Partial<MRT_ColumnDef>;
 
-const getColumnId = <TData extends Record<string, any> = {}>(
+export const getColumnId = <TData extends Record<string, any> = {}>(
   columnDef: MRT_ColumnDef<TData>,
 ): string =>
   columnDef.id ?? columnDef.accessorKey?.toString?.() ?? columnDef.header;

package/src/head/MRT_TableHeadCellFilterContainer.tsx

@@ -14,13 +14,14 @@ export const MRT_TableHeadCellFilterContainer: FC<Props> = ({
   table,
 }) => {
   const { getState } = table;
-  const { columnFilterFns, showColumnFilters } = getState();
+  const { showColumnFilters } = getState();
   const { column } = header;
+  const { columnDef } = column;
 
   return (
     <Collapse in={showColumnFilters} mountOnEnter unmountOnExit>
       {['between', 'betweenInclusive', 'inNumberRange'].includes(
-        columnFilterFns[column.id],
+        columnDef._filterFn,
       ) ? (
         <MRT_FilterRangeFields header={header} table={table} />
       ) : (

package/src/inputs/MRT_FilterTextField.tsx

@@ -33,9 +33,8 @@ export const MRT_FilterTextField: FC<Props> = ({
   table,
 }) => {
   const {
-    getState,
     options: {
-      enableColumnFilterChangeMode,
+      enableColumnFilterModes,
       columnFilterModeOptions,
       icons: { FilterListIcon, CloseIcon },
       localization,
@@ -46,7 +45,6 @@ export const MRT_FilterTextField: FC<Props> = ({
   } = table;
   const { column } = header;
   const { columnDef } = column;
-  const { columnFilterFns } = getState();
 
   const mTableHeadCellFilterTextFieldProps =
     muiTableHeadCellFilterTextFieldProps instanceof Function
@@ -78,8 +76,7 @@ export const MRT_FilterTextField: FC<Props> = ({
   const isTextboxFilter =
     columnDef.filterVariant === 'text' ||
     (!isSelectFilter && !isMultiSelectFilter);
-
-  const currentFilterOption = columnFilterFns?.[header.id];
+  const currentFilterOption = columnDef._filterFn;
   const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
     ? //@ts-ignore
       localization[
@@ -99,8 +96,8 @@ export const MRT_FilterTextField: FC<Props> = ({
   const allowedColumnFilterOptions =
     columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
   const showChangeModeButton =
-    enableColumnFilterChangeMode &&
-    columnDef.enableColumnFilterChangeMode !== false &&
+    enableColumnFilterModes &&
+    columnDef.enableColumnFilterModes !== false &&
     !rangeFilterIndex &&
     (allowedColumnFilterOptions === undefined ||
       !!allowedColumnFilterOptions?.length);
@@ -299,7 +296,7 @@ export const MRT_FilterTextField: FC<Props> = ({
         }}
         sx={(theme) => ({
           p: 0,
-          minWidth: !filterChipLabel ? '150px' : 'auto',
+          minWidth: !filterChipLabel ? '120px' : 'auto',
           width: '100%',
           '&	.MuiSelect-icon': {
             mr: '1.5rem',

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -23,7 +23,7 @@ export const MRT_GlobalFilterTextField = <
     getState,
     setGlobalFilter,
     options: {
-      enableGlobalFilterChangeMode,
+      enableGlobalFilterModes,
       icons: { SearchIcon, CloseIcon },
       localization,
       muiSearchTextFieldProps,
@@ -69,7 +69,7 @@ export const MRT_GlobalFilterTextField = <
         value={searchValue ?? ''}
         variant="standard"
         InputProps={{
-          startAdornment: enableGlobalFilterChangeMode ? (
+          startAdornment: enableGlobalFilterModes ? (
             <InputAdornment position="start">
               <Tooltip arrow title={localization.changeSearchMode}>
                 <IconButton

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -34,7 +34,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     toggleAllColumnsVisible,
     setColumnOrder,
     options: {
-      enableColumnFilterChangeMode,
+      enableColumnFilterModes,
       enableColumnFilters,
       enableColumnResizing,
       enableGrouping,
@@ -138,8 +138,8 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
 
   const showFilterModeSubMenu =
-    enableColumnFilterChangeMode &&
-    columnDef.enableColumnFilterChangeMode !== false &&
+    enableColumnFilterModes &&
+    columnDef.enableColumnFilterModes !== false &&
     !isSelectFilter &&
     (allowedColumnFilterOptions === undefined ||
       !!allowedColumnFilterOptions?.length);

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -1,16 +1,16 @@
 import React, { useMemo } from 'react';
 import { Box, Menu, MenuItem } from '@mui/material';
-import type { MRT_FilterOption, MRT_Header, MRT_TableInstance } from '..';
+import type {
+  MRT_FilterOption,
+  MRT_Header,
+  MRT_InternalFilterOption,
+  MRT_TableInstance,
+} from '..';
 import { MRT_Localization } from '../localization';
 
-export const internalFilterOptions = (
+export const mrtFilterOptions = (
   localization: MRT_Localization,
-): {
-  option: string;
-  symbol: string;
-  label: string;
-  divider: boolean;
-}[] => [
+): MRT_InternalFilterOption[] => [
   {
     option: 'fuzzy',
     symbol: '≈',
@@ -118,31 +118,33 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
       enabledGlobalFilterOptions,
       columnFilterModeOptions,
       localization,
+      renderColumnFilterModeMenuItems,
+      renderGlobalFilterModeMenuItems,
     },
     setColumnFilterFns,
     setGlobalFilterFn,
   } = table;
-  const { columnFilterFns, globalFilterFn, density } = getState();
+  const { globalFilterFn, density } = getState();
   const { column } = header ?? {};
   const { columnDef } = column ?? {};
 
   const allowedColumnFilterOptions =
     columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
 
-  const filterOptions = useMemo(
+  const internalFilterOptions = useMemo(
     () =>
-      internalFilterOptions(localization).filter((filterOption) =>
+      mrtFilterOptions(localization).filter((filterOption) =>
         columnDef
           ? allowedColumnFilterOptions === undefined ||
             allowedColumnFilterOptions?.includes(filterOption.option)
           : (!enabledGlobalFilterOptions ||
               enabledGlobalFilterOptions.includes(filterOption.option)) &&
-            ['fuzzy', 'contains'].includes(filterOption.option),
+            ['fuzzy', 'contains', 'startsWith'].includes(filterOption.option),
       ),
     [],
   );
 
-  const handleSelectFilterType = (option: MRT_FilterOption) => {
+  const handleSelectFilterMode = (option: MRT_FilterOption) => {
     if (header && column) {
       setColumnFilterFns((prev: { [key: string]: any }) => ({
         ...prev,
@@ -162,7 +164,8 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
     onSelect?.();
   };
 
-  const filterOption = !!header ? columnFilterFns[header.id] : globalFilterFn;
+  const filterOption =
+    !!header && columnDef ? columnDef._filterFn : globalFilterFn;
 
   return (
     <Menu
@@ -174,25 +177,39 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
         dense: density === 'compact',
       }}
     >
-      {filterOptions.map(({ option, label, divider, symbol }, index) => (
-        <MenuItem
-          divider={divider}
-          key={index}
-          onClick={() => handleSelectFilterType(option as MRT_FilterOption)}
-          selected={option === filterOption}
-          sx={{
-            py: '6px',
-            my: 0,
-            alignItems: 'center',
-            display: 'flex',
-            gap: '2ch',
-          }}
-          value={option}
-        >
-          <Box sx={{ fontSize: '1.25rem', width: '2ch' }}>{symbol}</Box>
-          {label}
-        </MenuItem>
-      ))}
+      {(header && column
+        ? renderColumnFilterModeMenuItems?.({
+            column: column as any,
+            internalFilterOptions,
+            onSelectFilterMode: handleSelectFilterMode,
+            table,
+          })
+        : renderGlobalFilterModeMenuItems?.({
+            internalFilterOptions,
+            onSelectFilterMode: handleSelectFilterMode,
+            table,
+          })) ??
+        internalFilterOptions.map(
+          ({ option, label, divider, symbol }, index) => (
+            <MenuItem
+              divider={divider}
+              key={index}
+              onClick={() => handleSelectFilterMode(option as MRT_FilterOption)}
+              selected={option === filterOption}
+              sx={{
+                alignItems: 'center',
+                display: 'flex',
+                gap: '2ch',
+                my: 0,
+                py: '6px',
+              }}
+              value={option}
+            >
+              <Box sx={{ fontSize: '1.25rem', width: '2ch' }}>{symbol}</Box>
+              {label}
+            </MenuItem>
+          ),
+        )}
     </Menu>
   );
 };