React-table: How to Dynamically Change Individual Cell's Background

[schaeffer11]

I am trying to dynamically change the color of the background of a cell depending on certain conditionals. For sake of simplicity, how could I for instance make it so any cell in a specific column of the table has a red background if the value is equal to 1. Any help would be appreciated.

Thanks

[yezhi780625]

Use getPropsin columns:

columns: [{
  Header: 'Column',
  accessor: 'specific_column',
  getProps: {
    (state, rowInfo) => ({
      style: {
        backgroundColor: (rowInfo.row.specific_column===1?'red':null)
      }
    })
  }
}]

[tannerlinsley]

Correct!

[CWSites]

I tried this but I get a syntax error on (state

columns: [{
    Header: 'UX Score',
    accessor: 'ux_score',
    getProps: {
        (state, rowInfo) => ({
            style: {
                backgroundColor: (rowInfo.row.ux_score === 'B+' ? 'green' : null)
            }
        })
    }
}]

[blazergame]

@CWSites Remove the {} after getProps.

columns: [{
    Header: 'UX Score',
    accessor: 'ux_score',
    getProps:  (state, rowInfo) => ({
            style: {
                backgroundColor: (rowInfo.row.ux_score === 'B+' ? 'green' : null)
            }
        })
}]

[mbenhalima]

thanks @blazergame !! this worked perfectly

[dilipdiwakar]

I use the below code and i am getting the error "cannot read propertly 'row' is undefined.

Header: 'Percentage %',
accessor: 'percentage',
getProps: (state, rowInfo) => ({
style: {
backgroundColor: (rowInfo.row.percentage < 0 ? 'red' : null)
}
}),

[dilipdiwakar]

can you please help

[tannerlinsley]

Use rowInfo.original

On Sun, Jan 6, 2019 at 12:21 AM Dilip D Selvaraj [e-mail]
wrote:

can you please help

—
You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub
https://github.com/react-tools/react-table/issues/506#issuecomment-451721392,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFUmCdq3aJQYqDKObRgSr97RXfRVLuPuks5vAaQIgaJpZM4Pf9B2
.

[dilipdiwakar]

TypeError: Cannot read property 'original' of undefined
getProps
src/components/stocks/StocksComp.js:151
148 | accessor: 'percentage',
149 | getProps: (state, rowInfo) => ({
150 | style: {

151 | backgroundColor: (rowInfo.original.percentage < 0 ? 'red' : null)
| ^ 152 | }
153 | }),

[dilipdiwakar]

this is my code

{
Header: 'Percentage %',
accessor: 'percentage',
getProps: (state, rowInfo) => ({
style: {
backgroundColor: (rowInfo.original.percentage < 0 ? 'red' : null)
}
}),
style: {
textAlign: "center",
},
id: 'Percentage'
}

[dilipdiwakar]

Use rowInfo.original is not working.

[CWSites]

@dilipdiwakar could you post more of your code and also wrap it in ``` so that it's formatted correctly?

What do you get if you add a console.log(row)? It should give you a full print out of what your object looks like.

[dilipdiwakar]

@CWSites , where exactly you want me to add console.log(row).

{
      Header: 'Percentage %',
      accessor: 'percentage',
      style: {
        textAlign: "center",
      },
      getProps: (state, rowInfo) => ({
          style: {
            backgroundColor: (rowInfo.row.percentage < 0 ? 'red' : null)
          }
        }),
      id: 'Percentage'
    }

[dilipdiwakar]

this is the error i am getting

TypeError: Cannot read property 'row' of undefined
getProps
src/components/stocks/StocksComp.js:155
  152 | },
  153 | getProps: (state, rowInfo) => ({
  154 |     style: {
> 155 |       backgroundColor: (rowInfo.row.percentage < 0 ? 'red' : null)
      | ^  156 |     }
  157 |   }),
  158 | id: 'Percentage'

[CWSites]

@dilipdiwakar try this and see what you get. Also, if it is complaining that rowInfo is undefined then are you sure that data is being passed to your table columns?

getProps: (state, rowInfo) => ({
  console.log(rowInfo);
  style: {
    backgroundColor: (rowInfo.row.percentage < 0 ? 'red' : null)
  }
})

[valerianpereira]

@dilipdiwakar did you manage to resolve this? I am facing a similar issue.

[harvitronix]

It's not necessarily a fix, but a way to ensure your page will still render is to check that rowInfo and rowInfo.row exist before accessing them:

getProps: (state, rowInfo) => {
  if (rowInfo && rowInfo.row) {
    return {
      style: { backgroundColor: rowInfo.row.percentage < 0 ? 'red' : null },
    };
  }
  return {};
},

[phares]

How do i use color code, e.g 'ff9800' instead of color name 'brown' ?

[harvitronix]

@phares backgroundColor: '#ff9800'

[bmcgary]

To help anyone else coming here from google, in my case the accessor field was a function so I was able to use the column parameter to grab the accessor and call it. So if I ever need to change the accessor in the future I won't have to remember to change the getProps as well, it will just all fall into place.

accessor: d => d[selectedSelectionField][selectedScoreField],
getProps: (state, rowInfo, column) => ({ style: {background: column.accessor(rowInfo.original) > 90 ? "green" : undefined} })

[gostavee]

It's not necessarily a fix, but a way to ensure your page will still render is to check that rowInfo and rowInfo.row exist before accessing them:

getProps: (state, rowInfo) => {
  if (rowInfo && rowInfo.row) {
    return {
      style: { backgroundColor: rowInfo.row.percentage < 0 ? 'red' : null },
    };
  }
  return {};
},

this one works

[Akshayaa19]

@blazergame when I use this, I am getting params as 'undefined' in getProps().
Could anybody help me to sort it out.
I using version "^7.0.0-rc.15".

[vtarelkin]

It seems like it is better to count all data before and outside of the cell and to pass counted param. I've tried to implement styling on dynamically counting but with no luck - it gives undefined

[tron180]

you can use cellStyle as a function:
cellStyle: (state, rowInfo) => { if (rowInfo && rowInfo.row) { return { style: { backgroundColor: rowInfo.row.percentage < 0 ? 'red' : null }, }; } return {}; }