React、Angular、Vue対応、高性能なテーブルを実装できるシンプルで軽量のJavaScriptライブラリ -Grid.js

サイト構築 -JavaScript

Post on:2020年7月15日

Grid.jsの特徴

Grid.jsは高性能なテーブルを実装できる12Kbの超軽量のJavaScriptです。

シンプルで軽量な実装。
人気が高いすべてのJavaScriptフレームワーク（React、Angular、Vueなど）で使用できます。
フレームワークなし（バニラJavaScript）でも使用できます。
TypeScriptで記述。
IE11+をはじめ、すべてのモダンブラウザをサポート。
MITライセンスで、商用プロジェクトでも無料で利用できます。

Grid.jsのデモ

デモではGrid.jsで実装されたさまざまなテーブルを楽しめます。

デモ: Basic: Hello, World!

デモ: Basic: From HTML Table

デモ: Basic: Pagenation

デモ: Basic: Search

デモ: Data Source: JSON

デモ: Server-side: Import server-side data

デモ: Styling: CSS Style

デモ: Customizing: Cell formatting

デモ: Advanced: Multi column sort

Grid.jsの使い方

Grid.jsには、UMDとESモジュールの2つの形式と、本番と開発環境があります。

gridjs.development.es5.js
gridjs.development.js
gridjs.production.es5.min.js
gridjs.production.min.js
theme/

Node.js

NPMでgridjsとして使用できます。
パッケージのインストールは下記のコマンドを入力します。

npm install gridjs --save

1	npm install gridjs --save

上記のコマンドは、すべての依存関係もインストールします。
次に、JavaScriptファイルとCSSファイルの両方を含めます。

import { Grid } from "gridjs";
import "gridjs/dist/theme/mermaid.css";

1 2	import { Grid } from "gridjs"; import "gridjs/dist/theme/mermaid.css";

外部ファイル

Grid.jsはCDNでも使用でき、直接使用できます。

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

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

基本的なHTMLは、下記のようになります。

<!DOCTYPE html>
<html lang="en">
  <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.development.js"></script>
    <script src="src/index.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<link

href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"

rel="stylesheet"

</head>

<body>

</body>

</html>

index.jsファイルで、gridjs.Gridクラスをインスタンス化します。

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"));