Ag Grid headerClass 覆盖 numericColumn 类型

Question

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

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 类型的同时应用 header 样式？

堆栈闪电战：

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

Answer 1

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

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

Demo.

Ag Grid headerClass 覆盖 numericColumn 类型

Ag Grid headerClass overrides numericColumn type

ag-grid

ag-grid-angular