material-react-table 0.7.1 → 0.7.4

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

@@ -27,6 +27,7 @@ var FullscreenIcon = _interopDefault(require('@mui/icons-material/Fullscreen'));
 var MoreHorizIcon = _interopDefault(require('@mui/icons-material/MoreHoriz'));
 var MoreVertIcon = _interopDefault(require('@mui/icons-material/MoreVert'));
 var PushPinIcon = _interopDefault(require('@mui/icons-material/PushPin'));
+var RestartAltIcon = _interopDefault(require('@mui/icons-material/RestartAlt'));
 var SaveIcon = _interopDefault(require('@mui/icons-material/Save'));
 var SearchIcon = _interopDefault(require('@mui/icons-material/Search'));
 var SearchOffIcon = _interopDefault(require('@mui/icons-material/SearchOff'));
@@ -104,6 +105,7 @@ var MRT_DefaultLocalization_EN = {
   hideColumn: 'Hide {column} column',
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
+  resetColumnSize: 'Reset column size',
   rowActions: 'Row Actions',
   rowNumber: '#',
   rowNumbers: 'Row Numbers',
@@ -152,6 +154,7 @@ var MRT_Default_Icons = {
   MoreHorizIcon: MoreHorizIcon,
   MoreVertIcon: MoreVertIcon,
   PushPinIcon: PushPinIcon,
+  RestartAltIcon: RestartAltIcon,
   SaveIcon: SaveIcon,
   SearchIcon: SearchIcon,
   SearchOffIcon: SearchOffIcon,
@@ -682,9 +685,10 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       setColumnOrder = tableInstance.setColumnOrder,
       _tableInstance$option = tableInstance.options,
       enableColumnFilters = _tableInstance$option.enableColumnFilters,
-      enablePinning = _tableInstance$option.enablePinning,
+      enableColumnResizing = _tableInstance$option.enableColumnResizing,
       enableGrouping = _tableInstance$option.enableGrouping,
       enableHiding = _tableInstance$option.enableHiding,
+      enablePinning = _tableInstance$option.enablePinning,
       enableSorting = _tableInstance$option.enableSorting,
       _tableInstance$option2 = _tableInstance$option.icons,
       ArrowRightIcon = _tableInstance$option2.ArrowRightIcon,
@@ -695,6 +699,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       FilterListOffIcon = _tableInstance$option2.FilterListOffIcon,
       PushPinIcon = _tableInstance$option2.PushPinIcon,
       SortIcon = _tableInstance$option2.SortIcon,
+      RestartAltIcon = _tableInstance$option2.RestartAltIcon,
       VisibilityOffIcon = _tableInstance$option2.VisibilityOffIcon,
       idPrefix = _tableInstance$option.idPrefix,
       localization = _tableInstance$option.localization,
@@ -702,8 +707,9 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
   var column = header.column;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding,
-      columnVisibility = _getState.columnVisibility;
+      columnSizing = _getState.columnSizing,
+      columnVisibility = _getState.columnVisibility,
+      isDensePadding = _getState.isDensePadding;
 
   var _useState = React.useState(null),
       filterMenuAnchorEl = _useState[0],
@@ -728,6 +734,11 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     setAnchorEl(null);
   };
 
+  var handleResetColumnSize = function handleResetColumnSize() {
+    column.resetSize();
+    setAnchorEl(null);
+  };
+
   var handleHideColumn = function handleHideColumn() {
     column.toggleVisibility(false);
     setAnchorEl(null);
@@ -847,7 +858,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(DynamicFeedIcon, null)), (_localization = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(column.header))))], enablePinning && column.getCanPin() && [React__default.createElement(material.MenuItem, {
-    disabled: column.getIsPinned() === 'left',
+    disabled: column.getIsPinned() === 'left' || !column.getCanPin(),
     key: 0,
     onClick: function onClick() {
       return handlePinColumn('left');
@@ -860,7 +871,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       transform: 'rotate(90deg)'
     }
   })), localization.pinToLeft)), React__default.createElement(material.MenuItem, {
-    disabled: column.getIsPinned() === 'right',
+    disabled: column.getIsPinned() === 'right' || !column.getCanPin(),
     key: 0,
     onClick: function onClick() {
       return handlePinColumn('right');
@@ -882,7 +893,14 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(PushPinIcon, null)), localization.unpin))], enableHiding && [React__default.createElement(material.MenuItem, {
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(PushPinIcon, null)), localization.unpin))], enableColumnResizing && [React__default.createElement(material.MenuItem, {
+    disabled: !column.getCanResize() || !columnSizing[column.id],
+    key: 0,
+    onClick: handleResetColumnSize,
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(RestartAltIcon, null)), localization.resetColumnSize))], enableHiding && [React__default.createElement(material.MenuItem, {
     disabled: column.enableHiding === false,
     key: 0,
     onClick: handleHideColumn,
@@ -2019,16 +2037,18 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       return _extends({
         backgroundColor: theme.palette.background["default"],
         backgroundImage: "linear-gradient(" + material.alpha(theme.palette.common.white, 0.05) + "," + material.alpha(theme.palette.common.white, 0.05) + ")",
-        boxShadow: "3px 0 6px " + material.alpha(theme.palette.common.black, 0.1),
         fontWeight: 'bold',
         height: '100%',
-        minWidth: "max(" + header.getWidth() + ", 100px)",
+        maxWidth: "min(" + column.getWidth() + "px, " + column.maxWidth + "px)",
+        minWidth: "max(" + column.getWidth() + "px, " + column.minWidth + "px)",
         p: isDensePadding ? column.columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : column.columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem',
         pt: column.columnDefType === 'display' ? 0 : isDensePadding ? '0.75rem' : '1.25rem',
         pb: column.columnDefType === 'display' ? 0 : undefined,
+        overflow: 'visible',
         transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
         verticalAlign: 'text-top',
-        width: header.getWidth()
+        width: header.getWidth(),
+        zIndex: column.getIsResizing() ? 2 : 1
       }, tableCellProps == null ? void 0 : tableCellProps.sx);
     }
   }), header.isPlaceholder ? null : column.columnDefType === 'display' ? headerElement : React__default.createElement(material.Box, {
@@ -2049,7 +2069,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       flexWrap: 'nowrap',
       whiteSpace: column.header.length < 24 ? 'nowrap' : 'normal'
     }
-  }, headerElement, column.columnDefType !== 'group' && column.getCanSort() && React__default.createElement(material.Tooltip, {
+  }, headerElement, column.columnDefType === 'data' && column.getCanSort() && React__default.createElement(material.Tooltip, {
     arrow: true,
     placement: "top",
     title: sortTooltip
@@ -2057,7 +2077,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     "aria-label": sortTooltip,
     active: !!column.getIsSorted(),
     direction: column.getIsSorted() ? column.getIsSorted() : undefined
-  })), column.columnDefType !== 'group' && enableColumnFilters && !!column.getCanColumnFilter() && React__default.createElement(material.Tooltip, {
+  })), column.columnDefType === 'data' && enableColumnFilters && !!column.getCanColumnFilter() && React__default.createElement(material.Tooltip, {
     arrow: true,
     placement: "top",
     title: filterTooltip
@@ -2078,16 +2098,10 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         opacity: 0.8
       }
     }
-  }, showFilters && !column.getColumnFilterValue() ? React__default.createElement(FilterAltOff, null) : React__default.createElement(FilterAltIcon, null)))), React__default.createElement(material.Box, {
-    sx: {
-      alignItems: 'center',
-      display: 'flex',
-      flexWrap: 'nowrap'
-    }
-  }, (enableColumnActions || column.enableColumnActions) && column.enableColumnActions !== false && column.columnDefType !== 'group' && React__default.createElement(MRT_ToggleColumnActionMenuButton, {
+  }, showFilters && !column.getColumnFilterValue() ? React__default.createElement(FilterAltOff, null) : React__default.createElement(FilterAltIcon, null)))), (enableColumnActions || column.enableColumnActions) && column.enableColumnActions !== false && column.columnDefType !== 'group' && React__default.createElement(MRT_ToggleColumnActionMenuButton, {
     header: header,
     tableInstance: tableInstance
-  }), enableColumnResizing && column.columnDefType !== 'group' && React__default.createElement(material.Divider, Object.assign({
+  }), column.getCanResize() && React__default.createElement(material.Divider, Object.assign({
     flexItem: true,
     orientation: "vertical",
     onDoubleClick: function onDoubleClick() {
@@ -2095,14 +2109,19 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     },
     sx: function sx(theme) {
       return {
-        borderRightWidth: '2px',
         borderRadius: '2px',
-        maxHeight: '2rem',
+        borderRightWidth: '2px',
         cursor: 'col-resize',
-        userSelect: 'none',
+        height: showFilters && column.columnDefType === 'data' ? '4rem' : '2rem',
+        opacity: 0.8,
+        position: 'absolute',
+        right: '1px',
         touchAction: 'none',
+        transition: 'all 0.2s ease-in-out',
+        userSelect: 'none',
+        zIndex: 2000,
         '&:active': {
-          backgroundColor: theme.palette.secondary.dark,
+          backgroundColor: theme.palette.info.main,
           opacity: 1
         }
       };
@@ -2113,7 +2132,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         transform: column.getIsResizing() ? "translateX(" + getState().columnSizingInfo.deltaOffset + "px)" : ''
       }
     });
-  }))))), column.columnDefType === 'data' && enableColumnFilters && column.getCanColumnFilter() && React__default.createElement(material.Collapse, {
+  })))), column.columnDefType === 'data' && column.getCanColumnFilter() && React__default.createElement(material.Collapse, {
     "in": showFilters
   }, React__default.createElement(MRT_FilterTextField, {
     header: header,
@@ -2132,7 +2151,13 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
 
   var tableRowProps = _extends({}, headerGroup == null ? void 0 : headerGroup.getHeaderGroupProps(), mTableHeadRowProps);
 
-  return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), headerGroup.headers.map(function (header, index) {
+  return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps, {
+    sx: function sx(theme) {
+      return _extends({
+        boxShadow: "4px 0 8px " + material.alpha(theme.palette.common.black, 0.1)
+      }, tableRowProps == null ? void 0 : tableRowProps.sx);
+    }
+  }), headerGroup.headers.map(function (header, index) {
     return React__default.createElement(MRT_TableHeadCell, {
       header: header,
       key: header.id || index,
@@ -2172,8 +2197,12 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
       tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
+      idPrefix = _tableInstance$option.idPrefix,
       enableEditing = _tableInstance$option.enableEditing,
       muiTableBodyCellEditTextFieldProps = _tableInstance$option.muiTableBodyCellEditTextFieldProps,
+      onCellEditBlur = _tableInstance$option.onCellEditBlur,
+      onCellEditChange = _tableInstance$option.onCellEditChange,
+      setCurrentEditingCell = tableInstance.setCurrentEditingCell,
       setCurrentEditingRow = tableInstance.setCurrentEditingRow;
 
   var _useState = React.useState(cell.value),
@@ -2190,6 +2219,11 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
       cell: cell,
       tableInstance: tableInstance
     });
+    onCellEditChange == null ? void 0 : onCellEditChange({
+      event: event,
+      cell: cell,
+      tableInstance: tableInstance
+    });
   };
 
   var handleBlur = function handleBlur(event) {
@@ -2198,11 +2232,17 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
       setCurrentEditingRow(_extends({}, getState().currentEditingRow));
     }
 
+    setCurrentEditingCell(null);
     column.onCellEditBlur == null ? void 0 : column.onCellEditBlur({
       event: event,
       cell: cell,
       tableInstance: tableInstance
     });
+    onCellEditBlur == null ? void 0 : onCellEditBlur({
+      event: event,
+      cell: cell,
+      tableInstance: tableInstance
+    });
   };
 
   var mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function ? muiTableBodyCellEditTextFieldProps({
@@ -2224,6 +2264,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
   }
 
   return React__default.createElement(material.TextField, Object.assign({
+    id: "mrt-" + idPrefix + "-edit-cell-text-field-" + cell.id,
     margin: "dense",
     onBlur: handleBlur,
     onChange: handleChange,
@@ -2284,6 +2325,7 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
       backgroundColor: 'transparent',
       border: 'none',
       color: 'inherit',
+      cursor: 'copy',
       fontFamily: 'inherit',
       fontSize: 'inherit',
       letterSpacing: 'inherit',
@@ -2304,15 +2346,19 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var getIsSomeColumnsPinned = tableInstance.getIsSomeColumnsPinned,
       getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
+      editingMode = _tableInstance$option.editingMode,
       enableClickToCopy = _tableInstance$option.enableClickToCopy,
-      enablePinning = _tableInstance$option.enablePinning,
       enableEditing = _tableInstance$option.enableEditing,
+      enablePinning = _tableInstance$option.enablePinning,
+      idPrefix = _tableInstance$option.idPrefix,
       isLoading = _tableInstance$option.isLoading,
       muiTableBodyCellProps = _tableInstance$option.muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps = _tableInstance$option.muiTableBodyCellSkeletonProps,
-      onCellClick = _tableInstance$option.onCellClick;
+      onCellClick = _tableInstance$option.onCellClick,
+      setCurrentEditingCell = tableInstance.setCurrentEditingCell;
 
   var _getState = getState(),
+      currentEditingCell = _getState.currentEditingCell,
       currentEditingRow = _getState.currentEditingRow,
       isDensePadding = _getState.isDensePadding;
 
@@ -2332,6 +2378,23 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var skeletonWidth = React.useMemo(function () {
     return column.columnDefType === 'display' ? column.getWidth() / 2 : Math.random() * (column.getWidth() - column.getWidth() / 3) + column.getWidth() / 3;
   }, [column.columnDefType, column.getWidth()]);
+  var isEditable = (enableEditing || column.enableEditing) && column.enableEditing !== false;
+  var isEditing = isEditable && (editingMode === 'table' || (currentEditingRow == null ? void 0 : currentEditingRow.id) === row.id || (currentEditingCell == null ? void 0 : currentEditingCell.id) === cell.id);
+
+  var handleDoubleClick = function handleDoubleClick(_event) {
+    if ((enableEditing || column.enableEditing) && column.enableEditing !== false && editingMode === 'cell') {
+      setCurrentEditingCell(cell);
+      setTimeout(function () {
+        var textField = document.getElementById("mrt-" + idPrefix + "-edit-cell-text-field-" + cell.id);
+
+        if (textField) {
+          textField.focus();
+          textField.select();
+        }
+      }, 200);
+    }
+  };
+
   return React__default.createElement(material.TableCell, Object.assign({
     onClick: function onClick(event) {
       return onCellClick == null ? void 0 : onCellClick({
@@ -2339,13 +2402,18 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
         cell: cell,
         tableInstance: tableInstance
       });
-    }
+    },
+    onDoubleClick: handleDoubleClick
   }, tableCellProps, {
     sx: _extends({
+      cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
+      maxWidth: "min(" + column.getWidth() + "px, fit-content)",
+      minWidth: "max(" + column.getWidth() + "px, " + column.minWidth + "px)",
       p: isDensePadding ? column.columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : column.columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem',
       pl: column.id === 'mrt-expand' ? row.depth + (isDensePadding ? 0.5 : 0.75) + "rem" : undefined,
       transition: 'all 0.2s ease-in-out',
-      whiteSpace: isDensePadding || enablePinning && getIsSomeColumnsPinned() ? 'nowrap' : 'normal'
+      whiteSpace: isDensePadding || enablePinning && getIsSomeColumnsPinned() ? 'nowrap' : 'normal',
+      width: column.getWidth()
     }, tableCellProps == null ? void 0 : tableCellProps.sx)
   }), isLoading ? React__default.createElement(material.Skeleton, Object.assign({
     animation: "wave",
@@ -2354,7 +2422,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   }, muiTableBodyCellSkeletonProps)) : column.columnDefType === 'display' ? column.Cell == null ? void 0 : column.Cell({
     cell: cell,
     tableInstance: tableInstance
-  }) : cell.getIsPlaceholder() || row.getIsGrouped() && column.id !== row.groupingColumnId ? null : cell.getIsAggregated() ? cell.renderAggregatedCell() : enableEditing && column.enableEditing !== false && (currentEditingRow == null ? void 0 : currentEditingRow.id) === row.id ? React__default.createElement(MRT_EditCellTextField, {
+  }) : cell.getIsPlaceholder() || row.getIsGrouped() && column.id !== row.groupingColumnId ? null : cell.getIsAggregated() ? cell.renderAggregatedCell() : isEditing ? React__default.createElement(MRT_EditCellTextField, {
     cell: cell,
     tableInstance: tableInstance
   }) : (enableClickToCopy || column.enableClickToCopy) && column.enableClickToCopy !== false ? React__default.createElement(React__default.Fragment, null, React__default.createElement(MRT_CopyButton, {
@@ -2521,8 +2589,11 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
         backgroundColor: theme.palette.background["default"],
         backgroundImage: "linear-gradient(" + material.alpha(theme.palette.common.white, 0.05) + "," + material.alpha(theme.palette.common.white, 0.05) + ")",
         fontWeight: 'bold',
+        maxWidth: "min(" + column.getWidth() + "px, " + column.maxWidth + "px)",
+        minWidth: "max(" + column.getWidth() + "px, " + column.minWidth + "px)",
         p: isDensePadding ? '0.5rem' : '1rem',
         transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out",
+        width: column.getWidth(),
         verticalAlign: 'text-top'
       }, tableCellProps == null ? void 0 : tableCellProps.sx);
     }
@@ -2620,7 +2691,7 @@ var commonBoxStyles = function commonBoxStyles(_ref) {
   return {
     display: 'grid',
     minWidth: visible ? '200px' : 0,
-    overflowX: 'auto',
+    overflowX: pinned ? 'scroll' : 'auto',
     boxShadow: pinned === 'left' ? "0 1px 12px " + material.alpha(theme.palette.common.black, 0.5) : pinned === 'right' ? "0 -1px 12px " + material.alpha(theme.palette.common.black, 0.5) : 'none'
   };
 };
@@ -2799,7 +2870,7 @@ var createGroup = function createGroup(table, column, currentFilterTypes) {
 var createDataColumn = function createDataColumn(table, column, currentFilterTypes) {
   return (// @ts-ignore
     table.createDataColumn(column.id, _extends({
-      filterType: currentFilterTypes[column.id] || MRT_FILTER_TYPE.BEST_MATCH
+      filterFn: currentFilterTypes[column.id] instanceof Function ? currentFilterTypes[column.id] : defaultFilterFNs[currentFilterTypes[column.id]]
     }, column))
   );
 };
@@ -2808,7 +2879,7 @@ var createDisplayColumn = function createDisplayColumn(table, column) {
 };
 
 var MRT_TableRoot = function MRT_TableRoot(props) {
-  var _props$initialState$i, _props$initialState, _props$initialState$i2, _props$initialState2, _props$initialState$s, _props$initialState3, _props$initialState$s2, _props$initialState4, _props$initialState$p, _props$initialState5, _props$initialState5$, _props$initialState$p2, _props$initialState6, _props$initialState6$, _props$initialState$p3, _props$initialState7, _props$initialState7$, _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],
@@ -2819,50 +2890,77 @@ 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;
+    }
 
-  var _useState2 = React.useState(null),
-      currentEditingRow = _useState2[0],
-      setCurrentEditingRow = _useState2[1];
+    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);
 
-  var _useState3 = React.useState((_props$initialState$i = (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.isDensePadding) != null ? _props$initialState$i : false),
-      isDensePadding = _useState3[0],
-      setIsDensePadding = _useState3[1];
+      if (parsedState) {
+        return _extends({}, props.initialState, parsedState);
+      }
+    }
+
+    return props.initialState;
+  }, []);
 
-  var _useState4 = React.useState((_props$initialState$i2 = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.isFullScreen) != null ? _props$initialState$i2 : false),
-      isFullScreen = _useState4[0],
-      setIsFullScreen = _useState4[1];
+  var _useState2 = React.useState((_initialState$current = initialState == null ? void 0 : initialState.currentEditingCell) != null ? _initialState$current : null),
+      currentEditingCell = _useState2[0],
+      setCurrentEditingCell = _useState2[1];
 
-  var _useState5 = React.useState((_props$initialState$s = (_props$initialState3 = props.initialState) == null ? void 0 : _props$initialState3.showFilters) != null ? _props$initialState$s : false),
-      showFilters = _useState5[0],
-      setShowFilters = _useState5[1];
+  var _useState3 = React.useState((_initialState$current2 = initialState == null ? void 0 : initialState.currentEditingRow) != null ? _initialState$current2 : null),
+      currentEditingRow = _useState3[0],
+      setCurrentEditingRow = _useState3[1];
 
-  var _useState6 = React.useState((_props$initialState$s2 = (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.showGlobalFilter) != null ? _props$initialState$s2 : false),
-      showGlobalFilter = _useState6[0],
-      setShowGlobalFilter = _useState6[1];
+  var _useState4 = React.useState((_initialState$isDense = initialState == null ? void 0 : initialState.isDensePadding) != null ? _initialState$isDense : false),
+      isDensePadding = _useState4[0],
+      setIsDensePadding = _useState4[1];
 
-  var _useState7 = React.useState({
-    pageIndex: (_props$initialState$p = (_props$initialState5 = props.initialState) == null ? void 0 : (_props$initialState5$ = _props$initialState5.pagination) == null ? void 0 : _props$initialState5$.pageIndex) != null ? _props$initialState$p : 0,
-    pageSize: (_props$initialState$p2 = (_props$initialState6 = props.initialState) == null ? void 0 : (_props$initialState6$ = _props$initialState6.pagination) == null ? void 0 : _props$initialState6$.pageSize) != null ? _props$initialState$p2 : 10,
-    pageCount: (_props$initialState$p3 = (_props$initialState7 = props.initialState) == null ? void 0 : (_props$initialState7$ = _props$initialState7.pagination) == null ? void 0 : _props$initialState7$.pageCount) != null ? _props$initialState$p3 : -1
+  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((_initialState$showFil = initialState == null ? void 0 : initialState.showFilters) != null ? _initialState$showFil : false),
+      showFilters = _useState6[0],
+      setShowFilters = _useState6[1];
+
+  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: (_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 = _useState7[0],
-      setPagination = _useState7[1];
+      pagination = _useState8[0],
+      setPagination = _useState8[1];
 
-  var _useState8 = React.useState(function () {
+  var _useState9 = React.useState(function () {
     return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
-      var _ref, _c$filter, _props$initialState8, _props$initialState8$, _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$initialState8 = props.initialState) == null ? void 0 : (_props$initialState8$ = _props$initialState8.columnFilters) == null ? void 0 : _props$initialState8$.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 = _useState8[0],
-      setCurrentFilterTypes = _useState8[1];
+      currentFilterTypes = _useState9[0],
+      setCurrentFilterTypes = _useState9[1];
 
-  var _useState9 = React.useState((_props$globalFilterTy = props.globalFilterType) != null ? _props$globalFilterTy : MRT_FILTER_TYPE.BEST_MATCH_FIRST),
-      currentGlobalFilterType = _useState9[0],
-      setCurrentGlobalFilterType = _useState9[1];
+  var _useState10 = React.useState((_props$globalFilterTy = props.globalFilterType) != null ? _props$globalFilterTy : MRT_FILTER_TYPE.BEST_MATCH_FIRST),
+      currentGlobalFilterType = _useState10[0],
+      setCurrentGlobalFilterType = _useState10[1];
 
   var table = React.useMemo(function () {
     return reactTable.createTable();
@@ -2870,7 +2968,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   var displayColumns = React.useMemo(function () {
     var _props$localization, _props$localization2, _props$localization3, _props$localization5;
 
-    return [(props.enableRowActions || props.enableEditing) && createDisplayColumn(table, {
+    return [(props.enableRowActions || props.enableEditing && props.editingMode === 'row') && createDisplayColumn(table, {
       Cell: function Cell(_ref3) {
         var cell = _ref3.cell;
         return React__default.createElement(MRT_ToggleRowActionMenuButton, {
@@ -2933,7 +3031,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       width: 40,
       minWidth: 40
     })].filter(Boolean);
-  }, [props.enableEditing, props.enableExpandAll, props.enableExpanded, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization, table]);
+  }, [props.editingMode, props.enableEditing, props.enableExpandAll, props.enableExpanded, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization, table]);
   var columns = React.useMemo(function () {
     return table.createColumns([].concat(displayColumns, props.columns.map(function (column) {
       return column.columns ? createGroup(table, column, currentFilterTypes) : createDataColumn(table, column, currentFilterTypes);
@@ -2963,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);
@@ -2972,7 +3069,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }, props, {
     columns: columns,
     data: data,
+    idPrefix: idPrefix,
+    //@ts-ignore
+    initialState: initialState,
     state: _extends({
+      currentEditingCell: currentEditingCell,
       currentEditingRow: currentEditingRow,
       currentFilterTypes: currentFilterTypes,
       currentGlobalFilterType: currentGlobalFilterType,
@@ -2984,6 +3085,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       showGlobalFilter: showGlobalFilter
     }, props.state)
   })), {
+    //@ts-ignore
+    setCurrentEditingCell: setCurrentEditingCell,
+    //@ts-ignore
     setCurrentEditingRow: setCurrentEditingRow,
     setCurrentFilterTypes: setCurrentFilterTypes,
     setCurrentGlobalFilterType: setCurrentGlobalFilterType,
@@ -2993,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,
@@ -3011,14 +3137,20 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }));
 };
 
-var _excluded$5 = ["autoResetExpanded", "enableColumnActions", "enableColumnFilters", "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,
+      _ref$columnResizeMode = _ref.columnResizeMode,
+      columnResizeMode = _ref$columnResizeMode === void 0 ? 'onEnd' : _ref$columnResizeMode,
+      _ref$editingMode = _ref.editingMode,
+      editingMode = _ref$editingMode === void 0 ? 'row' : _ref$editingMode,
       _ref$enableColumnActi = _ref.enableColumnActions,
       enableColumnActions = _ref$enableColumnActi === void 0 ? true : _ref$enableColumnActi,
       _ref$enableColumnFilt = _ref.enableColumnFilters,
       enableColumnFilters = _ref$enableColumnFilt === void 0 ? true : _ref$enableColumnFilt,
+      _ref$enableColumnResi = _ref.enableColumnResizing,
+      enableColumnResizing = _ref$enableColumnResi === void 0 ? false : _ref$enableColumnResi,
       _ref$enableDensePaddi = _ref.enableDensePaddingToggle,
       enableDensePaddingToggle = _ref$enableDensePaddi === void 0 ? true : _ref$enableDensePaddi,
       _ref$enableExpandAll = _ref.enableExpandAll,
@@ -3053,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,
@@ -3065,7 +3199,10 @@ var MaterialReactTable = (function (_ref) {
 
   return React__default.createElement(MRT_TableRoot, Object.assign({
     autoResetExpanded: autoResetExpanded,
+    columnResizeMode: columnResizeMode,
+    editingMode: editingMode,
     enableColumnActions: enableColumnActions,
+    enableColumnResizing: enableColumnResizing,
     enableColumnFilters: enableColumnFilters,
     enableDensePaddingToggle: enableDensePaddingToggle,
     enableExpandAll: enableExpandAll,
@@ -3085,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,