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

FooTableはレスポンシブなテーブルデザインを行うライブラリです。

レスポンシブWebデザインにおける最大の難関はテーブルかも知れません。PCならば幅広く表示できたカラムがスマートフォンではうまく表示しきれません。そこで使い勝手を維持しつつ見栄えもいいテーブル表示にFooTableを使ってみましょう。


PCで表示したテーブル。


スマートフォン向けに縮めた場合。+記号が表示されています。


+記号をクリックすると、追加情報が表示されます。


HTMLを組み合わせた行。


こちらでもスマートフォンで表示できます。


タブレットでも調整されて表示されます。


ソート機能版。


もちろんスマートフォンでもソートが使えます。


フィルタリング。インクリメンタルに適用されます。


PCでももちろん使えます。


ソートとフィルタリングは同時に使えます。

FooTableを使う際にはタブレットやスマートフォンで表示するカラム、しないカラムを定義します。そうすることで自動で意図しない表示になったりすることなくユーザビリティを維持できます。機能拡張によってフィルタリングやソートも実装されており、真似すれば独自の機能追加もできるはずです。

FooTableはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。


MOONGIFTはこう見る

今時のWebデザインにおいてグリッドのデザインをテーブルで実現しようとすることはまずないでしょう。そのため最もテーブルデザインを用いるのは業務系アプリではないかと思います。情報を一覧でチェックしたいと思った時に、横向きにしても全てが表示できないというのはよくあります。そんな時にFooTableが役立ちそうです。

ポストPC時代に入り、営業や外出の多い業種においてはPCよりもタブレットやスマートフォンで業務をこなせる方が効率的になってきています。業務システムもまた、それに合わせて進化していくべきではないでしょうか。

FooTable | Themergency

DEMOS

bradvin/FooTable · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2