Context menu

Quickly access contextual actions such as removing rows, inserting columns or copying data, by opening the context menu.

Context menu with default options
Context menu with specific options
Context menu with a fully custom configuration
Related keyboard shortcuts
Related articles

Enable the context menu with the default configuration:

contextMenu: true,

To see the context menu, right-click on a cell:

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

const container = document.querySelector('#example1');
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]
  ],
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true,
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation'
});

<script src="https://cdn.jsdelivr.net/npm/handsontable@12.3/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.3/dist/handsontable.full.min.css" /> 
<script src="https://handsontable.com/docs/12.3/scripts/fixer.js"></script>

<div id="example1" class="hot "></div>

You can define items in the menu by passing the contextMenu option as an array of keys which are strings:

Key	Action, required plugins
`row_above`	Insert a row above
`row_below`	Insert a row below
`col_left`	Insert a column to the left
`col_right`	Insert a column to the right
`---------`	The menu items separator
`remove_row`	Remove the selected row
`clear_column`	Delete the data of the selected columns
`undo`	Undo the last action (`UndoRedo`)
`redo`	Redo the last action (`UndoRedo`)
`make_read_only`	Make the selected cells read-only
`alignment`	Align text
`cut`	Cut the contents of the selected cells to the system clipboard (`CopyPaste`)
`copy`	Copy the contents of the selected cells to the system clipboard (`CopyPaste`)
`copy_with_column_headers`	Copy the contents of the selected cells and their nearest column headers (`CopyPaste`)
`copy_with_column_group_headers`	Copy the contents of the selected cells and all their related column headers (`CopyPaste`, `NestedHeaders`)
`copy_column_headers_only`	Copy the contents of column headers that are nearest to the selected cells (`CopyPaste`)
`freeze_column`	Freeze the selected column (`ManualColumnFreeze`)
`unfreeze_column`	Unfreeze the selected column (`ManualColumnFreeze`)
`borders`	Add borders around the selected cells (`CustomBorders`)
`commentsAddEdit`	Add or edit a comment (`Comments`)
`commentsRemove`	Remove the comment (`Comments`)
`commentsReadOnly`	Make the comment read-only (`Comments`)
`mergeCells`	Merge or unmerge the selected cells (`MergeCells`)
`add_child`	Insert a child row (`NestedRows`)
`detach_from_parent`	Detach the selected row from its parent row (`NestedRows`)
`hidden_columns_hide`	Hide the selected columns (`HiddenColumns`)
`hidden_columns_show`	Show hidden columns (`HiddenColumns`)
`hidden_rows_hide`	Hide the selected rows (`HiddenRows`)
`hidden_rows_show`	Show hidden rows (`HiddenRows`)
`filter_by_condition`	Add a first filter condition (`Filters`)
`filter_by_condition2`	Add a second filter condition (`Filters`)
`filter_operators`	Select a filter parameter (`Filters`)
`filter_by_value`	Add a filter value (`Filters`)
`filter_action_bar`	Apply the configured filter (`Filters`)

To see the context menu, right-click on a cell:

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

const container = document.querySelector('#example2');
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]
  ],
  rowHeaders: true,
  colHeaders: true,
  contextMenu: ['row_above', 'row_below', 'remove_row'],
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation'
});

<script src="https://cdn.jsdelivr.net/npm/handsontable@12.3/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.3/dist/handsontable.full.min.css" /> 
<script src="https://handsontable.com/docs/12.3/scripts/fixer.js"></script>

<div id="example2" class="hot "></div>

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

To see the context menu, right-click on a cell:

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

const container = document.querySelector('#example3');
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]
  ],
  rowHeaders: true,
  colHeaders: true,
  licenseKey: 'non-commercial-and-evaluation',
  height: 'auto',
  contextMenu: {
    callback(key, selection, clickEvent) {
      // Common callback for all options
      console.log(key, selection, clickEvent);
    },
    items: {
      row_above: {
        disabled() { // `disabled` can be a boolean or a function
          // Disable option when first row was clicked
          return this.getSelectedLast()[0] === 0; // `this` === hot
        }
      },
      // A separator line can also be added like this:
      // 'sp1': { name: '---------' }
      // and the key has to be unique
      sp1: '---------',
      row_below: {
        name: 'Click to add row below' // Set custom text for predefined option
      },
      about: { // Own custom option
        name() { // `name` can be a string or a function
          return '<b>Custom option</b>'; // Name can contain HTML
        },
        hidden() { // `hidden` can be a boolean or a function
          // Hide the option when the first column was clicked
          return this.getSelectedLast()[1] == 0; // `this` === hot
        },
        callback(key, selection, clickEvent) { // Callback for specific option
          setTimeout(() => {
            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(key, selection, clickEvent) {
                setTimeout(() => {
                  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(hot, wrapper, row, col, prop, itemValue) {
          const 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
      }
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/handsontable@12.3/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.3/dist/handsontable.full.min.css" /> 
<script src="https://handsontable.com/docs/12.3/scripts/fixer.js"></script>

<div id="example3" class="hot "></div>

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

const container = document.querySelector('#example3');
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]
  ],
  rowHeaders: true,
  colHeaders: true,
  licenseKey: 'non-commercial-and-evaluation',
  height: 'auto',
  contextMenu: {
    callback(key, selection, clickEvent) {
      // Common callback for all options
      console.log(key, selection, clickEvent);
    },
    items: {
      row_above: {
        disabled() { // `disabled` can be a boolean or a function
          // Disable option when first row was clicked
          return this.getSelectedLast()[0] === 0; // `this` === hot
        }
      },
      // A separator line can also be added like this:
      // 'sp1': { name: '---------' }
      // and the key has to be unique
      sp1: '---------',
      row_below: {
        name: 'Click to add row below' // Set custom text for predefined option
      },
      about: { // Own custom option
        name() { // `name` can be a string or a function
          return '<b>Custom option</b>'; // Name can contain HTML
        },
        hidden() { // `hidden` can be a boolean or a function
          // Hide the option when the first column was clicked
          return this.getSelectedLast()[1] == 0; // `this` === hot
        },
        callback(key, selection, clickEvent) { // Callback for specific option
          setTimeout(() => {
            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(key, selection, clickEvent) {
                setTimeout(() => {
                  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(hot, wrapper, row, col, prop, itemValue) {
          const 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
      }
    }
  }
});

Windows	macOS	Action	Excel	Sheets
Arrow keys	Arrow keys	Move one available menu item up, down, left, or right	✓	✓
`Page Up`	`Page Up`	Move to the first visible item of the context menu or submenu	✓	✗
`Page Down`	`Page Down`	Move to the last visible item of the context menu or submenu	✓	✗
`Escape`	`Escape`	Close the context menu or submenu	✓	✓
`Enter`	`Enter`	Run the action of the selected menu item	✓	✗

Customize Handsontable context menu (opens new window)

← Formula calculation Undo and redo →

JavaScript Data Grid Context menu

Context menu with default options

Context menu with specific options

Context menu with a fully custom configuration

Related keyboard shortcuts

Related articles

Related guides

Related blog articles

Related API reference