Cell background color in v7

[tsmith123]

Has the way in which setting a cell background color changed since v7?

I can find examples for v6 that use getProps but this doesn't work on v7. Am I missing something?

This is an example I found:

getProps: (state, rowInfo) => ({
  style: {
    backgroundColor: (rowInfo.row.specific_column===1?'red':null)
  }
})

[tsmith123]

Can I assume this feature is no longer supported in v7?

[egertaia]

Would also like to know

[tannerlinsley]

Hey guys. It's very important that you remember and understand that v7 is a hook and therefore a headless library. This means that you are in control of your table component! You can build it however you'd like! If you want to add a getTrProp to it and use it to pass props to the cell, you can do that! The key is this: React Table is not able (and quite frankly is designed to be incapable of) doing this for you. It's just a hook. :)

[jaseeyas]

can i have an example code for the above mentioned scenario as I am new to React and need some way to get table data out to my parent component

[ghost]

This reply above +1

[07harish]

@tsmith123, @egertaia - Yes, You can style rows and cells:

Since it is headless UI library, We can style table however we want:

In your React table markup code, You basically have a Table row (tr) and Table data (td) html elements. You can style rows or cells there OR you can extend functionality of row.getRowProps or cell.getCellProps -> This is also called prop getter pattern

For example, Here I style the rows or cells:
Pass style prop to cell.getCellProps() & you can also add more props if required along with style:

                     cell.getCellProps({
                         style: {color : 'blue'}
                      })

Or

                    <div
                      className="tr"
                      {...row.getRowProps()}
                      style={{ ...row.getRowProps().style, ...getRowStyle(row) }}
                      >

In the above code, getRowStyle(row) is custom function that returns style for that particular row/ cell.

[mena234]

@07harish Thanks for your comment, but this is if I want to style all column or rows with the same style, what about if I want to style a specific column?