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

Answer 2

Looks like leveraging the cellClassRules property instead of the cellClass property allows you to combine columnType CSS classes.

columnTypes: {
    tomatoBackground: {
        cellClassRules: {
            "ag-cell--tomato-background": (params) => {
                return true;
            }
        }
    },
    monospaceFont: {
        cellClassRules: {
            "ag-cell--monospace-font": (params) => {
                return true;
            }
        }
    }
}