JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Custom column header with html code › Reply To: Custom column header with html code
May 5, 2021 at 4:53 pm
#101782
yavordashew
Member
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/