mui table custom
-
[MUI Table 커스텀하기] React, Styled-Componet, Material-UI, TypeScript에서 테이블 커스텀하기프론트엔드 개발자가 될거야./react 2023. 2. 4. 14:31
위 사진은 가상화폐 거래소 코빗에 있는 테이블이다. 회사에서 프로젝트를 하면서 이런식으로 테이블을 그려내야했는데 테이블을 내가 원하는 레이아웃으로 커스텀하기에 꽤 복잡했기에.. 그 부분에 대해 블로깅을 해보려고 한다. 우선 나는 css는 Styled-Componet로 스타일을 주고 있고 css라이브러리로는 material ui를 쓴다. Styled-Componet는 material ui를 쉽게 overloading 할 수 있어서 내가 좋아하는 조합이다 : ) https://mui.com/ MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of React co..
-
[MUI Table Custom] 내가 원하는 테이블로 커스텀하기, 앞으로 자주보자 MUI Table!!!!프론트엔드 개발자가 될거야./react 2022. 8. 26. 20:25
위의 테이블은 완성본이다. 라이브러리를 가져와서 쓰는 거는 너무 편리하고 좋지만 레이아웃 커스텀하기 너무 복잡하다!! 테이블에 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%', '&..