how to wordwrap a header in ag-grid

ag-grid
pete r picture pete r · Nov 24, 2015 · Viewed 25.6k times · Source

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

Answer

Stian Sandve picture Stian Sandve · Dec 17, 2015

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

Related questions

How to upgrade/refresh the ag-grid after row delete?

I have an ag grid where i am trying to delete a row...I am able to remove the row from data source using "splice" technique,after that i want to refresh the table.But it is showing error.This …

Read More
Angular Grid ag-grid columnDefs Dynamically change

I have a problem about columnDefs change dynamically. Here is my gridOptions: $scope.gridOptions = { columnDefs: [], enableFilter: true, rowData: null, rowSelection: 'multiple', rowDeselection: true }; And when I retrieve data from server: $scope.customColumns = []; $http.post('/Home/GetProducts', { tableName: 'TABLE_PRODUCT' }).…

Read More
How to get the data of selected row in ag grid in angular2?

I have setup ag-grid in angular2 which works fine but i am not able to get the value of selected row...There are no errors in my console window...This is how i am initialising the grid... import {Component} from …

Read More