I'm trying to set the headerName of a column header as HTML in AG-Grid but the HTML is being escaped and a string is being set instead.

I'm aware that you can add a template under headerComponentParams in defaultColDef, however, this would be applied as a default to the whole table rather than just the individual header of a specific column. Following: https://www.ag-grid.com/javascript-data-grid/column-headers/

Is there any option to un-escape the HTML I'm trying to add as the headerName?

Is it possible to do this without creating a custom header component?

If not, what should we do?

const columnDefs = [
    {
          headerName: <span style="color:blue;">Forename</span>, 
          field: "forename", 
          suppressMenu: true
     },
     {
          headerName: <span style="font-size:20px;">Surname</span>, 
          field: "surname", 
          suppressMenu: true
     },
];

const gridOptions = {
    columnDefs: columnDefs,
    rowData: null,
    suppressMenuHide: true,
    defaultColDef: {
        sortable: true,
        resizable: true,
        filter: true,
        width: 150
        }
    }
};