Context Menu

The Adaptable Context Menu is a right-click menu that can be displayed in the DataGrid.

You can configure a default context menu that will be applied to all views or you can specify a different context menu for each view.

Context menus can be defined in the contextMenu property of the Adaptable State.

Each context menu needs at least a label and a getMenuItems function - see defining context menus section below.

Note

To respond to the user clicking a menu item, use the onAction function of the menu item.

The onAction is called when the user clicks the menu item in the context menu. In this function you have access to the row and column where the user clicked - because it's defined inside the getMenuItems function.

Actions in context menus have access to the cell where the user clicked
const getMenuItems = ({ items, cellValue, column, rowInfo }) => {
  return [
    ...items,
    '-',
    {
      key: 'alert-cell-value',
      label: 'Alert cell value',
      onAction: () => {
        if (!column || !rowInfo) {
          alert(`User clicked outside a column/row`);
          return;
        }
        alert(`You clicked "${cellValue}" (col "${column.id}", row "${rowInfo.id}")`);
      },
    },
  ];
};

Defining Context Menus

A context menu needs to be defined in state before it can be used and referenced in views.

Use the contextMenu.availableMenus state object to define context menus. Each key in the object is the id of a context menu, and the object value is the menu definition.

Defining context menus in state
const simpleMenu = {
  label: 'Simple Menu',
  getMenuItems: ({ items }) => {
    return [
      ...items,
      {
        key: 'hello',
        label: 'Hello',
      },
    ];
  },
};

const exportMenu = {
  label: 'Another Menu',
  getMenuItems: ({ items }) => {
    return [
      {
        key: 'Export',
        label: 'Export',
        menu: {
          items: [
            {
              key: 'ExportToExcel',
              label: 'Export to Excel',
            },
            {
              key: 'ExportToCSV',
              label: 'Export to CSV',
            },
          ],
        },
      },
    ];
  },
};
const state = {
  contextMenu: {
    availableMenus: {
      'simple-menu': simpleMenu,
      'export-menu': exportMenu,
    },
  },
};

Note

Because the getMenuItems function is called every time the user right-clicks the DataGrid, you can use it to dynamically change the menu items based on the cell where the user clicked.

This function is called with an object parameter that contains the following information:

  • items - the menu items that would be displayed by default. Return this array or your custom items, which may or may not include the default items.
  • column - the column where the user clicked. NOTE: this can be undefined, if the user clicked outside of a cell.
  • rowInfo - the row where the user clicked. NOTE: this can be undefined, if the user clicked outside of a cell.
  • cellValue - the rendered value of the cell where the user clicked.
  • adaptableApi - a reference to the AdaptableAPI object.
  • currentView - a reference to the current view that's being displayed in the DataGrid. NOTE this is a computed view, and has more information than the view definition in state.

Note

Context menus can have submenus (the nesting can continue multiple levels down).

In order to define a submenu, specify a menu property in the menu item definition. The menu property is an object with an items property, which is an array of menu items.

Returning an empty array from the getMenuItems function will result in no Adaptable context menu being displayed (and not even the browser's default context menu).

Returning null from the getMenuItems function will result in the no Adaptable context menu being displayed, but the browser's default context menu will be displayed.

Using a Default Context Menu for all Views

To use the same context menu for all views, you need to configure the view.viewDefaults.contextMenu property of the state. The value for this property will be the id of an existing context menu, as described in the previous section.

Using a default context menu
const state = {
  view: {
    currentViewId: 'myView',
    // used for all views that don't explicitly define a context menu
    viewDefaults: {
      contextMenu: 'simple-menu',
    },
    views: [
      {
        id: 'myView',
        label: 'My View',
      },
    ],
  },
  contextMenu: {
    availableMenus: {
      'simple-menu': {
        // ...
      },
    },
  },
};
Using the same context menu for all views
Fork

Configuring a View-specific Context Menu

When you use a default context menu for all views, you might want to override it for a specific view.

It's possible to do so by using the contextMenu property of the view.

Overriding the context menu per view
Fork

In this demo, we define a default context menu for all views, but the Grouped View has a different context menu, which includs an item dedicated to group rows.

PreviousDashboardNextContext Menu