Handsontable example

by Jens Kühn

HTML

<div id="example3" class="hot handsontable htRowHeaders htColumnHeaders"></div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">

JavaScript

function getData() {
    return [
      ['', '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]
    ];
  }
  var example3 = document.getElementById('example3');
  var settings3 = {
    data: getData(),
    rowHeaders: true,
    colHeaders: true,
    beforePaste: (data, coords) => {
    	console.log('beforePaste', data, coords);
    	data = data.map(d => d + '____');
    	console.log('beforePaste', data, coords);
    },
    contextMenu: {
      callback: function (key, selection, clickEvent) {
        // Common callback for all options
        console.log(key, selection, clickEvent);
      },
      items: {
        "row_above": {
          disabled: function () { // `disabled` can be a boolean or a function
            // Disable option when first row was clicked
            return this.getSelectedLast()[0] === 0; // `this` === hot3
          }
        },
        "row_below": {
          name: 'Click to add row below' // Set custom text for predefined option
        },
        "about": { // Own custom option
          name: function () { // `name` can be a string or a function
            return '<b>Custom option</b>'; // Name can contain HTML
          },
          hidden: function () { // `hidden` can be a boolean or a function
            // Hide the option when the first column was clicked
            return this.getSelectedLast()[1] == 0; // `this` === hot3
          },
          callback: function(key, selection, clickEvent) { // Callback for specific option
            setTimeout(function() {
              alert('Hello world!'); // Fire alert after menu close (with timeout)
            }, 0);
          }
        },
        "colors": { // Own custom option
          name: 'Colors...',
          submenu: {
            // Custom option with submenu of items
  ...