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 custom 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 { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

export 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.4/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.4/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.4/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/12.4/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 { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

export 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', 'clear_column']}
      height="auto"
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

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

<script src="https://cdn.jsdelivr.net/npm/handsontable@12.4/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.4/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.4/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/12.4/scripts/fixer.js"></script>

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

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

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

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

// register Handsontable's modules
registerAllModules();

export const ExampleComponent = () => {
  return (
    <div>
      <HotTable
        id="hot"
        data={[
          ['A1', 'B1', 'C1', 'D1', 'E1'],
          ['A2', 'B2', 'C2', 'D2', 'E2'],
          ['A3', 'B3', 'C3', 'D3', 'E3'],
          ['A4', 'B4', 'C4', 'D4', 'E4'],
          ['A5', 'B5', 'C5', 'D5', 'E5'],
        ]}
        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.4/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.4/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.4/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/12.4/scripts/fixer.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

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

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

// register Handsontable's modules
registerAllModules();

export 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.4/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.4/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.4/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/12.4/scripts/fixer.js"></script>

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

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

// register Handsontable's modules
registerAllModules();

export 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
          }
        }
      }}
    />
  );
};

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 a fully custom configuration

Related keyboard shortcuts

Related articles

Related guides

Related blog articles

Related API reference