Handsontable example

by handsoncode

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<div id="example4" class="hot head-gap handsontable htRowHeaders htColumnHeaders"></div>

CSS

body {
  background: white;
  margin: 0;
  padding: 0;
}

JavaScript

var
  example4 = document.getElementById('example4'),
  hot = new Handsontable(example4, {
    data: Handsontable.helper.createSpreadsheetData(12, 17),
    colHeaders: true,
    width: 745,
    colWidths: 56,
    rowHeaders: true,
    licenseKey: 'non-commercial-and-evaluation',
    hiddenColumns: {
      columns: [1, 2, 3, 5, 6, 9],
      indicators: true
    },
    hiddenRows: {
      rows: [0, 5],
      indicators: true
    },
    contextMenu: ['make_read_only', 'hidden_columns_show', 'hidden_columns_hide', 'hidden_rows_show', 'hidden_rows_hide']
  });