Применить несколько cellClass к столбцу ag-grid

Question

Я пытаюсь применить несколько классов ячеек к ячейке ag-grid ( Community Edition ). Я хочу изменить фон ячейки и установить моноширинный шрифт. Я определил два columnTypes : tomatoBackground и monospaceFont . Затем я установил свойство «тип» столбца таблицы, указав 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 код:

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

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

К сожалению, только последний cellClass фактически применяется к столбцу "Возраст" ( в данном случае monospaceFont ). Создание одного CSS класса, который имеет оба свойства CSS ( томатный фон и моноширинный шрифт ), для меня не вариант.

Может кто-нибудь помочь решать проблему? Это вообще возможно? Пример будет высоко оценен.

Answer 1

Когда вы указываете более 1 типа, ag-grid переопределяет свойства, а не объединяет их вместе. Поэтому вы можете указать массив в свойстве cellClass непосредственно в столбце.

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

См. Следующую документацию по cellClass: https://www.ag-grid.com/javascript-grid-cell-styles/#cell -class