## 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.

Pricing matrix 12 rows · 1 unsaved

Plan | Price | Limits |
--- | --- | --- | ---
Starter | $0 / month | 5 seats · 1k requests |
Pro |  |  |
Enterprise | Custom | Unlimited · SSO · SLA |

## 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.

Inventory — Q4 forecast Auto-saving · 3 cells dirty

Item | Oct | Nov | Dec | Status
--- | --- | --- | --- | ---
Widget A |  |  |  | clean
Widget B |  |  |  | dirty
Widget C |  |  |  | dirty
Widget D |  |  |  | clean

## 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.

Q4 budget — by department Total: $1.24M · 4 departments · 12 categories

## 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).