DataTable header menu extending with custom template with HTML checkbox


We wanted a custom look for the header menu and I used template configuration as below.

      template: `<input type="checkbox" id="cb1"></input><label for="cb1">#value#</label>`

This gives the look and feel what I am looking for. But the click behavior is odd with the HTML checkbox I added. We have to click multiple times for the checkbox to move to checked state. It looks like the click event is not reaching the HTML element when we place it inside template property.
The observation is same with another checkbox component implementation.

What is blocking checkbox inside template receiving the click events?

You can find the running version here.



  • Hello, @Bachu

    The default icons are rendered based on the hidden property in an option. This property is changed as a user clicks on a menu option and corresponds to the visibility of the related column.
    You can use a similar conditional template for a custom checkbox:

        template: function (obj) {
         return `<input type="checkbox" ${obj.hidden ? "" : "checked"}></input>

    Please, check the snippet here:

  • Yes it works!


Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!