bc-grid
GitHub

Context menu

View source

Right-click any cell or row to open the grid's context menu. Mix custom items with bc-grid's built-in actions (copy / clear / pin / autosize) without writing chrome from scratch.

Right-click any row. The first three items are dynamic per-row; Copy cell / range / sep are bc-grid built-ins.No action yet
Order #
Customer
Amount
Sales rep
R-000001
Customer 00001
$0.00
Avery Chen
R-000002
Customer 00002
$31.42
Ben Singh
R-000003
Customer 00003
$62.83
Cara Diaz
R-000004
Customer 00004
$94.25
Drew Lin
R-000005
Customer 00005
$125.66
Elena Park
R-000006
Customer 00006
$157.08
Felix Roy
R-000007
Customer 00007
$188.50
Gita Bose
R-000008
Customer 00008
$219.91
Henry Kao
R-000009
Customer 00009
$251.33
Avery Chen
R-000010
Customer 00010
$282.74
Ben Singh
R-000011
Customer 00011
$314.16
Cara Diaz
R-000012
Customer 00012
$345.57
Drew Lin
R-000013
Customer 00013
$376.99
Elena Park
R-000014
Customer 00014
$408.41
Felix Roy
R-000015
Customer 00015
$439.82
Gita Bose

Try this

The first two items are dynamic per-row; the rest are bc-grid built-ins + a destructive item.

  • Right-click any cell on a data row.
  • The first item shows the customer name (per-row).
  • Click Copy "…" — the row id is copied to your real clipboard.
  • Hover Copy cell / Copy row — built-in clipboard items, no consumer wiring.
  • The destructive item renders in red and only shows when the click is on a row.

Item shapes

  • Built-in (string). Just pass the string id — "copy", "copy-cell", "clear-all-filters", "pin-column-left", "separator", etc. The grid wires the action.
  • Custom. { id, label, onSelect, disabled?, variant? }. Receives a BcContextMenuContext with { row, rowId, column, cell, selection, api }.
  • Toggle. { kind: "toggle", id, label, checked, onSelect } for boolean preferences (Show pagination, Show inactive rows, etc.). Wires through the user-settings store.
  • Submenu. { kind: "submenu", id, label, items }. Submenu items can be any of the above shapes — nest as deep as you want; the menu collision-flips when a submenu would overflow the viewport.

Items array vs function

  • Static array.Same items every right-click. Good for menus that don't care about which row was clicked.
  • Function. Receives the BcContextMenuContext and returns the items list. Use this when items depend on the row, the column, or the selection — like the demo above showing the customer name in the first item.
  • Filter with falsy. Returning false, null, or undefined in the array drops that item — cleaner than filter().

Default menu

If you don't pass contextMenuItems, bc-grid renders DEFAULT_CONTEXT_MENU_ITEMS — Server / Column / View / Editor submenus that cover the common-case actions every ERP grid wants out of the box. Import the constant and spread it into your own array if you want to extend rather than replace.