Loading multiple handsontable with custom header in same page

Question

I have to load more than one handsontable in same page with custom header featuring grouping of headers.

I have used following code to initialize two handsontable with different group heading -

$(document).ready(function() {

  /* function */

  function model(ldo, scn, line, container, f_e, fcl_lcl, spod, pod, iso, commodity, wgt, imdg, unno, temp, or, oog, stow_ind, ts, pol, shipper, bkg_ref, awk_cargo, remark) {
    return {
      name: {
        ldo: ldo,
        scn: scn,
        line: line,
        container: container,
        f_e: f_e,
        fcl_lcl: fcl_lcl,
        spod: spod,
        pod: pod,
        iso: iso,
        commodity: commodity,
        wgt: wgt,
        imdg: imdg,
        unno: unno,
        temp: temp,
        or: or,
        oog: oog,
        stow_ind: stow_ind,
        ts: ts,
        pol: pol,
        shipper: shipper,
        bkg_ref: bkg_ref,
        awk_cargo: awk_cargo,
        remark: remark
      }
    };
  }

  /* ------  */

  /* Events */
  var container_sizes = ['20-HC', '40-GP'];
  var container_count = [3, 5]
    //Loading excel sheet
  for (var i = 0; i < container_sizes.length; i++) {
    var data = [];
    for (var j = 0; j < container_count[i]; j++) {
      var row_data = model("", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "");
      data.push(row_data);
    }
    var header_string = container_sizes[i] + ' sized containers';
    var container = $("#container-entry");
    container.handsontable({
      data: data,
      dataSchema: model,
      colHeaders: ["LDO", "SCN", "LINE", "CONTAINER", "F/E", "FCL/LCL", "SPOD", "POD", "ISO", "COMMODITY", "WGT", "IMDG", "UNNO", "TEMP", "OR", "OOG", "STOW IND.", "TS", "POL", "SHIPPER", "BKG REF", "AWK CARGO", "REMARK"],
      rowHeaders: true,
      manualColumnResize: true,
      columns: [{
        data: 'name.ldo'
      }, {
        data: 'name.scn'
      }, {
        data: 'name.line'
      }, {
        data: 'name.container'
      }, {
        data: 'name.f_e'
      }, {
        data: 'name.fcl_lcl'
      }, {
        data: 'name.spod'
      }, {
        data: 'name.pod'
      }, {
        data: 'name.iso'
      }, {
        data: 'name.commodity'
      }, {
        data: 'name.wgt'
      }, {
        data: 'name.imdg'
      }, {
        data: 'name.unno'
      }, {
        data: 'name.temp'
      }, {
        data: 'name.or'
      }, {
        data: 'name.oog'
      }, {
        data: 'name.stow_ind'
      }, {
        data: 'name.ts'
      }, {
        data: 'name.pol'
      }, {
        data: 'name.shipper'
      }, {
        data: 'name.bkg_ref'
      }, {
        data: 'name.awk_cargo'
      }, {
        data: 'name.remark'
      }],
      afterRender: function() {
        container.find('thead').find('tr').before(
          '<tr id="header-grouping"><th colspan="24">' + header_string + '</th></tr>');
      },
      beforeRender: function() {
        $('#header-grouping').remove();
      },
      stretchH: "all"
    });

  }

});

button#upload {
  position: relative;
  float: right;
  width: 8em;
  height: 4em;
  margin-top: 35px;
  margin-right: 75px;
}
button#reset {
  position: relative;
  float: left;
  width: 8em;
  height: 4em;
  margin-top: 35px;
  margin-left: 75px;
}

<h4>Copy and paste container related data</h4>


<div id='container-entry'></div>

<button type="reset" id="reset" class="btn btn-default btn-file btn-sm">
  Reset
</button>
<button type="submit" id="upload" class="btn btn-primary btn-file btn-sm">
  Upload
</button>

But when i run the code or load the page i have been gaining the following error continuously.

 TypeError: element.classList is undefined

The error traceback to the following line (line 9782) of the handsontable js.

return element.classList.contains(className);

I can't understand the cause of the error. It will be helpful for me if anyone follow me towards the right direction.

Here is a demo - https://jsfiddle.net/ni8mr/x1bnuqjy/

Answer 1

I have found a solution. The problem was causing due to adding two handsonTable on same div. So i have added another div after the default div and than the problem is solved.

The code in my question is kind of messy. So i have demonstrated a simple demo here - https://jsfiddle.net/ni8mr/2a0k4ror/

Here are the codes -

$(document).ready(function() {

  var $container = $("#example");
  $container.handsontable({
    data: [
      ['', '', '', '', ''],
      ['', '', '', '', ''],
      ['', '', '', '', ''],
      ['', '', '', '', '']
    ],
    startRows: 4,
    startCols: 5,
    colHeaders: ['First', 'Last', 'Street', 'State', 'Zip'],
    rowHeaders: false,
    manualColumnResize: true,
    afterRender: function() {
      $container.find('thead').find('tr').before(
        '<tr id="header-grouping"><th colspan="2">Name</th>' +
        '<th colspan="3">Address</th></tr>');
    },
    beforeRender: function() {
      $('#header-grouping').remove();
    },
    modifyColWidth: function() {
      //$('#header-grouping').remove();
    }
  });

  $("<div id='example1'></div>").insertAfter("div#example");
  $("#example1").handsontable({
    data: [
      ['', '', '', '', ''],
      ['', '', '', '', ''],
      ['', '', '', '', ''],
      ['', '', '', '', '']
    ],
    startRows: 4,
    startCols: 5,
    colHeaders: ['First', 'Last', 'Street', 'State', 'Zip'],
    rowHeaders: false,
    manualColumnResize: true,
    afterRender: function() {
      $("#example1").find('thead').find('tr').before(
        '<tr id="header-grouping"><th colspan="2">Name</th>' +
        '<th colspan="3">Address</th></tr>');
    },
    beforeRender: function() {
      $('#header-grouping').remove();
    },
    modifyColWidth: function() {
      //$('#header-grouping').remove();
    }
  });


});

<div id="example"></div>

Also here is a demo following my exact codes - https://jsfiddle.net/ni8mr/2a0k4ror/1/