Table
표(table)는 데이터를 하나 이상의 행과 열로 조직화하여 표현하는 형식으로 사용자가 빠르게 많은 양의 정보를 확인하고 비교할 수 있도록 도와줍니다.
Anatomy
- table header
- header label
- table body
- table cell
- 액션 버튼 : 표 내에서 사용 되는 액션 버튼
- 구분선 : 행과 행 사이를 시각적으로 구분
Table header
테이블 헤더에는 테이블에 관련된 레이블 정보와 테이블 내용에 관련된 컨트롤 표시됩니다.
default
| 제목 |
|---|
| 작성자 |
|---|
| 금액 |
|---|
sorting
제목 |
|---|
Coming soon |
|---|
Coming soon |
|---|
checkbox
Check |
|---|
Check |
|---|
Table body
테이블 바디에는 각 행의 데이터가 표시됩니다.
default
| 기본 : 왼쪽 정렬 |
| 가운데 정렬 |
| 숫자, 금액 등 오른쪽 정렬 |
| 말줄임 예시 : Lorem ipsum dolor sit amet consectetur. Sit fusce quam condimentum bibendum orci elit consectetur pretium. Nam ante commodo aliquet lacinia odio tempus magna orci viverra. |
hover
| 기본 : 왼쪽 정렬 |
| 가운데 정렬 |
| 숫자, 금액 등 오른쪽 정렬 |
| 말줄임 예시 : Lorem ipsum dolor sit amet consectetur. Sit fusce quam condimentum bibendum orci elit consectetur pretium. Nam ante commodo aliquet lacinia odio tempus magna orci viverra. |
state chip, badge
Success |
Warning |
Fail |
false |
checkbox
action button
Type
타입에는 스크롤과 페이지네이션이 있습니다. 스크롤과 페이지네이션 타입을 혼용하여 사용하지 않도록 합니다.
스크롤
화면 너비가 충분하지 않은 경우에는 스크롤을 사용합니다.
페이지네이션
데이터의 양이 많은 경우에는 페이지네이션을 이용합니다.
State
각 상태를 가이드에 맞춰 사용합니다.
스크롤
화면 너비가 충분하지 않은 경우에는 스크롤을 사용합니다.
| 제목 | 날짜 |
|---|---|
 데이터를 불러오고 있습니다. | |
Empty image
테이블에 데이터가 없을때 표출되는 이미지입니다. Empty state를 활용합니다. 높이는 영역에 맞추어 사용합니다.
| 제목 | 날짜 |
|---|---|
조회된 데이터가 없습니다. | |
Error
테이블에 데이터 오류 상태일때 표시됩니다. Empty state를 활용하여 오류 코드 또는 상태 메세지를 표시합니다. 높이는 영역에 맞추어 사용합니다.
| 제목 | 날짜 |
|---|---|
데이터를 불러오는데 실패했습니다. 오류 코드 : 404 | |
사용 가이드
넓이 설정
열의 최고 너비는 콘텐츠의 길이를 고려하여 사용합니다. 데이터 셀을 구성하는 텍스트는 2줄을 넘기지 않도록 하고 행과 행 사이의 간격을 적절하게 제공하여 사용자가 한번에 많은 데이터를 비교할 수 있도록 해야합니다.
Do
Don’t
데이터 정렬
개수, 퍼센트, 용량 등의 양적 데이터는 셀에서 오른쪽으로 정렬하여 사용자가 숫자를 더 잘 비교할 수 있도록 해야 합니다. 숫자를 오른쪽으로 정렬하면 단위 구분 기호(%, $, ¥, ℃, ℉ 등)가 일관된 위치에 배치되므로 가독성을 높입니다.
Do
Don’t