Striped rows with hover conflicting

Tags: #<Tag:0x00007efc72f2e548> #<Tag:0x00007efc72f2e408>
#1

I’m trying to build a table in React with striped rows, that also has a hover effect on which ever row is moused over.

I’m using the cells option to configure the striping. And the hooks: afterOnCellMouseOver/afterOnCellMouseOut to add classnames for the hover.

The cells option seems to be overriding the the className being appended by the hooks. Is there another hook I could use to do the striping the would work with the mouseOver/mouseOut?

 <HotTable
    ref={hotRef}
    data={testData}
    autoWrapCol={true}
    cells={ (row) => {
       let cp = {}
       if(row % 2 === 0){ cp.className = 'striped'}else{
         cp.className = 'unstriped'
       }
       return cp;
     }}

    afterOnCellMouseOver={(e, coords, td) => {
      let hot = hotRef.current?.hotInstance;
      let index = coords.row;
      for (let i = 0; i < hot?.countCols(); i++) {
        hot?.setCellMeta(index, i, "className", "hovered");
       }
      hot?.render();
    }}
    afterOnCellMouseOut={(e, coords, td) => {
      let hot = hotRef.current?.hotInstance;
      let index = coords.row;
      for (let i = 0; i < hot?.countCols(); i++) {
        hot?.setCellMeta(index, i, "className", "unhovered");
      }

      hot?.render();
    }}
  />
#2

Hi @ericpeter.ferguson

Thank you for contacting us. We have a solution that is based purely on the beforeCellMouseOver and the beforeCellMouseOut hooks. You can check the example here: https://jsfiddle.net/handsoncode/9Lou6w24/

Let me know if that would meet your requirements.

#3

Hello thank you for the response.

I’m having an issue with the zebra striping overriding the hover. I modified the fiddle to show it.

https://jsfiddle.net/y5zbguom/

When I inspect the elements the class name .striped applied in the cells option isn’t able to be removed by the beforeOnCellMouseOver event. I think the close enough solution would be to only have the hover effect on the unstriped rows, as in the example above. But let me know if you have another solution.

#4

Hi @ericpeter.ferguson

Let me consult this problem with my colleague and I’ll return to you tomorrow, because I think we had this problem before.

#5

Hi @ericpeter.ferguson

I figured that the issue is caused by assigning the class name in the cells option, and the solution would be to assign it the same as in the beforeOnCellMouseOver hook with setCellMeta. There are still some little problems, but I’m working on the solution. I should have it ready by tomorrow.

#6

Thanks for looking into it!

#7

Hi @ericpeter.ferguson

I have a working solution: https://jsfiddle.net/handsoncode/zqLcbhkj/

Let me know if that meets your requirements.