如何动态对齐 ag-grid-angular header

Question

我在 angular 6 中有一个 ag-grid，并且动态附加了列和数据。现在我想动态对齐 header（parent 和 children，如果是 multi header）。像第一列 header 应该左对齐，其他列居中对齐。

我尝试设置 cellStyle 和我找到的其他一些选项，但 none 有效

我试着像这样实现它：

  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;
          }
        }
  }

请指导我如何使它正常工作...

Answer 1

假设您使用的是 Ag-Grid 的最新（如果不是最新版本之一），如果我们想对 header 进行任何自定义，我们必须创建自定义 cell header components ] 单元格。

我已经使用了现有 Ag-grid 的示例，并为您创建了一个 demo。（参考 app/custom-header.component.ts 自定义 header 模板）

我所做的是为它创建了一个单独的组件，并将 header 的模板设置如下，以使其垂直和水平对齐（我使用的是 CSS flexbox属性）

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

如何动态对齐 ag-grid-angular header

How to align ag-grid-angular header dynamically

angular

ag-grid-angular