Ag Grid headerClass 覆盖 numericColumn 类型答案

【问题标题】：Ag Grid headerClass overrides numericColumn typeAg Grid headerClass 覆盖 numericColumn 类型
【发布时间】：2021-06-13 16:52:13
【问题描述】：

我正在尝试使用 headerClass:"ag-grid-total-header" 设置 AG Grid 标题样式，但它会覆盖 type: 'numericColumn' - 它显示标题单元格值左对齐。

columnDef：

{ headerName: 'Total', field: 'Total', width: 125, sortable: true, type: 'numericColumn', headerClass:"ag-grid-total-header"}

CSS：

.ag-grid-total-header {
  text-align:right; /* It does not work */
  background-color: red; /* This works */
}

有没有办法在保留 numericColumn 类型的同时应用标题样式？

堆栈闪电战：

https://stackblitz.com/edit/angular-ag-grid-angular-huk1fp?file=app/my-grid-application/my-grid-application.component.ts

编辑：

如果我添加headerComponentParams，它会起作用。但是，如果我添加headerComponentParams，则排序不起作用。

headerComponentParams : {
      template:
        '<div class="ag-cell-label-container" role="presentation">' +
        '<span ref="eText" class="ag-header-cell-text"  role="columnheader"></span>' +
        '</div>'
      }

【问题讨论】：

标签： ag-grid ag-grid-angular

【解决方案1】：

用于数字类型标头的标头类是ag-numeric-header。因此，将您的课程 ag-grid-total-header 和 ag-numeric-header 课程应用于您的专栏。将列定义更改为：

  {
    headerName: "Price",
    field: "price",
    type: "numericColumn",
    headerClass: ["my-header-class", 'ag-numeric-header']
  },

Demo.

【讨论】：