React style grid row on condition

Question

I'm using React Data Grid (https://devexpress.github.io/devextreme-reactive/react/grid/) to display data.
Everything works fine, but I would like to add custom styling (change background color) to a particular row if a value like 25 is between minNumberOfUsers and maxNumberOfUsers as example.
I have a value like 25 users for this customer.
Now I want to see what current tier this customer is in!
I want to do that by coloring its tr background.
minNumberOfUsers has as example 10 and maxNumberOfUsers has 15 in the first row!
minNumberOfUsers has as example 20 and maxNumberOfUsers has 30 in the second row!
In that case I want the second row in another color because 25 is between 20 and 30 in the second row!
This is what I have now:

<Grid
  rows={this.state.fields.priceplan.userPriceTiers || []}
  columns={[
    { name: "minNumberOfUsers", title: "minNumberOfUsers },
    { name: "maxNumberOfUsers", title: "maxNumberOfUsers" },
    { name: "price", title: "priceuser" },
]}>
<CurrencyTypeProvider for={["price"]} />
<NumberTypeProvider for={["minNumberOfUsers", "maxNumberOfUsers"]} />
<Table columnExtensions={[{ columnName: "minNumberOfUsers", width: 150 }, { columnName: "maxNumberOfUsers", width: 150 }]} />
<TableHeaderRow />
</Grid>

Does anyone know how to add custom classnames or styling to a tr when a value is between a value in the column grid?
I need this to show the current pricetier of users their in.

This is what I want to achieve:

The above tier is colored yellow because I have 25 users and 25 is between 1 and 50.

Answer 1

You can pass rowComponent prop in the <Table> element which accepts another React Component

const TableRow = (props) => (   
const valueToCheck = "25";
<Table.Row {...props}
    style={
      (valueToCheck>=props.row.minNumberOfUsers && valueToCheck<=props.row.minNumberOfUsers)?({backgroundColor: "yellow"}:({}))
    }   /> );

In this component, you can define custom styling for the rows in the style attribute.

You can read more about this in the row subheading of this url