simple-datatablesで簡単にテーブルを今どきの仕様にする
SB Admin
チーム内のAppiumの環境構築がメンバーごとに差異があって大変なので、統一した感じで簡単に構築できないものか…といろいろやっているのですが、node.jsでやろうかな…って思ってて、で、将来的に考えて、操作も現在のコマンドラインでなく、ブラウザベースでいけるといいな…っていうので、いい感じに画面を作れるテンプレートを探していたら、SB Adminというのを見つけました。
SB Admin - Free Bootstrap Admin Template - Start Bootstrap
で、細かくソースを眺めていたら、知らなかったことがいろいろ知れたのですが、その中で今回は、jQueryに依存しないでテーブルを今どきの仕様にできるsimple-datatablesというプロジェクトを紹介します。
simple-datatables
こちらは、package.jsonには記載がなくて、最初気が付かなかったのですが、Pugのソースの方に記述してあり、後で気が付きました。
グラフの描画に使っているChart.jsも同様でした。Chart.jsは名前が類似のツールがなかったので、すぐに公式たどり着き、詳細がわかりましたが、simple-datatablesの方は、最初、キーワードがdatatableで調べていたため、jQuery必須のツールの記事ばかりでてきてしまい、ソースコードを漁っても「どこでjQuery使ってるの?」という感じだったのですが、HTMLのヘッダのところにCDNを読み込んでいる部分があったので、simple-datatablesという別のソリューションがあることに気が付きました。
simple-datatablesの使い方
まだあまり詳しく公式を参照していないのですが、ざっくりまとめると…
- CDNかnpmで読み込む
- テーブルタグに属性を追加する
- 属性とsimple-datatablesを関連付けてイベント処理するJSを読み込ませる
でいいみたい。以下は、SB Adminの該当部分のコード
window.addEventListener('DOMContentLoaded', event => {
const datatablesSimple = document.getElementById('datatablesSimple');
if (datatablesSimple) {
new simpleDatatables.DataTable(datatablesSimple);
}
});
いろいろ便利そうなのですが、すぐに使い込む予定はないので、ノウハウたまったらまた記事書きます。
SB Adminもいろいろ詰め込んであって面白いので、多分別途追加記事書きます。
Discussion