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을 적용하지 않고, 가로 스크롤이 가능한 형태로 사용합니다.

©Codeit

©Codeit

©Codeit