AG-Grid React : Conditional Formatting.

Conditional Formatting of rows based on cell value.

Suppose we want to show different background color for different rows based on cell value.

In the example, above we are setting background color of rows based on the make of the car. If it’s porsche the background will be sandybrown, if it’s ford it will be lightcoral and for toyota — greenyellow.

We are using rowClassRules for conditional formatting here. All we have to do is set the rules in rowClassRules and provide the rowClassRules as a parameter to AGGridReact. For example, porsche css class will be applied when the params.data.make is equal to ‘Porsche’.

// Setting row style based on cell value
    const rowClassRules = {
        'porsche': function(params) { return params.data?.make === 'Porsche'; },
        'ford': function(params) { return params.data?.make === 'Ford'; },
        'toyota': function(params) { return params.data?.make === 'Toyota'; }
    };

Thank you.