[data grid] Copy and Paste content from cell selection doesn't maintain the sorting set

[roccodev92]

Steps to reproduce

1. Click the link found in the documentation: https://codesandbox.io/p/sandbox/optimistic-shaw-7w78pw?file=%2Fsrc%2FDemo.tsx

2. In the file Demo.tsx - after the sign in into codesandbox- paste the code from the attachment:
   issue_data-grid-premium-copy-and-paste.txt

EDIT: Here is a codesandbox with the code applied already: Example

3. Apply the ascending/descending sort in the column 'code'

4. Select the cells ordered from column 'code' and copy with ctrl+c

5. See the data copied in the ui: the copied content doesnt mantain the order set in the data grid

Current behavior

The copy of cell values does not respect the order set in the data grid for the specific column.

Expected behavior

The copy of cell values of the column mantain the selected order in the data grid.

Context

I'm copying the data from column with a specific sorting to paste them into an excel.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: data-grid-premium-copy-cell, cell copy and paste

[MBilalShafi]

Hey @roccodev92, the clipboard copy indeed doesn't consider the columns sorted row values for the selected cells which could be fixed by doing the following changes to the cell selection plugin, clipboard paste seems to work fine though.

diff --git a/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts b/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts
index 5877bfe51..8675b83b1 100644
--- a/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts
+++ b/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts
@@ -23,6 +23,8 @@ import {
   gridFocusCellSelector,
   GridCellParams,
   GRID_REORDER_COL_DEF,
+  useGridSelector,
+  gridSortedRowIdsSelector,
 } from '@mui/x-data-grid-pro';
 import { gridCellSelectionStateSelector } from './gridCellSelectionSelector';
 import { GridCellSelectionApi } from './gridCellSelectionInterfaces';
@@ -61,6 +63,7 @@ export const useGridCellSelection = (
   const lastMouseDownCell = React.useRef<GridCellCoordinates | null>();
   const mousePosition = React.useRef<{ x: number; y: number } | null>(null);
   const autoScrollRAF = React.useRef<number | null>();
+  const sortedRowIds = useGridSelector(apiRef, gridSortedRowIdsSelector);
 
   const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport;
   const ignoreValueFormatter =
@@ -547,7 +550,9 @@ export const useGridCellSelection = (
         return value;
       }
       const cellSelectionModel = apiRef.current.getCellSelectionModel();
-      const copyData = Object.keys(cellSelectionModel).reduce((acc, rowId) => {
+      const unsortedSelectedRowIds = Object.keys(cellSelectionModel);
+      const sortedSelectedRowIds = sortedRowIds.filter((id) => unsortedSelectedRowIds.includes(`${id}`));
+      const copyData = sortedSelectedRowIds.reduce<string>((acc, rowId) => {
         const fieldsMap = cellSelectionModel[rowId];
         const rowString = Object.keys(fieldsMap).reduce((acc2, field) => {
           let cellData: string;
@@ -566,7 +571,7 @@ export const useGridCellSelection = (
       }, '');
       return copyData;
     },
-    [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter],
+    [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter, sortedRowIds],
   );
 
   useGridRegisterPipeProcessor(apiRef, 'isCellSelected', checkIfCellIsSelected);

@cherniavskii If it was intentionally set like this for some reason during the clipboard feature development, please let me know, otherwise we can fix the issue by doing a change similar to the above diff.

[michelengelen]

Can we push this @MBilalShafi ? It seems a customer has some need for this.

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @roccodev92?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.