Handsontable JS Sample for Visualforce in dev11

PlanetImportSample3.page

<apex:page docType="html-5.0" showHeader="false" sidebar="false" standardStylesheets="false" standardController="DataImportHistory__c" extensions="PlanetImportSample2Ctrl">
  <apex:stylesheet value="//cdn.jsdelivr.net/webjars/bootstrap-sf1/0.1.0-beta.6/css/bootstrap-namespaced.css"/>
  <apex:stylesheet value="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"/>

  <link data-jsfiddle="common" rel="stylesheet" media="screen" href="{!URLFOR($Resource.Handsontable, 'src/css/jquery.handsontable.full.css')}" />

  <apex:includeScript value="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.js"/>
  <apex:includeScript value="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"/>
  <script src="{!URLFOR($Resource.Handsontable, 'src/js/jquery.handsontable.full.js')}"></script>
  <script src="{!URLFOR($Resource.Handsontable, 'src/js/ngHandsontable.js')}"></script>

   <script>
    var app = angular.module('ngApp', ['ngHandsontable']);
    app.controller('DemoCtrl', ['$scope', function ($scope) {
  
 $scope.db = {};

$scope.db.items = [
  {
    "id":1,
    "name":{
      "first":"John",
      "last":"Schmidt"
    },
    "address":"45024 France",
    "price":760.41,
    "isActive":"Yes",
    "product":{
      "description":"Fried Potatoes",
      "options":[
        {
          "description":"Fried Potatoes",
          "image":"//a248.e.akamai.net/assets.github.com/images/icons/emoji/fries.png",
          "Pick$":null
        },
        {
          "description":"Fried Onions",
          "image":"//a248.e.akamai.net/assets.github.com/images/icons/emoji/fries.png",
          "Pick$":null
        }
      ]
    }
  },
    {
    "id":2,
    "name":{
      "first":"John",
      "last":"Schmidt"
    },
    "address":"45024 France",
    "price":760.41,
    "isActive":"Yes",
    "product":{
      "description":"Fried Potatoes",
      "options":[
        {
          "description":"Fried Potatoes",
          "image":"//a248.e.akamai.net/assets.github.com/images/icons/emoji/fries.png",
          "Pick$":null
        },
        {
          "description":"Fried Onions",
          "image":"//a248.e.akamai.net/assets.github.com/images/icons/emoji/fries.png",
          "Pick$":null
        }
      ]
    }
  }

  //more items go here
];

    }]);
    
  </script>  

 
<div class="bootstrap" >
<div ng-app="ngApp"> 
        
    <!-- context-lead -->
    <div class="page-header page-header-compact page-header-transparent context-lead">
      <h1>ckeditor</h1>
    </div><!-- .context-lead -->
    
    <div ng-controller="DemoCtrl">

<hot-table
    settings="{colHeaders: colHeaders, contextMenu: ['row_above', 'row_below', 'remove_row'], afterChange: afterChange }"
    rowHeaders="false"
    minSpareRows="minSpareRows"
    datarows="db.items"
    height="300"
    width="700">
    <hot-column data="id"                  title="'ID'"></hot-column>
    <hot-column data="name.first"          title="'First Name'"  type="grayedOut" readOnly="true" ></hot-column>
    <hot-column data="name.last"           title="'Last Name'"   type="grayedOut" readOnly="true"></hot-column>
    <hot-column data="address"             title="'Address'" width="150"></hot-column>
    <hot-column data="product.description" title="'Favorite food'" type="'autocomplete'">
        <hot-autocomplete datarows="description in product.options"></hot-autocomplete>
    </hot-column>
    <hot-column data="price"               title="'Price'"     type="'numeric'"  width="80"  format="'$ 0,0.00'" ></hot-column>
    <hot-column data="isActive"            title="'Is active'" type="'checkbox'" width="65"  checkedTemplate="'Yes'" uncheckedTemplate="'No'"></hot-column>
</hot-table>


    </div><!-- DemoCtrl -->
 </div>
</div><!-- .bootstrap -->
 

</apex:page>