feat(data-table): inline cell editing

[itsprade]

Summary

This PR adds inline cell editing to DataTable for every typed column, together with the decision record that proposes it (decisions/data-table-inline-editing.md). It's still a draft for team input: the "For the call" questions in the decision doc are open. Date and badge editing, first planned as a follow-up PR, are folded in, so the whole feature can be tried and reviewed at once.

Why

• The Larson IMS team can't move about a dozen AG-Grid tables to DataTable without it. They're quantity-entry screens (POs, receipts, invoices, stock adjustments) that need typing into cells with rules, plus editability decided per row.
• tailor-inc/platform-planning#1428 asks for one standard version.
• tailor-inc/platform-planning#1750 asks whether this should be a first-class feature.

What's in it

An edit config on typed columns:

Column	Editor
text, number, money, link	Typed into
text / link with edit.options	Dropdown
badge	Dropdown of the same badges (choices from badgeLabelMap)
date	Calendar; dateFormat: "datetime" adds a time field

• Rules: min, max, maxDecimals and required, plus validate(value, row) for any rule of the screen's own. Date columns take min / max days.
  • Characters that can never be valid are blocked as the user types.
  • Other errors give the cell a red outline and a tooltip. Enter and Tab are blocked until the value is fixed, Esc reverts, and leaving an invalid cell reverts it.
• Per row: canEdit(row, { selected }).
• Keyboard: Enter moves down the column; Tab moves to the next editable cell, skipping read-only ones; Enter / Space / ↓ opens a dropdown or calendar. Japanese IME input is respected.
• Saving: a value saves when the user leaves the cell, presses Enter or Tab, or picks a choice. If onCommit returns a promise, the cell keeps the new value while it's pending and reverts if it rejects. There's no saving indicator.
• Look: spreadsheet-style, with no input boxes; the whole cell is the click target.
  • Cursors: a text cursor over typing cells, a pointer over dropdown and date cells, "not allowed" over read-only cells (unless rows are clickable).
  • The edited cell gets an inset primary ring, and an invalid one a destructive ring.
  • Dropdown and date icons appear on hover and focus, in a 20px space kept free at the right edge. Read-only rows of the column keep the space too.
  • Row height and column width never change while editing.

column({
  id: "received",
  label: "Received",
  type: "number",
  edit: {
    canEdit: (_row, { selected }) => selected,
    min: 0,
    maxDecimals: 0, // whole numbers only
    validate: (value, row) =>
      value !== null && value > row.ordered ? `Can't exceed ${row.ordered}` : undefined,
    onCommit: (row, value) => updateLine(row.id, { received: value }),
  },
});

Compatibility

• No API change beyond columns: useDataTable options and DataTableContextValue are unchanged, and columns without edit behave as before.
• Display fixes that apply to every table:
  • A date-only "YYYY-MM-DD" value shows that day in every time zone. It rendered a day early west of UTC.
  • Number and money cells show up to edit.maxDecimals decimals, and a maxDecimals below minDecimals no longer throws.
• Shared Select: its dropdown gets the same 4px inner padding as Menu, Combobox and Autocomplete, so the highlighted option no longer touches the edges. It's a separate commit with its own patch changeset, easy to split out if preferred.

Also included

• Docs: a new "Inline editing" section, written in docs-src/ and regenerated with pnpm docs:sync.
• The list-dense-scan pattern: its "no inline editable cells" rule is replaced with guidance.
• A 17-column goods-receipt demo in the DataTable lab.
• Changesets: minor (inline editing) and patch (Select padding).

Not in this PR

• A bring-your-own editor, and a boolean column type
• Editing multi-value badge cells (they stay read-only)
• Multi-cell paste, fill-down and undo
• Moving between cells with the arrow keys
• Comma decimal separators
• Possible follow-ups if teams ask: an async validate for server checks with an in-cell message, and schema-based rules (e.g. Zod)

Try it

pnpm dev, then open /showcase/data-table-lab → Inline editing:

• Tick a row to edit its Received quantity: whole numbers, never more than ordered.
• Discount % is limited to 0–100 with one decimal; Weight takes three decimals, up to 500.
• A unit price over 10,000 is rejected by the pretend server, and the cell reverts.
• Supplier (pending lines only) and Warehouse are dropdowns, Status and QC are badge dropdowns, and Expected, Received at (with time) and Best before (Oct 2026–Dec 2027) are dates.

Test plan

• pnpm type-check, pnpm lint, pnpm test (1,901 core tests, 82 of them new), check-dts, pnpm fmt:check, pnpm docs:check
• Browser (vite example):
  • blocked keys, error tooltips, Enter blocked while invalid, and Esc revert
  • Enter and Tab movement
  • a failed autosave reverting the cell and showing a toast
  • dropdown, badge and date editors, bounded calendars, and date-time Done / Clear
  • icons never covering values, and row height and column width unchanged as rows become editable
• Team decisions on the "For the call" questions in the decision doc

For reviewers

The open questions, with details in the decision doc:

• Naming: edit / canEdit / onCommit, or Base UI's onValueCommitted wording?
• Leaving an invalid cell reverts it (AG-Grid's default). Keep it?
• Enter moves down, spreadsheet-style. OK?
• One PR: review date and badge editing together with the rest, or split them back out?
• #1115: ship the simple pending/revert behaviour now and let useOptimisticRows build on it later?
• Catalogue pattern: move #1750 into docs-src/patterns/ and retire the popover version?
• Bring-your-own editor: leave it out until a team asks?
• Select padding: keep it here, or split it into its own PR?

Refs tailor-inc/platform-planning#1750 · tailor-inc/platform-planning#1428 · tailor-inc/platform-planning#1115 · tailor-inc/platform-planning#1161

🤖 Generated with Claude Code

[github-actions]

Code Metrics Report

	main (28388de)	#560 (54239f5)	+/-
Coverage	87.4%	87.4%	0.0%
Test Execution Time	2m13s	2m21s	+8s

Details

  |                     | main (28388de) | #560 (54239f5) | +/-  |
  |---------------------|----------------|----------------|------|
  | Coverage            |          87.4% |          87.4% | 0.0% |
  |   Files             |            204 |            204 |    0 |
  |   Lines             |           6014 |           6014 |    0 |
  |   Covered           |           5257 |           5257 |    0 |
- | Test Execution Time |          2m13s |          2m21s |  +8s |

---

Reported by octocov