レスポンシブWebデザインが流行っていますが、その一番の難敵とも言えるのがテーブルではないでしょうか。特に業務系システムや管理画面をスマートフォン/タブレットに対応させる上で幅が狭い中でいかにうまくテーブルを表示するかは大きな問題です。 そこで使ってみたいのがTableSaw、レスポンシブなテーブルを実現するライブラリです。

TableSawの使い方

TableSawには2つのレスポンシブ対応が可能です。まず一つ目はスタックと方式です。

こちらが元々のテーブルです。幅を狭めてみましょう。

縦並びになりました。これがスタックです。

スタックの通り、横に並んでいたデータを縦に積み重ねています。1行1行のデータは見やすくなりますが、他の行との比較が難しくなってしまうのが難点です。

もう一つはスワイプです。こちらも幅を狭めてみます。

右上の矢印が有効になりました。表示されている項目も減っています。

矢印を押すと表示されるカラムが変更されます（筆者環境では重なってしまっていますが…）。

スワイプは幅を狭くすると一部のカラムを非表示にします。そして左右の切り替えでカラムを表示します。

二つのモードは動的に変更できます。こちらはスワイプ。

こちらはスタック。

表示するカラムを自分で選択することも可能です。

ソートにも対応しています。

スタックとスワイプ、どちらを選択するかはシステムやデータの都合に合わせていいと思います。ソート機能もありますし、テーブルデータをより活用するのに使っていきたいライブラリですね。

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

TableSaw Stack Table TableSaw Sortable Table filamentgroup/tablesaw