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

高性能なテーブルを実装できる、シンプルで軽量のJavaScriptライブラリを紹介します。HTMLテーブル、ページネーション、検索機能、ソート機能、XMLやJSONからインポートなどに対応しています。

React、Angular、Preact、Vueなどの主要なフレームワークのプラグインとして動作するだけでなく、フレームワークなしのバニラJavaScriptでも使用できます。

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

Grid.js
Grid.js -GitHub

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として使用できます。
パッケージのインストールは下記のコマンドを入力します。

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

外部ファイル

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

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

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

さらに詳しい使い方は、ドキュメントをご覧ください。

サイトのキャプチャ

Install -Grid.js

sponsors

top of page

©2020 coliss