데이터 그리드
엑셀 스타일 목록 화면의 재사용 엔진. 컬럼 config(헤더·너비·정렬·렌더)만 주입하면 스크롤·고정 헤더·셀 구분선이 있는 그리드를 그린다. 부모는 높이가 있는 flex 컬럼이어야 한다.
활용 방법
기본
제목 컬럼은 남는 폭을 채우고 긴 값은 줄임표 처리하며 금액과 수량은 오른쪽 정렬한다.
Preview
tsx
<DataGrid columns={columns} rows={rows} getRowKey={(row) => row.id} minWidth="640px" />
빈 상태
행이 없으면 grid 구조 안에 빈 상태 문구를 표시한다.
Preview
tsx
<DataGrid columns={columns} rows={[]} getRowKey={(row) => row.id} emptyText="표시할 항목이 없습니다." />
언제 무엇을: 테이블 vs 데이터 그리드
| 기준 | 테이블 (<table> 패턴) | 데이터 그리드 (컴포넌트) |
|---|---|---|
| 적합 용도 | 문서 속 단순 표 (스펙·가격표) | 데이터 관리 목록 화면 |
| 기반 | 시맨틱 <table> | <div> + CSS grid |
| 접근성 | 네이티브 표 시맨틱 | ARIA role 별도 필요 |
| 고정 헤더·가로 스크롤 | 직접 구현 | 내장 |
| 병합셀(colspan/rowspan) | 가능 | 불가 (균일 그리드) |
| 셀 내용 줄바꿈 | 자연스러움 | 한 줄·truncate 지향 |
| 데이터 양 | 적은 행·내용 위주 | 많은 행·열, 밀집 |
| 대표 예 | 속성표·가격표 | 회원 목록·전자결재 목록 |
한 줄 규칙: “화면이 곧 데이터 관리”면 데이터 그리드, “문서 안에 표 하나”면 테이블.
정렬·고정 컬럼·수만 행 가상 스크롤·병합셀이 필요해지면 데이터 그리드를 확장하거나 전용 grid 라이브러리를 고려한다.
컬럼(DataGridColumn) 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| key | string | - | 컬럼 고유 키 |
| header | ReactNode | - | 헤더 라벨 |
| width | string | - | CSS grid track: "100px" | "minmax(240px,1fr)" |
| align | "left" | "right" | "center" | "left" | 셀 정렬 |
| minW0 | boolean | false | truncate 셀(제목 등)이 줄어들 수 있게 |
| cell | (row: T) => ReactNode | - | 셀 렌더 함수 |
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| columns | DataGridColumn<T>[] | - | 컬럼 정의(헤더·너비·정렬·렌더) |
| rows | T[] | - | 표시할 행 데이터 |
| getRowKey | (row: T) => string | - | 행 고유 key 추출 |
| minWidth | string | "720px" | 가로 최소 폭(이하면 가로 스크롤) |
| emptyText | string | "데이터가 없습니다." | 행 0개일 때 문구 |