'display icon in a column in react-table on mouseover/enter

Using React-table. Want to show/hide an icon in a single column on mouse enter/exit. Changing the row background via css is nbd but haven't found the trick to altering css for a single cell on row mouseover.

Wanted to know if there was a straightforward method before I start spinning a web-of-states to push the signal around.

reactjs react-table

Solution 1:^[1]

FWIW:

in the column descriptor:

Cell: ({row}) =>  <div className={`${rootClass}__table-icon`} row-key={row.id}}><SVGItem/></div>

make sure the <tr> has onMouseEnter and onMouseLeave defined
add:

function rowMouseEnter(row:any) {
    document.querySelector("[row-key='" + row.id + "']").className = `${rootClass}__table-icon-selected`
}

function rowMouseLeave(row:any) {
    document.querySelector("[row-key='" + row.id + "']").className = `${rootClass}__table-icon`
}

in css add

&__table-icon-selected: visibility: visible

and

&__table-icon: visibility: none

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	acme-j

'display icon in a column in react-table on mouseover/enter

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]