React-table Individual Cell Style

I am using react-table and want to change the background color of specific cells based on their number inside. Ex. Cell > 1 = green, Cell < 1 = Red, and different shades in-b

Solution 1:

getTdProps is for the entire row. Use getProps in the column definition instead. For example:

<ReactTabledata={[
        { age:8 },
        { age:11 },
        { age:9 },
        { age:6 },
        { age:12 },]}columns={[
        {
            Header:'Age',
            accessor:'age',
            getProps:(state, rowInfo, column)=> {
                return {
                    style: {
                        background:rowInfo&&rowInfo.row.age>10?'red':null,
                    },
                };
            },
        }
    ]}/>

Solution 2:

If you're using v7 react-table, use getCellProps

<Tablecolumns={[
      {
        Header:"Age",
        accessor:"age"
      }
    ]}data={[{age:8}, { age:11 }, { age:9 }, { age:6 }, { age:12 }]}getCellProps={(cellInfo)=>({style: {
        backgroundColor:cellInfo.value>10?"red":null
      }
    })}/>

https://codesandbox.io/s/magical-yalow-g22yz?file=/src/App.js:2447-2459

Solution 3:

I was googling and trying to figure this one out for quite a while, and all I could find was explanations on how to do this with a ternary in the style tag giving an option of 2 colours for 1 value.. I guess because you can't use a switch if other javascript it CSS..

So if there is anyone else out there trying to style the cells of react-tables with any number of colours with any number of values in them, this is a work around I found. Now, hands up I am new to coding and this may be a lot more convoluted than it needs to be and there may be a better way, but I couldn't find one explained anywhere else. In fact I even found someone stating it can't be done with react-table v7 so i reverted to v6 as I found a code sandbox with this demonstrated. However that used the background-colour property for the cell which is not there any more in v7 meaning its not possible to do it that way at least, so I reverted to v6 of react-table but came back to try the below out on v7.

So, this is how i've managed it, please do let me know if there's a better way or if this works but theres a way to clean it up a bit!

1 in columns, make a key/value pair in each column you want to colour Cell: functionName

2 create a new file and put the function in there, create a function with a parameter of say 'cell' and export it, (it receives the cell object)

3 import it into columns file ,

4 now in the function file, make it return a html input tag like you would with a component returning the jsx, it basically is one...

5 in the input tag give it a class name and set it to className={cell.value}

6 give it a value too, set it value={cell.value}

7 now use CSS to remove input the field's border and make it fill the table's cell so it looks like a normal cell with colour

This will give you a table full of input fields, but you can't edit them as they're set to the cell.value that is hidden beneath them, and you can style it to make it look like normal cells with CSS, and you can set their classnames and target them for colour with css. I tried it with just returning divs but they hide your cell's values, maybe you could do that and play around with the z-index in css but i couldn't get that to work, CSS is not my friend usually.

If you want to be able to edit the table cells do this:

8 make the function a react component, just import useState at the top,

9 set a state variable called "something" in the component function

10 set its initial value to cell.value, now set className to this variable,

11 Now make an onChange listener in the input tag, create an arrow function in there with 'event' parameter and call 'setSomething' and set it equal to event.target.value.

12 set another state variable called say 'isNewEntry' and set it to false

13 in value property now use a ternary; {!isNewEntry ? cell.value : "something"} - i.e. if the cell has not been edited, set value to original value, if it has then ignore original and now set it to the new entry.

I think thats about it.. works for me. Like i say I may have tied myself in knots with the logic and there might be a way to make it less convoluted?

Function file / react component:

import { useState, useEffect } from'react'constInputCell = (cell) => {

const [colorClass, setColorClass] = useState(cell.value)
const [isNewCharacter, setIsNewCharacter] = useState(false)

    return (
            <inputclassName={colorClass}value={!isNewCharacter ? cell.value:colorClass}
              onChange={(event)=>{
                setIsNewCharacter(true)
                setColorClass(event.target.value)
                    }
              }}
            />
         )
       }

exportdefaultInputCell

const columns =[
{
    Header: "First Name",
    Footer: "First Name",
    accessor: "first_name",
    Cell: inputCell,
},
{
    Header: "Second Name",
    Footer: "Second Name",
    accessor: "second_name",
    Cell: inputCell,
}]