I have spent the day trying to figure out how to do this and now come here to potentially find someone who has struggled with this problem as I have.

I have an ag-grid table that has row data with details. Lets simplify these to:

export interface ConfigDto{
   name?: String;
   keys?: KeyObject[];
}

export interface KeyObject{
   key:String;
   value:String;
}

this KeyObject[] is a list of values with the same datatype as a list that is fetched from the backend once one of the rows is selected ( triggered by the (selectionChanged) method in the component)

Depending on the list of KeyObject I receive from the backend, I would like to color the detail row a color.

So for instance, if the KeyObject of the detail row is contained in the list from the backend, the row should be green.

this isnt feasible to do on table init, as the values arent ( and shouldnt be) fetched from the backend yet, So i need a way to dynamically allocate a style post table load.

Any help would be appreciated.

I have spent the day trying to figure out how to do this and now come here to potentially find someone who has struggled with this problem as I have.

I have an ag-grid table that has row data with details. Lets simplify these to:

export interface ConfigDto{
   name?: String;
   keys?: KeyObject[];
}

export interface KeyObject{
   key:String;
   value:String;
}

this KeyObject[] is a list of values with the same datatype as a list that is fetched from the backend once one of the rows is selected ( triggered by the (selectionChanged) method in the component)

Depending on the list of KeyObject I receive from the backend, I would like to color the detail row a color.

So for instance, if the KeyObject of the detail row is contained in the list from the backend, the row should be green.

this isnt feasible to do on table init, as the values arent ( and shouldnt be) fetched from the backend yet, So i need a way to dynamically allocate a style post table load.

Any help would be appreciated.

• ag-grid
• ag-grid-angular

1 Answer 1

You can use either getRowStyle:

    getRowStyle: (params) => {
      if (params.data.status === 'active') {
        return { backgroundColor: '#e0f7e6' }; // Light green
      } else if (params.data.status === 'inactive') {
        return { backgroundColor: '#fce5dc' }; // Light red
      }
    }

Or use getRowClass:

    getRowClass: (params) => {
      if (params.data.isImportant) {
        return 'ag-row-highlight';
      }
    }

They will style based on the data inside the row.