Handsontable example

by Nicolas Lips

HTML

<script src="https://docs.handsontable.com/pro/1.18.1/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://docs.handsontable.com/pro/1.18.1/bower_components/handsontable-pro/dist/handsontable.full.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngHandsontable/0.13.0/ngHandsontable.js"></script>
<div ng-app="myApp">
  <div class="tableContainer">
    <hot-table datarows="items" columns="columns" settings="settings">
    </hot-table>  
  </div>
  <div class="buttonContainer">
    <button type="button" ng-click="addColumn()">
      Add column
    </button>
  </div>
</div>

CSS

div.tableContainer {
  float:left;
  margin:0.2em;
}
div.buttonContainer {
  float:left;
  margin:0.2em;
}

JavaScript

angular
.module('myApp', ['ngHandsontable'])
.run(['$rootScope', '$timeout', function ($rootScope, $timeout) {
	$rootScope.columns = [
      { title: "id", data: 'id' },
      { title: "name", data: 'name' },
  ];
  $rootScope.items = [
  	{ 
    	id: '1', name: 'aaa'
    }, {
    	id: '2', name: 'bbb'
    }, { 
    	id: '3', name: 'ccc'
    }, {
    	id: '4', name: 'ddd'
    }
  ];
  $rootScope.settings = {
  	rowHeaders: true,
   	manualColumnResize: true,
   	preventOverflow: 'vertical',
		manualRowMove: true,
    dropdownMenu: true,
    contextMenu: true,
    manualColumnMove: true
  };
  $rootScope.addColumn = function() {
  	$rootScope.columns.push({
    	title: 'Col'+($rootScope.columns.length)      
    })
  }
}]);