material-react-table 0.7.3 → 0.7.6

package/src/menus/{MRT_FilterTypeMenu.tsx → MRT_FilterOptionMenu.tsx}

@@ -1,7 +1,7 @@
 import React, { FC, useMemo } from 'react';
 import { Menu, MenuItem } from '@mui/material';
-import type { MRT_FilterType, MRT_Header, MRT_TableInstance } from '..';
-import { MRT_FILTER_TYPE } from '../enums';
+import type { MRT_FilterFn, MRT_Header, MRT_TableInstance } from '..';
+import { MRT_FILTER_OPTION } from '../enums';
 import {
   bestMatch,
   bestMatchFirst,
@@ -30,7 +30,7 @@ interface Props {
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_FilterTypeMenu: FC<Props> = ({
+export const MRT_FilterOptionMenu: FC<Props> = ({
   anchorEl,
   header,
   onSelect,
@@ -39,16 +39,16 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
 }) => {
   const {
     getState,
-    options: { enabledGlobalFilterTypes, localization },
-    setCurrentFilterTypes,
-    setCurrentGlobalFilterType,
+    options: { enabledGlobalFilterOptions, localization },
+    setCurrentFilterFns,
+    setCurrentGlobalFilterFn,
   } = tableInstance;
 
-  const { isDensePadding, currentFilterTypes, currentGlobalFilterType } =
+  const { isDensePadding, currentFilterFns, currentGlobalFilterFn } =
     getState();
 
-  const filterTypes: {
-    type: MRT_FILTER_TYPE;
+  const filterOptions: {
+    type: MRT_FILTER_OPTION;
     label: string;
     divider: boolean;
     fn: Function;
@@ -56,104 +56,106 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
     () =>
       [
         {
-          type: MRT_FILTER_TYPE.BEST_MATCH_FIRST,
+          type: MRT_FILTER_OPTION.BEST_MATCH_FIRST,
           label: localization.filterBestMatchFirst,
           divider: false,
           fn: bestMatchFirst,
         },
         {
-          type: MRT_FILTER_TYPE.BEST_MATCH,
+          type: MRT_FILTER_OPTION.BEST_MATCH,
           label: localization.filterBestMatch,
           divider: !!header,
           fn: bestMatch,
         },
         {
-          type: MRT_FILTER_TYPE.CONTAINS,
+          type: MRT_FILTER_OPTION.CONTAINS,
           label: localization.filterContains,
           divider: false,
           fn: contains,
         },
         {
-          type: MRT_FILTER_TYPE.STARTS_WITH,
+          type: MRT_FILTER_OPTION.STARTS_WITH,
           label: localization.filterStartsWith,
           divider: false,
           fn: startsWith,
         },
         {
-          type: MRT_FILTER_TYPE.ENDS_WITH,
+          type: MRT_FILTER_OPTION.ENDS_WITH,
           label: localization.filterEndsWith,
           divider: true,
           fn: endsWith,
         },
         {
-          type: MRT_FILTER_TYPE.EQUALS,
+          type: MRT_FILTER_OPTION.EQUALS,
           label: localization.filterEquals,
           divider: false,
           fn: equals,
         },
         {
-          type: MRT_FILTER_TYPE.NOT_EQUALS,
+          type: MRT_FILTER_OPTION.NOT_EQUALS,
           label: localization.filterNotEquals,
           divider: true,
           fn: notEquals,
         },
         {
-          type: MRT_FILTER_TYPE.GREATER_THAN,
+          type: MRT_FILTER_OPTION.GREATER_THAN,
           label: localization.filterGreaterThan,
           divider: false,
           fn: greaterThan,
         },
         {
-          type: MRT_FILTER_TYPE.LESS_THAN,
+          type: MRT_FILTER_OPTION.LESS_THAN,
           label: localization.filterLessThan,
           divider: true,
           fn: lessThan,
         },
         {
-          type: MRT_FILTER_TYPE.EMPTY,
+          type: MRT_FILTER_OPTION.EMPTY,
           label: localization.filterEmpty,
           divider: false,
           fn: empty,
         },
         {
-          type: MRT_FILTER_TYPE.NOT_EMPTY,
+          type: MRT_FILTER_OPTION.NOT_EMPTY,
           label: localization.filterNotEmpty,
           divider: false,
           fn: notEmpty,
         },
       ].filter((filterType) =>
         header
-          ? !header.column.enabledColumnFilterTypes ||
-            header.column.enabledColumnFilterTypes.includes(filterType.type)
-          : (!enabledGlobalFilterTypes ||
-              enabledGlobalFilterTypes.includes(filterType.type)) &&
+          ? !header.column.enabledColumnFilterOptions ||
+            header.column.enabledColumnFilterOptions.includes(filterType.type)
+          : (!enabledGlobalFilterOptions ||
+              enabledGlobalFilterOptions.includes(filterType.type)) &&
             [
-              MRT_FILTER_TYPE.BEST_MATCH_FIRST,
-              MRT_FILTER_TYPE.BEST_MATCH,
+              MRT_FILTER_OPTION.BEST_MATCH_FIRST,
+              MRT_FILTER_OPTION.BEST_MATCH,
             ].includes(filterType.type),
       ),
     [],
   );
 
-  const handleSelectFilterType = (value: MRT_FILTER_TYPE) => {
+  const handleSelectFilterType = (value: MRT_FILTER_OPTION) => {
     if (header) {
-      setCurrentFilterTypes((prev: { [key: string]: MRT_FilterType }) => ({
+      setCurrentFilterFns((prev: { [key: string]: MRT_FilterFn }) => ({
         ...prev,
         [header.id]: value,
       }));
-      if ([MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(value)) {
+      if (
+        [MRT_FILTER_OPTION.EMPTY, MRT_FILTER_OPTION.NOT_EMPTY].includes(value)
+      ) {
         header.column.setColumnFilterValue(' ');
       }
     } else {
-      setCurrentGlobalFilterType(value);
+      setCurrentGlobalFilterFn(value);
     }
     setAnchorEl(null);
     onSelect?.();
   };
 
   const filterType = !!header
-    ? currentFilterTypes[header.id]
-    : currentGlobalFilterType;
+    ? currentFilterFns[header.id]
+    : currentGlobalFilterFn;
 
   return (
     <Menu
@@ -165,7 +167,7 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
         dense: isDensePadding,
       }}
     >
-      {filterTypes.map(({ type, label, divider, fn }, index) => (
+      {filterOptions.map(({ type, label, divider, fn }, index) => (
         <MenuItem
           divider={divider}
           key={index}

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useMemo } from 'react';
 import { Button, Menu, Divider, Box } from '@mui/material';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
-import { MRT_TableInstance } from '..';
+import { MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {
   anchorEl: HTMLElement | null;
@@ -24,7 +24,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
     getState,
     toggleAllColumnsVisible,
     getAllLeafColumns,
-    options: { localization },
+    options: { localization, enablePinning },
   } = tableInstance;
 
   const { isDensePadding } = getState();
@@ -40,14 +40,16 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
     [getAllColumns()],
   );
 
-  const allDataColumns = useMemo(() => {
+  const allDataColumns: (MRT_Column | null)[] = useMemo(() => {
     const dataColumns = getAllColumns().filter(
       (col) => col.columnDefType !== 'display',
     );
     return getIsSomeColumnsPinned()
       ? [
           ...dataColumns.filter((c) => c.getIsPinned() === 'left'),
+          null,
           ...dataColumns.filter((c) => c.getIsPinned() === false),
+          null,
           ...dataColumns.filter((c) => c.getIsPinned() === 'right'),
         ]
       : dataColumns;
@@ -78,6 +80,14 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
             {localization.hideAll}
           </Button>
         )}
+        {!isSubMenu && enablePinning && (
+          <Button
+            disabled={!getIsSomeColumnsPinned()}
+            onClick={() => tableInstance.setColumnPinning({})}
+          >
+            {localization.unpinAll}
+          </Button>
+        )}
         <Button
           disabled={getIsAllColumnsVisible()}
           onClick={() => toggleAllColumnsVisible(true)}
@@ -95,14 +105,18 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
         />
       ))}
       <Divider />
-      {allDataColumns.map((column, index) => (
-        <MRT_ShowHideColumnsMenuItems
-          column={column}
-          isSubMenu={isSubMenu}
-          key={`${index}-${column.id}`}
-          tableInstance={tableInstance}
-        />
-      ))}
+      {allDataColumns.map((column, index) =>
+        column ? (
+          <MRT_ShowHideColumnsMenuItems
+            column={column}
+            isSubMenu={isSubMenu}
+            key={`${index}-${column.id}`}
+            tableInstance={tableInstance}
+          />
+        ) : (
+          <Divider key={`${index}-divider`} />
+        ),
+      )}
     </Menu>
   );
 };

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { FormControlLabel, MenuItem, Switch } from '@mui/material';
 import type { MRT_Column, MRT_TableInstance } from '..';
-import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
+import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
 
 interface Props {
   column: MRT_Column;
@@ -16,7 +16,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
 }) => {
   const {
     getState,
-    options: { onToggleColumnVisibility },
+    options: { onToggleColumnVisibility, enablePinning },
   } = tableInstance;
 
   const { columnVisibility } = getState();
@@ -44,8 +44,20 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
   return (
     <>
       <MenuItem
-        sx={{ ...commonMenuItemStyles, pl: `${(column.depth + 0.5) * 2}rem` }}
+        sx={{
+          alignItems: 'center',
+          justifyContent: 'flex-start',
+          my: 0,
+          pl: `${(column.depth + 0.5) * 2}rem`,
+          py: '6px',
+        }}
       >
+        {!isSubMenu && enablePinning && (
+          <MRT_ColumnPinningButtons
+            column={column}
+            tableInstance={tableInstance}
+          />
+        )}
         <FormControlLabel
           componentsProps={{ typography: { sx: { marginBottom: 0 } } }}
           checked={switchChecked}

package/src/table/MRT_Table.tsx

@@ -14,10 +14,10 @@ export const MRT_Table: FC<Props> = ({ pinned, tableInstance }) => {
   const {
     getTableProps,
     options: {
-      muiTableProps,
-      enableTableHead,
-      enableTableFooter,
       enableStickyHeader,
+      enableTableFooter,
+      enableTableHead,
+      muiTableProps,
     },
   } = tableInstance;
 

package/src/table/MRT_TableContainer.tsx

@@ -30,7 +30,6 @@ interface Props {
 export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
   const {
     getCenterTableWidth,
-    getIsSomeColumnsPinned,
     getLeftTableWidth,
     getRightTableWidth,
     getState,
@@ -42,7 +41,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
     },
   } = tableInstance;
 
-  const { isFullScreen, columnPinning } = getState();
+  const { isFullScreen } = getState();
 
   const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
 
@@ -67,6 +66,9 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
     setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
   });
 
+  const isSomeColumnsPinnedLeft = !!tableInstance.getLeftFlatHeaders().length;
+  const isSomeColumnsPinnedRight = !!tableInstance.getRightFlatHeaders().length;
+
   return (
     <TableContainer
       {...tableContainerProps}
@@ -84,7 +86,8 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
           : undefined,
       }}
     >
-      {enablePinning && getIsSomeColumnsPinned() ? (
+      {(enablePinning && isSomeColumnsPinnedLeft) ||
+      isSomeColumnsPinnedRight ? (
         <Box
           sx={{
             display: 'grid',
@@ -96,13 +99,20 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
               commonBoxStyles({
                 pinned: 'left',
                 theme,
-                visible: !!columnPinning.left?.length,
+                visible: isSomeColumnsPinnedLeft,
               })
             }
           >
             <MRT_Table pinned="left" tableInstance={tableInstance} />
           </Box>
-          <Box sx={(theme: Theme) => commonBoxStyles({ theme })}>
+          <Box
+            sx={(theme: Theme) =>
+              commonBoxStyles({
+                theme,
+                visible: !!tableInstance.getCenterFlatHeaders().length,
+              })
+            }
+          >
             <MRT_Table pinned="center" tableInstance={tableInstance} />
           </Box>
           <Box
@@ -110,7 +120,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
               commonBoxStyles({
                 pinned: 'right',
                 theme,
-                visible: !!columnPinning.right?.length,
+                visible: isSomeColumnsPinnedRight,
               })
             }
           >

package/src/table/MRT_TableRoot.tsx

@@ -1,25 +1,27 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import {
+  ColumnDef,
+  FilterFn,
   PaginationState,
   Table,
   createTable,
   functionalUpdate,
   getColumnFilteredRowModelSync,
+  getCoreRowModelSync,
   getExpandedRowModel,
   getGlobalFilteredRowModelSync,
   getGroupedRowModelSync,
   getPaginationRowModel,
   getSortedRowModelSync,
   useTableInstance,
-  getCoreRowModelSync,
-  ColumnDef,
 } from '@tanstack/react-table';
 import {
   MRT_Cell,
   MRT_ColumnDef,
-  MRT_FilterType,
+  MRT_FilterFn,
   MRT_Row,
   MRT_TableInstance,
+  MRT_TableState,
 } from '..';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
 import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
@@ -34,7 +36,7 @@ import {
   getAllLeafColumnDefs,
 } from '../utils';
 import { defaultFilterFNs } from '../filtersFNs';
-import { MRT_FILTER_TYPE } from '../enums';
+import { MRT_FILTER_OPTION } from '../enums';
 import { Box, Dialog, Grow } from '@mui/material';
 
 export const MRT_TableRoot = <D extends Record<string, any> = {}>(
@@ -47,50 +49,75 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     [props.idPrefix],
   );
 
+  const initialState: Partial<MRT_TableState<D>> = useMemo(() => {
+    if (!props.enablePersistentState || !props.idPrefix) {
+      return props.initialState;
+    }
+    if (typeof window === 'undefined') {
+      if (process.env.NODE_ENV !== 'production') {
+        console.error(
+          'The MRT Persistent Table State feature is not supported if using SSR, but you can wrap your <MaterialReactTable /> in a MUI <NoSsr> tags to let it work',
+        );
+      }
+      return props.initialState;
+    }
+    const storedState =
+      props.persistentStateMode === 'localStorage'
+        ? localStorage.getItem(`mrt-${idPrefix}-table-state`)
+        : props.persistentStateMode === 'sessionStorage'
+        ? sessionStorage.getItem(`mrt-${idPrefix}-table-state`)
+        : '{}';
+    if (storedState) {
+      const parsedState = JSON.parse(storedState);
+      if (parsedState) {
+        return { ...props.initialState, ...parsedState };
+      }
+    }
+    return props.initialState;
+  }, []);
+
   const [currentEditingCell, setCurrentEditingCell] =
-    useState<MRT_Cell<D> | null>(
-      props.initialState?.currentEditingCell ?? null,
-    );
+    useState<MRT_Cell<D> | null>(initialState?.currentEditingCell ?? null);
   const [currentEditingRow, setCurrentEditingRow] = useState<MRT_Row<D> | null>(
-    props.initialState?.currentEditingRow ?? null,
+    initialState?.currentEditingRow ?? null,
   );
   const [isDensePadding, setIsDensePadding] = useState(
-    props.initialState?.isDensePadding ?? false,
+    initialState?.isDensePadding ?? false,
   );
   const [isFullScreen, setIsFullScreen] = useState(
-    props.initialState?.isFullScreen ?? false,
+    initialState?.isFullScreen ?? false,
   );
   const [showFilters, setShowFilters] = useState(
-    props.initialState?.showFilters ?? false,
+    initialState?.showFilters ?? false,
   );
   const [showGlobalFilter, setShowGlobalFilter] = useState(
-    props.initialState?.showGlobalFilter ?? false,
+    initialState?.showGlobalFilter ?? false,
   );
   const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: props.initialState?.pagination?.pageIndex ?? 0,
-    pageSize: props.initialState?.pagination?.pageSize ?? 10,
-    pageCount: props.initialState?.pagination?.pageCount ?? -1,
+    pageIndex: initialState?.pagination?.pageIndex ?? 0,
+    pageSize: initialState?.pagination?.pageSize ?? 10,
+    pageCount: initialState?.pagination?.pageCount ?? -1,
   });
 
-  const [currentFilterTypes, setCurrentFilterTypes] = useState<{
-    [key: string]: MRT_FilterType;
+  const [currentFilterFns, setCurrentFilterFns] = useState<{
+    [key: string]: MRT_FilterFn;
   }>(() =>
     Object.assign(
       {},
       ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef[]).map((c) => ({
         [c.id as string]:
-          c.filter ??
-          props?.initialState?.columnFilters?.find((cf) => cf.id === c.id) ??
+          c.filterFn ??
+          initialState?.currentFilterFns?.[c.id] ??
           (!!c.filterSelectOptions?.length
-            ? MRT_FILTER_TYPE.EQUALS
-            : MRT_FILTER_TYPE.BEST_MATCH),
+            ? MRT_FILTER_OPTION.EQUALS
+            : MRT_FILTER_OPTION.BEST_MATCH),
       })),
     ),
   );
 
-  const [currentGlobalFilterType, setCurrentGlobalFilterType] = useState(
-    props.globalFilterType ?? MRT_FILTER_TYPE.BEST_MATCH_FIRST,
-  );
+  const [currentGlobalFilterFn, setCurrentGlobalFilterFn] = useState<
+    MRT_FILTER_OPTION | FilterFn<D> | string | number | symbol
+  >(props.globalFilterFn ?? MRT_FILTER_OPTION.BEST_MATCH_FIRST);
 
   const table = useMemo(() => createTable() as unknown as Table<D>, []);
 
@@ -177,11 +204,11 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         ...displayColumns,
         ...props.columns.map((column) =>
           column.columns
-            ? createGroup(table, column, currentFilterTypes)
-            : createDataColumn(table, column, currentFilterTypes),
+            ? createGroup(table, column, currentFilterFns)
+            : createDataColumn(table, column, currentFilterFns),
         ),
       ] as ColumnDef<D>[]),
-    [table, props.columns, currentFilterTypes],
+    [table, props.columns, currentFilterFns],
   );
 
   const data: D['Row'][] = useMemo(
@@ -205,7 +232,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   const tableInstance: MRT_TableInstance<{}> = {
     ...useTableInstance(table, {
       //@ts-ignore
-      filterTypes: defaultFilterFNs,
+      filterFns: defaultFilterFNs,
       getColumnFilteredRowModel: getColumnFilteredRowModelSync(),
       getCoreRowModel: getCoreRowModelSync(),
       getExpandedRowModel: getExpandedRowModel(),
@@ -214,18 +241,20 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
       getPaginationRowModel: getPaginationRowModel(),
       getSortedRowModel: getSortedRowModelSync(),
       getSubRows: (originalRow: D) => originalRow.subRows,
-      globalFilterType: currentGlobalFilterType,
-      idPrefix,
+      globalFilterFn: currentGlobalFilterFn,
       onPaginationChange: (updater: any) =>
         setPagination((old) => functionalUpdate(updater, old)),
       ...props,
       columns,
       data,
+      idPrefix,
+      //@ts-ignore
+      initialState,
       state: {
         currentEditingCell,
         currentEditingRow,
-        currentFilterTypes,
-        currentGlobalFilterType,
+        currentFilterFns,
+        currentGlobalFilterFn,
         isDensePadding,
         isFullScreen,
         //@ts-ignore
@@ -239,31 +268,56 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     setCurrentEditingCell,
     //@ts-ignore
     setCurrentEditingRow,
-    setCurrentFilterTypes,
-    setCurrentGlobalFilterType,
+    setCurrentFilterFns,
+    //@ts-ignore
+    setCurrentGlobalFilterFn,
     setIsDensePadding,
     setIsFullScreen,
     setShowFilters,
     setShowGlobalFilter,
   };
 
+  useEffect(() => {
+    if (typeof window === 'undefined' || !props.enablePersistentState) {
+      return;
+    }
+    if (!props.idPrefix && process.env.NODE_ENV !== 'production') {
+      console.warn(
+        'a unique idPrefix prop is required for persistent table state to work',
+      );
+      return;
+    }
+    const itemArgs: [string, string] = [
+      `mrt-${idPrefix}-table-state`,
+      JSON.stringify(tableInstance.getState()),
+    ];
+    if (props.persistentStateMode === 'localStorage') {
+      localStorage.setItem(...itemArgs);
+    } else if (props.persistentStateMode === 'sessionStorage') {
+      sessionStorage.setItem(...itemArgs);
+    }
+  }, [
+    props.enablePersistentState,
+    props.idPrefix,
+    props.persistentStateMode,
+    tableInstance,
+  ]);
+
   return (
     <>
       <Dialog
-        TransitionComponent={Grow}
         PaperComponent={Box}
+        TransitionComponent={Grow}
         disablePortal
         fullScreen
         keepMounted={false}
-        onClose={() => tableInstance.setIsFullScreen(false)}
-        open={tableInstance.getState().isFullScreen}
+        onClose={() => setIsFullScreen(false)}
+        open={isFullScreen}
         transitionDuration={400}
       >
         <MRT_TablePaper tableInstance={tableInstance} />
       </Dialog>
-      {!tableInstance.getState().isFullScreen && (
-        <MRT_TablePaper tableInstance={tableInstance} />
-      )}
+      {!isFullScreen && <MRT_TablePaper tableInstance={tableInstance} />}
     </>
   );
 };

package/src/utils.ts

@@ -1,6 +1,6 @@
 import { ColumnDef, Table } from '@tanstack/react-table';
-import { MRT_ColumnDef, MRT_FilterType } from '.';
-import { MRT_FILTER_TYPE } from './enums';
+import { MRT_ColumnDef, MRT_FilterFn } from '.';
+import { MRT_FILTER_OPTION } from './enums';
 import { defaultFilterFNs } from './filtersFNs';
 
 export const getAllLeafColumnDefs = (
@@ -24,31 +24,31 @@ export const getAllLeafColumnDefs = (
 export const createGroup = <D extends Record<string, any> = {}>(
   table: Table<D>,
   column: MRT_ColumnDef<D>,
-  currentFilterTypes: { [key: string]: MRT_FilterType },
+  currentFilterFns: { [key: string]: MRT_FilterFn },
 ): ColumnDef<D> =>
   table.createGroup({
     ...column,
     columns: column?.columns?.map?.((col) =>
       col.columns
-        ? createGroup<D>(table, col, currentFilterTypes)
-        : createDataColumn(table, col, currentFilterTypes),
+        ? createGroup<D>(table, col, currentFilterFns)
+        : createDataColumn(table, col, currentFilterFns),
     ),
   } as any);
 
 export const createDataColumn = <D extends Record<string, any> = {}>(
   table: Table<D>,
   column: MRT_ColumnDef<D>,
-  currentFilterTypes: { [key: string]: MRT_FilterType },
+  currentFilterFns: { [key: string]: MRT_FilterFn },
 ): ColumnDef<D> => // @ts-ignore
   table.createDataColumn(column.id, {
     filterFn:
-      currentFilterTypes[column.id] instanceof Function
-        ? currentFilterTypes[column.id]
-        : defaultFilterFNs[currentFilterTypes[column.id] as MRT_FILTER_TYPE],
+      currentFilterFns[column.id] instanceof Function
+        ? currentFilterFns[column.id]
+        : defaultFilterFNs[currentFilterFns[column.id] as MRT_FILTER_OPTION],
     ...column,
   }) as any;
 
 export const createDisplayColumn = <D extends Record<string, any> = {}>(
   table: Table<D>,
   column: Omit<MRT_ColumnDef<D>, 'header'> & { header?: string },
-): ColumnDef<D> => table.createDisplayColumn(column);
+): ColumnDef<D> => table.createDisplayColumn(column as ColumnDef<D>);