React-table change style for each row on hover

Question

I'm using react-table npm module, I want to change the style of a row on hover(onMouseEnter). I found the below option in their documentation which lets style all the rows, but I want to style each row on hover I tried using onMouseEnter and give the styling but it isn't taking that. Any suggestions!

getTrProps={(state, rowInfo, column) => {
  return {
    style: {
      background: rowInfo.age > 20 ? 'green' : 'red'
    }
  }
}}

Answer 1

Probably you already solved your issue

This is a great way:

const [hoveredRow, setHoveredRow] = useState(null)

return (
      <ReactTable
      ...
      getTrProps={(state, rowInfo) => {
        if (rowInfo && rowInfo.row) {
          return {
            onMouseEnter: (e) => {
              setHoveredRow(rowInfo.index)
            },
            onMouseLeave: (e) => {
              setHoveredRow(null)
            },
            style: {
              background: rowInfo.index === hoveredRow ? '#efefef' : 'white',
            }
          }
        } else return {}
      }}
)

Inside the events you can do things to the state, rowInfo, styling, etc.

Answer 2

previous answer from @rishikarri for old version of React-table.

in my case i do this in .scss

  .ReactTable.-highlight .rt-tbody .rt-tr:not(.-padRow):hover {
    background-color: rgba(247, 247, 247, 0.05) !important;
  }

i took this from here

Answer 3

I would try solving this using CSS. Example below:

.ReactTable .rt-tr .action {
    transition: all .2s ease
    text-align: center
    color: red
    transform: scale(0)
}

.ReactTable .rt-tr:hover .action {
    transform: scale(1.3)
}

.ReactTable .rt-tr:hover .rt-td {
    background: yellow
}

I grabbed this from here: https://codepen.io/tannerlinsley/pen/rmeGBP?editors=0110

He solves it another way here: http://codepen.io/tannerlinsley/pen/bWprzr?editors=0010

Cheers!