React Data GridContext Menu

react logo

The user can bring up the context menu by right clicking on a cell. By default, the context menu provides 'copy', 'paste' and 'export'. Copy will copy the selected cells or rows to the clipboard. Paste will always, forever, be disabled.

The 'paste' operation in the context menu is not possible and hence always disabled. It is not possible because of a browser security restriction that JavaScript cannot take data from the clipboard without the user explicitly doing a paste command from the browser (e.g. ^ Ctrl+V or from the browser menu). If JavaScript could do this, then websites could steal data from the client by accessing the clipboard maliciously. The reason why the grid keeps the disabled paste option in the menu is to indicate to the user that paste is possible and it provides the keyboard shortcut as a hint to the user.

Configuring the Context Menu

You can customise the context menu in one of two ways:

  1. Set colDef.contextMenuItems. This can either be a list of menu items, or a callback which is passed the list of default menu items.
  2. Set the grid option getContextMenuItems(). This callback will be passed the list of default menu items as well as the column.

Note that colDef.contextMenuItems will take priority over getContextMenuItems().

The menu item list should be a list with each item either a) a string or b) a MenuItemDef description. Use 'string' to pick from built-in menu items (listed below) and use MenuItemDef descriptions for your own menu items.