이번 내용은 Shadcn의 데이터 테이블 컴퍼넌트를 설정하고 만드는 방법에 대해 공부했다.
Shadcn의 data-table은 테이블마다 특정한 정렬이나 필터링 요구사항들이 있고 다양한 데이터 소스로 작동하기 때문에 하나의 구성요소로 설정하기 보다는 유연하게 설정할 수 있는 가이드를 제공한다고 한다.
https://ui.shadcn.com/docs/components/data-table
Data Table
Powerful table and datagrids built using TanStack Table.
ui.shadcn.com
전체적인 가이드는 다음 내용을 따라서 진행이 되고 자신의 요구사항에 맞추어서 설정을 진행하면된다.
완성된 Account Page
나는 계정들에 대한 정보들을 탐색하는 Account Table을 완성 했다.
이 테이블을 만들기 위해서는 다음 구조들을 통해서 작업한다.
- columns.tsx는 columns의 정의를 포함한다.
- data-table.tsx는 <DataTable>을 포함한다.
- page.tsx는 table에 대한 렌더링을 진행한다.
상황에 맞게 적절하게 잘 조정하면서 만들면됨