Tabulatorを使ってみた日

##Tabulatorとは
html5の表を簡単に作成できるJavaScriptライブラリー

##手順

・jqueryをここからCDNで読み込む.
・GitHubリポジトリからTabulatorライブラリーをコピーして、tabulator.cssとtabulator.jsファイルをプロジェクトに読み込む。

hoge.html

<! DOCTYPE html>
<link rel="stylesheet" href="tabulator.css">
<script type="text/javascript" src="tabulator.js">

<div id="example-table"></div>

hoge.js

$("#example-table").tabulator({
  columns:[
    {title:"Name", field:"name", sortable:true, width:200},
    {title:"Progress", field:"progress", sortable:true, sorter:"number"},
    {title:"Gender", field:"gender", sortable:true},
    {title:"Favourite Color", field:"col", sortable:false},
    {title:"Date Of Birth", field:"dob"},
    {title:"Cheese Preference", field:"cheese"},
  ],
});


var sampleData = [
  {id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", dob:"", car:1, lucky_no:5, cheese:"Cheader"},
  {id:2, name:"Mary May", progress:1, gender:"female", rating:2, col:"blue", dob:"14/05/1982", car:true, lucky_no:10, cheese:"Gouda"},
  {id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, col:"green", dob:"22/05/1982", car:"true", lucky_no:12, cheese:"Manchego"},
  {id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1, col:"orange", dob:"01/08/1980", lucky_no:18, cheese:"Brie"},
  {id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5, col:"yellow", dob:"31/01/1999", lucky_no:33, cheese:"Cheader"},
];

##参考
HTMLのテーブルをJSONで動的に更新できる「Tabulator」がスゴい！
[Tabulatorを使った見やすい表形式のWebアプリの作成]
(https://qiita.com/e21084/items/dcd7e190dc651127aa71)