Automatically highlight row (as if selected) on hover? (ReactJS)

Tags: #<Tag:0x00007efc64d5d420>
#1

Hi, I’m new here. Good day!

I just want to ask if it is possible to highlight the whole row, the currently-hovered cell’s row? For example, I am hovering at column 2, row 3, cell - what I want to achieve is that I want to set that row as highlighted, as if like selected. And the same thing happens if I hover to another cell. And for the row header as well. If I hover on the row header, the same thing must happen for the whole row.

I’m currently using HandsOnTable with React. The afterOnCellMouseOver is a good candidate but I’m having a hard time implementing the behavior I want.

Hoping that you can help me on this one. Thank you!

#2

Hi guys,

I have managed to find a way:

        const handleMouseOver = (e, coords, ID) => {
        setTimeout(() => {
                    setAllowHover(true);
                    if (Math.sign(coords.row) !== -1 && allowHover) {
                        hotTableInstance.current.hotInstance.selectRows(coords.row);
                    }
                }, 700);
 }

I proceeded using the afterOnCellMouseOver. However, my problem now is that when I scroll there is a performance issue, cause all cells that the cursor touches will invoke that function. How to determine only allow hover event if not scrolling? I tried the afterScrollVertically, top set allowHover state to false, but still there is some delay in scrolling.

#3

Hi @hugh

The subject sounds complicated. Can you attach a working demo where we can reproduce the issue? Please describe all the steps to do so.

#4

HI,

Thank you for your response. I have already find a way how to implement my goal by using afterOnCellMouseOver and triggering the code posted above. However, my problem now is that it always triggers when scrolling.

This is my only question now: is there a way to detect that the user is scrolling? so that I can disable it, and then if the user stops scrolling I want to re-enable it.

Thank you.

#5

We have two methods to detect scrolling: afterScrollHorizontally - https://handsontable.com/docs/7.4.2/Hooks.html#event:afterScrollHorizontally and afterScrollVertically - https://handsontable.com/docs/7.4.2/Hooks.html#event:afterScrollVertically

Does it follow your idea?

#6

Hi @hugh

any progress on that task?

#7

I’m closing this issue as there’s no update for a month.
If you still need some guidance @hugh on this or other issue feel free to send me an email (support@handsontable.com)

#8