Ag-grid conditional formatting

Is it possible using the framework ag-grid in JS to apply a conditional background color formatting of a cell based on its value such as Excel conditional formatting (eg the second table formatting in this link is a great example of what I am trying to achieve).

Basically, cells containing the highest values are green and tend to be red as they lower, being yellow when they reach the median (the inverse is applied in above link)

As you see, it is not a simple CellClassRules as the cell color depends cell values across the table and not only a specific row or column.

I didn’t find such option on ag-grid documentation.

Answer

Write a function for the cellStyle and have this function look at each and every value in the table, determine it’s ranking, then have it return the relevant colour for the cell, i.e. the lower it is, return a more “reddish” colour, the higher it is, return a “greener” colour. Something like this:

function myCellStyleFunction(params) {
  const totalCellCount = params.api.getDisplayedRowCount() * columnsCount;
  let allValuesInTable = [];

  rowData.forEach((x) => {  
    const valuesForRow = Object.keys(x).map(function (k) {
      return x[k];
    });
    allValuesInTable = allValuesInTable.concat(valuesForRow);
  });
  
  const valuesForTableOrdered = allValuesInTable.sort(function (a, b) {
    return a - b;
  });
  
  const valueIndex = valuesForTableOrdered.indexOf(params.value);
  console.log(valueIndex)
  debugger;
  const bgColour = generateColor('#FF0000','#00FF00',totalCellCount,valueIndex)

  return { backgroundColor: '#' + bgColour };
}

And apply this cellStyle in defaultColDef so it is applied to every cell.

Demo.