DataTable

TanStack Table 기반의 고급 데이터 테이블 컴포넌트입니다. 정렬, 필터링, 페이지네이션, 행 선택 기능을 제공합니다.

개요

DataTable은 TanStack Table(React Table v8)을 기반으로 KRDS 스타일을 적용한 고급 데이터 테이블입니다. 컬럼 정의만으로 정렬, 필터링, 페이지네이션을 쉽게 구현할 수 있습니다.

팀원 목록
이름이메일역할상태
김철수kim@example.com개발자활성
이영희lee@example.com디자이너활성
박민수park@example.com기획자대기
정지원jung@example.com개발자활성
최수현choi@example.comQA비활성

설치

사용법

DataTable과 관련 헬퍼 함수들을 import하여 사용합니다.

예제

정렬

SortableHeader 헬퍼를 사용하여 정렬 가능한 컬럼을 쉽게 구현합니다.

정렬 가능한 테이블
상태
김철수kim@example.com개발자활성
이영희lee@example.com디자이너활성
박민수park@example.com기획자대기
정지원jung@example.com개발자활성
최수현choi@example.comQA비활성

페이지네이션

enablePagination으로 페이지네이션을 활성화합니다. 페이지 크기 옵션도 커스터마이징 가능합니다.

페이지네이션 테이블
상태
김철수kim@example.com개발자활성
이영희lee@example.com디자이너활성
박민수park@example.com기획자대기
정지원jung@example.com개발자활성
최수현choi@example.comQA비활성
페이지당행총 8개 중 1-5
1 / 2

검색 필터

enableGlobalFilter로 전역 검색 기능을 활성화합니다. 모든 컬럼에서 검색합니다.

검색 가능한 테이블
상태
김철수kim@example.com개발자활성
이영희lee@example.com디자이너활성
박민수park@example.com기획자대기
정지원jung@example.com개발자활성
최수현choi@example.comQA비활성
강민서kang@example.com개발자활성
윤서준yoon@example.com디자이너대기
임하늘im@example.com기획자활성

행 선택

enableRowSelection으로 체크박스 선택 기능을 활성화합니다. 선택된 행은 onRowSelectionChange 콜백으로 받을 수 있습니다.

선택 가능한 테이블
이름이메일역할상태
김철수kim@example.com개발자활성
이영희lee@example.com디자이너활성
박민수park@example.com기획자대기
정지원jung@example.com개발자활성
최수현choi@example.comQA비활성

커스텀 셀 렌더링

컬럼 정의의 cell 속성을 사용하여 셀 내용을 커스터마이징합니다.

커스텀 셀 렌더링
이메일상태
김철수kim@example.com활성
이영희lee@example.com활성
박민수park@example.com대기
정지원jung@example.com활성

전체 기능

정렬, 검색, 페이지네이션, 행 선택을 모두 조합한 완전한 데이터 테이블입니다.

전체 기능 테이블
상태
김철수kim@example.com개발자활성
이영희lee@example.com디자이너활성
박민수park@example.com기획자대기
정지원jung@example.com개발자활성
최수현choi@example.comQA비활성
페이지당행총 8개 중 1-5
1 / 2

로딩 상태

loading prop으로 데이터 로딩 중임을 표시합니다.

로딩 중인 테이블
이름이메일역할상태
로딩 중...

빈 상태

emptyMessage prop으로 데이터가 없을 때 표시할 메시지를 지정합니다.

빈 테이블
이름이메일역할상태
등록된 사용자가 없습니다.

접근성

DataTable은 WCAG 2.1 / KWCAG 2.2 Level AA 기준을 준수합니다.

  • 시맨틱 HTML: 내부적으로 HANUI Table 컴포넌트를 사용하여 올바른 테이블 구조를 유지합니다.
  • Caption: caption prop으로 테이블의 목적을 설명합니다. 스크린리더에서 sr-only로 숨겨져 있습니다.
  • 체크박스 레이블: 행 선택 체크박스에 적절한 aria-label이 제공됩니다.
  • 정렬 상태 표시: 정렬 가능한 헤더는 시각적 아이콘과 함께 정렬 상태를 전달합니다.
  • 페이지네이션 레이블: 페이지 이동 버튼에 적절한 aria-label이 제공됩니다.
  • 키보드 탐색: Tab 키로 상호작용 요소에 접근하고, Enter/Space 키로 동작을 실행할 수 있습니다.