Handsontable example

by handsoncode

HTML

<div id="example"></div>
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">

Babel + JSX

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: [
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
    ['2017', 10, 11, 12, 13, 15, 16],
    ['2018', 10, 11, 12, 13, 15, 16],
    ['2019', 10, 11, 12, 13, 15, 16],
    ['2020', 10, 11, 12, 13, 15, 16],
    ['2021', 10, 11, 12, 13, 15, 16]
  ],
  licenseKey: 'non-commercial-and-evaluation',
  rowHeaders: true,
  colHeaders: true,
  contextMenu: ['copy', 'cut'],
  beforeCopy(data) {
    const headers = [];
    const selection = this.getSelectedRangeLast();
    const startCol = Math.min(selection.from.col, selection.to.col);
    const endCol = Math.max(selection.from.col, selection.to.col);

    for (let i = startCol; i <= endCol; i++) {
      headers.push(this.getColHeader(i));
    }

    data.splice(0, 0, headers);
  }
});