Handsontable example

HTML

<script src="https://docs.handsontable.com/pro/1.15.0/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://docs.handsontable.com/pro/1.15.0/bower_components/handsontable-pro/dist/handsontable.full.min.css">
<div id="example1" class="hot handsontable htColumnHeaders"></div>

CSS

.handsontable .head {
  transform: rotate(160deg);
  height: 60px;
  margin-top: 15px;
}

JavaScript

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

  function getCarData() {
    return [{
      car: "Mercedes A 160",
      year: 2017,
      price_usd: 7000,
      price_eur: 7000
    }, {
      car: "Citroen C4 Coupe",
      year: 2018,
      price_usd: 8330,
      price_eur: 8330
    }, {
      car: "Audi A4 Avant",
      year: 2019,
      price_usd: 33900,
      price_eur: 33900
    }, {
      car: "Opel Astra",
      year: 2020,
      price_usd: 5000,
      price_eur: 5000
    }, {
      car: "BMW 320i Coupe",
      year: 2021,
      price_usd: 30500,
      price_eur: 30500
    }];
  }

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

  hot = new Handsontable(container, {
    data: getCarData(),
    colHeaders: ['Car', 'Year', 'Price ($)', 'Price (€)'],
    columnSorting: true,
    afterGetColHeader: function(i, TH) {
      TH.innerHTML = '<div class="head">' + TH.innerHTML + '</div>'
    }
  });

});