Cross-axis header (row/col) keeps bold text + border

Cross-axis header (row/col) keeps bold text + border

Posted by: averma on 20 August 2026, 1:48 am EST

• 

  averma

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 20 August 2026, 1:48 am EST - Updated 20 August 2026, 1:53 am EST

  PRODUCT: SpreadJS v18.2.3 (@mescius/spread-sheets)

  ISSUE:
  
  On full-column select (col header click), the INTERSECTING row headers
  
  should reset to default styling: color #00000099 (light) / #FFFFFF8C
  
  (dark), font 500 10px Verdana, no border-top/border-bottom.

  We inject CSS targeting .gc-rowHeader-highlight / .gc-rowHeader-hover
  
  (and mirror for .gc-columnHeader-highlight/-hover on row-select) with
  
  !important on background-color, color, font, border-top, border-bottom.

  RESULT: background-color and color resets work. font-weight (bold)
  
  and border-bottom are STILL applied despite !important override.

  SUSPECT: same root cause as the header hover-class-swap issue you
  
  confirmed earlier (ticket ref: hover class replacing selected/highlight
  
  class on mouseenter) — i.e. these aren’t resolved via the CSS class
  
  alone, some inline style / canvas-drawn property / JS-applied style is
  
  setting bold + border directly on the element or drawing it on canvas,
  
  so no CSS selector (even !important) can win.

  ASK:

  1. Confirm whether bold text + border on intersecting header is set
     
     via CSS class, inline style, or canvas draw.
  2. If inline style/JS — what’s the supported API to override
     
     font-weight and border on row/col header per-selection state
     
     (equivalent to what cellStates.add / selectionBackColor gave us
     
     for cell selection)?
  3. If canvas draw — does spread.refresh() actually re-read our CSS,
     
     or is there a separate header-style API we should be calling
     
     instead of CSS injection entirely?

  REPRO:

  1. Click any column header (full column select).
  2. Row headers show: bold text + border-bottom, despite our CSS
     
     setting font: 500 10px Verdana !important; border-bottom: none !important;
     
     on .gc-rowHeader-highlight, .gc-rowHeader-hover.

  EXPECTED RESULT IN SCREENSHOT

  

  1550×472 22.2 KB

• 

  chirag.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 21 August 2026, 7:26 am EST

  Hi Ashish,

  Thank you for providing the detailed information and reproduction steps.

  We investigated the behavior you described in SpreadJS v18.2.3. For more extensive customization of the row/column header rendering, including properties such as font weight and borders, CSS customization is not sufficient because these headers are rendered on the SpreadJS canvas.

  As a workaround, you can override the paint method of the corresponding header cell type. This provides access to the Canvas rendering context and allows you to customize the header appearance based on its current visual state.

  For example, the ColumnHeader cell type can be customized as follows:

  var ColumnHeader = GC.Spread.Sheets.CellTypes.ColumnHeader;
  var oldColumnHeaderPaint = ColumnHeader.prototype.paint;
  ColumnHeader.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
      var isSelected =
          context.visualState === GC.Spread.Sheets.VisualState.selected ||
          context.visualState === GC.Spread.Sheets.VisualState.highlight;
      if (isSelected) {
          style.backColor = 'blue';
          style.font = 'bold 17px Arial';
          style.foreColor = 'white';
          context.visualState = GC.Spread.Sheets.VisualState.normal;
      }
      oldColumnHeaderPaint.apply(this, [ctx, value, x, y, w, h, style, context]);
      if (isSelected) {
          var borderWidth = 3;
          var offset = borderWidth / 2;
          ctx.save();
          ctx.strokeStyle = 'red';
          ctx.lineWidth = borderWidth;
          ctx.strokeRect(x + offset, y + offset, w - borderWidth, h - borderWidth);
          ctx.restore();
      }
  };

  Using this approach, you can modify the style properties before the default header rendering takes place and also use the Canvas context to draw custom borders or other visual elements.

  We have also prepared a small sample demonstrating this approach, which I have attached for your reference below.

  For the specific requirement of resetting the intersecting row/column headers to your desired font and border styling, you can adapt the same paint override to detect the appropriate visual state and apply the required styling.

  Please let us know if you require any further assistance.

  Best Regards,
  
  Chirag

  Attachment: spjsCellHeaderCustomization.zip