material-react-table 0.7.2 → 0.7.5

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/table/MRT_TableRoot.tsx

@@ -13,8 +13,16 @@ import {
   useTableInstance,
   getCoreRowModelSync,
   ColumnDef,
+  FilterFn,
 } from '@tanstack/react-table';
-import { MRT_ColumnDef, MRT_FilterType, MRT_Row, MRT_TableInstance } from '..';
+import {
+  MRT_Cell,
+  MRT_ColumnDef,
+  MRT_FilterFn,
+  MRT_Row,
+  MRT_TableInstance,
+  MRT_TableState,
+} from '..';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
 import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
 import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMenuButton';
@@ -28,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> = {}>(
@@ -41,53 +49,83 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     [props.idPrefix],
   );
 
-  const [currentEditingRow, setCurrentEditingRow] = useState<MRT_Row | null>(
-    null,
+  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>(initialState?.currentEditingCell ?? null);
+  const [currentEditingRow, setCurrentEditingRow] = useState<MRT_Row<D> | 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>, []);
 
   const displayColumns = useMemo(
     () =>
       [
-        (props.enableRowActions || props.enableEditing) &&
+        (props.enableRowActions ||
+          (props.enableEditing && props.editingMode === 'row')) &&
           createDisplayColumn(table, {
             Cell: ({ cell }) => (
               <MRT_ToggleRowActionMenuButton
@@ -146,6 +184,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           }),
       ].filter(Boolean),
     [
+      props.editingMode,
       props.enableEditing,
       props.enableExpandAll,
       props.enableExpanded,
@@ -165,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(
@@ -193,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(),
@@ -202,17 +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
@@ -222,32 +264,60 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         ...props.state,
       },
     }),
+    //@ts-ignore
+    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>);