0

I have a situation where I have to change background color of rows depending upon row props. I am currently doing this:

const getTrProps = (state, rowInfo, instance) => {
        if (rowInfo) {
            return {
                style: {
                    'background-color': rowInfo.original.customercomplaints.order_ref === currentOrderId ? '' : 'yellow',
                }
            }
        }
        return {};
    }

In react-table, it is like this:

<ReactTableFixedColumns className="-striped"
      columns={customerComplaintsColumns}
      data={customerComplaintsData}
      daultPageSize={10}
      defaultFilterMethod={filterCaseInsensitive}
      getTrProps={getTrProps}
      />

If I inspect the element, I do get this:

<div class="rt-tr -even" role="row" style="background-color: yellow;">

but it doesn't apply on the row. How can I resolve this?

My react version is ^16.13.1 and react-table version is 6.8.6.

Saani
  • 791
  • 7
  • 28
  • 68

1 Answers1

0

First, you are wrong with assigning style. you might want to pass background-color as object style.

e.g.

        return {
            style: {
                'background': rowInfo.original.customercomplaints.order_ref === currentOrderId ? '' : 'yellow',
            }
        }

Also instead of passing empty string as default, you might want to pass 'white' or color you want as default.

I think that is the most reason, please let me know if it doesn't work.

Example link which is written by react-table maintainer https://codesandbox.io/s/k3q43jpl47

ArtDev
  • 498
  • 6
  • 16
  • https://stackoverflow.com/questions/49631293/react-table-how-to-change-the-background-color-of-a-row-if-it-is-clicked-selec Prob, you might want to check this answer, mostly same question, I guess – ArtDev Oct 16 '20 at 11:40