Tutorial: Copy & Paste

Copy & Paste

Overview

The CopyPaste plugin allows you to easily copy, cut and paste data from and into Handsontable. You can initiate a copy/paste action on every type of cell such as text, number, checkbox and more. The copied values will be kept in the clipboard as a string. Note that the current implementation does not handle styling, validators and other cell properties.

To handle clipboard operations this plugin utilizes Clipboard API events. See the How it works section to learn more about how it works under the hood.

The CopyPaste plugin is enabled by default.

How it works

We use a hidden textarea element as a proxy element when you paste and copy data. For instance, if you paste some values, we first write them to that textarea element and only then parse in order to populate the values within cells.

Copy and cut options in the context menu

When the context menu is enabled, it includes default items among which you will find copy and cut options.

  • Copy - as a predefined key copy
  • Cut - as a predefined key cut

You can use them in the same way as the rest of the predefined items. These operations are executed by document.execCommand().

Paste option in the context menu

Right-clicking in Handsontable to paste data is limited by browsers, for security reasons. Without these measures, different sites could use scripts to steal the data from users’ clipboards. Some companies, like Google, allow you to paste data between their applications, but it is a workaround, not a solution. They use a Clipboard API and you can learn more about it here.

We have prepared a demo in which the Paste option works properly, but only within a single page. If you want to copy data from another page, web application (like Google Sheets) or MS Excel, use a keyboard shortcut instead.

Copy data in the first table and paste to the second (use context menu):

Available hooks

You can integrate the copy/paste feature using any of the available hooks listed below:

Limitations

  1. On Internet Explorer, a user has to confirm (accept) access to the clipboard. You can read more about this behavior of the browser here
  2. The data copied from Handsontable will always be kept as plain text. For instance, if you copy a checked checkbox, the input will be kept as a value of "true".

Help us improve this page