Handsontable example

HTML

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

CSS

</style><!-- Ugly Hack due to jsFiddle issue --> <script src="https://docs.handsontable.com/pro/1.14.3/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.14.3/bower_components/handsontable-pro/dist/handsontable.full.min.css">

JavaScript

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

  var
    example = document.getElementById('example1'),
    hot;

  var myData = [{
    'date': '10-10-2017',
    'values': [{
      'column': 'columnName1',
      'value': 'value1',
      'id': 12
    }, {
      'column': 'columnName2',
      'value': 'value2',
      'id': 34
    }]
  }, {
    'date': '16-10-2017',
    'values': [{
      'column': 'columnName1',
      'value': 'value1',
      'id': 12
    }, {
      'column': 'columnName2',
      'value': 'value2',
      'id': 34
    }]
  }];

  hot = new Handsontable(example, {
    data: myData[0].values,
    rowHeaders: true,
    rowHeaderWidth: 100,
    colWidths: 120,
    rowHeaders: function(i) {
      return myData[i].date
    }
  });

});