Tabulatorを使った見やすい表形式のWebアプリの作成

1.概要

HTML5の表を簡単に作成できるJSライブラリーには様々なものがあるが、jQueryのプラグインにTabulatorがある。Tabulatorは簡単なHTML上の表の定義と、数行のJavaScriptの実行コードで、魅力的な(かつ定義によっては、編集可能やインタラクティブな）表を表示することが可能である。

この記事では最初に書くサンプルとコードを紹介する。

2.導入方法

Bowerやnpmなど環境に適したTabulatorを導入する。
　　・bower install tabulator --save
　　・npm install jquery.tabulator --save

HTML上で必要となるライブラリーをインクルードする、jQueryやTabulator自身およびTabulatorのCSSなどのライブラリーが対象

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<link href="dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>

3.記述方法

HTML

HTML上では、divで表を表示する領域を定義するのみ。

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

JavaScript

JavaScriptでは、まず表の定義を.tabulatorで実行する。
レイアウトやページネーションの有無、カラムの移動可否、初期ソートなどの表の属性の定義に続いて、columnsで表のタイトルや列に入れるフィールド、列幅、フォーマッターなどを指定する。

$("#tabulator-example").tabulator({
    layout:"fitColumns",
    tooltips:true,
    addRowPos:"top",
    history:true,
    pagination:"local",
    paginationSize:7,
    movableColumns:true,
    initialSort:[
        {column:"name", dir:"asc"},
    ],
    columns:[
        {title:"Name", field:"name", editor:"input"},
        {title:"Task Progress", field:"progress", align:"left", formatter:"progress", editor:true},
        {title:"Activity", field:"activity", width:160, formatter:lineFormatter, headerSort:false},
        {title:"Gender", field:"gender", width:90, editor:genderEditor},
        {title:"Rating", field:"rating", formatter:"star", align:"center", width:100, editor:true},
        {title:"Color", field:"col", width:130, editor:"input"},
        {title:"Date Of Birth", field:"dob", width:130, sorter:"date", align:"center"},
        {title:"Car", field:"car", width:80,  align:"center", formatter:"tickCross", sorter:"boolean", editor:true},
    ],
});

4.完成した表

以下のようなビジュアルで多機能な表が上記の少量のコードで生成される。