Reply To: Custom column header with html code

[yavordashew]

Hi Emmanuel,
This is default functionality of this property and it escapes html code.
However if you want to achieve this kind of functionality I have prepared a little code snippet for you:

   // In your JS file
    const grid = document.querySelector('smart-grid');
    const column = grid.querySelectorAll('smart-grid-column')
    let customHeaderColumn = column[2]
    customHeaderColumn.classList.add('custom-column-header')
    customHeaderColumn.innerHTML= '<h3> Custom Header </h3>'

And the CSS class needed:

/*In your CSS file */
.custom-column-header{
    line-height: unset!important;
    justify-content: center!important;
}

Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/