Row Class Rules

Right now, if we click that "Update Values" section, you can see that the rows start to accumulate that dark red color as the values change. This is because the getRowClass function won't remove classes, even if we try to work around it. Row class rules can fix this and let us dynamically style rows when data changes.

Let's start by adding a rowClassRules property to our state that has the class as the key and a function that returns a boolean as the value:

// App.js state
rowClassRules: {
  "ag-green": function (params) {
    return params.data.amount > 700;
  },
  "ag-amber": function (params) {
    return params.data.amount > 100 && params.data.amount <= 200;
  },
  "ag-red": function (params) {
    return params.data.amount <= 100;
  },
},

We can then add that piece of state as a prop to the AgGridReact component:

// App.js AgGridReact component props
rowClassRules={this.state.rowClassRules}

One really cool thing about row class rules is that you can also provide shorthands of the functions using an expression:

rowClassRules: {
  "ag-green": "data.amount > 700",
  "ag-amber": "data.amount > 100 && data.amount <= 200",
  "ag-red": "data.amount <= 100",
},

Pretty cool, huh? Check out the row class rules docs to learn more about what's available to you in that shorthand syntax.