AgGrid 中的右对齐列 headers

Question

我正在尝试 right-align AgGrid 中的列 header。我知道如何使用 IHeaderAngularComp 实现自定义 header 组件并提供我自己的模板，但是对于一些本应微不足道的事情来说，这似乎需要大量工作。

https://stackblitz.com/edit/angular-ag-grid-angular-ebvgjb

Align price column heading to right to match alignment with cell contents

我正在使用以下库。

"ag-grid-angular": "21.2.1"

"ag-grid-community": "21.2.1"

Answer 1

working stackblitz 通过在 headerComponentParams 中定义模板修复。

Answer 2

您需要对 css 文件进行这两项更改才能实现...因为悬停时会显示一个小汉堡菜单还有。

::ng-deep .ag-cell-label-container{flex-direction: row}
::ng-deep .ag-header-cell-label { flex-direction: row-reverse; }

分叉你的stackblitz with this change here

Answer 3

如果您希望所有列 header 右对齐：

defaultColDef: { headerClass: "ag-right-aligned-header"}

如果您希望单列 header 右对齐：

{ headerName: "name", field: "field", headerClass: "ag-right-aligned-header" }

Answer 4

如果您希望将一些数字列向右对齐，而其他列向左对齐，您可能需要查看@Imran 在正确答案的评论部分。