【初心者向け】Tabulatorの検索機能は超簡単！フィルターの基本から応用まで徹底解説

「データはたくさんあるのに、必要な情報がなかなか見つけられない…」

Webサイトで顧客リストや商品カタログのような大量のデータを扱っているとき、そう感じたことはありませんか？
必要な情報を探すために、一つひとつのデータを目で追うのは大変ですよね。

この記事ではあなたの持つ表をより便利にするためのフィルター機能について、基本から実践的な使い方まで、2つの主要な実装方法に絞って丁寧に解説します。

---

Tabulatorのフィルター機能とは？

Tabulatorのフィルター機能は、表に表示されたデータの中から特定の条件に一致する行だけを絞り込んで表示するための機能です。

例えばたくさんの社員データの中から「開発部に所属する30代の社員」だけを表示したいとき、このフィルター機能が役立ちます。

この機能を実装するには、主に以下の2つの方法があります。

1. 外部UIで操作する: 表の外に設置した検索ボックスやボタンを使ってフィルターをかける方法。
2. ヘッダーに直接UIを設置する: 各カラムのヘッダーにドロップダウンや入力欄を組み込む方法。

どちらの方法も強力ですが、それぞれ得意な役割があります。
まずは、最も汎用性が高い外部UIを使った方法から見ていきましょう。

---

実装方法1：外部UIでテキスト検索を実装（setFilter）

この方法では、HTMLで用意した検索ボックスにユーザーが入力したテキストをTabulatorのsetFilterメソッドに渡すことでフィルターを適用します。

HTMLの準備

まず、検索用のテキスト入力欄をHTMLに用意しましょう。
プレースホルダーに「氏名を入力」と入れることで、ユーザーはどの項目を検索できるか一目で分かります。

<input type="text" id="name-search" placeholder="氏名を入力...">
<div id="example-table"></div>

JavaScriptの実装コード

次に、Tabulatorのインスタンスを作成し、入力欄の変更を検知してフィルターを適用するコードを記述します。

// Tabulatorインスタンスの作成
const table = new Tabulator("#example-table", {
  data: [
    {id:1, name:"田中太郎", age:29, gender:"男性", city:"東京"},
    {id:2, name:"佐藤花子", age:34, gender:"女性", city:"大阪"},
    {id:3, name:"鈴木一郎", age:41, gender:"男性", city:"名古屋"},
    {id:4, name:"山田美香", age:25, gender:"女性", city:"東京"},
    {id:5, name:"高橋健太", age:37, gender:"男性", city:"福岡"},
  ],
  layout: "fitColumns",
  columns: [
    {title:"ID", field:"id"},
    {title:"名前", field:"name"},
    {title:"年齢", field:"age"},
    {title:"性別", field:"gender"},
    {title:"居住地", field:"city"},
  ],
});

// 入力欄の変更を検知してフィルターを適用
document.getElementById("name-search").addEventListener("keyup", function(){
  const filterValue = this.value;
  table.setFilter("name", "like", filterValue);
});

このコードでは、ユーザーがキーボードを叩くたびにsetFilterメソッドを実行し、リアルタイムに表を絞り込んでいます。

コードのポイント

このコードの肝となるのは、table.setFilter("name", "like", filterValue)です。

• 1つ目の引数 “name”：フィルターをかけるカラムのfield名を指定します。
• 2つ目の引数 “like”：フィルターの比較演算子を指定します。"like"は「部分一致」を意味します。
• 3つ目の引数 filterValue：絞り込みたい値を指定します。

このメソッドを使うことで、外部のUIから柔軟にフィルターをコントロールできます。

See the Pen Tabulatorサンプル-フィルター by yuichi (@yhamada1205) on CodePen.

---

実装方法2：ヘッダーにドロップダウンを設置（headerFilter）

こちらは、各カラムヘッダーに直接フィルターUIを組み込む方法です。
性別や居住地など、選択肢が決まっているデータに特に便利です。

この方法では、headerFilterオプションに"list"を指定することで、ドロップダウンリストによるフィルターを実装します。

HTMLの準備

この実装方法では、HTMLは<div>タグだけで十分です。

<div id="example-table"></div>

JavaScriptの実装コード

const table = new Tabulator("#example-table", {
  data: [
    {id:1, name:"田中太郎", age:29, gender:"男性", city:"東京"},
    {id:2, name:"佐藤花子", age:34, gender:"女性", city:"大阪"},
    {id:3, name:"鈴木一郎", age:41, gender:"男性", city:"名古屋"},
    {id:4, name:"山田美香", age:25, gender:"女性", city:"東京"},
    {id:5, name:"高橋健太", age:37, gender:"男性", city:"福岡"},
  ],
  layout: "fitColumns",
  columns: [
    {title:"ID", field:"id"},
    {title:"名前", field:"name"},
    {title:"年齢", field:"age"},
    {title:"性別", field:"gender", headerFilter:"list", headerFilterParams:{values:{"":"全て", "男性":"男性", "女性":"女性"}}},
    {title:"居住地", field:"city", headerFilter: "list", headerFilterParams:{values:{"":"全て", "東京":"東京", "大阪":"大阪", "名古屋":"名古屋", "福岡":"福岡"}}},
  ],
});

headerFilter: "list"とすることで、カラムヘッダーにドロップダウンフィルターが自動的に生成されます。
headerFilterParamsで選択肢の値を指定すると、ユーザーはリストから簡単に絞り込みが行えます。

See the Pen Tabulatorサンプル-フィルター2 by yuichi (@yhamada1205) on CodePen.

---

応用編：複数の条件で絞り込む

ここからは、さらに実践的な使い方です。複数のフィルターを組み合わせて、より詳細な条件でデータを絞り込む方法を解説します。

例えば、記事の冒頭で触れた「開発部に所属する30代の社員」というAND条件でデータを絞り込むフィルターを、外部UIを使って実装してみましょう。

HTMLの準備

今回は、部署名と年齢を絞り込むためのドロップダウンを用意します。

<p>
  部署：<select id="department-filter">
    <option value="">全て</option>
    <option value="開発部">開発部</option>
    <option value="営業部">営業部</option>
    <option value="広報部">広報部</option>
  </select>
  年齢：<select id="age-filter">
    <option value="">全て</option>
    <option value="20代">20代</option>
    <option value="30代">30代</option>
    <option value="40代">40代</option>
  </select>
</p>
<div id="example-table"></div>

JavaScriptの実装コード

複数のUIから値を取得し、setFilterに配列として渡すことで、AND条件での絞り込みが可能です。

// Tabulatorインスタンスの作成
const table = new Tabulator("#example-table", {
  data: [ 
    {id:1, name:"田中太郎", department:"開発部", age:34},
    {id:2, name:"佐藤花子", department:"営業部", age:25},
    {id:3, name:"鈴木一郎", department:"開発部", age:41},
    {id:4, name:"山田美香", department:"広報部", age:32},
    {id:5, name:"高橋健太", department:"開発部", age:28},
  ],
  layout: "fitColumns",
  columns: [
    {title:"ID", field:"id"},
    {title:"名前", field:"name"},
    {title:"部署", field:"department"},
    {title:"年齢", field:"age"},
  ],
});

// UIの要素を取得
const departmentFilter = document.getElementById("department-filter");
const ageFilter = document.getElementById("age-filter");

// 複数UIの変更をまとめて検知
function applyFilters() {
  const filters = [];

  // 部署フィルター
  if (departmentFilter.value) {
    filters.push({field:"department", type:"=", value:departmentFilter.value});
  }

  // 年齢フィルター
  if (ageFilter.value === "20代") {
    filters.push({field:"age", type:">=", value:20}, {field:"age", type:"<", value:30});
  } else if (ageFilter.value === "30代") {
    filters.push({field:"age", type:">=", value:30}, {field:"age", type:"<", value:40});
  } else if (ageFilter.value === "40代") {
    filters.push({field:"age", type:">=", value:40});
  }

  // フィルターを適用
  table.setFilter(filters);
}

// 各UIの変更を検知
departmentFilter.addEventListener("change", applyFilters);
ageFilter.addEventListener("change", applyFilters);

このコードでは、applyFilters関数を共通で呼び出すことで、どのUIが操作されてもまとめてフィルターを適用します。
setFilterに配列を渡すことで、配列内のすべての条件が満たされた場合にのみ行が表示されます。

See the Pen Tabulatorサンプル-フィルター応用1 by yuichi (@yhamada1205) on CodePen.

---

FAQ

---

まとめ

Tabulatorのフィルター機能を活用すれば、大量のデータの中から欲しい情報を一瞬で探し出すことができます。
ポイントを整理すると以下の通りです。

• 外部UIを使う場合 → setFilterで自由度の高い検索フォームを実装できる
• ヘッダーに直接設置する場合 → headerFilterで直感的に使える絞り込みを提供できる
• 複数条件を組み合わせる場合 → 配列形式で指定すればAND条件による柔軟なフィルターが可能

つまり、ユーザーの操作スタイルや用途に合わせて「外部UI」と「ヘッダーフィルター」を使い分けることが、表をより便利にするコツです。

フィルター機能を適切に設計すれば、データの検索性が格段に上がり、利用者にとって「探しやすい」「使いやすい」テーブルを提供できるでしょう。

テーブルを全幅表示する方法については以下の記事を参考にしてみてください。