Grid.jsの挙動がiOS、Androidでおかしくなる

Question

Grid.jsというプラグインを使ってヘッダーと左の１列を固定するテーブルを作っています。
PC（Chrome、IE）では問題なく動くのですが、iOSとAndroidでは左の１列の固定がうまく行きません。
モバイルだと動かない、対応していないJSなのでしょうか？

var myGrid = new Grid("grid", {
	srcType : "dom", 
	srcData : "table",
	// ↓これがスマホだと動いていないみたい
	fixedCols : 1,
});

よろしくお願いいたします。

Answer 1

同じくヘッダー固定に Grid.js を試したが Android で列固定がうまくいかずググった際にこの質問に辿りつきました。
他にも同じことを言っている人がいるということはやはり動かないんだろうということで Grid.js の使用を諦め、いろいろ試した上で他のライブラリを使うことにしました。Grid.js 自体、３年前で更新とまっているみたいですしね。

この質問自体はかなり昔のものですが、自分と同じでここにたどり着く人がいると思うので、そういう人向けに、参考事例として自分の例をここに書き残していこうと思います。

自分は Grid.js の代わりに FixedMidashi を使うことにしました。
自分の要件は概ね以下の通りでした。

• 表示するテーブルのサイズは 10 ～ 150 行 × 10 ～ 50 列程度。
• 各セルの内容は単純な文字列表示のみ。セル内に入力フォームはない。セルの大きさは内容に合わせて可変。
• 行と列のヘッダーを固定したい（＝スクロールに合わせて追従して欲しい）。
• PC とスマホの両方でうまく動作して欲しい。
• ソート機能はあれば嬉しいが、なければ諦めてもよい。
• 趣味の範疇なので無料で使えること。

Grid.js は PC ではうまく動き、要件を満たしたかのように思えました。
しかし、Android で試したところ左の列ヘッダーの固定がうまく動かず、そのときにこのページにたどり着きました。上部の行ヘッダーの固定はできていました。

FixedMidashi を使ったところ PC / Android / iPhone いずれでも行列ヘッダーの固定に成功しました。
また、それだけではなく以下の点で FixedMidashi は優秀だと感じました。

• 元のままのデザインがそのまま使える。

Grid.js やその他のグリッドライブラリはデザインを勝手に適用してくるものが多く、変更しようと思うと色々と調べる必要が出てきて面倒でしたが、FixedMidashi はそういう余計なことをしない。元のデザインがそのまま適用される。嬉しい！

• 画面いっぱいにテーブルを表示してくれる。

FixedMidashi には BODY モードというのがあって、スクロールに合わせて画面いっぱいにテーブルを表示してくれる。特にスマホでは小さい画面にたくさんの情報を表示させたいので、テーブルを画面のサイズぴったり合わせて表示してくれるのはとても嬉しい。デモのページを見ると、その良さがわかると思う。

応答速度に関してはスマホだとどうしてもスクロール時にヘッダーを追従させる動きのカクツキが目立ちます。
これは他のライブラリを試してみてもそうで、JavaScript で実現しなければ行けないという限界のように感じました。
HTML の機能としてブラウザがヘッダーの固定に対応してくれればいいのに。なぜこんなことが簡単にできないんだ…と思いつつ。
それでも FixedMidashi はまずまずの応答速度を持っている方だと思います（体感のみの感想）。

FixedMidashi は名前の通り、ヘッダーの固定に特化したライブラリで、その他の機能は持っていないようです。
ソートはいったん諦めましたが、テーブルの内容変更にも対応できる応用力を持っているみたいなので、ソート機能を別実装すれば対応可能っぽいです。

Comments

[YashaWedyue]

申し訳ございません、気づくのが遅くなってしまいました。
（質問当時の話ですが）結局諦めてしまっていました。
ためになるご回答、ありがとうございます！