Data Grid - Copy and paste

Copy and paste data using clipboard.

Clipboard copy

You can copy selected grid data to the clipboard using the Ctrl+C (⌘ Command+C on macOS) keyboard shortcut. The copied cell values are separated by a tab (\t) character and the rows are separated by a new line (\n) character.

The priority of the data copied to the clipboard is the following, from highest to lowest:

If more than one cell is selected (see Cell selection), the selected cells are copied
If one or more rows are selected (see Row selection), the selected rows are copied
If there is a single cell selected, the single cell is copied

Copied data:

Clipboard paste

This feature is experimental, it needs to be explicitly activated using the clipboardPaste experimental feature flag.

Additionally, to make sure the copied cells are formatted correctly and can be parsed, it's recommended to set the unstable_ignoreValueFormatterDuringExport prop to true. During clipboard copy operation, the raw cell values will be copied instead of the formatted values, so that the values can be parsed correctly during the paste operation.

<DataGridPremium
  experimentalFeatures={{ clipboardPaste: true }}
  unstable_ignoreValueFormatterDuringExport
/>

You can paste data from clipboard using the Ctrl+V (⌘ Command+V on macOS) keyboard shortcut. The paste operation only affects cells in the columns that are editable.

Same as with editing, you can use valueParser to modify the pasted value and valueSetter to update the row with new values. See Value parser and value setter section of the editing documentation for more details.

The behavior of the clipboard paste operation depends on the selection state of the data grid and the data pasted from clipboard. The priority is the following, from highest to lowest:

If multiple cells are selected (see Cell selection), the selected cells are updated with the pasted values.
If one or more rows are selected (see Row selection), the selected rows are updated with the pasted values.
If a single cell is selected, the values are pasted starting from the selected cell.

<DataGridPremium
  {...data}
  initialState={initialState}
  checkboxSelection
  disableRowSelectionOnClick
  unstable_cellSelection
  experimentalFeatures={{ clipboardPaste: true }}
  unstable_ignoreValueFormatterDuringExport
/>

<DataGridPremium
  {...data}
  initialState={initialState}
  checkboxSelection
  disableRowSelectionOnClick
  unstable_cellSelection
  experimentalFeatures={{ clipboardPaste: true }}
  unstable_ignoreValueFormatterDuringExport
/>

Press Enter to start editing

Disable clipboard paste

To disable clipboard paste, set the disableClipboardPaste prop to true:

<DataGridPremium
  {...data}
  experimentalFeatures={{ clipboardPaste: true }}
  disableClipboardPaste
/>

<DataGridPremium
  {...data}
  experimentalFeatures={{ clipboardPaste: true }}
  disableClipboardPaste
/>

Press Enter to start editing

Persisting pasted data

Clipboard paste uses the same API for persistence as Editing—use the processRowUpdate prop to persist the updated row in your data source:

processRowUpdate?: (newRow: R, oldRow: R) => Promise<R> | R;

The row will be updated with a value returned by the processRowUpdate callback. If the callback throws or returns a rejected promise, the row will not be updated.

The demo below shows how to persist the pasted data in the browser's sessionStorage.

Events

The following events are fired during the clipboard paste operation:

clipboardPasteStart - fired when the clipboard paste operation starts
clipboardPasteEnd - fired when all row updates from clipboard paste have been processed

For convenience, you can also listen to these events using their respective props:

onClipboardPasteStart
onClipboardPasteEnd

The demo below shows how to use these events to display a loading indicator while the clipboard paste operation is in progress:

<DataGridPremium
  {...data}
  loading={loading}
  initialState={initialState}
  unstable_cellSelection
  processRowUpdate={processRowUpdate}
  onClipboardPasteStart={() => setLoading(true)}
  onClipboardPasteEnd={() => setLoading(false)}
  experimentalFeatures={{ clipboardPaste: true }}
  unstable_ignoreValueFormatterDuringExport
/>

<DataGridPremium
  {...data}
  loading={loading}
  initialState={initialState}
  unstable_cellSelection
  processRowUpdate={processRowUpdate}
  onClipboardPasteStart={() => setLoading(true)}
  onClipboardPasteEnd={() => setLoading(false)}
  experimentalFeatures={{ clipboardPaste: true }}
  unstable_ignoreValueFormatterDuringExport
/>

Press Enter to start editing

Format of the clipboard data

By default, the clipboard copy and paste operations use the following format:

The cell values are separated by a tab (\t) character.
The rows are separated by a new line (\n) character.

You can use clipboardCopyCellDelimiter and unstable_splitClipboardPastedText props to change the format:

<DataGridPremium
  {...otherProps}
  // support comma separated values
  clipboardCopyCellDelimiter={','}
  unstable_splitClipboardPastedText={(text) =>
    text.split('\n').map((row) => row.split(','))
  }
/>

The demo below uses , (comma) character as a cell delimiter for both copy and paste operations:

<DataGridPremium
  {...data}
  initialState={initialState}
  disableRowSelectionOnClick
  unstable_cellSelection
  experimentalFeatures={{ clipboardPaste: true }}
  unstable_ignoreValueFormatterDuringExport
  clipboardCopyCellDelimiter={','}
  unstable_splitClipboardPastedText={(text) =>
    text.split('\n').map((row) => row.split(','))
  }
/>

<DataGridPremium
  {...data}
  initialState={initialState}
  disableRowSelectionOnClick
  unstable_cellSelection
  experimentalFeatures={{ clipboardPaste: true }}
  unstable_ignoreValueFormatterDuringExport
  clipboardCopyCellDelimiter={','}
  unstable_splitClipboardPastedText={(text) =>
    text.split('\n').map((row) => row.split(','))
  }
/>

Press Enter to start editing