[JS]一味違ったアイデアでレスポンシブ対応のテーブルを実装するスクリプト -Responsive tables
Post on:2014年4月24日
sponsors
レスポンシブ対応のテーブルというと、ヘッダが固定されるとか、幅が狭くなるなどといったものが多いですが、これは一味違った対応方法で、表示する幅に合わせて列の数が調整できるテーブルを簡単に実装できるスクリプトです。
実装にはjQueryなどの他のスクリプトは必要ありません、単体で動作します。
Responsive tables
Responsive tables -GitHub
Responsive tablesのデモ
デモはBootstrap 3を使った美しいテーブルをレスポンシブ対応にしています。
Responsive tablesの一番大きな特長は、ドロップダウンです。
右上のドロップダウンから、表示する列を選択できます。
また、指定した行のハイライト表示にも対応しています。
左上の「Focus」でハイライト表示。
表示サイズを変更してみます。
デモ：幅780pxで表示
レスポンシブ対応のテーブルはいろいろな方法がありますが、Responsive tablesでは列を削って表示します。
削ったアイテムはドロップダウンで確認、下の5列が非表示になっています。
全ての列を表示することも可能で、その時は横スクロールで表示されます。
サイズが変更されても、ハイライト表示はできます。
Responsive tablesの使い方
Step 1: スタイルシート
スタイルシートをhead内に外部ファイルとして記述します。
<head> ... <link rel="stylesheet" href="css/rwd-table.min.css"> </head>
Step 2: スクリプト
スクリプトを</body>の上あたりに記述します。
<body>
...
<script type="text/javascript" src="js/rwd-table.js"></script>
<script>
$(function() {
$('.table-complex').responsiveTable({
adddisplayallbtn: true,
addfocusbtn: true,
fixednavbar: '#navbar'//In case you have a fixed navbar.
})
});
</script>
</body>
Step 3: IEへの対応
IEをサポートするため、htmlにclassを追加するようセットします。
<!--[if lt IE 7 ]> <html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7 ]> <html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8 ]> <html lang="en" class="no-js lt-ie10 lt-ie9"> <![endif]--> <!--[if IE 9 ]> <html lang="en" class="no-js lt-ie10"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
Step 4: HTML
ラッパーのdivに「.table-responsive」を付与し、tableにはidと「.table, .table-complex」を付与します。
「.table-bordered .table-striped」はBootstapのオプションです。
<div class="table-responsive">
<table id="example-table" class="table table-complex table-bordered table-striped">
...
</table>
</div>
thにdata属性を使い、レスポンシブの設定をします。
- data-priority=""
- 常に表示するセル
- data-priority="1"
- 常に表示するがドロップダウンで選択可
- data-priority="2"
- 480px以下で可視
- data-priority="3"
- 640px以下で可視
- data-priority="4"
- 800px以下で可視
- data-priority="5"
- 960px以下で可視
- data-priority="6"
- 1120px以下で可視
実装は、下記のようになります。
<thead>
<tr>
<th>Company</th>
<th data-priority="1">Last Trade</th>
<th data-priority="3">Trade Time</th>
<th data-priority="1" >Change</th>
<th data-priority="3">Prev Close</th>
<th data-priority="3">Open</th>
<th data-priority="6">Bid</th>
<th data-priority="6">Ask</th>
<th data-priority="6">1y Target Est</th>
<th data-priority="6">Lorem</th>
<th data-priority="6">Ipsum</th>
</tr>
</thead>
sponsors
