在 ag-grid 列上应用多个 cellClass

Question

我正在尝试在 ag-grid（社区版）单元格上应用多个单元格类。我想更改单元格背景并将单元格字体设置为等宽。我定义了两个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 属性（tomato background 和 等宽字体）的 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

Answer 2

看起来利用 cellClassRules 属性而不是 cellClass 属性允许您组合 columnType CSS 类。

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