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

simple-datatablesの使い方

まだあまり詳しく公式を参照していないのですが、ざっくりまとめると…

1. CDNかnpmで読み込む
2. テーブルタグに属性を追加する
3. 属性とsimple-datatablesを関連付けてイベント処理するJSを読み込ませる

でいいみたい。以下は、SB Adminの該当部分のコード

window.addEventListener('DOMContentLoaded', event => {
    const datatablesSimple = document.getElementById('datatablesSimple');
    if (datatablesSimple) {
        new simpleDatatables.DataTable(datatablesSimple);
    }
});

いろいろ便利そうなのですが、すぐに使い込む予定はないので、ノウハウたまったらまた記事書きます。
SB Adminもいろいろ詰め込んであって面白いので、多分別途追加記事書きます。