React-window: Is there any way to have an :hover css modifier at the row level ?

[jeremieroy]

Assuming a multi-columns table, it is often interesting to be able to highlight the whole row under the cursor with an :hover css modifier.
I didn't find any clean way to achieve this...
I can highlight a single cell but that is not very helpful ^^'
Any idea is welcome :D

[TrySound]

You may highlight row manually with javascript for grids. Or you may just use list which allows you to render the whole row. My tables are all FixedSizeList based.

[jeremieroy]

I am using VariableSizeGrid, but there is no "row" element.

You may highlight row manually with javascript for grids

Not sure what you have in mind, something like keeping track of the current row index under the mouse icon on a onMouseMove event ?
Then keeping it in the state and manually setting a "is-hovered" class modifier on every cell item in the row ?
Would work I guess, it feels a bit heavy for such a feature :/
I'll try that if there is nothing better ^^

[TrySound]

Yes, you may use onMouseEnter and onMouseLeave for that. Or use VariableSizeList instead.

[bvaughn]

You could use the itemData prop to share the current row and a callback, e.g.:
https://codesandbox.io/s/bvaughnreactwindow-grid-row-hover-9j28g

[NexxLuo]

Can I add an outter row element ? How to do it ?

[bvaughn]

No, not to a grid

[sonofjack]

@NexxLuo I wasn't happy with the performance by storing the hovered row index in state.
What I did instead was to give every rendered cell a class associated with the rowIndex
example. cell--hover${rowIndex}.

Then on onMouseEnter you can add class to each cell with a specific rowIndex.

const onCellMouseEnter = (rowIndex) => {
    const cells = document.getElementsByClassName(`cell--hover${rowIndex}`);
    if (cells.length > 0) {
      for (const cell of cells) { cell.classList.add('tablegrid__cellhovered'); }
    }
  };

Hope this helps.

[bvaughn]

Thanks for sharing another solution, @sonofjack 😄

I suppose you could also use a descendant selector and just add/remove classes from the grid itself.

[sonofjack]

@bvaughn Yes that would be even better, thank you!

[geyang]

Just want to say this thread is awesome. Thank you all for your comments!

[NexxLuo]

This way just solve the hover class problem. If I want to make the row draggable , there is not row element, can`t achieve it. Is there any other way ?

[TrySound]

Then you should not use grid. Use list component instead.

[NexxLuo]

Then you should not use grid. Use list component instead.

But I really want to use the grid features , columns lazy load .

[NexxLuo]

No, not to a grid
@bvaughn

Is it possible to provide an options to make the grid cell wrapped a row element ? I think it`s very useful.

[thupi]

I suppose you could also use a descendant selector and just add/remove classes from the grid itself.
@bvaughn

For now, I went with the solution from @sonofjack but could you share a snippet or a bit more details on how to do something like your suggestion above :-) ?