# KendoReact Grid Clipboard

You can perform all standard clipboard operations from and to the Grid by using the system clipboard.

<CtaPanelOverview></CtaPanelOverview>

The Grid clipboard supports the following keyboard shortcuts:

| SHORTCUT                 | DESCRIPTION                       |
| :----------------------- | :-------------------------------- |
| `Ctrl/Cmd (for Mac) + C` | Copy selected or focused content. |
| `Ctrl/Cmd (for Mac) + X` | Cut selected or focused content.  |
| `Ctrl/Cmd (for Mac) + V` | Paste the clipboard content.      |

To enable the built-in clipboard feature:

1. Enable the [selection](https://www.telerik.com/kendo-react-ui-develop/components/grid/selection) feature of the Grid and handle its built in `select` state.
2. Enable the [`clipboard`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#clipboard) property to enable the clipboard copy, cut and paste operations.
3. Handle the [`onClipboard`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#onclipboard) function and use the [`populateClipboardData`](https://www.telerik.com/kendo-react-ui-develop/components/datatools/api/populateclipboarddata) function to update the Grid data as necessary by using the available copied cells.

As a result, the Grid allows you to:

* Copy/paste/cut a single cell or row
* Copy/paste/cut multiple cells or rows
* Copy/paste/cut a range of cells or rows by dragging

The [`populateClipboardData`](https://www.telerik.com/kendo-react-ui-develop/components/datatools/api/populateclipboarddata) function populates the clipboard data. It takes the [`ClipboardDataEvent`](https://www.telerik.com/kendo-react-ui-develop/components/datatools/api/clipboarddataevent) event arguments, the current data loaded in the Grid and the selection state, and returns the [ClipboardData](https://www.telerik.com/kendo-react-ui-develop/components/datatools/api/clipboarddata) containing the collection of copied and pasted items.

In case you want to disable any of the copy/paste/cut operations, you can determine the current action type based on the `event.type` value of the `ClipboardDataEvent` object.

The following example demonstrates how to cut or copy selected row(s) and paste the copied content in the same Grid or in Microsoft Excel.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/clipboard/clipboard-basic/source.txt)

## Clipboard Settings

The content of the Grid is copied in an Excel compatible format where the cells are separated by a tab character (`\t`) and the rows are separated by new line (`\n`) character. You can customize the default clipboard behavior by using the following clipboard settings:

* [`cellDelimitter`](https://www.telerik.com/kendo-react-ui-develop/components/datatools/api/clipboardsettings#celldelimiter)—Determines what is the delimiter used to separate the cells. Defaults to `'\t'`.
* [`copyHeaders`](https://www.telerik.com/kendo-react-ui-develop/components/datatools/api/clipboardsettings#copyheaders)—Determines whether column titles or field names will be included in the generated data during the `copy` and `cut` actions. Defaults to `false`.
* [`newLineDelimiter`](https://www.telerik.com/kendo-react-ui-develop/components/datatools/api/clipboardsettings#newlinedelimiter)—Determines what is the delimiter used to separate the rows. Defaults to `'\r\n'`.

The following example illustrates how by activating the `copyHeaders` prop you gain the ability to copy the headers of the selected cells, regardless of whether the headers are included in the current selection. To test this functionality copy a range of cells from the Grid below and paste them in Microsoft Excel:

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/clipboard/clipboard-headers/source.txt)

## Suggested Links

* [API Reference of the Grid](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/grid)
* [API Index of the Grid](https://www.telerik.com/kendo-react-ui-develop/components/grid/api)
* [PopulateClipboard](https://www.telerik.com/kendo-react-ui-develop/components/datatools/api/populateclipboardargs)