在AgGrid中将列标题右对齐

Question

我正在尝试在AgGrid中将列标题右对齐。我知道如何使用IHeaderAngularComp来实现自定义标头组件并提供自己的模板，但是对于一些琐碎的事情来说，这似乎是很多工作。

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

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

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

如果您希望单个列标题右对齐：

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

Answer 2

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

Answer 3

您需要对 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 4

如果您希望将某些数字列向右对齐而其他列向左对齐，您可能需要查看@Imran 在正确答案的评论部分中发布的此链接 (https://stackblitz.com/edit/angular-ag-grid-angular-hzqdnw) .