React Data GridClipboard

Copy data from selected cells to the system clipboard.

Overview
Copy & Cut
Paste
Known limitations
Related keyboard shortcuts
Related API reference

Overview

You can copy or cut data from Handsontable to the system clipboard, either manually (using the context menu or the Ctrl/Cmd+C/X shortcuts) or programmatically (using Handsontable's API methods).

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.

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

{
  "name": "handsontable",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "hyperformula": "^2.4.0",
    "handsontable": "14.6",
    "@handsontable/react": "14.6"
  },
  
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Handsontable</title>
  </head>

  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root"></div>
  </body>
</html>

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import ExampleComponent from "./ExampleComponent";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <ExampleComponent />
  </StrictMode>
);

import React from "react";
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      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"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

export default ExampleComponent;

import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      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"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};



ReactDOM.render(<ExampleComponent />, document.getElementById("example1"));

<script src="https://cdn.jsdelivr.net/npm/handsontable@14.6/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@14.6/dist/handsontable.full.min.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@14.6/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

<div id="example1" class="hot "></div>

Trigger copy & cut programmatically

TIP

To use the Handsontable API, you'll need access to the Handsontable instance. You can do that by utilizing a reference to the HotTable component, and reading its hotInstance property.

For more information, see the Instance methods page.

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.

{
  "name": "handsontable",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "hyperformula": "^2.4.0",
    "handsontable": "14.6",
    "@handsontable/react": "14.6"
  },
  
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Handsontable</title>
  </head>

  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root"></div>
  </body>
</html>

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import ExampleComponent from "./ExampleComponent";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <ExampleComponent />
  </StrictMode>
);

import React from "react";
import { useRef } from 'react';
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  const hotRef = useRef(null);
  const copyBtnClickCallback = function () {
    document.execCommand('copy');
  };

  const cutBtnClickCallback = function () {
    document.execCommand('cut');
  };

  const copyBtnMousedownCallback = () => {
    const hot = hotRef.current?.hotInstance;

    hot?.selectCell(1, 1);
  };

  const cutBtnMousedownCallback = () => {
    const hot = hotRef.current?.hotInstance;

    hot?.selectCell(1, 1);
  };

  return (
    <>
      <HotTable
        ref={hotRef}
        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"
        autoWrapRow={true}
        autoWrapCol={true}
        licenseKey="non-commercial-and-evaluation"
      />
      <div className="controls">
        <button
          id="copy"
          onMouseDown={() => copyBtnMousedownCallback()}
          onClick={() => copyBtnClickCallback()}
        >
          Select and copy cell B2
        </button>
        <button
          id="cut"
          onMouseDown={() => cutBtnMousedownCallback()}
          onClick={() => cutBtnClickCallback()}
        >
          Select and cut cell B2
        </button>
      </div>
    </>
  );
};

export default ExampleComponent;

import { useRef } from 'react';
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  const hotRef = useRef(null);
  const copyBtnClickCallback = function () {
    document.execCommand('copy');
  };

  const cutBtnClickCallback = function () {
    document.execCommand('cut');
  };

  const copyBtnMousedownCallback = () => {
    const hot = hotRef.current?.hotInstance;

    hot?.selectCell(1, 1);
  };

  const cutBtnMousedownCallback = () => {
    const hot = hotRef.current?.hotInstance;

    hot?.selectCell(1, 1);
  };

  return (
    <>
      <HotTable
        ref={hotRef}
        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"
        autoWrapRow={true}
        autoWrapCol={true}
        licenseKey="non-commercial-and-evaluation"
      />
      <div className="controls">
        <button
          id="copy"
          onMouseDown={() => copyBtnMousedownCallback()}
          onClick={() => copyBtnClickCallback()}
        >
          Select and copy cell B2
        </button>
        <button
          id="cut"
          onMouseDown={() => cutBtnMousedownCallback()}
          onClick={() => cutBtnClickCallback()}
        >
          Select and cut cell B2
        </button>
      </div>
    </>
  );
};



ReactDOM.render(<ExampleComponent />, document.getElementById("example3"));

<script src="https://cdn.jsdelivr.net/npm/handsontable@14.6/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@14.6/dist/handsontable.full.min.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@14.6/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

<div id="example3" class="hot "></div>

Mind that some of Handsontable's selection-related methods don't set focus on your grid automatically. To make sure that your grid is focused, call isListening() before you copy, cut or paste 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.

Copy with headers

You can 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:

{
  "name": "handsontable",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "hyperformula": "^2.4.0",
    "handsontable": "14.6",
    "@handsontable/react": "14.6"
  },
  
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Handsontable</title>
  </head>

  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root"></div>
  </body>
</html>

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import ExampleComponent from "./ExampleComponent";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <ExampleComponent />
  </StrictMode>
);

import React from "react";
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      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'],
      ]}
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    ></HotTable>
  );
};

export default ExampleComponent;

import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      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'],
      ]}
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    ></HotTable>
  );
};



ReactDOM.render(<ExampleComponent />, document.getElementById("example2"));

<script src="https://cdn.jsdelivr.net/npm/handsontable@14.6/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@14.6/dist/handsontable.full.min.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@14.6/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

<div id="example2" class="hot "></div>

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

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

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

TIP

To use the Handsontable API, you'll need access to the Handsontable instance. You can do that by utilizing a reference to the HotTable component, and reading its hotInstance property.

For more information, see the Instance methods page.

// 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 plugin 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

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

The CopyPaste plugin doesn't copy, cut or paste cells' appearance.
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 the value of 'true'.
document.execCommand can be called only during an immediate-execute event, such as a MouseEvent or a KeyboardEvent.

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	✓	✓

Configuration options:
Core methods:
- getCopyableData()
- getCopyableText()
Hooks:
Plugins:
- CopyPaste