Handsontable example

HTML

<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>

<div id="example1" class="hot "></div>

JavaScript

const container = document.querySelector('#example1');

const hot = new Handsontable(container, {
  data: [
    ['v1', 'v2', 'v3'],
    [true, false, false],
    [0, 0, 0]
  ],
  rowHeaders: ['Header 1', 'Header 2', 'Header 3'],
  height: 'auto',
  rowHeaderWidth: 100, 
  licenseKey: 'non-commercial-and-evaluation',
  cells: function(row) {
    let cp = {}
    if (row == 1) {
      cp.type = 'checkbox'
    } else if (row == 2) {
      cp.type = 'numeric'
    }
    return cp
  }
});