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.
*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);
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments