how to wordwrap a header in ag-grid

Question

Using ag-grid, is there a way to split a long header across 2 rows...

A break in the columnDefs headerName: 'Long<br />Header' gets me part way there (using dev tools I can see the text has the br), however one of the surrounding elements has a height of 25px; <div class="ag-header" style="height: 25px;"> which I think causes the second line of the header to not be displayed.

I wondered about using group headers as an interim to get the text split, but longer term (when I need to group) that won't be an option...

Pls help https://stackoverflow.com/questions/65018177/ag-grid-community-infinite-row-model-for-server-side-pagination-community-free/65040658#65040658 — NeverGiveUp161, Dec 03 '20 at 06:15

Stian Sandve · Answer 1 · 2015-12-17T12:02:03.633

19

Try to add the following to your CSS:

.ag-header-cell-label {
    text-overflow: clip;
    overflow: visible;
    white-space: normal;
}

and add this to your grid options:

headerHeight: 48

edited Dec 17 '15 at 12:02

answered Dec 17 '15 at 11:54

Stian Sandve

520
4
13

2

Looks like only the white-space: normal is needed – Tony BenBrahim Mar 01 '16 at 20:36
this worked for me but now I am getting some mis-aligned text due to the menu icon. the menu icon on the right bumps the top line to the left. this causes the two line header not to center on top of each other but be off to the left. Any advice on styling with that? – Jake Oct 17 '16 at 17:27
`overflow-wrap: break-word;` also helps if you have long single-word headers (e.g. if you are German). – JulienD Jan 10 '17 at 12:17
This option did not work for me with ag-grid@15.0.0. See my answer below for an alternate solution that works in this version. – Andrew Eisenberg Mar 25 '18 at 08:01
Use `white-space: pre` if you want to specify where the line breaks occur. – Waruyama Oct 16 '19 at 10:22
In addition to doing this, I needed to set my column widths to hard-coded numbers instead of calling autoSizeColumns() or sizeColumnsToFit(). – John Gilmer Jun 30 '20 at 23:47
Maybe you'll know how to answer this one as well: https://stackoverflow.com/questions/65518883/react-ag-grid-row-auto-height-doesnt-work – CodeMonkey Dec 31 '20 at 12:03

score 12 · Answer 2 · answered Mar 24 '18 at 13:37

12

Using ag-grid@15.0.0, only the following solution worked:

.ag-header-cell-label .ag-header-cell-text {
  white-space: normal !important;
}

This is one of the first times in my work with css that I have ever really needed to use !important.

answered Mar 24 '18 at 13:37

Andrew Eisenberg

28,387
9
92
148

2

Specify the theme class to be more specific, and you should avoid the need for !important. eg. `.ag-theme-material .ag-header-cell-label .ag-header-cell-text { height: auto; overflow-wrap: normal; white-space: normal; } ` Another way to be more specific is to apply your own class to the header within your column defs. So there's a couple of ways to avoid the use of !important. – Jason Schroder Dec 05 '18 at 02:17
above solution will help you to split header text. if I would suggest use text-overflow and overflow css property ****** .ag-header-cell-label .ag-header-cell-text { text-overflow: clip; overflow: visible; white-space: normal !important; } **** – Dinesh Gopal Chand Jun 15 '20 at 12:07

score 8 · Answer 3 · answered Mar 23 '18 at 13:24

8

For me, using the combination of angular@5.5.1 and ag-grid@13.3.1, the following worked:

::ng-deep .ag-header-cell-text {            
    text-overflow: clip !important;
    overflow: visible !important;
    white-space: normal !important;
}

::ng-deep is an Angular CSS combinator (directive). This is based on Stian's answer with the difference that in my case, instead of .ag-header-cell-label, it worked only with .ag-header-cell-text.

In the grid options object you must set the header height:

this.testGridOptions = <GridOptions>{
            onGridReady: () => {
                this.testGridOptions.api.setHeaderHeight(75);
                this.testGridOptions.api.sizeColumnsToFit();
            }
        };

answered Mar 23 '18 at 13:24

Alex P.

1,140
13
27

I'm using ag-grid@15.0.0 and this approach is not working for me. – Andrew Eisenberg Mar 24 '18 at 13:20
I think I figured out an answer. I will post my solution below. – Andrew Eisenberg Mar 24 '18 at 13:30
1

This worked for me (ag-grid@21.0.1) only if you put the css at the component level. – Kwexi Jun 12 '19 at 20:20
2

ng-deep is required if you are applying the style via an scss file in the component. – grasmi Nov 16 '19 at 10:50
1

This worked for me, even without the `!important` – SendETHToThisAddress Mar 31 '21 at 00:33

score 6 · Answer 4 · answered Sep 28 '18 at 16:45

For me, none of the above solutions worked. What did work for me was to set the headerHeight (in GridOptions) to your specified height and then add the following:

.ag-header-cell-text {
   overflow: visible;
   text-overflow: unset;
   white-space: normal;
}

In my case, I did not need to add anything to .ag-header-cell wrapper class.

I am using the following versions:

"ag-grid-angular": "18.1.0",
"ag-grid-enterprise": "18.1.1",

score 6 · Answer 5 · answered May 16 '20 at 11:51

6

put this in grid options

headerHeight: 50

in style.css

.ag-header-cell-label .ag-header-cell-text {
    white-space: normal !important;
 }

answered May 16 '20 at 11:51

Rkmr039

175
2
6

score 4 · Answer 6 · answered Oct 16 '19 at 10:07

If you need a line break at a certain position in your header, you can use white-space: pre to achieve this. Add this to the CSS (change the theme if you are using a different one):

.ag-theme-material .ag-header-cell-label .ag-header-cell-text {
  white-space: pre;
}

And then add \n characters to your header name accordingly. You will also have to make sure that there is sufficient height using gridApi.setHeaderHeight() and gridApi.setGroupHeaderHeight()

pre-line is also an option, in my case more appropriate – David Burson Aug 18 '20 at 04:24 — David Burson, Aug 18 '20 at 04:24

score 1 · Answer 7 · answered Jul 19 '22 at 14:29

From v28 of AG Grid this is now natively supported by setting the properties wrapHeaderText and autoHeaderHeight.

const gridOptions = {
  defaultColDef: {
    resizable: true,
    wrapHeaderText: true,
    autoHeaderHeight: true,
  },
};

You can play with these properties in this Plunker

score 0 · Answer 8 · answered Jul 22 '21 at 16:14

0

You can try following css:

.ag-header-group-text,
.marginright-xs {
  white-space: pre-wrap;
}

answered Jul 22 '21 at 16:14

Yuvraj Patil

7,944
5
56
56

Vigneshwaran Chandrasekaran · Answer 9 · 2022-05-10T18:46:00.887

0

.ag-header-cell-label {
   word-break: keep-all;
   word-wrap: break-word;
}

edited May 10 '22 at 18:46

answered May 10 '22 at 18:44

Vigneshwaran Chandrasekaran

2,967
1
24
19

2

While code-only answers might answer the question, you could significantly improve the quality of your answer by providing context for your code, a reason for why this code works, and some references to documentation for further reading. From [answer]: _"Brevity is acceptable, but fuller explanations are better."_ – Pranav Hosangadi May 10 '22 at 21:34

score 0 · Answer 10 · answered Jun 27 '22 at 07:36

Here's a great article from the AgGrid blog on the topic.

While all previous answers are simpler, they all imply having a fixed-height header. This article covers the implementation of the adaptive header - that is, making the header adjust its height based on the size of the wrapped text, even when resizing columns.

In summary, you should do the following:

Use a custom header template or component, and set white-space: normal on the header cell text element.
Implement a function that would calculate the required header height based on the maximum height of the wrapped text elements in all headers.
Implement a function that would set the required header height using the previous function and the grid API.
Hook the above function up with the table's callbacks: onFirstDataRendered and onColumnResized, to recalculate header height initially, and then every time any column is resized.

how to wordwrap a header in ag-grid

10 Answers10

Linked