Tabulator

olifolkerd.github.io

GitHub - olifolkerd/tabulator: A table generation JQuery UI Plugin

概要

高機能なテーブルが作成できると聞いて、試してみたくなった。
REST-fullなwebページ作成の補助につながる気がしたので、気になった。
あとは、Excelを殺してくれそうな気がしたので。。。

試作

前準備

とりあえず、下記をインクルードしていれば、試せる。

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

テーブルの作成

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

指定した要素にテーブルを適用してみる。
当然、jqueryなので、id名指定以外にもクラス名指定もできる。
今回は、とりあえずid名指定で確認。

以下でテーブルを作成する。

$("#example-table").tabulator();

テーブルはできるけど、表示するものが無いので、次で表示設定をする。

列定義

$("#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"},
  ],
});

列の定義内容

title
必須：この列のヘッダーに表示されるタイトル。
field
必須：（アイコン/ボタン列では不要）データ配列内のこの列のキー。
align
列のテキストの配置。設定内容は、（left | center | right）
width
列の幅を設定。ピクセル単位、テーブル全体の幅に対するパーセンテージの設定も可能。未設定だと、システムが最適と判断した幅になる。
minWidth
列の最小幅を設定。
sortable
列のデータを並べ替可否の設定
sorter
列のソート方法指定。
formatter
データのフォーマット指定。
onClick
列のセルをクリックしたときの処理内容。
editable
編集可否の設定。Bool値のみ設定可。デフォルト：false
editor
データを編集するときに使用するエディタの設定
visible
可視設定。Bool値のみ設定可。デフォルト：true
cssClass
列のヘッダーとセルに適用するCSSクラスを設定。
tooltip
列の各セルホバー時のツールチップを設定する。
tooltipHeader
列見出しホバー時のツールチップを設定する。
editableTitle
ヘッダータイトルの編集可否設定。
headerFilter
ヘッダ内の要素から列をフィルタリング。
mutator
テーブルに解析されるときに列の値を操作する関数。
ぶっちゃけ、使い方がよく分からん。
mutateType
データ解析、セル編集、またはその両方で突然変異を発生させるかどうかを定義。
ぶっちゃけ、使い方がよく分からん。
accessor
getData関数を使用する前の処理内容を記載する。

テーブルへのデータの読み込み

今回はとりあえず配列で試す。

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"},
];

データを割り当てる。
割り当てるには、setData()を使う。
メソッドを呼ぶんじゃなくて、tabulatorの中で処理するので、注意。

$("#example-table").tabulator("setData", sampleData);

HTMLファイルを開くと、指定したJavaScript配列のデータが表示される。

サンプルHTML

<html>
    <head>
       <title>tabulator-test</title>
       <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
       <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
       <link rel="stylesheet" href="tabulator-master/tabulator.css">

       <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
       <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
       <script type="text/javascript" src="tabulator-master/tabulator.js"></script>
   </head>
    <body>
        <div id="example-table"></div>

        <script type="text/javascript">
           $("#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"},
           ];
           
           $("#example-table").tabulator("setData", sampleData);
       </script>
    </body>
</html>

その他のデータ指定方法

Ajax

$("#example-table").tabulator("setData", "http://www.exampleurl.com/data");

HTML

$("#example-table").tabulator({});

参考

HTMLのテーブルをJSONで動的に更新できる「Tabulator」がスゴい！ - WPJ

エンターテイメント！！

遊戯王好きのJavaエンジニアのブログ。バーニングソウルを会得する特訓中。

Tabulator概要