Tabulatorについて

投稿日：2022年03月14日 11時20分01秒
更新日：2022年03月23日 17時23分14秒

デモ

説明・補足・注意事項

これは公式の「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	数値を通貨表記にフォーマットして表示フォーマットの指定が必要。	〇
image	srcを値として設定してimg要素を表示フォーマットの指定が必要。	〇
link	指定された値へのリンクを持つアンカーとしてデータをレンダリングフォーマットの指定が必要。	〇
datetime	日時の表示を行う。	〇	luxon.jsライブラリが必要
datetimediff	2つの日時の違いを表示	〇	luxon.jsライブラリが必要
tickCross	値がTrueなら緑のチェック、それ以外は赤の十字	〇
color	セル背景色を指定
star	整数値に基づいてグラフィカルなスター評価を表示	〇
traffic	セルの数値に応じて色が変わる色付きの円を表示	〇
progress	幅のパーセンテージとして0〜100の値を使用して、セルを左から右に塗りつぶすプログレスバーを表示	〇
lookup	*formatterParams*プロパティに渡されたオブジェクトから表示する値を検索	〇
buttonTick	各行にチェックアイコンを表示	〇
buttonCross	各行に十字アイコンを表示	〇
rownum	表示される各行の増分行番号を表示
handle	行ハンドルとして使用されるハンバーガーバーを表示