genetic-orange

Table Cell backgroundColor depending on a number value

Hello, How to set the color of a number (eventually the backgroundColor) in a column depending on his value? I'm search a lot but there are very poor documentation especially for the old version 7.

{ Header: 'Bank balance', accessor: 'balance', getCellProps: (cellInfo) => ({ style: { backgroundColor: cellInfo.value > 0 ? 'red' : 'green' } }) },

7 Replies

conscious-sapphire•3y ago

I think you can do something like

 {
  accessor: 'balance',
    id: 'balance',
    header: 'Bank balance',
    cell: info => <span style={{backgroundColor: info.getValue()>0?'red':'green'}}>info.getValue()<span>,
 },

 {
  accessor: 'balance',
    id: 'balance',
    header: 'Bank balance',
    cell: info => <span style={{backgroundColor: info.getValue()>0?'red':'green'}}>info.getValue()<span>,
 },

so structure would be something like this I imagine:

<table>
  ...
  <tr>
    <td>
      <span style="background-color: red">0</span>
    </td>
  </tr>
  <tr>
    <td>
      <span style="background-color: green">1</span>
    </td>
  </tr>
  ...
<table>

<table>
  ...
  <tr>
    <td>
      <span style="background-color: red">0</span>
    </td>
  </tr>
  <tr>
    <td>
      <span style="background-color: green">1</span>
    </td>
  </tr>
  ...
<table>

Hope that helps @Teo

genetic-orangeOP•3y ago

Thank you @Gludek ! I have a complicated code base and I look to manipulate that direct in existing cell css. Do you have experience with that? something like that:

getCellProps: (cellInfo) => ({
          style: {
            backgroundColor: cellInfo.value > 0 ? 'red' : 'green'
          }
        })
      },

conscious-sapphire•3y ago

{
        Header: 'Bank balance',
        accessor: 'balance',
    getCellProps: (cellInfo) => ({
          style: {
            backgroundColor: cellInfo.value > 0 ? 'red' : 'green'
          }
        })
      },

{
        Header: 'Bank balance',
        accessor: 'balance',
    getCellProps: (cellInfo) => ({
          style: {
            backgroundColor: cellInfo.value > 0 ? 'red' : 'green'
          }
        })
      },

Where did you get this getCellProps? ahh it's old markup

genetic-orangeOP•3y ago

I use "react-table": "^7.8.0"

conscious-sapphire•3y ago

yeah, I've not used previous versions since I started recently but I would assume this is correct I personally prefer to create inner div for styling though

conscious-sapphire•3y ago

https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/data-driven-classes-and-styles I've found this in v7 docs

CodeSandbox

TanStack/table: data-driven-classes-and-styles - CodeSandbox

TanStack/table: data-driven-classes-and-styles using namor, react, react-dom, react-scripts, react-table, styled-components

genetic-orangeOP•3y ago

@Gludek Thanks a lot! Somehow I oversaw this. I will try to get some information from this example

Gaming

Programming

Table Cell backgroundColor depending on a number value

Did you find this page helpful?