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

レスポンシブ対応のテーブルというと、ヘッダが固定されるとか、幅が狭くなるなどといったものが多いですが、これは一味違った対応方法で、表示する幅に合わせて列の数が調整できるテーブルを簡単に実装できるスクリプトです。

実装には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を追加するようセットします。

<!--&#91;if lt IE 7 &#93;> <html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <!&#91;endif&#93;-->
<!--&#91;if IE 7 &#93;>    <html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8"> <!&#91;endif&#93;-->
<!--&#91;if IE 8 &#93;>    <html lang="en" class="no-js lt-ie10 lt-ie9"> <!&#91;endif&#93;-->
<!--&#91;if IE 9 &#93;>    <html lang="en" class="no-js lt-ie10"> <!&#91;endif&#93;-->
<!--&#91;if (gt IE 9)|!(IE)&#93;><!--> <html lang="en" class="no-js"> <!--<!&#91;endif&#93;-->

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

top of page

©2018 coliss