Logobaseui-cnGet the Components
Base UI CN Demo

Inline editing patterns for TanStack Table, built with base-ui.

This demo focuses on the implementation details that matter: editable cells, generated dialog forms, column-driven field configuration, and a clearer path to turn the pattern into a reusable component in your own app.

View grid demosInstall from baseui-cnOpen command palette
Inline editing plus dialog editing
Edit directly inside the table, then reuse the same column metadata to open a richer dialog editor when needed.
Column metadata drives the UI
Text, email, number, switch, rating, radio, and textarea inputs are derived from the table config instead of a separate hand-built form layer.
Featured Workflow
TanStack inline editor with generated form fields
The home page highlights the second grid pattern: the version that combines inline editing with a generated dialog editor and shows the most complete baseui-cn table-editing experience.

Ready to study and reuse

The editing flow is exposed in a way that makes it easier to inspect the behavior, map the pieces, and lift the pattern into a real project.

One definition, multiple editors

The same column configuration powers both inline cells and the dialog editor, so the example stays compact without losing flexibility.

Compare the full progression

The dedicated grid page walks through the simple table, the inline editor, and the async optimistic version so the progression is easy to understand.

Open grid page
Inline Editing Demo

Try the baseui-cn inline editor pattern.

TanStack Table example where the same column definitions control inline cell editors and the dialog-based form experience.

Inline editor demo
Edit cells inline, open the dialog for richer fields, and keep the column config as the source of truth for both experiences.
Team Editing SandboxInline + Dialog
Rows per page
1 - 5 of 6