[React] mui Table 사용하여 데이터 반복문 처리하기

 

Mui Table 사용하여 반복적인 data를 가지고 table로 생성하기

 

import "./styles.css";
import React from "react";
import { TableBody, TableContainer, TableHead, TableRow } from "@mui/material";
import { TableCell } from "@material-ui/core";
import { Table } from "@material-ui/core";
import CheckIcon from "@mui/icons-material/Check";
import PriorityHighIcon from "@mui/icons-material/PriorityHigh";
import RemoveIcon from "@mui/icons-material/Remove";
import "./App.scss";

export default function App() {
  const data = [
    {
      section: "등",
      items: [
        {
          description: "렛풀다운",
          wed: true,
        },
        {
          description: "케이블 시티드 로우",
          wed: true,
        },
        {
          description: "레터럴 로우",
          wed: false,
        },
        {
          description: "풀 업",
          wed: true,
        },
      ],
    },
    {
      section: "어깨/가슴",
      items: [
        {
          description: "숄더 프레스",
          wed: true,
        },
        {
          description: "사이드 레터럴 레이즈",
          wed: true,
        },
        {
          description: "체스트 프레스",
          wed: true,
        },
      ],
    },
    {
      section: "하체",
      items: [
        {
          description: "스쿼트",
          wed: true,
        },
      ],
    },
  ];
  return (
    <div className="App">
      <Table className={"CheckTable"}>
        <TableHead style={{ border: "1px solid #ebebeb" }}>
          <TableRow>
            <TableCell className={"CheckHeadCell"}>대분류</TableCell>
            <TableCell className={"CheckHeadCell"}>체크리스트</TableCell>
            <TableCell className={"CheckHeadCell"}>월</TableCell>
            <TableCell className={"CheckHeadCell"}>화</TableCell>
            <TableCell className={"CheckHeadCell"}>수</TableCell>
            <TableCell className={"CheckHeadCell"}>목</TableCell>
            <TableCell className={"CheckHeadCell"}>금</TableCell>
            <TableCell className={"CheckHeadCell"}>토</TableCell>
            <TableCell className={"CheckHeadCell"}>일</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data.map((section, sectionIndex) => (
            <React.Fragment key={sectionIndex}>
              {section.items.map((item, itemIndex) => (
                <TableRow key={itemIndex}>
                  {itemIndex === 0 && (
                    <TableCell
                      rowSpan={section.items.length}
                      className={"CheckSectionCell"}
                    >
                      {section.section}
                    </TableCell>
                  )}
                  <TableCell className={"CheckListCell"}>
                    {item.description}
                  </TableCell>
                  {["mon", "tue", "wed", "thu", "fri", "sat", "sun"].map(
                    (day) => (
                      <TableCell key={day} className="CheckWeekCell">
                        {item[day] ? (
                          <CheckIcon sx={{ color: "#46a44d" }} />
                        ) : item[day] === false ? (
                          <PriorityHighIcon
                            sx={{ color: "#ce1818" }}
                            cursor={"pointer"}
                            onClick={() => handleOpenImageModal(item)}
                          />
                        ) : (
                          <RemoveIcon sx={{ color: "#6e6e6e" }} />
                        )}
                      </TableCell>
                    )
                  )}
                </TableRow>
              ))}
            </React.Fragment>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}