[DataGridPro] Make Row reordering work with pagination

docs/pages/x/api/data-grid/selectors.json

@@ -409,6 +409,12 @@
     "description": "",
     "supportsApiRef": true
   },
+  {
+    "name": "gridRowIndexLookupSelector",
+    "returnType": "Record<GridRowId, number>",
+    "description": "",
+    "supportsApiRef": true
+  },
   {
     "name": "gridRowMaximumTreeDepthSelector",
     "returnType": "number",

packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx

@@ -10,6 +10,7 @@ import {
   gridRowMaximumTreeDepthSelector,
   useGridApiOptionHandler,
   GridRowId,
+  gridRowIndexLookupSelector,
 } from '@mui/x-data-grid';
 import { gridEditRowsStateSelector } from '@mui/x-data-grid/internals';
 import { GridRowOrderChangeParams } from '../../../models/gridRowOrderChangeParams';
@@ -63,6 +64,8 @@ export const useGridRowReorder = (
   const ownerState = { classes: props.classes };
   const classes = useUtilityClasses(ownerState);
   const [dragRowId, setDragRowId] = React.useState<GridRowId>('');
+  const lookup = useGridSelector(apiRef, gridRowIndexLookupSelector);
+  const getRowIndex = React.useCallback((id: GridRowId) => lookup[id], [lookup]);
 
   React.useEffect(() => {
     return () => {
@@ -91,17 +94,16 @@ export const useGridRowReorder = (
 
       dragRowNode.current = event.currentTarget;
       dragRowNode.current.classList.add(classes.rowDragging);
-
       setDragRowId(params.id);
 
       removeDnDStylesTimeout.current = setTimeout(() => {
         dragRowNode.current!.classList.remove(classes.rowDragging);
       });
 
-      originRowIndex.current = apiRef.current.getRowIndexRelativeToVisibleRows(params.id);
+      originRowIndex.current = getRowIndex(params.id);
       apiRef.current.setCellFocus(params.id, GRID_REORDER_COL_DEF.field);
     },
-    [isRowReorderDisabled, classes.rowDragging, logger, apiRef],
+    [apiRef, isRowReorderDisabled, logger, classes.rowDragging, getRowIndex],
   );
 
   const handleDragOver = React.useCallback<GridEventListener<'cellDragOver' | 'rowDragOver'>>(
@@ -127,7 +129,7 @@ export const useGridRowReorder = (
         : event.clientY;
 
       if (params.id !== dragRowId) {
-        const targetRowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(params.id);
+        const targetRowIndex = getRowIndex(params.id);
 
         const dragDirection = mouseMovementDiff > 0 ? Direction.DOWN : Direction.UP;
         const currentReorderState: ReorderStateProps = {
@@ -149,7 +151,7 @@ export const useGridRowReorder = (
 
       previousMousePosition = { x: event.clientX, y: event.clientY };
     },
-    [apiRef, logger, dragRowId],
+    [dragRowId, apiRef, logger, getRowIndex],
   );
 
   const handleDragEnd = React.useCallback<GridEventListener<'rowDragEnd'>>(
@@ -179,7 +181,7 @@ export const useGridRowReorder = (
         // Emit the rowOrderChange event only once when the reordering stops.
         const rowOrderChangeParams: GridRowOrderChangeParams = {
           row: apiRef.current.getRow(dragRowId)!,
-          targetIndex: apiRef.current.getRowIndexRelativeToVisibleRows(params.id),
+          targetIndex: getRowIndex(params.id),
           oldIndex: originRowIndex.current!,
         };
 
@@ -188,7 +190,7 @@ export const useGridRowReorder = (
 
       setDragRowId('');
     },
-    [isRowReorderDisabled, logger, apiRef, dragRowId],
+    [apiRef, dragRowId, isRowReorderDisabled, logger, getRowIndex],
   );
 
   useGridApiEventHandler(apiRef, 'rowDragStart', handleDragStart);

packages/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, fireEvent, createEvent } from '@mui/internal-test-utils';
-import { getCell, getRowsFieldContent } from 'test/utils/helperFn';
+import { createRenderer, fireEvent, screen, createEvent } from '@mui/internal-test-utils';
+import { getCell, getColumnValues, getRowsFieldContent } from 'test/utils/helperFn';
 import { useGridApiRef, DataGridPro, gridClasses, GridApi } from '@mui/x-data-grid-pro';
 import { useBasicDemoData } from '@mui/x-data-grid-generator';
 
@@ -200,4 +200,50 @@ describe('<DataGridPro /> - Row reorder', () => {
     expect(handleDragOver.callCount).to.equal(0);
     expect(handleDragEnd.callCount).to.equal(0);
   });
+
+  it('should reorder rows correctly on any page when pagination is enabled', () => {
+    let apiRef: React.MutableRefObject<GridApi>;
+    const rows = [
+      { id: 0, brand: 'Nike' },
+      { id: 1, brand: 'Adidas' },
+      { id: 2, brand: 'Puma' },
+      { id: 3, brand: 'Skechers' },
+    ];
+    const columns = [{ field: 'brand' }];
+
+    function Test() {
+      apiRef = useGridApiRef();
+
+      return (
+        <div style={{ width: 300, height: 300 }}>
+          <DataGridPro
+            apiRef={apiRef}
+            rows={rows}
+            columns={columns}
+            rowReordering
+            pagination
+            initialState={{
+              pagination: {
+                paginationModel: { pageSize: 2 },
+              },
+            }}
+            pageSizeOptions={[2]}
+          />
+        </div>
+      );
+    }
+
+    render(<Test />);
+    fireEvent.click(screen.getByRole('button', { name: /next page/i }));
+    expect(getColumnValues(0)).to.deep.equal(['2', '3']);
+    expect(getRowsFieldContent('brand')).to.deep.equal(['Puma', 'Skechers']);
+    const rowReorderCell = getCell(2, 0).firstChild!;
+    const targetCell = getCell(3, 0);
+
+    fireEvent.dragStart(rowReorderCell);
+    fireEvent.dragEnter(targetCell);
+    const dragOverEvent = createDragOverEvent(targetCell);
+    fireEvent(targetCell, dragOverEvent);
+    expect(getRowsFieldContent('brand')).to.deep.equal(['Skechers', 'Puma']);
+  });
 });

packages/x-data-grid/src/hooks/features/filter/gridFilterSelector.ts

@@ -248,3 +248,13 @@ export const gridFilterActiveItemsLookupSelector = createSelectorMemoized(
     return result;
   },
 );
+
+export const gridRowIndexLookupSelector = createSelectorMemoized(
+  gridExpandedSortedRowEntriesSelector,
+  (visibleSortedRows) => {
+    return visibleSortedRows.reduce<Record<GridRowId, number>>((acc, { id }, index) => {
+      acc[id] = index;
+      return acc;
+    }, {});
+  },
+);

packages/x-data-grid/src/hooks/features/filter/index.ts

@@ -17,5 +17,6 @@ export {
   gridFilteredDescendantRowCountSelector,
   gridFilterActiveItemsSelector,
   gridFilterActiveItemsLookupSelector,
+  gridRowIndexLookupSelector,
 } from './gridFilterSelector';
 export type { GridFilterActiveItemsLookup } from './gridFilterSelector';

scripts/x-data-grid-premium.exports.json

@@ -520,6 +520,7 @@
   { "name": "GridRowId", "kind": "TypeAlias" },
   { "name": "GridRowIdGetter", "kind": "TypeAlias" },
   { "name": "GridRowIdToModelLookup", "kind": "TypeAlias" },
+  { "name": "gridRowIndexLookupSelector", "kind": "Variable" },
   { "name": "gridRowMaximumTreeDepthSelector", "kind": "Variable" },
   { "name": "GridRowMode", "kind": "TypeAlias" },
   { "name": "GridRowModel", "kind": "TypeAlias" },

scripts/x-data-grid-pro.exports.json

@@ -473,6 +473,7 @@
   { "name": "GridRowId", "kind": "TypeAlias" },
   { "name": "GridRowIdGetter", "kind": "TypeAlias" },
   { "name": "GridRowIdToModelLookup", "kind": "TypeAlias" },
+  { "name": "gridRowIndexLookupSelector", "kind": "Variable" },
   { "name": "gridRowMaximumTreeDepthSelector", "kind": "Variable" },
   { "name": "GridRowMode", "kind": "TypeAlias" },
   { "name": "GridRowModel", "kind": "TypeAlias" },

scripts/x-data-grid.exports.json

@@ -428,6 +428,7 @@
   { "name": "GridRowId", "kind": "TypeAlias" },
   { "name": "GridRowIdGetter", "kind": "TypeAlias" },
   { "name": "GridRowIdToModelLookup", "kind": "TypeAlias" },
+  { "name": "gridRowIndexLookupSelector", "kind": "Variable" },
   { "name": "gridRowMaximumTreeDepthSelector", "kind": "Variable" },
   { "name": "GridRowMode", "kind": "TypeAlias" },
   { "name": "GridRowModel", "kind": "TypeAlias" },