Custom context menu in React

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@11.1/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@11.1/dist/handsontable.full.min.css" /> <script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.development.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js"></script> <script src="https://cdn.jsdelivr.net/npm/@handsontable/react@11.1/dist/react-handsontable.js"></script> <script src="https://handsontable.com/docs/scripts/fixer.js"></script> <script src="https://handsontable.com/docs/scripts/helpers.js"></script> <div id="example1" class="hot "></div>

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'));