DataGrid
앱 조합 가이드
페이지 구조는 opt-ui가 맡고, 표 편집과 대규모 데이터 상태만 opt-datagrid로 분리하는 기준을 정리합니다.
reopt design업데이트
1. 경계 설정 기준
| 문제 영역 | Owner | 판단 기준 |
|---|---|---|
| 페이지 레이아웃, toolbar, filters, theme | opt-ui | 상위 화면 구조와 navigation은 Shell/Surface가 잡고 그 안에 grid를 슬롯으로 넣습니다. |
| 셀 편집, selection, paste, fill handle | opt-datagrid | 행/열 단위 상호작용과 편집 파이프라인은 DataGrid 전용 상태 모델이 필요합니다. |
| remote datasource, viewport fetch, batch save | opt-datagrid | virtualization과 저장 계약은 backend와 묶인 별도 엔진 문제이므로 grid 문서 기준으로 설계합니다. |
| 간단한 표 렌더링, 카드형 요약, 정적 목록 | opt-ui | 편집/가상화가 필요 없다면 DataTable, DashboardGrid, Surface 조합으로 충분합니다. |
2. 추천 조합 패턴
운영 대시보드 + DataGrid
상단 KPI, 필터 바, 액션 툴바는 opt-ui가 맡고 본문 테이블만 DataGrid로 분리합니다.
대량 편집 워크벤치
좌측 탐색과 검색 조건은 opt-ui, 중앙 일괄 수정 표는 DataGrid가 담당하는 구조입니다.
원격 데이터 관제
페이지 필터는 opt-ui Form/Shell로 유지하고 viewport fetch와 저장 계약은 DataGrid 기준으로 고정합니다.
3. 화면 조립 예제
필터, 액션, 페이지 전환은 opt-ui Shell에 두고, 실제 데이터 편집 구역만 DataGrid를 마운트하는 편이 유지보수에 유리합니다.
tsx
import { AppShell, Card, Toolbar } from "@reopt-ai/opt-ui";
import { DataGrid } from "@reopt-ai/opt-datagrid";
export default function OrdersWorkbenchPage() {
return (
<AppShell
sidebar={<ProjectSidebar />}
header={<Toolbar title="Order Review" />}
>
<Card>
<DataGrid
rows={rows}
columns={columns}
getRowId={(row) => row.id}
onCellsEdited={handleBatchEdits}
onVisibleRegionChanged={handleViewportChange}
ariaLabel="Order review grid"
/>
</Card>
</AppShell>
);
}4. 위임 규칙
- 1. 표가 화면 일부인지 먼저 판단합니다. 일부라면 페이지 상위 레이아웃은 opt-ui에 둡니다.
- 2. 편집/선택이 생기면 grid로 분리 합니다. clipboard, fill handle, custom editor가 필요한 순간부터 opt-datagrid를 씁니다.
- 3. remote contract는 DataGrid 기준 으로 문서화합니다. viewport fetch/save/reject semantics를 페이지 props에 숨기지 않습니다.
- 4. 단순 조회 표는 opt-ui 유지 합니다. 정적 리스트와 요약표까지 DataGrid로 올리지 않습니다.
5. 통합 체크리스트
- AppShell, Toolbar, FilterBar처럼 화면 바깥 구조는 opt-ui에서 먼저 고정합니다.
- 행 식별자는 getRowId로 안정화하고 상위 페이지 state와 분리합니다.
- 편집 저장은 onCellsEdited/onCellCommit에서 도메인 command로 변환합니다.
- remote datasource가 필요한 순간부터 openView/window fetch/save 계약을 별도 문서로 분리합니다.
- toolbar와 grid 사이 포커스 이동 규칙을 명시해 roving tabindex 루프가 겹치지 않게 합니다.