はじめに

100万行扱えるJavaScriptのグリッドライブラリとしてはSlickGridもあるのですが、ソースコードが複雑で、理解したりカスタマイズしたりするのが相当困難な印象でした。

そこで、他にも良いグリッドライブラリは無いかと探していた所、機能的に良さそうなのを2つ見つけたので紹介します。コードはまだパッと見ただけです。

w2ui Grid

w2uiというJavaScriptで書かれたUIライブラリにGridが含まれています。

IE9以上、Chrome、Firefox、Safariで動きます。Operaも文中には書いてないですがアイコンが貼ってあるので動くようです。MITライセンスです。

デモページのトップに、機能概要が書かれています。[More Demos]のボタンからさらに様々なデモを試せます。

左のツリーでGrid以外にもCombinationのところにもグリッドのデモがあります。

デモページの下の質問スレッドでの作者のコメントによると、無限スクロールをサポートしたのでページングは廃止したそうです。

JavaScript Grid with One Million Records | JavaScript UI - w2uiのブログ記事を見ると100万行のデータでも問題なく動くようです。

デモページをChromeのデベロッパーツールで確認した所、w2uiのGridはHTMLのtable要素を使っていますが、td要素内のセルはdiv要素でラッピングするという方式になっていました。

スクロールバーはブラウザネイティブのUIを使っています。

GitHubのレポジトリwarpech/jquery-handsontableによるとIE8〜11、Firefox、Chrome、Safari、Operaで動き、MITライセンスです。

SlickGridとw2ui Gridは列のみヘッダがあって行ヘッダはありませんが、Handsontableは行ヘッダもつけることが出来て、Excelライクなグリッドを実現しています。

HandsontableのグリッドはHTMLのtable要素で実装されていて、セルも単にtd要素となっています。スクロールバーはブラウザネイティブのUIではなくHTMLで実現しています。