自定义 Ag-grid header 个群组

Question

我需要在 Ag-grid 中自定义 header 个组（在 Angular 中）： 1) 使其中的文本居中（默认左对齐）； 2) 为每个 header 组制作特定颜色的背景

如何做到？

我试图在 SCSS 中为那个 class 做那个，但是视图上没有任何改变，即使我将文件从 SCSS 重命名为 CSS.

使用 Angular6，Ag-grid v.20，SCSS。

请帮忙！

TIA，奥列格

Answer 1

为了使 header 组文本在 ag-Grid 中居中，您需要做的就是使用 justify-content CSS 属性 .ag-header-group-cell-label class.

您可能需要在您的主 styles.scss（与您的 index.html、package.json 等处于同一目录级别的主 styles.scss 上进行设置

.ag-header-group-cell-label {
  justify-content: center;
}

同样，您可以通过此方法自定义 header 组的颜色。

.ag-header-group-cell-with-group {
    background-color: blue;
}

这里有一个demo供大家参考。我已经对 styles.css 文件进行了更改。

至于自定义您自己的 header 组，您应该通过编写自己的自定义 header group components 来实现。

例如，您应该如何在包含 ag-grid 的组件上定义 columnDefs，其中 header 组称为 "Personal"，自定义组件称为customHeaderGroupComponent

this.columnDefs = [
  {
    headerName: "Personal",
    headerGroupComponent: "customHeaderGroupComponent",
    children: [
      {
        headerName: "Athlete",
        field: "athlete"
      },
      {
        headerName: "Age",
        field: "age"
      }]
  },
]

您可以在 here

上参考演示的其余部分

Answer 2

要使文本居中，您需要在 CSS 文件中手动自定义组件，如下所示：

    ::ng-deep .ag-header-cell-label {
      display: flex;
      justify-content:center;

      ::ng-deep .ag-header-cell-text {
        display:flex;
        align-items:center;
      }
    }

对于您的背景颜色，您可以执行与上述类似的操作，只需使用 ::ng-deep 选择您要修改的 class。

希望对您有所帮助！

Answer 3

我需要做同样的事情，但我发现其他答案并没有完全回答我的问题。该文档主要讨论使用组件进行渲染，但这对我不起作用，我发现它对于应用一些简单的样式来说太过分了。您必须为 ag-header-group-cell-with-group 定义 CSS 样式 - 这是主键。否则，即使您在列定义中指定了 headerClass，样式也不会显示在您的 UI 上。这是 CSS 中的操作方法：

::ng-deep .ag-header-group-cell-with-group {
    .ag-header-group-cell-label {
        justify-content: center;
    }
}

::ng-deep .ag-header-group-cell-with-group.blueFill {
    background-color: blue;
}

::ng-deep .ag-header-group-cell-with-group.redFill {
    background-color: red;
}

在您的列定义中应用如下样式：

{
    headerName: 'Parent Group A',
    headerClass: 'blueFill',
    children: [...]
},
{
    headerName: 'Parent Group B',
    headerClass: 'redFill',
    children: [...]
}

自定义 Ag-grid header 个群组

Customizing Ag-grid header groups

ag-grid

angular

ag-grid-angular