Context Menu (Enterprise)

apex-grid-enterprise ships a right-click context menu on cells and headers with built-in actions (sort, pin, hide, copy, and "Chart range"). It is enabled by default and fully customizable.

Enabling / disabling

grid.contextMenu = true;    // default
grid.contextMenu = false;   // disable
// or in markup: <apex-grid-enterprise context-menu="false">

Replacing the items

Assign a ContextMenuConfig (via the property) to replace the built-in items. items can be a static array or a function of the right-click target:

grid.contextMenu = {
  items: (target) => [
    { label: 'Copy', run: (t) => copyCell(t) },
    { label: 'Open row', run: (t) => openRow(t.data) },
    {
      label: 'Export',
      submenu: [
        { label: 'CSV', run: () => grid.exportToCSV() },
        { label: 'XLSX', run: () => grid.exportToXLSX() },
      ],
    },
  ],
};

ContextMenuItem:

Field	Description
label	Item text
run(target)	Handler invoked on click
submenu	Nested ContextMenuItem[]

The target (a ContextMenuTarget) describes what was right-clicked — the row data, the column, and cell coordinates.

Augmenting the built-in menu

Rather than replacing the items wholesale, listen for apex-context-menu-opening and mutate the items array (or preventDefault() to suppress the menu). This keeps the defaults and adds to them:

import { CONTEXT_MENU_OPENING_EVENT } from 'apex-grid-enterprise';

grid.addEventListener(CONTEXT_MENU_OPENING_EVENT, (e) => {
  const { target, items } = e.detail;
  items.push({ label: `Inspect ${target.column?.key ?? 'cell'}`, run: () => inspect(target) });
});

The event detail carries the target and the mutable items array that will be rendered.

React example

import { useEffect, useRef } from 'react'
import 'apex-grid-enterprise/define'
import { CONTEXT_MENU_OPENING_EVENT } from 'apex-grid-enterprise'

export default function ContextMenuGrid() {
  const ref = useRef<any>(null)

  useEffect(() => {
    const grid = ref.current
    grid.columns = columns
    grid.data = data
    const onOpen = (e: any) => {
      e.detail.items.push({ label: 'Open row', run: (t: any) => console.log(t.data) })
    }
    grid.addEventListener(CONTEXT_MENU_OPENING_EVENT, onOpen)
    return () => grid.removeEventListener(CONTEXT_MENU_OPENING_EVENT, onOpen)
  }, [])

  return <apex-grid-enterprise ref={ref} style={{ height: 480 }} />
}