ag-grid custom header with html

Question

I am trying to use ag-grid to display the data. I want to have HTML tags inside the Header column, but that doesn't seems to be working. I have previous knowledge working with ui-grid but this ag-grid is new to me, so not sure where I am missing. Here is what I have tried till now:

var columnDefs = [
                   {headerName: "Workload", field: "workload"},
                   {headerName: "units", "field": "units"}
                 ];

Grid Options:

$scope.gridOptionsObject = {
                            columnDefs: columnDefs,
                            rowData: $scope.rowData,
                            headerCellRenderer: (params) =>
                                {return headerCellRendererFunc(params)}
                        };

// Header cell renderer function:

        var headerCellRendererFunc = function(params) {
            var headerColDef = params.colDef;
            headerColDef.name =  headerColDef.headerName;
            headerColDef.isMetadata = false;
            return '<h1 column="headerColDef"></h1>';
        }

Can anyone help me out here.

Answer 1

I'm a developer at ag-Grid, hopefully I'll be able to help you out with this.

This behaviour is very easily achieved using a header template, which allows for simple UI customisations of the default header component.

//Athlete column definition
  {
        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>' +

            //The line below is the key for achieving the solution
            '    <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>'
        },
}

To use a header template we add it to the template property of the headerComponentParams column property, in the column definitions of our chosen column (we chose the athlete column for this example). We've focused on customising the eText element here (highlighted above), this is the text in the column header. To transform the value to a hyperlink we've simply wrapped it in an anchor tag.

Here is a demo created using Angular: https://plnkr.co/edit/DVCbltCbbamkNqMo

Here is a blog covering this topic (link to blog) and here is the page in our docs which covers header templates (link to the docs)

Answer 2

First of all you can create a component. Then initialize that component to the attribute of headerComponentFramework of columnDefs.

this.gridOptions.columnDefs = [
      {
        headerComponentFramework: StylingHeaderComponent,
        filter: 'agTextColumnFilter',
        field: 'name',
        cellRendererFramework: StylingsNameComponent,
      },
    ];