＊Tabulator とは
インタラクティブなテーブルを作成する際に便利な Javascript ライブラリで、多機能のテーブルを簡単に作成することができます。HTMLテーブルを Tabulator に変換して表示する方法と、JSONデータを読み込んで表示する方法があります。
実際に使って試してみました。
＊参考
＊環境
- MacOS
- Tabulator 4.1
＊ダウンロード
公式ドキュメントもしくは GitHubからファイルを取得してtabulator.css と tabulator.js をローカルに配置するか、CDNを使って読み込みます。今回はCDNを使う方法にしました。
HTMLファイルを新規作成し、下記を書き込みます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://unpkg.com/tabulator-tables@4.1.4/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.1.4/dist/js/tabulator.min.js"></script>
</head>
</html>
＊HTMLテーブルを変換
HTMLでIDを指定してテーブルを作成し、javascript でTabulator に変換します。new Tabulator()をするときに様々なオプションを設定することができます。今回使った設定は下記ですが、他にもまだあるので詳しくは公式ドキュメントを参照してください。- layout:“fitColumns”
- movableColumns:true
カラムの設定もすることができます。
- editor:true
- formatter
"star" を指定すると星型の表示にすることができます。"progress" を指定すると棒状の進捗を表示することができます。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://unpkg.com/tabulator-tables@4.1.4/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.1.4/dist/js/tabulator.min.js"></script>
</head>
<body>
<table id="student-table">
<thead>
<tr>
<th>Name</th>
<th>Progress</th>
<th>Gender</th>
<th>Rating</th>
<th>Favourite Color</th>
<th>Date Of Birth</th>
</tr>
</thead>
<tbody>
<tr>
<td>Taro</td>
<td>20</td>
<td>male</td>
<td>10</td>
<td>red</td>
<td>1980/12/01</td>
</tr>
<tr>
<td>Hanako</td>
<td>35</td>
<td>female</td>
<td>2</td>
<td>blue</td>
<td>1981/01/01</td>
</tr>
<tr>
<td>Mike</td>
<td>1</td>
<td>male</td>
<td>3</td>
<td>green</td>
<td>1982/03/01</td>
</tr>
<tr>
<td>Judy</td>
<td>40</td>
<td>female</td>
<td>5</td>
<td>pink</td>
<td>1983/05/22</td>
</tr>
<tr>
<td>Poul</td>
<td>80</td>
<td>male</td>
<td>12</td>
<td>white</td>
<td>1985/02/02</td>
</tr>
<tr>
<td>Anne</td>
<td>90</td>
<td>female</td>
<td>7</td>
<td>orange</td>
<td>1987/04/10</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var table = new Tabulator("#student-table", {
layout:"fitColumns",
movableColumns:true,
columns:[
{title:"Name", field:"name"},
{title:"Progress", field:"progress", sorter:"number", formatter:"progress"},
{title:"Gender", field:"gender"},
{title:"Rating", field:"rating", formatter:"star", editor:true},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", align:"center"},
],
})
</script>
</body>
</html>
上記のファイルをブラウザで表示するとテーブルが作成されます。
＊JSONデータからテーブルを作成
new Tabulator()をするときに、data:のオプションでJSONデータを指定するとそのデータを読み込んでテーブル表示することができます。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://unpkg.com/tabulator-tables@4.1.4/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.1.4/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div>
<script type="text/javascript">
var tableData = [
{id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
{id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
]
var dataTable = new Tabulator("#example-table", {
data:tableData,
layout:"fitColumns",
columns:[
{title:"Name", field:"name"},
{title:"Age", field:"age"},
{title:"Gender", field:"gender"},
{title:"Height", field:"height"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob"},
{title:"Cheese Preference", field:"cheese"},
],
})
</script>
</body>
</html>
上記のファイルをブラウザで表示するとテーブルが作成されます。
＊所感
導入も簡単ですし、オプションを設定するだけで多機能なテーブルを作成することができるので非常に便利でした。個人的にはレイアウトがシンプルすぎる気がしたので汎用的に変更できたら嬉しいですが、機能的には充分だと感じています。JSONデータをそのままテーブル表示させたい場面も多々あるので、必要な場面で使ってみたいと思います。
Sign up here with your email
ConversionConversion EmoticonEmoticon