material-react-table 0.7.2 → 0.7.5

package/dist/material-react-table.esm.js

@@ -228,21 +228,21 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
   }));
 };
 
-var MRT_FILTER_TYPE;
-
-(function (MRT_FILTER_TYPE) {
-  MRT_FILTER_TYPE["BEST_MATCH"] = "bestMatch";
-  MRT_FILTER_TYPE["BEST_MATCH_FIRST"] = "bestMatchFirst";
-  MRT_FILTER_TYPE["CONTAINS"] = "contains";
-  MRT_FILTER_TYPE["EMPTY"] = "empty";
-  MRT_FILTER_TYPE["ENDS_WITH"] = "endsWith";
-  MRT_FILTER_TYPE["EQUALS"] = "equals";
-  MRT_FILTER_TYPE["GREATER_THAN"] = "greaterThan";
-  MRT_FILTER_TYPE["LESS_THAN"] = "lessThan";
-  MRT_FILTER_TYPE["NOT_EMPTY"] = "notEmpty";
-  MRT_FILTER_TYPE["NOT_EQUALS"] = "notEquals";
-  MRT_FILTER_TYPE["STARTS_WITH"] = "startsWith";
-})(MRT_FILTER_TYPE || (MRT_FILTER_TYPE = {}));
+var MRT_FILTER_OPTION;
+
+(function (MRT_FILTER_OPTION) {
+  MRT_FILTER_OPTION["BEST_MATCH"] = "bestMatch";
+  MRT_FILTER_OPTION["BEST_MATCH_FIRST"] = "bestMatchFirst";
+  MRT_FILTER_OPTION["CONTAINS"] = "contains";
+  MRT_FILTER_OPTION["EMPTY"] = "empty";
+  MRT_FILTER_OPTION["ENDS_WITH"] = "endsWith";
+  MRT_FILTER_OPTION["EQUALS"] = "equals";
+  MRT_FILTER_OPTION["GREATER_THAN"] = "greaterThan";
+  MRT_FILTER_OPTION["LESS_THAN"] = "lessThan";
+  MRT_FILTER_OPTION["NOT_EMPTY"] = "notEmpty";
+  MRT_FILTER_OPTION["NOT_EQUALS"] = "notEquals";
+  MRT_FILTER_OPTION["STARTS_WITH"] = "startsWith";
+})(MRT_FILTER_OPTION || (MRT_FILTER_OPTION = {}));
 
 var bestMatchFirst = function bestMatchFirst(rows, columnIds, filterValue) {
   return matchSorter(rows, filterValue.toString().trim(), {
@@ -380,7 +380,7 @@ var commonMenuItemStyles = {
   my: 0,
   alignItems: 'center'
 };
-var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
+var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
   var anchorEl = _ref.anchorEl,
       header = _ref.header,
       onSelect = _ref.onSelect,
@@ -388,97 +388,97 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
       tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
-      enabledGlobalFilterTypes = _tableInstance$option.enabledGlobalFilterTypes,
+      enabledGlobalFilterOptions = _tableInstance$option.enabledGlobalFilterOptions,
       localization = _tableInstance$option.localization,
-      setCurrentFilterTypes = tableInstance.setCurrentFilterTypes,
-      setCurrentGlobalFilterType = tableInstance.setCurrentGlobalFilterType;
+      setCurrentFilterFns = tableInstance.setCurrentFilterFns,
+      setCurrentGlobalFilterFn = tableInstance.setCurrentGlobalFilterFn;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding,
-      currentFilterTypes = _getState.currentFilterTypes,
-      currentGlobalFilterType = _getState.currentGlobalFilterType;
+      currentFilterFns = _getState.currentFilterFns,
+      currentGlobalFilterFn = _getState.currentGlobalFilterFn;
 
-  var filterTypes = useMemo(function () {
+  var filterOptions = useMemo(function () {
     return [{
-      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(function (filterType) {
-      return header ? !header.column.enabledColumnFilterTypes || header.column.enabledColumnFilterTypes.includes(filterType.type) : (!enabledGlobalFilterTypes || enabledGlobalFilterTypes.includes(filterType.type)) && [MRT_FILTER_TYPE.BEST_MATCH_FIRST, MRT_FILTER_TYPE.BEST_MATCH].includes(filterType.type);
+      return header ? !header.column.enabledColumnFilterOptions || header.column.enabledColumnFilterOptions.includes(filterType.type) : (!enabledGlobalFilterOptions || enabledGlobalFilterOptions.includes(filterType.type)) && [MRT_FILTER_OPTION.BEST_MATCH_FIRST, MRT_FILTER_OPTION.BEST_MATCH].includes(filterType.type);
     });
   }, []);
 
   var handleSelectFilterType = function handleSelectFilterType(value) {
     if (header) {
-      setCurrentFilterTypes(function (prev) {
+      setCurrentFilterFns(function (prev) {
         var _extends2;
 
         return _extends({}, prev, (_extends2 = {}, _extends2[header.id] = value, _extends2));
       });
 
-      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 == null ? void 0 : onSelect();
   };
 
-  var filterType = !!header ? currentFilterTypes[header.id] : currentGlobalFilterType;
+  var filterType = !!header ? currentFilterFns[header.id] : currentGlobalFilterFn;
   return React.createElement(Menu, {
     anchorEl: anchorEl,
     anchorOrigin: {
@@ -492,7 +492,7 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
     MenuListProps: {
       dense: isDensePadding
     }
-  }, filterTypes.map(function (_ref2, index) {
+  }, filterOptions.map(function (_ref2, index) {
     var type = _ref2.type,
         label = _ref2.label,
         divider = _ref2.divider,
@@ -836,7 +836,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: {
       p: 0
     }
-  }, React.createElement(ArrowRightIcon, null))), React.createElement(MRT_FilterTypeMenu, {
+  }, React.createElement(ArrowRightIcon, null))), React.createElement(MRT_FilterOptionMenu, {
     anchorEl: filterMenuAnchorEl,
     header: header,
     key: 2,
@@ -1250,7 +1250,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
     sx: _extends({
       justifySelf: 'end'
     }, textFieldProps == null ? void 0 : textFieldProps.sx)
-  })), React.createElement(MRT_FilterTypeMenu, {
+  })), React.createElement(MRT_FilterOptionMenu, {
     anchorEl: anchorEl,
     setAnchorEl: setAnchorEl,
     tableInstance: tableInstance
@@ -1748,11 +1748,11 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       idPrefix = _tableInstance$option.idPrefix,
       localization = _tableInstance$option.localization,
       muiTableHeadCellFilterTextFieldProps = _tableInstance$option.muiTableHeadCellFilterTextFieldProps,
-      setCurrentFilterTypes = tableInstance.setCurrentFilterTypes;
+      setCurrentFilterFns = tableInstance.setCurrentFilterFns;
   var column = header.column;
 
   var _getState = getState(),
-      currentFilterTypes = _getState.currentFilterTypes;
+      currentFilterFns = _getState.currentFilterFns;
 
   var _useState = useState(null),
       anchorEl = _useState[0],
@@ -1791,10 +1791,10 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   var handleClearFilterChip = function handleClearFilterChip() {
     setFilterValue('');
     column.setColumnFilterValue(undefined);
-    setCurrentFilterTypes(function (prev) {
+    setCurrentFilterFns(function (prev) {
       var _extends2;
 
-      return _extends({}, prev, (_extends2 = {}, _extends2[header.id] = MRT_FILTER_TYPE.BEST_MATCH, _extends2));
+      return _extends({}, prev, (_extends2 = {}, _extends2[header.id] = MRT_FILTER_OPTION.BEST_MATCH, _extends2));
     });
   };
 
@@ -1806,10 +1806,10 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   }
 
   var filterId = "mrt-" + idPrefix + "-" + header.id + "-filter-text-field";
-  var filterType = currentFilterTypes == null ? void 0 : currentFilterTypes[header.id];
+  var filterFn = currentFilterFns == null ? void 0 : currentFilterFns[header.id];
   var isSelectFilter = !!column.filterSelectOptions;
-  var filterChipLabel = !(filterType instanceof Function) && [MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(filterType) ? //@ts-ignore
-  localization["filter" + (filterType.charAt(0).toUpperCase() + filterType.slice(1))] : '';
+  var filterChipLabel = !(filterFn instanceof Function) && [MRT_FILTER_OPTION.EMPTY, MRT_FILTER_OPTION.NOT_EMPTY].includes(filterFn) ? //@ts-ignore
+  localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))] : '';
   var filterPlaceholder = (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.header));
   return React.createElement(React.Fragment, null, React.createElement(TextField, Object.assign({
     fullWidth: true,
@@ -1824,9 +1824,9 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     },
     helperText: React.createElement("label", {
       htmlFor: filterId
-    }, filterType instanceof Function ? (_localization$filterM = localization.filterMode.replace('{filterType}', // @ts-ignore
-    (_localization$ = localization["filter" + (filterType.name.charAt(0).toUpperCase() + filterType.name.slice(1))]) != null ? _localization$ : '')) != null ? _localization$filterM : '' : localization.filterMode.replace('{filterType}', // @ts-ignore
-    localization["filter" + (filterType.charAt(0).toUpperCase() + filterType.slice(1))])),
+    }, filterFn instanceof Function ? (_localization$filterM = localization.filterMode.replace('{filterType}', // @ts-ignore
+    (_localization$ = localization["filter" + (filterFn.name.charAt(0).toUpperCase() + filterFn.name.slice(1))]) != null ? _localization$ : '')) != null ? _localization$filterM : '' : localization.filterMode.replace('{filterType}', // @ts-ignore
+    localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))])),
     FormHelperTextProps: {
       sx: {
         fontSize: '0.6rem',
@@ -1913,7 +1913,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       key: value,
       value: value
     }, text);
-  })), React.createElement(MRT_FilterTypeMenu, {
+  })), React.createElement(MRT_FilterOptionMenu, {
     anchorEl: anchorEl,
     header: header,
     setAnchorEl: setAnchorEl,
@@ -2015,9 +2015,9 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   var tableCellProps = _extends({}, header.getHeaderProps(), mTableHeadCellProps, mcTableHeadCellProps);
 
   var sortTooltip = !!column.getIsSorted() ? column.getIsSorted() === 'desc' ? localization.sortedByColumnDesc.replace('{column}', column.header) : localization.sortedByColumnAsc.replace('{column}', column.header) : localization.unsorted;
-  var filterType = (_getState2 = getState()) == null ? void 0 : (_getState2$currentFil = _getState2.currentFilterTypes) == null ? void 0 : _getState2$currentFil[header.id];
-  var filterTooltip = !!column.getColumnFilterValue() ? localization.filteringByColumn.replace('{column}', String(column.header)).replace('{filterType}', filterType instanceof Function ? '' : // @ts-ignore
-  localization["filter" + (filterType.charAt(0).toUpperCase() + filterType.slice(1))]).replace('{filterValue}', column.getColumnFilterValue()).replace('" "', '') : localization.showHideFilters;
+  var filterFn = (_getState2 = getState()) == null ? void 0 : (_getState2$currentFil = _getState2.currentFilterFns) == null ? void 0 : _getState2$currentFil[header.id];
+  var filterTooltip = !!column.getColumnFilterValue() ? localization.filteringByColumn.replace('{column}', String(column.header)).replace('{filterType}', filterFn instanceof Function ? '' : // @ts-ignore
+  localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))]).replace('{filterValue}', column.getColumnFilterValue()).replace('" "', '') : localization.showHideFilters;
   var headerElement = (_column$Header = column == null ? void 0 : column.Header == null ? void 0 : column.Header({
     header: header,
     tableInstance: tableInstance
@@ -2190,8 +2190,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 = useState(cell.value),
@@ -2208,6 +2212,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) {
@@ -2216,11 +2225,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({
@@ -2242,6 +2257,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
   }
 
   return React.createElement(TextField, Object.assign({
+    id: "mrt-" + idPrefix + "-edit-cell-text-field-" + cell.id,
     margin: "dense",
     onBlur: handleBlur,
     onChange: handleChange,
@@ -2302,6 +2318,7 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
       backgroundColor: 'transparent',
       border: 'none',
       color: 'inherit',
+      cursor: 'copy',
       fontFamily: 'inherit',
       fontSize: 'inherit',
       letterSpacing: 'inherit',
@@ -2322,15 +2339,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;
 
@@ -2350,6 +2371,23 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var skeletonWidth = 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.createElement(TableCell, Object.assign({
     onClick: function onClick(event) {
       return onCellClick == null ? void 0 : onCellClick({
@@ -2357,9 +2395,11 @@ 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',
@@ -2375,7 +2415,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.createElement(MRT_EditCellTextField, {
+  }) : cell.getIsPlaceholder() || row.getIsGrouped() && column.id !== row.groupingColumnId ? null : cell.getIsAggregated() ? cell.renderAggregatedCell() : isEditing ? React.createElement(MRT_EditCellTextField, {
     cell: cell,
     tableInstance: tableInstance
   }) : (enableClickToCopy || column.enableClickToCopy) && column.enableClickToCopy !== false ? React.createElement(React.Fragment, null, React.createElement(MRT_CopyButton, {
@@ -2811,19 +2851,19 @@ var getAllLeafColumnDefs = function getAllLeafColumnDefs(columns) {
     return !col.columns;
   });
 };
-var createGroup = function createGroup(table, column, currentFilterTypes) {
+var createGroup = function createGroup(table, column, currentFilterFns) {
   var _column$columns;
 
   return table.createGroup(_extends({}, column, {
     columns: column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.map == null ? void 0 : _column$columns.map(function (col) {
-      return col.columns ? createGroup(table, col, currentFilterTypes) : createDataColumn(table, col, currentFilterTypes);
+      return col.columns ? createGroup(table, col, currentFilterFns) : createDataColumn(table, col, currentFilterFns);
     })
   }));
 };
-var createDataColumn = function createDataColumn(table, column, currentFilterTypes) {
+var createDataColumn = function createDataColumn(table, column, currentFilterFns) {
   return (// @ts-ignore
     table.createDataColumn(column.id, _extends({
-      filterFn: currentFilterTypes[column.id] instanceof Function ? currentFilterTypes[column.id] : defaultFilterFNs[currentFilterTypes[column.id]]
+      filterFn: currentFilterFns[column.id] instanceof Function ? currentFilterFns[column.id] : defaultFilterFNs[currentFilterFns[column.id]]
     }, column))
   );
 };
@@ -2832,7 +2872,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$globalFilterFn;
 
   var _useState = useState(props.idPrefix),
       idPrefix = _useState[0],
@@ -2843,50 +2883,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 = useMemo(function () {
+    if (!props.enablePersistentState || !props.idPrefix) {
+      return props.initialState;
+    }
 
-  var _useState2 = useState(null),
-      currentEditingRow = _useState2[0],
-      setCurrentEditingRow = _useState2[1];
+    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');
+      }
 
-  var _useState3 = 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];
+      return props.initialState;
+    }
 
-  var _useState4 = 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 storedState = props.persistentStateMode === 'localStorage' ? localStorage.getItem("mrt-" + idPrefix + "-table-state") : props.persistentStateMode === 'sessionStorage' ? sessionStorage.getItem("mrt-" + idPrefix + "-table-state") : '{}';
 
-  var _useState5 = 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];
+    if (storedState) {
+      var parsedState = JSON.parse(storedState);
 
-  var _useState6 = 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];
+      if (parsedState) {
+        return _extends({}, props.initialState, parsedState);
+      }
+    }
 
-  var _useState7 = 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
+    return props.initialState;
+  }, []);
+
+  var _useState2 = useState((_initialState$current = initialState == null ? void 0 : initialState.currentEditingCell) != null ? _initialState$current : null),
+      currentEditingCell = _useState2[0],
+      setCurrentEditingCell = _useState2[1];
+
+  var _useState3 = useState((_initialState$current2 = initialState == null ? void 0 : initialState.currentEditingRow) != null ? _initialState$current2 : null),
+      currentEditingRow = _useState3[0],
+      setCurrentEditingRow = _useState3[1];
+
+  var _useState4 = useState((_initialState$isDense = initialState == null ? void 0 : initialState.isDensePadding) != null ? _initialState$isDense : false),
+      isDensePadding = _useState4[0],
+      setIsDensePadding = _useState4[1];
+
+  var _useState5 = useState((_initialState$isFullS = initialState == null ? void 0 : initialState.isFullScreen) != null ? _initialState$isFullS : false),
+      isFullScreen = _useState5[0],
+      setIsFullScreen = _useState5[1];
+
+  var _useState6 = useState((_initialState$showFil = initialState == null ? void 0 : initialState.showFilters) != null ? _initialState$showFil : false),
+      showFilters = _useState6[0],
+      setShowFilters = _useState6[1];
+
+  var _useState7 = useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
+      showGlobalFilter = _useState7[0],
+      setShowGlobalFilter = _useState7[1];
+
+  var _useState8 = 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 = useState(function () {
+  var _useState9 = 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$filterFn, _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$filterFn = c.filterFn) != null ? _c$filterFn : initialState == null ? void 0 : (_initialState$current3 = initialState.currentFilterFns) == null ? void 0 : _initialState$current3[c.id]) != null ? _ref : !!((_c$filterSelectOption = c.filterSelectOptions) != null && _c$filterSelectOption.length) ? MRT_FILTER_OPTION.EQUALS : MRT_FILTER_OPTION.BEST_MATCH, _ref2;
     })));
   }),
-      currentFilterTypes = _useState8[0],
-      setCurrentFilterTypes = _useState8[1];
+      currentFilterFns = _useState9[0],
+      setCurrentFilterFns = _useState9[1];
 
-  var _useState9 = useState((_props$globalFilterTy = props.globalFilterType) != null ? _props$globalFilterTy : MRT_FILTER_TYPE.BEST_MATCH_FIRST),
-      currentGlobalFilterType = _useState9[0],
-      setCurrentGlobalFilterType = _useState9[1];
+  var _useState10 = useState((_props$globalFilterFn = props.globalFilterFn) != null ? _props$globalFilterFn : MRT_FILTER_OPTION.BEST_MATCH_FIRST),
+      currentGlobalFilterFn = _useState10[0],
+      setCurrentGlobalFilterFn = _useState10[1];
 
   var table = useMemo(function () {
     return createTable();
@@ -2894,7 +2961,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   var displayColumns = 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.createElement(MRT_ToggleRowActionMenuButton, {
@@ -2957,12 +3024,12 @@ 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 = useMemo(function () {
     return table.createColumns([].concat(displayColumns, props.columns.map(function (column) {
-      return column.columns ? createGroup(table, column, currentFilterTypes) : createDataColumn(table, column, currentFilterTypes);
+      return column.columns ? createGroup(table, column, currentFilterFns) : createDataColumn(table, column, currentFilterFns);
     })));
-  }, [table, props.columns, currentFilterTypes]);
+  }, [table, props.columns, currentFilterFns]);
   var data = useMemo(function () {
     return props.isLoading && !props.data.length ? [].concat(Array(10).fill(null)).map(function () {
       return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
@@ -2975,7 +3042,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
 
   var tableInstance = _extends({}, useTableInstance(table, _extends({
     //@ts-ignore
-    filterTypes: defaultFilterFNs,
+    filterFns: defaultFilterFNs,
     getColumnFilteredRowModel: getColumnFilteredRowModelSync(),
     getCoreRowModel: getCoreRowModelSync(),
     getExpandedRowModel: getExpandedRowModel(),
@@ -2986,8 +3053,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     getSubRows: function getSubRows(originalRow) {
       return originalRow.subRows;
     },
-    globalFilterType: currentGlobalFilterType,
-    idPrefix: idPrefix,
+    globalFilterFn: currentGlobalFilterFn,
     onPaginationChange: function onPaginationChange(updater) {
       return setPagination(function (old) {
         return functionalUpdate(updater, old);
@@ -2996,10 +3062,14 @@ 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,
+      currentFilterFns: currentFilterFns,
+      currentGlobalFilterFn: currentGlobalFilterFn,
       isDensePadding: isDensePadding,
       isFullScreen: isFullScreen,
       //@ts-ignore
@@ -3008,39 +3078,69 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       showGlobalFilter: showGlobalFilter
     }, props.state)
   })), {
+    //@ts-ignore
+    setCurrentEditingCell: setCurrentEditingCell,
+    //@ts-ignore
     setCurrentEditingRow: setCurrentEditingRow,
-    setCurrentFilterTypes: setCurrentFilterTypes,
-    setCurrentGlobalFilterType: setCurrentGlobalFilterType,
+    setCurrentFilterFns: setCurrentFilterFns,
+    //@ts-ignore
+    setCurrentGlobalFilterFn: setCurrentGlobalFilterFn,
     setIsDensePadding: setIsDensePadding,
     setIsFullScreen: setIsFullScreen,
     setShowFilters: setShowFilters,
     setShowGlobalFilter: setShowGlobalFilter
   });
 
+  useEffect(function () {
+    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;
+    }
+
+    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.createElement(React.Fragment, null, React.createElement(Dialog, {
-    TransitionComponent: Grow,
     PaperComponent: Box,
+    TransitionComponent: Grow,
     disablePortal: true,
     fullScreen: true,
     keepMounted: false,
     onClose: function onClose() {
-      return tableInstance.setIsFullScreen(false);
+      return setIsFullScreen(false);
     },
-    open: tableInstance.getState().isFullScreen,
+    open: isFullScreen,
     transitionDuration: 400
   }, React.createElement(MRT_TablePaper, {
     tableInstance: tableInstance
-  })), !tableInstance.getState().isFullScreen && React.createElement(MRT_TablePaper, {
+  })), !isFullScreen && React.createElement(MRT_TablePaper, {
     tableInstance: tableInstance
   }));
 };
 
-var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "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", "autoResetSorting", "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$autoResetSorting = _ref.autoResetSorting,
+      autoResetSorting = _ref$autoResetSorting === void 0 ? false : _ref$autoResetSorting,
       _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,
@@ -3081,6 +3181,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,
@@ -3093,7 +3195,9 @@ var MaterialReactTable = (function (_ref) {
 
   return React.createElement(MRT_TableRoot, Object.assign({
     autoResetExpanded: autoResetExpanded,
+    autoResetSorting: autoResetSorting,
     columnResizeMode: columnResizeMode,
+    editingMode: editingMode,
     enableColumnActions: enableColumnActions,
     enableColumnResizing: enableColumnResizing,
     enableColumnFilters: enableColumnFilters,
@@ -3115,6 +3219,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,