React Data GridClipboard

Enterprise

You can copy and paste items to and from the grid using the system clipboard.

How to copy

Copying from the grid is enabled by default for enterprise users. To copy your selection to the system clipboard, you can use the keybind ^ Ctrl+C, or right click on a cell and select 'Copy' from the context menu. Unless Range Selection or Row Selection is enabled, you will only be copying from the currently focused cell.

When copying multiple cells, the contents will be copied in an Excel compatible format, with fields separated by a \t (tab) character.

Copying Cell Ranges

When Cell Ranges are enabled by setting gridOptions.enableRangeSelection=true, copying will copy the Cell Range's content to your clipboard. Select a range by clicking on a cell and dragging with the mouse, then copy with the ^ Ctrl+C keybind.

Multiple cell ranges can be selected at once using ^ Ctrl and dragging with the mouse. When copying, all ranges will be copied to the clipboard. Note that the relative positions of multiple ranges is not preserved when copying, they are stacked vertically in the clipboard.

The column headers can be copied to the clipboard in addition to the cell contents by enabling the option copyHeadersToClipboard.

In the below example copyHeadersToClipboard has been enabled, try:

  • Select a cell range with click & drag
  • Copy with ^ Ctrl+C
  • Paste into an external program / text editor, note that the column headers were also copied.

Copying Rows

When Row Selection is enabled by setting gridOptions.rowSelection to either "single" or "multiple", then copying while a row is selected will add the whole row's contents to your clipboard.

The below example demonstrates copying rows:

  • Please select one or more rows in the example below and press CTRL+C
  • Paste copied content in a text editor
  • Note pasted content includes all selected rows

If you want to use row selection for another purpose and wish to copy the focused cell instead of selected rows, you can disable copying rows by setting gridOptions.suppressCopyRowsToClipboard=true.

The below example demonstrates copying the focused cell only when using row selection:

  • Please select one or more rows in the example below and press CTRL+C
  • Paste copied content in a text editor
  • Note pasted content includes focused cell only

Mixed Copying Cell Ranges & Rows

The copy operation copies the selected content in the following order of precedence:

  1. Cell Ranges (if Range Selection is enabled)
  2. Row Selection (if Row Selection is enabled and suppressCopyRowsToClipboard is not enabled)
  3. Focused Cell

When both range selection and row selection are enabled, the default behaviour of copying ranges over copying rows can make it impossible for users to copy rows (as the selected cell range is copied by default). Enabling the grid option gridOptions.suppressCopySingleCellRanges=true makes it possible to copy the selected rows when only a single cell is selected via range selection.