This page covers a next version of Handsontable, and is not published yet.

This page covers a non-latest version of Handsontable.

# Clipboard

# Overview

The clipboard offers Copy & Cut and Paste functionality, enabling you to copy & cut cell data from Handsontable and paste it to the system clipboard. This can be achieved either via shortcut keys or by triggering a copy & cut or paste programmatically.

# Copy & Cut

Copy & Cut actions allow exporting data from Handsontable to the system clipboard. The CopyPaste plugin copies and cuts data as a text/plain and a text/html MIME-type.

# End-user usage

Available keyboard shortcuts:

  • CTRL/CMD + C - copies the content of the last cell in the selected range
  • CTRL/CMD + X - cuts the content of the last cell in the selected range

Available options in the browser's toolbar:

  • Edit > Copy - copies the content of the last cell in the selected range
  • Edit > Cut - cuts the content of the last cell in the selected range

# Context menu

When the context menu is enabled, it includes default items, including copy & 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 in the context menu. These operations are executed by document.execCommand().

const container = document.querySelector('#example1');

const hot = new Handsontable(container, {
  data: Handsontable.helper.createSpreadsheetData(5, 5),
  rowHeaders: true,
  colHeaders: true,
  contextMenu: ['copy', 'cut'],
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation'
});

# Trigger copy & cut programmatically

First, select a cell range to copy or cut.

hot.selectCell(1, 1);

Then use one of the following commands:

  • document.execCommand('copy')
  • document.execCommand('cut')

The CopyPaste plugin listens to the browser's copy and cut events. If triggered, our implementation will copy or cut the selected data to the system clipboard.

const container = document.querySelector('#example2');
const copyBtn = document.querySelector('#copy');
const cutBtn = document.querySelector('#cut');

const hot = new Handsontable(container, {
  rowHeaders: true,
  colHeaders: true,
  data: Handsontable.helper.createSpreadsheetData(5, 5),
  outsideClickDeselects: false,
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation'
});

Handsontable.dom.addEvent(copyBtn, 'mousedown', function () {
  hot.selectCell(1, 1);
});

Handsontable.dom.addEvent(copyBtn, 'click', function () {
  document.execCommand('copy');
});

Handsontable.dom.addEvent(cutBtn, 'mousedown', function () {
  hot.selectCell(1, 1);
});

Handsontable.dom.addEvent(cutBtn, 'click', function () {
  document.execCommand('cut');
});

Note: Not all selection-related Handsontable methods result in it gaining focus. Make sure your table instance is focused by calling isListening() before copying or pasting data.

# Hooks

The CopyPaste plugin exposes the following hooks to manipulate data during copy or cut operations:

Examples of how to use them are provided in their descriptions.

# Paste

The Paste action allows the importing of data from external sources using the user's system clipboard. The CopyPaste firstly looks for text/html in the system clipboard, followed by text/plain.

# End-user usage

Available keyboard shortcuts:

  • CTRL/CMD + V - paste the content into the last cell in the selected range

Available options in the browser's toolbar:

  • Edit > Paste - paste the content into the last cell in the selected range

# Context menu

Due to security reason, modern browsers disallow to read from the system clipboard. Learn more (opens new window)

# Trigger paste programmatically

Due to security reason, modern browsers disallow to read from the system clipboard. Learn more (opens new window)

# Hooks

The CopyPaste plugin exposes the following hooks to manipulate data during the pasting operation:

Examples of how to use them are provided in their descriptions.

# Limitations

  1. The CopyPaste plugin doesn't copy, cut or paste cells' appearance.
  2. The data copied from Handsontable will always remain as plain text. For example, if you copy a checked checkbox, the input will be kept as a value of 'true'.
  3. document.execCommand can be called only during an immediate-execute event, such as a MouseEvent or a KeyboardEvent.
  4. Internet Explorer only supports the Text MIME-type. This is the equivalent of text/plain.
  5. Internet Explorer displays an allow/disallow confirmation prompt the first time a user tries to call the document.execCommand. Unfortunately, if a user denies access to the system clipboard, no exceptions will be thrown, and copy and cut actions will be disabled for the end-user. You can read more about this browser behavior on this page (opens new window).