tanstack-table: 헤드리스 UI 테이블 & 데이터그리드은(는) 무엇을 하나요?
TS/JS, React, Vue, Solid, Svelte, Qwik, Angular, Lit을 위한 강력한 테이블 및 데이터그리드 구축용 헤드리스 UI입니다.
이 라이브러리는 UI 렌더링에는 관여하지 않고, 테이블의 상태 관리와 로직(정렬, 필터링, 페이징, 행 확장 등)을 추상화하여 제공합니다. 따라서 개발자는 원하는 디자인 시스템과 스타일링 기법(CSS-in-JS, Tailwind, 일반 CSS 등)을 자유롭게 사용할 수 있습니다.
주요 기능
- 헤드리스(Headless): UI 요소를 강제하지 않으며, 데이터와 상태만 관리합니다.
- 프레임워크 불가지론: 동일한 코어 API를 React, Vue, Solid, Svelte 등에서 사용할 수 있습니다.
- 고급 기능: 정렬, 필터링, 글로벌 검색, 페이징(클라이언트/서버 측), 행 선택, 확장 가능한 행, 컬럼 고정, 가상화 지원.
- 타입 안전성: TypeScript로 완전히 작성되어 강력한 타입 추론을 제공합니다.
- 경량: 코어는 약 10KB(gzipped)로 가볍습니다.
지원 프레임워크
- React (
@tanstack/react-table) - Vue (
@tanstack/vue-table) - Solid (
@tanstack/solid-table) - Svelte (
@tanstack/svelte-table) - Qwik (
@tanstack/qwik-table) - Angular (
@tanstack/angular-table) - Lit (
@tanstack/lit-table) - 일반 TS/JS (
@tanstack/table-core)
간단한 예제 (React)
import { useReactTable, getCoreRowModel, flexRender, createColumnHelper } from '@tanstack/react-table'
const columnHelper = createColumnHelper<User>()
const columns = [
columnHelper.accessor('firstName', {
header: '이름',
}),
columnHelper.accessor('lastName', {
header: '성',
}),
]
function Table({ data }: { data: User[] }) {
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
})
return (
<table>
<thead>
{table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id}>
{headerGroup.headers.map(header => (
<th key={header.id}>
{flexRender(header.column.columnDef.header, header.getContext())}
</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map(row => (
<tr key={row.id}>
{row.getVisibleCells().map(cell => (
<td key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</table>
)
}
설치 방법
각 프레임워크에 맞는 패키지를 설치하세요.
# React
npm install @tanstack/react-table
# Vue
npm install @tanstack/vue-table
# Solid
npm install @tanstack/solid-table
# 일반 JS/TS (코어만)
npm install @tanstack/table-core