reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
opt-datagrid11
Journal Ledger
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.

Editopt-datagrid example

Journal Ledger

Double-entry journal grid wiring one editor per column — date, select, number, checkbox, textarea, and a custom split editor — with keyboard flow, fill handle, undo/redo, and commit-time validation.

editeditorkeyboardvalidationundo
bun add @reopt-ai/opt-datagrid

APIs used

DataGridDataGridColumnDataGridCommitContextDataGridEditorContextDataGridKeyboardFlowOptionsDataGridValidateCellContext

Live preview

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

1024px
Journal Ledger
One editor per column, including a custom split editor
Income ₩4,820,000Expense ₩1,868,4002 missing receipts

Edit any cell to see the commit here.

⌘Z to undo · drag the cell corner handle to fill down
#
1
2026-03-02
Income
March subscription payout
Checking
2
2026-03-05
Expense
Team offsite
Corporate card
3
2026-03-11
Expense
Office supplies
Corporate card
4
2026-03-18
Expense
External advisory
Checking
5
2026-03-24
Transfer
Cash withdrawal
Checking

Install and import

Related docsOpen playground

Install

bun add @reopt-ai/opt-datagrid

Import

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

Related Examples

opt-datagrid

Ledger Split

Examples

A monthly ledger workspace. Compound entries expand under their row into one keyboard grid with the parent, amount cells take separators and calculations, closed splits keep their drafts, and saving jumps to whatever blocks it. Deposits and credits show in red, payments and debits in blue, and negative amounts in red parentheses.

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

Editable Grid

Examples

Starter spreadsheet grid with editable columns and commit feedback.

PreviousGrid ToolbarNextLedger Split