React mui (UI Library) table

mui 라이브러리 예시 코드 정리

table 태그 사용

<table>
  <tr>
    <td>조회수</td>
    <td> 제목</td>
  </tr>
  {data.products.map((data, nth) => {
    return (
      <tr key={data.no}>
        <td>{data.no}</td>
        <td>{data.title}</td>
      </tr>
    );
  })}
</table>

mui table 태그 사용

<TableContainer component={Paper}>
  <Table aria-label="simple table">
    <TableHead>
      <TableRow>
        <TableCell align="right">id</TableCell>
        <TableCell align="left">제목</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {data.map((data, nth) => (
        <TableRow key={data.no}>
          <TableCell align="left">{data.no}</TableCell>
          <TableCell align="left">{data.title}</TableCell>
        </TableRow>
      ))}
    </TableBody>
  </Table>
</TableContainer>

table 태그 사용

</img>

mui table 태그 사용

</img>