How to change header background color and font color in Handsontable

Samuel Segal picture Samuel Segal · Jan 26, 2015 · Viewed 10.6k times · Source

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

ZekeDroid picture ZekeDroid · Jan 28, 2015

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>']
  }
)