• 投稿日:2022年03月14日 11時20分01秒
  • 更新日:2022年03月23日 17時23分14秒
Tabulatorについて

Tabulatorについて

デモ

説明・補足・注意事項

これは公式の「Frozen Columns」のjavascriptを使い、それに合ったデータを私が作り表示したものです。

詳しくはこちらのFrozen Columnsを参照ください。

詳細

ここではTabulatorを使うための環境構築、Tabulatorにあるプロパティや関数をざっくり紹介しています。

準備

必要ファイルをダウンロード

Tabulator公式ページから最新vをダウンロードします。

ダウンロードしたら解凍して、サーバの任意のところに配置してください。
当然ですが、使いたいページからhttpでアクセスできるところにおいてくださいね。

設定

Tabulatorを使いたいWebページのheadにTabulatorを読み込む記述をします。
具体的には以下のようになります。

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

上記は表示するWebページと同じ階層に準備でダウンロードして解凍したものを置いた場合です。

ちなみにCDMだと以下のようになります。

<link href="https://unpkg.com/tabulator-tables@5.1/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.1/dist/js/tabulator.min.js"></script>

開発

表示したい位置にdivタグを記述しておきます。
ここへのセレクタをTabulatorに渡す必要があるので、それを意識してid属性やclass属性を付けてください。

そしてそれ以降にTabulatorに関する記述をjavascriptで記述します。
下のはもぐもプログラミング様のものを一部転載しています。

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

第一引数に表示位置タグのセレクタ、第二引数に表示方法や表示内容について配列で指定します。

どのような表示にするかレイアウトを複数用意してくれているので、こちらをみて自分に合いそうなのを探してください。

これだけでオシャレなテーブルが作成されます。


phpと絡めて使う場合

<?php // ここはテストデータを作っているところです。
	class dataTemplate{
		public $id = "";
		public $name = "";

		function __construct($_id, $_name){
			$this->id = $_id;
			$this->name = $_name;
		}
	}
	$inputDatas = array();

	$inputDatas[0] = new dataTemplate("1", "AAA");
	$inputDatas[1] = new dataTemplate("2", "BBB");
	$inputDatas[2] = new dataTemplate("3", "CCC");

?>
<div id="example-table"></div>
<script type="text/javascript">
	var tableData = []; 
</script>
<?php foreach($inputDatas as $inputData): ?> 

	<script type="text/javascript">

		var actionElm = ""; 
		actionElm = actionElm.concat('<form class="side-by-side clm2" action="http://localhost:8080/tabulator/delete/' + '<?php echo $inputData->id; ?>' + '" >');
		actionElm = actionElm.concat('<button type="button" class="clmItem" onclick="location.href=\'http://localhost:8080/tabulator/link/' + '<?php echo $inputData->id; ?>' + '\'">リンクボタン</button>');
		actionElm = actionElm.concat('<button type="submit" class="clmItem" >submitボタン</button>');
		actionElm = actionElm.concat('</form>');

		var tableData_row = {id:"<?php echo $inputData->id; ?>", name:"<?php echo $inputData->name; ?>", action:actionElm};

		tableData.push(tableData_row);

	</script>
  
<?php endforeach; ?>

<script type="text/javascript">

	var dataTable = new Tabulator("#example-table", {
		data:tableData,
		layout:"fitColumns",
		columns:[
			{title:"Name", field:"name"},
			{title:"Action", field:"action", formatter:"html"},
		],
	})
</script>

これはphpで連想配列なデータを取得し、それをテーブルに表示したいという要望に応えるために作ったテストプログラムコードです。

phpからjavascriptへ配列を変化し、それをTabulatorに渡すことで実現しています。

本当は関数化したりする必要があると思いますが、今回は動けばいいという感じで作っています。


以下はTabulatorについてわかったことやプロパティと値など記載しています。
メモ書きのため全てを網羅しているわけでもなく、バージョン差も意識しているわけではないのでご注意ください。

プロパティ

data

表示したいデータをjson形式の配列で指定してください。

layout

Tabulatorでは表示方法を複数用意しており、layoutに指定するだけで表示方法を指定することが出来ます。

詳しくはこちらをどうぞ。
※わざとURLからバージョンを削除しています。どうもサーバ側が最新に飛ばしてくれるみたいです。

selectable

行選択の可否を設定できます。

addRowPos

新規行の追加について設定します。例ではbottomを指定したTabulatorにaddRow({})関数を実行することで行追加を実現しています。

formatter

列に対して表示データの形式を指定します。結構な種類があるので詳しくはこちらを参照ください。

説明formatterParamsの指定有無備考
plaintext既定値。
セルの値をテキストとして表示
textarea改行がそのままのテキストを表示
html値をHTMLとしてそのまま表示
money数値を通貨表記にフォーマットして表示
フォーマットの指定が必要。
imagesrcを値として設定してimg要素を表示
フォーマットの指定が必要。
link指定された値へのリンクを持つアンカーとしてデータをレンダリング
フォーマットの指定が必要。
datetime日時の表示を行う。luxon.jsライブラリが必要
datetimediff2つの日時の違いを表示luxon.jsライブラリが必要
tickCross値がTrueなら緑のチェック、それ以外は赤の十字
colorセル背景色を指定
star整数値に基づいてグラフィカルなスター評価を表示
trafficセルの数値に応じて色が変わる色付きの円を表示
progress幅のパーセンテージとして0〜100の値を使用して、セルを左から右に塗りつぶすプログレスバーを表示
lookupformatterParamsプロパティに渡されたオブジェクトから表示する値を検索
buttonTick各行にチェックアイコンを表示
buttonCross各行に十字アイコンを表示
rownum表示される各行の増分行番号を表示
handle行ハンドルとして使用されるハンバーガーバーを表示

この他にもモジュールフォーマッタと呼ばれるものもあります。
詳しく知りたい方はこちらをどうぞ。


関数

addRow(object)

行を追加します。引数にdataと同じjson形式を指定すると新規データ行を追加できるようです。

deleteRow(int)

行を削除します。削除行番号を引数に指定する見たいです。

clearData()

テーブルの表示データを全て消します。

setData(object)

テーブルに表示データをセットします。追加ではなく、引数のデータセットに書き換えるという処理です。

指定方法はdataプロパティと同じです。

最後に

SPECIAL THANKS

  1. Tabulator -Tabulator-
  2. Tabulator tips -SOUM/misc-
  3. Tabulator を使ってみました -もぐもぐプログラミング-
WEB AR開発 A-Frame AR.js
JSアニメーション:文字の登場
画面右下固定のスクロールボタン
ajax通信でWordPressの記事情報を取得する
要素を取得・操作する
Tabulatorについて
モーダルな画面を表示をする
ある要素が画面に表示されたら処理を実行する