TablerはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

HTMLテーブルは様々な場面で使われます。そのため、より使い勝手よくカスタマイズしたり表示をダイナミックに変更したいと言ったニーズが出てきます。そこで今回はJSONからテーブルを表示するTablerを紹介します。

[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 9.56.38_thumb.1375706392.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 9.56.38.1375706392.png)
基本的な使い方。カラムを定義してJSONデータを当てはめるだけです。

[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 9.56.55_thumb.1375706395.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 9.56.55.1375706395.png)
全てを表示するのではなく、指定したキーだけを表示させる事もできます。

[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 9.57.17_thumb.1375706398.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 9.57.17.1375706398.png)
Ajaxデータで取得したデータを使って表示をよりダイナミックに。

[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 9.57.23_thumb.1375706402.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 9.57.23.1375706402.png)
ページネーション付き。ページ番号またはnextボタンで次のリストに遷移します。

Tablerでは元々データがJSONであり、レンダリングはTablerに任せる事ができます。システム側から出力されるリストに合わせてテーブルの表記を変更する事も簡単でしょう。ベタにHTMLタグを書くよりも柔軟に使えそうです。

MOONGIFTはこう見る

Webベースの基幹系システムでは必ずテーブル表示が使われます。その時に目標になるのが表計算(Excel)です。テーブルをリッチ化してExcel並の操作ができるようになっているライブラリもありますが、正直そこまで機能が必要かと言われるとそうでもありません。

要件としてあがるのは並び替えとカラムの移動、インライン編集そして一括処理ではないかと思います。その辺りを満たせるライブラリを見つけてしまえば8割方のニーズは満たせるのではないでしょうか。

Tabler demos

BrandwatchLtd/tabler