Inline Edit Table
Projects table with one row in edit mode showing Input and Select cells with save and cancel affordances.
Projects table with one row in edit mode showing Input and Select cells with save and cancel affordances.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Inline Edit Table is the projects list with one row locked into edit mode as a static blueprint. The row for prj_8h2k, API v2 launch owned by Avery Stone, shows an Input for project name, two closed Select triggers for owner and status, a right-aligned Input for the budget figure, and a date Input for the due date. A check icon button saves and an X button cancels. The three remaining rows are static: Brand refresh, SCIM integration, and Data export pipeline.
Projects are one const array; the editing row is keyed by a fixed editingId constant so the blueprint renders the pattern without any useState. The footnote states that only one row can be in edit mode at a time and that Escape discards unsaved changes.
Reach for this block on any admin table where users need to correct individual field values without navigating away: project registries, contact lists, rate tables, or configuration rows. Wire the check button to your PATCH endpoint and replace the static editingId with a piece of state driven by row click.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the project budget and schedule table. Other inline-edit tables:
Tip: keep the editing row visually distinct with a light bg-muted/20 wash so users always know which row is being mutated before they confirm.