How to change header background color and font color in Handsontable

Question

Questions: I'm able to change background color of cells but not of the header. Can I change the background color as well as font color of the header in Handsontable?

Answer 1

Add style tag in head of document. This will affect all HOT grids on the page. Still researching how to make different grids display with different styling.

   .handsontable table thead th{
        background-color: green;
        color:white;
        font-weight:bold;
        font-size:12px;
    }

Answer 2

You could use jquery or css for this. For example, apply a background color to all the span.colHeader:

.handsontable span.colHeader {
    text-color: #B2B2FF; /* pink ish */
    background-color: #FF7878; /* red */
}

Or even easier, handsontable allows HTML for col headers so as an option, you can supply an array of the headers with HTML:

hot = new Handsontable(container, {
  data: items,
  startRows: 1,
  colHeaders: ['<label id="header1" style="background-color: blue">I'm the first header"</label>', '<label id="header2" style="background-color: red">I'm the second header"</label>']
  }
)