Using MUI Modal when clicking on MUI x data grid rendered button

Question

I was wondering how can i set a modal when u click on mui x data grid table . i dont know how it works . and how should i put a modal inside data grid table ( throw clicking a button )

function UserDataGrid() {
  const { allUsers, filteredUsers, setFilteredUsers, traffics } =
    useContext(UserContext);

  const handleEvent = (e) => {
    console.log(e.field);
  };

  const columns = [
    { field: "id", headerName: "ای دی" },
    { field: "username", headerName: "یوزر" },
    {
      field: "enable",
      headerName: "وضعیت",
      type: "boolean",
      width: 140,
      editable: true,
      renderCell: (params) => {
        return params.value ? <p>فعال</p> : <p>غیر فعال</p>;
      },
    },
    { field: "startdate", headerName: "تاریخ شروع", headerAlign: "center" },
    { field: "finishdate", headerName: "تاریخ پایان" },
    { field: "mobile", headerName: "موبایل" },
    { field: "referral", headerName: "معرف" },
    { field: "traffic", headerName: "ترافیک" },
    {
      field: "action",
      headerName: "Action",
      width: 180,
      sortable: false,
      disableClickEventBubbling: true,

      renderCell: (params) => {
        const onClick = (e) => {
          const currentRow = params.row;
          return alert(JSON.stringify(currentRow, null, 4));
        };

        return (
          <div direction="row" spacing={2}>
            <Button onClick={onClick}>Delete</Button>
            <Button onClick={onClick}>Edit</Button>
          </div>
        );
      },
    },
  ];

  return (
    <div>
      <DataGrid
        rows={allUsers}
        columns={columns}
        loading={!allUsers.length}
        onCellClick={handleEvent}
      />
    </div>
  );
}

export default UserDataGrid;

for example i want this modal to be rendered when i click delete Button on every row with that row's detail . i want to add some buttons on row which open's a modal on click and send requests to the server .

export default function DeleteModal() {
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    <div>
      <Button onClick={handleOpen}>Open modal</Button>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box sx={style}>
          <Typography id="modal-modal-title" variant="h6" component="h2">
            Text in a modal
          </Typography>
          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
          </Typography>
        </Box>
      </Modal>
    </div>
  );
}

Answer 1

You can add the Modal component below the DataGrid Component and manage the open and close states of the Modal on Delete button click. I have implemented a solution here.