material-react-table 0.16.2 → 0.17.0

package/README.md

@@ -59,7 +59,7 @@ _All features can easily be enabled/disabled_
 - [x] Localization (i18n) support
 - [x] Manage your own state
 - [x] Pagination (supports client-side and server-side)
-- [x] Persistent State
+- [x] Remote/Server-side sorting and filtering supported
 - [x] Row Actions
 - [x] Row Numbers
 - [x] Row Selection (checkboxes)

package/dist/MaterialReactTable.d.ts

@@ -198,7 +198,6 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
     enableGlobalFilterChangeMode?: boolean;
     enableGlobalFilterRankedResults?: boolean;
     enablePagination?: boolean;
-    enablePersistentState?: boolean;
     enableRowActions?: boolean;
     enableRowNumbers?: boolean;
     enableRowVirtualization?: boolean;
@@ -419,7 +418,6 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
         instance: MRT_TableInstance<D>;
         showGlobalFilter: boolean;
     }) => void;
-    persistentStateMode?: 'localStorage' | 'sessionStorage';
     positionActionsColumn?: 'first' | 'last';
     positionGlobalFilter?: 'left' | 'right';
     positionPagination?: 'bottom' | 'top' | 'both';
@@ -461,10 +459,11 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
             instance: MRT_TableInstance<D>;
         }>;
     }) => ReactNode;
+    rowCount?: number;
     rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
     tableId?: string;
     virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>>;
 };
-declare const _default: <D extends Record<string, any> = {}>({ 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, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
+declare const _default: <D extends Record<string, any> = {}>({ 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, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
 export default _default;

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

@@ -3651,7 +3651,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,
@@ -3661,12 +3661,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,
@@ -3766,6 +3768,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__default.createElement(material.Menu, {
     anchorEl: anchorEl,
     open: !!anchorEl,
@@ -3815,21 +3820,21 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header))), !columnDef.filterSelectOptions && React__default.createElement(material.IconButton, {
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header))), showFilterModeSubMenu && React__default.createElement(material.IconButton, {
     onClick: handleOpenFilterModeMenu,
     onMouseEnter: handleOpenFilterModeMenu,
     size: "small",
     sx: {
       p: 0
     }
-  }, React__default.createElement(ArrowRightIcon, null))), React__default.createElement(MRT_FilterOptionMenu, {
+  }, React__default.createElement(ArrowRightIcon, null))), showFilterModeSubMenu && React__default.createElement(MRT_FilterOptionMenu, {
     anchorEl: filterMenuAnchorEl,
     header: header,
     key: 2,
     onSelect: handleFilterByColumn,
     setAnchorEl: setFilterMenuAnchorEl,
     instance: instance
-  })], enableGrouping && column.getCanGroup() && [React__default.createElement(material.MenuItem, {
+  })].filter(Boolean), enableGrouping && column.getCanGroup() && [React__default.createElement(material.MenuItem, {
     divider: enablePinning,
     key: 0,
     onClick: handleGroupByColumn,
@@ -5455,7 +5460,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,
@@ -5473,7 +5479,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__default.createElement(material.TablePagination, Object.assign({
     SelectProps: {
       sx: {
@@ -5486,7 +5493,7 @@ var MRT_TablePagination = function MRT_TablePagination(_ref) {
       }
     },
     component: "div",
-    count: getPrePaginationRowModel().rows.length,
+    count: totalRowCount,
     onPageChange: function onPageChange(_, newPage) {
       return setPageIndex(newPage);
     },
@@ -5740,7 +5747,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,
@@ -5873,7 +5880,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__default.createElement(React__default.Fragment, null, React__default.createElement(material.TextField, Object.assign({
     fullWidth: true,
     id: filterId,
@@ -5885,7 +5892,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__default.createElement("label", {
+    helperText: showChangeModeButton ? React__default.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
@@ -5907,7 +5914,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__default.createElement(material.InputAdornment, {
+      startAdornment: showChangeModeButton ? React__default.createElement(material.InputAdornment, {
         position: "start"
       }, React__default.createElement(material.Tooltip, {
         arrow: true,
@@ -7616,29 +7623,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') {
-      {
-        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;
   }, []);
 
@@ -7821,28 +7805,6 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     setShowGlobalFilter: (_props$onShowGlobalFi = props.onShowGlobalFilterChange) != null ? _props$onShowGlobalFi : setShowGlobalFilter
   });
 
-  React.useEffect(function () {
-    if (typeof window === 'undefined' || !props.enablePersistentState) {
-      return;
-    }
-
-    if (!props.tableId && "development" !== '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]);
   React.useEffect(function () {
     props == null ? void 0 : props.onColumnOrderChanged == null ? void 0 : props.onColumnOrderChanged({
       columnOrder: instance.getState().columnOrder,
@@ -7882,7 +7844,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,
@@ -7952,8 +7914,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,
@@ -8002,7 +7962,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,