material-react-table 0.7.3 → 0.7.4

package/dist/MaterialReactTable.d.ts

@@ -169,6 +169,7 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
     enableExpandAll?: boolean;
     enableFullScreenToggle?: boolean;
     enablePagination?: boolean;
+    enablePersistentState?: boolean;
     enableRowActions?: boolean;
     enableRowNumbers?: boolean;
     enableSelectAll?: boolean;
@@ -355,6 +356,7 @@ export declare 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';
@@ -394,5 +396,5 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
         }>;
     }) => ReactNode;
 };
-declare const _default: <D extends Record<string, any> = {}>({ autoResetExpanded, columnResizeMode, editingMode, enableColumnActions, enableColumnFilters, enableColumnResizing, enableDensePaddingToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, enableMultiRowSelection, enablePagination, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, positionActionsColumn, positionPagination, positionToolbarActions, positionToolbarAlertBanner, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
+declare const _default: <D extends Record<string, any> = {}>({ autoResetExpanded, columnResizeMode, editingMode, enableColumnActions, enableColumnFilters, enableColumnResizing, enableDensePaddingToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, enableMultiRowSelection, enablePagination, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, persistentStateMode, positionActionsColumn, positionPagination, positionToolbarActions, positionToolbarAlertBanner, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
 export default _default;

package/dist/material-react-table.cjs.development.js

@@ -2879,7 +2879,7 @@ var createDisplayColumn = function createDisplayColumn(table, column) {
 };
 
 var MRT_TableRoot = function MRT_TableRoot(props) {
-  var _props$initialState$c, _props$initialState, _props$initialState$c2, _props$initialState2, _props$initialState$i, _props$initialState3, _props$initialState$i2, _props$initialState4, _props$initialState$s, _props$initialState5, _props$initialState$s2, _props$initialState6, _props$initialState$p, _props$initialState7, _props$initialState7$, _props$initialState$p2, _props$initialState8, _props$initialState8$, _props$initialState$p3, _props$initialState9, _props$initialState9$, _props$globalFilterTy;
+  var _initialState$current, _initialState$current2, _initialState$isDense, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _initialState$paginat, _initialState$paginat2, _initialState$paginat3, _initialState$paginat4, _initialState$paginat5, _initialState$paginat6, _props$globalFilterTy;
 
   var _useState = React.useState(props.idPrefix),
       idPrefix = _useState[0],
@@ -2890,46 +2890,69 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
 
     return setIdPrefix((_props$idPrefix = props.idPrefix) != null ? _props$idPrefix : Math.random().toString(36).substring(2, 9));
   }, [props.idPrefix]);
+  var initialState = React.useMemo(function () {
+    if (!props.enablePersistentState || !props.idPrefix) {
+      return props.initialState;
+    }
+
+    if (typeof window === 'undefined') {
+      {
+        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;
+    }
+
+    var storedState = props.persistentStateMode === 'localStorage' ? localStorage.getItem("mrt-" + idPrefix + "-table-state") : props.persistentStateMode === 'sessionStorage' ? sessionStorage.getItem("mrt-" + idPrefix + "-table-state") : '{}';
+
+    if (storedState) {
+      var parsedState = JSON.parse(storedState);
+
+      if (parsedState) {
+        return _extends({}, props.initialState, parsedState);
+      }
+    }
+
+    return props.initialState;
+  }, []);
 
-  var _useState2 = React.useState((_props$initialState$c = (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.currentEditingCell) != null ? _props$initialState$c : null),
+  var _useState2 = React.useState((_initialState$current = initialState == null ? void 0 : initialState.currentEditingCell) != null ? _initialState$current : null),
       currentEditingCell = _useState2[0],
       setCurrentEditingCell = _useState2[1];
 
-  var _useState3 = React.useState((_props$initialState$c2 = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.currentEditingRow) != null ? _props$initialState$c2 : null),
+  var _useState3 = React.useState((_initialState$current2 = initialState == null ? void 0 : initialState.currentEditingRow) != null ? _initialState$current2 : null),
       currentEditingRow = _useState3[0],
       setCurrentEditingRow = _useState3[1];
 
-  var _useState4 = React.useState((_props$initialState$i = (_props$initialState3 = props.initialState) == null ? void 0 : _props$initialState3.isDensePadding) != null ? _props$initialState$i : false),
+  var _useState4 = React.useState((_initialState$isDense = initialState == null ? void 0 : initialState.isDensePadding) != null ? _initialState$isDense : false),
       isDensePadding = _useState4[0],
       setIsDensePadding = _useState4[1];
 
-  var _useState5 = React.useState((_props$initialState$i2 = (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.isFullScreen) != null ? _props$initialState$i2 : false),
+  var _useState5 = React.useState((_initialState$isFullS = initialState == null ? void 0 : initialState.isFullScreen) != null ? _initialState$isFullS : false),
       isFullScreen = _useState5[0],
       setIsFullScreen = _useState5[1];
 
-  var _useState6 = React.useState((_props$initialState$s = (_props$initialState5 = props.initialState) == null ? void 0 : _props$initialState5.showFilters) != null ? _props$initialState$s : false),
+  var _useState6 = React.useState((_initialState$showFil = initialState == null ? void 0 : initialState.showFilters) != null ? _initialState$showFil : false),
       showFilters = _useState6[0],
       setShowFilters = _useState6[1];
 
-  var _useState7 = React.useState((_props$initialState$s2 = (_props$initialState6 = props.initialState) == null ? void 0 : _props$initialState6.showGlobalFilter) != null ? _props$initialState$s2 : false),
+  var _useState7 = React.useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
       showGlobalFilter = _useState7[0],
       setShowGlobalFilter = _useState7[1];
 
   var _useState8 = React.useState({
-    pageIndex: (_props$initialState$p = (_props$initialState7 = props.initialState) == null ? void 0 : (_props$initialState7$ = _props$initialState7.pagination) == null ? void 0 : _props$initialState7$.pageIndex) != null ? _props$initialState$p : 0,
-    pageSize: (_props$initialState$p2 = (_props$initialState8 = props.initialState) == null ? void 0 : (_props$initialState8$ = _props$initialState8.pagination) == null ? void 0 : _props$initialState8$.pageSize) != null ? _props$initialState$p2 : 10,
-    pageCount: (_props$initialState$p3 = (_props$initialState9 = props.initialState) == null ? void 0 : (_props$initialState9$ = _props$initialState9.pagination) == null ? void 0 : _props$initialState9$.pageCount) != null ? _props$initialState$p3 : -1
+    pageIndex: (_initialState$paginat = initialState == null ? void 0 : (_initialState$paginat2 = initialState.pagination) == null ? void 0 : _initialState$paginat2.pageIndex) != null ? _initialState$paginat : 0,
+    pageSize: (_initialState$paginat3 = initialState == null ? void 0 : (_initialState$paginat4 = initialState.pagination) == null ? void 0 : _initialState$paginat4.pageSize) != null ? _initialState$paginat3 : 10,
+    pageCount: (_initialState$paginat5 = initialState == null ? void 0 : (_initialState$paginat6 = initialState.pagination) == null ? void 0 : _initialState$paginat6.pageCount) != null ? _initialState$paginat5 : -1
   }),
       pagination = _useState8[0],
       setPagination = _useState8[1];
 
   var _useState9 = React.useState(function () {
     return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
-      var _ref, _c$filter, _props$initialState10, _props$initialState11, _c$filterSelectOption, _ref2;
+      var _ref, _c$filter, _initialState$current3, _c$filterSelectOption, _ref2;
 
-      return _ref2 = {}, _ref2[c.id] = (_ref = (_c$filter = c.filter) != null ? _c$filter : props == null ? void 0 : (_props$initialState10 = props.initialState) == null ? void 0 : (_props$initialState11 = _props$initialState10.columnFilters) == null ? void 0 : _props$initialState11.find(function (cf) {
-        return cf.id === c.id;
-      })) != null ? _ref : !!((_c$filterSelectOption = c.filterSelectOptions) != null && _c$filterSelectOption.length) ? MRT_FILTER_TYPE.EQUALS : MRT_FILTER_TYPE.BEST_MATCH, _ref2;
+      return _ref2 = {}, _ref2[c.id] = (_ref = (_c$filter = c.filter) != null ? _c$filter : initialState == null ? void 0 : (_initialState$current3 = initialState.currentFilterTypes) == null ? void 0 : _initialState$current3[c.id]) != null ? _ref : !!((_c$filterSelectOption = c.filterSelectOptions) != null && _c$filterSelectOption.length) ? MRT_FILTER_TYPE.EQUALS : MRT_FILTER_TYPE.BEST_MATCH, _ref2;
     })));
   }),
       currentFilterTypes = _useState9[0],
@@ -3038,7 +3061,6 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       return originalRow.subRows;
     },
     globalFilterType: currentGlobalFilterType,
-    idPrefix: idPrefix,
     onPaginationChange: function onPaginationChange(updater) {
       return setPagination(function (old) {
         return reactTable.functionalUpdate(updater, old);
@@ -3047,6 +3069,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }, props, {
     columns: columns,
     data: data,
+    idPrefix: idPrefix,
+    //@ts-ignore
+    initialState: initialState,
     state: _extends({
       currentEditingCell: currentEditingCell,
       currentEditingRow: currentEditingRow,
@@ -3072,6 +3097,28 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     setShowGlobalFilter: setShowGlobalFilter
   });
 
+  React.useEffect(function () {
+    if (typeof window === 'undefined' || !props.enablePersistentState) {
+      return;
+    }
+
+    if (!props.idPrefix && "development" !== 'production') {
+      console.warn('a unique idPrefix prop is required for persistent table state to work');
+      return;
+    }
+
+    var itemArgs = ["mrt-" + idPrefix + "-table-state", JSON.stringify(tableInstance.getState())];
+
+    if (props.persistentStateMode === 'localStorage') {
+      var _localStorage;
+
+      (_localStorage = localStorage).setItem.apply(_localStorage, itemArgs);
+    } else if (props.persistentStateMode === 'sessionStorage') {
+      var _sessionStorage;
+
+      (_sessionStorage = sessionStorage).setItem.apply(_sessionStorage, itemArgs);
+    }
+  }, [props.enablePersistentState, props.idPrefix, props.persistentStateMode, tableInstance]);
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Dialog, {
     TransitionComponent: material.Grow,
     PaperComponent: material.Box,
@@ -3090,7 +3137,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }));
 };
 
-var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnResizing", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableHiding", "enableMultiRowSelection", "enablePagination", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
+var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnResizing", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableHiding", "enableMultiRowSelection", "enablePagination", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
 var MaterialReactTable = (function (_ref) {
   var _ref$autoResetExpande = _ref.autoResetExpanded,
       autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
@@ -3138,6 +3185,8 @@ var MaterialReactTable = (function (_ref) {
       enableToolbarTop = _ref$enableToolbarTop === void 0 ? true : _ref$enableToolbarTop,
       icons = _ref.icons,
       localization = _ref.localization,
+      _ref$persistentStateM = _ref.persistentStateMode,
+      persistentStateMode = _ref$persistentStateM === void 0 ? 'sessionStorage' : _ref$persistentStateM,
       _ref$positionActionsC = _ref.positionActionsColumn,
       positionActionsColumn = _ref$positionActionsC === void 0 ? 'first' : _ref$positionActionsC,
       _ref$positionPaginati = _ref.positionPagination,
@@ -3173,6 +3222,7 @@ var MaterialReactTable = (function (_ref) {
     enableToolbarTop: enableToolbarTop,
     icons: _extends({}, MRT_Default_Icons, icons),
     localization: _extends({}, MRT_DefaultLocalization_EN, localization),
+    persistentStateMode: persistentStateMode,
     positionActionsColumn: positionActionsColumn,
     positionPagination: positionPagination,
     positionToolbarActions: positionToolbarActions,