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

CSS

.handsontable .blue {
  background: #37BC6C
}

Babel + JSX

let holder;

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: true,
  comments: true,
  afterCopy(data, coords) {
    const { startRow: row, startCol: column} = coords[0];
    const { className } = this.getCellMeta(row, column);

    if (className) {
      holder = className;
    }
  },
  afterPaste(data, coords) {
    const { startRow: row, startCol: column} = coords[0];

    if (holder) {
      this.setCellMeta(row, column, 'className', holder);
      this.render()
    }
  },
});

hot.setCellMeta(0, 1, 'className', 'blue');
hot.render()