[MUI Table Custom] 내가 원하는 테이블로 커스텀하기, 앞으로 자주보자 MUI Table!!!!

위의 테이블은 완성본이다.

 

라이브러리를 가져와서 쓰는 거는 너무 편리하고 좋지만 레이아웃 커스텀하기 너무 복잡하다!!

테이블에 border, border-radious, width, height 등 내가 원하는 모양으로 바꾸는데 시간이 꽤 걸렸다..

기능 구현하는 것 보다 더 많은 시간을 할애했다..

 

먼저 makeStyles를 install 해주어야한다.

const useStyles = makeStyles({
  tableContainer: {
    border: '1px solid #D5DDE4',
    borderRadius: '4px',
    borderBottom: 0,
  },
  tableRow: {
    height: 40,
    background: '#EFF2F5',
  },
  tableCell: {
    width: '25%',
    '&.MuiTableCell-head': {
      padding: 0,
      textAlign: 'center',
      borderRight: '1px solid #D5DDE4',
      '&:last-child': {
        borderRight: '0px',
      },
    },
    '&.MuiTableCell-body': {
      height: 35,
      padding: 0,
      textAlign: 'center',
    },
  },
  tableBodyRow: {
    cursor: 'pointer',
  },
});

그래서 이 테이블이 탄생할 수 있었다🥹

앞으로 자주 보고싶다 MUI Table!!!!

왜냐 이번에 정복했기 때문에!!!!!

 

* 누군가에게 큰 도움이 될 수도 있으니 전체코드 업로드 : )

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { makeStyles } from '@material-ui/styles';
import {
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
} from '@mui/material';

export const EquipListTable = ({ equipList }) => {
  const classes = useStyles();
  const navigate = useNavigate();

  /**
   * List Detail 페이지 진입 navigete
   * @param {*} equipment_id
   */
  const goToDetailPage = equipment_id => {
    navigate(`/equipment/detail/${equipment_id}`);
  };

  function createData(
    serial_number,
    equipment_type,
    equipment_company,
    equipment_area,
    equipment_id
  ) {
    return {
      serial_number,
      equipment_type,
      equipment_company,
      equipment_area,
      equipment_id,
    };
  }

  const rows = equipList.map(
    ({
      serial_number,
      equipment_type,
      equipment_company,
      equipment_area,
      equipment_id,
    }) =>
      createData(
        serial_number,
        equipment_type,
        equipment_company,
        equipment_area,
        equipment_id
      )
  );

  if (!equipList) return <div>로딩중입니다.</div>;
  return (
    <TableContainer className={classes.tableContainer}>
      <Table>
        <TableHead>
          <TableRow className={classes.tableRow}>
            <TableCell className={classes.tableCell}>시리얼</TableCell>
            <TableCell className={classes.tableCell}>타입</TableCell>
            <TableCell className={classes.tableCell}>소유주</TableCell>
            <TableCell className={classes.tableCell}>구역</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map(row => (
            <TableRow
              onClick={() => goToDetailPage(row.equipment_id)}
              key={row.serial_number}
              className={classes.tableBodyRow}
            >
              <TableCell className={classes.tableCell}>
                {row.serial_number}
              </TableCell>
              <TableCell className={classes.tableCell}>
                {row.equipment_type}
              </TableCell>
              <TableCell className={classes.tableCell}>
                {row.equipment_company}
              </TableCell>
              <TableCell className={classes.tableCell}>
                {row.equipment_area}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};

const useStyles = makeStyles({
  tableContainer: {
    border: '1px solid #D5DDE4',
    borderRadius: '4px',
    borderBottom: 0,
  },
  tableRow: {
    height: 40,
    background: '#EFF2F5',
  },
  tableCell: {
    width: '25%',
    '&.MuiTableCell-head': {
      padding: 0,
      textAlign: 'center',
      borderRight: '1px solid #D5DDE4',
      '&:last-child': {
        borderRight: '0px',
      },
    },
    '&.MuiTableCell-body': {
      height: 35,
      padding: 0,
      textAlign: 'center',
    },
  },
  tableBodyRow: {
    cursor: 'pointer',
  },
});