Как выровнять ag-grid-angular header динамически - PullRequest
Новая
       3

Как выровнять ag-grid-angular header динамически

1 голос
/ 01 апреля 2019

У меня есть ag-grid в angular 6, и к ней динамически прикреплены столбцы и данные. Теперь я хочу, чтобы динамически выровнять заголовок для (как родительского, так и дочернего в случае нескольких заголовков). Как и первый столбец, заголовок должен быть выровнен по левому краю, а остальные - по центру.

Я пытался установить cellStyle и некоторые другие параметры, которые я нашел, но ни один из них не работал

Я пытался реализовать это как: 

  let headerItem = {
    headerName: name,
    children: [
      {
        headerName: name,
        field: 'col' + i + '.value',
        hide: isHidden,
        pinned: pinned,
        cellStyle: function (params) {
          try {
            return {text-align : 'center'};
          } catch (e) {
            return null;
          }
        }
      }
    ],
    cellStyle: function (params) {
          try {
            return {text-align : 'center'};
          } catch (e) {
            return null;
          }
        }
  }

Пожалуйста, руководство, как я могу заставить это работать ...

1 Ответ

2 голосов
/ 01 апреля 2019

Если вы используете последние (если не одну из последних) версий Ag-Grid, мы должны создать пользовательские компоненты заголовка ячейки , если мы хотим внести какие-либо изменения в ячейки заголовка.

Я использовал образец существующей Ag-сетки и создал для вас demo . (см. app / custom-header.component.ts для пользовательского шаблона заголовка)

Что я сделал, так это то, что я создал для него отдельный компонент и установил шаблон для заголовка следующим образом, чтобы выровнять его по вертикали и горизонтали (для этого я использую свойства flexbox CSS) 

<div style="display:flex;justify-content:center;align-items:center;">
  {{params.displayName}}
</div>
...