reopt designreopt design
DocsExploreToolsPricingBuilder
Explore/
opt-ui165opt-charts33opt-datagrid6opt-editor5opt-calendar4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
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.

Explore/opt-datagrid/Journal Ledger
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
DataGridDataGridColumnDataGridCommitContextDataGridEditorContextDataGridKeyboardFlowOptionsDataGridValidateCellContext
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

Related Examples

opt-datagrid

Editable Grid

opt-datagrid - Starter

Examples
DataGridDataGridColumn+1
opt-datagrid

Campaign Base App

opt-datagrid - App

Examples
DataGridDataGridColumn+2
opt-datagrid

Ops Monitor

opt-datagrid - Monitor

Examples
DataGridDataGridColumn
PreviousEditable GridNextOps Monitor