how to wordwrap a header in ag-grid

问题

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

回答1:

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

回答2:

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.

回答3:

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

回答4:

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();
            }
        };

回答5:

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()

来源：https://stackoverflow.com/questions/33894190/how-to-wordwrap-a-header-in-ag-grid

标签

ag-grid