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

У меня есть 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;
          }
        }
  }

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


angular ag-grid-angular
person Vikas Nale    schedule 01.04.2019    source источник
comment
cellStyle применяется только к ячейкам, а не к заголовкам. Что вы имеете в виду под динамическим, нужно ли его изменять во время выполнения?   -  person Arikael    schedule 01.04.2019

Ответы (1)


arrow_upward
2
arrow_downward

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

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

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

<div style="display:flex;justify-content:center;align-items:center;">
  {{params.displayName}}
</div>
person wentjun    schedule 01.04.2019
comment
Это сработало как шарм ... большое спасибо. Я расширил ваше решение, чтобы оно работало и для заголовка группы. Вот он: stackblitz.com/edit/ - person Vikas Nale; 09.04.2019