fix: prevent unnecessary pagination changes by fixing out-of-bounds check (#1376)

Fixes: #1375

Author: fredericbahr

packages/material-react-table/src/hooks/useMRT_Effects.ts

@@ -69,9 +69,12 @@ export const useMRT_Effects = <TData extends MRT_RowData>(
   useEffect(() => {
     if (!enablePagination || isLoading || showSkeletons) return;
     const { pageIndex, pageSize } = pagination;
-    const firstVisibleRowIndex = pageIndex * pageSize;
-    if (firstVisibleRowIndex >= totalRowCount) {
-      table.setPageIndex(Math.ceil(totalRowCount / pageSize) - 1);
+    const totalPages: number =
+      totalRowCount > 0 ? Math.ceil(totalRowCount / pageSize) : 1;
+    const isOutOfBounds: boolean = pageIndex < 0 || pageIndex >= totalPages;
+
+    if (isOutOfBounds) {
+      table.setPageIndex(totalPages - 1);
     }
   }, [totalRowCount, enablePagination, isLoading, showSkeletons]);
 

packages/material-react-table/stories/fixed-bugs/useEffects.stories.tsx

@@ -5,10 +5,12 @@ import MenuItem from '@mui/material/MenuItem';
 import {
   type MRT_ColumnDef,
   type MRT_ColumnFiltersState,
+  MRT_PaginationState,
   MaterialReactTable,
 } from '../../src';
 import { faker } from '@faker-js/faker';
 import { type Meta } from '@storybook/react';
+import { Updater } from '@tanstack/react-table';
 
 const meta: Meta = {
   title: 'Fixed Bugs/useEffects',
@@ -323,3 +325,42 @@ export const DelayedFacetedValues = () => {
     />
   );
 };
+
+export const PreventUnnecessaryPaginationChangeByOutOfBoundsCheck = () => {
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: 5,
+  });
+
+  const columns: MRT_ColumnDef<Person>[] = [
+    {
+      accessorKey: 'firstName',
+      header: 'First Name',
+    },
+    {
+      accessorKey: 'lastName',
+      header: 'Last Name',
+    },
+    {
+      accessorKey: 'address',
+      header: 'Address',
+    },
+  ];
+
+  const handlePaginationChange = (updater: Updater<MRT_PaginationState>) => {
+    console.log('Pagination change should not be triggered');
+    setPagination(updater);
+  };
+
+  return (
+    <MaterialReactTable
+      columns={columns}
+      data={[]}
+      manualPagination={true}
+      rowCount={0}
+      enablePagination
+      onPaginationChange={handlePaginationChange}
+      state={{ pagination }}
+    />
+  );
+};