Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to wordwrap a header in ag-grid

Tags:

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

like image 375
pete r Avatar asked Nov 24 '15 12:11

pete r


People also ask

How do I hide the header name on Ag grid?

Set the header height to zero.

How do you add a header row in Ag grid?

In your data rows: you have to enter in the first column the title you want for each row. Show activity on this post. Add this as your first colDef . It will render a index column that is unmovable.


1 Answers

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 
like image 90
Stian Sandve Avatar answered Sep 24 '22 04:09

Stian Sandve