Handsontable example

by Luiz Vargas

HTML

<div>
  <div id="example1" class="hot htRowHeaders htColumnHeaders"></div>
</div>
<style>
.handsontable th {
  font-weight: bold;
}

</style>

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<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 example1 = document.getElementById('example1');
  
  var hot = new Handsontable(example1, {
    data: [{"0":"","1":"","2":"Anand ","3":"Product 1","4":"","5":"123","6":"","7":"","8":"","9":"1","10":"1774,48","11":"5,55","12":"53,4","13":"33,23","14":"23,32","15":"19391","16":"3039","17":"3","18":"","19":"","20":"10","21":"5","22":"5","23":"","24":"","25":"","26":"","27":""},{"0":"","1":"","2":"test item on create clone","3":"product 342","4":"","5":"123","6":"","7":"","8":"","9":"1","10":"1","11":"","12":"1","13":"1","14":"1","15":"19392","16":"3036","17":"5","18":"90000","19":"","20":"50","21":"","22":"","23":"50","24":"","25":"","26":"","27":""}],
    colHeaders: true,

    rowHeaders: true,
    afterGetColHeader: function(i, TH) {
      TH.innerHTML = '<div class="head">' + TH.innerHTML + '</div>'
    },
    
    columns: [{"data":0,"renderer":"html"},{"data":1,"type":"dropdown","source":[],"renderer":"html"},{"data":2,"editor":false,"renderer":"html"},{"data":3,"editor":false,"renderer":"html"},{"data":4,"renderer":"html"},{"data":5,"type":"dropdown","source":["123","123 11","12345","Dessert","dotnet","Java","new","Python","Test"],"renderer":"html"},{"data":6,"editor":false,"renderer":"html"},{"data":7,"editor":false,"renderer":"html"},{"data":8,"renderer":"html"},{"data":9,"renderer":"html"},{"data":10,"renderer":"html"},{"data":11,"renderer":"html"},{"data":12,"renderer":"html"},{"data":13,"renderer":"html"},{"data":14,"renderer":"html"},{"data":15,"renderer":"html"},{"data":16,"renderer":"html"},{"data":17,"renderer":"html"},{"data":18,"renderer":"html"},{"data":19,"renderer":"html"},{"data":20,"renderer":"html","editor":false,"className":"htDimmed"}],
    
    nestedHeaders: [[{"isgroup":false,"label":"<div data-ref='firstrow_0'></div>","colspan":0},{"isgroup":false,"label":"<div data-ref='firstrow_1'></div>","colspan":0},{"isgroup":false,"label":"<div data-ref='firstrow_2'></div>","colspan":0},{"isgroup":false,"label":"<div...