Table
Table
Table
Table은 행과 열 구조로 다량의 데이터를 비교·확인·관리하기 위한 컴포넌트입니다. 여러 종류의 테이블 아이템(Table Item)을 조합해 정보를 구조적으로 표현할 수 있습니다.

Table
Table은 행과 열 구조로 다량의 데이터를 비교·확인·관리하기 위한 컴포넌트입니다. 여러 종류의 테이블 아이템(Table Item)을 조합해 정보를 구조적으로 표현할 수 있습니다.

Table
Table은 행과 열 구조로 다량의 데이터를 비교·확인·관리하기 위한 컴포넌트입니다. 여러 종류의 테이블 아이템(Table Item)을 조합해 정보를 구조적으로 표현할 수 있습니다.

Anatomy

ESSENTIAL
1. 헤더 로우
컬럼의 의미를 정의하는 영역으로, 테이블 헤더 아이템(Table Header Item)으로 구성됩니다.
2. 바디 로우
실제 데이터가 표시되는 영역입니다. 텍스트, 레이블, 버튼, 아이콘, 프로필 등 다양한 테이블 아이템(Table Item)을 조합해 구성할 수 있습니다.
Anatomy

ESSENTIAL
1. 헤더 로우
컬럼의 의미를 정의하는 영역으로, 테이블 헤더 아이템(Table Header Item)으로 구성됩니다.
2. 바디 로우
실제 데이터가 표시되는 영역입니다. 텍스트, 레이블, 버튼, 아이콘, 프로필 등 다양한 테이블 아이템(Table Item)을 조합해 구성할 수 있습니다.
Anatomy

ESSENTIAL
1. 헤더 로우
컬럼의 의미를 정의하는 영역으로, 테이블 헤더 아이템(Table Header Item)으로 구성됩니다.
2. 바디 로우
실제 데이터가 표시되는 영역입니다. 텍스트, 레이블, 버튼, 아이콘, 프로필 등 다양한 테이블 아이템(Table Item)을 조합해 구성할 수 있습니다.
State
State
State
Properties
Select | false, true |
State | default, hover |
Properties
Select | false, true |
State | default, hover |
Properties
Select | false, true |
State | default, hover |
Spec
![]() | Function정렬과 행 선택 기능을 필요에 따라 사용할 수 있습니다. |
![]() | Type프로필, 버튼, 아이콘, 레이블 등 다양한 타입을 추가해서 조합할 수 있습니다. |
Spec

Function
정렬과 행 선택 기능을 필요에 따라 사용할 수 있습니다.

Type
프로필, 버튼, 아이콘, 레이블 등 다양한 타입을 추가해서 조합할 수 있습니다.
Spec
![]() | Function정렬과 행 선택 기능을 필요에 따라 사용할 수 있습니다. |
![]() | Type프로필, 버튼, 아이콘, 레이블 등 다양한 타입을 추가해서 조합할 수 있습니다. |
Usage

Do
데이터가 없는 경우, Empty Section을 사용해 상태를 안내합니다.

Don't
모바일 환경에서는 컨테이너에 Fill을 적용하지 않고, 가로 스크롤이 가능한 형태로 사용합니다.
Usage

Do
데이터가 없는 경우, Empty Section을 사용해 상태를 안내합니다.

Don't
모바일 환경에서는 컨테이너에 Fill을 적용하지 않고, 가로 스크롤이 가능한 형태로 사용합니다.
Usage

Do
데이터가 없는 경우, Empty Section을 사용해 상태를 안내합니다.

Don't
모바일 환경에서는 컨테이너에 Fill을 적용하지 않고, 가로 스크롤이 가능한 형태로 사용합니다.