Handsontable example

HTML

<div id="example1" class="hot handsontable htColumnHeaders"></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"> <script src="https://docs.handsontable.com/pro/1.14.3/bower_components/numbro/dist/languages.min.js"></script>

JavaScript

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

  var a = [
    [{
      car: "Mercedes A 160",
      year: 2017
    }, {
      car: "Citroen C4 Coupe",
      year: 2018
    }, {
      car: "Audi A4 Avant",
      year: 2019
    }, {
      car: "Opel Astra",
      year: 2020
    }, {
      car: "BMW 320i Coupe",
      year: 2021
    }]
  ];

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

  hot = new Handsontable(container, {
    colHeaders: true,
    nestedHeaders: [
      [{
        label: 'Cars',
        colspan: 4
      }],
      ['Mercedes', 'Citroen', 'Audi', 'Opel']
    ],
    data: [
      [1, 2]
    ]
  });

  var myData = function() {
    var arr = [],
      row = [];

    for (var i = 0; i < a[0].length - 1; i++) {
      row.push(a[0][i].car)
    }
    arr.push(row);
    return arr
  }

  hot.loadData(myData());

})