ag-grid custom header with html

Issue

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.

Solution

*UPDATE: This only works for older versions of AgGrid (v18 and possibly some newer versions, but definitely not working as of v22.1.1)*

---

So finally I found a solution. This can be easily done without any special treatment for the header. Simply define the template for the header and use.

var header_template = '<span class="text-danger" style="height:30px;">Some Value </span>';

and then define columnDefs:

columnDefs = [];
customColumn = {headerName: header_template, field: name};
columnDefs.push(customColumn);

Answered By - undefined