React Data GridColumn Menu

Enterprise

The column menu is launched from the grid header, and displays a list of menu items, along with the ability to select columns and display filters.

AG Grid Community does not have a menu, but can launch Column Filters if enabled (see Launching Filters for configuration details).

The following example shows the column menu:

  • The Athlete column does not have filtering enabled, and only shows the main menu.
  • The Age column has filtering enabled, and shows an additional filter icon. Open and apply a filter to see the behaviour.
  • The Country column has filtering enabled with the floating filter. Open and apply a filter to see the behaviour.
  • Right-clicking on the column headers will also display the column menu.
  • Right-clicking in the empty space to the right of the column headers will display the column menu with options to choose/reset the columns.

Customising the Column Menu

How the column menu is launched from the header can be configured via the following column definition properties.

The column menu button can be hidden until moused over by the grid option suppressMenuHide.

The following example demonstrates different ways of customising the column menu:

  • The Athlete column has a filter and the menu button suppressed, but still available via right-click.
  • The Age column has a floating filter and the menu suppressed, but still available via right-click.
  • The Country column has a filter and the header filter button suppressed.
  • The Year column has a floating filter and the header filter button suppressed.
  • The Sport column has no filter and the menu suppressed on right-click.
  • The Gold column has no filter and the menu button suppressed, but still available via right-click
  • The Silver column has a filter (with the header filter button suppressed), and the menu button suppressed but still available via right-click.
  • The Bronze column has a floating filter and the menu button suppressed, but still available via right-click.
  • The Total column has the menu button, header filter button and right-click menu suppressed.

Customising the Menu Items

The main menu list, by default, will show a set of items. You can adjust which of these items get displayed, or you can start from scratch and provide your own items. There are two ways to customise the menu items:

  1. Set colDef.mainMenuItems. 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 getMainMenuItems(). This callback will be passed the list of default menu items as well as the column.

Note that colDef.mainMenuItems will take priority over getMainMenuItems().

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.