Grid.jsを使う方法

2024年5月2日 10:10

データをテーブル表示するライブラリ『Grid.js』を使ってみたので共有します。
テーブルタグを使って自前で実装すると面倒なソート機能や検索機能や大量データへの対応がカンタンに実装できます。「テーブル表示をするならとりあえず使っとけ」くらいの気持ちで使ってみるのもアリだと思います。

今回はテーブルを表示して行毎に編集ボタンを表示するまでの手順を説明します。
この手順で、用意するファイルはHTMLファイル1だけ、操作はコピペだけでカンタンに使えるので良かったら試してみてください。

Grid.jsとは

Grid.jsは、無料でオープンソースのJavaScriptテーブルプラグインです。

特徴は以下の通りです。本家サイトから引用しています。

React、Angular、Vue、VanillaJsを含むほとんどのJavaScriptフレームワークで動作する
ファイルサイズが小さい (12kb)
動作が早い。データのキャッシュなどを利用している
すべてのブラウザをサポートしている
ベンダーロックインがない
無料 (MITライセンス)

手順1: シンプルなテーブルを表示する

まずはシンプルなテーブルを表示します。
HTMLファイル(index.html)を作り、次ソースをコピペしてください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link
      href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="wrapper"></div>

    <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
    <script>
      const grid = new gridjs.Grid({
        columns: ['Name', 'Email'],
        data: [
          ["John", "john@example.com"],
          ["Mark", "mark@example.com"],
          ["Eoin", "eoin@example.com"],
          ["Sarah", "sarahcdd@example.com"],
          ["Afshin", "afshin@example.com"]
        ]
      });
      grid.render(document.getElementById("wrapper"));
    </script>
  </body>
</html>

HTMLファイルをブラウザで表示して、次のようなテーブルが表示されれば成功。

ソースを解説します。
重要なのはGridインスタンスを生成するところです。

const grid = new gridjs.Grid({
  columns: ['Name', 'Email'],
  data: [
    ["John", "john@example.com"],
    ["Mark", "mark@example.com"],
    ["Eoin", "eoin@example.com"],
    ["Sarah", "sarahcdd@example.com"],
    ["Afshin", "afshin@example.com"]
  ]
});

Gridのコンストラクタにテーブル情報を渡していきます。
テーブルの列名をcolumnsに配列で設定し、テーブルの内容をdataに2次元配列で設定します。直感的でわかりやすいですね。

手順2：各行に編集ボタンを表示する

続いて、テーブルの各行に編集ボタンを表示します。
さきほどのHTMLファイルに次のソースをコピペしてください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link
      href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="wrapper"></div>

    <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
    <script>
      const grid = new gridjs.Grid({
        columns: [ // カラム情報をオブジェクトに変更
            'Name',
            'Email',
            { 
              name: 'Actions',
              formatter: (cell, row) => {  // フォーマッタを利用してボタンを描画
                return gridjs.h('button', { // dom操作に便利なh関数。preact
                  className: 'editButton', // https://preactjs.com/guide/v10/api-reference/#h--createelement
                  onClick: () => alert(`Editing "${row.cells[0].data}" "${row.cells[1].data}"`)
                }, '編集');
              }
            },
        ],
        data: [
          ["John", "john@example.com"],
          ["Mark", "mark@example.com"],
          ["Eoin", "eoin@example.com"],
          ["Sarah", "sarahcdd@example.com"],
          ["Afshin", "afshin@example.com"]
        ].map(v => [...v, null])// 3列目にnull追加
      });
      grid.render(document.getElementById("wrapper"));
    </script>
  </body>
</html>

ブラウザをリロードして次のように編集ボタン付きのテーブルが表示されれば成功。
編集ボタンを押すと、NameとEmailの情報がポップアップで表示されます。

ソースを解説します。
変更点は大きく2つあります。

変更点の1つ目はActions列の追加です。
Columnsにオブジェクトを追加します。NameとEmailは文字列でしたが、Actionsはオブジェクトを渡します。そこにformatterを設定します。formatterではセルごとに処理を加えることができます。ここでボタンを追加しています。ボタン追加にはh関数を使います。h関数を使うとdom操作がカンタンに実装できます。この関数はGrid.js独自のものではなく、Preactというライブラリの流用です。なので使い方についてGrid.jsのドキュメントを読んでも詳しくは出てきません。本家Preactのサイトを見るのが良いようです。

変更点の2つ目はdataにActions列に相当する3列目の追加です。
ただ、3列目はformatterで設定するのでとりあえずダミーデータとしてnullを入れておきます。

data: [
  ["John", "john@example.com"],
  ["Mark", "mark@example.com"],
  ["Eoin", "eoin@example.com"],
  ["Sarah", "sarahcdd@example.com"],
  ["Afshin", "afshin@example.com"]
].map(v => [...v, null])// 3列目にnull追加

以上！カンタンですね。

まとめ

今回はGrid.jsの使い方を共有しました。
紹介した機能以外にも、ソートや検索などの多くの機能がプログラムを数行変更するだけで実装できました。今後お世話になるライブラリになりそうです。

この記事が参加している募集

やってみた

36,120件

この記事が気に入ったらサポートをしてみませんか？