I am trying to right-align the column headers in the AgGrid. I know how to do this implementing a custom header component using IHeaderAngularComp and supplying my own template however that seems like a lot of work for something that should be trivial.
Align price column heading to right to match alignment with cell contents
I am using the following libraries.
"ag-grid-angular": "21.2.1"
"ag-grid-community": "21.2.1"
I am trying to right-align the column headers in the AgGrid. I know how to do this implementing a custom header component using IHeaderAngularComp and supplying my own template however that seems like a lot of work for something that should be trivial.
https://stackblitz.com/edit/angular-ag-grid-angular-ebvgjb
Align price column heading to right to match alignment with cell contents
I am using the following libraries.
"ag-grid-angular": "21.2.1"
"ag-grid-community": "21.2.1"
Share Improve this question edited Sep 8, 2021 at 21:29 Akber Iqbal 15k12 gold badges53 silver badges75 bronze badges asked Sep 14, 2019 at 8:13 ImranImran 4152 gold badges5 silver badges14 bronze badges 2- a MVCE stackblitz would make it easier to help – Akber Iqbal Commented Sep 14, 2019 at 8:25
- @AkberIqbal Added stackblitz. – Imran Commented Sep 14, 2019 at 10:52
4 Answers
Reset to default 14If you want all column headers to align right:
defaultColDef: { headerClass: "ag-right-aligned-header"}
If you want a single column header to align right:
{ headerName: "name", field: "field", headerClass: "ag-right-aligned-header" }
You would need to make these 2 changes to the css file to make it happen... since there is a little burger menu which gets visible on hover also.
::ng-deep .ag-cell-label-container{flex-direction: row}
::ng-deep .ag-header-cell-label { flex-direction: row-reverse; }
Forked your stackblitz with this change here
working stackblitz fixed by defining template in headerComponentParams.
if you're looking to align some of the numeric columns to the right and other columns to left, you might want to check this link (https://stackblitz.com/edit/angular-ag-grid-angular-hzqdnw ) posted by @Imran in the comment section of the correct answer.