React-table: Give onClick or OnMouseEnter effect to a single row

[yolohello12]

Hello,

I'm trying to use getTrProps but it's triggering for all the rows. I want give effect to each row individually. Any suggestions!!

getTrProps={(state, rowInfo) => {
return {
OnClick:()=>{
}
}
}}

Thanks in Advance.

[tannerlinsley]

Does this log anything when you click on rows?

getTrProps={(state, rowInfo) => {
  return {
    onClick: () => console.log(state, rowInfo)
  }
}}

[yolohello12]

Yes, it's logging the data that's available in that row. Actually what I'm trying to do is, I added a column which would have an Icon for each row and only would appear when I hover over a row. Right now when I'm hovering over a row, it's displaying all the Icons of all the rows. I added the Icon from column render.
I hope that makes sense :)

const column= [{
header: 'STATUS',
width:100,
render:row => close,
}

[tannerlinsley]

Does this solve your problem? http://codepen.io/tannerlinsley/pen/gWrRNV?editors=0110

I would suggest just using css. It would be much easier than trying to do it programmatically

[yolohello12]

That makes sense, but what if I want to change the color of a single whole row on hover not just icon action!!

[tannerlinsley]

To do it via css: http://codepen.io/tannerlinsley/pen/rmeGBP?editors=0110

To do it programmatically: http://codepen.io/tannerlinsley/pen/bWprzr?editors=0010

[yolohello12]

Awesome, thank you so much for your time. Really appreciate that.

[parmod-arora]

HI @tannerlinsley ,

I was looking into http://codepen.io/tannerlinsley/pen/gWrRNV?editors=0110.

and I have one question that how can i change row style on column click.

render: (row) => { const closeClick = () => { alert('clicked') }; return ( <div className='action'> <i onClick={closeClick} className="ion-edit" >close</i> </div> ) }