Table

대량의 데이터를 행과 열의 그리드 형식으로 정리하여 보여주는 요소입니다. 구조화된 정보를 통해 사용자가 데이터 간의 관계를 쉽게 비교하고 패턴을 파악할 수 있도록 돕습니다. 화면 너비를 확보할 수 있는 데스크톱 환경에서만 사용합니다.

Design

Web

Anatomy

높이와 좌측 여백을 고정해 사용합니다.

최소 높이를 가지며, 내용이 많아지면 상하단 여백을 유지한 채 높이가 가변합니다.

테이블의 각 행은 데이터를 보여주는 역할을 하며 별도의 인터랙션을 가지지 않는 것이 기본입니다. 필요할 경우 인터랙션을 추가하여 행 전체 선택이 가능하도록 사용할 수 있습니다.

많은 데이터 목록을 표시할 때 화면에 보이는 영역만 그려주어 스크롤 성능을 최적화합니다. 스크롤 시 Table head는 상단에 고정됩니다.

Table 내 특정 항목을 선택하거나, 여러 항목을 한 번에 선택할 수 있습니다.

Text: 가장 기본적인 형태로, 텍스트 기반의 정보를 표시하기 위해 사용됩니다. 텍스트 기반의 간단한 정보부터, 부연 설명을 포함하는 형태 등을 표현할 수 있습니다.
Action: 사용자가 클릭하여 특정 동작을 수행하도록 하는 인터랙티브 요소를 포함합니다. 버튼을 통해 행과 관련된 다양한 기능을 실행할 수 있습니다.
Content: 시각적 요소를 통해 정보의 식별을 돕습니다. 사용자를 나타내는 아바타(Avatar), 상태를 나타내는 배지(Badges), 의미를 함축하는 아이콘(Icons) 등을 활용합니다.