material-react-table 0.7.1 → 0.7.4

package/src/table/MRT_TableRoot.tsx

@@ -14,7 +14,14 @@ import {
   getCoreRowModelSync,
   ColumnDef,
 } from '@tanstack/react-table';
-import { MRT_ColumnDef, MRT_FilterType, MRT_Row, MRT_TableInstance } from '..';
+import {
+  MRT_Cell,
+  MRT_ColumnDef,
+  MRT_FilterType,
+  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';
@@ -41,25 +48,54 @@ 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<{
@@ -70,7 +106,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
       ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef[]).map((c) => ({
         [c.id as string]:
           c.filter ??
-          props?.initialState?.columnFilters?.find((cf) => cf.id === c.id) ??
+          initialState?.currentFilterTypes?.[c.id] ??
           (!!c.filterSelectOptions?.length
             ? MRT_FILTER_TYPE.EQUALS
             : MRT_FILTER_TYPE.BEST_MATCH),
@@ -82,15 +118,13 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     props.globalFilterType ?? MRT_FILTER_TYPE.BEST_MATCH_FIRST,
   );
 
-  const table = useMemo(
-    () => createTable<{ Row: D }>(),
-    [],
-  ) as unknown as Table<D>;
+  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
@@ -149,6 +183,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           }),
       ].filter(Boolean),
     [
+      props.editingMode,
       props.enableEditing,
       props.enableExpandAll,
       props.enableExpanded,
@@ -206,13 +241,16 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
       getSortedRowModel: getSortedRowModelSync(),
       getSubRows: (originalRow: D) => originalRow.subRows,
       globalFilterType: currentGlobalFilterType,
-      idPrefix,
       onPaginationChange: (updater: any) =>
         setPagination((old) => functionalUpdate(updater, old)),
       ...props,
       columns,
       data,
+      idPrefix,
+      //@ts-ignore
+      initialState,
       state: {
+        currentEditingCell,
         currentEditingRow,
         currentFilterTypes,
         currentGlobalFilterType,
@@ -225,6 +263,9 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         ...props.state,
       },
     }),
+    //@ts-ignore
+    setCurrentEditingCell,
+    //@ts-ignore
     setCurrentEditingRow,
     setCurrentFilterTypes,
     setCurrentGlobalFilterType,
@@ -234,6 +275,32 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     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

package/src/utils.ts

@@ -1,6 +1,7 @@
 import { ColumnDef, Table } from '@tanstack/react-table';
 import { MRT_ColumnDef, MRT_FilterType } from '.';
 import { MRT_FILTER_TYPE } from './enums';
+import { defaultFilterFNs } from './filtersFNs';
 
 export const getAllLeafColumnDefs = (
   columns: MRT_ColumnDef[],
@@ -40,7 +41,10 @@ export const createDataColumn = <D extends Record<string, any> = {}>(
   currentFilterTypes: { [key: string]: MRT_FilterType },
 ): ColumnDef<D> => // @ts-ignore
   table.createDataColumn(column.id, {
-    filterType: currentFilterTypes[column.id] || MRT_FILTER_TYPE.BEST_MATCH,
+    filterFn:
+      currentFilterTypes[column.id] instanceof Function
+        ? currentFilterTypes[column.id]
+        : defaultFilterFNs[currentFilterTypes[column.id] as MRT_FILTER_TYPE],
     ...column,
   }) as any;