Handsontable custom header

Question

Good day everyone.

I have a task: make custom header, well, header itself is made, but i got following trouble:

i have custom html string for header ie :

var str = "
<tr><th colspan='2'>global</th><tr>
<tr><th><img src='generateonflypath' /></th><th><img src='generateonflypath' /></th><tr>
"

And when i apply it like this:

$hotContainer.handsontable({
    afterRender: function () {$('.htCore > thead').html(str);}
});

My HOT height remains same and lowest rows are unseen until i click on any cell. How to fix this issue? ('beforerender' event works even worse)

Thanks for Your time!

Answer 1

After few days of rough experiments I've ended with this solution:

$container.handsontable({
    ...options...
    afterRender: function () { //add custom header
          $('.htCore > thead').html(jsonObj.Headers);
          //add container resize event handler for images that loaded in header
          $('.htCore > thead img').load(function(){
                 $('.wtHider').height($('.htCore').height()+10);
          });   
    } 
});

The idea behind this, is to change height of HOT's main table container. I think others can do just same with other events, not only load img, but change text etc...

Hope this helps someone!

Answer 2

You can actually just use the build in renderers now in > 2.0 versions.

//options
columnHeads: (index, element) => {
  // return html
  return `<a href="/">Link</a>`;
}