「Webサイトに表を載せたいけれど、HTMLの<table>タグだけではどうしても味気ないし、ソートや検索の機能をつけるのは大変…」
そんな経験はありませんか？
Tabulatorを使えば、難しいプログラミング知識がなくても、Excelのように並べ替えや検索ができる“動きのあるテーブル”を簡単に作ることができます。
この記事では、初心者でも安心して導入できるTabulatorの使い方を、コピペでそのまま試せるサンプルコード付きで解説します。
管理画面や社員名簿をWebに公開したい担当者から、ポートフォリオを充実させたい学生まで、幅広く役立つ内容になっています。
まずは実際に「動く表」を体験しながら、その便利さを感じてみましょう。
Tabulatorとは？
Web制作でデータを表として見せたいとき、多くの人はまずHTMLの<table>タグを使います。
しかし、HTMLのテーブルだけでは「並べ替え」や「検索」といった便利な機能をつけるのは難しく、管理画面やポートフォリオで使うには物足りない場面が出てきます。
そこで役立つのが「Tabulator」です。
TabulatorはJavaScriptで簡単に表を作成・操作できるライブラリで、Excelのようにデータを並べ替えたり検索したりできるようになります。
導入も軽量で、HTMLだけでは大変だった操作性を短いコードで実現できます。
利用シーンを考えると、個人開発者は自作アプリやポートフォリオの中で使うとデータを魅力的に見せられます。
中小企業のWeb担当者は、社員名簿や商品リストを「検索付き」で公開でき、ユーザーにとっても便利です。
学生の場合は、課題や研究データを表にまとめる際に役立ちます。
こうした多様な利用シーンにフィットするのがTabulatorの魅力です。
導入方法
Tabulatorを使う最も簡単な方法はCDNを使うことです。
公式の配布先から提供されているリンクをHTMLファイルに追加すればすぐに利用できます。
開発環境に慣れている人はnpmやyarnを利用してインストールすることも可能ですが、最初はCDNを貼り付ける方法で十分です。
以下は最小限のサンプルコードです。
このコードをコピーしてHTMLファイルとして保存し、ブラウザで開くだけで「動くテーブル」を確認できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Tabulatorサンプル</title>
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script></script>
</head>
<body>
<h1>Tabulatorデモ</h1>
<div id="example-table"></div>
<script>
var table = new Tabulator("#example-table", {
data:[
{id:1, name:"田中太郎", age:29, hobby:"読書"},
{id:2, name:"鈴木花子", age:34, hobby:"旅行"},
{id:3, name:"佐藤健", age:22, hobby:"映画鑑賞"}
],
columns:[
{title:"ID", field:"id"},
{title:"名前", field:"name"},
{title:"年齢", field:"age"},
{title:"趣味", field:"hobby"}
]
});
</script>
</body>
</html>このコードを開くと、名前や年齢の入った表が表示され、列のヘッダーをクリックすると並べ替えができることが確認できます。
たったこれだけでHTMLの単純なテーブルとは違う「動きのある表」が実現できるのです。
See the Pen Tabulatorデモ by yuichi (@yhamada1205) on CodePen.
基本の使い方（最低限おさえたい操作）
Tabulatorを導入したら、まず覚えておきたいのは「データの表示方法」と「列の定義」です。
データは配列やJSONをそのまま渡すことができるため、APIから取得したデータも簡単に表示できます。
列の定義では、タイトルやフィールド名、幅などを設定します。
ソートやページング、フィルタリングはTabulatorが自動で処理してくれるので、複雑なコードを書く必要はありません。
たとえば社員リストや商品データが100件あっても、ページを分割して表示できるので閲覧がスムーズになります。
以下は基本的な設定をまとめた表です。
コピペで利用できるように覚えておくと便利です。
| 設定内容 | 記述例 | 説明 |
|---|---|---|
| データの渡し方 | data:[{id:1, name:"山田"}] | JSON配列を渡してテーブルに表示 |
| 列の定義 | {title:"名前", field:"name"} | 表のヘッダー名とデータ項目を指定 |
| ソート | {title:"年齢", field:"age", sorter:"number"} | 数字として並べ替え可能 |
| ページング | pagination:"local", paginationSize:5 | ページごとに表示件数を制御 |
| フィルタ | table.setFilter("name","like","田中") | 「田中」を含むデータだけ表示 |
このように、必要な機能を数行の設定で加えられるのがTabulatorの大きな強みです。
Tabulatorでできること
Tabulatorの魅力は、Excel風の操作が簡単に実現できることです。
列の並べ替えや検索、ページネーションはもちろん、CSVやExcel形式へのエクスポートも可能です。
これは学生が研究データを整理する場面や、Web担当者が業務用データを公開する場面で特に役立ちます。
さらにセルを直接編集することもでき、チェックボックスやテキスト入力などのインタラクティブな機能も簡単に追加できます。
たとえば次のように列にeditor:"input"を追加すれば、その列を直接編集できるようになります。
columns:[
{title:"名前", field:"name", editor:"input"},
{title:"年齢", field:"age", sorter:"number", editor:"input"}
]ほんの数行の設定で、表が「見るだけ」から「操作できるUI」に変わるのが大きな魅力です。
See the Pen Tabulatorデモ by yuichi (@yhamada1205) on CodePen.
よくあるつまずきポイント（FAQ）
- QCDNリンクを入れたのにテーブルが表示されません。どうすればいいですか？
- A
TabulatorのCSSやJavaScriptが正しく読み込まれていない可能性があります。読み込み順やパスを確認してください。
<head>にCSSを入れ、JavaScriptは</body>の直前に読み込むと安定します。
- Q日本語のデータでも使えますか？
- A
問題なく使えます。検索やフィルタリングも日本語に対応しているので、社員名簿や商品リストなど日本語データでも安心して利用できます。
- Q既存のHTMLテーブルをそのまま利用できますか？
- A
はい、可能です。Tabulatorには既存の
<table>を変換して使う機能があります。ただし、列ごとのソート方法やエクスポート機能などを安定して活用するには、データをJSON形式に変換し、列をJavaScriptで定義する方法がおすすめです。ここで「HTMLテーブル利用」と「JSON利用」の違いを整理しておきます。
利用方法 メリット デメリット HTMLテーブルを変換 既存のテーブルをそのまま活用できる 列設定が限定的、柔軟な機能追加に弱い JSONデータを渡す ソート・フィルタ・エクスポートに強い データを準備する手間がかかる
まとめ
Tabulatorは初心者でも導入が簡単で、Excel風の便利な表をWebに実装できるライブラリです。
コピペで動かせるサンプルから始めて、少しずつソートや検索、エクスポートなどの機能を追加していけば、自分のWebサイトやアプリに合った「操作しやすい表」が作れるようになります。
今回紹介したのは基礎的な部分にとどめましたが、TabulatorにはAjax連携やカスタムフォーマッター、イベント制御など応用的な機能も数多く備わっています。
これらについては別の記事で紹介する予定ですので、まずは今回の内容で「Tabulatorがどう便利なのか」を体感してみてください。
あわせて、より軽量でシンプルにテーブルへ検索やソートを追加できるライブラリ「List.js」の解説記事も参考になります。用途に合わせて使い分けると便利です。
