Inline-edit grids & tree tables

When to use

Inline-edit grids: when the user spends most of their time correcting/refining row data — pricing matrices, inventory counts, bulk metadata editing. Distinct from a detail drawer (12b) which is for one-row-at-a-time depth. Tree tables: when rows are recursively nested and the hierarchy is the data — org charts, file trees, accounting categories. Distinct from a flat table with a parent-id column.

Inline-edit — single editing row

The most common shape: a normal table where one row at a time enters edit mode (double-click or pencil button). Cells become `<input-ui>` / `<select-ui>` / etc.; Save / Cancel actions appear in the row's trailing column.

Spreadsheet — every cell editable

The full Excel-style shape: every cell renders an `<input-ui>` (or typed equivalent — number, select, date). Tab moves to the next cell, Enter commits + moves down. Saves are auto-debounced; the dirty state surfaces as a per-row tag.

Tree table — hierarchical rows

Use <tree-ui> for the recursion. Each <tree-item-ui> renders the chevron + indent automatically; nested items go inside the parent's default slot. Common in budgets, org charts, file browsers.

Composition rules

• One editing row at a time is the default — a single editable row preserves the table's scan-readability for unaffected rows. Reach for full spreadsheet only when the user's job is to edit most cells.
• Highlight the editing row — a subtle --a-bg-subtle background makes the active row obvious. Without it, users lose track of which row they're editing after scrolling.
• Save / Cancel are inline, not modal — the actions appear at the trailing edge of the row. Modal save dialogs break the table flow.
• Dirty state surfaces per row, not just per cell — a tag-ui variant="warning">dirty trailing tag tells the user which rows have unsaved changes. Per-cell highlighting is too noisy.
• Auto-save is the right default for spreadsheets — debounced 800ms after last keystroke. The "Save now" button is for users who want to force a flush before navigating away.
• Tree depth caps at 4 — beyond that, indentation eats the column width and the structure stops reading. Use a search/filter (06g) or breadcrumbs to navigate deep trees.
• Tree rows render the same shape at every depth — an icon + text + optional metadata. Don't make the root row look different from leaves; the chevron + indent already encode hierarchy.
• Aggregates roll up — "Engineering — $620k" includes the children's $480 + $80 + $60. Show the total at the parent so users don't have to expand to verify.

See also

• table-ui — the canonical grid primitive (used for the spreadsheet body).
• tree-ui · tree-item-ui — hierarchy primitive.
• input-ui · field-ui — cell editor primitives.
• filter-bar — adjacent (filter the rows before drilling in).
• bulk-action-toolbar — adjacent (apply edits to selected rows).