material-react-table 0.16.2 → 0.17.0

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

@@ -870,7 +870,7 @@ var commonListItemStyles = {
   alignItems: 'center'
 };
 var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
-  var _localization$sortByC, _localization$sortByC2, _localization$filterB, _localization, _localization$hideCol, _localization$showAll;
+  var _columnDef$enabledCol, _localization$sortByC, _localization$sortByC2, _localization$filterB, _localization, _localization$hideCol, _localization$showAll;
 
   var anchorEl = _ref.anchorEl,
       header = _ref.header,
@@ -880,12 +880,14 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       toggleAllColumnsVisible = instance.toggleAllColumnsVisible,
       setColumnOrder = instance.setColumnOrder,
       _instance$options = instance.options,
+      enableColumnFilterChangeMode = _instance$options.enableColumnFilterChangeMode,
       enableColumnFilters = _instance$options.enableColumnFilters,
       enableColumnResizing = _instance$options.enableColumnResizing,
       enableGrouping = _instance$options.enableGrouping,
       enableHiding = _instance$options.enableHiding,
       enablePinning = _instance$options.enablePinning,
       enableSorting = _instance$options.enableSorting,
+      enabledColumnFilterOptions = _instance$options.enabledColumnFilterOptions,
       _instance$options$ico = _instance$options.icons,
       ArrowRightIcon = _instance$options$ico.ArrowRightIcon,
       ClearAllIcon = _instance$options$ico.ClearAllIcon,
@@ -985,6 +987,9 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     setShowHideColumnsMenuAnchorEl(event.currentTarget);
   };
 
+  var isSelectFilter = !!columnDef.filterSelectOptions;
+  var allowedColumnFilterOptions = (_columnDef$enabledCol = columnDef == null ? void 0 : columnDef.enabledColumnFilterOptions) != null ? _columnDef$enabledCol : enabledColumnFilterOptions;
+  var showFilterModeSubMenu = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !isSelectFilter && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
   return React.createElement(Menu, {
     anchorEl: anchorEl,
     open: !!anchorEl,
@@ -1034,21 +1039,21 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header))), !columnDef.filterSelectOptions && React.createElement(IconButton, {
+  }, React.createElement(ListItemIcon, null, React.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header))), showFilterModeSubMenu && React.createElement(IconButton, {
     onClick: handleOpenFilterModeMenu,
     onMouseEnter: handleOpenFilterModeMenu,
     size: "small",
     sx: {
       p: 0
     }
-  }, React.createElement(ArrowRightIcon, null))), React.createElement(MRT_FilterOptionMenu, {
+  }, React.createElement(ArrowRightIcon, null))), showFilterModeSubMenu && React.createElement(MRT_FilterOptionMenu, {
     anchorEl: filterMenuAnchorEl,
     header: header,
     key: 2,
     onSelect: handleFilterByColumn,
     setAnchorEl: setFilterMenuAnchorEl,
     instance: instance
-  })], enableGrouping && column.getCanGroup() && [React.createElement(MenuItem, {
+  })].filter(Boolean), enableGrouping && column.getCanGroup() && [React.createElement(MenuItem, {
     divider: enablePinning,
     key: 0,
     onClick: handleGroupByColumn,
@@ -1703,7 +1708,8 @@ var MRT_TablePagination = function MRT_TablePagination(_ref) {
       setPageSize = instance.setPageSize,
       _instance$options = instance.options,
       muiTablePaginationProps = _instance$options.muiTablePaginationProps,
-      enableToolbarInternalActions = _instance$options.enableToolbarInternalActions;
+      enableToolbarInternalActions = _instance$options.enableToolbarInternalActions,
+      rowCount = _instance$options.rowCount;
 
   var _getState = getState(),
       _getState$pagination = _getState.pagination,
@@ -1721,7 +1727,8 @@ var MRT_TablePagination = function MRT_TablePagination(_ref) {
     setPageSize(+event.target.value);
   };
 
-  var showFirstLastPageButtons = getPrePaginationRowModel().rows.length / pageSize > 2;
+  var totalRowCount = rowCount != null ? rowCount : getPrePaginationRowModel().rows.length;
+  var showFirstLastPageButtons = totalRowCount / pageSize > 2;
   return React.createElement(TablePagination, Object.assign({
     SelectProps: {
       sx: {
@@ -1734,7 +1741,7 @@ var MRT_TablePagination = function MRT_TablePagination(_ref) {
       }
     },
     component: "div",
-    count: getPrePaginationRowModel().rows.length,
+    count: totalRowCount,
     onPageChange: function onPageChange(_, newPage) {
       return setPageIndex(newPage);
     },
@@ -1988,7 +1995,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
 };
 
 var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
-  var _localization$filterB, _columnDef$enabledCol, _allowedColumnFilterO, _localization$filterM, _localization, _localization$clearFi, _columnDef$filterSele;
+  var _localization$filterB, _columnDef$enabledCol, _localization$filterM, _localization, _localization$clearFi, _columnDef$filterSele;
 
   var header = _ref.header,
       inputIndex = _ref.inputIndex,
@@ -2121,7 +2128,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))] : '';
   var filterPlaceholder = inputIndex === undefined ? (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header)) : inputIndex === 0 ? localization.min : inputIndex === 1 ? localization.max : '';
   var allowedColumnFilterOptions = (_columnDef$enabledCol = columnDef == null ? void 0 : columnDef.enabledColumnFilterOptions) != null ? _columnDef$enabledCol : enabledColumnFilterOptions;
-  var allowColumnChangeMode = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false;
+  var showChangeModeButton = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !isSelectFilter && !inputIndex && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
   return React.createElement(React.Fragment, null, React.createElement(TextField, Object.assign({
     fullWidth: true,
     id: filterId,
@@ -2133,7 +2140,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       },
       title: filterPlaceholder
     },
-    helperText: allowColumnChangeMode && !inputIndex && (allowedColumnFilterOptions === undefined || ((_allowedColumnFilterO = allowedColumnFilterOptions == null ? void 0 : allowedColumnFilterOptions.length) != null ? _allowedColumnFilterO : 0) > 0) ? React.createElement("label", {
+    helperText: showChangeModeButton ? React.createElement("label", {
       htmlFor: filterId
     }, 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
@@ -2155,7 +2162,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     value: filterValue != null ? filterValue : '',
     variant: "standard",
     InputProps: {
-      startAdornment: allowColumnChangeMode && !isSelectFilter && !inputIndex && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length)) ? React.createElement(InputAdornment, {
+      startAdornment: showChangeModeButton ? React.createElement(InputAdornment, {
         position: "start"
       }, React.createElement(Tooltip, {
         arrow: true,
@@ -3372,29 +3379,6 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
 
     var initState = (_props$initialState = props.initialState) != null ? _props$initialState : {};
     initState.columnOrder = (_initState$columnOrde = initState.columnOrder) != null ? _initState$columnOrde : getDefaultColumnOrderIds(props);
-
-    if (!props.enablePersistentState || !props.tableId) {
-      return initState;
-    }
-
-    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 initState;
-    }
-
-    var storedState = props.persistentStateMode === 'localStorage' ? localStorage.getItem("mrt-" + tableId + "-table-state") : props.persistentStateMode === 'sessionStorage' ? sessionStorage.getItem("mrt-" + tableId + "-table-state") : '{}';
-
-    if (storedState) {
-      var parsedState = JSON.parse(storedState);
-
-      if (parsedState) {
-        return _extends({}, initState, parsedState);
-      }
-    }
-
     return initState;
   }, []);
 
@@ -3577,28 +3561,6 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     setShowGlobalFilter: (_props$onShowGlobalFi = props.onShowGlobalFilterChange) != null ? _props$onShowGlobalFi : setShowGlobalFilter
   });
 
-  useEffect(function () {
-    if (typeof window === 'undefined' || !props.enablePersistentState) {
-      return;
-    }
-
-    if (!props.tableId && process.env.NODE_ENV !== 'production') {
-      console.warn('a unique tableId prop is required for persistent table state to work');
-      return;
-    }
-
-    var itemArgs = ["mrt-" + tableId + "-table-state", JSON.stringify(instance.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.tableId, props.persistentStateMode, instance]);
   useEffect(function () {
     props == null ? void 0 : props.onColumnOrderChanged == null ? void 0 : props.onColumnOrderChanged({
       columnOrder: instance.getState().columnOrder,
@@ -3638,7 +3600,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }));
 };
 
-var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilterChangeMode", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterChangeMode", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
+var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilterChangeMode", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterChangeMode", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "positionActionsColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
 var MaterialReactTable = (function (_ref) {
   var _ref$autoResetExpande = _ref.autoResetExpanded,
       autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
@@ -3708,8 +3670,6 @@ 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$positionGlobalFi = _ref.positionGlobalFilter,
@@ -3758,7 +3718,6 @@ var MaterialReactTable = (function (_ref) {
     enableToolbarTop: enableToolbarTop,
     icons: _extends({}, MRT_Default_Icons, icons),
     localization: _extends({}, MRT_DefaultLocalization_EN, localization),
-    persistentStateMode: persistentStateMode,
     positionActionsColumn: positionActionsColumn,
     positionGlobalFilter: positionGlobalFilter,
     positionPagination: positionPagination,