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">
  <hot-table datarows="items" columns="columns" settings="settings" />
</div>

JavaScript

// hack de Handsontable pour que l'option 'nestedRows' passée à <hot-table>
// soit rpsi en compte
Handsontable.DefaultSettings.prototype.nestedRows = false;
// -------------------------------------------------------

angular
.module('myApp', ['ngHandsontable'])
.run(['$rootScope', '$timeout', function ($rootScope, $timeout) {
	$rootScope.columns = [];
    angular.copy([
      { title: "id", data: 'id' },
      { title: "name", data: 'name' },
    ], $rootScope.columns);
  $rootScope.items = [];
  $timeout(function () {
    angular.copy([
  	{ id: 'c1', name: '', __children: [{
    	id: '1', name: 'aaa'
    },{
    	id: '2', name: 'bbb'
    }] },
  	{ id: 'c2', name: '', __children: [{
    	id: '3', name: 'ccc'
    },{
    	id: '4', name: 'ddd'
    }] }
  ], $rootScope.items);
  }, 1000)
  $rootScope.settings = {
  	licenseKey: '07ca6-d096e-c9144-64e1e-9c134',
  	rowHeaders: function() {
    	return ''
   	},
   	height: 600,
   	manualColumnResize: true,
   	preventOverflow: 'vertical',
   	nestedRows: true,
		manualRowMove: true,
    dropdownMenu: true,
		// dropdownMenu: dropdownMenuItems.getDropdownMenuItems(ctrl),
    contextMenu: true,
    // contextMenu: contextMenuItems.getContextMenuItems(ctrl),
                // afterRowMove: function (rows, target) {
                //     // // console.log('%c afterRowMove RUNNING :: rows : ' + rows + ' :: target : ' + target);
                //     SelectTagEditor.prototype.close();
                //     SelectUserEditor.prototype.close();
                // },
                // afterColumnMove: function (columns, target) {
                //     if (ctrl.prevSelected != undefined) {
                //         console.log('%c afterColumnMove RUNNING :: ctrl.prevSelected[0][1] : ' + ctrl.prevSelected[0][1] + ' :: target : ' + target);
                //         console.log('%c afterColumnMove RUNNING :: ctrl.adaptedView.getColumns()[ctrl.prevSelected[0][1]].name : ' +...