reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
opt-shell14
DataGrid Adapter
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.

Adapteropt-shell example

DataGrid Adapter

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

APIs used

ShellProviderListWorkspaceShellDataGridAdapter

Live preview

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

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.

Install and import

Related docs

Install

bun add @reopt-ai/opt-shell @reopt-ai/opt-datagrid @reopt-ai/opt-ui

Import

import { ShellProvider, ListWorkspace } from "@reopt-ai/opt-shell";
import { ShellDataGridAdapter } from "@reopt-ai/opt-shell/datagrid";

Related Examples

opt-shell

Dashboard Workspace

Examples

Starter dashboard recipe with workspace chrome and section framing.

opt-shell

Editor Adapter

Examples

Own the authoring shell while opt-editor remains the document engine.

opt-shell

List Workspace

Examples

List recipe with header, toolbar, and section-based content body.

PreviousFlyout AsideNextEditor Adapter