まるでExcelみたい！WEBページで実装する、ヘッダーを固定しつつ縦でも横でもスクロールできるデータテーブル

最終更新日: 2017/10/07

業務系WEBアプリケーションなんかだとデータグリッドって帳票のような使い方として良く使いますよね。

でも、ユーザーからすると数字を分析するのはEXCELのイメージが強くて、WEBページで見せる場合にどうしても使い勝手が悪いと感じてしまうことも少なくはありません。

EXCELみたいに、ヘッダー行を固定するのはWEBではかなり面倒です。

実務においては、データグリッドって分析が目的なわけで、必要な数字が揃っていなければ、あまり意味がないのです。
クライアントはこれとこれとこれが一緒に表示されてないとダメって言い出すのですが、最終的にはてんこ盛りの内容になることは決して珍しいことではないです。
たとえスマホ用だったとしてもね。

えーっスマホなのに6列も表示させるんですか！なんてこと珍しくないです。

そんなにたくさんんの列が都合良くウィンドウサイズに収まるわけもなく、スクロールさせるように実装するわけですが、縦にもスクロールしなければならないので、結構面倒なのです。

単純にPCサイトの幅でスマホに表示させようとすれば、文字が小さくて見えんと怒るしね。

そんなわがままなクライアントへの提案に使えそうなライブラリを紹介。

~~DataTable Control: XY-scrolling, Y-scrolling, and X-scrolling~~

いつのまにかYUI3にアップグレードしてサイトが移転したようです。リンクを修正しました。（2014/08/14）
Scrolling DataTable

スマホでも動くけど、若干動きがもっさりしてるかも。iscrollみたいにスワイプしたら慣性の勢いのごとく、するするっと動いてくれると気持ちいいのですが。

2016/6/8追記

他にも、いろいろみつかったので紹介します。

Super Tables

デモ画面で、ヘッダー行と、左端の列がスクロールが固定されているのが確認できます。

ほぼ一通りのブラウザには対応していますので、安心して使えます。

万象酔歩さんの「TABLEヘッダを隠さず縦横スクロール」

実装例としてサンプルソースが公開されています。

fixedTblHdrLftCol

jsファイルのダウンロード、その他オプションなどの詳細とはこちらからどうぞ。
fixedTblHdrLftCol
IEでの動作確認はしていないみたいだったので、IE11でボクが試してみたところ、固定している列と可動列が、縦のスクロール時にわずかにタイミングがずれていました。

HTMLTreeGrid

こちらは有料の商用ライブラリです。
DEMOサイト
JQuery、 EXTJS、DOJO をベースに作られたコンポーネントです。
デモサイトで確認してみるとわかりますが、かなり高機能です。これだけの機能があって＄399.99というのも安い買い物だと思います。
サポートを受けられることを考えたら、クライアントワークで使う上では安心じゃないかな。