I am trying to make the headers of my AgGrid table have 2 lines: the first line is the name, the 2nd line is the unit. I want the 2nd line's font size to be smaller than the 1st one.
I've tried to search for this but could not find the answer. I found this blog about styling the header and followed this answer to make my headers be in 2 lines. But none of them shows how to show 2-line headers and style each line independently. Appreciate any help.
I did this in my Markdown Editor using a Custom Header and having each line as as separate div.
The code for my custom header is here: https://github.com/eviltester/grid-table-editor/blob/master/customHeader.js
The basic HTML for the header was:
this.eGui.innerHTML = `
<div class="customHeaderTop">
<div class="customFilterMenuButton">
<i class="ag-icon ag-icon-filter"></i>
</div>
<div class="customHeaderLabel">${this.agParams.displayName}</div>
</div>
<div class="headerbuttons">
<span title="add left">[<+]</span>
<span title="rename">[~]</span>
<span title="delete">[x]</span>
<span title="duplicate">[+=]</span>
<span title="add right">[+>]</span>
</div>
`;
Custom Header Components are described here:
https://www.ag-grid.com/javascript-data-grid/component-header/
It is also possible to add a header template if rendering requirements are simple.
This is covered in the AG Grid Blog post https://blog.ag-grid.com/adding-hyperlinks-to-the-grid/
{
minWidth: 150,
field: 'athlete',
headerComponentParams: {
template:
'<div class="ag-cell-label-container" role="presentation">' +
' <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button"></span>' +
' <div ref="eLabel" class="ag-header-cell-label" role="presentation">' +
' <span ref="eSortOrder" class="ag-header-icon ag-sort-order" ></span>' +
' <span ref="eSortAsc" class="ag-header-icon ag-sort-ascending-icon" ></span>' +
' <span ref="eSortDesc" class="ag-header-icon ag-sort-descending-icon" ></span>' +
' <span ref="eSortNone" class="ag-header-icon ag-sort-none-icon" ></span>' +
' <a href="https://ag-grid.com" target="_blank"> <span ref="eText" class="ag-header-cell-text" role="columnheader"></span></a>' +
' <span ref="eFilter" class="ag-header-icon ag-filter-icon"></span>' +
' </div>' +
'</div>'
},
}