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

Webアプリケーションで必ず要望にあがるのがテーブル表示の表計算ソフトウェア並の機能ではないでしょうか。たとえばヘッダーの固定であったり、ソート、インライン編集といった機能があげられます。

そんな要望の大半をこなせそうなのがHandsontableです。Handsontableを組み込むとグリッドの表示、編集がまさにExcel並になるはずです。

Handsontableの使い方

表示例。Webページの一コンテンツとして埋め込めます。
表示例。Webページの一コンテンツとして埋め込めます。

こんな感じにカラム単位で選択できます。
こんな感じにカラム単位で選択できます。

矩形にも選択できます。
矩形にも選択できます。

コピー&ペーストにも対応しています。
コピー&ペーストにも対応しています。

インライン編集も可能です。
インライン編集も可能です。

表示はこのようにJavaScriptで行います。
表示はこのようにJavaScriptで行います。

ヘッダーだけでなく、左側の固定もできます。
ヘッダーだけでなく、左側の固定もできます。

カラムの幅は自由に設定可能。
カラムの幅は自由に設定可能。

セルの色指定もできます。
セルの色指定もできます。

placeholderのような表示。
placeholderのような表示。

選択しているセルを上下左右にハイライトした例。
選択しているセルを上下左右にハイライトした例。

ソート。数字と文字列に対応しています。
ソート。数字と文字列に対応しています。

幅、高さのカスタマイズ。
幅、高さのカスタマイズ。

セルのマージ。
セルのマージ。

文字の表示位置調整。上や中央など指定できます。
文字の表示位置調整。上や中央など指定できます。

枠線の色を変更。
枠線の色を変更。

ページネーション。
ページネーション。

カラム単位での入れ替え。
カラム単位での入れ替え。

Handsontableでは表計算ソフトウェアでは実装されているような多数の機能を実現しています。データの保存処理については別途実装がいりますが、表示はHandsontableにお任せです。業務システムのデータ表示に使ってみてはいかがでしょう。

HandsontableはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Handsontable - jQuery grid editor. Excel-like grid editing with HTML & JavaScript

handsontable/jquery-handsontable · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2