HeaderMenu

Right click column header or focus it and press SPACE key to show the context menu for headers.

Default header menu items

The Header menu has no default items provided by the HeaderMenu feature, but there are other features that populate the header menu with the following items:

*

items that are generated dynamically

>

first level of submenu

Customizing the menu items

The menu items in the Header menu can be customized, existing items can be changed or removed, and new items can be added. This is handled using the items config of the feature.

Add extra items for all columns:

const grid = new Grid({
  features : {
    headerMenu : {
      items : {
        extraItem : { text: 'My header item', icon: 'fa fa-car', weight: 200, onItem : () => ... }
      }
    }
  }
});

It is also possible to add items using columns config. See examples below.

Add extra items for a single column:

const grid = new Grid({
  columns: [
    {
      field: 'name',
      text: 'Name',
      headerMenuItems: {
        columnItem : { text: 'My unique header item', icon: 'fa fa-flask', onItem : () => ... }
      }
    }
  ]
});

Remove built-in item:

const grid = new Grid({
  features : {
    headerMenu : {
      items : {
         // Hide 'Stop grouping'
         groupRemove : false
      }
    }
  }
});

Customize built-in item:

const grid = new Grid({
  features : {
    headerMenu : {
      items : {
         hideColumn : {
             text : 'Bye bye column'
         }
      }
    }
  }
});

Remove nested menu item:

const grid = new Grid({
    features : {
        headerMenu : {
            items : {
                multiSort : {
                    menu : { removeSorter : false }
                }
            }
        }
    }
});

It is also possible to manipulate the default items and add new items in the processing function:

const grid = new Grid({
  features : {
    headerMenu : {
      processItems({items, record}) {
          if (record.cost > 5000) {
             items.myItem = { text : 'Split cost' };
          }
      }
    }
  }
});

Full information of the menu customization can be found in the "Customizing the Cell menu and the Header menu" guide.

This feature is enabled by default.

Keyboard shortcuts

This feature has the following default keyboard shortcuts:

For more information on how to customize keyboard shortcuts, please see our guide