React-table: rowInfo is returned as undefined with getTrProps

[sarah-clements]

What version of React-Table are you using?

I'm using the v6.7.5

What bug are you experiencing, or what feature are you proposing?

Using the example in the docs for dynamic styling, rowInfo is returning undefined. My data is provided by a prop from the redux store (it works fine when rendering the table without trying the dynamic styling).

getTrProps={(state, rowInfo) => {
   console.log(rowInfo);
    return {
      style: {
        background: rowInfo.row.status === "unresolved" ? 'green' : 'red'
      }
    }
  }}

[gary-menzel]

You will need to check if rowInfo is defined. getTrProps can be used in multiple places and rowInfo can be undefined (e.g. in the padded rows).

[sarah-clements]

I'm not sure I follow. I want to dynamically style every row based on one of two key/values in my data. Ideally I'd be calling a function that perform some checks and then returns the style object. Should I be doing this a different way? (If I were doing this with jsx table markup I'd be calling a function on every table row - as I'm iterating over my data - to determine a class for that row's styling.)

This is how I was using getTrProps just with the example:

            <ReactTable
                        data={bugs}
                        columns={columns}
                        className="-striped"
                        // this is what I'd like to do:
                        // getTrProps={(state, rowInfo) => this.bugStatus(rowInfo)}
                        getTrProps={(state, rowInfo) => {
                           console.log(rowInfo);
                           return {
                             style: {
                                background: rowInfo.row.status === "unresolved" ? 'green' : 'red'
                             }
                          }
                       }}
                      />

[gary-menzel]

Maybe I wasn't clear. getTrProps is used inside the code in a number of places and, in at least one of those places, rowInfo is passed as undefined. So, if you are going to use the data from rowInfo you have to check it first. If it is undefined, then just return {} otherwise you should be fine with the return statement you have - assuming your row has a status element on it (note: row is the displayed row and original is your original data - which will have everything, not just the data you are displaying).

So, there is nothing wrong with your concept. You just have to ensure that rowInfo is defined before trying to acecss it. e.g.

if(rowInfo) /* your return here */
else return {}

[gary-menzel]

Here's a quick codesandbox example (based of the Simple Table example in the doco).....

https://codesandbox.io/s/k3q43jpl47

[sarah-clements]

Got it - thanks Gary!

[jack1012t]

thank you both, this helped a ton!

[bhgjmorton]

This helped me big time. Thanks!

[yehudasabag]

Thanks, but I think it should be stated in the documentation

[rolv44]

estaba horas estancado, muchas gracias!