CODEWITHSUNDEEP
cssag-gridag-grid-react
JustGo
JustGo

Reputation: 43

Apply multiple cellClass on ag-grid column

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.

Upvotes: 2

Views: 16441

Answers (2)

David
David

Reputation: 1

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

Upvotes: 0

randombits.dev
randombits.dev

Reputation: 1356

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

Upvotes: 3

Related Questions