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

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • Terms of Service
  • Privacy Policy

© 2026 reopt-ai. All rights reserved.

opt-datagrid

Skip the docs hub and look at real grid examples. Editable starters, operational monitors, performance presets, and remote window datasources — screen patterns that consumer apps can take as-is.

5 opt-datagrid examples. Each card includes a live preview and detailed code samples.

Campaign base
6 rows
Brief
Team
#
1
Spring collection launch
Ready
Mina Park
Email
2
Referral reminder
Draft
Eric Han
Push
3
VIP early access
Blocked
Jisoo Kim
Sales
4
Trial nurture sequence
Live
Hana Lee
Email
5
Homepage promo panel
Idea
Mina Park
Web
6
Winback offer
Ready
Noah Choi
Email

Formula

Priority recompute

Automation

Owner rule

EAV

BrandApp sync

Appopt-datagrid

Campaign Base App

opt-datagrid로 view sidebar, saved views, record activity, owner automation, computed formula field, spreadsheet 편집, field editor, row append, visible-record approval, BrandApp EAV 저장 boundary를 갖춘 캠페인 운영 base 앱입니다.

appbaseactivityautomationformula+2
DataGridDataGridColumnDataGridCommitContextcreateReoptEavClient
Open
Starter Grid
Editable cells with direct commit feedback

Edit any cell to commit.

Launch metrics
Growth
Active
15
Billing events
Finance
Review
30
Support backlog
Ops
Blocked
60
Product usage
Analytics
Active
10
Starteropt-datagrid

Editable Grid

가장 짧은 시작점입니다. DataGrid와 column definition만으로 셀 편집과 commit 흐름을 붙입니다.

editgridcommit
DataGridDataGridColumnDataGridCommitContext
Open
Read-only Monitor
Status badges and metric columns for operations dashboards
Search indexer
Seoul
Healthy
42
Billing sync
Tokyo
Degraded
188
Notification fanout
Singapore
Healthy
53
Warehouse loader
Frankfurt
Alert
410
Session cache
Virginia
Healthy
34
Webhook relay
Oregon
Degraded
244
Monitoropt-datagrid

Ops Monitor

상태 배지, 읽기 전용 메트릭 컬럼, 빠른 스캔 UX를 운영 대시보드 문맥으로 정리한 예제입니다.

monitoringstatusmetrics
DataGridDataGridColumn
Open
Scale Preset
5,000 rows with stable identity and cached value access
getRowIdvalueCacherowBufferPx
Workspace 1
Starter
Seoul
3
Workspace 2
Growth
Tokyo
4
Workspace 3
Scale
Singapore
5
Workspace 4
Enterprise
Virginia
6
Workspace 5
Starter
Seoul
7
Workspace 6
Growth
Tokyo
8
Workspace 7
Scale
Singapore
9
Workspace 8
Enterprise
Virginia
10
Workspace 9
Starter
Seoul
11
Workspace 10
Growth
Tokyo
12
Workspace 11
Scale
Singapore
13
Workspace 12
Enterprise
Virginia
14
Workspace 13
Starter
Seoul
15
Workspace 14
Growth
Tokyo
16
Workspace 15
Scale
Singapore
17
Workspace 16
Enterprise
Virginia
18
Workspace 17
Starter
Seoul
19
Workspace 18
Growth
Tokyo
20
Workspace 19
Scale
Singapore
21
Workspace 20
Enterprise
Virginia
22
Workspace 21
Starter
Seoul
23
Workspace 22
Growth
Tokyo
24
Scaleopt-datagrid

Scale Grid

getRowId, valueCache, rowBufferPx 조합으로 수천 행을 다루는 기준 구성을 보여줍니다.

performancevirtualizationrow-id
DataGridDataGridColumn
Open
Remote Source
View-open, window fetch, batched save on top of a headless hook
loads 0saves 0pending 0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Loading workflow…
—
Loading
0
Remoteopt-datagrid

Remote Window

useDataGridRemoteDataSource로 openView, window fetch, batched save를 메모리 기반 mock으로 연결합니다.

remotedatasourcewindow-fetch
DataGriduseDataGridRemoteDataSourceDataGridColumn
Open