Conditional Formatting for Cells in AG Grid

This post from Shuheb Ahmed shows how to conditionally format cells in AG Grid. This feature is especially useful when you want to make different cells stand out so your users can quickly identify them for further processing. We'll look at how to implement the most frequent conditional formatting scenarios for cells.

Note: We have a separate blogpost about conditional formatting on rows - see it here.

Contents

• Cell Conditional Formatting in Action
• JavaScript Example of Conditional Cell Formatting
• Setting cell style based on cell value
• Changing cell style after cell value update
• Displaying different content in cells based on a condition

Cell Conditional Formatting in Action

We have illustrated these cell conditional formatting scenarios in a live sample in JavaScript - see it in action below:

JavaScript Example of Conditional Cell Formatting

See the live sample in JavaScript below.

Since this is a working example, try changing the values of the Math, English and Science results. The cell colour is based on the average of all three test results. We also added some validation to check that the values are between 0 and 100.

Click the link in the bottom right corner of the sample below to open it in StackBlitz. You’ll see the code we've used to configure the grid so that only some cells are editable, how we aggregate the results, how we apply the conditional formatting and how we show conditional icons in the result column. You can then change the code to set any additional cell formatting rules you'd like to add.

Let's now look at the most common cell conditional formatting scenarios and how to implement them in AG Grid.

Setting cell style based on cell value

There are three ways of styling cells - by applying cellStyle, cellClass or cellClassRules, documented here. While all these approaches will work, we highly recommend using cellClassRules as it requires the least amount of code and the grid manages adding and removing the applied styles for you, as documented here.

In our example, we want to conditionally format cells for Math, English and Science based on whether the cell value is greater than or equal to 60 (pass) or less than 60 (fail). We are defining these conditions and then applying them to multiple columns as shown in the code below:

// index.js

const cellClassRules = {
  "cell-pass": params => params.value >= 60,
  "cell-fail": params => params.value < 60
};

var gridOptions = {
  columnDefs: [
    {
      cellClassRules: cellClassRules,
      field: "math",
    },
    {
      cellClassRules: cellClassRules,
      field: "english",
    },
    {
      cellClassRules: cellClassRules,
      field: "science",
    },
};

As shown by the above snippet, we are applying the CSS classes cell-pass and cell-fail based on the cell value. These CSS classes are defined as shown below:

/* style.css */

.cell-fail {
  text-align: center;
  font-weight: bold;
  background-color: #f44336;
}

.cell-pass {
  text-align: center;
  font-weight: bold;
  background-color: #4caf50;
}

Simple as that - now all our cells are coloured based on their cell value:

Changing cell style after cell value update

When you update a cell value, the cellClassRules are refreshed automatically and the correct CSS classes are applied according to the styling conditions set. This means you don't need to write any extra code to support style updates when grid values are updated.

See this in action in the GIF below where we are performing two actions:

• Update the 'Michael Phelps' row with English=1, causing the cell background to change to red
• Update the 'Aleksey Nemov' row with Math=100 via a button click, causing the cell background to change to green

Displaying different content in cells based on a condition

Sometimes you want to display different content in a cell based on a value in the row. You can of course parameterise the cell renderer for the column to do that, but you can go even further - you can provide entirely different cell renderers in the same column based on a condition, as we'll show below.

Take a look at the result column in the GIF below - rows that have a result greater than 60 display a check mark icon, rows that have a result less than 60 display a cross mark icon:

Cell Renderers changing when result value changes

To pass different cell renderers in the same column, you simply need to configure the column definition property cellRendererSelector to a function that selects the renderer based on the row data as shown in the code below:

// index.js 

var gridOptions = {
  columnDefs: [
    // [...]
    {
      field: "result",
      cellRendererSelector: params => {
        const passDetails = {
          component: "passCellRenderer"
        };

        const failDetails = {
          component: "failCellRenderer"
        };

        if (params.value >= 60) {
          return passDetails;
        }

        if (params.value < 60 && params.value > 0) {
          return failDetails;
        }

        return null;
      }
    }
  ],
};

Using this approach you can implement any appearance or styling in based on a condition.

What's next?

We hope that you find this article useful to implement conditional formatting for cells in AG Grid. Please use the samples in the blogpost and modify them as you see fit.

For more information on how to style cells please see the cell styling documentation, as well as the cellClassRules documentation section with a live example using cellClassRules.

If you would like to try out ag-Grid check out our getting started guides (JS / React / Angular / Vue)

Happy coding!