material-react-table 1.9.2 → 1.9.3

package/dist/esm/types/MaterialReactTable.d.ts

@@ -179,7 +179,7 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Prettify
     } | null>>;
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;
     setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
-    setShowFilters: Dispatch<SetStateAction<boolean>>;
+    setShowColumnFilters: Dispatch<SetStateAction<boolean>>;
     setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
     setShowToolbarDropZone: Dispatch<SetStateAction<boolean>>;
 }>;
@@ -656,7 +656,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Pr
     onHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
     onIsFullScreenChange?: OnChangeFn<boolean>;
     onShowAlertBannerChange?: OnChangeFn<boolean>;
-    onShowFiltersChange?: OnChangeFn<boolean>;
+    onShowColumnFiltersChange?: OnChangeFn<boolean>;
     onShowGlobalFilterChange?: OnChangeFn<boolean>;
     onShowToolbarDropZoneChange?: OnChangeFn<boolean>;
     positionActionsColumn?: 'first' | 'last';

package/dist/index.d.ts

@@ -300,7 +300,7 @@ type MRT_TableInstance<TData extends Record<string, any> = {}> = Prettify<Omit<T
     } | null>>;
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;
     setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
-    setShowFilters: Dispatch<SetStateAction<boolean>>;
+    setShowColumnFilters: Dispatch<SetStateAction<boolean>>;
     setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
     setShowToolbarDropZone: Dispatch<SetStateAction<boolean>>;
 }>;
@@ -777,7 +777,7 @@ type MaterialReactTableProps<TData extends Record<string, any> = {}> = Prettify<
     onHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
     onIsFullScreenChange?: OnChangeFn<boolean>;
     onShowAlertBannerChange?: OnChangeFn<boolean>;
-    onShowFiltersChange?: OnChangeFn<boolean>;
+    onShowColumnFiltersChange?: OnChangeFn<boolean>;
     onShowGlobalFilterChange?: OnChangeFn<boolean>;
     onShowToolbarDropZoneChange?: OnChangeFn<boolean>;
     positionActionsColumn?: 'first' | 'last';

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.9.2",
+  "version": "1.9.3",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -90,7 +90,7 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.8.4",
-    "@tanstack/react-table": "8.8.4",
+    "@tanstack/react-table": "8.8.5",
     "@tanstack/react-virtual": "3.0.0-beta.54",
     "highlight-words": "1.2.1"
   }

package/src/MaterialReactTable.tsx

@@ -262,7 +262,7 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> =
       >;
       setIsFullScreen: Dispatch<SetStateAction<boolean>>;
       setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
-      setShowFilters: Dispatch<SetStateAction<boolean>>;
+      setShowColumnFilters: Dispatch<SetStateAction<boolean>>;
       setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
       setShowToolbarDropZone: Dispatch<SetStateAction<boolean>>;
     }
@@ -883,7 +883,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
       onHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
       onIsFullScreenChange?: OnChangeFn<boolean>;
       onShowAlertBannerChange?: OnChangeFn<boolean>;
-      onShowFiltersChange?: OnChangeFn<boolean>;
+      onShowColumnFiltersChange?: OnChangeFn<boolean>;
       onShowGlobalFilterChange?: OnChangeFn<boolean>;
       onShowToolbarDropZoneChange?: OnChangeFn<boolean>;
       positionActionsColumn?: 'first' | 'last';

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -21,12 +21,12 @@ export const MRT_ToggleFiltersButton = <
       icons: { FilterListIcon, FilterListOffIcon },
       localization,
     },
-    setShowFilters,
+    setShowColumnFilters,
   } = table;
   const { showColumnFilters } = getState();
 
   const handleToggleShowFilters = () => {
-    setShowFilters(!showColumnFilters);
+    setShowColumnFilters(!showColumnFilters);
   };
 
   return (

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -17,7 +17,7 @@ export const MRT_TableHeadCellFilterLabel = ({ header, table }: Props) => {
       localization,
     },
     refs: { filterInputRefs },
-    setShowFilters,
+    setShowColumnFilters,
   } = table;
   const { column } = header;
   const { columnDef } = column;
@@ -66,7 +66,7 @@ export const MRT_TableHeadCellFilterLabel = ({ header, table }: Props) => {
           <IconButton
             disableRipple
             onClick={(event: MouseEvent<HTMLButtonElement>) => {
-              setShowFilters(true);
+              setShowColumnFilters(true);
               queueMicrotask(() => {
                 filterInputRefs.current[`${column.id}-0`]?.focus();
                 filterInputRefs.current[`${column.id}-0`]?.select();

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -3,6 +3,7 @@ import React, {
   MouseEvent,
   useCallback,
   useEffect,
+  useRef,
   useState,
 } from 'react';
 import Collapse from '@mui/material/Collapse';
@@ -42,6 +43,7 @@ export const MRT_GlobalFilterTextField = <
       ? muiSearchTextFieldProps({ table })
       : muiSearchTextFieldProps;
 
+  const isMounted = useRef(false);
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [searchValue, setSearchValue] = useState(globalFilter ?? '');
 
@@ -70,9 +72,14 @@ export const MRT_GlobalFilterTextField = <
   };
 
   useEffect(() => {
-    if (globalFilter === undefined) {
-      handleClear();
+    if (isMounted.current) {
+      if (globalFilter === undefined) {
+        handleClear();
+      } else {
+        setSearchValue(globalFilter);
+      }
     }
+    isMounted.current = true;
   }, [globalFilter]);
 
   return (

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -63,7 +63,7 @@ export const MRT_ColumnActionMenu = ({
     },
     refs: { filterInputRefs },
     setColumnSizingInfo,
-    setShowFilters,
+    setShowColumnFilters,
   } = table;
   const { column } = header;
   const { columnDef } = column;
@@ -117,7 +117,7 @@ export const MRT_ColumnActionMenu = ({
   };
 
   const handleFilterByColumn = () => {
-    setShowFilters(true);
+    setShowColumnFilters(true);
     queueMicrotask(() => filterInputRefs.current[`${column.id}-0`]?.focus());
     setAnchorEl(null);
   };

package/src/table/MRT_TableRoot.tsx

@@ -113,7 +113,7 @@ export const MRT_TableRoot: any = <TData extends Record<string, any> = {}>(
   const [showAlertBanner, setShowAlertBanner] = useState<boolean>(
     props.initialState?.showAlertBanner ?? false,
   );
-  const [showColumnFilters, setShowFilters] = useState<boolean>(
+  const [showColumnFilters, setShowColumnFilters] = useState<boolean>(
     initialState?.showColumnFilters ?? false,
   );
   const [showGlobalFilter, setShowGlobalFilter] = useState<boolean>(
@@ -326,7 +326,8 @@ export const MRT_TableRoot: any = <TData extends Record<string, any> = {}>(
     setHoveredRow: props.onHoveredRowChange ?? setHoveredRow,
     setIsFullScreen: props.onIsFullScreenChange ?? setIsFullScreen,
     setShowAlertBanner: props.onShowAlertBannerChange ?? setShowAlertBanner,
-    setShowFilters: props.onShowFiltersChange ?? setShowFilters,
+    setShowColumnFilters:
+      props.onShowColumnFiltersChange ?? setShowColumnFilters,
     setShowGlobalFilter: props.onShowGlobalFilterChange ?? setShowGlobalFilter,
     setShowToolbarDropZone:
       props.onShowToolbarDropZoneChange ?? setShowToolbarDropZone,
@@ -360,6 +361,17 @@ export const MRT_TableRoot: any = <TData extends Record<string, any> = {}>(
     }
   }, [table.getState().isFullScreen]);
 
+  //if page index is out of bounds, set it to the last page
+  useEffect(() => {
+    const { pageIndex, pageSize } = table.getState().pagination;
+    const totalRowCount =
+      props.rowCount ?? table.getPrePaginationRowModel().rows.length;
+    const firstVisibleRowIndex = pageIndex * pageSize;
+    if (firstVisibleRowIndex > totalRowCount) {
+      table.setPageIndex(Math.floor(totalRowCount / pageSize));
+    }
+  }, [props.rowCount, table.getPrePaginationRowModel().rows.length]);
+
   return (
     <>
       <Dialog

package/src/toolbar/MRT_TablePagination.tsx

@@ -59,7 +59,10 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
       labelRowsPerPage={localization.rowsPerPage}
       onPageChange={(_: any, newPage: number) => setPageIndex(newPage)}
       onRowsPerPageChange={handleChangeRowsPerPage}
-      page={pageIndex}
+      page={Math.max(
+        Math.min(pageIndex, Math.ceil(totalRowCount / pageSize) - 1),
+        0,
+      )}
       rowsPerPage={pageSize}
       rowsPerPageOptions={[5, 10, 15, 20, 25, 30, 50, 100]}
       showFirstButton={showFirstLastPageButtons}