Right Align Column Headers In Aggrid

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 how

Solution 1:

If 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" }

Solution 2:

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

Solution 3:

working stackblitz fixed by defining template in headerComponentParams.

Solution 4:

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.