在 ag-grid 列上应用多个 cellClass

Question

我正在尝试在 ag-grid（社区版）单元格上应用多个单元格 classes。我想更改单元格背景并将单元格字体设置为等宽。我定义了两个 columnTypes：tomatoBackground 和 monospaceFont。接下来，我设置 table 列 "type" 属性 提供 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 实际应用于 "Age" 列（在这种情况下它是 monospaceFont)。 创建一个同时具有 CSS 属性（tomato background 和 monospace font）的单个 CSS class 是我不适合。

谁能帮忙解决这个问题？有可能吗？将不胜感激。

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