Right align column headers in AgGrid

C

4

7

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"

Cephalochordate answered 14/9, 2019 at 8:13 Comment(2)

a MVCE stackblitz would make it easier to help – Damson 14/9, 2019 at 8:25

@AkberIqbal Added stackblitz. – Cephalochordate 14/9, 2019 at 10:52

D

3

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

Damson answered 14/9, 2019 at 11:32 Comment(2)

Thanks, buddy. Simplest solution I've seen yet. This is a slight modification to the Stack blitz to restrict the right alignment to the numeric Price column only. stackblitz.com/edit/angular-ag-grid-angular-hzqdnw – Cephalochordate 14/9, 2019 at 13:15

@Cephalochordate ... thanks for the stackblitz link ... I was banging my head for 3 days was not able to align a couple of headers to left and right in combination. thanks a lot. God bless you. – Trackandfield 17/6, 2021 at 13:14

D

13

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

Divestiture answered 21/5, 2021 at 5:38 Comment(0)

D

3

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

Damson answered 14/9, 2019 at 11:32 Comment(2)

Thanks, buddy. Simplest solution I've seen yet. This is a slight modification to the Stack blitz to restrict the right alignment to the numeric Price column only. stackblitz.com/edit/angular-ag-grid-angular-hzqdnw – Cephalochordate 14/9, 2019 at 13:15

@Cephalochordate ... thanks for the stackblitz link ... I was banging my head for 3 days was not able to align a couple of headers to left and right in combination. thanks a lot. God bless you. – Trackandfield 17/6, 2021 at 13:14

D

1

working stackblitz fixed by defining template in headerComponentParams.

Danitadaniyal answered 14/9, 2019 at 11:29 Comment(1)

Thanks, the issue I have with this is that the sort/filtering no longer works out of the box and you have to implement in your custom template.Which seems like an overhead for a trivial ask. – Cephalochordate 14/9, 2019 at 13:7

T

0

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.

Trackandfield answered 17/6, 2021 at 13:17 Comment(0)

Recommended topics

Hot tags