Handsontable example

by longman

HTML

<div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"></div>


that is my problem! :)
thanks

CSS

</style><script src="https://docs.handsontable.com/6.2.0/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script><link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/6.2.0/bower_components/handsontable-pro/dist/handsontable.full.min.css">

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  // custom renderer
  (function(Handsontable) {
    function customRenderer(hotInstance, td, row, column, prop, value, cellProperties) {
      Handsontable.renderers.BaseRenderer.apply(this, arguments);

      Handsontable.dom.empty(td);

      if (typeof value === 'object') {
        td.innerHTML = 'value is object: ' + JSON.stringify(value);
      } else if (typeof value === 'string') {
        td.innerHTML = 'value is string: ' + value;
      } else {
        td.innerHTML = 'value is: ' + value;
      }
    }

    Handsontable.renderers.registerRenderer('my.custom', customRenderer);

  })(Handsontable);

  // custom editor
  var CustomEditor = Handsontable.editors.TextEditor.prototype.extend();

  CustomEditor.prototype.createElements = function() {
    Handsontable.editors.TextEditor.prototype.createElements.apply(this, arguments);

    this.TEXTAREA = document.createElement('input');
    this.TEXTAREA.setAttribute('type', 'text');
    this.TEXTAREA.className = 'handsontableInput';
    this.textareaStyle = this.TEXTAREA.style;
    this.textareaStyle.width = 0;
    this.textareaStyle.height = 0;

    Handsontable.dom.empty(this.TEXTAREA_PARENT);
    this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);
  };

  CustomEditor.prototype.getValue = function() {
    // simple text value works as expected
    //return '123';
		
    // compex object, which i want to return back from custom editor
    // BUT Handsontable doesn't allow to save such object using strange reasons, described in my topic https://forum.handsontable.com/t/complex-object-from-custom-cell-editor/2692
    return {
      a: 1,
    };
  };

  var
    example = document.getElementById('example1'),
    hot1;

  hot1 = new Handsontable(example, {
    columns: [{
        data: 'id'
      },
      {
        data: 'name'
      },
      {
        data: 'address',
        renderer: 'my.custom',
        editor: CustomEditor,
      },
    ],
    data:...