Context menu

Introduction

ReactGrid comes with a custom context menu feature. Custom menu entries can be easily created thus allowing for personalized experiences. By default, the context menu is disabled. You can enable it by providing a handler function to your ReactGrid using the onContextMenu property.

Enabling simple context menu

This guide is based on handling data changes .

  1. Update imports by adding Id , SelectionMode and MenuOption interfaces.

import { ReactGrid, CellChange, Row, Column, Id, MenuOption, SelectionMode, CellLocation } from "@silevis/reactgrid";

  1. Implement the context menu handler function

The menuOptions argument of simpleHandleContextMenu contains a list of default menu entries provided by ReactGrid - copy, cut and paste. For now, we’ll simply define it, which will enable the default ReactGrid context menu.

const [people, setPeople] = React.useState<Person[]>(getPeople());
  const rows = getRows(people);
  const columns = getColumns();

  const handleChanges = (changes: CellChange[]) => {
    setPeople((prevPeople) => applyChangesToPeople(changes, prevPeople));
  };

  const simpleHandleContextMenu = (
    selectedRowIds: Id[],
    selectedColIds: Id[],
    selectionMode: SelectionMode,
    menuOptions: MenuOption[],
    selectedRanges: Array<CellLocation[]>
  ): MenuOption[] => {
    return menuOptions;
  }

  return (
    <ReactGrid
      rows={rows}
      columns={columns}
      onCellsChanged={handleChanges}
      onContextMenu={simpleHandleContextMenu}
    />
  );

Here’s the result. Right-click anywhere in the grid to see the context menu.

Basic menu context handling live demo

Advanced example - removing columns and rows

The default menu, though pretty, may seem a bit lacklustre when it comes to the functionality it provides. Let’s try and extend it a bit - we’ll make it possible to remove people using the context menu.

  1. Implement a more advanced context menu handler function.

const handleContextMenu = (
  selectedRowIds: Id[],
  selectedColIds: Id[],
  selectionMode: SelectionMode,
  menuOptions: MenuOption[]
): MenuOption[] => {
  if (selectionMode === "row") {
    menuOptions = [
      ...menuOptions,
      {
        id: "removePerson",
        label: "Remove person",
        handler: () => {
          setPeople(prevPeople => {
            return [...prevPeople.filter((person, idx) => !selectedRowIds.includes(idx))]
          })
        }
      }
    ];
  }
  return menuOptions;
}

  1. Update the ReactGrid component’s properties. Note that rows must be selectable for our feature to work. After all, we will be removing the currently selected rows.

return (
  <ReactGrid
    rows={rows}
    columns={columns}
    onCellsChanged={handleChanges}
    onContextMenu={handleContextMenu}
    enableFillHandle
    enableRangeSelection
    enableRowSelection
  />
)

Live demo

You can see the effect of the changes we’ve just introduced in the demo below. To test the new feature, simply select a row by clicking a header cell or one of the leftmost cells, then right-click anywhere and use the new menu entry.

Advanced menu context handling live demo

Prev:

Fill handle

Next:

Group Id