Inline Edit Table

About this block

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.

When to use

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

• App shell
• Filters and search

After

• Dialogs
• Notifications

What you can display

One strong use is the project budget and schedule table. Other inline-edit tables:

• Rate card editor. Service line items with editable unit price and quantity cells.
• Team roster. Member rows with an editable role Select and notification-preference toggle.
• Integration config. Webhook rows where the endpoint URL and secret are editable in place.

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.