How can I add color to the rows based on the group of column values using Ag Grid in Angular?

Question

I have a requirement to add colors to the rows based on group of column values as shown below in the screenshot using AG Grid in Angular. I do not want to use row group feature here. I want to add a color for the value Test1 and different color for value Test2. The values can be dynamic. How can I achieve it?

I am using Ag grid Version 22.

Answer 1

If I understood correctly then you want to color the row based on the value present in column2 of your grid. For that you can do something like:

gridOptions.rowClassRules: {
    'green': 'data.Column2 == "Test1"',
    'amber': 'data.Column2 == "Test2"',
    'red': 'data.Column2 == "Test3"'
}

gridOptions.getRowClass = getRowClass;
}

function getRowClass(params){
  switch(params.data.Column2){
    case 'Test1':
    return 'green1';
    case 'Test2':
    return 'green2';
    case 'Test3':
    return 'green3';
    case 'Test4':
    return 'red';
    ..
    ..
    default:
    return '';
   }
}