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.
export default ({ name, icon, shortcut, subMenu }) => {
useGridMenuItem(() => {
configureDefaults: () => true;
});
return (
<div>
<span className="ag-menu-option-part ag-menu-option-icon">{icon}</span>
<span className="ag-menu-option-part ag-menu-option-text">{name}</span>
<span className="ag-menu-option-part ag-menu-option-shortcut">{shortcut}</span>
<span className="ag-menu-option-part ag-menu-option-popup-pointer">{subMenu ? '>': ''}</span>
</div>
);
};
In previous versions of the grid, custom components were declared in an imperative way. See Migrating to Use reactiveCustomComponents for details on how to migrate to the current format.
To enable the default menu item behaviour, pass the callback configureDefaults to the useGridMenuItem hook and return true (see Providing Custom Behaviour).
Custom Menu Item Parameters
Menu Item Props
The following props are passed to the custom menu item components (CustomMenuItemProps interface).
Menu Item Callbacks
The following callbacks can be passed to the useGridMenuItem hook (CustomMenuItemCallbacks interface). All the callbacks are optional, and the hook only needs to be used if callbacks are provided.
Default Styling
In order for the menu to size dynamically, the default styling is provided via display: table. This means that if custom menu item components are used alongside grid-provided menu items, then they must adhere to a certain structure, or the grid styles must be overridden.
The default structure consists of a parent element with display: table-row, and four children with display: table-cell. This can be seen in the example above. If using configureDefaults and not suppressing root styling, the grid will automatically add the correct styling to the parent element.
This format can be overridden by Styling the Menu, notably ag-menu-list, ag-menu-option, ag-menu-option-part, ag-menu-separator and ag-menu-separator-part. This is demonstrated in the Providing Custom Behaviour example below.
Providing Custom Behaviour
As described above, the easiest way to configure the behaviour of a custom menu item is returning true from configureDefaults.
If this is not done, then the custom menu item will need to implement all of the required behaviour itself.
It is also possible to disable certain parts of the behaviour by returning an object of type IMenuConfigParams from configureDefaults:
The following example demonstrates providing custom behaviour (in the column menu only) by including a filter as a menu item. To allow for a full-width custom menu item alongside grid-provided ones, the default menu styling is overridden (see Default Styling).
Note this shows a column filter in the custom menu item as an example for how complex items can be added. It is not meant to be used as a complete solution.