Handsontable: jquery merge headers, bug at horizontal scroll

Question

im currently working with handsontable and python+django, i put a custom merged header with Javascript. And this should look like this.

But when i load the page.

BUT, when i scroll back and foward the error disappear magically.

This is the container div.

<div class="table-container" style="width: auto; height: 200px; overflow: hidden;margin-top: 20px;">
                                <div id="table-index"  data-productoscomerciales='{{productoscomerciales}}'></div>
                          </div>

This is my javascript code.

function createTable(data, container) {    

var str = '<tr id="header-grouping">'+'<th colspan="1"></th>'+'<th colspan="1"></th>'+'<th colspan="1"></th>'+'<th colspan="15">Inventario*</th>' + 
          '<th colspan="9">Producción*</th>'+'</tr>';  

return new Handsontable(container, {
  data: data.slice(2,data.length),
  minSpareRows: 1,
  rowHeaders: false,
  manualColumnResize: true,

  colHeaders: data[0],
  columns: data[1],

  colWidths: [150, 100, 130],
  contextMenu: false,
  afterRender  : function () {$('.htCore > thead > tr').before(str);},
  beforeRender: function() {
        while ($('#header-grouping').size() > 0)
                $('#header-grouping').remove();
    },
    afterColumnResize: function () {
        $container.handsontable('render');
    },
      afterGetColHeader: function() {
        while ($('.ht_clone_top.handsontable #header-grouping th').size() > 0)
           $('.ht_clone_top.handsontable #header-grouping th').remove();
    }    
});

}

Answer 1

I think I know what's wrong. Remove the afterRender and it should fix itself. The problem you have is that you're trying to modify the html on the table that Handson renders, which is always a bad idea. Handson will re-render fairly frequently, like when you scroll or click, meaning that line is pretty useless after a few seconds of using the table.