Handsontable example

by Luiz Vargas

HTML

<div>
  <div id="example1" class="hot htRowHeaders htColumnHeaders"></div>
</div>
<style>
.handsontable th {
  font-weight: bold;
}
.handsontable tr:nth-child(2) .head {
  display: inline-block;
    white-space: nowrap;
    -webkit-transform: translate(1.1px,0) rotate(360deg);
    transform: translate(1.1px,0) rotate(360deg);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -ms-transform: none;
    -ms-transform-origin: none;
    -ms-writing-mode: tb-rl;
    *: ;
    -webkit-writing-mode: tb-rl;
    writing-mode: tb-rl;
}
</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":"Personas","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":"Personas","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: false,
    colWidths: 60,
    rowHeaders: false,
    mergeCells: [{row: 0, col:0, rowspan: 3, colspan: 1},/*VACIO*/
    ],
    fixedColumnsLeft: 1,
  });