baseui-cnTanStack Table Demos
Basic, inline, and optimistic editing demos in one place.
This page shows the full progression of the table examples. It starts with a simpler data grid, moves into inline editing with generated dialog fields, and finishes with async saves, optimistic UI, and rollback behavior.
Basic grid
The lighter starting point with the core table structure, sorting, pagination, and a cleaner read-only presentation.
Inline editor
The same table becomes editable inline and can generate a matching dialog editor from column metadata.
Optimistic async flow
Adds loading states, optimistic saves, and rollback behavior to show how the pattern works in a more production-like flow.
Basic
Basic data grid
This is `c-data-grid-1`: the simpler starting point before inline editing behavior is introduced.
Basic Data GridSorting, pagination, resizable columns, and drag-and-drop rows
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
Rows per page
1 - 5 of 6