This page describes the old imperative way of declaring custom menu item components when the grid option reactiveCustomComponents
is not set. This behaviour is deprecated, and you should instead use the new behaviour described on the Custom Menu Item page.
If you are not Providing Custom Behaviour, then declaring custom menu item components imperatively is similar to with reactiveCustomComponents
enabled. However the props will be slightly different (see Custom Menu Item Parameters).
If providing custom behaviour, then the component setup will be different, and is demonstrated in the following example.
Custom Menu Item Interface
The interface for a custom menu item component is as follows:
interface IMenuItem {
// optional methods
// 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;
}
Note that you will need to expose the lifecycle/callback methods (for example, the setActive
callback) with forwardRef
and useImperativeHandle
.
Custom Menu Item Parameters
When a React component is instantiated the grid will make the grid APIs, a number of utility methods as well as the cell and row values available to you via props
- the interface for what is provided is documented below.
If custom params are provided via the menuItemDef.menuItemParams
property, these will be additionally added to the params object, overriding items of the same name if a name clash exists.
Properties available on the IMenuItemParams<TData = any, TContext = any>
interface.
on | Callback to let the menu know that the current item has become active. Required if updating the active status within the menu item.
|
level | Level within the menu tree (starts at 0). |
is | Returns true if another sub menu is open. |
open | Open the sub menu for this item.
activateFirstItem If true , activate the first item in the sub menu.
|
close | Close the sub menu for this item. |
close | Close the entire menu. |
update | Updates the grid-provided tooltip this component.
tooltip The value to be displayed by the tooltip
shouldDisplayTooltip A function returning a boolean that allows the tooltip to be displayed conditionally. This option does not work when enableBrowserTooltips={true} .
|
sub | If this item is a sub menu, contains a list of menu item definitions |
menu | Provide a custom menu item component. See Menu Item Component for framework specific implementation details.
|
menu | Parameters to be passed to the custom menu item component specified in menuItem .
|
name | Name of the menu item. |
disabled | Set to true to display the menu item as disabled. |
shortcut | Shortcut text displayed inside menu item. Setting this doesn’t actually create a keyboard shortcut binding.
|
action | Function that gets executed when item is chosen. |
checked | Set to true to provide a check beside the option. |
icon | The icon to display, either a DOM element or HTML string. |
css | CSS classes to apply to the menu item. |
tooltip | Tooltip text to be displayed for the menu item. |
suppress | If true , will keep the menu open when the item is selected. Note that if this item has a sub menu, it will always remain open regardless of this property.
|
api | The grid api. |
context | Application context as set on gridOptions.context . |