Editable Grid
ExamplesStarter spreadsheet grid with editable columns and commit feedback.
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.
Change the width and theme, then interact with the components.
AI stream
Recorded from openai/gpt-6-lunaThis replays a real model's reply exactly as it arrived. Try editing a cell while it plays: your value stays, and the model's value waits as a conflict for you to decide.
bun add @reopt-ai/opt-datagrid @json-render/core@0.21.4 @json-render/directives@0.21.4 @json-render/yaml@0.21.4 yaml zodimport { DataGrid } from "@reopt-ai/opt-datagrid";
import { createDataGridReplyStream, dataGridToSpec, findGridElementKey } from "@reopt-ai/opt-datagrid/json-render";
import { createDataGridStreamStore, DataGridStreamFrame, DataGridStreamReview, useDataGridAIColumn, useDataGridStream } from "@reopt-ai/opt-datagrid/stream";Starter spreadsheet grid with editable columns and commit feedback.
Evaluate selected rows, switch local rule providers and criteria, and recover from simulated rate limits, timeouts, save failures and cancellation without AI calls.
Operational grid chrome with column visibility, density, full screen, and a locked identity column wired to the live DataGrid.