CODEWITHSUNDEEP
reactjsmaterial-uimaterial-table
OskarCv
OskarCv

Reputation: 11

how to add a custom action menu in material table

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

Upvotes: 0

Views: 2174

Answers (1)

OskarCv
OskarCv

Reputation: 11

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>
  );
}

Upvotes: 1

Related Questions