CODEWITHSUNDEEP
javascriptcssangularag-gridag-grid-angular
Imran
Imran

Reputation: 425

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

Upvotes: 7

Views: 16800

Answers (4)

user4739287
user4739287

Reputation:

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.

Upvotes: 0

ADT
ADT

Reputation: 141

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

Upvotes: 14

Akber Iqbal
Akber Iqbal

Reputation: 15041

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

Upvotes: 3

Siddharth Pal
Siddharth Pal

Reputation: 1458

working stackblitz fixed by defining template in headerComponentParams.

Upvotes: 1

Related Questions