Contents

Grid.jsとは

Webページ上でリッチな表を作成するJavaScriptライブラリ。

クライアントサイドで動作するライブラリであるが、このライブラリ単独での使用のほか、React等の他のUIフレームワークに組み込んで使用することもできる。

使用方法

ライブラリ導入

CDNから読み込むのが簡単である

<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>

JavaScript中でデータ作成のサンプル

<!DOCTYPE html>
<html lang="jp">
  <head>
    <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>
    new gridjs.Grid({
      columns: ["Name", "Email", "Phone Number"],
      data: [
        ["John", "john@example.com", "(353) 01 222 3333"],
        ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
        ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
        ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
        ["Afshin", "afshin@mail.com", "(353) 22 87 8356"]
      ]
    }).render(document.getElementById("wrapper"));
    </script>
  </body>
</html>

HTML中でデータ作成のサンプル

Gridコンストラクタで表を生成しているが、fromの値とrenderの値で同じ要素を指定してはいけない。

HTMLでデータ作成した場合、columnオプションが無視されるので、カスタムソートが実装できない。従って、整数型のソートができない。

<!DOCTYPE html>
<html lang="jp">
  <head>
    <link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
  </head>
  <body>
    <div id="wrapper"></div>
    <table id="table1">
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Phone Number</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td><a href="mailto:john@example.com">john@example.com</a></td>
          <td>(353) 01 222 3333</td>
        </tr>
        <tr>
          <td>Mark</td>
          <td><a href="mailto:mark@gmail.com">mark@gmail.com</a></td>
          <td>(01) 22 888 4444</td>
        </tr>
        <tr>
          <td>Eoin</td>
          <td><a href="mailto:eoin@gmail.com">eoin@gmail.com</a></td>
          <td>0097 22 654 00033</td>
        </tr>
        <tr>
          <td>Sarah</td>
          <td><a href="mailto:sarahcdd@gmail.com">sarahcdd@gmail.com</a></td>
          <td>+322 876 1233</td>
        </tr>
        <tr>
          <td>Afshin</td>
          <td><a href="mailto:afshin@mail.com">afshin@mail.com</a></td>
          <td>(353) 22 87 8356</td>
        </tr>
      </tbody>
    </table>

    <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
    <script>
    new gridjs.Grid({
        from: document.getElementById("table1")
    }).render(document.getElementById("wrapper"));
    </script>
  </body>
</html>