JavaScript Data Grid Clipboard

Copy data from selected cells to the clipboard, using the Ctrl / Cmd + C shortcut or the context menu. Control the clipboard with Handsontable's API.

In this article

• Overview
• Copy & Cut
  • End-user usage
  • Context menu
  • Trigger copy & cut programmatically
  • Hooks
  • Copy with headers
• Paste
  • End-user usage
  • Context menu
  • Trigger paste programmatically
  • Hooks
• Known limitations
• Related keyboard shortcuts
• Related API reference

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

To let the end user copy the contents of column headers, see the Copy with headers section.

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().

import Handsontable from 'handsontable'; import 'handsontable/dist/handsontable.full.min.css'; const container = document.querySelector('#example1'); const hot = new Handsontable(container, { data: [ ['A1', 'B1', 'C1', 'D1', 'E1'], ['A2', 'B2', 'C2', 'D2', 'E2'], ['A3', 'B3', 'C3', 'D3', 'E3'], ['A4', 'B4', 'C4', 'D4', 'E4'], ['A5', 'B5', 'C5', 'D5', 'E5'], ], rowHeaders: true, colHeaders: true, contextMenu: ['copy', 'cut'], height: 'auto', licenseKey: 'non-commercial-and-evaluation' }); <script src="https://cdn.jsdelivr.net/npm/handsontable@12.3/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.3/dist/handsontable.full.min.css" /> <script src="https://handsontable.com/docs/12.3/scripts/fixer.js"></script> <div id="example1" class="hot "></div>

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

const container = document.querySelector('#example1');
const hot = new Handsontable(container, {
  data: [
    ['A1', 'B1', 'C1', 'D1', 'E1'],
    ['A2', 'B2', 'C2', 'D2', 'E2'],
    ['A3', 'B3', 'C3', 'D3', 'E3'],
    ['A4', 'B4', 'C4', 'D4', 'E4'],
    ['A5', 'B5', 'C5', 'D5', 'E5'],
  ],
  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.

import Handsontable from 'handsontable'; import 'handsontable/dist/handsontable.full.min.css'; const container = document.querySelector('#example3'); const copyBtn = document.querySelector('#copy'); const cutBtn = document.querySelector('#cut'); const hot = new Handsontable(container, { rowHeaders: true, colHeaders: true, data: [ ['A1', 'B1', 'C1', 'D1', 'E1'], ['A2', 'B2', 'C2', 'D2', 'E2'], ['A3', 'B3', 'C3', 'D3', 'E3'], ['A4', 'B4', 'C4', 'D4', 'E4'], ['A5', 'B5', 'C5', 'D5', 'E5'], ], outsideClickDeselects: false, height: 'auto', licenseKey: 'non-commercial-and-evaluation' }); copyBtn.addEventListener('mousedown', function() { hot.selectCell(1, 1); }); copyBtn.addEventListener('click', function() { document.execCommand('copy'); }); cutBtn.addEventListener('mousedown', function() { hot.selectCell(1, 1); }); cutBtn.addEventListener('click', function() { document.execCommand('cut'); }); <script src="https://cdn.jsdelivr.net/npm/handsontable@12.3/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.3/dist/handsontable.full.min.css" /> <script src="https://handsontable.com/docs/12.3/scripts/fixer.js"></script> <div id="example3"></div> <div class="controls"> <button id="copy">Select and copy cell B2</button> <button id="cut">Select and cut cell B2</button> </div>

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

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

const hot = new Handsontable(container, {
  rowHeaders: true,
  colHeaders: true,
  data: [
    ['A1', 'B1', 'C1', 'D1', 'E1'],
    ['A2', 'B2', 'C2', 'D2', 'E2'],
    ['A3', 'B3', 'C3', 'D3', 'E3'],
    ['A4', 'B4', 'C4', 'D4', 'E4'],
    ['A5', 'B5', 'C5', 'D5', 'E5'],
  ],
  outsideClickDeselects: false,
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation'
});

copyBtn.addEventListener('mousedown', function() {
  hot.selectCell(1, 1);
});

copyBtn.addEventListener('click', function() {
  document.execCommand('copy');
});

cutBtn.addEventListener('mousedown', function() {
  hot.selectCell(1, 1);
});

cutBtn.addEventListener('click', function() {
  document.execCommand('cut');
});

<div id="example3"></div>
<div class="controls">
  <button id="copy">Select and copy cell B2</button>
  <button id="cut">Select and cut cell B2</button>
</div>

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:

• beforeCopy
• afterCopy
• beforeCut
• afterCut

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

Copy with headers

Let the end user copy the contents of column headers, by enabling additional context menu items:

Context menu item	Copied area
Copy with header
Copy with group header
Copy header only

Right-click on a cell to try it out:

import Handsontable from 'handsontable'; import 'handsontable/dist/handsontable.full.min.css'; const container = document.querySelector('#example2'); const hot = new Handsontable(container, { data: [ ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'], ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'], ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'], ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'], ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'], ], contextMenu: true, copyPaste: { copyColumnHeaders: true, copyColumnGroupHeaders: true, copyColumnHeadersOnly: true, }, colHeaders: true, rowHeaders: true, height: 'auto', nestedHeaders: [ ['A', { label: 'B', colspan: 2 }, { label: 'C', colspan: 2 }, { label: 'D', colspan: 2 }, { label: 'E', colspan: 2 }, 'F'], ['G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P'] ], licenseKey: 'non-commercial-and-evaluation' }); <script src="https://cdn.jsdelivr.net/npm/handsontable@12.3/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.3/dist/handsontable.full.min.css" /> <script src="https://handsontable.com/docs/12.3/scripts/fixer.js"></script> <div id="example2" class="hot "></div>

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

const container = document.querySelector('#example2');
const hot = new Handsontable(container, {
  data: [
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],
  ],
  contextMenu: true,
  copyPaste: {
    copyColumnHeaders: true,
    copyColumnGroupHeaders: true,
    copyColumnHeadersOnly: true,
  },
  colHeaders: true,
  rowHeaders: true,
  height: 'auto',
  nestedHeaders: [
    ['A', { label: 'B', colspan: 2 }, { label: 'C', colspan: 2 }, { label: 'D', colspan: 2 }, { label: 'E', colspan: 2 }, 'F'],
    ['G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P']
  ],
  licenseKey: 'non-commercial-and-evaluation'
});

To add the context menu items, configure the CopyPaste plugin with these options:

• copyColumnHeaders
• copyColumnGroupHeaders
• copyColumnHeadersOnly

copyPaste: {
  copyColumnHeaders: true,
  copyColumnGroupHeaders: true,
  copyColumnHeadersOnly: true,
}

To copy column headers programmatically, call the copyPaste.copy() method with these arguments:

• 'with-column-headers'
• 'with-all-column-headers'
• 'column-headers-only'

// access the `CopyPaste` plugin instance
const copyPastePlugin = hot.getPlugin('copyPaste');

// select some cells
hot.selectCell(1, 1);

// copy the selected cells along with their nearest column headers
copyPastePlugin.copy('with-column-headers');

// copy the selected cells along with all their related columns headers
copyPastePlugin.copy('with-all-column-headers');

// copy the column headers nearest to the selected cells
// (without copying the cells themselves)
copyPastePlugin.copy('column-headers-only');

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 reasons, modern browsers disallow reading from the system clipboard. Learn more (opens new window)

Trigger paste programmatically

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

Hooks

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

• beforePaste
• afterPaste

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

Known 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.

Related keyboard shortcuts

Windows	macOS	Action	Excel	Sheets
Ctrl + X	Cmd + X	Cut the contents of the selected cells to the system clipboard	✓	✓
Ctrl + C	Cmd + C	Copy the contents of the selected cells to the system clipboard	✓	✓
Ctrl + V	Cmd + V	Paste from the system clipboard	✓	✓

Related API reference

• Configuration options:
  • copyPaste
  • copyable
  • skipColumnOnPaste
  • skipRowOnPaste
• Core methods:
  • getCopyableData()
  • getCopyableText()
• Hooks:
  • afterCopy
  • afterCopyLimit
  • afterCut
  • afterPaste
  • beforeCopy
  • beforeCut
  • beforePaste
  • modifyCopyableRange
• Plugins:
  • CopyPaste