웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > react

antd table 컴포넌트 페이지네이션 삭제하기

Last Modified : 2020-12-22 / Created : 2020-10-20
4,284
View Count

react에서 사용하는 antd 컴포넌트 중 Table을 사용하는 경우 나타나는 페이지네이션을 숨기거나 삭제하는 방법에 대하여 알이봅니다.



! antd의 Table 컴포넌트 페이지네이션 삭제


antd의 Table 컴포넌트는 기본값으로 페이지네이션을 자동으로 화면에 출력합니다. 불러오는 리스트의 개수가 많은 경우 첫 페이지가 아닌 다른 페이지에 나타나게 되죠.

@ Table의 페이지네이션이 필요하지 않은 경우
물론 편리한 기능이지만 만약 페이지네이션이 필요없는 경우가 언제 있을까요? 보이는 리스트 수와 상관없이 항상 페이지네이션 없이 화면에 모두 출력하길 원할 수도 있을 것입니다. 아니면 별도의 페이지네이션 컴포넌트를 사용하는 경우도 있을 수 있겠네요.

- 페이지네이션 없이 항상 모든 리스트를 보여주려고 할 때
- 별도의 페이지네이션 컴포넌트를 사용할 때


그렇다면 이 경우 어떻게 Table 컴포넌트의 페이지네이션을 삭제할 수 있을까요?


! antd Table 페이지네이션 삭제 예제보기

간단한 설정 방법으로 제거할 수 있다면 물론 편리하겠지만 찾아본 결과 간단한 설정만으로는 어렵습니다. 대신 아래와 같이 Table 컴포넌트 요소에 pagination props 정보를 추가하면 가능합니다.
<Table
  ...
  pagination={{
    total: 1000,
    pageSize: 1000,
    hideOnSinglePage: true
  }}
/>

위 코드에서 중요한 부분은 바로 pagination에 객체를 추가한 부분입니다. 이 부분만 따로 보면 아래와 같죠.
{
  total: 1000,
  pageSize: 1000,
  hideOnSinglePage: true
}

위의 total과 pageSize는 전체 개수와 페이지 사이즈 수를 의미하며 모두 1000으로 설정하여 화면에 출력할 가장 큰 값을 입력하였습니다. 이처럼 큰 값을 주면 페이지네이션으로 출력되지 않고 간단하게 모두 한 화면에 출력할 수 있게됩니다.


여기까지 antd의 Table 컴포넌트에서 paginantion을 제거, 삭제하는 방법을 알아보았습니다.

Previous

react 함수형 컴포넌트 useEffect 훅 사용방법 및 예제

Previous

[React] 컴포넌트에 사용할 태그를 변경하는 방법