How to change color of ag-grid cells for dynamically changing data

Question

I have a table that loads from dynamically changing data. It refreshes every 5 secs. I'm using ag-grid for it using this example: https://www.ag-grid.com/javascript-grid-sorting/index.php

Is it possible to change color of the cells whose values have changes, like suppose a cell value is 100 and it becomes (less than this i.e. <100) so make the cell red color, id it becomes greater, make it green color. I'm trying to do it using this example: https://www.ag-grid.com/javascript-grid-cell-styling/index.php

But I can't understand how to do this.

UPDATE: I'm doing it this way, but it's not changing the color:

var columnDefs = [
    {headerName: "Arr Px Slippage", field: "total_wt_arr_slp", width: 100, newValueHandler: compareValues},
    {headerName: "IVWAP Slippage", field: "total_wt_ivwap_slp", width: 100}


];

function compareValues(params) {
    if (params.oldValue > params.newValue){ 
    return {color: 'green', backgroundColor: 'black'};
    console.log(params.newValue);

    }
    if (params.oldValue < params.newValue){ 
    return {color: 'red', backgroundColor: 'black'};
    }
}

Answer 1

Actually I just got mine working. You need "cellClassRules" attribute on each column where you want to change the color. Something like:

{headerName: "header", field:"field",suppressMenu: true, volatile: true, suppressMovable: true, cellClassRules: {'bold-and-red': 'x>1'} }

Here 'x' in the rule is the value of the column. Also, you need to mark your column as voaltile: true.
For volatile fields to dynamically change, you need api.softRefreshView() while you are refreshing the data.
The css class 'bold-and-red'can be defined in your html file like: .bold-and-red { color: darkred; font-weight: bold; }