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 example = document.getElementById('example');
const hot = new Handsontable(example, {
  data: [
    ['', 'Kia', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
    ['2012', 10, 11, 12, 13, 15, 16],
    ['2013', 10, 11, 12, 13, 15, 16],
    ['2014', 10, 11, 12, 13, 15, 16],
    ['2015', 10, 11, 12, 13, 15, 16],
    ['2016', 10, 11, 12, 13, 15, 16]
  ],
  licenseKey: 'non-commercial-and-evaluation',
  rowHeaders: true,
  colHeaders: true,
  contextMenu: {
    items: {
      'custom_item': {
        name: 'Custom option for all rows except the first one',
        callback() {
          console.log('It shows a log for rows other than first');
          // does some things after click
        },
        hidden: function() {
          // if first row, disable this option
          return this.getSelectedRangeLast().to.row === 0;
        },
      },
      'custom_item_two': {
        name: 'Custom option for all rows',
        callback() {
          console.log('This shows log for all the rows');
          // does some things after click
        },
      },
    },
  },
});