Handsontable example

HTML

<div>
  <div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"></div>
</div>

CSS

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

<script src="https://docs.handsontable.com/pro/1.7.0/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.7.0/bower_components/handsontable-pro/dist/handsontable.full.min.css">

JavaScript

document.addEventListener("DOMContentLoaded", function() {

var myData = [
	['PersonA', 10], ['PersonA', 20], ['PersonB', 15], ['PersonA', 30], [""]
];
  
  var example1 = document.getElementById('example1');
  
  var hot = new Handsontable(example1, {
    data: myData,
    colHeaders: true,
    rowHeaders: true,
    dropdownMenu: true,
    filters: true,
    columnSummary: [
      {
        destinationRow: 0,
        reversedRowCoords: true,
        destinationColumn: 1,
        type: 'sum'
      }
    ]
  });
  


});