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'
    }
  }
}}

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'
    }
  }
}}

• javascript
• reactjs
• redux

• Did you tried onMouseOver event to pick up rowInfo.age there and then pare it with you static value? – JackTheKnife Commented Oct 15, 2019 at 15:06

4 Answers 4

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!

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

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.

Please follow this to update individual cell color based on row.value

{
  Header: () => <div className="text-center font-weight-bold">Status</div>,
  accessor: "selectedstatus",
  className: "font",
  width: 140,
  Cell: (row) => (
    <div
      className="text-center h-6"
      style={{ background: row.value === "Selected" ? "green" : "red" }}
    >
      {row.value}
    </div>
  ),
},