[JS]一味違ったアイデアでレスポンシブ対応のテーブルを実装するスクリプト -Responsive tables

サイト構築 -JavaScript

Pocket

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>