reopt designreopt design
DocsExploreToolsPricingBuilder
Explore/
opt-ui165opt-charts33opt-datagrid6opt-editor5opt-calendar4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 서비스 약관
  • 개인정보처리방침

© 2026 reopt-ai. All rights reserved.

Explore/opt-datagrid/Journal Ledger
Editopt-datagrid 예제

Journal Ledger

복식부기 분개 입력 그리드입니다. 컬럼마다 date·select·text·number·checkbox·textarea 에디터를 지정하고, 스칼라로 표현되지 않는 배분은 custom 에디터로 편집합니다. keyboardFlow로 Enter 이동 방향과 연속 편집을 바꾸고, validateCell이 잘못된 분개의 커밋을 막습니다.

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

관련 예제

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
이전Editable Grid다음Ops Monitor