Context menu in React Spreadsheet component

3 Jul 202413 minutes to read

Context Menu is used to improve user interaction with Spreadsheet using the popup menu. This will open when right-clicking on Cell/Column Header/Row Header/ Pager in the Spreadsheet. You can use enableContextMenu property to enable/disable context menu.

The default value for the enableContextMenu property is true.

Context Menu Items in Row Cell

Please find the table below for default context menu items and their actions.

Context Menu items Action
Cut Cut the selected cells data to the clipboard, you can select a cell where you want to move the data.
Copy Copy the selected cells data to the clipboard, so that you can paste it to somewhere else.
Paste Paste the data from clipboard to spreadsheet.
Paste Special Values - Paste the data values from clipboard to spreadsheet. Formats - Paste the data formats from
clipboard to spreadsheet.
Filter Perform filtering to the selected cells based on an active cell’s value.
Sort Perform sorting to the selected range of cells by ascending or descending.
Hyperlink Create a link in the spreadsheet to navigate to web links or cell reference within the sheet or other sheets
in the Spreadsheet.

Context Menu Items in Row Header / Column Header

Please find the table below for default context menu items and their actions.

Context Menu items Action
Cut Cut the selected row/column header data to the clipboard, you can select a cell where you want to move the data.
Copy Copy the selected row/column header data to the clipboard, so that you can paste it to somewhere else.
Paste Paste the data from clipboard to spreadsheet.
Paste Special Values - Paste the data values from clipboard to spreadsheet. Formats - Paste the data formats from
clipboard to spreadsheet.
Insert Rows / Insert Columns Insert new rows or columns into the worksheet.
Delete Rows / Delete Columns Delete existing rows or columns from the worksheet.
Hide Rows / Hide Columns Hide the rows or columns.
UnHide Rows / UnHide Columns Show the hidden rows or columns.

Context Menu Items in Pager

Please find the table below for default context menu items and their actions.

Context Menu items Action
Insert Insert a new worksheet in front of an existing worksheet in the spreadsheet.
Delete Delete the selected worksheet from the spreadsheet.
Rename Rename the selected worksheet.
Protect Sheet Prevent unwanted changes from others by limiting their ability to edit.
Hide Hide the selected worksheet.

Context Menu Customization

You can perform the following context menu customization options in the spreadsheet

  • Add Context Menu Items
  • Remove Context Menu Items
  • Enable/Disable Context Menu Items

Add Context Menu Items

You can add the custom items in context menu using the addContextMenuItems in contextmenuBeforeOpen event

In this demo, Custom Item is added after the Paste item in the context menu.

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

function App() {
    const spreadsheetRef = React.useRef(null);
    const onContextMenuBeforeOpen = (args) => {
        let spreadsheet = spreadsheetRef.current;
        if (spreadsheet && args.element.id === spreadsheet.element.id + '_contextmenu') {
            spreadsheet.addContextMenuItems([{ text: 'Custom Item' }], 'Paste Special', false);  //To pass the items, Item before / after that the element to be inserted, Set false if the items need to be inserted before the text.
        }
    };

    return (<SpreadsheetComponent ref={spreadsheetRef} contextMenuBeforeOpen={onContextMenuBeforeOpen} />);
};
export default App;

const root = createRoot(document.getElementById('root'));
root.render(<App />);
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
import { BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-react-splitbuttons';

function App() {
    const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
    const onContextMenuBeforeOpen = (args: BeforeOpenCloseMenuEventArgs) => {
        let spreadsheet = spreadsheetRef.current;
        if (spreadsheet && args.element.id === spreadsheet.element.id + '_contextmenu') {
            spreadsheet.addContextMenuItems([{ text: 'Custom Item' }], 'Paste Special', false);  //To pass the items, Item before / after that the element to be inserted, Set false if the items need to be inserted before the text.
        }
    };

    return (<SpreadsheetComponent ref={spreadsheetRef} contextMenuBeforeOpen={onContextMenuBeforeOpen} />);
};
export default App;

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

Remove Context Menu Items

You can remove the items in context menu using the removeContextMenuItems in contextmenuBeforeOpen event

In this demo, Insert Column item has been removed from the row/column header context menu.

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

function App() {
    const spreadsheetRef = React.useRef(null);
    const onContextMenuBeforeOpen = () => {
        let spreadsheet = spreadsheetRef.current;
        // To remove existing context menu items.
        if (spreadsheet) {
            spreadsheet.removeContextMenuItems(['Insert Column'], false);
        }
    };

    return (<SpreadsheetComponent ref={spreadsheetRef} contextMenuBeforeOpen={onContextMenuBeforeOpen} />);
};
export default App;

const root = createRoot(document.getElementById('root'));
root.render(<App />);
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

function App() {
    const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
    const onContextMenuBeforeOpen = (): void => {
        let spreadsheet = spreadsheetRef.current;
        // To remove existing context menu items.
        if (spreadsheet) {
            spreadsheet.removeContextMenuItems(['Insert Column'], false);
        }  
    };

    return (<SpreadsheetComponent ref={spreadsheetRef} contextMenuBeforeOpen={onContextMenuBeforeOpen} />);
};
export default App;

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

Enable/Disable Context Menu Items

You can enable/disable the items in context menu using the enableContextMenuItems in contextmenuBeforeOpen event

In this demo, Rename item is disabled in the pager context menu.

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

function App() {
    const spreadsheetRef = React.useRef(null);
    const onContextMenuBeforeOpen = (args) => {
        let spreadsheet = spreadsheetRef.current;
        //To enable / disable context menu items.
        if (spreadsheet && args.element.id === spreadsheet.element.id + '_contextmenu') {
            spreadsheet.enableContextMenuItems(['Rename'], false, false); // Contextmenu Items that needs to be enabled / disabled, Set true / false to enable / disable the menu items, Set true if the given text is a unique id.
        }
    };

    return (<SpreadsheetComponent ref={spreadsheetRef} contextMenuBeforeOpen={onContextMenuBeforeOpen} />);
};
export default App;

const root = createRoot(document.getElementById('root'));
root.render(<App />);
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
import { BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-react-splitbuttons';

function App() {
    const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
    const onContextMenuBeforeOpen = (args: BeforeOpenCloseMenuEventArgs) => {
        let spreadsheet = spreadsheetRef.current;
        //To enable / disable context menu items.
        if (spreadsheet && args.element.id === spreadsheet.element.id + '_contextmenu') {
            spreadsheet.enableContextMenuItems(['Rename'], false, false); // Contextmenu Items that needs to be enabled / disabled, Set true / false to enable / disable the menu items, Set true if the given text is a unique id.
        }
    };

    return (<SpreadsheetComponent ref={spreadsheetRef} contextMenuBeforeOpen={onContextMenuBeforeOpen} />);
};
export default App;

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

Note

You can refer to our React Spreadsheet feature tour page for its groundbreaking feature representations. You can also explore our React Spreadsheet example to knows how to present and manipulate data.

See Also