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

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 にする１行を追加してあげるだけです。
これで、値による昇順・降順の並べ替えが可能になります。
デフォルトでは、アルファベット順による比較ができます。
また、自身でルールを定義するカスタムソートについても、公式ページに記載があります。

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

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、すばらしいです。感謝。