ITエンジニア/デザイナ向けにオープンソースを毎日紹介

業務システムではテーブルがよく使われますが、大量のデータを表示するとカラムが見えなくなっていったりきたりする操作が発生します。それはユーザにとってストレスで改善要望を出されること請け合いな訳ですが、丁度自分たちのシステムにあったものを探すのは大変です。

さらに業務システムがスマートフォンからも使いたいなんて言われたらどうしたら良いでしょう。そこで紹介したいのがSticky Table Headers & Columns、横に長いテーブルにも対応したヘッダー追従テーブルライブラリです。

デモです。こういった感じのテーブルがあったとします。
デモです。こういった感じのテーブルがあったとします。

スクロールしてもヘッダーがついてきて常に一番上に固定されます。
スクロールしてもヘッダーがついてきて常に一番上に固定されます。

続いて左側のカラムも固定されるパターン。これも顧客名やIDを常に出しておくとデータの確認がしやすくなります。
続いて左側のカラムも固定されるパターン。これも顧客名やIDを常に出しておくとデータの確認がしやすくなります。

幅が広いテーブルでも右側にスクロールできるので問題ありません。
幅が広いテーブルでも右側にスクロールできるので問題ありません。

Sticky Table Headers & Columnsの利点としてはスマートフォン、タブレットにも対応しており横にスクロールできるようになっていることです。レスポンシブなテーブルライブラリは複数行に分かれて表示するタイプが多いのですが、左右スクロールの方が確認しやすいという場合もあるのではないでしょうか。

上または左側に常に同じ情報が表示されることでデータの確認がしやすい場合もありますが、幅の狭いスマートフォンで左側が常時固定になるとかえって見づらくなる場合もありますので注意してください。

Sticky Table Headers & ColumnsはJavaScript/スタイルシート製のソフトウェア(個人、商用利用可)です。

Sticky Table Headers & Columns | Codrops

Sticky Table Headers Revisited | Demo 1

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2