Using ag-Grid with React: Styling

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 > 700;
  "ag-amber": function (params) {
    return > 100 && <= 200;
  "ag-red": function (params) {
    return <= 100;

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

// App.js AgGridReact component props

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.


I finished! On to the next chapter