How can I center the text in the headers for an AG-grid control?

Question

How can I center the text in the headers for an AG-grid control? I have tried using cellstyle and cellclass in the column definition but that did not work. Thank you

See, https://stackoverflow.com/questions/57933672/right-align-column-headers-in-aggrid for an answer that worked. — DancingDad, Nov 09 '20 at 16:50

score 41 · Accepted Answer · edited Aug 17 '23 at 14:57

41

I'm using React and I just added the following snippet to my Table component's .css

.ag-header-cell-label {
  justify-content: center;
}

I'm overriding the .css class class from ag-grid which I found via devtools inspection, and discovered it's using flexbox for display.

See example (not react but same concept): https://embed.plnkr.co/O3NI4WgHxkFiJCyacn0r/

edited Aug 17 '23 at 14:57

Audwin Oyong

2,247
3
15
32

answered Sep 29 '17 at 19:49

Alex Wachira

1,225
16
19

10

What If I want to center text of selected header? Any ideias? How can I get a class from a specific column header? – Bernardo Marques Jun 10 '20 at 15:01
Beautiful! Thx. – Kode Charlie Nov 08 '21 at 18:55

Maharramoff · Answer 2 · 2019-02-07T20:05:13.723

19

You may use this property:

cellStyle: {textAlign: 'center'}

edited Feb 07 '19 at 20:05

answered Dec 25 '18 at 18:59

Maharramoff

941
8
15

9

this does not affect the header. i tried `headerClass` and `headerCellClass` so far no luck.. – Sonic Soul May 18 '21 at 17:25
This is for cells, not headers – Light Yagami Dec 16 '22 at 11:42

Stefanos Chrs · Answer 3 · 2021-04-23T05:13:43.270

A more complete solution I've been using for a while now, is to create a column definition helper like this:

export const columnCentered = {
  headerClass: 'text-center',
  cellStyle: {
    textAlign: 'center',
    // Add the following if you are using .ag-header-cell-menu-button 
    // and column borders are set to none.
    // marginLeft: '-16px'
  }
}

then add the following to your style.scss

.ag-header-cell.text-center {
  .ag-header-cell-label {
    justify-content: center;
  }
}

finally you can easily use it like this:

columnDefs: [
  { field: 'normalCol' },
  { field: 'centeredColA' ...columnCentered },
  { field: 'centeredColB' ...columnCentered }
]

score 5 · Answer 4 · answered Oct 15 '19 at 12:32

5

Assign a class to the cell as below:

gridOptions = {
  ...
  columnDefs: [
    ...
        { headerName: "field1", field: "field1", cellClass: "grid-cell-centered"}
    ...
  ]
}

css file:

.grid-cell-centered {
  text-align: center;
}

answered Oct 15 '19 at 12:32

ZooZ

933
1
17
25

5

i have a feeling this will only center the content of the cell and not the header – LucasSeveryn Dec 06 '19 at 16:41

score 5 · Answer 5 · edited Jan 13 '20 at 11:29

5

If you want to align your text right, left or center in ag-grid. Then use this:-

cellStyle: { textAlign: 'right' }
cellStyle: { textAlign: 'left' } 
cellStyle: { textAlign: 'center' }

edited Jan 13 '20 at 11:29

MEDZ

2,227
2
14
18

answered Jan 13 '20 at 10:38

akash mishra

113
1
1

12

This just aligns the cell text but not the header text – GavinBelson Feb 13 '20 at 17:26

score 5 · Answer 6 · answered Aug 05 '20 at 15:20

5

To use a custom class, add headerClass: "text-center" to the column definition and css as follows:

text-center * {
    justifyContent: center
}

answered Aug 05 '20 at 15:20

James

1,720
5
29
50

1

Just a note,its justify-content: center – MHOOS Sep 30 '20 at 15:37

score 2 · Answer 7 · answered May 28 '19 at 21:34

2

For (independent) customization of each header, you can make a custom header component: https://www.ag-grid.com/javascript-grid-header-rendering/

answered May 28 '19 at 21:34

Alex P.

1,140
13
27

score 2 · Answer 8 · answered Jul 09 '20 at 09:37

2

I'm using Angular 8 and AG-Grid is nested deep in some other component.

I had to do this in order to make it work.

.ag-header-group-cell-label {
      justify-content: center !important;
}

And, this strictly needs to be under styles.scss file and not in the component scss file. Or else, it will not work.

Hope this helps someone.

answered Jul 09 '20 at 09:37

Pramesh Bajracharya

2,153
3
28
54

1

in component scss file: :host ::ng-deep .ag-header-cell-label { justify-content: center !important; } – Slava Oct 30 '20 at 17:01
1

::ng-deep is being deprecated, just set component's ViewEncapsulation.None and your style works. – tsvedas Apr 28 '21 at 10:12

score 2 · Answer 9 · answered Apr 25 '22 at 03:13

My CSS:

/*HEADER STYLE*/
        .ag-theme-alpine .ag-header-cell {
            padding-left: 10px;
            padding-right: 10px;
        }
        
        .ag-right-header .ag-header-cell-label {
             flex-direction: row-reverse;
        }
    
        .ag-center-header .ag-header-cell-label {
            justify-content: center;
        }

        .ag-left-header .ag-header-cell-label {
            flex-direction: row;
        }

        .ag-center-cell {
            text-align: center;
        }

        .ag-right-cell {
            text-align: right;
        }

        .ag-left-cell {
            text-align: left;
        }

And use inside columnDefs:

{
                headerName: 'header_name',
                field: 'header_field',
                headerClass: "ag-center-header",
                cellClass: "ag-center-cell"
            }

score 1 · Answer 10 · answered Oct 14 '19 at 12:36

1

It should be:

.ag-header-cell-label {
  text-align: center;
}

answered Oct 14 '19 at 12:36

PHAM Cong Cuong

41
3

score 1 · Answer 11 · edited Mar 17 '22 at 10:30

1

you can do this by overriding the css like:-

    ::ng-deep .ag-header-group-cell-label {
      justify-content: center !important;
    }
    
    ::ng-deep .ag-header-cell-label {
      justify-content: center !important;
    }

Thanks

edited Mar 17 '22 at 10:30

Dave

3,073
7
20
33

answered Mar 17 '22 at 06:10

Akash

11
1

score 0 · Answer 12 · answered Aug 09 '21 at 05:41

0

I'm using angular and I just want to center text in the grouped header so use this code to style.css

.ag-header-group-cell-label {
  justify-content: center;
}

answered Aug 09 '21 at 05:41

masoud khorshidi

16
2

Your answer has been included [here](https://stackoverflow.com/a/62811934/6670491) – HardcoreGamer Aug 09 '21 at 08:32

score 0 · Answer 13 · answered Mar 23 '22 at 06:00

0

columndef has a property. headerClass: '', you can add css to header

answered Mar 23 '22 at 06:00

zodiake

1
1

score 0 · Answer 14 · answered Dec 20 '22 at 20:55

0

:host ::ng-deep .my-center-header-class .ag-header-cell-text {
    width: 100%;
    text-align: center;
}

Set headerClass as 'my-center-header-class' in colDef

answered Dec 20 '22 at 20:55

Dinesh Khetarpal

363
3
5

How can I center the text in the headers for an AG-grid control?

14 Answers14

Linked