[리액트 React] react-table body style / react-table 테이블 내용 스타일 주기

 

안녕하세요.

디자인도 하고, 개발도하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 react-table 라이브러리를 사용할 때 바디에 스타일 주는 법에 대해 공유하겠습니다.

 

기본적으로 react-table은 body 글자가 좌측 정렬이 되어 있습니다.

그렇다면 어떻게 style을 주어서 변경을 할 수 있을까요?

지금부터 알아보겠습니다!

 

  바디 스타일 주는 법 / react-table body style

이렇게 Cell이라는 Key로 넣어주면 되는데요.

cell: { value }안에 담기는 value는 accessor에서 불러온 데이터이니 참고해 주세요!

return할때 태그에 style을 지정해주면 끝!

 const columns = React.useMemo(
      () => [
        {
          Header: () => (
            <p style={{text-align: 'center}}>번호</p>
          ),
          accessor: 'data',
          Cell: ({ cell: { value } }) => {
            return <p style={{text-aling: 'center'}}>{value}</p>
          }
        }
      ]
)