데이터 표·그리드
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
데이터 테이블 Data Table
행과 열로 값을 읽고 비교하는 표입니다.
데이터 표·그리드 설계와 분석 화면의 시각화 선택에 활용합니다.
데이터 그리드는 편집·고급 키보드 조작 등 더 많은 상호작용을 제공합니다.
데이터 그리드 Data Grid
정렬·선택·편집 등 셀 중심 상호작용을 제공하는 데이터 표입니다.
데이터 표·그리드 설계와 분석 화면의 시각화 선택에 활용합니다.
읽기 전용 표와는 키보드 조작·포커스 설계가 다릅니다.
트리 그리드 Treegrid
계층형 행을 펼치고 접을 수 있는 다열 데이터 구조입니다.
데이터 표·그리드 설계와 분석 화면의 시각화 선택에 활용합니다.
트리 뷰와 달리 여러 열의 관계와 셀 탐색도 다룹니다.
정렬 가능한 열 Sortable Column
열의 값에 따라 행 순서를 바꾸는 표 머리글입니다.
데이터 표·그리드 설계와 분석 화면의 시각화 선택에 활용합니다.
오름차순·내림차순·정렬 해제를 명확하게 표시하세요.
열 너비 조절 Resizable Column
머리글 경계를 끌어 열의 너비를 바꿉니다.
데이터 표·그리드 설계와 분석 화면의 시각화 선택에 활용합니다.
열 이동과 혼동하지 않도록 조작점을 구분하세요.
고정 열 Sticky Column
가로 스크롤 중 특정 열을 화면에 남겨둡니다.
데이터 표·그리드 설계와 분석 화면의 시각화 선택에 활용합니다.
고정 경계와 가려지는 콘텐츠를 시각적으로 구분하세요.
고정 표 머리글 Frozen Header
세로 스크롤 중 열 제목을 계속 표시합니다.
데이터 표·그리드 설계와 분석 화면의 시각화 선택에 활용합니다.
고정 열은 가로 기준, 고정 머리글은 세로 기준입니다.
행 선택 Row Selection
행을 선택해 상세 확인이나 일괄 작업의 대상을 정합니다.
데이터 표·그리드 설계와 분석 화면의 시각화 선택에 활용합니다.
전체 선택이 현재 페이지인지 전체 결과인지 표시하세요.
인라인 편집 Inline Editing
별도 화면 없이 셀이나 항목 안에서 값을 수정합니다.
데이터 표·그리드 설계와 분석 화면의 시각화 선택에 활용합니다.
편집 중·저장 중·실패·취소 상태를 구분하세요.
일괄 작업 Bulk Actions
선택된 여러 행에 같은 동작을 적용합니다.
데이터 표·그리드 설계와 분석 화면의 시각화 선택에 활용합니다.
선택 개수와 작업 범위, 위험 작업의 확인 절차가 필요합니다.
피벗 테이블 Pivot Table
행·열 차원을 교차해 집계값을 계산하는 요약 표입니다.
데이터 표·그리드 설계와 분석 화면의 시각화 선택에 활용합니다.
일반 표의 표시 변경이 아니라 집계 기준이 바뀝니다.
조건부 서식 Conditional Formatting
값이나 규칙에 따라 셀의 배경·막대·아이콘을 달리합니다.
데이터 표·그리드 설계와 분석 화면의 시각화 선택에 활용합니다.
서식 규칙과 범위를 명시하고 색상에만 의존하지 마세요.
Data tables & grids
Open an entry for its visual reference, comparisons and source-language text.
Data Table 데이터 테이블
Presents readable values in rows and columns.
Use when designing data tables & grids and selecting analytical visualizations.
A data grid usually adds richer editing and keyboard interaction.
Data Grid 데이터 그리드
A cell-oriented table supporting richer selection, editing and sorting.
Use when designing data tables & grids and selecting analytical visualizations.
Keyboard and focus behavior differ from a simple read-only table.
Treegrid 트리 그리드
Combines expandable hierarchical rows with tabular columns.
Use when designing data tables & grids and selecting analytical visualizations.
Unlike a tree view, it also manages columns and cell navigation.
Sortable Column 정렬 가능한 열
A header control that sorts rows by column values.
Use when designing data tables & grids and selecting analytical visualizations.
Distinguish ascending, descending and unsorted states.
Resizable Column 열 너비 조절
Changes column width using a draggable header boundary.
Use when designing data tables & grids and selecting analytical visualizations.
Distinguish resize handles from column-reordering affordances.
Sticky Column 고정 열
Keeps a column visible while the table scrolls horizontally.
Use when designing data tables & grids and selecting analytical visualizations.
Make the pinned boundary and occluded content clear.
Frozen Header 고정 표 머리글
Keeps column headings visible during vertical scrolling.
Use when designing data tables & grids and selecting analytical visualizations.
Pinned columns and headers address different scrolling directions.
Row Selection 행 선택
Selects rows for inspection or bulk operations.
Use when designing data tables & grids and selecting analytical visualizations.
State whether select-all affects the current page or all results.
Inline Editing 인라인 편집
Edits a cell or item without opening a separate page.
Use when designing data tables & grids and selecting analytical visualizations.
Separate editing, saving, failure and cancellation states.
Bulk Actions 일괄 작업
Applies one operation to multiple selected rows.
Use when designing data tables & grids and selecting analytical visualizations.
Show selection count, scope and confirmation for destructive actions.
Pivot Table 피벗 테이블
Aggregates measures across intersecting row and column dimensions.
Use when designing data tables & grids and selecting analytical visualizations.
It changes aggregation, not just visual formatting.
Conditional Formatting 조건부 서식
Varies cell styling, bars or icons according to values and rules.
Use when designing data tables & grids and selecting analytical visualizations.
Explain rule scope and avoid color-only meaning.