Table Kit

데이터 테이블 키트. 정렬, 필터, 페이지네이션, CSV 내보내기를 지원합니다.

기술 스택

ZustandTypeScript

기능

  • 컬럼별 정렬 (오름차순/내림차순)
  • 다중 필터 (포함, 일치, 시작, 끝)
  • 페이지네이션 (페이지 크기 변경)
  • 행 선택 (단일/다중/전체)
  • CSV 내보내기
  • 커스텀 셀 렌더링

파일 구조

설치

1. 의존성 설치

2. 코드 복사

아래 코드 탭에서 필요한 파일들을 복사합니다.

코드

사용 예시

접근성

  • 테이블에 role="grid" 또는 시맨틱 <table> 사용
  • 정렬 가능한 헤더에 aria-sort 속성 적용
  • 선택 가능한 행에 aria-selected 적용
  • 키보드로 정렬, 선택, 페이지 이동 지원
  • 페이지네이션에 aria-label 및 aria-current 적용