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

テーブル（表組み）をかっこよく、使いやすく表示するJavaScriptライブラリーはたくさんありますが、決定版になりそうなのが「Tabulator」です。JSONデータを簡単に読み込めるので、更新が必要なサイトやアプリにおすすめ。

標準HTMLのテーブル（table）は、複数の基本的なデータをレイアウトするのにとても便利ですが、テーブルにもっとほかの使い道がないでしょうか。外部APIからデータを取得したり、テーブルをソートあるいは編集可能にしたりする必要があるなら、もう少し気の利いたものが必要です。

思い当たることがあるなら、Tabulatorはおすすめのライブラリーです。Tabulatorは複雑なインタラクティブなテーブルの構築を簡単にするために設計された軽量なjQuery UIプラグインです。数行のJavaScriptで、ほぼすべてのデータソースをきれいにフォーマットされたインタラクティブなテーブルに変換できます。

この記事では、初めてTabulatorを作成する基本から始め、さらに機能を追加するために使えるオプションについて説明します。

はじめてのTabulatorの構築

ごくシンプルなテーブルを作成します。

TabulatorはjQueryウィジェットなので、ローカルソースまたは選択したCDNのいずれかからjQuery、jQuery UIライブラリーをインクルードする必要があります。

また、ここのGitHubリポジトリからTabulatorライブラリーをコピーして、tabulator.cssとtabulator.jsファイルをプロジェクトに読み込む必要があります。

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

テーブルに適用する、<div>要素を生成します。

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

簡単なJavaScriptを使って、要素をTabulatorにします。

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

すると、機能的なテーブルができ上がります。

しかし、まだ完成には程遠いです。テーブルを完成するには、列を定義してデータを読み込む必要があります。

列の定義

テーブルのレイアウトを定義するには、各列に関する情報が必要です。

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：列の幅（設定しない場合はシステムが最適な値を定義）
• sortable：ユーザーが列でデータをソート可能か否か切り替える
• sorter：列内のデータのソート方法（デフォルトはstring）
• formatter：列内のデータのフォーマット方法（デフォルトはstring）
• onClick：ユーザーが列内のセルをクリックしたときのコールバック
• editable：このデータがユーザーによって編集可能か否かを定義
• editor：列内のセルが編集可能な場合に使用されるエディター
• visible：列を表示するか非表示にするか

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

新しいTabulatorを生成するための最終段階は、データの読み込みです。オプションがあるので、それぞれのオプションについて説明します。

JavaScript配列

setDataメソッドを使用してデータの配列を渡せます。オブジェクトによって定義されたテーブルの各行の配列を受け取ります。

サンプルデータを作成します。

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);

Ajaxリクエスト

リモートのソースからJSON形式のデータを取得するには、setDataメソッドにURLを渡してAjaxリクエストを実行します。

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

URLがあるオブジェクトに、追加のリクエストパラメーターを渡せます。

$("#example-table").tabulator("setData", "http://www.exampleurl.com/data", {key1:"value1", key2:"value2"});

HTMLテーブル

既存のHTMLテーブルを、Tabulatorに変換できます。

HTMLテーブルを生成します。

<table id="example-table">
  <thead>
    <tr>
      <th width="200">Name</th>
      <th>Progress</th>
      <th>Gender</th>
      <th>Height</th>
      <th>Favourite Color</th>
      <th>Date of Birth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Billy Bob</td>
      <td>12</td>
      <td>male</td>
      <td>1</td>
      <td>red</td>
      <td></td>
    </tr>
    <tr>
      <td>Mary May</td>
      <td>1</td>
      <td>female</td>
      <td>2</td>
      <td>blue</td>
      <td>14/05/1982</td>
    </tr>
  </tbody>
</table>

テーブル要素のTabulatorコンストラクターを呼び出して、自動的にヘッダーおよびデータを展開します。

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

最終結果

テーブルの作成、列の定義、データの読み込みが完了し、これで機能的でインタラクティブなテーブルが完成しました。作成したTabulatorは以下のように表示されます。

追加機能でテーブルを改善

でも、もう少し待ってください。テーブルの外観、印象、インタラクティブ性を改善するためにできることはもっとたくさんあるのに、シンプルなテキストベースの表に留まる必要はありません。このあと、Tabulatorを改善するために組み込める追加機能について説明します。

ソート

ソートはすべての列で、デフォルトで有効になっており、任意の列のヘッダーをクリックするとその列のデータを並べ替えられます。

sortableパラメーターによって、列ごとにソートを有効または無効にできます。

$("#example-table").tabulator({
  columns:[
    {title:"Name", field:"name",  sortable:true}, //sorting enabled
    {title:"Progress", field:"progress", sortable:false}, //sorting disabled
  ],
});

デフォルトでは、すべての列がテキストとしてソートされます。sorterパラメーターでほかのソーターを指定できます。

$("#example-table").tabulator({
  columns:[
    {title:"Name", field:"name",  sortable:true}, //sort as string (default)
    {title:"Progress", field:"progress", sortable:true, sorter:"number"}, //sort as number
  ],
});

以下のようなソーターが利用できます。

• string：文字列としてソート（標準オプション）
• number：数値としてソート（整数または浮動小数、また、「,」セパレーターを使用する数値も扱える）
• alphanum：英数字文字列としてソート
• boolean：ブール値としてソート
• date：日付けとしてソート

独自のソーターを定義するには、コールバックをsorterパラメーターに渡します。コールバックは比較される2つの値の差を返す必要があります。

var customSorter = function(a, b, aData, bData){
  //a and b are the two values being compared
  //aData and bData are the row objects for the values being compared (useful if you need to access additional fields in the row data for the sort)

  return a - b; //return the difference between the two values
}

$("#example-table").tabulator({
  columns:[
    {title:"Progress", field:"progress", sortable:true, sorter:customSorter},
  ],
});

フォーマット

Tabulatorを使う場合、データをプレーンテキストとして表示するように決まっているわけではありません。フォーマッターを使用すると、各列の表示方法を指定できます。

以下のように、いろいろなフォーマッターがあります。

• plaintext：テキストとしてセルの値を表示（標準オプション）
• textarea：テキストを改行文字と一緒にそのまま表示（複数行テキストの場合）
• money：数値を通貨表記にフォーマット（例 1234567.8901 -> 1,234,567.89）
• email：指定された値にmailto:リンクをつけて、データをアンカーとしてレンダリング
• link：指定された値へのリンクがあるアンカーとしてデータをレンダリングる
• tick：値が（true|’true’|’True’|1）の場合は緑のチェックマークを、違う場合は空のセルを表示
• tickCross：値が（true|’true’|’True’|1）の場合は緑のチェックマークを、違う場合は赤のバツ印を表示
• star：整数値に基づいて星評価のグラフィックスを表示
• progress：セルの左から右へプログレスバーを表示（幅のパーセンテージとして0～100の値を使用）

formatterパラメーターでフォーマッターを指定できます。

$("#example-table").tabulator({
  columns:[
    {title:"Progress", field:"progress", formatter:"progress" },
  ],
});

独自のフォーマッターを定義するには、formatterパラメーターにコールバックを渡します。コールバックはセルに表示されるHTMLタグを返す必要があります。

var customFormatter = function(value, data, cell, row, options, formatterParams){
  //value - value of the cell
  //data - data for the row the cell is in
  //cell - DOM element of the cell
  //row - DOM element of the row
  //options - options set for this tabulator
  //formatterParams - parameters set for the column

  return "<div></div>"; // must return the HTML or jQuery element for the contents of the cell;
}

$("#example-table").tabulator({
  columns:[
    {title:"Progress", field:"progress", formatter:customFormatter},
  ],
});

フィルタ―処理

ユーザーにデータの一部のみを表示する必要がある場合、setFilter関数によってデータをフィルター処理できます。

$("#example-table").tabulator("setFilter", "progress", ">", 10);

この関数は、フィルター処理をするフィールド、比較関数（=、<、<=、>、>=、!= など）、フィルターの値の3つの引数を取ります。

もっと複雑なフィルター処理には、setFilter関数にコールバックを渡します。コールバックはブール値（trueは一致を示す）を返す必要があります。

var customFilter = (data){
  //data - data for the row being filtered

  return data.name == "bob" && data.progress < 50; //must return a boolean, true if it passes the filter.
}

$("#example-table").tabulator("setFilter", customFilter);

clearFilter関数を使用して既存のフィルターを消去します。

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

編集

Tabularを標準HTMLテーブルで使用する主なメリットは、テーブル内のデータを編集できるという点です。

事前に構成された多数のエディターを利用できます。

• input：プレーンテキスト
• textarea：複数行のテキスト、入力したテキストに合わせて垂直方向に行のサイズが変更される
• number：数値と増加ボタンおよび減少ボタン
• tick：チェックボックス
• star：星評価（左右の矢印キーを使用してマウスと同様に値の入力が可能）
• progress：プログレスバー（左右の矢印キーを使用してマウスと同様に値の入力が可能）

editableパラメーターで、列を編集可を設定できます。

$("#example-table").tabulator({
  columns:[
    {title:"Progress", field:"progress", formatter:"progress", editable:true},
  ],
});

デフォルトでは、その列のフォーマッターに適合するエディターが使用されます。ほかのエディターを指定するには、editorパラメーターを使用します。

$("#example-table").tabulator({
   columns:[
    {title:"Progress", field:"progress", formatter:"progress", editable:true, editor:"number"},
  ],
});

独自のエディターを定義するには、コールバックをeditorパラメーターに渡します。コールバックはセルに表示されるeditor要素を返します。falseを返すと、編集が中止され、セルが選択できなくなります。

var customEditor = function(cell, value, data){
  //cell - JQuery object for current cell
  //value - current value for current cell
  //data - data for the current row

  //create and style editor
  var editor = $("<select><option value=''></option><option value='male'>male</option><option value='female'>female</option></select>");

  editor.css({
    "padding":"3px",
    "width":"100%",
    "box-sizing":"border-box",
  });

  //set value of editor to the current value of the cell
  editor.val(value);

  //when the value has been set, trigger the cell to update
  editor.on("change blur", function(e){
    cell.trigger("editval", editor.val());
  });

  //return the editor element
  return editor;
}

$("#example-table").tabulator({
  columns:[
    {title:"Gender", field:"gender", editable:true, editor:customEditor},
  ],
});

テーブルに格納されたデータにアクセスするには、getData関数を使って、行データオブジェクトの配列を返します。

var data = $("#example-table").tabulator("getData");

フル機能の例

ここまでの説明を組み合わせると、豊富な機能を備えた、インタラクティブなテーブルを作成できます。

まだまだある便利な機能

基本的なTabulatorの作成方法および機能を追加して外観やユーザビリティを改善する方法について説明しました。

この記事は、テーブルの作成やカスタマイズに関するほんの一部を説明しています。ライブラリーにはユーザーにより優れたエクスペリエンスを提供するための機能が以下のように詰め込まれています。

• 行のグループ化
• 移動可能な行、列
• ページネーション
• CSSのスタイルとテーマ
• 大きなデータセット向けの先進的なレンダリング
• 永続的な列のレイアウト（ユーザー設定をクッキーに保存）
• テーブルレンダリングの段階ごとのコールバックやあらゆるタイプのユーザーインタラクション

記事を読んで、基本的なインタラクティブ性とスタイルをデータに追加して、HTMLテーブルをレベルアップする方法を理解してもらえれば幸いです。

Tabulatorを楽しんでください！

※本記事はStephan Max、Simon Codringtonが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。

（原文：Make Dynamic Tables in Seconds from Any JSON Data）

［翻訳：市川千枝／編集：Livit］