Custom column header with html code

[astelcom]

Hi,
I would like to use html code to customize the header of a column of a grid.
I am using the “label” property of “columns” by putting “<div> … </div>”.
When the grid is loaded, the code is interpreted.
Everything is OK.
But, as long as there is a user event, the HTML code is no longer interpreted but displayed.
I don’t understand why.
Thank you in advance for your help.
Emmanuel.

[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/

[Author]

Posts