「Webアプリケーション 〜グリッドライブラリを使用してみて〜」

グリッドライブラリを使用する場合、例えば下記の機能が必要になってくることがあります。

これらの機能を兼ね備えているかは、各グリッドライブラリによって様々です。
グリッドライブラリを選定する際には、必要となる機能が含まれているかの確認は必須になるかと思います。また、無償ライブラリの場合は、無償版と有償版の違いとして機能制限を行っている場合もあるので注意が必要です。

今ではパソコンを使用している人の中でExcelを使用したことないという人はほとんどいないかと思います。そのため、表形式の画面の場合はユーザーはまずExcelを思い浮かべる方が多いと思います。表示だけであればどのライブラリでもよいかもしれませんが、表内で編集を行うような場合にはExcelと似た操作感のライブラリの方が受け入れられやすいのではないかと思います。

大量データを扱う場合、Webブラウザ上で単純に<table>タグでそのまま表示すると動作が遅くなってしまう場合があり、さらにデータ量によってはブラウザ側でメモリ不足を起こしてしまう場合もあります。
高機能なグリッドライブラリでは、画面に見えている範囲だけ描画する仮想化の機能を持っていることが多いので、大量データを扱う場合にはポイントの1つになるかと思います。

グリッドライブラリに限った話ではありませんが、ライブラリの使用方法を理解するためには取扱説明書・公式HPなどのドキュメントが必要になってきます。通常、プログラムを作成する上ではライブラリの関数、プロパティ、イベントの情報が必要になると思いますが、説明と共にサンプルコード、実際の画面イメージなどが記載されていると理解しやすいと思います。
また、HP上に公開されているライブラリは海外製品である場合が多いです。日本人にとっては英語で記載されたドキュメントを理解するのはなかなか大変です。そのため、対象のライブラリの紹介ページなどが多いか？も選定する際の1つの判断材料としてよいのではないかと思います。

業務で使用するような場合、セルの値を編集する際に入力を制限したい、入力に応じて表示を変えたいなどの要望はよくあるかと思います。単純な数値入力範囲のチェックなどであれば機能を持っているライブラリがほとんどですが、他のセルの値によって制限を変えたいなど特殊なことをしたい場合もあります。こういった特殊な内容を実現できそうかどうかもポイントになるのではないかと思います。

Handsontableを使用するにあたり、JavaScript・CSSが必要となります。
使用する環境によりますが、npmやNuGetでのインストールを行い、JavaScript・CSSファイルの読み込みを行います。
また、インターネット接続可能であれば、CDNを介して下記のようにJavaScript・CSSを取得することも可能です。

■JavaScript

<script src="https://cdn.jsdelivr.net/npm/handsontable@6.2.2/dist/handsontable.full.min.js"></script>

■CSS

<link href="https://cdn.jsdelivr.net/npm/handsontable@6.2.2/dist/handsontable.full.min.css" rel="stylesheet" media="screen">

グリッドを表示するタグとして<div>タグを用意します。

■Html

<div id="grid"></div>

スクリプトにてHandsontableをnewして作成する際に、<div>タグのエレメントオブジェクトを第一引数に渡すことで、指定した<div>タグにグリッドが表示されます。第二引数には動作や表示関するオプションを指定することが可能です。

■JavaScript

// 列ヘッダー
var table_headers = ['名前', '性別', '年齢',];

// 表示データ
var table_data = [
	     ['田中一郎',	'男',  24,],
	     ['佐藤次郎',	'男',  36,],
	     ['鈴木三津子',	'女',  48,]
];

// テーブル初期化
var hot = new Handsontable(document.getElementById('grid'), {
	     colHeaders: table_headers,       // 列ヘッダー
	     data: table_data,                // 表示データ
});

実際に上記をWebブラウザ上で表示してみると下記のように表形式の画面が表示されます。

例2.  グリッド表示

Handsontableでは表を作成する際に” columns”オプションを指定することで、各列の形式をテキスト列、数値列、コンボボックス列、チェックボックス列など列の種類を設定することができます。

■JavaScript

// 列ヘッダー
var table_headers = ['text', 'checkbox', 'numeric', 'dropdown', 'date',];

// 列情報
var table_columns = [
	     { type: 'text', },
	     { type: 'checkbox', },
	     { type: 'numeric', },
	     { type: 'dropdown', source: ['選択1', '選択2', '選択3', ], },
	     { type: 'date', dateFormat: 'YYYY/MM/DD', },
];

// テーブル初期化
var hot = new Handsontable(document.getElementById('grid'), {
	     colHeaders: table_headers,		   // 列ヘッダー
	     columns: table_columns,		   // 列情報
});

例3.  列の種類

Handsontableでは様々なオプションが用意されています。表を作成する際に、オプションを指定することで動作や表示について様々な変更を加えることができます。例えば、列ソート機能を有効にするには下記のオプションを指定します。

■columnSorting：列ソート機能 有効・無効

var hot = new Handsontable(document.getElementById('grid'), {
          colHeaders: table_headers,       // 列ヘッダー
          data: table_data,                // 表示データ
          columnSorting: true,             // 列ソート
});

例4.  オプション変更(ソート機能)

他にもオプションは多数用意されており、いくつかご紹介します。

■startRows：初期表示行数

var hot = new Handsontable(document.getElementById('grid'), {
         startRows: 5, 		      // 初期表示 行数
});

■minRows：表示行数の最小値

var hot = new Handsontable(document.getElementById('grid'), {
         minRows: 0,    		      // 最小 行数
});

■fixedColumnsLeft：スクロールした際の固定表示列数

var hot = new Handsontable(document.getElementById('grid'), {
	     fixedColumnsLeft: 3,	      // 列固定
});

■fixedColumnsLeft：スクロールした際の固定表示行数

var hot = new Handsontable(document.getElementById('grid'), {
	     fixedRowsTop: 3,		      // 行固定
});

■autoColumnSize：初期表示時の列幅の自動調整 有効・無効

var hot = new Handsontable(document.getElementById('grid'), {
         autoColumnSize: true,	  // 列幅 自動調整 有効
});

■manualColumnResize：手動での列サイズ変更 有効・無効

var hot = new Handsontable(document.getElementById('grid'), {
         manualColumnResize: true,	// 手動 列サイズ変更 許可
});