diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts b/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts index c40c3c97b9ab..5b1e3978e43e 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts +++ b/packages/grid/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(); const mousePosition = React.useRef<{ x: number; y: number } | null>(null); const autoScrollRAF = React.useRef(); + const sortedRowIds = useGridSelector(apiRef, gridSortedRowIdsSelector); const ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport; const ignoreValueFormatter = @@ -549,7 +552,11 @@ export const useGridCellSelection = ( return value; } const cellSelectionModel = apiRef.current.unstable_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((acc, rowId) => { const fieldsMap = cellSelectionModel[rowId]; const rowString = Object.keys(fieldsMap).reduce((acc2, field) => { let cellData: string; @@ -568,7 +575,7 @@ export const useGridCellSelection = ( }, ''); return copyData; }, - [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter], + [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter, sortedRowIds], ); useGridRegisterPipeProcessor(apiRef, 'isCellSelected', checkIfCellIsSelected); diff --git a/packages/grid/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx index 97eb968aee15..222a4afb4656 100644 --- a/packages/grid/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx @@ -104,6 +104,36 @@ describe(' - Clipboard', () => { fireEvent.keyDown(cell, { key: 'c', keyCode: 67, ctrlKey: true }); expect(writeText.firstCall.args[0]).to.equal([['0', 'USDGBP', '1'].join('\t')].join('\r\n')); }); + + it(`should copy cells range selected based on their sorted order`, () => { + const columns = [{ field: 'brand' }]; + const rows = [ + { id: 0, brand: 'Nike' }, + { id: 1, brand: 'Adidas' }, + { id: 2, brand: 'Puma' }, + ]; + render( + , + ); + + const cell = getCell(0, 0); + cell.focus(); + userEvent.mousePress(cell); + + fireEvent.keyDown(cell, { key: 'Ctrl' }); + fireEvent.click(getCell(1, 0), { ctrlKey: true }); + + fireEvent.keyDown(cell, { key: 'Ctrl' }); + fireEvent.click(getCell(2, 0), { ctrlKey: true }); + + fireEvent.keyDown(cell, { key: 'c', keyCode: 67, ctrlKey: true }); + expect(writeText.lastCall.firstArg).to.equal(['Adidas', 'Nike', 'Puma'].join('\r\n')); + }); }); describe('paste', () => {