how to add a custom action menu in material table - reactjs

Question

I need to display a menu in the actions column from material-table.
there is a post already here:
How show menu item in Material Table
which does it but I couldn't ask for the sandbox so I can see and play with the implementation
looking something like this
I would really appreciate any help on this

Answer 1

This is the working piece of what was looking for
this is the sandbox with the example
I hope this is useful in case you are looking for something similar
https://codesandbox.io/s/elastic-kalam-4987cm?file=/src/ActionMenu.js
here the code as well
import React, { useState } from "react";
import IconButton from "#mui/material/IconButton";
import Menu from "#mui/material/Menu";
import MenuItem from "#mui/material/MenuItem";
import MoreVertIcon from "#mui/icons-material/MoreVert";
export default function ActionMenu({ data }) {
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const add = () => {
console.log("Add: ", data.name);
handleClose();
};
const remove = () => {
console.log("remove: ", data.name);
handleClose();
};
return (
<div>
<IconButton
aria-label="more"
id="long-button"
aria-controls={open ? "long-menu" : undefined}
aria-expanded={open ? "true" : undefined}
aria-haspopup="true"
onClick={handleClick}
>
<MoreVertIcon />
</IconButton>
<Menu
id="long-menu"
MenuListProps={{
"aria-labelledby": "long-button"
}}
anchorEl={anchorEl}
open={open}
onClose={handleClose}
>
<MenuItem key="1" onClick={add}>
add
</MenuItem>
<MenuItem key="2" onClick={remove}>
remove
</MenuItem>
</Menu>
</div>
);
}