[react] Datagrid pagination 커스텀해보기💫

U기능 하나 추가할 때 마다 내 심정 = 흠....

 

표로 데이터를 보여줄 일이 있어 처음에는

MUI (Material UI)를 사용해서 datagrid  테이블을 만들고 아래에 page를 나타내주었다.

근데 생각해보니까 데이터의 양이 방대해져서 페이지의 크기가 커졌는데,

찾고싶은 데이터가 만약 맨 뒤쪽에 있다면...?...?>..?

 

<기존 page UI> 

 

 

저런식으로 했을 때 일일이 클릭해서 뒤로 가야하기 때문에 사용자 입장에서 불편할 것 같았다. 

그래서 페이지를 나타내주는 부분을 좀 더 편리하게 다시 수정해보기로했다. 

 

 

기존 코드를 보면 

pageSize 와 rowCount로 개수를 맞춰주고 onPageChange를 사용하여 페이지 수를 맞춰주었다. 

 

 

 

<새로 커스텀한 UI>

사용자가 더 간편하게 테이블을 사용할 수 있도록 이런식으로 만들어 주었다. 

저렇게 페이지를 구현하는걸 Pagination이라고 하는데 

먼저 CustomPagination함수를 만들어 Pagination의 페이지 개수(?) 를 지정해준다.

그리고 DataGrid안에 커스텀페이지네이션을 넣어준다. 

한 페이지당 10으로 설정했기 때문에 10개이상이 넘어가면 페이지 개수가 추가된다. 

 

 

 

이런식으로 구현한 페이지가 사용자가 더 보기 좋을 거 같아서 수정해보았다!