reopt designreopt design
DocsExploreToolsPricingBuilder
Explore/
opt-ui161opt-charts21opt-datagrid5opt-editor5opt-chat6opt-shell14brandapp-ui8Examples12
reopt designreopt design

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

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

© 2026 reopt-ai. All rights reserved.

Explore/opt-shell/DataGrid Adapter
Adapteropt-shell 예제

DataGrid Adapter

ListWorkspace 안에서 ShellDataGridAdapter가 toolbar, status, footer chrome을 소유하면서 opt-datagrid 엔진을 유지합니다.

Bridge opt-datagrid into harness chrome without replacing the engine.

datagridadapterworkspace
bun add @reopt-ai/opt-shell @reopt-ai/opt-datagrid @reopt-ai/opt-ui
ShellProviderListWorkspaceShellDataGridAdapter
1024px

Portfolio records

A production-style records workspace that connects filters, portfolio rows, and dossier navigation.

Portfolio table

The grid stays editable while filters, status, and footer remain part of the app workflow.

Revenue portfolio

Showing 5 records with renewal timing and health status.

Apollo Ledger
Jiwoo Han
At risk
14 days
Northstar Renewal
Mina Park
Healthy
37 days
Atlas Claims
Daniel Kim
Expansion
63 days
Meridian Onboarding
Sena Yoon
At risk
21 days
Delta Risk
Chris Lee
Healthy
52 days
5 records · No filterRecommended next step: open an at-risk dossier.
Quick-open dossiers
3 shown
Apollo Ledger
At risk
Jiwoo Han · 14 days
Dossier snapshot
Northstar Renewal
Healthy
Mina Park · 37 days
Dossier snapshot
Atlas Claims
Expansion
Daniel Kim · 63 days
Dossier snapshot
5 of 5 records visibleDataGrid engine with an app-owned workflow frame.

관련 예제

대시보드

파이프라인 상태 요약

메트릭

활성: 24
실패: 3
사이드 패널
Workspaceopt-shell

Dashboard Workspace

DashboardWorkspace와 ShellSection으로 상단 헤더, 메트릭 카드, 사이드 패널이 있는 기본 운영 화면을 구성합니다.

dashboardworkspaceshell
ShellProviderDashboardWorkspaceShellSection
열기

Compose memo

A focused authoring workspace with toolbar, status, inspector, and review handoff kept in one route.

Open review surface

Expansion memo draft

The editor is fixture-backed so the page stays deterministic, but it still behaves like a real authoring surface.

Fixture-backed
6 blocksVersion 3Review note pending

ℹ️

Publish checklist
2 of 3
Distribution
PrimaryCommercial committee memo
SecondaryRenewal review packet
Autosave rehearsal completed 09:16 KSTNext action: review the fullscreen surface pattern
Adapteropt-shell

Editor Adapter

EditorWorkspace와 ShellEditorAdapter 조합으로 authoring chrome과 editor engine의 소유 경계를 분리합니다.

editoradapterauthoring
ShellProviderEditorWorkspaceShellEditorAdapter
열기

파이프라인

전체 파이프라인 목록

  • ETL Pipeline Arunning
  • Data Sync Bidle
  • Transform Cfailed
Workspaceopt-shell

List Workspace

ListWorkspace에 toolbar와 section body를 얹어 목록형 운영 화면의 기본 리듬을 보여줍니다.

listworkspacetoolbar
ShellProviderListWorkspaceShellSection
열기
이전Flyout Aside다음Editor Adapter