Add background colour to table headers dynamically

Tags: #<Tag:0x00007efc60a0c860>
#1

Hey there,
Does anyone know how to change the background color of the header of Handsontable? I need to change the header colors dynamically based on some conditions. I’m using handsontable React.

Thanks.

#2

Hi @pasinduprabashitha

Here’s an example of how you can change the background color. You can do this by creating a custom renderer and setting it as a cell property in cells option.

http://jsfiddle.net/Le25ogc5/

#3

But this code colorizes the second row instead of the header. I’m using React. Is that be the issue?

#4

@adrian.szymanski Here’s the picture of the current look.

background%20color
background color.PNG1887×213 3.91 KB

#5

Hi @pasinduprabashitha

My colleague is on vacation now so I wanted to make an update for him.
We do not have an exact demo in our demo base but you can use this example https://jsfiddle.net/handsoncode/0gfjkesd and alter the emoji logic for a className and then manipulate the coloring of a header via className.

#6