How to change the color of row while selecting or hovering the handsontable row?

Tags: #<Tag:0x00007efc6486ef90>
#1

How to change the color of row while selecting or hovering the handsontable row?

#2

Hello,

Firstly you should add classnames to the rows. Follow this thread to learn how to add classnames to rows:

After you have successfully added classnames to the rows you can use pretty basic css to add a background color on hover. You don’t want to add the background color to the row but to the underlying td elements. Your css should look something like this

tr.classname:hover td {
background-color: red;
}

Alternatively handsontable has a Hook called afterOnCellMouseOver and afterOnCellMouseOut you can use to manipulate anything on hover in and on hover out(adding classnames, styling etc). The hook afterOnCellMouseDown can be used for the selection part of your problem.

Hope this was of some help.

Have a good day

#3

Thank you for your feedback @billy_degraaf

@fayejitendra here’s a demo that you can play with https://jsfiddle.net/75joahm4/
It adds the classes on afterOnCellMouseOver and removes on afterOnCellMouseOut.

#4