Posted 5 August 2026, 9:42 am EST
Expected
- Select cell/range → intersecting row + col headers →
(light) /#EDE6FF
(dark)#FFFFFF12 - Click col header → only col headers for that column →
/#5F2BFF
(light),#FFFFFF
/#5F2BFF
(dark)#0A0618 - Click row header → only row headers for that row → same selected colors
- Hover over already-selected header → color must NOT revert to hover color
Actual
- CSS class approach (
,.gc-columnHeader-selected
): SpreadJS swaps classes on hover — selected class is removed when cursor enters the header cell, hover class replaces it..gc-columnHeader-highlight
selector trick ineffective.:not() - JS
handler withSelectionChanged
on headers: fires one selection behind — by the time handler runs,setStyle
still returns the previous selection.sheet.getSelections() - Axis isolation (row-click vs col-click): impossible at CSS level — SpreadJS applies same classes regardless of which axis triggered selection.
What we tried
- CSS vars on
/.gc-columnHeader-selected
— works for color but hover swaps class, losing selected color while cursor is on header.gc-rowHeader-selected
on hover rule — SpreadJS doesn’t co-apply classes, swaps them:not(.gc-columnHeader-selected)
+SelectionChanged
in hook (setStyle
) — one frame behindbindHeaderHighlight
+SelectionChanged
inline in component — still one frame behindsetStyle
Questions for SpreadJS support
- Is there a synchronous callback that fires AFTER the selection is committed and AFTER the header DOM classes are applied, so
reflects the new selection?sheet.getSelections() - Is there an API to suppress SpreadJS’s own header class application so we can fully own the header paint?
- Does
(pre-commit) give us the incoming selection coords reliably?SelectionChanging - Is there a supported way to differentiate “user clicked row header” vs “user clicked col header” vs “user selected a range” in the event args?
- Is there a canvas paint hook /
for row/col header cells that would let us paint header background per-cell without DOM class conflicts?CustomPainter
