ソートやフィルタにも対応したレスポンシブなテーブル「FooTable」
FooTableはレスポンシブなテーブルデザインを行うライブラリです。
レスポンシブWebデザインにおける最大の難関はテーブルかも知れません。PCならば幅広く表示できたカラムがスマートフォンではうまく表示しきれません。そこで使い勝手を維持しつつ見栄えもいいテーブル表示にFooTableを使ってみましょう。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-13 15.46.28.1363162990.png)
PCで表示したテーブル。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-13 15.46.31.1363162994.png)
スマートフォン向けに縮めた場合。+記号が表示されています。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-13 15.46.34.1363162998.png)
+記号をクリックすると、追加情報が表示されます。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-13 15.46.48.1363163000.png)
HTMLを組み合わせた行。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-13 15.46.44.1363163004.png)
こちらでもスマートフォンで表示できます。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-13 15.46.54.1363163007.png)
タブレットでも調整されて表示されます。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-13 15.47.05.1363163011.png)
ソート機能版。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-13 15.47.13.1363163014.png)
もちろんスマートフォンでもソートが使えます。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-13 15.47.23.1363163018.png)
フィルタリング。インクリメンタルに適用されます。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-13 15.47.28.1363163021.png)
PCでももちろん使えます。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-13 15.47.33.1363163024.png)
ソートとフィルタリングは同時に使えます。
FooTableを使う際にはタブレットやスマートフォンで表示するカラム、しないカラムを定義します。そうすることで自動で意図しない表示になったりすることなくユーザビリティを維持できます。機能拡張によってフィルタリングやソートも実装されており、真似すれば独自の機能追加もできるはずです。
FooTableはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
今時のWebデザインにおいてグリッドのデザインをテーブルで実現しようとすることはまずないでしょう。そのため最もテーブルデザインを用いるのは業務系アプリではないかと思います。情報を一覧でチェックしたいと思った時に、横向きにしても全てが表示できないというのはよくあります。そんな時にFooTableが役立ちそうです。
ポストPC時代に入り、営業や外出の多い業種においてはPCよりもタブレットやスマートフォンで業務をこなせる方が効率的になってきています。業務システムもまた、それに合わせて進化していくべきではないでしょうか。