Protable

Columns

dataindex: DB의 필드와 매핑해 주는 역할.

 

Pagination

'pagination={}'에 대해 따로 정의하지 않으면 기본적으로 pagination 아래와 같이 제공한다.

protable pagination 기본

 

그러나 보다시피 기본 세팅이 중국어이기 때문에 바꿔주기 위해서는 다음과 같이 사용하는 것을 추천한다.

pagination={{
    showTotal: (total, range) => (
        <div>{`총 ${total} 중 ${range[0]}-${range[1]} `}</div>
    ),
}}

*참고) stackoverflow.com/questions/62229953/change-ant-design-pro-table-pagination-language

 

이런 방식으로 작성하면 아래와 같이 사용 가능하게 된다.

 

protable pagination 한국어로 수정

 

이 때, backend에서 총 item 개수를 'total'이라는 변수로 받아와야 하는 점을 유의해야 한다. Protable 자체에서 total이라는 변수를 이용해서 총 개수를 표시하는 것으로 생각된다. 나는 처음에 이 변수가 아닌 totalCount로 넘겨 주었다가 pagination이 제대로 동작하지 않아 당황스러웠다.

 

 

 

 

 

 

 

 

 

 

github.com/ant-design/pro-table

www.npmjs.com/package/@ant-design/pro-table

ant.design/components/pagination/