Handsontable example

by Luiz Vargas

HTML

<div id="example1"></div>

CSS

* {
  font: 11px 'Verdana'
}

</style><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script><link type="text/css"rel="stylesheet"href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">

JavaScript

var myData = [
   ['CAR', 'function', 'fm', null, null, null, null],
   [null, 'automatic', 'fm', 'eff', null, 'cse', null],
   [null, null, 'quickly', null, null, 'cse', null],
   [null, null, null, 'eff', 'priority', 'name', 'material'],
   [null, null, null, 'unusable', 9, 'occ', 2],
   [null, null, null, 'strap needs placement', 3, 'prev', null],
   [null, null, null, null, null, 'det', 'visual inspection']
 ];
 var example = document.getElementById('example1');
 var hot = new Handsontable(example, {
   data: myData,
   colHeaders: true,
   fixedColumnsLeft: 1,
   contextMenu: true,
   stretchH: 'all',
   nestedHeaders: [
     [{
       label: 'SL.NO',
       colspan: 2
     }, {
       label: 'functions',
       colspan: 6
     }]
   ],
   mergeCells: [{
       row: 0,
       col: 0,
       rowspan: 7,
       colspan: 1
     },
     {
       row: 0,
       col: 2,
       rowspan: 1,
       colspan: 5
     },
     {
       row: 1,
       col: 3,
       rowspan: 1,
       colspan: 2
     },
     {
       row: 1,
       col: 1,
       rowspan: 6,
       colspan: 1
     },
     {
       row: 1,
       col: 5,
       rowspan: 1,
       colspan: 2
     },
     {
       row: 2,
       col: 5,
       rowspan: 1,
       colspan: 2
     },
     {
       row: 2,
       col: 2,
       rowspan: 5,
       colspan: 1
     },
     {
       row: 2,
       col: 3,
       rowspan: 1,
       colspan: 2
     },
     {
       row: 5,
       col: 5,
       rowspan: 1,
       colspan: 2
     },
     {
       row: 6,
       col: 3,
       rowspan: 1,
       colspan: 2
     }
   ]
 });