Actually, i'm creating the table where i've to expand the Row by clicking the icon on another column! any help will be appreciated ! (i'm using material UI components like table, accordian)

Here's the Demo of my code on sandbox!

https://codesandbox.io/s/proud-resonance-iryir7?file=/src/App.js:73-74

My concern is when I click on message icon, email cell will be expanded!

CodePudding user response：

import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  Box,
  Grid,
  TextField,
  Typography
} from "@mui/material";
import React, { useEffect, useState } from "react";

import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
// import Collapse from "@mui/material/Collapse";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
import ChatBubbleOutlineOutlinedIcon from "@mui/icons-material/ChatBubbleOutlineOutlined";
import Modal from "@mui/material/Modal";

const Example = () => {
  const [Data, setData] = useState([]);
  const [open, setOpen] = React.useState(false);
  const [expandedId, setExpandedId] = useState("0");

  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  function createData(
    name,
id,
    email
  ) {
    return {
      name,
id,
      email
    };
  }

  const modalstyle = {
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    width: 400,
    bgcolor: "background.paper",
    border: "2px solid #000",
    boxShadow: 24,
    p: 4
  };
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((result) => setData(result));
  });

  const rows = [
    Data.map((data) =>
      createData(
        data.name,
data.id,
        data.email
      )
    )
  ];

  return (
    <div>
      <div className="heading">
        <Grid container>
          <Grid item md={9} sm={9} xs={12}></Grid>
        </Grid>
        <div className="box">
          <TableContainer component={Paper}>
            <Table aria-label="simple table">
              <TableHead
                sx={{
                  "& .MuiTableCell-head": {
                    backgroundColor: "#000000",
                    color: "#ffffff",
                    height: "55px",

                    textAlign: "center",
                    fontSize: "14px"
                  }
                }}
              >
                <TableRow>
                  <TableCell>name</TableCell>

                  <TableCell align="right">email</TableCell>

                  <TableCell></TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {rows[0].map((row) => (
                  <TableRow
                    sx={{
                      "& td, & th": {
                        border: 1,
                        borderColor: "gray"
                      }
                    }}
                    key={row.id}
                  >
                    <TableCell component="th" scope="row">
                      <div className="codes" onClick={handleOpen}>
                        {`${row.name} ${row.id}`}
                      </div>
                    </TableCell>

                    <TableCell align="left">
                      <div className="msg-container">
                        <Accordion
                          elevation={0}
                          key={row.Id}
                          // onChange={handleChangeExpanded(`panel_${row.id}`)}
                          expanded = {expandedId === row.id}
                        >
                          <AccordionSummary 
                          ariaControls={`${row.id}_panel1a-content`}
                          id={`${row.id}_panel1a-id`}
          >
                            <div className="msg">{row.email}</div>
                          </AccordionSummary>
                          <AccordionDetails>
                            <TextField placeholder="Enter Here"></TextField>
                          </AccordionDetails>
                        </Accordion>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="info-icon-container">
                        <div className="info-icon" onClick={handleOpen}>
                          <InfoOutlinedIcon />
                        </div>
                        <Modal
                          open={open}
                          onClose={handleClose}
                          aria-labelledby="modal-modal-title"
                          aria-describedby="modal-modal-description"
                          BackdropProps={{
                            style: {
                              background: "transparent"
                            }
                          }}
                        >
                          <Box sx={modalstyle}>
                            <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 className="chatbubble-icon">
                          <ChatBubbleOutlineOutlinedIcon onClick={() => setExpandedId(prev => prev === row.id ? "0" : row.id)} />
                        </div>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        </div>
      </div>
    </div>
  );
};

export default Example;

check this out.