데이터 테이블은 많은 종류의 데이터 세트를 표시하는 강화된 기능의 테이블 입니다.
Usage
정해진 데이터를 수직 그룹화하여 보여주거나 확장을 통해 추가 데이터를 보여주는 용도로 사용합니다.
•
여러 종류의 분류나 수치에 대한 값을 표시할 때 사용합니다.
•
사용자가 진행 중인 과업에 대한 데이터 세트를 목록에서 제공할 때 사용합니다.
Variants
기본형
분류별 데이터를 수직 그룹화하여 표시하는 일반적인 형태의 데이터 테이블 입니다.
1.
각 열(column)의 헤더에는 해당 열에서 제공하는 데이터의 그룹이나 분류명을 표시합니다.
2.
해당 아이템의 상세 페이지로 이동하는 링크를 삽입할 수 있습니다.
3.
마우스 오버 스타일을 적용하여 사용합니다.
확장형
각 행에 접힘 요소를 사용하여 추가 데이터를 제공하는 형태입니다.
1.
접힘-펼침 액션 컨트롤 기표를 표시합니다.
2.
펼침 상태에서는 해당 행에 연관된 추가 데이터가 표시됩니다.
3.
추가 데이터도 데이터 테이블 형태로 표시할 수 있습니다.
기능형
액션을 수행할 행(row)을 선택할 수 있습니다.
1.
Checkbox로 각 행을 선택하거나 해제할 수 있습니다.
2.
선택한 행에 대해 수행할 액션을 버튼 그룹으로 표시합니다.
Guidelines
•
데이터 테이블 내 검색과 필터, 정렬 기능을 제공하여 사용자가 원하는 데이터를 보다 빠르고 쉽게 찾을 수 있도록 돕습니다.
•
화면에 표시되는 데이터 테이블의 총 행(row) 수를 표시하는 것을 원칙으로 합니다.
•
내용이 길 경우 줄임 대신 줄바꿈을 하는 것을 원칙으로 합니다.
•
헤더 레이블은 쉽게 눈에 들어오도록 간결하게 작성하고 단위 등의 반복을 피합니다.
•
영문 레이블의 경우 첫 글자를 대문자로 사용합니다.
•
열(column)의 내용은 다음의 정렬 규칙을 따르는 것을 원칙으로 합니다.
: 숫자는 우측 정렬, 텍스트는 좌측 정렬 합니다.
: 헤더는 해당 열의 데이터와 동일하게 정렬합니다.
: 가운데 정렬은 하지 않습니다.
•
모바일 화면에서는 카드로 대체하여 표시합니다.
Accessibility
•
thead, scope 속성을 사용합니다.
•
스크린 리더 사용자를 위해 aria-label 속성을 사용합니다.