I am actually trying to create an ag-grid with a 2 Lines of text in Header.
For ex- i have 10 columns having header as 'Name', 'Address', 'DOB' and other details. For 'DOB' i want to display the date format just below 'DOB' in the header itself. so far, i have tried 'DOB
(mm-dd-yyyy)' and some css styles from how to wordwrap a header in ag-grid but nothing has worked for me.
is there any option to achieve this without creating custom header components?
Thanks!
Well,Here is the solution i got
Create one custom component like custom-header
@Component({
selector: 'app-custom-header',
template: `
<div>
<div class="customHeaderLabel">{{headerName}}<br>{{subHeaderName}}</div>
</div>
`
})
export class CustomHeader {
private params: any;
private headerName:string;
private subHeaderName:string;
agInit(params): void {
this.params = params;
this.headerName = params.displayName.split('-')[0];
this.subHeaderName = params.displayName.split('-')[1];
}
}
Use this custom component in main component where column defs are declared
And also in main component declare header name as date-(dd-mm-yyyy) (seperate by '-')
For those using ColDefs, try
private columnDefinitions: ColDef[] = [
{
...,
headerName: 'My ID',
headerComponentParams: {
template:
'<div class="ag-cell-label-container" role="presentation">' +
' <div ref="eLabel" class="ag-header-cell-text" role="presentation">' +
// the header HTML text
' My<br>ID' +
' </div>' +
'</div>'
}
...
}, ...
Well, I got the solution , i directly put the html in headername with inline style and it worked.