material-react-table 0.16.2 → 0.17.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.16.2",
+  "version": "0.17.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -401,7 +401,6 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     enableGlobalFilterChangeMode?: boolean;
     enableGlobalFilterRankedResults?: boolean;
     enablePagination?: boolean;
-    enablePersistentState?: boolean;
     enableRowActions?: boolean;
     enableRowNumbers?: boolean;
     enableRowVirtualization?: boolean;
@@ -782,7 +781,6 @@ export 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';
@@ -845,6 +843,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
         IconButtonProps & { instance: MRT_TableInstance<D> }
       >;
     }) => ReactNode;
+    rowCount?: number;
     rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
     tableId?: string;
@@ -885,7 +884,6 @@ export default <D extends Record<string, any> = {}>({
   enableToolbarTop = true,
   icons,
   localization,
-  persistentStateMode = 'sessionStorage',
   positionActionsColumn = 'first',
   positionGlobalFilter = 'right',
   positionPagination = 'bottom',
@@ -928,7 +926,6 @@ export default <D extends Record<string, any> = {}>({
     enableToolbarTop={enableToolbarTop}
     icons={{ ...MRT_Default_Icons, ...icons }}
     localization={{ ...MRT_DefaultLocalization_EN, ...localization }}
-    persistentStateMode={persistentStateMode}
     positionActionsColumn={positionActionsColumn}
     positionGlobalFilter={positionGlobalFilter}
     positionPagination={positionPagination}

package/src/inputs/MRT_FilterTextField.tsx

@@ -177,9 +177,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 +199,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 +241,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/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;
   }, []);
 
@@ -284,32 +260,6 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     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,

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}