I am trying to display my header name in a new line, but i am unable to do it.
Version of ag-grid-vue: 6.12.0
Here is what i tried but it did not work out:
defaultColDef: {
sortable: true,
editable: true,
resizable: true,
suppressMenu: true
},
columnDefs: [
{
headerName: 'Average low ', // This value is displayed in a single line
field: 'average_low',
width: 200,
},
{
headerName: 'Average high ', // Even this value is displayed in a single line
field: 'average_high',
width: 200,
},
...
}
I tried something like this to display the headerName in new line:
{
headerName: 'Avg. \n low ', // This value is displayed in a single line
field: 'average_low',
width: 200,
},
{
headerName: 'Avg. </br> high ', // Even this value is displayed in a single line
field: 'average_high',
width: 200,
},
I want to display something like this:
Please tell me how i can do this. Here is the officially documentation:
https://www.ag-grid.com/documentation/vue/component-header/
and here is the plunker which shows the example and can be used to workout: