Table
데이터를 구조화하여 표시하는 테이블 컴포넌트입니다.
개요
Table은 정형 데이터를 표 형식으로 표시하는 컴포넌트입니다. Compound pattern으로 유연하고 접근성 높은 테이블을 구성합니다.
| 이름 | 역할 | 상태 |
|---|---|---|
| 김철수 | 개발자 | 활성 |
| 이영희 | 디자이너 | 활성 |
| 박민수 | 기획자 | 대기 |
설치
사용법
Table 관련 컴포넌트들을 import하여 조합합니다.
예제
Caption
TableCaption으로 테이블의 목적을 설명합니다. 스크린리더 사용자에게 필수입니다.
| 월 | 매출 | 성장률 |
|---|---|---|
| 1월 | 1,200만원 | +15% |
| 2월 | 1,450만원 | +20.8% |
Footer
TableFooter로 합계나 요약 정보를 표시합니다.
| 항목 | 수량 | 금액 |
|---|---|---|
| 상품 A | 10 | 50,000원 |
| 상품 B | 5 | 60,000원 |
| 합계 | 110,000원 | |
정렬
TableHead에 sortable, sortDirection, onSort props로 정렬 기능을 구현합니다.
제품명 | 가격 | 재고 |
|---|---|---|
| 노트북 | 1,500,000원 | 23 |
| 마우스 | 35,000원 | 156 |
배열 데이터
배열 데이터를 map()으로 렌더링하는 실전 패턴입니다. align prop으로 숫자/금액 열을 오른쪽 정렬합니다.
| 월 | 담당자 | 매출 | 성장률 |
|---|---|---|---|
| 1월 | 김철수 | 12,000,000원 | +15.2% |
| 2월 | 이영희 | 14,500,000원 | +20.8% |
| 3월 | 박민수 | 18,200,000원 | +25.5% |
| 4월 | 정지원 | 16,800,000원 | -7.7% |
| 합계 | 61,500,000원 | +13.5% | |
접근성
Table은 WCAG 2.1 / KWCAG 2.2 Level AA 기준을 준수합니다.
- 시맨틱 HTML: table, thead, tbody, tfoot, tr, th, td 태그를 적절히 사용합니다.
- Caption: TableCaption으로 테이블의 목적을 설명합니다.
- Scope 속성: TableHead는 scope 속성으로 헤더의 범위를 명시합니다.
- 정렬 상태: 정렬 가능한 헤더는 시각적 표시와 함께 정렬 상태를 전달합니다.
- 키보드 탐색: Tab 키로 상호작용 요소 접근, Enter/Space 키로 정렬 실행이 가능합니다.
- 레이아웃 목적으로 Table을 사용하지 마세요. Container, Stack 등의 레이아웃 컴포넌트를 사용하세요.