material-react-table 0.7.3 → 0.7.6

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.3",
+  "version": "0.7.6",
   "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,9 +59,9 @@
     "@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",
+    "@mui/material": "^5.6.3",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.4.22",
     "@storybook/addon-actions": "^6.4.22",
@@ -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.48",
     "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,17 +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>>;
@@ -119,8 +120,8 @@ export type MRT_TableState<D extends Record<string, any> = {}> = Omit<
 > & {
   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;
@@ -130,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;
@@ -176,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;
@@ -322,7 +319,13 @@ 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> & {
@@ -334,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;
@@ -343,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;
@@ -694,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';
@@ -755,6 +760,7 @@ 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,
@@ -778,6 +784,7 @@ export default <D extends Record<string, any> = {}>({
   enableToolbarTop = true,
   icons,
   localization,
+  persistentStateMode = 'sessionStorage',
   positionActionsColumn = 'first',
   positionPagination = 'bottom',
   positionToolbarActions = 'top',
@@ -786,6 +793,7 @@ export default <D extends Record<string, any> = {}>({
 }: MaterialReactTableProps<D>) => (
   <MRT_TableRoot
     autoResetExpanded={autoResetExpanded}
+    autoResetSorting={autoResetSorting}
     columnResizeMode={columnResizeMode}
     editingMode={editingMode}
     enableColumnActions={enableColumnActions}
@@ -809,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/buttons/MRT_ColumnPinningButtons.tsx

@@ -0,0 +1,69 @@
+import React, { FC } from 'react';
+import { Box, IconButton, Tooltip } from '@mui/material';
+import type { MRT_Column, MRT_TableInstance } from '..';
+
+interface Props {
+  column: MRT_Column;
+  tableInstance: MRT_TableInstance;
+}
+
+export const MRT_ColumnPinningButtons: FC<Props> = ({
+  column,
+  tableInstance,
+}) => {
+  const {
+    getState,
+    options: {
+      icons: { PushPinIcon },
+      localization,
+    },
+  } = tableInstance;
+
+  const { columnOrder } = getState();
+
+  const handlePinColumn = (pinDirection: 'left' | 'right' | false) => {
+    column.pin(pinDirection);
+    if (column.columnDefType === 'display') {
+      tableInstance.setColumnOrder([column.id, ...columnOrder]);
+    }
+  };
+
+  const pinned = column.getIsPinned();
+
+  return (
+    <Box sx={{ mr: '8px' }}>
+      <Tooltip
+        arrow
+        title={pinned === 'left' ? localization.unpin : localization.pinToLeft}
+      >
+        <IconButton
+          onClick={() => handlePinColumn(pinned === 'left' ? false : 'left')}
+          size="small"
+        >
+          <PushPinIcon
+            style={{
+              transform: pinned === 'left' ? 'rotate(0)' : 'rotate(90deg)',
+            }}
+          />
+        </IconButton>
+      </Tooltip>
+      <Tooltip
+        arrow
+        title={
+          pinned === 'right' ? localization.unpin : localization.pinToRight
+        }
+      >
+        <IconButton
+          onClick={() => handlePinColumn(pinned === 'right' ? false : 'right')}
+          size="small"
+        >
+          <PushPinIcon
+            style={{
+              transform: pinned === 'right' ? 'rotate(0)' : 'rotate(-90deg)',
+            }}
+          />
+        </IconButton>
+      </Tooltip>
+    </Box>
+  );
+};

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_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/localization.ts

@@ -56,6 +56,7 @@ export interface MRT_Localization {
   toggleSelectRow: string;
   ungroupByColumn: string;
   unpin: string;
+  unpinAll: string;
   unsorted: string;
 }
 
@@ -118,5 +119,6 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   toggleSelectRow: 'Toggle select row',
   ungroupByColumn: 'Ungroup by {column}',
   unpin: 'Unpin',
+  unpinAll: 'Unpin all',
   unsorted: 'Unsorted',
 };

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}