Row hover effect

Tags: #<Tag:0x00007efc625c07a0>
#1

Is it possible to get a hover effect when mouse is hovering a row (tr)?
It’s a fairly common thing to see on datagrids, but I can’t seem to figure out any way to get it to work for a HoT grid.

#2

Hi @mottosson

Would you like to see this hover effect when hovering over a cell (and the highlight whole row) or when you hover over a row header (and the highlight whole row)?

#3

I want the row to be highlighted when I hover a cell. It would be great if I could apply a style to tr:hover but for some reason it doesn’t work.

#4

Yes, the className has to be attached to the cell (TD element). Here’s how to do it with the mouse hooks https://jsfiddle.net/AMBudnik/1xkuber0/

#5

Thanks @aleksandra_budnik, I think I can work with that for now.

However, I would like to be able to add a class with hover effect to the row element and let the browser css engine do the style calculations. Maybe in the future :slight_smile:

EDIT:
Don’t know why, but my hover effect feel very sluggish if I have more than 30 column… But when I look at your example it feels snappy even with lots of columns…

EDIT (again)
Is it possible to just add the class to visible columns to improve performance a bit?

#6

If there are many columns and large container height you may also wrap the logic in batch() like this https://jsfiddle.net/h7zny0d1/

Adding className to a TD element works well. Here’s an example https://jsfiddle.net/h7zny0d1/1/ but that works only for a single cell - not a row. And as I previously mentioned, we can only operate on TH and TD (not TR).

#7

Thanks. Adding batch didn’t do any noticeable difference for me. I’m using HoT with React, but I guess that shouldn’t really matter?

EDIT:
When I look at the inspector it looks like every cell in the grid is updated even though it should only be the current row:

Any thoughts?

Oct-28-2022%2015-31-44
Oct-28-2022 15-31-44.gif760×770 544 KB

#9

I saw your previous message (just got a notification on email), and I was going to send this link https://github.com/handsontable/handsontable/issues/5769 to the eco-renderer cause, yea… definitely, as a React user, you’d expect to refresh only the element that changed, but in Handsontable we are refreshing all the elements in the DOM (viewport +/- a few columns and rows.

If the demo performance and the one you have in your app are drastically different, we can discuss that via email (do a pre-review of the code). If that sounds like a good plan, please send the requirements and code at support@handsontable.com.

#10

Sure I’ll send an email shortly. Here is a reproduction for anyone else interested: https://codesandbox.io/s/suspicious-cohen-6fz6ey

#11