Context Menu

The context menu is a popup menu that appears when you right-click on a cell. It allows you to perform cell-related actions, such as copying, pasting, and more.

Context Menu Options

The context menu is disabled by default. To enable it, set the enableContextMenu prop to true on the GridOptions interface.

Live Editor

function App() { const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ enableContextMenu: true, dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> ); }

function App() {
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        enableContextMenu: true,
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
      }}
    />
  );
}

Result

Loading...

Context Menu Actions

The context menu has the following actions:

• Copy Cell
• Copy Row
• Copy Column
• Copy Table
• Copy Selected Rows
• Copy Selected Cells

Custom Context Menu Actions

You can add custom actions to the context menu by using the contextMenuOptions prop on the GridOptions interface.

This is what the contextMenuOptions prop looks like:

/**
* ContextMenuOptions allows you to control the context menu that appears when the user right clicks on a cell.
* Please see https://flexicious.github.io/react-data-grid/?example=Context_Menu for an example, and
* https://github.com/flexicious/react-data-grid/tree/master/apps/dashboard/src/app/examples/context-menu.tsx for the code.
* 
*/
export interface ContextMenuOptions {
  /***
   * The renderer to use for the context menu. The default is here:
   * https://github.com/flexicious/react-data-grid/tree/master/apps/dashboard/src/app/reference/react/contextmenu/ContextMenuRenderer.tsx
   */
  contextMenuRenderer?: (node: RendererProps) => unknown;
  /**
   * Allows you to control the items in the context menu.
   */
  contextMenuItems?: (node: VirtualTreeNode, currentItems: (ContextMenuItem | null)[]) => (ContextMenuItem | null)[];
}

Lets say you want to remove the Copy Cell action from the context menu. You can do this by passing a contextMenuItems prop to the GridOptions interface.

Live Editor

function App() { const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ enableContextMenu: true, dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, contextMenuOptions: { contextMenuItems: (node, currentItems) => { return currentItems.filter((item) => { if (!item) return true; return item.label !== "Copy Cell"; }); }, }, }} /> ); }

function App() {
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        enableContextMenu: true,
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        contextMenuOptions: {
          contextMenuItems: (node, currentItems) => {
            return currentItems.filter((item) => {
              if (!item) return true;
              return item.label !== "Copy Cell";
            });
          },
        },
      }}
    />
  );
}

Result

Loading...

Adding Custom Actions

You can add custom actions to the context menu by using the contextMenuOptions prop on the GridOptions interface.

Lets say you want to add a Custom Action to the context menu. You can do this by passing a contextMenuItems prop to the GridOptions interface.

This is what the contextMenuItems prop looks like:

/***
* An item in the context menu. This is the menu that appears when the user right clicks on a cell.
* Please see https://flexicious.github.io/react-data-grid/?example=Context_Menu for an example, and
* https://github.com/flexicious/react-data-grid/tree/master/apps/dashboard/src/app/examples/context-menu.tsx for the code.
* 
*/
export interface ContextMenuItem {
  /***
   * The class name to use for the menu item. This is used to style the menu item.
   */
  className: string;
  /**
   * The label to use for the menu item.
   */
  label: string;
  /**
   * The callback to call when the user clicks on the menu item. The callback is passed the cell that was clicked on.
   */
  onClick: (cell: CellSelection) => void;
}

Live Editor

function App() { const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ enableContextMenu: true, dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, contextMenuOptions: { contextMenuItems: (node, currentItems) => { return [ ...currentItems, { label: "Custom Action", onClick: () => { alert("Custom Action"); }, }, ]; }, }, }} /> ); }

function App() {
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        enableContextMenu: true,
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        contextMenuOptions: {
          contextMenuItems: (node, currentItems) => {
            return [
              ...currentItems,
              {
                label: "Custom Action",
                onClick: () => {
                  alert("Custom Action");
                },
              },
            ];
          },
        },
      }}
    />
  );
}

Result

Loading...

Custom Context Menu Renderer

You can use a custom context menu renderer by using the contextMenuOptions prop on the GridOptions interface.

Lets see how to use a custom context menu renderer.

Live Editor

function App() { const MyContextMenu/*: FC<RendererProps>*/ = (props) => { const node = props.node; const styles = node.styles; const box = node.box; const menuRef = useRef(null); const api = getApi(node); const getReferenceCell = () => node.gridOptions.contextInfo.contextMenuInfo.cell; const contextMenuItems/*: (ContextMenuItem | null)[]*/ = [ { className: "copy-cell-icon", label: "Custom Action", onClick: () => alert("Custom Action") }, null, { className: "copy-cell-icon", label: "Custom Action 2", onClick: () => alert("Custom Action 2") }, ]; return <div ref={menuRef} className="ezgrid-dg-context-menu ezgrid-dg-popup" style={{ ...styles, ...box }}> { contextMenuItems.map((item, index) => item ? <div key={index}> <div onClick={(item.onClick)} > <span className={gridCSSPrefix(item.className)} ></span>{item.label} </div></div> : <div style={{ borderBottom: "solid 2px red" }} key={index} />) } </div>; }; const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ enableContextMenu: true, dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, contextMenuOptions: { contextMenuRenderer: MyContextMenu, }, }} /> ); }

function App() {
  const MyContextMenu/*: FC<RendererProps>*/ = (props) => {
    const node = props.node;
    const styles = node.styles;
    const box = node.box;
    const menuRef = useRef(null);
    const api = getApi(node);
    const getReferenceCell = () => node.gridOptions.contextInfo.contextMenuInfo.cell;

    const contextMenuItems/*: (ContextMenuItem | null)[]*/ = [
        { className: "copy-cell-icon", label: "Custom Action", onClick: () => alert("Custom Action") },        
        null,
        { className: "copy-cell-icon", label: "Custom Action 2", onClick: () => alert("Custom Action 2") },

    ];

    return <div ref={menuRef} className="ezgrid-dg-context-menu ezgrid-dg-popup" style={{ ...styles, ...box }}>
        {
            contextMenuItems.map((item, index) => item ? <div key={index}> <div onClick={(item.onClick)} >
                <span className={gridCSSPrefix(item.className)} ></span>{item.label}
            </div></div> : <div style={{ borderBottom: "solid 2px red" }} key={index} />)
        }

    </div>;
};

  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        enableContextMenu: true,
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        contextMenuOptions: {
          contextMenuRenderer: MyContextMenu,
        },
      }}
    />
  );
}

Result

Loading...

CSS Classes for Context Menu

Finally, here are the CSS classes for the context menu that you can use to style the context menu.

.ezgrid-dg-context-menu {
    position: fixed;
    z-index: 2;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 5px #ccc;
    padding: 5px;
    width: 200px
}

.ezgrid-dg-header-hamburger-menu {
    display: block;
    position: relative;
    width: 100%
}

.ezgrid-dg-context-menu>div>div,
.ezgrid-dg-header-hamburger-menu>div>div {
    display: block;
    padding: 10px 8px;
    text-decoration: none;
    color: #000;
    background-color: #ddd;
    border-bottom: 1px solid #ccc
}

.ezgrid-dg-context-menu>div>div {
    display: flex;
    gap: 15px;
    align-items: center
}


.ezgrid-dg-context-menu>div>div:hover,
.ezgrid-dg-header-hamburger-menu>div>div:hover {
    background-color: #eee
}

Customizing CSS

All of these can be customized to fit your needs, just make sure you create a new file and import it after the grid CSS file, and make all your changes in the new file. This way, when you update the grid, your changes will not be overwritten.