Настройка групп заголовков Ag-grid

Чтобы центрировать текст группы заголовков в ag-Grid, все, что вам нужно сделать, это использовать свойство CSS justify-content в классе .ag-header-group-cell-label.

Возможно, вам придется установить это в своем основном файле styles.scss (тот, который находится на том же уровне каталога, что и ваш index.html, package.json и т. д.).

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

Точно так же вы можете настроить цвет групп заголовков.

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

Вот демо для справки. Я внес изменения в файл styles.css.

Что касается настройки ваших собственных групп заголовков, вы должны сделать это, написав свой собственный компоненты группы заголовков.

Например, именно так вы должны определить свои columnDefs в своем компоненте, который содержит ag-grid, при этом группа заголовков называется «Личная», а пользовательский компонент называется customHeaderGroupComponent

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

Вы можете обратиться к остальной части демонстрации через здесь

Чтобы центрировать текст, вам нужно вручную настроить компонент в файле 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.

Надеюсь это поможет!

Мне нужно было сделать то же самое, и я обнаружил, что другие ответы не полностью отвечают на вопрос для меня. В документации в основном говорится об использовании компонента для рендеринга, но это не сработало для меня, и я обнаружил, что применение некоторых простых стилей является излишним. Вы должны определить стили CSS для ag-header-group-cell-with-group — это основной ключ. В противном случае стили не будут отображаться в вашем пользовательском интерфейсе, даже если вы укажете headerClass в определениях столбцов. Вот как это сделать в 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: [...]
}