Context menu

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

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

import ReactDOM from 'react-dom';
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      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"
    />
  );
};

ReactDOM.render(<ExampleComponent />, document.getElementById('example1'));

<script src="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.1/dist/react-handsontable.js"></script>
<script src="https://handsontable.com/docs/12.1/scripts/fixer.js"></script>
<script src="https://handsontable.com/docs/12.1/scripts/helpers.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	Purpose	Extra conditions
`row_above`	Insert row above action
`row_below`	Insert row below action
`col_left`	Insert column left action
`col_right`	Insert column right action
`---------`	Separator
`remove_row`	Remove row action
`clear_column`	Clear column values action
`undo`	Undo action	Plugin UndoRedo turned on
`redo`	Redo action	Plugin UndoRedo turned on
`make_read_only`	Make read only action
`alignment`	Alignment actions
`cut`	Cut action	Plugin CopyPaste turned on
`copy`	Copy action	Plugin CopyPaste turned on
`freeze_column`	Freeze column action	Plugin ManualColumnFreeze turned on
`unfreeze_column`	Unfreeze column action	Plugin ManualColumnFreeze turned on
`borders`	Custom borders actions	Plugin CustomBorders turned on
`commentsAddEdit`	Add and edit comment actions	Plugin Comments turned on
`commentsRemove`	Remove comment action	Plugin Comments turned on
`commentsReadOnly`	Make comment read only action	Plugin Comments turned on
`mergeCells`	Merge and unmerge cells actions	Plugin MergeCells turned on
`add_child`	Insert child row action	Plugin NestedRows turned on
`detach_from_parent`	Detach from parent row action	Plugin NestedRows turned on
`hidden_columns_hide`	Hide column(s) action	Plugin HiddenColumns turned on
`hidden_columns_show`	Show hidden column(s) action	Plugin HiddenColumns turned on
`hidden_rows_hide`	Hide row(s) action	Plugin HiddenRows turned on
`hidden_rows_show`	Show hidden row(s) action	Plugin HiddenRows turned on
`filter_by_condition`	First conditions select element	Plugin Filters turned on
`filter_operators`	Operation select element	Plugin Filters turned on
`filter_by_condition2`	Second conditions select element	Plugin Filters turned on
`filter_by_value`	Value select element	Plugin Filters turned on
`filter_action_bar`	Action bar element	Plugin Filters turned on

import ReactDOM from 'react-dom';
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      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"
    />
  );
};

ReactDOM.render(<ExampleComponent />, document.getElementById('example2'));

<script src="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.1/dist/react-handsontable.js"></script>
<script src="https://handsontable.com/docs/12.1/scripts/fixer.js"></script>
<script src="https://handsontable.com/docs/12.1/scripts/helpers.js"></script>

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

In addition to built-in options, you can equip your context menu with custom options.

import ReactDOM from 'react-dom';
import { HotTable } from '@handsontable/react';
import { ContextMenu } from 'handsontable/plugins/contextMenu';
import { registerAllModules } from 'handsontable/registry';
import { createSpreadsheetData } from './helpers';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <div>
      <HotTable
        id="hot"
        data={createSpreadsheetData(5, 5)}
        colHeaders={true}
        height="auto"
        contextMenu={{
          items: {
            'row_above': {
              name: 'Insert row above this one (custom name)'
            },
            'row_below': {},
            'separator': ContextMenu.SEPARATOR,
            'clear_custom': {
              name: 'Clear all cells (custom)',
              callback: function() {
                this.clear();
              }
            }
          }
        }}
        licenseKey="non-commercial-and-evaluation"
      />
    </div>
  )
}

ReactDOM.render(<ExampleComponent />, document.getElementById('example4'));

<script src="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.1/dist/react-handsontable.js"></script>
<script src="https://handsontable.com/docs/12.1/scripts/fixer.js"></script>
<script src="https://handsontable.com/docs/12.1/scripts/helpers.js"></script>

<div id="example4" 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

import ReactDOM from 'react-dom';
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      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
          }
        }
      }}
    />
  );
};

ReactDOM.render(<ExampleComponent />, document.getElementById('example3'));

<script src="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.1/dist/react-handsontable.js"></script>
<script src="https://handsontable.com/docs/12.1/scripts/fixer.js"></script>
<script src="https://handsontable.com/docs/12.1/scripts/helpers.js"></script>

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

import ReactDOM from 'react-dom';
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      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
          }
        }
      }}
    />
  );
};

ReactDOM.render(<ExampleComponent />, document.getElementById('example3'));

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 →

React Data Grid Context menu

Context menu with default options

Context menu with specific options

Context menu with custom options

Context menu with fully custom configuration

Related keyboard shortcuts

Related articles

Related guides

Related blog articles

Related API reference