Change background of corresponding row and column header of selected cells

Change background of corresponding row and column header of selected cells

Posted by: averma on 28 July 2026, 7:13 am EST

• 

  averma

  • Post Options:
  • Link
    Copy

  Posted 28 July 2026, 7:13 am EST - Updated 28 July 2026, 7:18 am EST

  

  1824×630 49.8 KB

  Hi,

  I’m using SpreadJS in a React application. (@mescius/spread-sheets": “18.2.3”,)

  Is there a supported way to change the background colour of the corresponding row and column headers for the currently selected cells, similar to the behaviour shown in the attached screenshot?

  For example, if cell C5 is selected, I’d like the column header C and row header 5 to have a different background colour while the selection is active.

  Is there a built-in API or recommended approach for achieving this, or does it need to be implemented by handling selection events and updating the header styles manually?

  I’ve attached a screenshot for reference.

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 29 July 2026, 5:39 am EST

  Hi,

  Thanks for your patience. This is supported out of the box, so no need to handle selection events manually.

  SpreadJS renders row/column headers to canvas, but it looks up the color for each header state from a set of predefined CSS classes on the page. The state you’re after — one or more cells in that row/column are part of the current selection (e.g. selecting C5) — maps to the “highlight” state:

  .gc-columnHeader-highlight {
      color: red;
  }
  
  .gc-rowHeader-highlight {
      color: blue;
  }

  Refer to the attached smaple: https://jscodemine.mescius.io/share/nq24t1pgvEKmVIAiGeVycA/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fpackage.json"]%2C"ActiveFile"%3A"%2Findex.html"}

  Best regards,
  
  Priyam