material-react-table 0.7.3 → 0.7.6

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

@@ -28,7 +28,7 @@ import SortIcon from '@mui/icons-material/Sort';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { createTable, useTableInstance, getColumnFilteredRowModelSync, getCoreRowModelSync, getExpandedRowModel, getGlobalFilteredRowModelSync, getGroupedRowModelSync, getPaginationRowModel, getSortedRowModelSync, functionalUpdate } from '@tanstack/react-table';
-import { IconButton, Menu, MenuItem, FormControlLabel, Switch, Box, Button, Divider, ListItemIcon, Tooltip, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, useMediaQuery, Chip, Alert, LinearProgress, Toolbar, alpha, TableCell, TableSortLabel, TableRow, TableHead, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, Grow } from '@mui/material';
+import { IconButton, Menu, MenuItem, Box, Tooltip, FormControlLabel, Switch, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, useMediaQuery, Chip, Alert, LinearProgress, Toolbar, alpha, TableCell, TableSortLabel, TableRow, TableHead, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, Grow } from '@mui/material';
 import { matchSorter } from 'match-sorter';
 
 function _extends() {
@@ -122,6 +122,7 @@ var MRT_DefaultLocalization_EN = {
   toggleSelectRow: 'Toggle select row',
   ungroupByColumn: 'Ungroup by {column}',
   unpin: 'Unpin',
+  unpinAll: 'Unpin all',
   unsorted: 'Unsorted'
 };
 
@@ -228,21 +229,21 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
   }));
 };
 
-var MRT_FILTER_TYPE;
+var MRT_FILTER_OPTION;
 
-(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 = {}));
+(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 +381,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 +389,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 +493,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,
@@ -510,6 +511,57 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
   }));
 };
 
+var MRT_ColumnPinningButtons = function MRT_ColumnPinningButtons(_ref) {
+  var column = _ref.column,
+      tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      PushPinIcon = _tableInstance$option.icons.PushPinIcon,
+      localization = _tableInstance$option.localization;
+
+  var _getState = getState(),
+      columnOrder = _getState.columnOrder;
+
+  var handlePinColumn = function handlePinColumn(pinDirection) {
+    column.pin(pinDirection);
+
+    if (column.columnDefType === 'display') {
+      tableInstance.setColumnOrder([column.id].concat(columnOrder));
+    }
+  };
+
+  var pinned = column.getIsPinned();
+  return React.createElement(Box, {
+    sx: {
+      mr: '8px'
+    }
+  }, React.createElement(Tooltip, {
+    arrow: true,
+    title: pinned === 'left' ? localization.unpin : localization.pinToLeft
+  }, React.createElement(IconButton, {
+    onClick: function onClick() {
+      return handlePinColumn(pinned === 'left' ? false : 'left');
+    },
+    size: "small"
+  }, React.createElement(PushPinIcon, {
+    style: {
+      transform: pinned === 'left' ? 'rotate(0)' : 'rotate(90deg)'
+    }
+  }))), React.createElement(Tooltip, {
+    arrow: true,
+    title: pinned === 'right' ? localization.unpin : localization.pinToRight
+  }, React.createElement(IconButton, {
+    onClick: function onClick() {
+      return handlePinColumn(pinned === 'right' ? false : 'right');
+    },
+    size: "small"
+  }, React.createElement(PushPinIcon, {
+    style: {
+      transform: pinned === 'right' ? 'rotate(0)' : 'rotate(-90deg)'
+    }
+  }))));
+};
+
 var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   var _column$columns2;
 
@@ -517,7 +569,9 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       isSubMenu = _ref.isSubMenu,
       tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
-      onToggleColumnVisibility = tableInstance.options.onToggleColumnVisibility;
+      _tableInstance$option = tableInstance.options,
+      onToggleColumnVisibility = _tableInstance$option.onToggleColumnVisibility,
+      enablePinning = _tableInstance$option.enablePinning;
 
   var _getState = getState(),
       columnVisibility = _getState.columnVisibility;
@@ -545,10 +599,17 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   };
 
   return React.createElement(React.Fragment, null, React.createElement(MenuItem, {
-    sx: _extends({}, commonMenuItemStyles$1, {
-      pl: (column.depth + 0.5) * 2 + "rem"
-    })
-  }, React.createElement(FormControlLabel, {
+    sx: {
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      my: 0,
+      pl: (column.depth + 0.5) * 2 + "rem",
+      py: '6px'
+    }
+  }, !isSubMenu && enablePinning && React.createElement(MRT_ColumnPinningButtons, {
+    column: column,
+    tableInstance: tableInstance
+  }), React.createElement(FormControlLabel, {
     componentsProps: {
       typography: {
         sx: {
@@ -585,7 +646,9 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
       getState = tableInstance.getState,
       toggleAllColumnsVisible = tableInstance.toggleAllColumnsVisible,
       getAllLeafColumns = tableInstance.getAllLeafColumns,
-      localization = tableInstance.options.localization;
+      _tableInstance$option = tableInstance.options,
+      localization = _tableInstance$option.localization,
+      enablePinning = _tableInstance$option.enablePinning;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding;
@@ -609,9 +672,9 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
     });
     return getIsSomeColumnsPinned() ? [].concat(dataColumns.filter(function (c) {
       return c.getIsPinned() === 'left';
-    }), dataColumns.filter(function (c) {
+    }), [null], dataColumns.filter(function (c) {
       return c.getIsPinned() === false;
-    }), dataColumns.filter(function (c) {
+    }), [null], dataColumns.filter(function (c) {
       return c.getIsPinned() === 'right';
     })) : dataColumns;
   }, [getAllColumns(), getState().columnPinning, getIsSomeColumnsPinned()]);
@@ -634,7 +697,12 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
   }, !isSubMenu && React.createElement(Button, {
     disabled: !getIsSomeColumnsVisible(),
     onClick: hideAllColumns
-  }, localization.hideAll), React.createElement(Button, {
+  }, localization.hideAll), !isSubMenu && enablePinning && React.createElement(Button, {
+    disabled: !getIsSomeColumnsPinned(),
+    onClick: function onClick() {
+      return tableInstance.setColumnPinning({});
+    }
+  }, localization.unpinAll), React.createElement(Button, {
     disabled: getIsAllColumnsVisible(),
     onClick: function onClick() {
       return toggleAllColumnsVisible(true);
@@ -647,11 +715,13 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
       tableInstance: tableInstance
     });
   }), React.createElement(Divider, null), allDataColumns.map(function (column, index) {
-    return React.createElement(MRT_ShowHideColumnsMenuItems, {
+    return column ? React.createElement(MRT_ShowHideColumnsMenuItems, {
       column: column,
       isSubMenu: isSubMenu,
       key: index + "-" + column.id,
       tableInstance: tableInstance
+    }) : React.createElement(Divider, {
+      key: index + "-divider"
     });
   }));
 };
@@ -836,7 +906,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 +1320,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 +1818,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 +1861,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 +1876,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 +1894,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 +1983,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 +2085,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
@@ -2653,10 +2723,10 @@ var MRT_Table = function MRT_Table(_ref) {
       tableInstance = _ref.tableInstance;
   var getTableProps = tableInstance.getTableProps,
       _tableInstance$option = tableInstance.options,
-      muiTableProps = _tableInstance$option.muiTableProps,
-      enableTableHead = _tableInstance$option.enableTableHead,
+      enableStickyHeader = _tableInstance$option.enableStickyHeader,
       enableTableFooter = _tableInstance$option.enableTableFooter,
-      enableStickyHeader = _tableInstance$option.enableStickyHeader;
+      enableTableHead = _tableInstance$option.enableTableHead,
+      muiTableProps = _tableInstance$option.muiTableProps;
   var mTableProps = muiTableProps instanceof Function ? muiTableProps({
     tableInstance: tableInstance
   }) : muiTableProps;
@@ -2692,7 +2762,6 @@ var commonBoxStyles = function commonBoxStyles(_ref) {
 var MRT_TableContainer = function MRT_TableContainer(_ref2) {
   var tableInstance = _ref2.tableInstance;
   var getCenterTableWidth = tableInstance.getCenterTableWidth,
-      getIsSomeColumnsPinned = tableInstance.getIsSomeColumnsPinned,
       getLeftTableWidth = tableInstance.getLeftTableWidth,
       getRightTableWidth = tableInstance.getRightTableWidth,
       getState = tableInstance.getState,
@@ -2703,8 +2772,7 @@ var MRT_TableContainer = function MRT_TableContainer(_ref2) {
       muiTableContainerProps = _tableInstance$option.muiTableContainerProps;
 
   var _getState = getState(),
-      isFullScreen = _getState.isFullScreen,
-      columnPinning = _getState.columnPinning;
+      isFullScreen = _getState.isFullScreen;
 
   var _useState = useState(0),
       totalToolbarHeight = _useState[0],
@@ -2720,6 +2788,8 @@ var MRT_TableContainer = function MRT_TableContainer(_ref2) {
     var bottomToolbarHeight = typeof document !== 'undefined' ? (_document$getElementB3 = (_document2 = document) == null ? void 0 : (_document2$getElement = _document2.getElementById("mrt-" + idPrefix + "-toolbar-bottom")) == null ? void 0 : _document2$getElement.offsetHeight) != null ? _document$getElementB3 : 0 : 0;
     setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
   });
+  var isSomeColumnsPinnedLeft = !!tableInstance.getLeftFlatHeaders().length;
+  var isSomeColumnsPinnedRight = !!tableInstance.getRightFlatHeaders().length;
   return React.createElement(TableContainer, Object.assign({}, tableContainerProps, {
     sx: _extends({
       maxWidth: '100%',
@@ -2729,19 +2799,17 @@ var MRT_TableContainer = function MRT_TableContainer(_ref2) {
     style: {
       maxHeight: isFullScreen ? "calc(100vh - " + totalToolbarHeight + "px)" : undefined
     }
-  }), enablePinning && getIsSomeColumnsPinned() ? React.createElement(Box, {
+  }), enablePinning && isSomeColumnsPinnedLeft || isSomeColumnsPinnedRight ? React.createElement(Box, {
     sx: {
       display: 'grid',
       gridTemplateColumns: getLeftTableWidth() + "fr " + getCenterTableWidth() + "fr " + getRightTableWidth() + "fr"
     }
   }, React.createElement(Box, {
     sx: function sx(theme) {
-      var _columnPinning$left;
-
       return commonBoxStyles({
         pinned: 'left',
         theme: theme,
-        visible: !!((_columnPinning$left = columnPinning.left) != null && _columnPinning$left.length)
+        visible: isSomeColumnsPinnedLeft
       });
     }
   }, React.createElement(MRT_Table, {
@@ -2750,7 +2818,8 @@ var MRT_TableContainer = function MRT_TableContainer(_ref2) {
   })), React.createElement(Box, {
     sx: function sx(theme) {
       return commonBoxStyles({
-        theme: theme
+        theme: theme,
+        visible: !!tableInstance.getCenterFlatHeaders().length
       });
     }
   }, React.createElement(MRT_Table, {
@@ -2758,12 +2827,10 @@ var MRT_TableContainer = function MRT_TableContainer(_ref2) {
     tableInstance: tableInstance
   })), React.createElement(Box, {
     sx: function sx(theme) {
-      var _columnPinning$right;
-
       return commonBoxStyles({
         pinned: 'right',
         theme: theme,
-        visible: !!((_columnPinning$right = columnPinning.right) != null && _columnPinning$right.length)
+        visible: isSomeColumnsPinnedRight
       });
     }
   }, React.createElement(MRT_Table, {
@@ -2851,19 +2918,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))
   );
 };
@@ -2872,7 +2939,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$globalFilterFn;
 
   var _useState = useState(props.idPrefix),
       idPrefix = _useState[0],
@@ -2883,54 +2950,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;
+    }
+
+    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;
+    }
+
+    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 _useState2 = useState((_props$initialState$c = (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.currentEditingCell) != null ? _props$initialState$c : null),
+      if (parsedState) {
+        return _extends({}, props.initialState, parsedState);
+      }
+    }
+
+    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((_props$initialState$c2 = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.currentEditingRow) != null ? _props$initialState$c2 : null),
+  var _useState3 = useState((_initialState$current2 = initialState == null ? void 0 : initialState.currentEditingRow) != null ? _initialState$current2 : null),
       currentEditingRow = _useState3[0],
       setCurrentEditingRow = _useState3[1];
 
-  var _useState4 = useState((_props$initialState$i = (_props$initialState3 = props.initialState) == null ? void 0 : _props$initialState3.isDensePadding) != null ? _props$initialState$i : false),
+  var _useState4 = useState((_initialState$isDense = initialState == null ? void 0 : initialState.isDensePadding) != null ? _initialState$isDense : false),
       isDensePadding = _useState4[0],
       setIsDensePadding = _useState4[1];
 
-  var _useState5 = useState((_props$initialState$i2 = (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.isFullScreen) != null ? _props$initialState$i2 : false),
+  var _useState5 = useState((_initialState$isFullS = initialState == null ? void 0 : initialState.isFullScreen) != null ? _initialState$isFullS : false),
       isFullScreen = _useState5[0],
       setIsFullScreen = _useState5[1];
 
-  var _useState6 = useState((_props$initialState$s = (_props$initialState5 = props.initialState) == null ? void 0 : _props$initialState5.showFilters) != null ? _props$initialState$s : false),
+  var _useState6 = useState((_initialState$showFil = initialState == null ? void 0 : initialState.showFilters) != null ? _initialState$showFil : false),
       showFilters = _useState6[0],
       setShowFilters = _useState6[1];
 
-  var _useState7 = useState((_props$initialState$s2 = (_props$initialState6 = props.initialState) == null ? void 0 : _props$initialState6.showGlobalFilter) != null ? _props$initialState$s2 : false),
+  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: (_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 = 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$filterFn, _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$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 = _useState9[0],
-      setCurrentFilterTypes = _useState9[1];
+      currentFilterFns = _useState9[0],
+      setCurrentFilterFns = _useState9[1];
 
-  var _useState10 = useState((_props$globalFilterTy = props.globalFilterType) != null ? _props$globalFilterTy : MRT_FILTER_TYPE.BEST_MATCH_FIRST),
-      currentGlobalFilterType = _useState10[0],
-      setCurrentGlobalFilterType = _useState10[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();
@@ -3004,9 +3094,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }, [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) {
@@ -3019,7 +3109,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(),
@@ -3030,8 +3120,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);
@@ -3040,11 +3129,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
@@ -3057,36 +3149,61 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     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", "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", "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,
@@ -3131,6 +3248,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,
@@ -3143,6 +3262,7 @@ var MaterialReactTable = (function (_ref) {
 
   return React.createElement(MRT_TableRoot, Object.assign({
     autoResetExpanded: autoResetExpanded,
+    autoResetSorting: autoResetSorting,
     columnResizeMode: columnResizeMode,
     editingMode: editingMode,
     enableColumnActions: enableColumnActions,
@@ -3166,6 +3286,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,