Handsontable example

HTML

<div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"></div>

CSS

.currentRow, td.highlight{
  padding: 20px 0 !important;
  font-size: 30px !important;
  font-weight: bold !important;
}

.htBorders{
  display:none;
}

.handsontableInput{
  box-sizing: border-box !important;
  padding: 20px 0;
}

.ht_clone_left{
  overflow: visible !important;
}

.wtHider{
  height: auto !important;
}



</style><!-- Ugly Hack due to jsFiddle issue -->

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

JavaScript

function getCarData() {
    return [
      ["Tesla", 2017, "black", "black"],
      ["Nissan", 2018, "blue", "blue"],
      ["Chrysler", 2019, "yellow", "black"],
      ["Volvo", 2020, "white", "gray"]
    ];
  }
  var
    data = [
      ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
      ['2017', 10, 11, 12, 13],
      ['2018', 20, 11, 14, 13],
      ['2019', 30, 15, 12, 13]
    ],
    container = document.getElementById('example1'),
    hot;
  
  hot = Handsontable(container, {
    data: data,
    minRows: 4,
    minCols: 6,
    currentRowClassName: 'currentRow',
    rowHeaders: true,
    colHeaders: true
  });
  
  hot.selectCell(2,2);