---
{"id":"data-table","title":"데이터 테이블","category":"컴포넌트","order":43,"summary":"서버·청구서처럼 같은 속성을 가진 항목 비교의 사용·상태·접근성 계약.","status":"문서 기준 · UI 미검증","references":["components/data-table/usage"]}
---

# 데이터 테이블

## 목적과 사용

서버·청구서처럼 같은 속성을 가진 항목 비교에 사용합니다. 순차 폼을 표로 꾸미거나 필수 비교값을 여러 탭으로 숨기지 않습니다.

## 구성과 변형

표 제목, 열 머리글, 행, 정렬/필터, 선택·행 동작. 변형의 외형은 각 제품의 기존 [토큰](tokens.md)을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.

## 동작 규칙

- TBL-01 MUST: 열 이름·단위·정렬 상태를 명시합니다.
- TBL-02 MUST: 행 클릭과 내부 메뉴·선택·링크 동작이 충돌하지 않습니다.
- TBL-03 MUST: 선택된 범위와 일괄 작업 대상 수를 실행 전에 확인합니다.
- TBL-04 SHOULD: 좁은 화면에서 중요 열을 보존하고 나머지 정보의 접근 경로를 제공합니다.

## 접근성

table/caption/th/scope와 aria-sort를 사용합니다. 단순 표에 grid 키보드 모델을 불필요하게 강제하지 않습니다. 공통 [접근성 기준](accessibility.md)도 함께 적용합니다.

## 콘텐츠 예시

좋음: CPU %, 메모리 GiB, 수집 시간 / 피함: 상태 없는 오래된 숫자.

## 우리 구현과 연결

Panel ServerRow 소스는 60초 주기·숨긴 탭 생략·429에서 이전 정상값 유지입니다. 문서의 예전 30초 설명과 구분합니다.

제품별 소유 경로는 [WICKEDVPS](product-vps.md), [Panel](product-panel.md), [Blesta](product-blesta.md)와 [소스 근거](source-evidence.md)를 확인합니다. 코드 존재와 모든 사용처의 준수는 다르며, 별도 표시가 없는 제품별 준수 상태는 미검증입니다.

## 상태와 검증

정렬·페이지·선택·지연 데이터·빈 결과·모바일·행 메뉴 키보드를 확인합니다.

일반·hover·focus·실행 중·실패·성공·disabled·read-only 중 해당하는 상태를 기록합니다. 해당하지 않는 상태를 임의로 만들지 말고 이유를 남깁니다. [검증 체크리스트](testing.md)에 증거를 연결합니다.