Handsontable example

HTML

<div id="example"></div>

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">

CSS

.bigger-font {
  font-family: 'Roboto';
  font-size: 15px;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const example = document.getElementById('example');
  const hot = new Handsontable(example, {
    data: [
      ['', '', ''],
      ['', 'The long text should be wrapped', ''],
      ['', '', ''],
      ['', '', ''],
      ['', '', ''],
      ['', '', ''],
    ],
    colWidths: [void 0, 70],
    cell: [
      { row: 1, col: 1, className: 'bigger-font'}
    ],
    rowHeaders: true,
    colHeaders: true,
    fixedColumnsLeft: 1,
  });
  
	hot.selectRows(1);
  
  setTimeout(() => {
  	hot.refreshDimensions();
  }, 5000)
});