Editable Grid
ExamplesStarter spreadsheet grid with editable columns and commit feedback.
Operational grid chrome with column visibility, density, full screen, and a locked identity column wired to the live DataGrid.
Change the width and theme, then interact with the components.
Service operations
5 of 5 columnsAdjust columns and row density to focus your service review. The service name always stays visible.
Sample data · Column settings apply to this view only
bun add @reopt-ai/opt-datagridimport { DataGrid, type DataGridColumn } from "@reopt-ai/opt-datagrid";
import { DataGridToolbar, useDataGridToolbar } from "@reopt-ai/opt-datagrid/toolbar";Starter spreadsheet grid with editable columns and commit feedback.
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.