Default Handsontable Demo

HTML

<script src="http://handsontable.com/dist/jquery.handsontable.full.js"></script>
<link rel="stylesheet" href="http://handsontable.com/dist/jquery.handsontable.full.css">
<link rel="stylesheet" href="http://handsontable.com/demo/css/samples.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable@11.0/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@11.0/dist/handsontable.full.min.css" /> 
<script src="https://handsontable.com/docs/8.3.2/components/numbro/dist/languages.min.js"></script>

<h2>Handsontable Transposer Demo</h2>

<button id="transpose" class="glyphicon glyphicon-retweet" onclick="myFunction()">
  <span class="btn-label">Transpose</span></button>
<div id="exampleGrid" class="dataTable"></div>

CSS

body {
  background-color: white;
  margin: 20px;
}

h2 {
  margin: 20px 0;
}

btn-label {
  top: -2px;
  position: relative;
  color: white;
}

JavaScript

var myData = [
  ["", "Kia", "Nissan", "Toyota", "Honda"],
  ["2008", 10, 11, 12, 13],
  ["2009", 20, 11, 14, 13],
  ["2010", 30, 15, 12, 13]
];
hot = new Handsontable($('#exampleGrid')[0], {
  data: myData,
  //always keep at least 1 spare row at the bottom,
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true,
    licenseKey: 'non-commercial-and-evaluation',
  
});
$('#rotate').off("click").on("click", function() {
  hot.loadData(transpose(hot.getData()));

  hot.render();
});

function myFunction(){
hot.loadData(transpose(hot.getData()));

  hot.render();
}

function transpose(a) {
  return a[0].map(function(_, c) {
    return a.map(function(r) {
      return r[c];
    });
  });
}