Handsontable example

by galvakojis

HTML

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

<button id="add_column">
ADD COLUMN
</button>

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() {

  function getCarData() {
    return [{
      11: "Mercedes A 160",
      year: 2011,
      1: 7000,
      price_eur: 7000
    }, {
      11: "BMW 320i Coupe",
      year: 2015,
      1: 30500,
      price_eur: 30500
    }];
  }

  var
    container = document.getElementById('example1'),
    hot;

  hot = new Handsontable(container, {
    data: getCarData(),
    colHeaders: ["Price"],
    columnSorting: true,
    columns: [{
      data: "1",
      type: "numeric"
    }],
		cells:function (row, col, prop) {
		  console.log(col + "/" + prop);
		
			var cellProperties = {};
			return cellProperties;
		}
  });
	
	$("#add_column").click(function() {
		var settings = hot.getSettings();
		
		var item = {};
		
		item["data"] = 12;
		item["type"] = "numeric";
                            
		var columnsArray = hot.getSettings().columns;
		columnsArray.push(item);

		settings["columns"] = columnsArray;

		var colHeadersArray = hot.getSettings().colHeaders;
		colHeadersArray.push("Price #2");

		settings["colHeaders"] = colHeadersArray;

		hot.updateSettings(settings);
	});
});