ここではTabulatorの表示機能について解説します。データの編集については触れません。
Tabulatorは、HTML上で多機能かつ高品質なテーブルを直感的に作成できる強力なJavaScriptライブラリです。従来の単純なHTMLの表とは異なり、Excelのような高度な操作をウェブブラウザ上で実現します。 主な特徴は、動的なデータのソート、多機能なフィルタリング、セル内での直接編集、ドラッグ＆ドロップによる列の並べ替え、そしてウィンドウ枠の固定（frozen columns）などです。また、仮想DOM（Virtual DOM）技術を採用しているため、数万行規模の膨大なデータであっても、メモリ消費を抑えながら非常に高速で滑らかな描画が可能です。 JSON、CSV、TSVなど多様なデータ形式を簡単に取り込めるほか、CSSによるデザインのカスタマイズ性も高く、業務用のデータ管理システムから分析ツールまで、データ集約型のアプリケーション開発において世界中で広く採用されています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSSの読み込み -->
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<!-- JSの読み込み -->
<script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="example-table"></div>
<script>
// 表示するデータ
var tableData = [
{ id: 1, name: "田中", age: 25 },
{ id: 2, name: "鈴木", age: 30 },
];
// テーブルの設定
var table = new Tabulator("#example-table", {
data: tableData, // データの設定
columns: [
{ title: "ID", field: "id", width: 50 },
{ title: "名前", field: "name", width: 150 },
{ title: "年齢", field: "age", hozAlign: "right" },
],
});
</script>
</body>
</html>カラムやデータを後から設定します。
// テーブルの設定
var table = new Tabulator("#example-table");
setTimeout(() => {// 非同期化
var columns = [
{ title: "ID", field: "id", width: 50 },
{ title: "名前", field: "name", width: 150 },
{ title: "年齢", field: "age", hozAlign: "right" },
];
var tableData = [
{ id: 1, name: "田中", age: 25 },
{ id: 2, name: "鈴木", age: 30 },
];
table.setColumns(columns);
table.setData(tableData);
}, 100)データに2次元配列を設定します。
この場合、カラムのfieldには数値を設定します。
// テーブルの設定
var table = new Tabulator("#example-table");
setTimeout(() => {// 非同期化
var columns = [
{ title: "ID", field: "0", width: 50 },
{ title: "名前", field: "1", width: 150 },
{ title: "年齢", field: "2", hozAlign: "right" },
];
var tableData = [
[1, "田中", 25],
[2, "鈴木", 30],
];
table.setColumns(columns);
table.setData(tableData);
}, 100)カラムを移動可能にします。 表示されたカラムをマウスでドラッグアンドドロップして動かすことができます。
// テーブルの設定
var table = new Tabulator("#example-table", {
movableColumns: true, // カラムの移動を可能にする
});layoutoオプションを設定することで、テーブルのレイアウトを変更できます。
- fitData: データに合わせて変更されます。
- fitDataFill: データに合わせて変更され、行がテーブルの全幅を占めるようになります。
- fitDataStretch: データに合わせて変更され、行がテーブルの全幅を占めるようになります。
- fitDataTable: データに合わせて変更され、行がテーブルの全幅を占めるようになります。
- fitColumns: 列のサイズがデータに合わせて変更されます。
レイアウト オプションを fitDataFill に設定すると、テーブルの列のサイズがデータに合わせて変更され、行がテーブルの全幅を占めるようになります。
// テーブルの設定
var table = new Tabulator("#example-table", {
layout: "fitDataFill", // レイアウトをfitDataFillに設定
});レイアウト オプションを fitDataStretch に設定すると、テーブルの列のサイズがデータに合わせて変更され、行がテーブルの全幅を占めるようになります。
// テーブルの設定
var table = new Tabulator("#example-table", {
layout: "fitDataStretch", // レイアウトをfitDataStretchに設定
});フィルターを付けることで、テーブルのデータを絞り込むことができます。 フィルターはテーブル全体に適用するものと、特定の列に適用するものがあります。
テーブル全体にフィルターを書けます。 table.setFilter(field, type, value)の形式でしています。
// テーブルの設定
var table = new Tabulator("#example-table", {
movableColumns: true,
layout: "fitDataStretch",
});
setTimeout(() => {// 非同期化
var columns = [
{ title: "ID", field: "0", width: 50 },
{ title: "名前", field: "1", width: 150, headerFilter: "input" }, // フィルターを追加する
{ title: "年齢", field: "2", hozAlign: "right" },
];
var tableData = [
[1, "田中", 25],
[2, "鈴木", 30],
];
table.setColumns(columns);
table.setData(tableData);
table.setFilter("name", "like", "田"); // フィルターをかける
}, 1)typeには次の値を指定できます。
- like
- =
- !=
- <
- <=
- >
- >=
- in
- not in
- between
- not between
- is
- is not
- null
- not null
- empty
- not empty
同じsetFilter関数でも値の指定の仕方によって、フィルターの条件が変わります。
table.setFilter("name", "in", ["steve", "bob", "jim"]);
function customFilter(data, filterParams){
//data - the data for the row being filtered
//filterParams - params object passed to the filter
return data.name == "bob" && data.height < filterParams.height; //must return a boolean, true if it passes the filter.
}
table.setFilter(customFilter, {height:3});
The filtering example above shows how to apply a series of filters to some table data and show only the data where all the filters are matched, but what if you want to use an OR type comparison. より複雑なフィルターを指定するために、フィルター配列内にフィルターの配列を配置します。 配列内はAND条件になり、配列内の配列はOR条件になります。 以下の例では、年齢が52歳以上かつ（かつ、身長が142未満、または名前がsteveである）行を通過させるフィルターを適用しています。
table.setFilter([
{field:"age", type:">", value:52}, //filter by age greater than 52
[
{field:"height", type:"<", value:142}, //with a height of less than 142
{field:"name", type:"=", value:"steve"}, //or a name of steve
]
]);// テーブルの設定
var table = new Tabulator("#example-table", {
movableColumns: true,
layout: "fitDataStretch",
});
setTimeout(() => {// 非同期化
var columns = [
{ title: "ID", field: "0", width: 50 },
{ title: "名前", field: "1", width: 150, headerFilter: "input" }, // フィルターを追加する
{ title: "年齢", field: "2", hozAlign: "right" },
];
var tableData = [
[1, "田中", 25],
[2, "鈴木", 30],
];
table.setColumns(columns);
table.setData(tableData);
}, 1)// テーブルの設定
var table = new Tabulator("#example-table", {
movableColumns: true,
layout: "fitDataStretch",
});
setTimeout(() => {// 非同期化
var columns = [
{ title: "ID", field: "0", width: 50 },
{
title: "名前", field: "1", width: 150,
headerFilter: "list", // 選択式のフィルターを追加する
headerFilterParams: {
values: ["田中", "鈴木"],// 田中と鈴木でフィルターをかけれる
multiselect: true, // 複数選択可能
clearable: true,
},
headerFilterFunc: "in", // OR条件 (リストに含まれるか)
},
{ title: "年齢", field: "2", hozAlign: "right" },
];
var tableData = [
[1, "田中", 25],
[2, "鈴木", 30],
];
table.setColumns(columns);
table.setData(tableData);
}, 1)