Context menu

    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]
      ];
    }

• Context menu with default options
• Context menu with specific options
• Context menu with fully custom configuration

Context menu with default options

To run the basic configuration of the Context Menu, just set the contextMenu option to true.

From version 0.11, context menu also works for row and column headers. When the context menu for the row header is opened, the column options are disabled. Likewise, when the context menu for the column header is opened, the row options are disabled

var example1 = document.getElementById('example1');
var settings1 = {
  data: getData(),
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true
};

var hot1 = new Handsontable(example1, settings1);

Context menu with specific options

You can limit options available in the context menu using contextMenu option as an array of keys which are strings:

var example2 = document.getElementById('example2');
var settings2 = {
  data: getData(),
  rowHeaders: true,
  colHeaders: true,
  contextMenu: ['row_above', 'row_below', 'remove_row']
};

var hot2 = new Handsontable(example2, settings2);

Context menu with fully custom configuration

This example shows how to:

• add common callback for all options
• dynamically disable option
• set custom text for predefined option
• add own custom option
• add callback for specific option

var example3 = document.getElementById('example3');
var settings3 = {
  data: getData(),
  rowHeaders: true,
  colHeaders: true,
  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 'Custom option'; // 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
          items: [
            {
              // Key must be in the form "parent_key:child_key"
              key: 'colors:red',
              name: 'Red',
              callback: function(key, selection, clickEvent) {
                setTimeout(function() {
                  alert('You clicked red!');
                }, 0);
              }
            },
            { key: 'colors:green', name: 'Green' },
            { key: 'colors:blue', name: 'Blue' }
          ]
        }
      },
      "credits": { // Own custom property
        // Custom rendered element in the context menu
        renderer: function(hot, wrapper, row, col, prop, itemValue) {
          var elem = document.createElement('marquee');
          elem.style.cssText = 'background: lightgray;';
          elem.textContent = 'Brought to you by...';
          return elem;
        },
        disableSelection: true, // Prevent mouseoever from highlighting the item for selection
        isCommand: false // Prevent clicks from executing command and closing the menu
      }
    }
  }
};

var hot3 = new Handsontable(example3, settings3);