DataGrid

한눈에#

정렬·행 선택·인라인 편집·클라이언트 페이징을 갖춘 편집형 데이터 그리드입니다 — 정적 표는 Table, 인터랙션이 필요하면 DataGrid.

함수 prop(rowKey)이 필수라 서버 MDX에서 직접 전달할 수 없어 데모 래퍼로 컬럼·rowKey를 주입합니다(DatePickerDemo 패턴). 샘플 5행, 정렬 가능 컬럼(작업·공수)과 편집기(text·select·number·checkbox)가 섞여 있습니다.

사용 시점#

인라인 편집·정렬·선택·페이징이 필요한 운영 표면 DataGrid — 정적 표시나 페이지 컨트롤만이면 다른 컴포넌트입니다.

아래 ## 변형의 비교표가 Table과의 선택 기준을 상세히 정리합니다.

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

import { DataGrid } from '@wds/ui-web';

<DataGrid columns={columns} defaultData={members} rowKey={(row) => row.id} />

변형#

pageSize를 주면 하단에 Pagination이 합성되고 페이지 단위로 행을 잘라 보여줍니다. 정렬은 전체 데이터 기준이라 페이지가 바뀌어도 정렬 순서가 유지됩니다. stickyHeader를 켜면 세로 스크롤 시 헤더가 고정됩니다.

Table과의 선택 기준#

읽기 전용 표는 가벼운 Table을 쓰고, 편집·정렬·선택 중 하나라도 필요하면 DataGrid를 씁니다.

범위 제외(백로그) — rowspan 셀 병합 · 하위행(트리/확장) · 서버 페이징은 이번 1차 승격 범위 밖입니다. 서버 페이징이 필요하면 현재는 소비자가 defaultData를 페이지 단위로 갈아끼우는 방식으로 대응합니다.

크기#

폭은 부모 100%, 좁은 화면에서는 래퍼가 가로 스크롤로 보호합니다(caption이 있으면 그 스크롤 래퍼가 키보드 region이 됩니다). 셀 패딩은 space.3×space.4 단일 밀도이고, stickyHeader의 기본 컨테이너 높이는 24rem(약 10행)으로 소비자가 재정의할 수 있습니다.

상태#

• 행 hover — color.surface-hover 배경
• 선택 행 — color.surface-selected(hover보다 우선)
• 편집 셀 포커스 — color.primary 아웃라인, 편집 모드 입력은 input.border-focus 보더
• 정렬 활성 헤더 — aria-sort + color.primary 화살표(asc는 180° 회전)
• 빈 데이터 — colSpan 전체 폭에 emptyContent

Props#

DataGridColumn<T>:

접근성#

APG Data Grid 패턴입니다 — role="grid" + 셀 roving tabindex로 그리드 전체가 단일 탭 스톱이 됩니다. 내부 위젯(정렬 버튼·체크박스)은 탭 순서에서 빠지고(tabIndex=-1) 포커스는 셀이 가지며 Enter/Space가 위임됩니다. 헤더는 <th scope="col"> + aria-sort, 페이징 시 DOM에 없는 행 수를 aria-rowcount/aria-rowindex로 보고합니다.

• 편집 중에는 그리드 내비가 꺼집니다 — 화살표는 입력 캐럿 이동에 쓰이고, Escape/Enter로 셀에 복귀한 뒤 다시 내비합니다
• 클릭한 셀이 roving 탭 스톱이 됩니다 — Tab으로 나갔다 돌아와도 마지막 위치가 유지됩니다
• number 편집은 빈 값·숫자 아님이면 조용히 취소(원값 유지)
• 좁은 화면 가로 스크롤 래퍼는 caption이 있으면 role="region" + tabIndex=0으로 키보드 조작 가능

토큰#

component 토큰 없이 Table·Input·Checkbox 어휘와 semantic을 직접 소비합니다(신설 기준 §4 미충족).

관련#