The computer has come to shape our world and the universe. It is so important that we cannot do without this fantastic invention. You would have heard about networking before. Networking is all about connection, the concept of networking can be applied to every facet of human life. It refers to a computer as well.

How to create a custom Material UI DataGrid column menu item?

Anil

For Material UI's DataGrid (v5.2.0), I am trying to create a custom column menu item to act on the column. If I set onClick={hideMenu} then the menu successfully hides when I click it. However, if I set onClick={handleMenuItemClick}, and in that function call hideMenu(), then I get an uncaught error, complaining about stopPropagation. This makes me think that I'm successfully accessing hideMenu() but the reference is wrong.

So my question is:

How do I correctly pass reference so that I can call/reference hideMenu and currentColumn?

(Extra Credit) Once I get that reference right, how do I mutate the data grid, such as deleting/adding/renaming columns? Do I have to pass apiRef (eg useGridApiRef() ) or is the reference to currentColumn enough?

Uncaught TypeError: Cannot read properties of undefined (reading 'stopPropagation') at index-esm.js:15:1 at handleMenuItemClick (CustomColumnMenuComponent.jsx:17:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1) at invokeGuardedCallback (react-dom.development.js:4056:1) at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070:1) at executeDispatch (react-dom.development.js:8243:1) at processDispatchQueueItemsInOrder (react-dom.development.js:8275:1) at processDispatchQueue (react-dom.development.js:8288:1) at dispatchEventsForPlugins (react-dom.development.js:8299:1)

import * as React from 'react';
import MenuItem from '@mui/material/MenuItem';
import {
  GridColumnMenuContainer,
} from '@mui/x-data-grid-pro';

export default function CustomColumnMenuComponent(props) {
  const { hideMenu, currentColumn, ...other } = props;

  const handleMenuItemClick = () => {
    // do something with currentColumn...
    hideMenu()
  };

  return (
    <GridColumnMenuContainer hideMenu={hideMenu} currentColumn={currentColumn} {...other}>
      <MenuItem onClick={handleMenuItemClick} column={currentColumn}>Mutate Column</MenuItem>
      <MenuItem onClick={hideMenu} column={currentColumn}>Close Menu</MenuItem>
    </GridColumnMenuContainer>
  );
};