fix(mui): prevent DataGrid pagination reset (#7105)

Co-authored-by: Alican Erdurmaz <[email protected]>

Author: francoa

.changeset/khaki-tigers-refuse.md

@@ -0,0 +1,9 @@
+---
+"@refinedev/mui": patch
+---
+
+fix: Prevent DataGrid Pagination reset. #7099
+
+Fixed an issue in useDataGrid in which the sortModel sent in response was constantly receiving a new Object, even though the content of it was not changing
+
+Fixes #7099

packages/mui/src/hooks/useDataGrid/index.spec.ts

@@ -307,4 +307,65 @@ describe("useDataGrid Hook", () => {
       );
     });
   });
+
+  it("should not change sortModel when page changes", async () => {
+    const { result } = renderHook(
+      () =>
+        useDataGrid({
+          resource: "posts",
+          sorters: {
+            initial: [
+              {
+                field: "title",
+                order: "asc",
+              },
+            ],
+          },
+        }),
+      {
+        wrapper: TestWrapper({
+          dataProvider: MockJSONServer,
+          resources: [{ name: "posts" }],
+        }),
+      },
+    );
+
+    await waitFor(() => {
+      expect(result.current.tableQuery.isSuccess).toBeTruthy();
+    });
+
+    // Capture initial sortModel
+    const initialSortModel = result.current.dataGridProps.sortModel;
+    expect(initialSortModel).toEqual([
+      {
+        field: "title",
+        sort: "asc",
+      },
+    ]);
+
+    // Change page using onPaginationModelChange from dataGridPaginationValues
+    await act(async () => {
+      result.current.dataGridProps.onPaginationModelChange!(
+        {
+          page: 3,
+          pageSize: 25,
+        },
+        {} as any,
+      );
+    });
+
+    await waitFor(() => {
+      expect(result.current.currentPage).toBe(4);
+    });
+
+    // sortModel should remain the same object reference after page change
+    const sortModelAfterPageChange = result.current.dataGridProps.sortModel;
+    expect(sortModelAfterPageChange).toBe(initialSortModel);
+    expect(sortModelAfterPageChange).toEqual([
+      {
+        field: "title",
+        sort: "asc",
+      },
+    ]);
+  });
 });

packages/mui/src/hooks/useDataGrid/index.ts

@@ -3,7 +3,9 @@ import {
   useLiveMode,
   useTable as useTableCore,
   type BaseRecord,
+  type CrudFilter,
   type CrudFilters,
+  type CrudSort,
   type HttpError,
   type Pagination,
   type Prettify,
@@ -120,6 +122,9 @@ export type UseDataGridReturnType<
  *
  */
 
+const defaultPermanentFilter: CrudFilter[] = [];
+const defaultPermanentSort: CrudSort[] = [];
+
 export function useDataGrid<
   TQueryFnData extends BaseRecord = BaseRecord,
   TError extends HttpError = HttpError,
@@ -207,8 +212,10 @@ export function useDataGrid<
     (sortersFromProp?.mode || "server") === "server";
   const isPaginationEnabled = (pagination?.mode ?? "server") !== "off";
 
-  const preferredPermanentSorters = sortersFromProp?.permanent ?? [];
-  const preferredPermanentFilters = filtersFromProp?.permanent ?? [];
+  const preferredPermanentSorters =
+    sortersFromProp?.permanent ?? defaultPermanentSort;
+  const preferredPermanentFilters =
+    filtersFromProp?.permanent ?? defaultPermanentFilter;
 
   const handlePageChange = (page: number) => {
     if (isPaginationEnabled) {
@@ -303,6 +310,14 @@ export function useDataGrid<
     });
   };
 
+  const transformedSortModel = useMemo(
+    () =>
+      transformCrudSortingToSortModel(
+        differenceWith(sorters, preferredPermanentSorters, isEqual),
+      ),
+    [sorters, preferredPermanentSorters],
+  );
+
   return {
     tableQuery,
     dataGridProps: {
@@ -312,9 +327,7 @@ export function useDataGrid<
       rowCount,
       ...dataGridPaginationValues(),
       sortingMode: isServerSideSortingEnabled ? "server" : "client",
-      sortModel: transformCrudSortingToSortModel(
-        differenceWith(sorters, preferredPermanentSorters, isEqual),
-      ),
+      sortModel: transformedSortModel,
       onSortModelChange: handleSortModelChange,
       filterMode: isServerSideFilteringEnabled ? "server" : "client",
       filterModel: transformCrudFiltersToFilterModel(
@@ -328,7 +341,7 @@ export function useDataGrid<
             return [key, (value as any).type];
           }),
         );
-        const isStateChanged = !isEqual(newColumnsTypes, columnsTypes);
+        const isStateChanged = !isEqual(newColumnsTypes, columnsTypes.current);
 
         if (isStateChanged) {
           columnsTypes.current = newColumnsTypes;