material-react-table 0.16.2 → 0.18.0

package/src/inputs/MRT_FilterTextField.tsx

@@ -37,8 +37,6 @@ export const MRT_FilterTextField: FC<Props> = ({
       icons: { FilterListIcon, CloseIcon },
       localization,
       muiTableHeadCellFilterTextFieldProps,
-      onColumnFilterValueChanged,
-      onColumnFilterValueChangedDebounced,
       tableId,
     },
     setCurrentFilterFns,
@@ -87,18 +85,6 @@ export const MRT_FilterTextField: FC<Props> = ({
       } else {
         column.setFilterValue(event.target.value ?? undefined);
       }
-      onColumnFilterValueChangedDebounced?.({
-        column,
-        event,
-        filterValue: event.target.value,
-        instance,
-      });
-      columnDef.onColumnFilterValueChangedDebounced?.({
-        column,
-        event,
-        filterValue: event.target.value,
-        instance,
-      });
     }, 200),
     [],
   );
@@ -106,18 +92,6 @@ export const MRT_FilterTextField: FC<Props> = ({
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setFilterValue(event.target.value);
     handleChangeDebounced(event);
-    onColumnFilterValueChanged?.({
-      column,
-      event,
-      filterValue: event.target.value,
-      instance,
-    });
-    columnDef.onColumnFilterValueChanged?.({
-      column,
-      event,
-      filterValue: event.target.value,
-      instance,
-    });
   };
 
   const handleFilterMenuOpen = (event: MouseEvent<HTMLElement>) => {
@@ -177,9 +151,13 @@ export const MRT_FilterTextField: FC<Props> = ({
   const allowedColumnFilterOptions =
     columnDef?.enabledColumnFilterOptions ?? enabledColumnFilterOptions;
 
-  const allowColumnChangeMode =
+  const showChangeModeButton =
     enableColumnFilterChangeMode &&
-    columnDef.enableColumnFilterChangeMode !== false;
+    columnDef.enableColumnFilterChangeMode !== false &&
+    !isSelectFilter &&
+    !inputIndex &&
+    (allowedColumnFilterOptions === undefined ||
+      !!allowedColumnFilterOptions?.length);
 
   return (
     <>
@@ -195,10 +173,7 @@ export const MRT_FilterTextField: FC<Props> = ({
           title: filterPlaceholder,
         }}
         helperText={
-          allowColumnChangeMode &&
-          !inputIndex &&
-          (allowedColumnFilterOptions === undefined ||
-            (allowedColumnFilterOptions?.length ?? 0) > 0) ? (
+          showChangeModeButton ? (
             <label htmlFor={filterId}>
               {filterFn instanceof Function
                 ? localization.filterMode.replace(
@@ -240,35 +215,30 @@ export const MRT_FilterTextField: FC<Props> = ({
         value={filterValue ?? ''}
         variant="standard"
         InputProps={{
-          startAdornment:
-            allowColumnChangeMode &&
-            !isSelectFilter &&
-            !inputIndex &&
-            (allowedColumnFilterOptions === undefined ||
-              !!allowedColumnFilterOptions?.length) ? (
-              <InputAdornment position="start">
-                <Tooltip arrow title={localization.changeFilterMode}>
-                  <span>
-                    <IconButton
-                      aria-label={localization.changeFilterMode}
-                      onClick={handleFilterMenuOpen}
-                      size="small"
-                      sx={{ height: '1.75rem', width: '1.75rem' }}
-                    >
-                      <FilterListIcon />
-                    </IconButton>
-                  </span>
-                </Tooltip>
-                {filterChipLabel && (
-                  <Chip
-                    onDelete={handleClearFilterChip}
-                    label={filterChipLabel}
-                  />
-                )}
-              </InputAdornment>
-            ) : (
-              <FilterListIcon />
-            ),
+          startAdornment: showChangeModeButton ? (
+            <InputAdornment position="start">
+              <Tooltip arrow title={localization.changeFilterMode}>
+                <span>
+                  <IconButton
+                    aria-label={localization.changeFilterMode}
+                    onClick={handleFilterMenuOpen}
+                    size="small"
+                    sx={{ height: '1.75rem', width: '1.75rem' }}
+                  >
+                    <FilterListIcon />
+                  </IconButton>
+                </span>
+              </Tooltip>
+              {filterChipLabel && (
+                <Chip
+                  onDelete={handleClearFilterChip}
+                  label={filterChipLabel}
+                />
+              )}
+            </InputAdornment>
+          ) : (
+            <FilterListIcon />
+          ),
           endAdornment: !filterChipLabel && (
             <InputAdornment position="end">
               <Tooltip

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -29,8 +29,6 @@ export const MRT_GlobalFilterTextField: FC<Props> = ({ instance }) => {
       icons: { SearchIcon, CloseIcon },
       localization,
       muiSearchTextFieldProps,
-      onGlobalFilterValueChanged,
-      onGlobalFilterValueChangedDebounced,
       tableId,
     },
   } = instance;
@@ -43,7 +41,6 @@ export const MRT_GlobalFilterTextField: FC<Props> = ({ instance }) => {
   const handleChangeDebounced = useCallback(
     debounce((event: ChangeEvent<HTMLInputElement>) => {
       setGlobalFilter(event.target.value ?? undefined);
-      onGlobalFilterValueChangedDebounced?.({ event, instance });
     }, 250),
     [],
   );
@@ -51,7 +48,6 @@ export const MRT_GlobalFilterTextField: FC<Props> = ({ instance }) => {
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setSearchValue(event.target.value);
     handleChangeDebounced(event);
-    onGlobalFilterValueChanged?.({ event, instance });
   };
 
   const handleGlobalFilterMenuOpen = (event: MouseEvent<HTMLElement>) => {

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -10,16 +10,11 @@ interface Props {
 
 export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
   const {
-    getRowModel,
-    getPaginationRowModel,
-    getSelectedRowModel,
     getState,
     options: {
       localization,
       muiSelectCheckboxProps,
       muiSelectAllCheckboxProps,
-      onRowSelectionChanged,
-      onRowSelectAllChanged,
       selectAllMode,
     },
   } = instance;
@@ -33,27 +28,8 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
       } else if (selectAllMode === 'page') {
         instance.getToggleAllPageRowsSelectedHandler()(event as any);
       }
-      onRowSelectAllChanged?.({
-        event,
-        selectedRows: event.target.checked
-          ? selectAllMode === 'all'
-            ? getRowModel().flatRows
-            : getPaginationRowModel().flatRows
-          : [],
-        instance,
-      });
     } else if (row) {
       row?.getToggleSelectedHandler()(event as any);
-      onRowSelectionChanged?.({
-        event,
-        row,
-        selectedRows: event.target.checked
-          ? [...getSelectedRowModel().flatRows, row]
-          : getSelectedRowModel().flatRows.filter(
-              (selectedRow) => selectedRow.id !== row.id,
-            ),
-        instance,
-      });
     }
   };
 

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -34,12 +34,14 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     toggleAllColumnsVisible,
     setColumnOrder,
     options: {
+      enableColumnFilterChangeMode,
       enableColumnFilters,
       enableColumnResizing,
       enableGrouping,
       enableHiding,
       enablePinning,
       enableSorting,
+      enabledColumnFilterOptions,
       icons: {
         ArrowRightIcon,
         ClearAllIcon,
@@ -144,6 +146,18 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setShowHideColumnsMenuAnchorEl(event.currentTarget);
   };
 
+  const isSelectFilter = !!columnDef.filterSelectOptions;
+
+  const allowedColumnFilterOptions =
+    columnDef?.enabledColumnFilterOptions ?? enabledColumnFilterOptions;
+
+  const showFilterModeSubMenu =
+    enableColumnFilterChangeMode &&
+    columnDef.enableColumnFilterChangeMode !== false &&
+    !isSelectFilter &&
+    (allowedColumnFilterOptions === undefined ||
+      !!allowedColumnFilterOptions?.length);
+
   return (
     <Menu
       anchorEl={anchorEl}
@@ -203,7 +217,8 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           </MenuItem>,
         ]}
       {enableColumnFilters &&
-        column.getCanFilter() && [
+        column.getCanFilter() &&
+        [
           <MenuItem
             disabled={!column.getFilterValue()}
             key={0}
@@ -232,7 +247,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
                 String(columnDef.header),
               )}
             </Box>
-            {!columnDef.filterSelectOptions && (
+            {showFilterModeSubMenu && (
               <IconButton
                 onClick={handleOpenFilterModeMenu}
                 onMouseEnter={handleOpenFilterModeMenu}
@@ -243,15 +258,17 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </IconButton>
             )}
           </MenuItem>,
-          <MRT_FilterOptionMenu
-            anchorEl={filterMenuAnchorEl}
-            header={header}
-            key={2}
-            onSelect={handleFilterByColumn}
-            setAnchorEl={setFilterMenuAnchorEl}
-            instance={instance}
-          />,
-        ]}
+          showFilterModeSubMenu && (
+            <MRT_FilterOptionMenu
+              anchorEl={filterMenuAnchorEl}
+              header={header}
+              key={2}
+              onSelect={handleFilterByColumn}
+              setAnchorEl={setFilterMenuAnchorEl}
+              instance={instance}
+            />
+          ),
+        ].filter(Boolean)}
       {enableGrouping &&
         column.getCanGroup() && [
           <MenuItem

package/src/table/MRT_TableRoot.tsx

@@ -56,30 +56,6 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     const initState = props.initialState ?? {};
     initState.columnOrder =
       initState.columnOrder ?? 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;
-    }
-    const storedState =
-      props.persistentStateMode === 'localStorage'
-        ? localStorage.getItem(`mrt-${tableId}-table-state`)
-        : props.persistentStateMode === 'sessionStorage'
-        ? sessionStorage.getItem(`mrt-${tableId}-table-state`)
-        : '{}';
-    if (storedState) {
-      const parsedState = JSON.parse(storedState);
-      if (parsedState) {
-        return { ...initState, ...parsedState };
-      }
-    }
     return initState;
   }, []);
 
@@ -97,6 +73,9 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   const [isFullScreen, setIsFullScreen] = useState(
     initialState?.isFullScreen ?? false,
   );
+  const [showAlertBanner, setShowAlertBanner] = useState(
+    props.initialState?.showAlertBanner ?? false,
+  );
   const [showFilters, setShowFilters] = useState(
     initialState?.showFilters ?? false,
   );
@@ -265,6 +244,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         currentGlobalFilterFn,
         density,
         isFullScreen,
+        showAlertBanner,
         showFilters,
         showGlobalFilter,
         ...props.state,
@@ -280,60 +260,11 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
       props.onCurrentGlobalFilterFnChange ?? setCurrentGlobalFilterFn,
     setDensity: props.onDensityChange ?? setDensity,
     setIsFullScreen: props.onIsFullScreenChange ?? setIsFullScreen,
+    setShowAlertBanner: props.onShowAlertBannerChange ?? setShowAlertBanner,
     setShowFilters: props.onShowFiltersChange ?? setShowFilters,
     setShowGlobalFilter: props.onShowGlobalFilterChange ?? setShowGlobalFilter,
   } as MRT_TableInstance;
 
-  useEffect(() => {
-    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;
-    }
-    const itemArgs: [string, string] = [
-      `mrt-${tableId}-table-state`,
-      JSON.stringify(instance.getState()),
-    ];
-    if (props.persistentStateMode === 'localStorage') {
-      localStorage.setItem(...itemArgs);
-    } else if (props.persistentStateMode === 'sessionStorage') {
-      sessionStorage.setItem(...itemArgs);
-    }
-  }, [
-    props.enablePersistentState,
-    props.tableId,
-    props.persistentStateMode,
-    instance,
-  ]);
-
-  useEffect(() => {
-    props?.onColumnOrderChanged?.({
-      columnOrder: instance.getState().columnOrder,
-      //@ts-ignore
-      instance,
-    });
-  }, [instance.getState().columnOrder]);
-
-  useEffect(() => {
-    props?.onColumnPinningChanged?.({
-      columnPinning: instance.getState().columnPinning,
-      //@ts-ignore
-      instance,
-    });
-  }, [instance.getState().columnPinning]);
-
-  useEffect(() => {
-    props?.onColumnVisibilityChanged?.({
-      columnPinning: instance.getState().columnVisibility,
-      //@ts-ignore
-      instance,
-    });
-  }, [instance.getState().columnVisibility]);
-
   return (
     <>
       <Dialog

package/src/toolbar/MRT_TablePagination.tsx

@@ -13,7 +13,11 @@ export const MRT_TablePagination: FC<Props> = ({ instance, position }) => {
     getState,
     setPageIndex,
     setPageSize,
-    options: { muiTablePaginationProps, enableToolbarInternalActions },
+    options: {
+      muiTablePaginationProps,
+      enableToolbarInternalActions,
+      rowCount,
+    },
   } = instance;
 
   const {
@@ -30,8 +34,9 @@ export const MRT_TablePagination: FC<Props> = ({ instance, position }) => {
     setPageSize(+event.target.value);
   };
 
-  const showFirstLastPageButtons =
-    getPrePaginationRowModel().rows.length / pageSize > 2;
+  const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
+
+  const showFirstLastPageButtons = totalRowCount / pageSize > 2;
 
   return (
     <TablePagination
@@ -40,7 +45,7 @@ export const MRT_TablePagination: FC<Props> = ({ instance, position }) => {
         MenuProps: { MenuListProps: { disablePadding: true } },
       }}
       component="div"
-      count={getPrePaginationRowModel().rows.length}
+      count={totalRowCount}
       onPageChange={(_: any, newPage: number) => setPageIndex(newPage)}
       onRowsPerPageChange={handleChangeRowsPerPage}
       page={pageIndex}

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -18,7 +18,7 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
     options: { localization, muiTableToolbarAlertBannerProps },
   } = instance;
 
-  const { grouping } = getState();
+  const { grouping, showAlertBanner } = getState();
 
   const alertProps =
     muiTableToolbarAlertBannerProps instanceof Function
@@ -57,7 +57,7 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
 
   return (
     <Collapse
-      in={!!selectMessage || !!groupedByMessage}
+      in={showAlertBanner || !!selectMessage || !!groupedByMessage}
       timeout={stackAlertBanner ? 200 : 0}
     >
       <Alert