React Data GridMenu Item Component

react 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.

To configure custom menu items, first enable the grid option reactiveCustomComponents.

export default ({ name, icon, shortcut, subMenu }) => {
   useGridMenuItem(() => {
       configureDefaults: () => true;
   return (
           <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>

Enabling reactiveCustomComponents affects all custom components. If you have custom components built in an imperative way instead of setting the reactiveCustomComponents option, they may need to be rebuilt to take advantage of the new features that reactiveCustomComponents offers. Using custom components built in an imperative way is now deprecated, and in AG Grid v32 the reactiveCustomComponents option will be true by default. See Migrating to Use reactiveCustomComponents. For the legacy imperative documentation, see Imperative Menu Item Component.

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

The following props are passed to the custom menu item components (CustomMenuItemProps interface).