Parallels Desktop 5% OFFクーポンCheck!

Tabulatorの使い方 jQuery不要 DataTables代替

Tabulator

みんな、テーブルってどうしてる?

というわけで、絞り込みや並べ替えなどの機能を備えた多機能なHTMLテーブルを作成できるJavaScriptライブラリのTabulatorの使い方を解説していきます。

私はこれまでDataTablesを使ってきたのですが、DataTablesはjQueryに依存するんですよね。TabulatorはjQueryなしで動作するので乗り換えを決意した次第です。では、いってみよう。

目次

Tabulatorのインストール

ここでは、CDNを使う方法とnpmを使う方法を解説します。他の方法もあるので下記のリンクでご確認くだちゃい(かわいい)。

CDNを使う

CDNを利用する場合はHTMLの<head>に次の2行を追加します。この場合、常に最新のバージョンのTabulatorが読み込まれます。

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

npmを使う

npmを使用する場合は次のコマンドを実行します。

npm install tabulator-tables

そしてHTMLの<head>でCSSとJSを読み込みます。

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

データの読み込み

HTMLテーブルから読み込む

通常のHTMLテーブルを作成します。<table> に任意の id を設定しておきます。

<table id="example-table">
  <thead>
    <tr><th>名前</th><th>おすすめ度</th><th>チェック</th><th>日付</th></tr>
  </thead>
  <tbody>
    <tr><td>さまよえるオランダ人</td><td>5</td><td>true</td><td>2022-07-01</td></tr>
    <tr><td>山田ちぬ</td><td>3</td><td>false</td><td>2022-07-01</td></tr>
    <tr><td>ユッスー・ンドゥール</td><td>4</td><td>true</td><td>1959-10-01</td></tr>
    <tr><td>アッヘンバッハ三姉妹</td><td>2</td><td>true</td><td>2021-01-31</td></tr>
    <tr><td>絶対傘ささないマン</td><td>1</td><td>false</td><td>2020-06-29</td></tr>
  </tbody>
</table>

次にJavaScriptでインスタンスを生成します。第一引数として <table> に設定した id を渡します。第二引数は {} になっていますが、後でオプションを記述していきます。

let table = new Tabulator('#example-table', {});

どのように表示されるか見てみましょう。テーブルのヘッダをクリックすると行がソートされますね。いえーい。

名前おすすめ度チェック日付
さまよえるオランダ人5true2022-07-01
山田ちぬ3false2022-07-01
ユッスー・ンドゥール4true1959-10-01
アッヘンバッハ三姉妹2true2021-01-31
絶対傘ささないマン1false2020-06-29

配列、JSONから読み込む

まずHTML。テーブルを表示したい場所に、任意のidを設定した<div>を配置します。この中にテーブルが描画されます。

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

javaScript部分は次のようになります。

//データの配列
let tableData = [
  { name: 'さまよえるオランダ人', rating: 5, check: true, date: '2022-07-01' },
  { name: '山田ちぬ', rating: 3, check: false, date: '2022-07-01' },
  { name: 'ユッスー・ンドゥール', rating: 4, check: true, date: '1959-10-01' }
];

//データをJSONで渡す場合
//tableData = JSON.stringify(tableData);

//インスタンス生成
let table = new Tabulator('#example-table', {
  data: tableData,   //データの読み込み
  autoColumns: true, //自動で列の設定を最適化する
});
autoColumns について

autoColumuns オプションを true に設定すると、自動で列の設定をしてくれます。具体的には、配列のキーをテーブルのカラム名として表示したり、データの値の種類(文字列、数値、ブール値など)に合わせてSorterを設定してくれたりします。

Ajaxを使う

リモートのソースからデータを取得することができます。この場合、データはJSON形式であることが期待されます。

<div id="example-table"></div>
//インスタンス生成
let table = new Tabulator('#example-table', {
  ajaxURL: './data.php', //AjaxのURL
  autoColumns: true,     //自動で列の設定を最適化する
});

リクエストメソッドを変更したり、パラメータを渡すこともできます。なお、リクエストメソッドを指定しない場合の初期値はGETです。

//インスタンス生成
let table = new Tabulator('#example-table', {
  ajaxURL: './data.php', //AjaxのURL
  ajaxConfig: 'POST', //リクエストメソッドの設定
  ajaxParams: { key1: 'value1', key2: 'value2' }, //パラメータの設定
  autoColumns: true,
});

設定

テーブル全体の設定

let table = new Tabulator('#example-table', {
  height: 400,       //テーブルの高さ パーセンテージまたはピクセルを表す整数で指定
  maxHeight: '100%', //最大の高さ heightを設定しない場合に有効
  minHeight: 300,    //最小の高さ heightを設定しない場合に有効
  rowHeight: 40,     //行の高さ ピクセルを表す整数で指定
  resizableColumnFit: true, //ひとつの列の幅を変更したときに列全体の幅を維持する
  layout: 'fitData', //列のレイアウト (firData|fitDataFill|fitDatStretch|fitDataTable|fitColumns)
});

テーブルの高さが固定されているほうが Tabulator は効率的に動作するので、ぜひheightを設定しましょう。

layoutに設定できる値は次のとおりです。

列の幅テーブルの幅が余ったとき
fitDataデータの長さに合わせて各列の幅が決まる。何もしない。
fitDataFillデータの長さに合わせて各列の幅が決まる。テーブルの幅いっぱいまで行が描画される。
fitDataStretchデータの長さに合わせて各列の幅が決まる。右端の列の幅をテーブルの幅いっぱいまで広げる。
fitDataTableデータの長さに合わせて各列の幅が決まる。テーブルの幅は列の幅に合わせて小さくなる。
fitColumnsテーブルの幅にちょうど収まるように各列の幅が決まる。

カラムの設定

autoColumuns オプションを使用せずに、個別にカラムの設定をする場合はcolumnsプロパティを使います。

let table = new Tabulator('#example-table', {
  //カラムの設定
  columns: [
    {
      title: '名前', //テーブルの列の表示名
      field: 'name', //配列、JSONなどのデータのキー
      resizable: true, //列の幅の変更を可能にする (true|false|'header'|'cell')
      minWidth: 120, //最小の列の幅
      maxWidth: 200, //最大の列の幅
      hozAlign : 'left', //水平方向の位置 (left|center|right)
      vertAlign : 'top', //垂直方向の位置 (top|middle|bottom)
      headerVertical: true, //ヘッダのテキストを縦書きにする
      frozen: true, //横スクロールするときに列を固定する
    },
    {
      title: 'おすすめ度',
      field: 'rating',
      resizable: true,
      minWidth: 120,
      maxWidth: 200,
      headerVertical: true,
      frozen: false,
    },
    ...
  ],
});

並べ替え

何も設定しない場合、Tabulator は最初の行のデータ型に基づいて Sorter を推測します。文字列、数字、英数字、ブール値を判別して Sorter を決定しますが、それ以外は文字列として扱われます。

Sorterとは、データを並べ替えるときに文字列として扱うか数値として扱うかを決めるルールのようなものです。

列ごとに Sorter を指定する場合はsorterおよびsorterParamsオプションを使います。

let table = new Tabulator('#example-table', {
  //カラムの設定
  columns: [
    {
      title: '名前',
      field: 'name',
      sorter: 'string', //Sorterの指定
      sorterParams: { locale: true, alignEmptyValues: 'bottom' }, //Sorterのオプション
    },
    ...
  ],
});

組み込みの Sorter は次のようなものがあります。

Sorter説明sorterParams
string文字列を並べ替えるlocale: 文字列比較関数が使用するロケールコードを指定。 'ja'ならば日本語、trueならばテーブルのロケール、指定しなければブラウザのロケールが使用されます。
alignEmptyValues: データが空の場合に上位に表示するか下位に表示するかの設定。(top|bottom)
number数値を並べ替えるthousandSeparator: 千単位の区切り文字を指定。
decimalSeparator: 小数点の文字を指定。
alignEmptyValues:
alphanum英数字を並べ替えるalignEmptyValues:
booleanブール値を並べ替える
existsデータが undefined かどうかで並べ替える
date日付を並べ替えるformat: 日付のフォーマットをLuxonフォーマットで指定。初期値はdd/MM/yyyy'iso'ならばISOフォーマット。
alignEmptyValues:
time時刻を並べ替えるformat: 時刻のフォーマットをLuxonフォーマットで指定。初期値はHH:mm'iso'ならばISOフォーマット。
alignEmptyValues:
datetime日時を並べ替えるformat: 日時のフォーマットをLuxonフォーマットで指定。初期値はdd/MM/yyyy HH:mm:ss'iso'ならばISOフォーマット。
alignEmptyValues:
array配列を並べ替えるtype: 比較タイプを指定。(length|sum|max|min|avg)
alignEmptyValues:

date, time, datetime を使用するには luxon.js ライブラリをインクルードする必要があります。

テーブルヘッダのクリックによる並べ替えを無効化するにはheaderSortプロパティを使います。

{ title: '名前', field: 'name', sorter: 'string', headerSort: false }

テーブルが最初に描画されるときに適用する並べ替えはinitialSortで設定します。

let table = new Tabulator('#example-table', {
  initialSort: [
    { column: 'name', dir: 'asc' },  //まず名前で昇順に並べ替える
    { column: 'date', dir: 'desc' }, //次に日付で降順に並べ替える
  ],
});

データのフォーマット

Tabulatorではデータをさまざまな方法でフォーマットして表示することができます。formatterおよびformatterParamsオプションを使います。

let table = new Tabulator('#example-table', {
  data: tableData,
  layout: 'fitDataFill',
  columns: [
    {
      title: '名前',
      field: 'name',
      formatter: 'plaintext', //Formatterの指定
    },
    {
      title: 'おすすめ度',
      field: 'rating',
      formatter: 'star', //Formatterの指定
      formatterParams: { stars: 5 }, //Formatterのオプション
    },
    {
      title: 'チェック',
      field: 'check',
      hozAlign : 'center',
      formatter: 'tickCross', //Formatterの指定
    },
    {
      title: '日付',
      field: 'date',
      formatter: 'datetime', //Formatterの指定
      formatterParams: { //Formatterのオプション
        inputFormat: 'yyyy-MM-dd',
        outputFormat: 'yyyy年MM月dd日',
      },
    },
  ],
});

上記の設定でテーブルを表示すると次のようになります。

組み込みの Formatter には次のようなものがあります。

Formatter説明formatterParams
plaintextテキストを表示。改行(\n)は反映しない。列の幅に合わせて自動改行しない。
textareaテキストを表示。改行(\n)を反映する。列の幅に合わせて自動改行する。
htmlHTMLを表示。
money数値に区切り文字や単位を付加して表示。decimal: 小数点を表す文字列を指定。初期値は'.'
thousand: 千単位の区切り文字を指定。falseで区切りなし。初期値は','
symbol: 単位を表す記号。
symbolAfter: trueで記号を数値の後ろに表示。
precision: 小数点以下の桁数。falseですべて表示。初期値は2
image画像を表示。height: 画像の高さ。
width: 画像の幅。
urlPrefix: 画像のsrcのURLを生成する際に値の先頭に追加する文字列。
urlSuffix: 画像のsrcのURLを生成する際に値の末尾に追加する文字列。
linkリンクを表示。labelField: リンクラベルとして使用される行データのフィールド名。
label: リンクラベルを表す文字列。または文字列を返す関数。

urlPrefix: URLの値の前に追加する文字列。(メールアドレスの前にmailto:を付けるなど)
urlField: リンクのURLとして使用される行データのフィールド名。
url: リンクのURLを表す文字列。またはURLを返す関数。
target: <a>タグのtargetの値。('_blank'など)
download: trueでリンクをダウンロードとして扱う。
datetime日付や時刻をフォーマットして表示。inputFormat: データの日付時刻フォーマット。Luxonフォーマットで指定。または'iso'でISOフォーマット。初期値はyyyy-MM-dd HH:mm:ss
outputFormat: テーブルに表示する日付時刻フォーマット。Luxonフォーマットで指定。初期値はdd/MM/yyyy HH:mm:ss
invalidPlaceholder: 入力された日時が無効な場合に表示する値を指定。trueならばデータの値をそのまま表示。関数を指定すればデータの値を引数として関数に渡す。文字列を指定すればその文字列を表示する。
timezone: 日付と時刻のタイムゾーンを有効なLuxonの書式で指定。
tickCross値が(true|'true'|'True'|1)ならば、それ以外ならばを表示。allowEmpty: trueならば空の値(undefined|null|'')がではなく空のセルで表示される。
allowTruthy: trueならばどんな真の値でもを表示する。
tickElement: 印のカスタムHTML。falseならば表示しない。
crossElement: 印のカスタムHTML。falseならば表示しない。
colorセルの背景色を指定した値にする。CSSで有効な色の名前を使える。(#ff0000, rgb(255,0,0), red など)
star整数値を星の数で表示。stars: 表示する星の最大数。初期値は5
traffic数値に応じて色の付いた丸印を表示。min: 値の最小値。
max: 値の最大値。
color: 色の名前の配列。初期値は['red', 'orange', 'green']。関数を指定すれば値が引数として渡される。
progress数値に応じてプログレスバーを表示。min: 値の最小値。
max: 値の最大値。
color: プログレスバーの色の設定。一つの色の名前、色の名前の配列、関数のいずれかで指定。初期値は#2DC214
legend: プログレスバーの上に表示されるテキスト。任意の文字列、true、関数のいずれかで指定。trueならばデータの値を表示。
legendColor: legendの文字色の設定。一つの色の名前、色の名前の配列、関数のいずれかで指定。
legendAlign: legendのテキストのアラインメント。(center|left|right|justify)
lookupformatterParams に渡されたオブジェクトから値を探して表示。formatterParams: { 'blue': '青', 'red': '赤' }
上記のように設定すると、値 blue は 青、値 red は赤と表示される。

ページネーション

テーブルをページネーションするには次のように設定します。

let table = new Tabulator('#example-table', {
  pagination: true, //ページネーションを有効化
  paginationSize: 5, //1ページあたりに表示する行数
  //height: '300px', //paginationSizeを指定せずにheightを指定すると高さに合わせて自動的に行数が設定される
  paginationInitialPage: 2, //テーブルが最初にロードされるときに表示するページ
  paginationSizeSelector: true, //1ページあたりの行数をユーザが設定できるようにする trueならば[5, 10, 15, 20]
  //paginationSizeSelector: [10, 25, 50, 100, true], //任意の配列を渡すことも可能 配列にtrueを渡すとAll
  paginationCounter: 'rows', //フッタの左にページネーションカウンタを表示する rowsで行数カウンタ、pagesでページカウンタ
});

表示してみるとこんな感じです。

日本語化

ページネーションしたら舶来の言語が出てきました。なんとかしたいですね。というわけで、日本語化しましょう。

let table = new Tabulator('#example-table', {
  locale: true, //trueならばブラウザの言語設定を自動検出 'ja'のように指定することも可能
  langs: {
    ja: {
      //列の表示名の翻訳
      columns: {
        name: '名前',
      },
      //データ読込関連のテキストの翻訳
      data: {
        loading: '読込中',
        error: 'エラー',
      },
      //ページネーション関連のテキストの翻訳
      pagination: {
        page_size: '表示件数',
        page_title: 'ページを表示',
        first: '最初',
        first_title: '最初のページ',
        last: '最後',
        last_title: '最後のページ',
        prev: '前',
        prev_title: '前のページ',
        next: '次',
        next_title: '次のページ',
        all: 'すべて',
        counter: {
          showing: '表示中',
          of: '/',
          rows: '件',
          pages: 'ページ',
        },
      },
    },
  },
});

テーマとスタイリング

Tabulatorにはテーブルの外観を変更するためのスタイルシートがあらかじめ用意されています。スタイルを変更するには対応するCSSファイルを読み込むだけです。

Default テーマ

<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">

Simple テーマ

<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator_simple.min.css" rel="stylesheet">

Midnight テーマ

<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator_midnight.min.css" rel="stylesheet">

Modern テーマ

<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator_modern.min.css" rel="stylesheet">

Site テーマ

<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator_site.min.css" rel="stylesheet">

他に Bootstrap、Semantic UI、Bulma、Materialize に対応したテーマも用意されています。

また、独自のCSSを記述してスタイルをカスタマイズすることもできます。下記にTabulatorの主要なclassの一覧があるので参考にしてください。

さいごに

今回紹介したのはTabulatorの機能のほんの一部です。他にもたくさんの機能、オプションがあるので公式サイトで確認してみてください。英語だけどな。

でわでわ

Tabulator

この記事が気に入ったら
いいね または フォローしてね!

シェアしてね

コメント

コメント一覧 (2件)

Tabulator 開発日記 – Saoline Tips へ返信する コメントをキャンセル

目次