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

0
votes

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.

enter image description here

1
angular8ag-gridag-grid-angular
use ng-if in td tag - Iman Javadi
I do not have access to td as this is an ag-grid feature ! the table, columns and data will be generated by the Ag Grid component. - Nithin
Use the Cell Style feature from ag-grid. - ViqMontana
Hi, Thanks for the update. I checked CellStyle but they are applying colors based on some values. I have dynamic values like Test1, Test2 , Test3 etc. I should be able to apply the color based on these values dynamically without hardcoding. - Nithin
@Nithin you can specify conditions in Cell Style based on params.value to color that cell else you can use Row Style to color the complete row - sandeep joshi

1 Answers

1
votes

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 '';
   }
}