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

let msg;

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,
  cell: [
    {
      row: 1,
      col: 1,
      comment: {
        value: 'Some comment',
      },
    },
    {
      row: 2,
      col: 2,
      comment: {
        value: 'More comments',
      },
    }
  ],
  afterCopy(data, coords) {
    const { startRow: row, startCol: column} = coords[0];
    const { comment } = this.getCellMeta(row, column);

    if (comment) {
      console.log(comment);

      msg = comment;
    }
  },
  afterPaste: function(data, coords) {
    const { startRow: row, startCol: column} = coords[0];
    
    console.log(msg)

    if (msg) {
      this.getPlugin('Comments').setCommentAtCell(row, column, msg.value)
    }
  },
});