TanStack Table은 React에서 유연한 테이블을 만들기 위한 라이브러리이다.
데이터 정렬, 필터링, 그룹화, 페이지네이션 등 복잡한 테이블 기능을 쉽게 구현할 수 있게 해준다.
특징
- 헤어그룹, 필터, 정렬, 확장 등 다양한 테이블 기능을 제공한다.
- 완전히 제어 가능하고 커스터마이즈가 가능한 UI
- 타입스크립트로 작성되어 타입 안정성 뛰어남
사용 이유
- 복잡한 데이터를 효율적으로 표시하고 관리 가능
- React와 잘 통합되어 사용하기 편리함
- 성능이 좋고 확장성이 높아 대규모 데이터 처리에도 적합함
설치 방법
npm install @tanstack/react-table사용 방법
컬럼 정의
"use client";
import { ColumnDef } from "@tanstack/react-table";
export type BillboardColumn = {
id: string;
label: string;
createdAt: string;
};
export const columns: ColumnDef<BillboardColumn>[] = [
{
accessorKey: "label",
header: "Label",
},
{
accessorKey: "createdAt",
header: "Date",
},
];- 표 (테이블)을 만들기 위한 설계도라고 생각하면 된다. 예시는 광고판 정보를 표로 보여줄 것
- 어떤 정보를 보여줄지 정하고, 실제로 표에 어떤 열을 넣을지 결정한다.
'왜?'