React-table: Conditionally color rows?

[hilary-L]

Love this data table - so much easier to work with than others that I've used. Awesome work.

Is there a way to apply styling to a row of data based on an attribute in the data? Or is the best way to do this to use rowValues and just change the rendering of each cell and put the check on each cell? Seems kind of repetitive, but if that's what I've got to do...

[tannerlinsley]

I think you're looking for
trClassCallback={ rowInfo => rowInfo.row.status ? 'green' : 'red' }
or
trStyleCallback={ rowInfo => ( {color: rowInfo.row.status ? 'green' : 'red'} ) }

Both of those will help you on your quest! Good luck :)

[sshaginyan]

@tannerlinsley Are trClassCallback & trStyleCallback props for , I've set them and they never get called :-(.

[tannerlinsley]

Try the new getTrProps property. See readme for documentation :)
On Mon, Mar 6, 2017 at 5:55 PM Steven Shaginyan [e-mail]
wrote:

@tannerlinsley https://github.com/tannerlinsley Are trClassCallback &
trStyleCallback props for , I've set them and they never get called :-(.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/tannerlinsley/react-table/issues/44#issuecomment-284585454,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFUmCb-3PfSTsLV8zY7e0AGu6kCswiReks5rjKr2gaJpZM4LvNrR
.

[angkj]

@tannerlinsley Could you give me an example of how to use the getTrProps? I am not sure what is rowInfo or how do i pass it in

EDIT:
I managed to get the rowInfo to work, however, rowInfo.rows does not work for me as no such object exists. I see pageRows attribute, but that does not allow me to get each individual row but the entire data set.

[aaroncrawford]

For future, this is a good reference sample on how getTrProps works :
https://codesandbox.io/s/k3q43jpl47

[loukas371]

thanks @aaroncrawford , that if(rowInfo) condition did it for me because I was getting an error previously and I didnt see it in the documentation somewhere.

[KhaledKassab]

@tannerlinsley How to conditionally color Rows and cells in a functional component, appreciate if you demonstrate with an example.

[mohammedsaket]

I think you're looking for
trClassCallback={ rowInfo => rowInfo.row.status ? 'green' : 'red' }
or
trStyleCallback={ rowInfo => ( {color: rowInfo.row.status ? 'green' : 'red'} ) }

Both of those will help you on your quest! Good luck :)

Not Working sir..
data={this.state.data}
columns={columns}
defaultPageSize = {15}
pageSizeOptions = {[15,25,100]}
className="-striped -highlight"
trClassCallback={ rowInfo => rowInfo.row.Web_Category ? 'green' : 'red' }

data={this.state.data}
columns={columns}
defaultPageSize = {15}
pageSizeOptions = {[15,25,100]}
className="-striped -highlight"
trStyleCallback={ rowInfo => ( {color: rowInfo.row.status ? 'green' : 'red'} ) }

[nomanalikhan]

This solution is applicable to version 6. Do we have some workaround for version 7?

[AdnanTheExcellent]

Bumping this. would like to implement highlight a row if someones mouse is hovering over the row. Or if i have a delete button in that row, hovering over the button would create a css affect of that row. Is this currently possible with v7.x?

[wwsskkaa]

bumping this. also would like to know

[zachrnolan]

I was able to style rows conditionally by following this guide for v7: https://react-table.tanstack.com/docs/examples/data-driven-classes-and-styles

Example:

getRowProps={row => ({
  style: {
    background: row.original.review_status === 'flagged' ? 'yellow' : 'white',
  },
})}