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 앱입니다.

Editable campaign base with grouped columns, saved field layouts, selected-record activity, owner automation rules, formula recompute, visible approval sweeps, and BrandApp EAV sync.

appbaseactivityautomationformulaeavbrandapp-sdk

bun add @reopt-ai/opt-datagrid @reopt-ai/brandapp-sdk

DataGridDataGridColumnDataGridCommitContextcreateReoptEavClient

1024px

syncedentity: campaigns · 2 min ago

Campaign base workspace

Ready for spreadsheet-style editing.6 visible · 6 total

Brief

Team

Spring collection launch

Ready

Mina Park

Referral reminder

Draft

Eric Han

Push

VIP early access

Blocked

Jisoo Kim

Sales

Trial nurture sequence

Live

Hana Lee

Homepage promo panel

Idea

Mina Park

Web

Winback offer

Ready

Noah Choi

Add campaign record

Selected record

Spring collection launch

Ready

Owner

MPMina Park

Channel

Launch date

2026-04-02

Budget

$12,800

ROI

2.8x

Priority

Record activity

1 notes

BrandApp handoff note

BrandApp AI

5 min ago

Audience query, owner, and approval flag are ready for EAV sync.

Automations

ready

Write 3 visible approved rows to EAV

Assign owner on status change

Recompute priority formula

Field schema

9/9 shown

Campaign

shown

text · primary value

Status

shown

select · Idea, Draft, Ready, Live, Blocked

Owner

shown

relation · team member directory

Channel

shown

select · Email, Push, Web, Sales

Launch

shown

date · calendar filter enabled

Budget

shown

currency · editable spend estimate

ROI

shown

number · computed by enrichment

Priority

shown

formula · budget, ROI, approval, status

Approval

shown

checkbox · required before EAV write

BrandApp sync

2 min ago

Approved campaign rows

3 records wrote to BrandApp EAV 2 min ago

Schema check

campaigns entity matched local field map

// app/api/campaign-base/route.ts
import { createReoptEavClient } from "@reopt-ai/brandapp-sdk/eav";

let eav: ReturnType<typeof createReoptEavClient> | undefined;

function getEav() {
  eav ??= createReoptEavClient({
    clientId: process.env.BRANDAPP_CLIENT_ID!,
    clientSecret: process.env.BRANDAPP_CLIENT_SECRET!,
    brandappId: process.env.BRANDAPP_ID!,
  });
  return eav;
}

export async function PATCH(req: Request) {
  const { entityId, edits } = await req.json();
  const eav = getEav();
  const results = await Promise.all(
    edits.map((edit) =>
      eav.records(entityId).update(edit.recordId, { values: edit.values }),
    ),
  );
  return Response.json({ rows: results });
}

관련 예제

Starter Grid

Editable cells with direct commit feedback

Edit any cell to commit.

Launch metrics

Growth

Active

Billing events

Finance

Review

Support backlog

Ops

Blocked

Product usage

Analytics

Active

Starteropt-datagrid

Editable Grid

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

editgridcommit

DataGridDataGridColumnDataGridCommitContext

열기

Read-only Monitor

Status badges and metric columns for operations dashboards

Search indexer

Seoul

Healthy

Billing sync

Tokyo

Degraded

188

Notification fanout

Singapore

Healthy

Warehouse loader

Frankfurt

Alert

410

Session cache

Virginia

Healthy

Webhook relay

Oregon

Degraded

244

Monitoropt-datagrid

Ops Monitor

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

monitoringstatusmetrics

DataGridDataGridColumn

열기

Remote Source

View-open, window fetch, batched save on top of a headless hook

loads 0saves 0pending 0

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Remoteopt-datagrid

Remote Window

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

remotedatasourcewindow-fetch

DataGriduseDataGridRemoteDataSourceDataGridColumn

열기

// app/api/campaign-base/route.ts import { createReoptEavClient } from "@reopt-ai/brandapp-sdk/eav"; let eav: ReturnType<typeof createReoptEavClient> | undefined; function getEav() { eav ??= createReoptEavClient({ clientId: process.env.BRANDAPP_CLIENT_ID!, clientSecret: process.env.BRANDAPP_CLIENT_SECRET!, brandappId: process.env.BRANDAPP_ID!, }); return eav; } export async function PATCH(req: Request) { const { entityId, edits } = await req.json(); const eav = getEav(); const results = await Promise.all( edits.map((edit) => eav.records(entityId).update(edit.recordId, { values: edit.values }), ), ); return Response.json({ rows: results }); }

Editable Grid

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

editgridcommit

DataGridDataGridColumnDataGridCommitContext

열기

Read-only Monitor

Status badges and metric columns for operations dashboards

Search indexer

Seoul

Healthy

Billing sync

Tokyo

Degraded

188

Notification fanout

Singapore

Healthy

Warehouse loader

Frankfurt

Alert

410

Session cache

Virginia

Healthy

Webhook relay

Oregon

Degraded

244

Monitoropt-datagrid

Ops Monitor

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

monitoringstatusmetrics

DataGridDataGridColumn

열기

Remote Source

View-open, window fetch, batched save on top of a headless hook

loads 0saves 0pending 0

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Loading workflow…

—

Remoteopt-datagrid

Remote Window

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

remotedatasourcewindow-fetch

DataGriduseDataGridRemoteDataSourceDataGridColumn

열기