material-react-table 0.16.2 → 0.18.0

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

@@ -191,7 +191,6 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
       ExpandMoreIcon = _instance$options.icons.ExpandMoreIcon,
       localization = _instance$options.localization,
       muiExpandButtonProps = _instance$options.muiExpandButtonProps,
-      onExpandChanged = _instance$options.onExpandChanged,
       renderDetailPanel = _instance$options.renderDetailPanel;
 
   var _getState = getState(),
@@ -202,13 +201,8 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
     row: row
   }) : muiExpandButtonProps;
 
-  var handleToggleExpand = function handleToggleExpand(event) {
+  var handleToggleExpand = function handleToggleExpand() {
     row.toggleExpanded();
-    onExpandChanged == null ? void 0 : onExpandChanged({
-      event: event,
-      row: row,
-      instance: instance
-    });
   };
 
   return React.createElement(Tooltip, {
@@ -870,7 +864,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 +874,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 +981,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 +1033,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,
@@ -1298,16 +1297,11 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   var row = _ref.row,
       selectAll = _ref.selectAll,
       instance = _ref.instance;
-  var getRowModel = instance.getRowModel,
-      getPaginationRowModel = instance.getPaginationRowModel,
-      getSelectedRowModel = instance.getSelectedRowModel,
-      getState = instance.getState,
+  var getState = instance.getState,
       _instance$options = instance.options,
       localization = _instance$options.localization,
       muiSelectCheckboxProps = _instance$options.muiSelectCheckboxProps,
       muiSelectAllCheckboxProps = _instance$options.muiSelectAllCheckboxProps,
-      onRowSelectionChanged = _instance$options.onRowSelectionChanged,
-      onRowSelectAllChanged = _instance$options.onRowSelectAllChanged,
       selectAllMode = _instance$options.selectAllMode;
 
   var _getState = getState(),
@@ -1320,22 +1314,8 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
       } else if (selectAllMode === 'page') {
         instance.getToggleAllPageRowsSelectedHandler()(event);
       }
-
-      onRowSelectAllChanged == null ? void 0 : onRowSelectAllChanged({
-        event: event,
-        selectedRows: event.target.checked ? selectAllMode === 'all' ? getRowModel().flatRows : getPaginationRowModel().flatRows : [],
-        instance: instance
-      });
     } else if (row) {
       row == null ? void 0 : row.getToggleSelectedHandler()(event);
-      onRowSelectionChanged == null ? void 0 : onRowSelectionChanged({
-        event: event,
-        row: row,
-        selectedRows: event.target.checked ? [].concat(getSelectedRowModel().flatRows, [row]) : getSelectedRowModel().flatRows.filter(function (selectedRow) {
-          return selectedRow.id !== row.id;
-        }),
-        instance: instance
-      });
     }
   };
 
@@ -1377,18 +1357,12 @@ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
       FullscreenExitIcon = _instance$options$ico.FullscreenExitIcon,
       FullscreenIcon = _instance$options$ico.FullscreenIcon,
       localization = _instance$options.localization,
-      onIsFullScreenChanged = _instance$options.onIsFullScreenChanged,
       setIsFullScreen = instance.setIsFullScreen;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
 
-  var handleToggleFullScreen = function handleToggleFullScreen(event) {
-    onIsFullScreenChanged == null ? void 0 : onIsFullScreenChanged({
-      event: event,
-      isFullScreen: !isFullScreen,
-      instance: instance
-    });
+  var handleToggleFullScreen = function handleToggleFullScreen() {
     setIsFullScreen(!isFullScreen);
   };
 
@@ -1443,19 +1417,13 @@ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
       DensityMediumIcon = _instance$options$ico.DensityMediumIcon,
       DensitySmallIcon = _instance$options$ico.DensitySmallIcon,
       localization = _instance$options.localization,
-      onDensityChanged = _instance$options.onDensityChanged,
       setDensity = instance.setDensity;
 
   var _getState = getState(),
       density = _getState.density;
 
-  var handleToggleDensePadding = function handleToggleDensePadding(event) {
+  var handleToggleDensePadding = function handleToggleDensePadding() {
     var nextDensity = density === 'comfortable' ? 'compact' : density === 'compact' ? 'spacious' : 'comfortable';
-    onDensityChanged == null ? void 0 : onDensityChanged({
-      event: event,
-      density: nextDensity,
-      instance: instance
-    });
     setDensity(nextDensity);
   };
 
@@ -1479,18 +1447,12 @@ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
       FilterListIcon = _instance$options$ico.FilterListIcon,
       FilterListOffIcon = _instance$options$ico.FilterListOffIcon,
       localization = _instance$options.localization,
-      onShowFiltersChanged = _instance$options.onShowFiltersChanged,
       setShowFilters = instance.setShowFilters;
 
   var _getState = getState(),
       showFilters = _getState.showFilters;
 
-  var handleToggleShowFilters = function handleToggleShowFilters(event) {
-    onShowFiltersChanged == null ? void 0 : onShowFiltersChanged({
-      event: event,
-      showFilters: !showFilters,
-      instance: instance
-    });
+  var handleToggleShowFilters = function handleToggleShowFilters() {
     setShowFilters(!showFilters);
   };
 
@@ -1516,7 +1478,6 @@ var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
       tableId = _instance$options.tableId,
       localization = _instance$options.localization,
       muiSearchTextFieldProps = _instance$options.muiSearchTextFieldProps,
-      onShowGlobalFilterChanged = _instance$options.onShowGlobalFilterChanged,
       setShowGlobalFilter = instance.setShowGlobalFilter;
 
   var _getState = getState(),
@@ -1526,12 +1487,7 @@ var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
     instance: instance
   }) : muiSearchTextFieldProps;
 
-  var handleToggleSearch = function handleToggleSearch(event) {
-    onShowGlobalFilterChanged == null ? void 0 : onShowGlobalFilterChanged({
-      event: event,
-      showGlobalFilter: !showGlobalFilter,
-      instance: instance
-    });
+  var handleToggleSearch = function handleToggleSearch() {
     setShowGlobalFilter(!showGlobalFilter);
     setTimeout(function () {
       var _document$getElementB, _textFieldProps$id;
@@ -1561,8 +1517,6 @@ var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
       CloseIcon = _instance$options$ico.CloseIcon,
       localization = _instance$options.localization,
       muiSearchTextFieldProps = _instance$options.muiSearchTextFieldProps,
-      onGlobalFilterValueChanged = _instance$options.onGlobalFilterValueChanged,
-      onGlobalFilterValueChangedDebounced = _instance$options.onGlobalFilterValueChangedDebounced,
       tableId = _instance$options.tableId;
 
   var _getState = getState(),
@@ -1581,19 +1535,11 @@ var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
     var _event$target$value;
 
     setGlobalFilter((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
-    onGlobalFilterValueChangedDebounced == null ? void 0 : onGlobalFilterValueChangedDebounced({
-      event: event,
-      instance: instance
-    });
   }, 250), []);
 
   var handleChange = function handleChange(event) {
     setSearchValue(event.target.value);
     handleChangeDebounced(event);
-    onGlobalFilterValueChanged == null ? void 0 : onGlobalFilterValueChanged({
-      event: event,
-      instance: instance
-    });
   };
 
   var handleGlobalFilterMenuOpen = function handleGlobalFilterMenuOpen(event) {
@@ -1703,7 +1649,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 +1668,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 +1682,7 @@ var MRT_TablePagination = function MRT_TablePagination(_ref) {
       }
     },
     component: "div",
-    count: getPrePaginationRowModel().rows.length,
+    count: totalRowCount,
     onPageChange: function onPageChange(_, newPage) {
       return setPageIndex(newPage);
     },
@@ -1767,7 +1715,8 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
       muiTableToolbarAlertBannerProps = _instance$options.muiTableToolbarAlertBannerProps;
 
   var _getState = getState(),
-      grouping = _getState.grouping;
+      grouping = _getState.grouping,
+      showAlertBanner = _getState.showAlertBanner;
 
   var alertProps = muiTableToolbarAlertBannerProps instanceof Function ? muiTableToolbarAlertBannerProps({
     instance: instance
@@ -1785,7 +1734,7 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
     }));
   })) : null;
   return React.createElement(Collapse, {
-    "in": !!selectMessage || !!groupedByMessage,
+    "in": showAlertBanner || !!selectMessage || !!groupedByMessage,
     timeout: stackAlertBanner ? 200 : 0
   }, React.createElement(Alert, Object.assign({
     color: "info",
@@ -1988,7 +1937,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,
@@ -2002,8 +1951,6 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       CloseIcon = _instance$options$ico.CloseIcon,
       localization = _instance$options.localization,
       muiTableHeadCellFilterTextFieldProps = _instance$options.muiTableHeadCellFilterTextFieldProps,
-      onColumnFilterValueChanged = _instance$options.onColumnFilterValueChanged,
-      onColumnFilterValueChangedDebounced = _instance$options.onColumnFilterValueChangedDebounced,
       tableId = _instance$options.tableId,
       setCurrentFilterFns = instance.setCurrentFilterFns;
   var column = header.column;
@@ -2047,36 +1994,11 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
 
       column.setFilterValue((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
     }
-
-    onColumnFilterValueChangedDebounced == null ? void 0 : onColumnFilterValueChangedDebounced({
-      column: column,
-      event: event,
-      filterValue: event.target.value,
-      instance: instance
-    });
-    columnDef.onColumnFilterValueChangedDebounced == null ? void 0 : columnDef.onColumnFilterValueChangedDebounced({
-      column: column,
-      event: event,
-      filterValue: event.target.value,
-      instance: instance
-    });
   }, 200), []);
 
   var handleChange = function handleChange(event) {
     setFilterValue(event.target.value);
     handleChangeDebounced(event);
-    onColumnFilterValueChanged == null ? void 0 : onColumnFilterValueChanged({
-      column: column,
-      event: event,
-      filterValue: event.target.value,
-      instance: instance
-    });
-    columnDef.onColumnFilterValueChanged == null ? void 0 : columnDef.onColumnFilterValueChanged({
-      column: column,
-      event: event,
-      filterValue: event.target.value,
-      instance: instance
-    });
   };
 
   var handleFilterMenuOpen = function handleFilterMenuOpen(event) {
@@ -2121,7 +2043,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 +2055,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 +2077,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,
@@ -2319,6 +2241,7 @@ var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref)
   var getState = instance.getState;
 
   var _getState = getState(),
+      density = _getState.density,
       showFilters = _getState.showFilters;
 
   var column = header.column;
@@ -2335,13 +2258,14 @@ var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref)
         borderRightWidth: '2px',
         cursor: 'col-resize',
         height: showFilters && columnDefType === 'data' ? '4rem' : '2rem',
+        mr: density === 'compact' ? '-0.5rem' : '-1rem',
         opacity: 0.8,
         position: 'absolute',
-        mr: '-1rem',
         right: '1px',
         touchAction: 'none',
         transition: column.getIsResizing() ? undefined : 'all 0.2s ease-in-out',
         userSelect: 'none',
+        zIndex: 4,
         '&:active': {
           backgroundColor: theme.palette.info.main,
           opacity: 1
@@ -2667,7 +2591,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
       enableEditing = _instance$options.enableEditing,
       muiTableBodyCellEditTextFieldProps = _instance$options.muiTableBodyCellEditTextFieldProps,
       onCellEditBlur = _instance$options.onCellEditBlur,
-      onCellEditChanged = _instance$options.onCellEditChanged,
+      onCellEditChange = _instance$options.onCellEditChange,
       setCurrentEditingCell = instance.setCurrentEditingCell,
       setCurrentEditingRow = instance.setCurrentEditingRow;
 
@@ -2681,12 +2605,12 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
 
   var handleChange = function handleChange(event) {
     setValue(event.target.value);
-    columnDef.onCellEditChanged == null ? void 0 : columnDef.onCellEditChanged({
+    columnDef.onCellEditChange == null ? void 0 : columnDef.onCellEditChange({
       event: event,
       cell: cell,
       instance: instance
     });
-    onCellEditChanged == null ? void 0 : onCellEditChanged({
+    onCellEditChange == null ? void 0 : onCellEditChange({
       event: event,
       cell: cell,
       instance: instance
@@ -2825,8 +2749,6 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       enableRowNumbers = _instance$options.enableRowNumbers,
       muiTableBodyCellProps = _instance$options.muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps = _instance$options.muiTableBodyCellSkeletonProps,
-      onCellClick = _instance$options.onCellClick,
-      onRowClick = _instance$options.onRowClick,
       rowNumberMode = _instance$options.rowNumberMode,
       tableId = _instance$options.tableId,
       setColumnOrder = instance.setColumnOrder,
@@ -2898,13 +2820,6 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   };
 
   return React.createElement(TableCell, Object.assign({
-    onClick: function onClick(event) {
-      return onCellClick == null ? void 0 : onCellClick({
-        event: event,
-        cell: cell,
-        instance: instance
-      });
-    },
     onDoubleClick: handleDoubleClick
   }, tableCellProps, {
     ref: columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined,
@@ -2914,7 +2829,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       return _extends({
         backgroundColor: column.getIsPinned() ? alpha(lighten(theme.palette.background["default"], 0.04), 0.95) : undefined,
         boxShadow: getIsLastLeftPinnedColumn() ? "4px 0 4px -2px " + alpha(theme.palette.common.black, 0.1) : getIsFirstRightPinnedColumn() ? "-4px 0 4px -2px " + alpha(theme.palette.common.black, 0.1) : undefined,
-        cursor: isEditable && editingMode === 'cell' || onRowClick || onCellClick ? 'pointer' : 'text',
+        cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
         left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
         overflow: 'hidden',
         p: density === 'compact' ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : density === 'comfortable' ? columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem' : columnDefType === 'display' ? '1rem 1.25rem' : '1.5rem',
@@ -2966,7 +2881,6 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
       _instance$options = instance.options,
       muiTableBodyRowProps = _instance$options.muiTableBodyRowProps,
       muiTableDetailPanelProps = _instance$options.muiTableDetailPanelProps,
-      onDetailPanelClick = _instance$options.onDetailPanelClick,
       renderDetailPanel = _instance$options.renderDetailPanel;
   var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
     row: row,
@@ -2977,14 +2891,7 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
     instance: instance
   }) : muiTableDetailPanelProps;
   return React.createElement(TableRow, Object.assign({}, tableRowProps), React.createElement(TableCell, Object.assign({
-    colSpan: getVisibleLeafColumns().length,
-    onClick: function onClick(event) {
-      return onDetailPanelClick == null ? void 0 : onDetailPanelClick({
-        event: event,
-        row: row,
-        instance: instance
-      });
-    }
+    colSpan: getVisibleLeafColumns().length
   }, tableCellProps, {
     sx: _extends({
       borderBottom: !row.getIsExpanded() ? 'none' : undefined,
@@ -3008,7 +2915,6 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
   var getIsSomeColumnsPinned = instance.getIsSomeColumnsPinned,
       _instance$options = instance.options,
       muiTableBodyRowProps = _instance$options.muiTableBodyRowProps,
-      onRowClick = _instance$options.onRowClick,
       renderDetailPanel = _instance$options.renderDetailPanel;
   var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
     row: row,
@@ -3016,13 +2922,6 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
   }) : muiTableBodyRowProps;
   return React.createElement(React.Fragment, null, React.createElement(TableRow, Object.assign({
     hover: true,
-    onClick: function onClick(event) {
-      return onRowClick == null ? void 0 : onRowClick({
-        event: event,
-        row: row,
-        instance: instance
-      });
-    },
     selected: row.getIsSelected()
   }, tableRowProps, {
     sx: function sx(theme) {
@@ -3356,7 +3255,7 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
 };
 
 var MRT_TableRoot = function MRT_TableRoot(props) {
-  var _initialState$columnO, _initialState$current, _initialState$current2, _initialState$density, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onDensityChang, _props$onIsFullScreen, _props$onShowFiltersC, _props$onShowGlobalFi;
+  var _initialState$columnO, _initialState$current, _initialState$current2, _initialState$density, _initialState$isFullS, _props$initialState$s, _props$initialState2, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onDensityChang, _props$onIsFullScreen, _props$onShowAlertBan, _props$onShowFiltersC, _props$onShowGlobalFi;
 
   var _useState = useState(props.tableId),
       tableId = _useState[0],
@@ -3372,29 +3271,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;
   }, []);
 
@@ -3418,27 +3294,31 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       isFullScreen = _useState6[0],
       setIsFullScreen = _useState6[1];
 
-  var _useState7 = useState((_initialState$showFil = initialState == null ? void 0 : initialState.showFilters) != null ? _initialState$showFil : false),
-      showFilters = _useState7[0],
-      setShowFilters = _useState7[1];
+  var _useState7 = useState((_props$initialState$s = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.showAlertBanner) != null ? _props$initialState$s : false),
+      showAlertBanner = _useState7[0],
+      setShowAlertBanner = _useState7[1];
+
+  var _useState8 = useState((_initialState$showFil = initialState == null ? void 0 : initialState.showFilters) != null ? _initialState$showFil : false),
+      showFilters = _useState8[0],
+      setShowFilters = _useState8[1];
 
-  var _useState8 = useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
-      showGlobalFilter = _useState8[0],
-      setShowGlobalFilter = _useState8[1];
+  var _useState9 = useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
+      showGlobalFilter = _useState9[0],
+      setShowGlobalFilter = _useState9[1];
 
-  var _useState9 = useState(function () {
+  var _useState10 = useState(function () {
     return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
       var _ref, _c$filterFn, _initialState$current3, _c$filterSelectOption, _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) ? 'equals' : 'fuzzy', _ref2;
     })));
   }),
-      currentFilterFns = _useState9[0],
-      setCurrentFilterFns = _useState9[1];
+      currentFilterFns = _useState10[0],
+      setCurrentFilterFns = _useState10[1];
 
-  var _useState10 = useState((_props$globalFilterFn = props.globalFilterFn) != null ? _props$globalFilterFn : 'fuzzy'),
-      currentGlobalFilterFn = _useState10[0],
-      setCurrentGlobalFilterFn = _useState10[1];
+  var _useState11 = useState((_props$globalFilterFn = props.globalFilterFn) != null ? _props$globalFilterFn : 'fuzzy'),
+      currentGlobalFilterFn = _useState11[0],
+      setCurrentGlobalFilterFn = _useState11[1];
 
   var table = useMemo(function () {
     return (// @ts-ignore
@@ -3562,6 +3442,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       currentGlobalFilterFn: currentGlobalFilterFn,
       density: density,
       isFullScreen: isFullScreen,
+      showAlertBanner: showAlertBanner,
       showFilters: showFilters,
       showGlobalFilter: showGlobalFilter
     }, props.state),
@@ -3573,53 +3454,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     setCurrentGlobalFilterFn: (_props$onCurrentGloba = props.onCurrentGlobalFilterFnChange) != null ? _props$onCurrentGloba : setCurrentGlobalFilterFn,
     setDensity: (_props$onDensityChang = props.onDensityChange) != null ? _props$onDensityChang : setDensity,
     setIsFullScreen: (_props$onIsFullScreen = props.onIsFullScreenChange) != null ? _props$onIsFullScreen : setIsFullScreen,
+    setShowAlertBanner: (_props$onShowAlertBan = props.onShowAlertBannerChange) != null ? _props$onShowAlertBan : setShowAlertBanner,
     setShowFilters: (_props$onShowFiltersC = props.onShowFiltersChange) != null ? _props$onShowFiltersC : setShowFilters,
     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,
-      //@ts-ignore
-      instance: instance
-    });
-  }, [instance.getState().columnOrder]);
-  useEffect(function () {
-    props == null ? void 0 : props.onColumnPinningChanged == null ? void 0 : props.onColumnPinningChanged({
-      columnPinning: instance.getState().columnPinning,
-      //@ts-ignore
-      instance: instance
-    });
-  }, [instance.getState().columnPinning]);
-  useEffect(function () {
-    props == null ? void 0 : props.onColumnVisibilityChanged == null ? void 0 : props.onColumnVisibilityChanged({
-      columnPinning: instance.getState().columnVisibility,
-      //@ts-ignore
-      instance: instance
-    });
-  }, [instance.getState().columnVisibility]);
   return React.createElement(React.Fragment, null, React.createElement(Dialog, {
     PaperComponent: Box,
     TransitionComponent: Grow,
@@ -3638,7 +3477,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 +3547,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 +3595,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,