reopt designreopt design
DocsExploreToolsPricingBuilder
시작하기
시작하기
Playground
핵심 개념
핵심 개념
DataGrid
DataGrid 개요
편집형 데이터 입력
운영 모니터링
대규모 데이터
원격 연동 계약
마이그레이션 플레이북
앱 조합 가이드
컬럼 설계 플레이북
구축·운영
Skills
릴리즈 노트
레퍼런스
Hook 레퍼런스
타입 레퍼런스
Oopt-datagrid
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 서비스 약관
  • 개인정보처리방침

© 2026 reopt-ai. All rights reserved.

DataGrid
  1. 문서
  2. /
  3. DataGrid
  4. /
  5. 앱 조합 가이드

앱 조합 가이드

페이지 구조는 opt-ui가 맡고, 표 편집과 대규모 데이터 상태만 opt-datagrid로 분리하는 기준을 정리합니다.

reopt design · 업데이트 2026년 6월 26일

시작하기핵심 개념개요편집형 데이터 입력운영 모니터링대규모 데이터원격 연동 계약마이그레이션 플레이북앱 조합 가이드컬럼 설계 플레이북Skills릴리즈 노트Hook 레퍼런스타입 레퍼런스

1. 경계 설정 기준

문제 영역Owner판단 기준
페이지 레이아웃, toolbar, filters, themeopt-ui상위 화면 구조와 navigation은 Shell/Surface가 잡고 그 안에 grid를 슬롯으로 넣습니다.
셀 편집, selection, paste, fill handleopt-datagrid행/열 단위 상호작용과 편집 파이프라인은 DataGrid 전용 상태 모델이 필요합니다.
remote datasource, viewport fetch, batch saveopt-datagridvirtualization과 저장 계약은 backend와 묶인 별도 엔진 문제이므로 grid 문서 기준으로 설계합니다.
간단한 표 렌더링, 카드형 요약, 정적 목록opt-ui편집/가상화가 필요 없다면 DataTable, DashboardGrid, Surface 조합으로 충분합니다.

2. 추천 조합 패턴

운영 대시보드 + DataGrid

상단 KPI, 필터 바, 액션 툴바는 opt-ui가 맡고 본문 테이블만 DataGrid로 분리합니다.

AppShellDashboardGrid운영 모니터링

대량 편집 워크벤치

좌측 탐색과 검색 조건은 opt-ui, 중앙 일괄 수정 표는 DataGrid가 담당하는 구조입니다.

SidebarNav편집형 데이터 입력컬럼 설계 플레이북

원격 데이터 관제

페이지 필터는 opt-ui Form/Shell로 유지하고 viewport fetch와 저장 계약은 DataGrid 기준으로 고정합니다.

SettingsForm원격 연동 계약대규모 데이터

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. 1. 표가 화면 일부인지 먼저 판단합니다. 일부라면 페이지 상위 레이아웃은 opt-ui에 둡니다.
  2. 2. 편집/선택이 생기면 grid로 분리 합니다. clipboard, fill handle, custom editor가 필요한 순간부터 opt-datagrid를 씁니다.
  3. 3. remote contract는 DataGrid 기준 으로 문서화합니다. viewport fetch/save/reject semantics를 페이지 props에 숨기지 않습니다.
  4. 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 루프가 겹치지 않게 합니다.

Previous마이그레이션 플레이북기존 grid 라이브러리에서 opt-datagrid로 옮길 때 필요한 모델 재정의와 단계별 이행 전략DataGrid
마이그레이션 플레이북 페이지로 이동
Next컬럼 설계 플레이북도메인별 컬럼 구조, 에디터 선택, 성능 옵션 설계 원칙DataGrid