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

jquery-decapitateはjQuery/JavaScript製のオープンソース・ソフトウェア(2-clause BSD lisence)です。

大きなHTMLテーブルを表示していると、どのカラムが何のデータだったか分からなくなって、また上にスクロールして確認する…なんてことがあるかと思います。そんな面倒さから解放してくれるjQueryプラグインがjquery-decapitateです。


最初の表示です。この時点では普通のテーブルに見えます。


スクロールするとヘッダーが画面上部に残りました。


こちらは二つのテーブルのデモ。


ヘッダーの高さが違ってもちゃんと残ります。


レスポンシブ対応なのでスマートフォンで見た場合も分かりやすくなります。


ヘッダーが複数行であっても問題ありません。

ヘッダーが残ってくれるだけでデータの確認がとてもしやすくなります。データ操作の伴わない、一覧で表示するだけのテーブルに使うと良いのではないでしょうか。


MOONGIFTはこう見る

一昔前にこういったUIを実現しようと思うとframeを使ったりして分かりづらい仕組みで実現することが多かったです。また、10行ごとにヘッダーを差し込み直すなんて手法もありました。いずれにしてもあまり格好よくはありません。

jquery-decapitateはjQueryでテーブルを指定するだけでよく、使い方は簡単です。残り続ける訳ではなく、スクロールがテーブルの一番下まで達すれば消えてくれます。業務システムでテーブル表示を行っているところは常駐する価値があるのではないでしょうか。

jquery-decapitate

claymation/jquery-decapitate

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2