Search code examples
javascriptpythoncssag-grid

ag-grid - alternate row group colors (after row span)

Here is my data structure:

enter image description here

The spanning in ag-grid works correctly for columns 1 and 2 (spanning code below). What I am trying to do is alternate colors based on column 2 (animal). So all rows for dog would be one color. All rows for cat would be another, etc. Does anyone know how I can achieve this? I have see examples online for alternating all row colors, but not for alternating entire row groups like the above. Below is my row spanning javascript code if it helps.

dagfuncs.rowSpanning1 = function (params) {

var lid = params.data ? params.data.sort1 : undefined;

if (lid === 1) {

    return 3;

}  else {

    return 1;

}

}

dagfuncs.rowSpanning2 = function (params) {

var id1 = params.data ? params.data.sort2 : undefined;

if (id1 === 1) {

    return params.data.sortx;

}  else {

    return 0;

}

}

Solution

  • This can be achieved by using custom row class based on the 'animal' value. https://www.ag-grid.com/javascript-data-grid/row-styles/#row-class

    You need to do something like this:

    getRowClass: params => {
        if (params.node.data.animal  === 'dog') {
            return 'dog-class';
        } else if (params.node.data.animal  === 'cat') {
            return 'cat-class';
        }
        // and so on
    }

    And then the class can have appropriate style definitions:

    .dog-class {background-color: goldenrod;}

.cat-class {background-color: coral;}