Настройка групп заголовков Ag-сетки - PullRequest
Новая
       183

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

0 голосов
/ 08 апреля 2019

Мне нужно настроить группы заголовков в Ag-сетке (в Angular): 1) сделать текст в них центрированным (по умолчанию он выровнен по левому краю);2) сделать фон каждой группы заголовков определенного цвета

Как это можно сделать?

Я пытался сделать это в SCSS для этого класса, но ничего не изменилось в представлении, даже когда я переименовалподайте его из SCSS в CSS.

Используя Angular6, Ag-grid v.20, SCSS.

Пожалуйста, помогите!

TIA, Oleg

1 Ответ

0 голосов
/ 08 апреля 2019

Чтобы центрировать текст группы заголовков в ag-Grid, все, что вам нужно сделать, это использовать свойство justify-content CSS в классе .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, при этом группа заголовков называется «Personal», а пользовательский компонент называется customHeaderGroupComponent

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

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

...