Handsontable example

HTML

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

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

JavaScript

const data = [
  ['1', '1', '1', '1', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
  ['2', '2', '2', '2'],
  ['3', '3', '3', '3'],
  ['4', '4', '4', '4'],
  [''],
  [''],
  [''],
  [''],
  [''],
  [''],
  [''],
  [''],
  [''],
  [''],
  [''],
  [''],
  [''],
  [''],
  [''],
  [''],
  [''],
  [''],
  [''],
  [''],
  [''],
  [''],
  [''],
  [''],
  [''],
  [''],
  [''],
  [''],
];


const hyperformulaInstance = HyperFormula.buildEmpty();
const container = document.getElementById('example');

const contextMenu = function() {
	return {
  	callback: function(key, options) {
    	if(key === 'freeze_panes') {
      	const coords = hot.getSelected()[0];
        if(coords[0] === 0) {
        	coords[0] = 1;
        }
        if(coords[1] === 0) {
        	coords[1] = 1;
        }
        console.log(coords);
        this.updateSettings({
        	fixedRowsTop: coords[0],
          fixedColumnsLeft: coords[1],
        });
      } else if (key === 'unfreeze_panes') {
      	this.updateSettings({
          fixedRowsTop: 0,
          fixedColumnsLeft: 0,
        });
      }
    },
    items: {
    	'remove_row': {
      	name: 'Remove row',
      },
      'remove_col': {
      	name: 'Remove column',
      },
      'freeze_panes': {
      	name: 'Freeze panes',
      },
      'unfreeze_panes': {
      	name: 'Unfreeze panes',
      },
    },
  };
};

const hot = new Handsontable(container, {
  data: data,
  colHeaders: true,
  rowHeaders: true,
  contextMenu: contextMenu(),
});