Handsontable example

by handsoncode

HTML

<div id="example"></div>
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">

CSS

.handsontable TH {
  overflow: scroll
}
.handsontable .head {
    transform: rotate(90deg);
    top: 22px;
    position: relative;
}
.handsontable .head::after {
  content: ' that is long';
}

JavaScript

const example = document.getElementById('example');
const hot = new Handsontable(example, {
    data: Handsontable.helper.createSpreadsheetData(10, 5),
    licenseKey: 'non-commercial-and-evaluation',
    colWidths: 60,
    rowHeaders: true,
    colHeaders: true,
    columnHeaderHeight: 200,
    afterGetColHeader: function(col, TH){
    	if (col === 0){
      	TH.innerHTML = '<div class="head">Some value</div>'
      }
    }
  });