[React] Antd Table 컴포넌트 정보 및 예제

React UI 라이브러리 antd의 Table 컴포넌트에 대하여 알아봅니다. antd의 Table 컴포넌트는 테이블 형태의 Layout을 구현하는데 사용됩니다.

<Table />

그럼 간단한 사용 방법 및 예제를 먼저 알아봅니다.

antd Table 컴포넌트 정보 및 예제

antd의 Table 컴포넌트를 사용하려면 기본적으로 아래의 props를 반드시 필요로 합니다.
dataSource // 테이블에 출력할 리스트 정보
columns // 테이블의 컬럼 정보를 표시합니다.
rowKey // [String | Function] unique Key 값을 설정합니다.예를들어 아래는 간단한 예제 코드입니다. 먼저 dataSource에 필요한 정보로 siteList 배열값을 생성합니다.
다음으로 컬럼 정보를 입력합니다.

🐔출처

앤트디자인 테이블 기본 공식문서

https://ant.design/components/table/

앤트디자인 테이블 상세 기능 공식문서(페이지네이션)

https://ant.design/components/pagination/

WEBISFREE

https://webisfree.com/2020-09-10/[react]-antd-table-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%A0%95%EB%B3%B4-%EB%B0%8F-%EC%98%88%EC%A0%9C

stackoverflow

https://stackoverflow.com/questions/49206995/pagination-prop-for-antd-table