JavaScript Data Grid

Menu Item Component

javascript logo

Menu Item Components allow you to customise the menu items shown in the Column Menu and Context Menu. Use these when the provided menu items do not meet your requirements.

The following example demonstrates a custom menu item component in both the column menu and context menu.

Implement this interface to provide a custom menu item.

interface IMenuItemComp {
   // mandatory methods

   // Returns the DOM element for this menu item
   getGui(): HTMLElement;

   // optional methods

   // The init(params) method is called on the menu item once. See below for details on the parameters.
   init(params: IMenuItemParams): void;

   // Configure the default grid behaviour for this item, including styling,
   // and mouse and keyboard interactions.
   // Return `true` to use all default behaviour, `false` to use no default behaviour
   // (equivalent to `configureDefaults` not being defined),
   // or `IMenuConfigParams` to choose what default behaviour to use.
   configureDefaults(): boolean | IMenuConfigParams;

   // Called when the item is activated/deactivated, either via mouseover or keyboard navigation.
   setActive(active: boolean): void;

   // If the item has a sub menu, called when the sub menu is opened/closed.
   setExpanded(expanded: boolean): void;

   // Called when the item is selected, e.g. clicked or Enter is pressed.
   select(): void;

To enable the default menu item behaviour, implement the configureDefaults method and return true (see Providing Custom Behaviour).

The interface for the menu item parameters is as follows: