Apply multiple cellClass on ag-grid column

Question

I'm trying to apply multiple cell classes on ag-grid (community edition) cell. I want to change cell background and set cell font to monospace. I have defined two columnTypes: tomatoBackground and monospaceFont. Next, I set table column "type" property providing both columnTypes.

columnDefs: [
    {
        headerName: "Athlete",
        field: "athlete"
    },
    {
        headerName: "Sport",
        field: "sport"
    },
    {
        headerName: "Age",
        field: "age",
        type: ["tomatoBackground", "monospaceFont"]
    }
]

columnTypes: {
    tomatoBackground: {
        cellClass: "ag-cell--tomato-background"
    },
    monospaceFont: {
        cellClass: "ag-cell--monospace-font"
    }
}

CSS code:

.ag-cell {
   &--tomato-background {
      background-color: tomato;
   }

   &--monospace-font {
      font-family: monospace, 'Roboto', sans-serif;
   }
}

Unfortunatly, only the last one cellClass is actually applied on "Age" column (in this case it is monospaceFont). Creating a single CSS class that has both CSS properties (tomato background and monospace font) is not an option for me.

Could anyone help to solve the problem? Is it even possible? An example would be highly appreciated.

Answer 1

When you specify more than 1 type, ag-grid will override the properties, not combine them together. So what you could do is specify an array in the cellClass property directly on the column.

{
    headerName: "Age",
    field: "age",
    cellClass: ["ag-cell--tomato-background", "ag-cell--monospace-font"]
}

See the following documentation on cellClass: https://www.ag-grid.com/javascript-grid-cell-styles/#cell-class