Question

我有一个角度为6的ag-grid，并动态附加了列和数据。现在我想动态地对齐标头（在多标头的情况下，父级和子级）。像第一列标题应该左对齐，其他标题应该居中对齐。

我尝试设置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;
          }
        }
  }

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

Answer 1

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

我使用了现有的Ag-grid示例，并为您创建了demo。（有关自定义标头模板，请参阅app / custom-header.component.ts）

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

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

如何动态对齐ag-grid-angular标题

1 个答案: