Custom context menu in React - Guide - Handsontable Documentation

This page covers a non-latest version of Handsontable.

Overview
Example
Related articles

# Overview

The following example is an implementation of the @handsontable/react component with a custom Context Menu added using React.

# Example

import React from 'react';
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';

// register Handsontable's modules
registerAllModules();

const hotSettings = {
  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'
};

const App = () => {
  return (
    <div>
      <HotTable
        id="hot"
        settings={hotSettings}
      />
    </div>
  )
}

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

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

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

Customize Handsontable context menu (opens new window)

← Setting up a translation in React Custom editor in React →