Grid Toolbar
ExamplesOperational grid chrome with column visibility, density, full screen, and a locked identity column wired to the live DataGrid.
Starter spreadsheet grid with editable columns and commit feedback.
Change the width and theme, then interact with the components.
Data workspace
Editable · Local dataEdit a cell to update its value. Changes stay in this demo session.
Double-click a cell to edit · Enter to save · Escape to cancel
bun add @reopt-ai/opt-datagridimport { DataGrid, type DataGridColumn, type DataGridCommitContext } from "@reopt-ai/opt-datagrid";Operational grid chrome with column visibility, density, full screen, and a locked identity column wired to the live DataGrid.
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.
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.