ITエンジニア/デザイナ向けにオープンソースを毎日紹介

HTMLで使ってデータをテーブル表示するのは簡単です。しかし、ちょっとUIをよくしたり、ソートなどの機能を追加しようと思うと、途端に面倒になります。素のHTMLのままではとても使い勝手がいいとはいえません。

そんなHTMLテーブルを手軽に高機能化してくれるライブラリがGrid.jsになります。

Grid.jsの使い方

データはJSONで渡すだけです。

HTMLを使うこともできます。

ページネーションも使えます。

キーワードによるフィルタリング。

ソート。

横に長いテーブルも問題ありません。

Grid.jsはライブラリ依存がないJavaScriptで作られています。しかし、Angular/React/Vueをサポートしており、フレームワークと組み合わせて高機能なテーブルを提供できます。足りない機能はフレームワーク側で提供すればいいでしょう。

Grid.jsはTypeScript製のオープンソース・ソフトウェア(MIT License)です。

Grid.js - Advanced table plugin

grid-js/gridjs: Advanced table plugin

 

MOONGIFTの関連記事

  • DevRel
  • Com2