JSFiddle - React, Tailwind, and code Playground

by Nicolas Lips

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/2.0.0/handsontable.full.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/2.0.0/handsontable.full.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngHandsontable/0.13.0/ngHandsontable.js"></script>
<div ng-app="myApp">
<div ng-controller="HotController as hotCtrl">
<div ng-if="hotCtrl.ready">


  <button type="button" ng-click="hotCtrl.starHeader()">
    star header
  </button>
  <p>
    row header: <input ng-model="hotCtrl.rowHeaders"/>
  </p>
  <hot-table
    columns="hotCtrl.columns"
    datarows="hotCtrl.rows" 
    row-headers="hotCtrl.rowHeaders"
    >
	</hot-table>    

  <!-- hot-table
    settings="hotCtrl.settings"
    datarows="hotCtrl.rows"
    columns="hotCtrl.columns"
    row-headers="hotCtrl.rowHeaders"
    manual-row-move="hotCtrl.manualRowMove">
	</hot-table -->    
  <pre>
columns: {{hotCtrl.columns | json}}
rows: {{hotCtrl.rows | json}}
  </pre>
</div>
</div>
</div>

JavaScript

angular
.module("myApp", ["ngHandsontable"])
.controller("HotController", ["$timeout", function ($timeout) {
	var vm = this;
  vm.ready = false;
  $timeout(function () {
  	debugger;
  	vm.ready = true;
    vm.rowHeaders = "***";
  }, 2000);
  vm.rowHeaders = true;
  vm.columns = [
   { title : "A", data: "A" },
   { title : "B", data: "B" }
  ];
  vm.rows = [
  	{ A: 'A1', B: 'B1' },
  	{ A: 'A2', B: 'B2' },
  	{ A: 'A3', B: 'B3' },
  	{ A: 'A4', B: 'B4' },
  ];
  vm.starHeader = function() {
  	debugger;
  	vm.rowHeaders = function() {
    	return "#";
    }
  }
}]);