Handsontable Custom Editor

customEditors.js

import * as Handsontable from 'handsontable';

export const SelectValueEditor = Handsontable.editors.BaseEditor.prototype.extend();

SelectValueEditor.prototype.init = function () {
  this.select = document.createElement('SELECT');
  Handsontable.dom.addClass(this.select, 'htSelectEditor');
  this.select.style.display = 'none';
  this.instance.rootElement.appendChild(this.select);
};

SelectValueEditor.prototype.prepare = function() {
  Handsontable.editors.BaseEditor.prototype.prepare.apply(this, arguments);

  var selectOptions = this.cellProperties.selectOptions();

  Handsontable.dom.empty(this.select);

  selectOptions.map(option => {
    var optionElement = (<HTMLInputElement>document.createElement('OPTION'));
    optionElement.value = option.value;
    Handsontable.dom.fastInnerHTML(optionElement, option.text);
    this.select.appendChild(optionElement);
  });
};

SelectValueEditor.prototype.getValue = function() {
  return this.select.value;
};

SelectValueEditor.prototype.setValue = function(value) {
  this.select.value = value;
};

SelectValueEditor.prototype.open = function() {
  var width = Handsontable.dom.outerWidth(this.TD);
  var height = Handsontable.dom.outerHeight(this.TD);
  var rootOffset = Handsontable.dom.offset(this.instance.rootElement.parentElement);
  var tdOffset = this.TD.getBoundingClientRect();

  // sets select dimensions to match cell size
  this.select.style.height = height + 'px';
  this.select.style.minWidth = width + 'px';

  // make sure that list positions matches cell position
  this.select.style.top = tdOffset.top - rootOffset.top + 'px';
  this.select.style.left = tdOffset.left - rootOffset.left + 'px';
  this.select.style.margin = '0px';

  // display the list
  this.select.style.display = '';
};

SelectValueEditor.prototype.close = function() {
  this.select.style.display = 'none';
};

SelectValueEditor.prototype.focus = function() {
  this.select.focus();
};