Logobaseui-cnGet the Components
Inline Editor Grid

Basic, Inline, and Advanced Inline grid demos in one place.

This page shows the full progression. Start with the basic grid, move into inline editing with auto-generated dialog fields, then finish with loading states and optimistic updates.

Back to homeOpen command demo
Basic
A clean table foundation with sorting, pagination, and a lighter read-only presentation.
Inline
The same grid becomes editable inline and can generate a matching dialog editor from column metadata.
Advanced Inline
Adds loading states, optimistic UI, rollback behavior, and a more production-like async editing flow.
Basic
Basic data grid
This is `c-data-grid-1`: the simpler starting point before editing behaviors are introduced.
Basic Data GridSorting, pagination, resizable columns, and drag-and-drop rows
SC
Sarah Chen
sarah@openai.com
CTO
OpenAI
Pending
SC
Sarah Chen
sarah@tata.in
Sales Manager
Tata
Approved
NJ
Nick Johnson
nick@lvmh.fr
Data Scientist
LVMH
Pending
MR
Michael Rodriguez
michael@meta.com
Designer
Meta
Approved
MG
Maria Garcia
maria@sony.jp
Marketing Lead
Sony
Approved
Rows per page
1 - 5 of 12
Inline
Inline editing with generated dialog fields
This is `c-data-grid-2`: edit cells inline or open a dialog editor that adapts from the column definitions.
Team Editing SandboxInline + Dialog
Rows per page
1 - 5 of 6
Advanced Inline
Optimistic updates with loading and rollback
This is `c-data-grid-3`: the advanced version with async saves, pending states, and failure recovery.
Async Editing SandboxOptimistic API
Work Mode
Mentor
Rows per page
1 - 5 of 6