Data table

Data table (데이터 테이블)

데이터 테이블은 데이터를 효율적으로 정리하고 표시하는 컴포넌트예요. 사용자의 제품 요구에 따라 추가 기능으로 사용자화할 수 있습니다. 표 형식의 데이터를 UI에서 구조화해 보여주는 핵심 컴포넌트입니다.

출처: Data table

본문

데이터 테이블 with AI label이 이제 안정(stable) 버전이 됐어요. 이 추가는 컴포넌트의 시각적 모양을 바꾸고, 컴포넌트에 AI가 있을 때 AI 설명 가능성 기능을 도입합니다. 자세한 내용은 AI 존재(AI presence) 섹션을 참고하세요.

개요 (Overview)

데이터 테이블의 기능은 UI에서 데이터를 정리하고 표시하는 데 이상적이에요. 컬럼 헤더는 데이터를 오름차순·내림차순으로 정렬할 수 있고, 행은 펼쳐서 점진적으로 정보를 공개할 수 있으며, 행에 단일 또는 일괄 액션을 취할 수 있습니다.

데이터 테이블 툴바는 기본 버튼, 검색, 필터링, 테이블 표시 설정 및 기타 유틸리티를 위한 위치를 제공해요.

언제 사용할까요 (When to use)

  • 데이터를 정리하고 표시할 때.
  • 사용자가 작업을 완료하기 위해 특정 데이터 조각으로 이동해야 할 때.
  • 사용자의 모든 리소스를 표시할 때.

언제 사용하지 말아야 할까요 (When not to use)

  • 데이터의 더 복잡한 표시나 인터랙션이 필요할 때.
  • 스프레드시트 애플리케이션을 대체할 때.

변형 (Variants)

변형 (Variant) 용도 (Purpose)
Default 기본 데이터 테이블은 헤더와 테이블 요소 행만 가져요. 다섯 가지 행 크기로 제공됩니다.
With selection 선택 변형은 사용자가 데이터 테이블의 개별 행을 선택할 수 있게 해줘요. 선택 옵션에는 단일 선택 라디오 버튼 옵션과 다중 선택 체크박스 옵션이 포함됩니다. 사용자는 선택된 항목에 단일 액션 또는 일괄 액션을 수행할 수 있어요.
With expansion 확장 가능한 변형은 작은 공간에 많은 양의 데이터를 표시하는 데 도움이 돼요. 사용자는 행 패널을 펼치고 접어 추가 정보를 공개하거나 숨길 수 있습니다.

포맷 (Formatting)

구조 (Anatomy)

  • 제목과 설명(Title and description): 데이터 테이블 제목과 선택적인 설명을 포함해요.
  • 툴바(Toolbar): 검색과 테이블 설정을 포함한 전역 데이터 테이블 컨트롤.
  • 컬럼 헤더(Column header): 선택적 정렬 동작이 있는 행 헤더의 제목.
  • 테이블 행(Table row): 다양한 유형의 데이터를 표시하도록 구성될 수 있어요. 행은 선택 가능하고, 확장 가능하며, 얼룩말 줄무늬(zebra stripe) 배경색을 번갈아 보여주도록 수정될 수 있습니다.
  • 페이지네이션 테이블 바(Pagination table bar): 데이터가 한 번에 보여주기에 너무 많을 때 사용자가 데이터를 페이지 단위로 탐색할 수 있게 하는 선택적 컴포넌트.

크기 (Sizing)

데이터 테이블은 다섯 가지 행 크기로 제공돼요: extra large, large, medium, small, extra small.

컬럼 헤더 행인 .cds--data-table thead는 항상 테이블의 행 크기와 일치해야 해요. Extra large 행 높이는 단일 행에 두 줄의 콘텐츠가 있을 것으로 예상되는 데이터에만 권장됩니다.

테이블과 헤더 행에 같은 행 높이를 사용하세요.

테이블과 헤더 행의 행 높이를 섞지 마세요.

데이터 테이블의 행 높이와 짝을 이룰 수 있는 두 가지 높이가 있어요. 큰(tall) 툴바는 large와 extra large 행 높이와만 짝을 이루어야 하고, 작은(small) 툴바는 small과 extra small 행 높이에만 사용해야 합니다.

짧은 데이터 테이블의 작은 툴바와 일반 데이터 테이블의 큰 툴바

배치 (Placement)

데이터 테이블은 페이지의 메인 콘텐츠 영역에 배치하고, 잘리지 않고 데이터를 표시할 충분한 공간을 주어야 해요. 데이터 테이블 안에 데이터 테이블을 넣거나, 정보가 비좁거나 잘라내기가 필요한 더 작은 컨테이너에 넣는 것은 피하세요.

데이터 테이블은 2x 그리드 가이드라인에 설명된 세 가지 거터 모드(gutter modes)를 따라 그리드에 배치할 수 있어요. 데이터 테이블은 다른 컴포넌트·콘텐츠와 가로 공간을 공유할 수 있지만, 사용자가 밀집된 데이터를 보도록 페이지에서 가장 많은 너비를 데이터 테이블에 주는 것을 고려하세요.

세 예시는 넓은(기본), 좁은, 밀집된 거터 모드의 데이터 테이블을 보여줘요. 다른 타입 정렬과 거터 크기에 주목하세요.

넓은 거터 모드 (Wide gutter mode)

넓은 거터 모드는 기본값이며 데이터 테이블과 다른 컴포넌트·콘텐츠 사이에 가장 많은 숨 쉴 공간을 줍니다.

넓은(기본) 그리드의 데이터 테이블

좁은 거터 모드 (Narrow gutter mode)

좁은 그리드에서 데이터 테이블을 사용하면 컴포넌트가 거터로 걸쳐지게 되어 데이터 테이블의 제목과 페이지의 다른 타입 사이에 바람직한 타입 정렬이 만들어집니다.

좁은 그리드의 데이터 테이블

밀집 거터 모드 (Condensed gutter mode)

데이터 테이블은 밀집된 그리드에서 사용할 수 있지만, 다른 UI 요소와 의도하지 않은 관계가 생기지 않도록 주의해야 해요. 컴포넌트가 서로 섞여 보이지 않도록 하이브리드 그리드나 서로 다른 배경색을 사용하세요.

밀집된 그리드의 데이터 테이블

콘텐츠 (Content)

주요 요소 (Main elements)

데이터 테이블 제목과 설명 (Data table title and description)

  • 테이블 제목은 사용자에게 이 데이터가 공통적으로 무엇을 가지며 UI에서 어떤 목적을 수행하는지 분명하게 해야 해요.
  • 제목 아래에 설명을 추가해 데이터 또는 그 출처에 대한 더 많은 정보를 제공할 수 있어요.
  • 데이터 테이블의 제목과 설명은 문장식 대소문자(sentence-case)를 사용해야 합니다.

컬럼 제목 (Column titles)

  • 컬럼 제목은 해당 컬럼의 데이터를 설명하는 한두 단어에 맞춰야 해요.
  • 컬럼 제목이 너무 길면 텍스트를 두 줄로 줄바꿈한 다음 나머지 텍스트를 잘라내세요. 전체 텍스트는 호버 시 툴팁으로 보여주어야 합니다.
  • 컬럼 제목은 문장식 대소문자를 사용해야 해요.

기본 버튼 (Primary button)

  • 기본 액션을 사용하는 데이터 테이블은 기본 버튼 사용과 액션 라벨에 대한 지침을 따라야 해요.

더 자세한 콘텐츠 지침은 Carbon의 콘텐츠 가이드라인을 참고하세요.

변형 (Variants)

확장 가능 (Expandable)

확장 가능한 데이터 테이블은 작은 공간에 많은 양의 데이터를 표시하는 데 도움이 돼요. 확장된 섹션은 추가 쿼리 시간이 필요한 보충 정보나 데이터에 사용하세요. 확장된 영역의 콘텐츠가 비좁다고 느껴지면 사용자를 전용 페이지, 사이드 패널 또는 문서를 확인하고 작업을 완료할 데이터 테이블로 데려가는 것을 고려하세요.

일괄 확장 (Batch expansion)

적절할 때, 테이블 컬럼 헤더에 일괄 확장 기능을 추가해 사용자가 모든 접힌 섹션을 동시에 열 수 있게 할 수 있어요. 그러나 확장 가능한 데이터 테이블 변형에서 expand-all 쉐브론은 기본적으로 표시되지 않습니다. 확장된 섹션에 상세 정보를 유지하면 일부 데이터 쿼리를 필요할 때까지 미루어 사용자 로딩 시간을 절약할 수 있어요. 모든 행을 한 번에 확장하면 보통 확장 가능한 테이블의 이 이점을 무효화합니다.

선택 가능 (Selectable)

기본적으로 선택 가능한 변형은 사용자가 데이터 테이블에서 한 번에 하나 이상의 행을 선택할 수 있게 해줘요. 행을 선택하려면 그 행과 연결된 체크박스를 선택해야 합니다. 컬럼 헤더의 체크박스를 선택하면 모든 행을 한 번에 선택할 수 있어요. 행의 체크박스는 체크됨(checked)과 체크 안 됨(unchecked)의 두 가지 상태만 가집니다. 그러나 컬럼 헤더의 check-all 체크박스는 체크, 체크 안 됨, 비결정(indeterminate)의 세 가지 상태가 있습니다.

선택된 항목에 적용되는 액션은 기본 테이블 툴바 또는 일괄 액션 모드에서 찾을 수 있어요.

라디오 선택 (Radio selection)

데이터 테이블은 단일 선택 라디오 버튼 컨트롤도 지원해서, 사용자가 한 번에 하나의 행만 선택하도록 제한합니다. 라디오 버튼은 왼쪽의 첫 번째 컬럼에 배치됩니다. 선택된 라디오 항목에 적용되는 단일 액션은 테이블 툴바 영역의 오른쪽에 자주 배치돼요. primary, ghost, 아이콘 전용 버튼으로 나타날 수 있습니다.

확장 가능 + 선택 가능 (Expandable + selectable)

데이터 테이블은 확장 가능과 선택 가능 기능을 모두 가지도록 구성될 수 있어요. 확장 아이콘은 항상 먼저 나타나며 선택 아이콘의 왼쪽에 있어요.

공통 동작 (Universal behaviors)

인터랙션 (Interactions)

데이터 테이블의 툴바와 행은 다른 Carbon 컴포넌트에서 볼 수 있는 인터랙션 관례를 따릅니다. 버튼, 체크박스, 라디오 버튼, 오버플로우 메뉴, 검색, 확장 요소가 데이터 테이블에서 사용되며 모두 각자의 가이드라인에 따라 동작합니다.

마우스 (Mouse)

사용자는 관련된 버튼이나 컴포넌트를 클릭해 테이블에서 액션 또는 기능을 실행할 수 있어요. 각 액션·기능은 각자의 고유한 클릭 대상을 가집니다. 자세한 내용은 접근성(Accessibility) 탭을 참고하세요.

데이터 테이블 마우스 인터랙션을 위한 강조 표시된 대상 영역

호버 (Hover)

데이터 테이블의 행 호버 상태는 항상 활성화되어야 해요. 행이 인터랙티브하지 않아도 사용자가 행 안의 데이터 컬럼을 시각적으로 훑는 데 도움이 되기 때문입니다.

페이지네이션 (Pagination)

페이지네이션은 데이터 테이블을 별도의 페이지로 나눠요. 단순 페이지네이션은 현재 보이는 페이지를 나타내고 이전·다음 페이지로 가는 컨트롤을 제공합니다. 고급 페이지네이션에는 페이지당 항목 수를 변경하고 특정 페이지 번호로 이동할 수 있는 옵션이 함께 제공돼요. 페이지네이션 컴포넌트는 항상 데이터 테이블의 하단에 배치됩니다. 자세한 내용은 페이지네이션 컴포넌트를 참고하세요.

단순(위)과 고급(아래) 페이지네이션 구성

테이블 툴바 (Table toolbar)

테이블 툴바는 테이블 설정, 복잡한 필터, 내보내기, 테이블 데이터 편집 같은 전역 테이블 액션을 위해 예약돼요. 툴바의 액션은 primary, ghost, 아이콘 전용 버튼을 사용할 수 있습니다. 테이블 툴바 안에 최대 다섯 개의 액션을 포함하세요. 더 많은 액션은 오버플로우 메뉴, 콤보 버튼 또는 유사한 컴포넌트를 통해 사용할 수 있게 할 수 있어요.

검색 (Searching)

접힌 검색 (Collapsed search)

검색 필드는 데이터 테이블 툴바의 아이콘 버튼을 통해 트리거할 수 있어요. 기본적으로 검색은 활성 검색(active search) 패턴을 따릅니다. 검색은 기본적으로 닫혀 있으며 테이블 제목 아래에 배치됩니다.

열린 검색 (Open search)

검색 필드는 데이터 테이블에서 항상 열려 나타날 수 있어요. 필드는 테이블 제목 아래 왼쪽에 배치되고 오른쪽의 액션에 닿을 때까지 늘어납니다.

정렬 (Sorting)

컬럼은 오름차순 또는 내림차순으로 정렬할 수 있어요. 정렬 컨트롤은 컬럼 헤더에 있으며 호버 시와 컬럼이 정렬되었을 때 화살표 아이콘으로 표시됩니다.

정렬된 데이터 테이블에는 세 가지 상태가 있어요: 정렬 안 됨(arrows), 오름차순 정렬(arrow--up), 내림차순 정렬(arrow--down). 아이콘은 현재 정렬 상태를 나타내며 정렬이 활성화됐을 때만 표시됩니다. 정렬된 컬럼만 아이콘을 표시하고, 정렬 안 된 아이콘은 호버 시에만 보입니다. Carbon의 React Storybook에서 정렬 데모를 볼 수 있어요.

일괄 액션 (Batch actions)

사용자는 테이블 안의 하나 이상의 항목에 일괄 액션을 수행할 수 있어요. 테이블에서 항목이 선택되면 일괄 액션 바가 테이블 상단에 나타나 선택된 모든 항목에 적용할 가능한 액션 집합을 보여줍니다. 이 기능은 여러 테이블 항목에 대해 같은 인라인 액션을 반복적으로 수행하는 노력에 비해 사용자 효율을 높일 수 있어요. 일괄 모드가 활성화되면 행의 단일 액션 아이콘과 오버플로우 메뉴는 비활성화되어야 해요.

일괄 액션 모드를 종료하려면 사용자는 바의 맨 오른쪽에 있는 취소 버튼을 선택하거나 모든 항목을 선택 해제하면 됩니다.

인라인 액션 (Inline actions)

인라인 액션은 특정 테이블 행에 대해 수행될 수 있는 기능이에요. 각 행에는 그 행과 관련된 액션을 포함하는 오버플로우 메뉴가 함께 있습니다.

오버플로우 메뉴에 옵션이 세 개 미만이면 액션을 아이콘 버튼으로 인라인 유지하세요. 이 접근 방식은 클릭을 줄이고 사용 가능한 액션을 한 번에 보이게 합니다.

오버플로우 메뉴 (Overflow menu)

기본적으로 오버플로우 메뉴 아이콘은 각 행에 지속적으로 표시돼요. 오버플로우 메뉴가 항상 보이면 테이블 행에서 액션을 취할 수 있음을 사용자에게 신호합니다. 또는 제품 팀이 overflowMenuOnHover prop을 사용해 호버와 포커스 시에만 오버플로우 메뉴를 보여줘 매 행의 오버플로우 메뉴로 인한 시각적 혼란을 줄일 수 있어요.

모바일과 터치 기기의 경우 데이터 테이블은 사용자 에이전트가 호버를 지원하는지 감지해, overflowMenuOnHover prop이 활성화되어 있어도 오버플로우 메뉴를 유지합니다.

지속적 오버플로우(왼쪽), 호버 시(오른쪽).

로딩 (Loading)

정보를 표시하는 데 추가 로드 시간이 예상된다면 스피너 대신 스켈레톤 상태를 사용하세요.

스켈레톤 상태로 모든 행 확장하기

수정자 (Modifiers)

번갈아 가는 행 색상 (Alternating row color)

데이터 테이블은 얼룩말 줄무늬(zebra stripes) 수정자를 사용해 테이블 행을 번갈아 색상으로 스타일링할 수 있어요. 이렇게 하면 사용자가 가로 정보를 훑어보기 더 쉬워집니다.

AI 존재 (AI presence)

데이터 테이블에는 테이블에 AI가 있을 때 AI 시각적 스타일링을 취하는 수정(modification)이 있어요. 데이터 테이블의 AI 변형은 AI 라벨이 추가된 것 외에는 일반 변형과 동일하게 동작하며, AI 라벨은 시각적 표시이자 설명 가능성 팝오버의 트리거 역할을 합니다. 데이터 테이블 안에서 AI 라벨이 가는 위치는 데이터의 어느 부분이 AI로 생성됐는지에 따라 달라져요.

AI용 디자인에 대한 자세한 내용은 Carbon for AI 가이드라인을 참고하세요.

전체 테이블 (Entire table)

데이터 테이블 전체가 AI용으로 스타일링되면, 사용자에게 데이터 테이블의 모든 측면에 AI가 존재함을 나타냅니다.

AI로 생성된 데이터 테이블 예시.

개별 셀 (Individual cells)

일부 데이터 테이블 셀만 AI로 생성된 콘텐츠를 가진다면, 그 셀들은 옆에 인라인 AI 라벨을 가집니다. 이 셀들은 AI 레이어링을 받지 않아요.

인라인 AI 라벨로 표현된 AI로 생성된 데이터 테이블 셀 예시.

행과 컬럼 (Rows and columns)

데이터 테이블의 행이나 컬럼에만 속하는 콘텐츠가 AI로 생성된다면, 데이터 테이블 전체가 아닌 해당 행/컬럼들만 AI 라벨과 함께 AI 존재 스타일링을 받아야 해요.

AI로 생성된 데이터 테이블 컬럼 예시.

  • Light mode
  • Dark mode

커뮤니티 확장 (Community extensions)

Carbon for IBM Product (IBM 직원 전용)

  • Data table extensions
  • Data table on Cloud
  • Data spreadsheet

유사 컴포넌트 (Similar components)

다음 컴포넌트는 데이터를 정리하고 탐색하는 추가적인 방법이에요.

  • Accordion
  • List
  • Pagination
  • Structured list

더 알아보기 (Learn more)

데이터 테이블은 대량의 데이터를 정리·정렬·표시하기 위한 핵심 컴포넌트예요. 행 크기와 툴바 높이를 일관되게 맞추고, 정렬·검색·페이지네이션·일괄 액션 같은 공통 동작을 사용자 요구에 맞게 조합하세요. AI가 포함된 데이터는 AI 존재 스타일링을 데이터가 AI로 생성된 범위에 맞춰 적용하면 됩니다.