Data Grid Usage

데이터를 정렬해 보여줍니다. 사용자 필요에 맞게 데이터 정렬을 바꿀 수 있습니다.

Layout

Sizing

Header

Header 영역의 높이는 32px로 고정 적용하여 내부 요소 사용에 관계 없이 일정한 영역을 확보합니다. 데이터 인터랙션이 포함되어 header를 두 줄로 구성하는 경우, 각 줄의 높이를 32px로 균등하게 적용합니다.

Data Column

Data column의 너비는 기본으로 콘텐츠 길이에 맞추어 제공하되, 최소 너비 48px를 적용합니다. 필요한 경우, 별도의 최소 값을 부여하고 컨테이너를 채울 수 있습니다.

편의를 위해 정보성 column의 너비를 조정할 수 있는 resizer를 제공할 수 있습니다. Resizing에서 자세한 내용을 확인하세요.

Action Column

항목 선택, 재배열, 관리 등의 과업 수행을 위한 action column의 너비는 32px 고정으로 제공합니다. Data column과 달리 리사이징 기능은 지원하지 않습니다.

Spacing

Header와 data container의 간격은 spacing/200을 일관되게 적용합니다. Header의 타이틀과 액션을 구분하는 좌/우측 영역 사이의 간격은 spacing/300을 적용하여 영역을 시각적으로 분리합니다. 우측 요소들 사이의 간격은 각각 spacing/150을 적용합니다. Data container의 상하좌우 패딩은 spacing/100을 동일하게 적용합니다.

데이터 인터랙션을 제공하며 header가 두 줄로 구성되는 경우, 내부 간격은 spacing/100을 적용합니다.

Data group 간 간격은 spacing/100로 적용합니다.

Content

Data Group

데이터를 특정 메타데이터 단위로 묶어 확인할 수 있습니다. 데이터 그룹핑을 위한 두 개 이상의 기준을 제공할 경우에는, 사용자가 그룹 기준을 변경할 수 있도록 Group 아이콘 버튼을 노출합니다.

Data group title을 클릭하여 하위 내용물을 접고 펼칠 수 있습니다.

Row Group

Data grid에서는 특정 데이터의 하위 항목을 표현하는 nested 구조를 표현할 수 있습니다. 하위 항목을 포함하는 데이터의 첫 컬럼에는 row group icon button이 왼쪽에 나타납니다.

Row group icon button을 클릭하면 하위 항목을 접고 펼칠 수 있습니다. 접힌 상태에서 클릭하면 하위 항목이 노출되며, 펼쳐진 상태에서 클릭하면 하위 항목이 숨겨집니다.

Behaviors

Base Interactions

항목의 Selected / Active 상태

Data grid에서 항목의 selected와 active state는 다른 목적을 수행하기 때문에 구분해서 취급하여야 합니다. Active state와 selected state는 동시에 존재할 수 있습니다.

항목 선택(Item Selection)

Data grid에서 추가 작업 수행을 위한 항목 선택을 지원하는 경우, checkbox를 통해 선택이 가능합니다. 항목이 선택된 경우 header 우측 영역에는 선택된 항목의 개수가 표시되며, 다중 항목 대상으로 제공되는 액션이 기본 제공 액션을 대체하여 나타납니다.

검색(Search)

Data grid 내 특정 항목을 빠르게 탐색할 수 있도록 검색 기능을 지원할 수 있습니다. 검색 기능 지원 시 header를 두 줄로 사용해야하며, title 아래에 search bar를 배치합니다. Search bar의 placeholder는 검색 가능한 data grid의 열(column)에 대한 정보를 포함해야 합니다.

Narrow view에서는 search icon button을 클릭해 search bar를 활성화할 수 있습니다. 검색어가 입력되지 않은 상태에서 search bar 외부 영역을 클릭하면 search bar가 닫힙니다.

검색어 입력 시 검색 결과가 즉시 나타나며, search bar 우측에 Close icon button이 노출됩니다. 검색 결과 반영 시 header title에 전체 항목 중 검색된 항목에 대한 수가 표시됩니다. Data grid 내 data group을 사용한 경우 그룹 내 검색된 항목에 대한 수만 표시됩니다.

검색어가 입력된 경우 search bar 외부 영역을 클릭하더라도, 입력된 검색어 및 검색 결과는 유지됩니다.

검색어 입력 상태에서 항목 선택 시 header 우측에 선택된 항목에 대한 개수가 표시되며, 주요 액션 버튼이 나타납니다. 선택된 항목에 대한 개수는 검색어 입력 전, 후 또는 새로운 검색어를 입력하는 경우에도 유지됩니다.

검색어 입력 상태에서 search bar 우측의 Close icon button을 클릭하면 입력된 검색어를 지웁니다.

내용 스크롤

Container를 초과하여 내용물이 넘치는 경우, 컨테이너에 커서를 올리면 vertical 또는 horizontal scroll bar가 노출됩니다. 스크롤하여 전체 내용을 탐색할 수 있습니다.

Data group을 활용하는 경우, data group title은 스크롤 시 sticky 상태로 보여집니다. Group에 속한 데이터가 데이터 노출 영역에서 모두 사라질 때 까지는 title이 고정된 위치에서 나타납니다. Group에 속한 데이터 전체가 데이터 노출 영역에서 보이지 않을 때 title도 함께 스크롤 처리됩니다.

가로로 내용물이 넘칠 때는 고정된 column을 제외한 컬럼 대상으로 horizontal scroll이 제공됩니다.

항목 상세 페이지 진입

항목의 title은 상세 페이지로 연결될 수 있습니다. Title에서 하이퍼링크가 제공되는 경우 텍스트는 underline되어 보여집니다.

Column Interactions

Pinning

특정 data column을 한쪽에 고정하여 항상 보이도록 유지할 수 있습니다.

Column title 영역 위에 커서를 올리면 ellipsis icon button이 표시됩니다. 제공 context menu에서 Pin to left 클릭 시 data column 영역의 왼쪽에, Pin to right 클릭 시 오른쪽에 해당 data column을 고정합니다.

고정된 column의 context menu를 열어 Unpin을 클릭하는 것으로 고정 상태를 해제할 수 있습니다.

Resizing

Data column의 너비를 임의로 조정할 수 있습니다. Column title 사이에 위치한 resizer를 드래그하여 컬럼 사이즈를 조절할 수 있습니다. Resizer를 더블 클릭하여 기본 제공 사이즈로 복구할 수 있습니다. 사이즈 조정 시에도 최소 너비 48px를 유지합니다.

Visibility - Column Filtering

Column filter를 활용하여 각 data column의 노출 여부를 switch를 통해 설정할 수 있습니다. Header에서 제공하는 Columns icon button 또는 column context menu의 Manage columns 항목을 통해 진입할 수 있습니다.

Column filter에서 switch가 꺼진 경우 해당 column은 노출되지 않습니다. 필요한 경우 특정 컬럼을 숨길 수 없도록 노출 값을 고정하여 제공할 수 있습니다.

Data Interactions

Sorting

데이터 정렬 기준을 특정 column 데이터 기준으로 설정할 수 있습니다. Sorting 가능한 column title 영역 위에 커서를 올리면 sorting icon button이 표시됩니다. 클릭 시 sort ascending → sort descending → unsort로 작동하며, 해당 컬럼의 데이터 기준으로 항목들이 재배열됩니다.

Data group을 사용할 때 항목의 재배열은 data group 내부에서 이루어집니다.

Column의 context menu에서도 data sorting 옵션이 제공됩니다.

Sorting icon button을 통해서도 데이터 재배열을 수행할 수 있습니다. Sorting 가능한 column 들이 항목으로 보여지며, column title과 동일하게 토글 클릭으로 sorting 옵션을 설정할 수 있습니다.

View Switch

List view, grid view 간의 전환이 지원되는 경우 data grid 상단에 전환을 위한 icon button이 노출됩니다. List view에서는 View in Grid icon button을 클릭하면 grid view에서 데이터가 표현됩니다.

Grid view에서는 View in List icon button을 클릭하여 list view로 전환할 수 있습니다.

Row Interactions

Reordering

Reorder icon button을 드래그하여 자유롭게 순서를 변경할 수 있습니다. 커서가 위치한 곳이 배치 가능한 곳일 때 이동될 위치를 시각적으로 표현해서 결과에 대한 어포던스를 사용자에게 제공합니다.

순서 변경은 data group 내부에서만 가능합니다. Data group 바깥으로 드래그 시 해당 위치에 하이라이트를 노출하지 않고, 커서 드롭 시에도 위치 변경이 일어나지 않습니다.

다른 data group 내부에 항목을 위치할 수 없습니다. 순서 변경 시 기존에 적용된 sorting 적용은 해제됩니다.

Keyboard Shortcuts