Table
행과 열로 구성된 구조 안에서 여러 정보를 체계적으로 정리하고 비교할 수 있는 컴포넌트입니다.
컴포넌트 명세 (Component Specification)
Anatomy
Table
기본 기능
목록형 데이터를 한 눈에 확인할 수 있는 컴포넌트
시각 옵션
size
weight
align
header / data
상태
해당 없음
내부 구성
text
stroke
사이즈 가이드 (Size Guide )
Table Heade, Data 사이즈는 화면 위계와 목적에 따라 S, M로 총 2가지 사이즈로 제공됩니다.
테이블 분류 (Table Variant)
Table의 상단에 사용되는 Table Header, 내부 데이터를 나타낼 때 사용되는 Table Data로 구분됩니다.
텍스트 굵기 (Text Weight)
Tabel Header / Data 내부의 텍스트 굵기는 regular와 Bold로 구분되며 강조 정도에 따라 사용합니다.
텍스트 정렬 (Text Align)
Tabel Header / Data 내부의 텍스트 정렬은 Left, Center, Right로 나뉩니다.
사용 예시 (Use Case)
실제 서비스 화면에서 Table이 배치되고 활용되는 패턴입니다.
Medium, Horizontal Table
각 Cell의 높이가 46px로 Medium 사이즈의 가로형 Table입니다.
Small, Vertical Table
각 Cell의 높이가 36px로 Small 사이즈의 세로형 Table입니다.
Small, Horizontal Table
각 Cell의 높이가 36px로 Small 사이즈의 가로형+세로형 Table입니다.
마스터 컴포넌트 (Master Component)
Master Component입니다. 컴포넌트를 복사해 원하는 위치에서 Instance로 사용합니다.
