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

Ledger Split

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.

editgridkeyboardvalidation
bun add @reopt-ai/opt-datagrid

APIs used

DataGridDataGridActionRowDataGridAnyColumnDataGridBeginEditContextDataGridCellKeyDownContextDataGridKeyboardFlowOptionsDataGridRefDataGridRowExpansionContextDataGridSelectionkoLabels

Live preview

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

1024px

Monthly ledger · July 2026

Press ? for every shortcut.

Income
₩7,900,000
Expense
₩11,610,000
Net
(₩3,710,000)
All saved
/
#
1
2026-07-02
Expense
Cloud hosting
₩1,100,000
2
2026-07-05
Income
July service invoice
₩7,900,000

Split · July service invoiceIncome

Debits and credits must balance before saving. Closing keeps your draft.

Business checking
₩7,900,000
₩7,900,000
₩0
#
Auto
Business checking
₩7,900,000
—
1
Service revenue
—
₩5,000,000
2
Product sales
—
₩2,900,000
TotalBalanced
₩7,900,000
₩7,900,000

Debit and credit balance.

3
2026-07-08
Expense
Team offsite
₩640,000
4
2026-07-09
Expense
Design contractor
₩120,000
5
2026-07-10
Expense
Office lease
₩155,000
6
2026-07-11
Expense
Conference tickets
₩190,000
7
2026-07-12
Expense
Ad campaign
₩225,000
8
2026-07-13
Expense
Laptop repair
₩260,000
9
2026-07-14
Expense
Courier fees
₩295,000
10
2026-07-15
Expense
Design contractor
₩330,000
11
2026-07-16
Expense
Office lease
₩365,000
12
2026-07-17
Expense
Conference tickets
₩400,000
13
2026-07-18
Expense
Ad campaign
₩435,000
14
2026-07-19
Expense
Laptop repair
₩470,000
15
2026-07-20
Expense
Courier fees
₩505,000
16
2026-07-21
Expense
Design contractor
₩540,000
17
2026-07-22
Expense
Office lease
₩575,000
18
2026-07-23
Expense
Conference tickets
₩610,000
Net
24 entries
(₩3,710,000)
Alt+Enter splitAlt+N new⌘/Ctrl+S save

Install and import

Related docsOpen playground

Install

bun add @reopt-ai/opt-datagrid

Import

import { DataGrid, DataGridActionRow, type DataGridAnyColumn, type DataGridBeginEditContext, type DataGridCellKeyDownContext, type DataGridKeyboardFlowOptions, type DataGridRef, type DataGridRowExpansionContext, type DataGridSelection, koLabels } from "@reopt-ai/opt-datagrid";

Related Examples

opt-datagrid

Journal Ledger

Examples

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.

opt-datagrid

Editable Grid

Examples

Starter spreadsheet grid with editable columns and commit feedback.

opt-datagrid

Grid Toolbar

Examples

Operational grid chrome with column visibility, density, full screen, and a locked identity column wired to the live DataGrid.

PreviousJournal LedgerNextAI Stream