DataTable
shell제네릭 데이터 테이블. 동적 컬럼 정의, Composite 기반 키보드 탐색.
컴포넌트 의존 관계
깊이
100%
기본 사용
사용자 목록
| 이름 | 이메일 | 역할 | 상태 |
|---|---|---|---|
| 김철수 | kim@example.com | Admin | 활성 |
| 이영희 | lee@example.com | Editor | 활성 |
| 박민수 | park@example.com | Viewer | 비활성 |
| 최지은 | choi@example.com | Editor | 활성 |
| 정우성 | jung@example.com | Viewer | 활성 |
빈 상태
빈 테이블
등록된 사용자가 없습니다
테스트 커버리지
2026년 2월 4일5/5 통과
5성공
0실패
5전체
- grid role을 렌더링한다
- 컬럼 헤더를 렌더링한다
- 데이터 행을 렌더링한다
- 빈 상태 메시지를 표시한다
- onRowClick 핸들러를 호출한다
DataTable Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
data* | T[] | — | 테이블 데이터 배열 |
columns* | ColumnDef<T>[] | — | 컬럼 정의. { id, header, accessor, width?, align? } |
keyExtractor* | (row: T) => string | — | 각 행의 고유 키 추출 함수 |
title | string | "데이터 테이블" | 테이블 제목 |
onRowClick | (row: T) => void | — | 행 클릭 핸들러 |
emptyMessage | string | "데이터가 없습니다" | 데이터 없을 때 표시할 메시지 |
ColumnDef Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
bar | (row: T) => number | — | 인라인 프로그레스 바 값 (0-100) 계산 함수 |
barColor | string | "bg-accent" | 인라인 바 색상 클래스 |
Import
tsx
import { DataTable } from "@reopt-ai/opt-ui";키보드 동작
| 키 | 동작 |
|---|---|
| ↑ ↓ | 행 탐색 |
| ← → | 셀 탐색 |
| Enter | 행 선택/활성화 |
고급 사용법
실시간 필터링, 커스텀 컬럼 렌더링, Badge 상태 표시 등 고급 패턴은 고급 패턴 가이드를 참고하세요.