Handsontable example

by handsoncode

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable-pro@6.2.2/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable-pro@6.2.2/dist/handsontable.full.min.js"></script>
<div id="example1"></div>

CSS

.handsontable .sample {
  position: relative;
  bottom: 0;
  height: 90%;
  border: 1px solid #777;
  border-radius: 2px;
  margin: 2px;
  padding-top: 3%;
  background: #fefcea;
  float:left;
  background: #f9c5c5;
  text-align: center;
  font: 7px sans-serif;
  box-sizing: border-box;
}

JavaScript

var example = document.getElementById('example1');
  var hot = new Handsontable(example, {
    data: [
    	['Sample1', [2,5,6,7,6,6,7], 'ABCD'],
      ['Sample2', [1,0,8,9,2,3,1], 'EEDF'],
      ['Sample3', [1,6,7,8,2,4,7], 'TYYU']
    ],
    rowHeights: 50,
    rowHeaders: true,
    colHeaders: true,
    renderer: function(instance, td, row, col, prop, value, cellProperties) {
      Handsontable.renderers.HtmlRenderer.apply(this, arguments);
      if(col === 1){
        var a = value;
        var sum = a.reduce(function(a, b) { return a + b; }, 0);
        console.log(sum);
        td.innerHTML = '';
        for(var i = 0; i < value.length; i++){
        	var heightx = value[i] *10;
         	var content = td.innerHTML + '<div class="sample" style="width:'+ heightx + 'px">' + value[i] + '</div>';
          td.innerHTML = content
        }
      }
    }
  });