Tabulator: Display html in header filter input field

[duken8]

Hi Oli!

Thanks for all of your work on Tabulator! I'm replacing DataTables throughout my application with a tabulator implementation and ran into one problem I can't seem to solve; displaying html (FontAwesome icon) as interpreted html rather than a string within the field in the header filter. The header filter field is an input which can't interpret html despite the similar select functionality. I notice you create div elements for the select drop downs which can properly display the html.

Is there anyway I could change the type of field for the headerFilter from an input to say a div or actually select, so that I could populate it with a span containing a FontAwesome icon?

I appreciate any help you may be able to offer!

Thanks,

Nick

[duken8]

Here is an example of what I was hoping for, where the span and icon would actually display as html and not a string in the headerFilter input field.

headerFilter:"select", headerFilterParams: { values: { "approved": '<span class="icon"><i class="fa fa-circle blue"></i></span>', }, }, formatter:"html",

[olifolkerd]

Hey @duken8

Thanks for getting in touch, and thanks for your kind words, it is great to hear you are enjoying Tabulator.

All the inbuilt editors will sanitize HTML to text to prevent code injection into the table, but you are in luck, all of the header filters just you editors so there would be nothing to stop you creating your own custom editor to do exactly what you need it too. check out the Custom Editor Documentation for more details.

Cheers

Oli :)