Basic Table (jQuery) Demo

Demonstration of different settings for Basic Table. For full documentation of settings and method visit http://www.jerrylow.com/basictable or https://github.com/jerrylow/basictable.

基本動作

すべてのデフォルト設定を使用した基本的な実装です。ビューポートの幅が568px以下の場合、テーブルはレスポンシブモードで表示されます。

Name	Age	Gender	Height	Province	Sport
Jill Smith	25	Female	5'4	British Columbia	Volleyball
30	Male	5'9	Ontario	Badminton	Badminton
Jane Strip	29	Female	5'6	Manitoba	Hockey
Gary Mountain	21	Mail	5'8	Alberta	Curling
James Camera	31	Male	6'1	British Columbia	Hiking

$('#table').basictable();

ブレークポイントの変更

テーブルごとにブレークポイントを手動で設定します。ブレイクポイントを768pxに設定することで、一般的なタブレットのポートレートモードでレスポンシブスタイルが適用されるようになります。

Name	Age	Gender	Height	Province	Sport
Jill Smith	25	Female	5'4	British Columbia	Volleyball
John Stone	30	Male	5'9	Ontario	Badminton
Jane Strip	29	Female	5'6	Manitoba	Hockey
Gary Mountain	21	Mail	5'8	Alberta	Curling
James Camera	31	Male	6'1	British Columbia	Hiking

$('#table-breakpoint').basictable({
    breakpoint: 768,
});

コンテナブレークポイントの変更

スクリーンの幅ではなく、コンテナのサイズに基づいてブレークポイントを設定します。

$('#table-container-breakpoint').basictable({
    containerBreakpoint: 485,
});

レスポンシブ機能をオフにする

このスクリプトは、テーブルを強制的にレスポンシブにすることはありません。テーブルがレスポンシブモードになるのは、テーブルがその親コンテナよりも実際に大きくなったときだけです。このデモでは、テーブルの親は id が page の div です。

Name	Age	Gender	Height	Province	Sport
Jill Smith	25	Female	5'4	British Columbia	Volleyball
John Stone	30	Male	5'9	Ontario	Badminton
Jane Strip	29	Female	5'6	Manitoba	Hockey
Gary Mountain	21	Mail	5'8	Alberta	Curling
James Camera	31	Male	6'1	British Columbia	Hiking

$('#table-force-off').basictable({
    forceResponsive: false,
});

最大の高さ

レスポンシブではテーブルが非常に長くなることがあります。モバイルではテーブル内でのスクロールが発生するようなmax-heightを設定することができます。tableWrapをオンにすると、アクティブなクラスをトグルするテーブルの周りのコンテナを得ることができます。独自のラッパーを作成し、ブレークポイントに合わせてこれを行うこともできます。

Name	Age	Gender	Height	Province	Sport
Jill Smith	25	Female	5'4	British Columbia	Volleyball
John Stone	30	Male	5'9	Ontario	Badminton
Jane Strip	29	Female	5'6	Manitoba	Hockey
Gary Mountain	21	Mail	5'8	Alberta	Curling
James Camera	31	Male	6'1	British Columbia	Hiking

$('#table-max-height').basictable({
    tableWrap: true
});

CSS コントロール

JS ResizeよりもMedia Queryを使う

jsのリサイズ時のバインドを使用したくない場合は、CSSを使用してブレークポイント自体を制御することができます。Basic Tableを使って構造自体を設定し、basictable.cssのスタイルを自分のメディアクエリにコピーします。

Name	Age	Gender	Height	Province	Sport
Jill Smith	25	Female	5'4	British Columbia	Volleyball
John Stone	30	Male	5'9	Ontario	Badminton
Jane Strip	29	Female	5'6	Manitoba	Hockey
Gary Mountain	21	Mail	5'8	Alberta	Curling
James Camera	31	Male	6'1	British Columbia	Hiking

@media only screen and (max-width: 568px) {
  #table-no-resize thead {
      display: none;
  }

  #table-no-resize tbody td {
      border: none !important;
      display: block;
      vertical-align: top;
  }

  #table-no-resize tbody td:before {
      content: attr(data-th) ": ";
      display: inline-block;
      font-weight: bold;
      width: 6.5em;
  }

  #table-no-resize tbody td.bt-hide {
      display: none;
  }
} $('#table-no-resize').basictable({
    noResize: true,
});

Two Axis Styling

Two axis could be styled differently. This does not need to be done through the library itself. The example code will show how to target the first column in desktop and first row in responsive mode.

Name	Age	Gender	Height	Province	Sport
Jill Smith	25	Female	5'4	British Columbia	Volleyball
John Stone	30	Male	5'9	Ontario	Badminton
Jane Strip	29	Female	5'6	Manitoba	Hockey
Gary Mountain	21	Mail	5'8	Alberta	Curling
James Camera	31	Male	6'1	British Columbia	Hiking

table.two-axis tr td:first-of-type {
    background: #dff1f7;
}

@media only screen and (max-width: 568px) {
    table.two-axis tr td:first-of-type,
    table.two-axis tr:nth-of-type(2n+2) td:first-of-type,
    table.two-axis tr td:first-of-type:before {
        background: #dff1f7;
        color: #ffffff;
    }

    table.two-axis tr td:first-of-type {
        border-bottom: 1px solid #e4ebeb;
    }
}

Author: Jerry Low (@jerrylowm)  |  Palette Design: Amit Jakhu (@amitjakhu)