優れたTableライブラリ「Grid.js」で、お手軽にソート機能を持ったTableを扱う方法

優れたTableライブラリ「Grid.js」で、お手軽にソート機能を持ったTableを扱う方法
この記事をシェアする:
またまた、感動的なJavaScriptライブラリと出会いました。

その名は「Grid.js」。
JavaScriptライブラリと書きましたが正確には、
TypeScript製とのことです。

導入も簡単かつ、オプションも豊富。
なんと、データのソート機能ページネーション機能も備えたテーブル(表組み)、
いわゆるデータテーブルと呼ばれるUIパーツが生成できるライブラリです。

ライセンスは MIT
他のライブラリとの依存関係が少なく、
Vue.js等のフロントエンドフレームワークとの相性も良さそうです(実際に、Grid.js公式ページで動くと言及されています)。

それでは次のセクションから、導入方法・サンプルコードなどを書いていきます。

Grid.jsの導入方法

CLI経由の場合は次の通りです。

[CLI経由の場合]

npm install gridjs --save

お手軽にまず試して見たい場合や、ビルドを介さない静的ページ等でも使えるように、
CDNも用意してくれています。CDNを使う場合、組み込みたいhtmlのヘッダ内に、次の2つを読み込みます。

[CDN経由の場合]

<link href="https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js"></script>

CLIかCDNいずれかの方法で、Grid.js本体(とcss)の読み込みが済んだら、
表示したいhtml内に次を記述。

[html]

<div id="gridContainer"></div>

↑この要素とJS側で紐付けることにより、要素内にテーブルが描画されます。(もちろん、id名は何でも良いです)

上記のidを持った要素と紐づくテーブルは、次のように定義します。

[JavaScript]

new gridjs.Grid({
  columns: ['名前', 'ジャンル', '素晴らしさ'],
  data: [
    ['Vue', 'Frontend Framework', '★★★★★'],
    ['Vuetify', 'UI Framework', '★★★★★'],
    ['React', 'Frontend Framework', '★★★★★'],
    ['Gatsby', 'Static Site Genarator', '★★★★★'],
    ['Grid', 'Great Table Library', '★★★★★']
  ],
}).render(document.getElementById('gridContainer'));

↑JavaScript側でこのようにdataを定義、
末尾の render(document.getElementById(‘gridContainer’)); の部分で
先ほどのidを持った要素と紐付けます。

すると、次のようにデータテーブルが生成されます!
GridJSでテーブルを表示したサンプル

ソート機能をつける

データの値による並べ替えを有効にするには、次のように書き換えます。
[JavaScript]

new gridjs.Grid({
  columns: ['名前', 'ジャンル', '素晴らしさ'],
  data: [
    ['Vue', 'Frontend Framework', '★★★★★'],
    ['Vuetify', 'UI Framework', '★★★★★'],
    ['React', 'Frontend Framework', '★★★★★'],
    ['Gatsby', 'Static Site Genarator', '★★★★★'],
    ['Grid', 'Great Table Library', '★★★★★']
  ],
  sort: true
}).render(document.getElementById('gridContainer'));

↑なんと、先ほどの基本形に、sort オプションを true にする1行を追加してあげるだけです。
これで、値による昇順・降順の並べ替えが可能になります。
デフォルトでは、アルファベット順による比較ができます。
また、自身でルールを定義するカスタムソートについても、公式ページに記載があります。

ページネーションをつける

Grid.js、すごいです。ソートだけでもありがたいのですが、
その上ページネーションも簡単につけることができます。具体的には、次のように書きます。
[JavaScript]

new gridjs.Grid({
  columns: ['名前', 'ジャンル', '素晴らしさ'],
  data: [
    ['Vue', 'Frontend Framework', '★★★★★'],
    ['Vuetify', 'UI Framework', '★★★★★'],
    ['React', 'Frontend Framework', '★★★★★'],
    ['Gatsby', 'Static Site Genarator', '★★★★★'],
    ['Grid', 'Great Table Library', '★★★★★']
  ],
  sort: true,
  pagination: {
    enabled: true,
    limit: 3,
    summary: false
  }
}).render(document.getElementById('gridContainer'));

↑なんと、pagination オプションにパラメーターを渡すだけです。
これで、3件ずつ値を表示する、ページネーション付きのデータテーブルが表示できます。

本当に手軽で使いやすく、感動すら覚えました…。
Grid.js、すばらしいです。感謝。

この記事のまとめ

今回は、とてもお手軽にかつ、
とても高機能なデータテーブルを表示することができるライブラリ、
Grid.js についての内容を書きました。

今回は単純なサンプルのみでしたが、
公式サイトを見る限り、他にも便利な機能がたくさんあるようですので
今後も試してみたいと思っています。

また Grid.js 公式サイトの次のページ
What is Grid.js? | Grid.js
に記載があるように、これだけ高機能なライブラリながら
容量は12kbと軽量なのも魅力です。

心からの感謝の気持ちを捧げつつ、また今後も Grid.js に関する内容を更新できたらと思っています。

当サイトでは、今後もWeb制作、Webデザインに関する様々な記事を書いていく予定です。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。

この記事をシェアする: