Table 정렬

음악 관리 프로그램을 만들던 도중 메인 페이지에 렌더링되는 음악들을 Material-ui 의 Table API를 사용하여 구현했다.

제목, 장르, 별점 부분은 TableHeader로 그에 맞는 데이터들은 TableCell을 이용했다.

<Table>
     <TableRow>
         <TableCell align = 'right'style = {{fontSize : 25}} >{title}</TableCell>
         <TableCell align = 'right'style = {{fontSize : 25}} >{genre}</TableCell>
         <TableCell align = 'right'style = {{fontSize : 25}} >{rate}</TableCell>
     </TableRow>
</Table>

 

Material-ui 공식 홈페이지를 참조해 자체적으로 정렬이 가능한 props인 align을 사용하여 오른쪽 정렬을 했는 데 다음과 같이 나왔다.

 

위를 해결하기 위해 공식 홈페이지 외에 다른 곳에서 정보를 얻으려고 했지만 원하는 정보가 나오지 않았고 이것은 정렬의 문제라기 보다 TableCell의 크기가 어떻게 할당되어있는 지 궁금했다. style에 backgroundColor를 추가해서 어떻게 되어있는 지 확인했다.

 

위와 같이 어떤 이유에서인지(나중에 알아볼 예정) 각 TableCell의 width는 아무런 설정을 하지 않았지만 다른 크기로 되어있었고 결국 

<Table>
     <TableRow>
           <TableCell style = {styles.tableCell}>{title}</TableCell>
           <TableCell style = {styles.tableCell}>{genre}</TableCell>
           <TableCell style = {styles.tableCell}>{rate}</TableCell>
     </TableRow>
</Table>

/* .... */

const styles = {
    tableCell : {
        width : '33%',
        textAlign : 'center',
        fontSize : 25
    },
}

 

위와 같이 각 width를 33%로 지정해 딱 1/3을 차지하도록 했다. 정렬은 center로 하고 style객체를 만들어 가독성 좋게 style을 적용시켰다.

 

 

공식 홈페이지에 있는 코드를 따라서 작성을 해봤던 것인데 그대로 되지않았다. 내가 놓친부분이 무조건 있을 거라 생각하고, 저런식으로 style을 짜는 것은 Material-ui 의 props를 제대로 사용하지 않은 것이라 생각하기 때문에 나중에 다시 만들어 볼 생각이다.