CODEWITHSUNDEEP
javascriptag-grid
TDo
TDo

Reputation: 744

AgGrid: multiline header, each line has different style

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.

Upvotes: 0

Views: 1555

Answers (1)

Alan Richardson
Alan Richardson

Reputation: 191

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>'
        },
}

Upvotes: 1

Related Questions