Expand All

  Getting Started



  Row Models





Github stars make projects look great. Please help, donate a star, it's free.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Column Menu

Showing the Column Menu

The menu will be displayed by default and will be made up of three panels. You have the following grid properties to suppress showing an individual panel or not showing the menu at all:

  • suppressMenuFilterPanel: Set to true to not show filter panel.
  • suppressMenuMainPanel: Set to true to not show main panel.
  • suppressMenuColumnPanel: Set to true to not show column selection panel.
To not show the menu at all, set all three above to true. In addition, you can set the attribute suppressMenu=true to the column definition to not show the menu for a particular column.

Customising the Menu

The main menu panel, by default, will show a set of items. You can adjust which of these items get display, or you can start from scratch and provide your own items. To customise the menu, provide the getMainMenuItems() callback.

getContextMenuItems() takes the following object as parameters:

GetMainMenuItemsParams {
    column: Column, // the column that was clicked
    api: GridApi, // the grid API
    columnApi: ColumnAPI, // the column API
    context: any, // the grid context
    defaultItems: string[] // list of the items that would be displayed by default

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

A MenuItem description looks as follows (items with question marks are optional):

MenuItem {
    name: string, // name of menu item
    disabled?: boolean, // if item should be enabled / disabled
    shortcut?: string, // shortcut (just display text, saying the shortcut here does nothing)
    action?: ()=>void, // function that gets executed when item is chosen
    checked?: boolean, // set to true to provide a check beside the option
    icon?: HTMLElement|string, // the icon to display beside the icon, either a DOM element or HTML string
    subMenu?: MenuItemDef[] // if this menu is a sub menu, contains a list of sub menu item definitions

Built In Menu Items

The following is a list of all the default built in menu items with the rules about when they are shown.

  • pinSubMenu: Submenu for pinning. Always shown.
  • valueAggSubMenu: Submenu for value aggregation. Always shown.
  • autoSizeThis: Auto-size the current column. Always shown.
  • autoSizeAll: Auto-size all columns. Always shown.
  • rowGroup: Group by this column. Only shown if column is not grouped.
  • rowUnGroup: Un-group by this column. Only shown if column is grouped.
  • resetColumns: Reset column details. Always shown.
  • expandAll: Expand all groups. Only shown if grouping by at least one column.
  • contractAll: Contract all groups. Only shown if grouping by at least one column.

Reading the list above it can be understood that the list defaultItems changes on different calls to the getContextMenuItems() callback, depending on, for example, what columns are current used for grouping.

If you do not provide a getContextMenuItems() callback, then the rules alone decides what gets shown. If you do provide a getContextMenuItems(), then the defaultItems will be filled using the rules above and you return from the callback whatever you want, using the defaultItems only if you want to.

Example Column Menu

The example below shows the getMainMenuItems() in action. To demonstrate different scenarios, the callback returns something different based on the selected column as follows:

  • Athlete column appends custom items to the list of built in items.
  • Athlete column contains a sub menu.
  • Age column provides custom items and adds one built in default item.
  • Country column trims down the default items by removing values.
  • All other columns return the default list.

Overriding Column Menu Width

You can override the menu width by overriding the corresponding CSS:

.ag-set-filter-list {
    width: 500px !important;