Identify the context menu opened in React Spreadsheet component

The Spreadsheet includes several context menus that will open and display depending on the action. When you right-click on a cell, for example, a context menu with options related to the cell element appears.

The class name returned by the contextMenuBeforeOpen event can be used to identify the context menu that is opened. The context menus and their class names are tabulated below.

Class name	Context menu name
.e-sheet-content	Cell context menu
.e-toolbar-item	Footer context menu
.e-rowhdr-table	Row header context menu
.e-colhdr-table	Column header context menu

The following code example shows how to identify the context menu opened.

app.jsx

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
import { closest } from '@syncfusion/ej2-base';

function App() {
  const contextMenuBeforeOpen = (args) => {
    if (closest(args.event.target, '.e-sheet-content')) {
      console.log('Cell Context Menu');
    } else if (closest(args.event.target, '.e-colhdr-table')) {
      console.log('Column Header Context Menu');
    } else if (closest(args.event.target, '.e-rowhdr-table')) {
      console.log('Row Header Context Menu');
    } else if (closest(args.event.target, '.e-toolbar-item')) {
      console.log('Footer Context Menu');
    }
  }
  return (
    <SpreadsheetComponent
      contextMenuBeforeOpen={contextMenuBeforeOpen}
    > </SpreadsheetComponent>
  );
}

export default App;

const root = createRoot(document.getElementById('root'));
root.render(<App />);

app.tsx

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
import { closest } from '@syncfusion/ej2-base';
import { BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-react-navigations';

function App() {
  const contextMenuBeforeOpen = (args: BeforeOpenCloseMenuEventArgs): void => {
    if (closest(args.event.target, '.e-sheet-content')) {
      console.log('Cell Context Menu');
    } else if (closest(args.event.target, '.e-colhdr-table')) {
      console.log('Column Header Context Menu');
    } else if (closest(args.event.target, '.e-rowhdr-table')) {
      console.log('Row Header Context Menu');
    } else if (closest(args.event.target, '.e-toolbar-item')) {
      console.log('Footer Context Menu');
    }
  }
  return ( 
    <SpreadsheetComponent
      contextMenuBeforeOpen={contextMenuBeforeOpen}
    > </SpreadsheetComponent>
  );
}

export default App;

const root = createRoot(document.getElementById('root')!);
root.render(<App />);