シンプルで扱いやすいHTMLテーブルライブラリ・「Grid.js」

Grid.js

Grid.jsはシンプルで扱いやすいHTMLテーブルライブラリです。ReactやAngular、Vueなどは勿論、バニラでも問題なく動作します

9kbと非常に軽量で使い方もすごく簡単です。データを元に自動で指定した要素にtableを作成します。

ソート機能や検索、ページネーション機能なども付いてます。試しに使ってみました

example

データが少ないのでページングは飾りになってしまっています。あと、現段階で、ソートは数値をうまくソートできないみたいです。

Grid.jsの使い方はとても簡単です。

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

CSSとJSを読み込みます。CDNも用意されていますので今回はCDNを使います

new gridjs.Grid({
	columns: ["名前", "住まい", "好きな物"],
	sort: true,
	search: true,
	pagination: true,
	data: [
		["たかし", "東京", "ぶどう"],
		["ゆみ", "東京", "もも"],
		["ジョン", "福岡", "りんご"],
		["あきら", "青森", "なし"],
		["あかり", "宮崎", "さんま"]
	]
}).render(document.getElementById("wrapper"));

columnsでthを定義します。sort、search、paginationはそれぞれtrue/falseで機能のon/offを設定します

最後にdataで各データを入力し、最後に要素を指定すればOK

<div id="wrapper"></div>

要素を用意すればHTMLテーブルが実装されます

server: {
    url: 'https://example.com/api/films/',
    then: data => data.results.map(movie => [movie.title, movie.director, movie.producer])
  }

サーバーからデータを読み込む事も可能です

多機能ではないものの、最低限欲しい機能は揃えられている印象です。膨大なデータの処理という訳でも無いならこの手のライブラリが軽くて学習コストも低いので扱いやすいかなぁと思います。

ライセンスはMITとの事です

Grid.js