DataGrid: collapsible plugin (row truncation + expand toggles)

[bemky]

Summary

Adds an opt-in collapsible plugin for the virtualized DataGrid (and subclasses like DataSpreadsheet) — the windowed counterpart of the Table collapsible plugin, with the same semantics:

• collapseTo (any valid CSS size, default auto) sets a height budget for rows via max-height: var(--expandTo, var(--collapseTo)).
• Rows whose cell content overflows are truncated and flagged with a collapsed attribute; each overflowing cell gets a gradient chevron toggle (same affordance as Table's).
• Clicking expand sizes the row to that cell's full content by setting --expandTo on the row element; the collapse toggle reverses it.

Like the sibling resizable/reorderable DataGrid plugins, it is not auto-included — consumers opt in with DataGrid.include(collapsible) / DataSpreadsheet.include(collapsible).

Virtualization integration

The tricky part is that DataGrid pools/recycles row and cell elements and drives windowing off measured heights. The plugin leans on the existing pipeline instead of adding geometry code:

• Clamping is pure CSS, so the grid's normal measure pass records the clamped height; expanding (--expandTo) resizes the element, which the grid's own row ResizeObserver already turns into measure() → reflow() — offsets, the mounted window, and the body scroll extent update for free.
• Expanded state lives on the persistent DataGridRow controller (row.expandedColumns, a Set of columns), never on pooled elements. The live cell is re-resolved on every pass via row.cellOf(column), and measured heights already travel with controllers — so an expanded row scrolled out of the window keeps its height and restores its expansion (and toggles) when it scrolls back in, and expansion survives sortRows/splices.
• A plugin ResizeObserver watches mounted row elements (observe on mount, unobserve when pooled — re-observation gives each mount a free initial check). The check (checkRowCollapse) is idempotent: it always rebuilds toggles/attributes from controller state, so it can run on every resize (content rendering in, column resize rewrapping text, --expandTo changing).
• Pooled elements are scrubbed of collapsed / collapse-toggle attributes on acquire, since unmount() only clears style/class.
• Toggles for frozen columns get position: sticky + the cell's left; toggle pointerdown/mousedown are stopped so clicking one doesn't start a DataSpreadsheet selection.

Verified

Drove the data-spreadsheet demo (872 rows, collapseTo: '60px', multi-line Awards column) headlessly: truncation + toggles on load; expand grows the row 60→192px with the body scroll height growing by exactly the delta; scroll-away-and-back restores expansion on the recycled element; collapse reverts; column resize re-checks truncation; sortRows keeps expanded heights with their rows; toggle clicks don't trigger selection; no console/ResizeObserver errors.

🤖 Generated with Claude Code