CODEWITHSUNDEEP
reactjsstylingreact-data-grid
Webdeveloper_Jelle
Webdeveloper_Jelle

Reputation: 2856

React style grid row on condition

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:

enter image description here

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

Upvotes: 2

Views: 5395

Answers (2)

Sahil Gupta
Sahil Gupta

Reputation: 461

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 enter image description here

enter image description here

Upvotes: 1

vishnu prasath
vishnu prasath

Reputation: 112

or you can wrap the grid in the div with your CSS className and then in your CSS do: .my-class-name .react-data-grid {}... and then you don´t have to use !important (it is better with LESS or SASS as you don´t have to type .some-class everytime). Here is similar issue enter link description here

<div className="custom-style">
     <Grid>
</div>

and in the css 

.custom-style.react-data-grid {--------style-------}

Upvotes: 0

Related Questions