본문으로 건너뛰기

TanStack Table은 개발자가 마크업과 스타일을 완전히 제어하면서 강력한 테이블과 데이터 그리드를 처음부터 구축할 수 있도록 지원하는 고급 헤드리스 UI 라이브러리입니다.

프레임워크에 종속되지 않도록 설계되어 React, Vue, Solid, Svelte, Lit 등 주요 프런트엔드 프레임워크를 지원합니다.

이 라이브러리는 가벼운 용량을 지향하며, 트리 셰이킹 후 일반적으로 10-15kb 정도이므로 성능이 중요한 애플리케이션에 적합합니다. API가 간결하면서도 정렬, 필터링, 페이지네이션, 대규모 데이터 세트의 효율적인 관리 등 강력한 기능을 제공합니다.

TanStack Table의 두드러진 특징 중 하나는 헤드리스 설계 철학입니다. 미리 정의된 스타일에 제한받지 않고 테이블 UI의 거의 모든 요소를 맞춤 설정할 수 있습니다. 이러한 유연성은 고유한 디자인을 적용해 픽셀 단위까지 정확한 결과를 내야 하는 디자이너에게 이상적입니다.

TanStack Table은 확장 가능해 기본 설정을 쉽게 재정의할 수 있으며, 서버 측 데이터와 외부 데이터 소스를 처리하도록 만들어졌습니다. 강력한 기능을 활용해 복잡한 인터페이스를 만들 수 있어 웹 애플리케이션의 데이터 표현을 위한 기반을 제공합니다.

기능

  • 가벼운 용량(10-15kb)
  • 트리 셰이킹
  • 헤드리스 설계
  • 셀 포맷터
  • 내부 상태 자동 관리
  • 완전 제어형 상태 옵션
  • 정렬
  • 다중 정렬
  • 전체 필터
  • 열 필터
  • 페이지네이션
  • 행 그룹화
  • 집계
  • 행 선택
  • 행 확장
  • 열 순서 지정
  • 열 표시 여부
  • 열 크기 조정
  • 가상화 지원
  • 서버 측/외부 데이터
  • 중첩/그룹 헤더
  • 바닥글

관련 항목

Next.js

개발자 생산성을 높이는 풍부한 기능을 갖춘 비동기식 동적 웹 애플리케이션 구축을 위한 강력한 솔루션입니다.

Preact

효율적인 웹 개발을 위해 React의 최신 기능과 작은 용량을 유지하면서 빠른 대안을 제공합니다.

Refine

이 강력한 React 프레임워크는 내부 도구와 관리 대시보드 개발을 간소화해, 개발자가 기본 기능을 반복해서 구현하는 대신 기능 개발에 집중할 수 있도록 합니다.

Angular

동적이고 확장 가능한 웹 애플리케이션을 구축할 수 있는 견고한 솔루션을 제공하는 프레임워크입니다. 폭넓은 기능을 갖춰 유연하면서도 체계적인 애플리케이션 개발 방식을 원하는 개발자의 요구를 충족합니다.

dndkit

React 애플리케이션에 드래그 앤 드롭 기능을 쉽게 구현할 수 있도록 도와주는 툴킷입니다.

Docusaurus

콘텐츠와 사용성에 집중해 문서 사이트를 손쉽게 만들 수 있도록 돕는 프로젝트입니다.

Enhance

이 솔루션은 개발자가 HTML 중심의 개발 방식을 활용하도록 해 생산성과 애플리케이션 성능을 높이고, 구축과 배포 과정을 모두 간소화합니다.

Hybrids

선언형 및 함수형 프로그래밍 기법을 결합해 효율적이고 유지 관리가 쉬운 웹 애플리케이션과 컴포넌트를 만들 수 있도록 지원하는 프레임워크입니다.