material-react-table 0.7.3 → 0.7.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.3",
+  "version": "0.7.4",
   "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,7 +59,7 @@
     "@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",
     "@size-limit/preset-small-lib": "^7.0.8",
@@ -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": {

package/src/MaterialReactTable.tsx

@@ -334,6 +334,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     enableExpandAll?: boolean;
     enableFullScreenToggle?: boolean;
     enablePagination?: boolean;
+    enablePersistentState?: boolean;
     enableRowActions?: boolean;
     enableRowNumbers?: boolean;
     enableSelectAll?: boolean;
@@ -694,6 +695,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';
@@ -778,6 +780,7 @@ export default <D extends Record<string, any> = {}>({
   enableToolbarTop = true,
   icons,
   localization,
+  persistentStateMode = 'sessionStorage',
   positionActionsColumn = 'first',
   positionPagination = 'bottom',
   positionToolbarActions = 'top',
@@ -809,6 +812,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/table/MRT_TableRoot.tsx

@@ -20,6 +20,7 @@ import {
   MRT_FilterType,
   MRT_Row,
   MRT_TableInstance,
+  MRT_TableState,
 } from '..';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
 import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
@@ -47,29 +48,54 @@ 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<{
@@ -80,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),
@@ -215,12 +241,14 @@ 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,
@@ -247,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