reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
opt-datagrid11
Ops Monitor
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Monitoropt-datagrid example

Ops Monitor

Read-only monitoring grid with status badges and metric-heavy columns.

monitoringstatusmetrics
bun add @reopt-ai/opt-datagrid

APIs used

DataGridDataGridColumn

Live preview

Change the width and theme, then interact with the components.

1024px

Service operations

Sample snapshot

Service health overview

Find services that need attention, then compare latency and error rate.

Services
6
Healthy
3
Needs attention
3
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

Install and import

Related docsOpen playground

Install

bun add @reopt-ai/opt-datagrid

Import

import { DataGrid, type DataGridColumn } from "@reopt-ai/opt-datagrid";

Related Examples

opt-datagrid

AI Stream

Examples

A table a real model writes while you watch: YAML becomes patches, changes wait for review, edits are never overwritten, and formulas, sorting and per-row AI columns take one line.

opt-datagrid

Campaign Base App

Examples

A campaign workspace with editable grids, saved views, filtering, sorting, grouping, a status board, record details, bulk actions, undo/redo, and local persistence.

opt-datagrid

Editable Grid

Examples

Starter spreadsheet grid with editable columns and commit feedback.

PreviousAI StreamNextScale Grid