Handsontable example

by galvakojis

HTML

<button class='bt'>add column</button>
<div id="example1" class="hot htCenter handsontable htRowHeaders htColumnHeaders"></div>

CSS

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

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  var someData = [{
    id: 1,
    name: 'Sam',
    surname: 'Adams'
  }, {
    id: 2,
    name: 'Anna',
    surname: 'Smith'
  }];
  var
    container = document.getElementById('example1'),
    hot;

  hot = new Handsontable(container, {
    data: someData,
    colHeaders: true,
		manualColumnMove: true, // ADDING THIS LINE
    columns: [{
      data: 'name'
    }, {
      data: 'surname'
    }]
  });

  document.querySelector('.bt').addEventListener('click', function() {
    var newPerson = {};
    newPerson.id = 3;
    newPerson.name = 'John';
    newPerson.surname = 'Wells';
    newPerson.hobby = 'surfing';

    someData.push(newPerson);

    hot.updateSettings({
      columns: [{
        data: 'id'
      }, {
        data: 'name'
      }, {
        data: 'surname'
      }, {
        data: 'hobby'
      }]
    });
  });

});