Tabulator は HTMLテーブルの id を指定することでテーブルのデータ を読み込み、表示することができます。
TabulatorドキュメントLoad Data from HTML Table より抜粋
HTMLテーブル要素から直接Tabulatorテーブルを作成できます。 columnsオプションを使用して通常の方法で列を定義するか、テーブルのtheadのth要素として列を設定できます。 テーブルのtbodyにあるデータの行はすべて、結果のテーブルに表示されるtabulatorデータに自動的に変換されます。 テーブルヘッダーセルでwidth属性を定義する場合、これを使用してTabulatorの列の幅を設定します。
| ヘッダー1 | ヘッダー2 |
|---|---|
| 1000 | 2000 |
| 1500 | 30000 |
テーブルヘッダーの文字列を指定して、カラム定義をすることができます。
var t = new Tabulator("#table",{
columns: [
{title:"ヘッダー1",align:"right",bottomCalc:"sum"},
{title:"ヘッダー2",align:"center",formatter:"money",width:200}
]
})
HTMLのテーブルになれているならテーブルでデータを記述して、 Tabulator でカラム定義するほうが、簡単かもしれません。 また、既存の HTMLテーブルを Tabulator フォーマットで 表示するのに便利です。
データ定義
<table id="table" border=1>
<thead>
<tr><th>ヘッダー1</th><th >ヘッダー2</th></tr>
</thead>
<tbody>
<tr><td>1000</td><td>2000</td></tr>
<tr><td>1500</td><td>30000</td></tr>
</tbody>
</table>
サンプルコード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="https://unpkg.com/tabulator-tables@4.4.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.4.3/dist/js/tabulator.min.js"></script>
</head>
<body onload="show_table()">
<h1 id=title>HTML テーブルを Tabulator で表示</h1>
<table id="table" border=1>
<thead>
<tr><th>ヘッダー1</th><th >ヘッダー2</th></tr>
</thead>
<tbody>
<tr><td>1000</td><td>2000</td></tr>
<tr><td>1500</td><td>30000</td></tr>
</tbody>
</table>
<script type="text/javascript">
var show_table = function(){
var t = new Tabulator("#table",{
columns: [
{title:"ヘッダー1",align:"right",bottomCalc:"sum"},
{title:"ヘッダー2",align:"center",formatter:"money",width:200}
]
})
}
</script>