Search

Data table

4 more properties
데이터 테이블은 많은 종류의 데이터 세트를 표시하는 강화된 기능의 테이블 입니다.

Usage

정해진 데이터를 수직 그룹화하여 보여주거나 확장을 통해 추가 데이터를 보여주는 용도로 사용합니다.
여러 종류의 분류나 수치에 대한 값을 표시할 때 사용합니다.
사용자가 진행 중인 과업에 대한 데이터 세트를 목록에서 제공할 때 사용합니다.

Variants

기본형

분류별 데이터를 수직 그룹화하여 표시하는 일반적인 형태의 데이터 테이블 입니다.
1.
각 열(column)의 헤더에는 해당 열에서 제공하는 데이터의 그룹이나 분류명을 표시합니다.
2.
해당 아이템의 상세 페이지로 이동하는 링크를 삽입할 수 있습니다.
3.
마우스 오버 스타일을 적용하여 사용합니다.

확장형

각 행에 접힘 요소를 사용하여 추가 데이터를 제공하는 형태입니다.
1.
접힘-펼침 액션 컨트롤 기표를 표시합니다.
2.
펼침 상태에서는 해당 행에 연관된 추가 데이터가 표시됩니다.
3.
추가 데이터도 데이터 테이블 형태로 표시할 수 있습니다.

기능형

액션을 수행할 행(row)을 선택할 수 있습니다.
1.
Checkbox로 각 행을 선택하거나 해제할 수 있습니다.
2.
선택한 행에 대해 수행할 액션을 버튼 그룹으로 표시합니다.

Guidelines

데이터 테이블 내 검색과 필터, 정렬 기능을 제공하여 사용자가 원하는 데이터를 보다 빠르고 쉽게 찾을 수 있도록 돕습니다.
화면에 표시되는 데이터 테이블의 총 행(row) 수를 표시하는 것을 원칙으로 합니다.
내용이 길 경우 줄임 대신 줄바꿈을 하는 것을 원칙으로 합니다.
헤더 레이블은 쉽게 눈에 들어오도록 간결하게 작성하고 단위 등의 반복을 피합니다.
영문 레이블의 경우 첫 글자를 대문자로 사용합니다.
열(column)의 내용은 다음의 정렬 규칙을 따르는 것을 원칙으로 합니다. : 숫자는 우측 정렬, 텍스트는 좌측 정렬 합니다. : 헤더는 해당 열의 데이터와 동일하게 정렬합니다. : 가운데 정렬은 하지 않습니다.
모바일 화면에서는 카드로 대체하여 표시합니다.

Accessibility

thead, scope 속성을 사용합니다.
스크린 리더 사용자를 위해 aria-label 속성을 사용합니다.

Related

Components