v6.3.3
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop
スポンサー
Support Framework7

データテーブル

    データテーブルは、生データのセットを表示します。通常、企業のデスクトップ製品に搭載されています。

    Data Table Layout

    一般的なデータテーブルのレイアウトは以下のように扱われます。

    <div class="data-table">
  <table>
    <thead>
      <tr>
        <th class="label-cell">Dessert (100g serving)</th>
        <th class="numeric-cell">Calories</th>
        ...
        <th class="medium-only">Comment</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="label-cell">Frozen yogurt</td>
        <td class="numeric-cell">159</td>
        ...
        <td class="medium-only">I like it!</td>
      </tr>
      ...
    </tbody>
  </table>
</div>

    カード内。

    <div class="data-table card">
  <table>
    <thead>
    ...
    </thead>
    <tbody>
    ...
    </tbody>
  </table>
</div>

    構造

    • data-table - メインのデータテーブルラッパー。必須
      • table - テーブルそのもの。必要です。
        • thead - テーブルのヘッド
        • tbody - テーブルのボディです。必須
        • label-cell - メインのラベルセル (この種のセルは、各行に1つだけ、通常は最初のセル)
        • numeric-cell - 数値データを表示するセル (右寄せ)
        • medium-only - アプリの幅が >= 768px のときにのみ、このセル/カラムを表示するための追加クラスです。このようなレスポンシブクラスの完全なセットについては、Grid docsをチェックしてください。これらのクラスは xsmall-only, small-only, medium-only, large-only, xlarge-only です。

    Pagination Footer

    <div class="card data-table">
  <table>
    <thead>
      <tr>
        <th class="label-cell">Dessert (100g serving)</th>
        <th class="numeric-cell">Calories</th>
        <th class="numeric-cell">Fat (g)</th>
        <th class="numeric-cell">Carbs</th>
        <th class="numeric-cell">Protein (g)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="label-cell">Frozen yogurt</td>
        <td class="numeric-cell">159</td>
        <td class="numeric-cell">6.0</td>
        <td class="numeric-cell">24</td>
        <td class="numeric-cell">4.0</td>
      </tr>
      ...
    </tbody>
  </table>
  <div class="data-table-footer">
    <div class="data-table-rows-select">
      Per page:
      <div class="input input-dropdown">
        <select>
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="25">25</option>
          <option value="all">All</option>
        </select>
      </div>
    </div>
    <div class="data-table-pagination">
      <span class="data-table-pagination-label">1-5 of 10</span>
      <a href="#" class="link disabled">
        <i class="icon icon-prev color-gray"></i>
      </a>
      <a href="#" class="link">
        <i class="icon icon-next color-gray"></i>
      </a>
    </div>
  </div>
</div>

    構造

    • data-table-footer - データテーブルフッターのメイン要素。
      • data-table-rows-select - ページごとに金額を選択するコンテナです。
      • data-table-pagination - 現在のページに関する情報と、prev/nextのナビゲーションボタンが表示されるコンテナ
        • data-table-pagination-label - 現在のページングラベル

    Selectable Rows

    <div class="data-table data-table-init card">
  <table>
    <thead>
      <tr>
        <th class="checkbox-cell">
          <label class="checkbox">
            <input type="checkbox"/>
            <i class="icon-checkbox"></i>
          </label>
        </th>
        <th class="label-cell">Dessert (100g serving)</th>
        <th class="numeric-cell">Calories</th>
        ...
        <th class="numeric-cell">Protein (g)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="checkbox-cell">
          <label class="checkbox">
            <input type="checkbox"/>
            <i class="icon-checkbox"></i>
          </label>
        </td>
        <td class="label-cell">Frozen yogurt</td>
        <td class="numeric-cell">159</td>
        ...
        <td class="numeric-cell">4.0</td>
      </tr>
      ...
    </tbody>
  </table>
</div>

    構造

    • data-table-init - 選択可能な行に必要なJavaScriptアクションを有効にする追加クラスです。

    • チェックボックスセル。テーブルのヘッダにあるこのようなセルは、テーブル本体のすべての行を選択/選択解除します。

      <td class="checkbox-cell">
  <label class="checkbox">
    <input type="checkbox"/>
    <i class="icon-checkbox"></i>
  </label>
</td>

    Inputs In Table Head

    このようなテーブルは、データのフィルタリングや検索のために、アドミンインターフェイスで広く使われています。

    <div class="card data-table">
  <table>
    <thead>
      <tr>
        <th class="input-cell">
          <span class="table-head-label">ID</span>
          <div class="input" style="width: 50px">
            <input type="number" placeholder="Filter" />
          </div>
        </th>
        <th class="input-cell">
          <span class="table-head-label">Name</span>
          <div class="input">
            <input type="text" placeholder="Filter" />
          </div>
        </th>
        ...
        <th class="input-cell">
          <span class="table-head-label">Gender</span>
          <div class="input input-dropdown">
            <select>
              <option value="All">All</option>
              <option value="Male">Male</option>
              <option value="Female">Female</option>
            </select>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John Doe</td>
        <td>john@doe.com</td>
        <td>Male</td>
      </tr>
      ...
    </tbody>
  </table>
</div>

    構造

    • input-cell - 入力を表示するために必要なテーブルセルの追加クラスです。

    • <span class="table-head-label"> - 入力ラベル

    • <div class="input"> - 入力コンテナ

    Table Title/Header

    データテーブルがカード内で使用されている場合、カードのヘッダーにデータテーブルのタイトルとアクションを追加して使用することができます。

    タイトルとアクション

    <div class="data-table data-table-init card">
  <!-- カードヘッダー -->
  <div class="card-header">
    <!-- テーブルのタイトル -->
    <div class="data-table-title">Nutrition</div>
    <!-- テーブルのアクション -->
    <div class="data-table-actions">
      <a class="link icon-only">
        <i class="icon f7-icons if-not-md">line_horizontal_3_decrease</i>
        <i class="icon material-icons md-only">sort</i>
      </a>
      <a class="link icon-only">
        <i class="icon f7-icons if-not-md">ellipsis_vertical_circle</i>
        <i class="icon material-icons md-only">more_vert</i>
      </a>
    </div>
  </div>
  <!-- カードの内容 -->
  <div class="card-content">
    <table>
      <thead>
        <tr>
          <th class="checkbox-cell">
            <label class="checkbox">
              <input type="checkbox" />
              <i class="icon-checkbox"></i>
            </label>
          </th>
          <th class="label-cell">Dessert (100g serving)</th>
          <th class="numeric-cell">Calories</th>
          ...
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="checkbox-cell">
            <label class="checkbox">
              <input type="checkbox" />
              <i class="icon-checkbox"></i>
            </label>
          </td>
          <td class="label-cell">Frozen yogurt</td>
          <td class="numeric-cell">159</td>
          ...
        </tr>
        ...
      </tbody>
    </table>
  </div>
</div>

    構造

    • data-table-title - テーブルのタイトル
    • data-table-actions - テーブルのメインアクション

    選択時の異なるアクション

    <div class="data-table data-table-init card">
  <!-- カードヘッダ -->
  <div class="card-header">
    <!-- デフォルトのテーブルヘッダ -->
    <div class="data-table-header">
      <!-- デフォルトのテーブルタイトル -->
      <div class="data-table-title">Nutrition</div>
      <!-- デフォルトのテーブルアクション -->
      <div class="data-table-actions">
        <a class="link icon-only">
          <i class="icon f7-icons if-not-md">line_horizontal_3_decrease</i>
          <i class="icon material-icons md-only">sort</i>
        </a>
        <a class="link icon-only">
          <i class="icon f7-icons if-not-md">ellipsis_vertical_circle</i>
          <i class="icon material-icons md-only">more_vert</i>
        </a>
      </div>
    </div>
    <!-- 選択されたテーブルのヘッダー -->
    <div class="data-table-header-selected">
      <!-- 選択されたテーブルのタイトル -->
      <div class="data-table-title-selected"><span class="data-table-selected-count"></span> items selected</div>
      <!-- 選択されたテーブルのアクション -->
      <div class="data-table-actions">
        <a class="link icon-only">
          <i class="icon f7-icons if-not-md">trash</i>
          <i class="icon material-icons md-only">delete</i>
        </a>
        <a class="link icon-only">
          <i class="icon f7-icons if-not-md">ellipsis_vertical_circle</i>
          <i class="icon material-icons md-only">more_vert</i>
        </a>
      </div>
    </div>
  </div>
  <div class="card-content">
    <table>
      <thead>
        <tr>
          <th class="checkbox-cell">
            <label class="checkbox">
              <input type="checkbox" />
              <i class="icon-checkbox"></i>
            </label>
          </th>
          <th class="label-cell">Dessert (100g serving)</th>
          <th class="numeric-cell">Calories</th>
          ...
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="checkbox-cell">
            <label class="checkbox">
              <input type="checkbox" />
              <i class="icon-checkbox"></i>
            </label>
          </td>
          <td class="label-cell">Frozen yogurt</td>
          <td class="numeric-cell">159</td>
          ...
        </tr>
        ...
      </tbody>
    </table>
  </div>
</div>

    構造

    • data-table-header - デフォルトのテーブルヘッダーです。選択された行がないときに表示されます。
    • data-table-header-selected` - 選択されたテーブルのヘッダーです。選択された行がある場合に表示されます。
    • data-table-selected-count - 選択されたテーブル行の数です。数値はJavaScriptによってここに配置されます。

    行アクション付きの代替ヘッダー

    <div class="data-table data-table-init card">
  <div class="card-header">
    <!-- テーブルのリンク/アクション -->
    <div class="data-table-links">
      <a class="link">Add</a>
      <a class="link">Remove</a>
    </div>
    <!-- テーブルのアクション -->
    <div class="data-table-actions">
      <a class="link icon-only">
        <i class="icon f7-icons if-not-md">line_horizontal_3_decrease</i>
        <i class="icon material-icons md-only">sort</i>
      </a>
      <a class="link icon-only">
        <i class="icon f7-icons if-not-md">ellipsis_vertical_circle</i>
        <i class="icon material-icons md-only">more_vert</i>
      </a>
    </div>
  </div>
  <div class="card-content">
    <table>
      <thead>
        <tr>
          <th class="checkbox-cell">
            <label class="checkbox">
              <input type="checkbox" />
              <i class="icon-checkbox"></i>
            </label>
          </th>
          <th class="label-cell">Dessert (100g serving)</th>
          <th class="numeric-cell">Calories</th>
          ...
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="checkbox-cell">
            <label class="checkbox">
              <input type="checkbox" />
              <i class="icon-checkbox"></i>
            </label>
          </td>
          <td class="label-cell">Frozen yogurt</td>
          <td class="numeric-cell">159</td>
          ...
          <td class="actions-cell">
            <a class="link icon-only">
              <i class="icon f7-icons if-not-md">square_pencil</i>
              <i class="icon material-icons md-only">edit</i>
            </a>
            <a class="link icon-only">
              <i class="icon f7-icons if-not-md">trash</i>
              <i class="icon material-icons md-only">delete</i>
            </a>
          </td>
        </tr>
        ...
      </tbody>
    </table>
  </div>
</div>

    構造

    • data-table-links - 代替/追加のテーブルアクション
    • actions-cell - アクションリンク/アイコンのセル

    Sortable

    <div class="data-table data-table-init card">
  <div class="card-header">
    <div class="data-table-title">Nutrition</div>
    <div class="data-table-actions">
      <a class="link icon-only">
        <i class="icon f7-icons if-not-md">line_horizontal_3_decrease</i>
        <i class="icon material-icons md-only">sort</i>
      </a>
      <a class="link icon-only">
        <i class="icon f7-icons if-not-md">ellipsis_vertical_circle</i>
        <i class="icon material-icons md-only">more_vert</i>
      </a>
    </div>
  </div>
  <div class="card-content">
    <table>
      <thead>
        <tr>
          <th class="checkbox-cell">
            <label class="checkbox">
              <input type="checkbox" />
              <i class="icon-checkbox"></i>
            </label>
          </th>
          <th class="label-cell sortable-cell sortable-cell-active">Dessert (100g serving)</th>
          <th class="numeric-cell sortable-cell">Calories</th>
          <th class="numeric-cell sortable-cell">Fat (g)</th>
          <th class="numeric-cell sortable-cell">Carbs</th>
          <th class="numeric-cell sortable-cell">Protein (g)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="checkbox-cell">
            <label class="checkbox">
              <input type="checkbox" />
              <i class="icon-checkbox"></i>
            </label>
          </td>
          <td class="label-cell">Frozen yogurt</td>
          <td class="numeric-cell">159</td>
          <td class="numeric-cell">6.0</td>
          <td class="numeric-cell">24</td>
          <td class="numeric-cell">4.0</td>
        </tr>
        ...
      </tbody>
    </table>
  </div>
</div>

    構造

    • sortable-cell - セルやカラムをソート可能にするための追加クラスです。
    • sortable-cell-active - ソート可能なセル/カラムをアクティブ/デフォルトにするための追加クラスです。
    • sortable-asc - 現在のソートを昇順に指定するための追加クラスです (デフォルト)
    • sortable-desc - 降順でソートすることを指定する追加クラスです。

    注意: フレームワークが提供する実際のソート可能なロジックはありません。実際のソートロジックは手動で実現する必要があります。

    Collapsible

    次のテーブルは、小さな画面ではリストビューのように折りたたまれます。

    <div class="card data-table data-table-collapsible data-table-init">
  <div class="card-header">
    <div class="data-table-title">Nutrition</div>
    <div class="data-table-actions">
      <a class="link icon-only">
        <i class="icon f7-icons if-not-md">line_horizontal_3_decrease</i>
        <i class="icon material-icons md-only">sort</i>
      </a>
      <a class="link icon-only">
        <i class="icon f7-icons if-not-md">ellipsis_vertical_circle</i>
        <i class="icon material-icons md-only">more_vert</i>
      </a>
    </div>
  </div>
  <div class="card-content">
    <table>
      <thead>
        <tr>
          <th class="label-cell">Dessert (100g serving)</th>
          <th class="numeric-cell">Calories</th>
          ...
          <th class="numeric-cell">Protein (g)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="label-cell">Frozen yogurt</td>
          <td class="numeric-cell">159</td>
          ...
          <td class="numeric-cell">4.0</td>
        </tr>
        ...
      </tbody>
    </table>
  </div>
</div>

    構造

    • data-table-collapsible - 折りたたみ可能なロジックを有効にするための、追加のテーブルクラスです。このためには、"data-table-init "クラスも必要です。

    データテーブルアプリのメソッド

    データテーブルを動的に追加して、行の選択やヘッダーの切り替えなどのロジックが必要な場合は、手動で init する必要があります。ここでは、データテーブルを扱うアプリの関連メソッドを見てみましょう。

    app.dataTable.create(parameters)- データテーブルのインスタンス作成

    • parameters - object. データテーブルのパラメータを持つオブジェクト

    作成したData Tableのインスタンスを返すメソッド

    app.dataTable.destroy(el)- データテーブルのインスタンスの破棄

    • el - HTMLElementまたはstring（CSSセレクタ付き）またはobject。破壊するデータテーブル要素またはデータテーブルインスタンス。

    app.dataTable.get(el)- HTML要素によるデータテーブルインスタンスの取得

    • el - HTMLElement または string (CSS Selectorを使用). データテーブルの要素です。

    メソッドは、Data Tableのインスタンスを返します。

    データテーブルのパラメータ

    ここでは、データテーブルを作成するために必要なパラメータの一覧を見てみましょう。

    ParameterTypeDefaultDescription
    elHTMLElement
    string    		Data Table element. Can be useful if you already have Data Table element in your HTML and want to create new instance using this element

    データテーブルのイベント

    Data Tableは、以下のDOMイベントをData Table要素に、イベントをアプリとData Tableインスタンスに発行します。

    DOMイベント

    EventTargetDescription
    datatable:sortData Table Element<div class="data-table">イベントは、データテーブルのソートが変更されたときに発生します。
    datatable:beforedestroyData Table Element<div class="data-table">イベントは、Data Table インスタンスが破棄される直前に発生します。

    アプリと Data Table インスタンスのイベント

    Data Tableインスタンスは、selfインスタンスとappインスタンスの両方でイベントを発行します。アプリのインスタンスのイベントは、同じ名前でプレフィックスとして dataTable が付きます。

    EventArgumentsTargetDescription
    sortdataTable, sortdataTableイベントはデータテーブルのソートが変更されたときに発生します。
    dataTableSortdataTable, sortapp
    beforeDestroydataTabledataTableData Tableインスタンスが破壊される直前にイベントが発生します。
    dataTableBeforeDestroydataTableapp

    CSS Variables

    Below is the list of related CSS variables (CSS custom properties).

    Note that commented variables are not specified by default and their values is what they fallback to in this case.

    :root {
  --f7-table-head-font-size: 12px;
  --f7-table-body-font-size: 14px;
  --f7-table-footer-font-size: 12px;
  --f7-table-input-height: 24px;
  --f7-table-input-font-size: 14px;
  --f7-table-collapsible-cell-padding: 16px;
  --f7-table-link-icon-only-icon-size: 20px;
  --f7-table-head-bg-color: transparent;
  --f7-table-card-header-bg-color: transparent;
  --f7-table-card-header-height: 64px;
  --f7-table-cell-padding-vertical: 0px;
  --f7-table-sortable-icon-color: #000;
}
:root .theme-dark,
:root.theme-dark {
  --f7-table-cell-border-color: rgba(255, 255, 255, 0.15);
  --f7-table-sortable-icon-color: #fff;
  --f7-table-input-text-color: #fff;
}
.ios {
  --f7-table-head-font-weight: 600;
  --f7-table-head-cell-height: 44px;
  --f7-table-head-icon-size: 18px;
  --f7-table-body-cell-height: 44px;
  --f7-table-cell-padding-horizontal: 16px;
  --f7-table-edge-cell-padding-horizontal: 16px;
  --f7-table-label-cell-padding-horizontal: 16px;
  --f7-table-checkbox-cell-width: 22px;
  /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
  /* --f7-table-actions-link-color: var(--f7-theme-color); */
  --f7-table-title-font-size: 17px;
  --f7-table-title-font-weight: 600;
  --f7-table-footer-height: 44px;
  --f7-table-head-text-color: rgba(0, 0, 0, 0.45);
  --f7-table-cell-border-color: rgba(0, 0, 0, 0.22);
  --f7-table-selected-row-bg-color: rgba(0, 0, 0, 0.03);
  --f7-table-footer-text-color: rgba(0, 0, 0, 0.45);
  --f7-table-input-text-color: #000;
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-table-head-text-color: rgba(255, 255, 255, 0.55);
  --f7-table-footer-text-color: rgba(255, 255, 255, 0.55);
  --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.08);
}
.md {
  --f7-table-head-font-weight: 500;
  --f7-table-head-cell-height: 56px;
  --f7-table-head-icon-size: 16px;
  --f7-table-body-cell-height: 48px;
  --f7-table-cell-padding-horizontal: 28px;
  --f7-table-edge-cell-padding-horizontal: 24px;
  --f7-table-label-cell-padding-horizontal: 24px;
  --f7-table-checkbox-cell-width: 18px;
  --f7-table-title-font-size: 20px;
  --f7-table-title-font-weight: 400;
  --f7-table-footer-height: 56px;
  --f7-table-head-text-color: rgba(0, 0, 0, 0.54);
  --f7-table-cell-border-color: rgba(0, 0, 0, 0.12);
  --f7-table-actions-cell-link-color: rgba(0, 0, 0, 0.54);
  --f7-table-selected-row-bg-color: #f5f5f5;
  --f7-table-actions-link-color: rgba(0, 0, 0, 0.54);
  --f7-table-footer-text-color: rgba(0, 0, 0, 0.54);
  --f7-table-input-text-color: #212121;
}
.md .theme-dark,
.md.theme-dark {
  --f7-table-head-text-color: rgba(255, 255, 255, 0.54);
  --f7-table-footer-text-color: rgba(255, 255, 255, 0.54);
  --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.05);
  --f7-table-actions-cell-link-color: rgba(255, 255, 255, 0.54);
  --f7-table-actions-link-color: rgba(255, 255, 255, 0.54);
}
.aurora {
  --f7-table-input-height: 32px;
  --f7-table-head-font-weight: 600;
  --f7-table-head-cell-height: 56px;
  --f7-table-head-icon-size: 18px;
  --f7-table-body-cell-height: 48px;
  --f7-table-cell-padding-horizontal: 16px;
  --f7-table-edge-cell-padding-horizontal: 16px;
  --f7-table-label-cell-padding-horizontal: 16px;
  --f7-table-checkbox-cell-width: 22px;
  /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
  /* --f7-table-actions-link-color: var(--f7-theme-color); */
  --f7-table-title-font-size: 20px;
  --f7-table-title-font-weight: 600;
  --f7-table-footer-height: 56px;
  --f7-table-head-text-color: rgba(0, 0, 0, 0.6);
  --f7-table-cell-border-color: rgba(0, 0, 0, 0.12);
  --f7-table-selected-row-bg-color: rgba(0, 0, 0, 0.03);
  --f7-table-footer-text-color: rgba(0, 0, 0, 0.5);
  --f7-table-input-text-color: #000;
  --f7-table-head-bg-color: #f6f6f7;
  --f7-table-card-header-bg-color: #f6f6f7;
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.03);
  --f7-table-head-text-color: rgba(255, 255, 255, 0.54);
  --f7-table-footer-text-color: rgba(255, 255, 255, 0.54);
  --f7-table-head-bg-color: rgba(255, 255, 255, 0.05);
  --f7-table-card-header-bg-color: rgba(255, 255, 255, 0.05);
}