Webアプリケーションで必ず要望にあがるのがテーブル表示の表計算ソフトウェア並の機能ではないでしょうか。たとえばヘッダーの固定であったり、ソート、インライン編集といった機能があげられます。 そんな要望の大半をこなせそうなのがHandsontableです。Handsontableを組み込むとグリッドの表示、編集がまさにExcel並になるはずです。

Handsontableの使い方

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

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

矩形にも選択できます。

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

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

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

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

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

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

placeholderのような表示。

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

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

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

セルのマージ。

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

枠線の色を変更。

ページネーション。

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

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

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

Handsontable - jQuery grid editor. Excel-like grid editing with HTML & JavaScript handsontable/jquery-handsontable · GitHub