はじめに
「TabulatorをCDNで読み込むには、どのファイルを指定すればいいの？」
「HTMLに追加したのに、表が表示されないのはなぜ？」と迷っていませんか。
Webページに並べ替えや絞り込みができる表を設置しようとしても、TabulatorのCSSとJavaScriptをどこから読み込み、どの順番で記述すればよいのか分からず、実装するところで迷うことがあります。
この記事では、TabulatorをCDNで読み込む方法から、表を表示するための基本設定、読み込めない場合に確認したいポイントまで分かります。
cdn tabulatorを使うには？
TabulatorをCDNで使う場合は、必要なCSSとJavaScriptをCDNから読み込み、ページ内でTabulatorを呼び出せる状態にします。
ここでは、TabulatorをCDNで使う基本の方法と、CDNで利用できるパッケージ名について説明します。
TabulatorをCDNで使う基本の方法
TabulatorをCDNで使うには、CSSとJavaScriptのファイルをページに読み込みます。
CSSはテーブルの見た目を整え、JavaScriptはテーブルの生成や並べ替えなどの機能を動かすために必要です。
CDNを利用すればTabulator本体をサーバーに保存する必要がなく、URLを指定するだけで手軽に導入できます。
CDNで利用できるTabulatorとパッケージ名
Tabulatorは、npmで公開されている「tabulator-tables」パッケージをCDN経由で読み込めます。
CDNのURLにはパッケージ名に加えて、利用するバージョンやCSS・JavaScriptのファイルパスを指定します。
バージョンを固定しておくと更新による影響を受けにくいため、URLを設定するときはファイル名とあわせて確認しておくと安心です。
TabulatorをCDNから読み込む方法
TabulatorをCDNから利用するには、CSSとJavaScriptの2種類のファイルをWebページへ読み込みます。
ここでは、CDNからのファイル読み込み、バージョンの固定、Tabulatorの初期化までを順に説明します。
CSSとJavaScriptをCDNから読み込む
TabulatorをCDNから使うには、CSSとJavaScriptの2つのファイルをページ内に読み込みます。
CSSは表の見た目を整えるために、JavaScriptは表の生成や操作を行うために必要です。
JavaScriptはTabulatorを初期化する処理より前に読み込んでおき、ページ内から呼び出せる状態にしておきましょう。
CDNからファイルを読み込めているか分からない場合は、ブラウザの開発者ツールを使って通信状況を確認できます。
▶CDNを使っているか確認する方法｜Webサイトの利用状況を調べる4つの方法
tabulator-tablesのバージョンを固定して読み込む
CDNからtabulator-tablesを読み込むときは、URLに使用するバージョン番号を指定できます。
バージョンを固定しておけば、新しいバージョンが公開されても既存のページが影響を受けにくくなります。
CSSとJavaScriptには同じバージョンを指定し、異なるバージョンを混在させないようにしましょう。
CDNで読み込んだTabulatorを初期化する
CSSとJavaScriptを読み込んだら、表を表示するHTML要素を指定してTabulatorを初期化します。
JavaScriptで「new Tabulator()」を実行し、表示する要素とデータ、列などの設定を指定します。
対象のHTML要素とTabulatorのJavaScriptが読み込まれた後に初期化すれば、指定した場所に表を表示できます。
コードを追加しても表が表示されない場合は、JavaScriptエラーが発生していないか確認してみましょう。
▶JavaScriptのエラーを確認する方法｜Chromeの開発者ツールで原因を調べる手順
まとめ
TabulatorはCDNを利用すれば、ファイルをサーバーに用意しなくてもCSSとJavaScriptを読み込むだけで手軽に導入できます。
安定して使うためにもバージョンを固定し、CSSとJavaScriptをそろえて設定しておくと安心です。
まずは基本的なテーブルを表示してみて、必要に応じてデータや列の設定を少しずつ追加していきましょう。
