Handsontable Basic Example (100x10)

by ChangJoo Park

HTML

<script src="https://handsontable.com/bower_components/handsontable/dist/handsontable.full.js"></script>
<link rel="stylesheet" href="https://handsontable.com/bower_components/handsontable/dist/handsontable.full.css">
<div id="app">
  <h1>Vue with handsontable</h1>
  <action-component></action-component>
  <div id="example"></div>
</div>

CSS

body {
  margin: 20px 30px;
  font-size: 13px;
  font-family: 'Open Sans', Helvetica, Arial;
}

a {
  color: #34A9DC;
  text-decoration: none;
}

p {
  margin: 5px 0 20px;
}

h2 {
  margin: 20px 0 0;
  font-size: 18px;
  font-weight: normal;
}

JavaScript

var ACTION_COMPONENT = {
	name: 'action-component',
  template: '<button>안녕하세요</button>'
}

new Vue({
  el: '#app',
  components: {
  	'action-component': ACTION_COMPONENT
  },
  mounted: function() {
    var data = function() {
      return {
        title: "<a href='http://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691'>Professional JavaScript for Web Developers</a>",
        description: "This <a href='http://bit.ly/sM1bDf'>book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>.",
        comments: "I would rate it &#x2605;&#x2605;&#x2605;&#x2605;&#x2606;",
        cover: "http://ecx.images-amazon.com/images/I/51bRhyVTVGL._SL50_.jpg",
        action: ''
      }, {
        title: "<a href='http://shop.oreilly.com/product/9780596517748.do'>JavaScript: The Good Parts</a>",
        description: "This book provides a developer-level introduction along with <b>more advanced</b> and useful features of JavaScript.",
        comments: "This is the book about JavaScript",
        cover: "http://ecx.images-amazon.com/images/I/51gdVAEfPUL._SL50_.jpg",
        action: ''
      }, {
        title: "<a href='http://shop.oreilly.com/product/9780596805531.do'>JavaScript: The Definitive Guide</a>",
        description: "<em>JavaScript: The Definitive Guide</em> provides a thorough description of the core <b>JavaScript</b> language and both the legacy and standard DOMs implemented in web browsers.",
        comments: "I've never actually read it, but the <a href='http://shop.oreilly.com/product/9780596805531.do'>comments</a> are highly <strong>positive</strong>.",
        cover: "http://ecx.images-amazon.com/images/I/51VFNL4T7kL._SL50_.jpg",
        action: ''
      }

    };

    var container = document.getElementById('example');
		var vm = this
    var hot = new Handsontable(container, {
      data: data(),
      colWidths: [200, 200, 200, 80, 80],
      colHeaders: ["Title",...