データテーブル

データテーブルは、生のデータセットを表示します。通常、デスクトップエンタープライズ製品に表示されます。

テーブルレイアウト

一般的なデータテーブルのレイアウトは、次のように扱うことができます。

data-table.f7.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="title">Data Table</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">Plain Table</div>
    <div class="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>
            <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="numeric-cell">6.0</td>
            <td class="numeric-cell">24</td>
            <td class="numeric-cell">4.0</td>
            <td class="medium-only">Super tasty</td>
          </tr>
          <tr>
            <td class="label-cell">Ice cream sandwich</td>
            <td class="numeric-cell">237</td>
            <td class="numeric-cell">9.0</td>
            <td class="numeric-cell">37</td>
            <td class="numeric-cell">4.4</td>
            <td class="medium-only">Don't like sandwiches</td>
          </tr>
          <tr>
            <td class="label-cell">Eclair</td>
            <td class="numeric-cell">262</td>
            <td class="numeric-cell">16.0</td>
            <td class="numeric-cell">24</td>
            <td class="numeric-cell">6.0</td>
            <td class="medium-only">This one is my favorite</td>
          </tr>
          <tr>
            <td class="label-cell">Cupcake</td>
            <td class="numeric-cell">305</td>
            <td class="numeric-cell">3.7</td>
            <td class="numeric-cell">67</td>
            <td class="numeric-cell">4.3</td>
            <td class="medium-only">No comments</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="block-title">Within card</div>
    <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>
            <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="numeric-cell">6.0</td>
            <td class="numeric-cell">24</td>
            <td class="numeric-cell">4.0</td>
            <td class="medium-only">Super tasty</td>
          </tr>
          <tr>
            <td class="label-cell">Ice cream sandwich</td>
            <td class="numeric-cell">237</td>
            <td class="numeric-cell">9.0</td>
            <td class="numeric-cell">37</td>
            <td class="numeric-cell">4.4</td>
            <td class="medium-only">Don't like sandwiches</td>
          </tr>
          <tr>
            <td class="label-cell">Eclair</td>
            <td class="numeric-cell">262</td>
            <td class="numeric-cell">16.0</td>
            <td class="numeric-cell">24</td>
            <td class="numeric-cell">6.0</td>
            <td class="medium-only">This one is my favorite</td>
          </tr>
          <tr>
            <td class="label-cell">Cupcake</td>
            <td class="numeric-cell">305</td>
            <td class="numeric-cell">3.7</td>
            <td class="numeric-cell">67</td>
            <td class="numeric-cell">4.3</td>
            <td class="medium-only">No comments</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

場所

data-table - メインデータテーブルラッパー。必須
- table - テーブル自体。必須
  - thead - テーブルヘッダー
  - tbody - テーブルボディ。必須
  - label-cell - メインラベルセル (行ごとに1つだけ、通常は最初のセル)
  - numeric-cell - 数値データを表示するセル (右揃え)
  - medium-only - アプリの幅が768px以上の場合にのみ、このセル/列を表示するための追加クラス。このようなレスポンシブクラスの完全なセットについては、グリッドドキュメントをご覧ください。それらは、xsmall-only、small-only、medium-only、large-only、xlarge-onlyです。

ページネーションフッター

data-table-pagination-footer.f7.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="title">Data Table</div>
    </div>
  </div>
  <div class="page-content">
    <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>
          <tr>
            <td class="label-cell">Ice cream sandwich</td>
            <td class="numeric-cell">237</td>
            <td class="numeric-cell">9.0</td>
            <td class="numeric-cell">37</td>
            <td class="numeric-cell">4.4</td>
          </tr>
          <tr>
            <td class="label-cell">Eclair</td>
            <td class="numeric-cell">262</td>
            <td class="numeric-cell">16.0</td>
            <td class="numeric-cell">24</td>
            <td class="numeric-cell">6.0</td>
          </tr>
          <tr>
            <td class="label-cell">Cupcake</td>
            <td class="numeric-cell">305</td>
            <td class="numeric-cell">3.7</td>
            <td class="numeric-cell">67</td>
            <td class="numeric-cell">4.3</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>
  </div>
</div>

場所

data-table-footer - データテーブルフッターのメイン要素
- data-table-rows-select - ページあたりの量を選択できるコンテナ
- data-table-pagination - 現在のページ情報と前/次ナビゲーションボタンを含むコンテナ
  - data-table-pagination-label - 現在のページングラベル

選択可能な行

data-table-selectable.f7.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="title">Selectable Rows</div>
    </div>
  </div>
  <div class="page-content">
    <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">Fat (g)</th>
            <th class="numeric-cell">Carbs</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">6.0</td>
            <td class="numeric-cell">24</td>
            <td class="numeric-cell">4.0</td>
          </tr>
          <tr>
            <td class="checkbox-cell">
              <label class="checkbox">
                <input type="checkbox" />
                <i class="icon-checkbox"></i>
              </label>
            </td>
            <td class="label-cell">Ice cream sandwich</td>
            <td class="numeric-cell">237</td>
            <td class="numeric-cell">9.0</td>
            <td class="numeric-cell">37</td>
            <td class="numeric-cell">4.4</td>
          </tr>
          <tr>
            <td class="checkbox-cell">
              <label class="checkbox">
                <input type="checkbox" />
                <i class="icon-checkbox"></i>
              </label>
            </td>
            <td class="label-cell">Eclair</td>
            <td class="numeric-cell">262</td>
            <td class="numeric-cell">16.0</td>
            <td class="numeric-cell">24</td>
            <td class="numeric-cell">6.0</td>
          </tr>
          <tr>
            <td class="checkbox-cell">
              <label class="checkbox">
                <input type="checkbox" />
                <i class="icon-checkbox"></i>
              </label>
            </td>
            <td class="label-cell">Cupcake</td>
            <td class="numeric-cell">305</td>
            <td class="numeric-cell">3.7</td>
            <td class="numeric-cell">67</td>
            <td class="numeric-cell">4.3</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

場所

data-table-init - 選択可能な行に必要なJavaScriptアクションを有効にするための追加クラス
チェックボックスセル。テーブルヘッダーのこのようなセルは、テーブルボディのすべての行を選択/選択解除します。
```
<td class="checkbox-cell">
  <label class="checkbox">
    <input type="checkbox"/>
    <i class="icon-checkbox"></i>
  </label>
</td>
```

テーブルヘッダーの入力

このようなテーブルは、管理インターフェースでデータをフィルタリングまたは検索するためによく使用されます。

data-table-head-inputs.f7.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="title">Data Table</div>
    </div>
  </div>
  <div class="page-content">
    <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">Email</span>
              <div class="input">
                <input type="email" 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>[email protected]</td>
            <td>Male</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jane Doe</td>
            <td>[email protected]</td>
            <td>Female</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Vladimir Kharlampidi</td>
            <td>[email protected]</td>
            <td>Male</td>
          </tr>
          <tr>
            <td>4</td>
            <td>Jennifer Doe</td>
            <td>[email protected]</td>
            <td>Female</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

場所

input-cell - 入力を表示するために必要なテーブルセルに追加のクラス
<span class="table-head-label"> - 入力ラベル
<div class="input"> - 入力コンテナ

テーブルタイトル/ヘッダー

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

data-table-title.f7.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="title">Table Title</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">With title and actions</div>
    <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>
              <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="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>
            <tr>
              <td class="checkbox-cell">
                <label class="checkbox">
                  <input type="checkbox" />
                  <i class="icon-checkbox"></i>
                </label>
              </td>
              <td class="label-cell">Ice cream sandwich</td>
              <td class="numeric-cell">237</td>
              <td class="numeric-cell">9.0</td>
              <td class="numeric-cell">37</td>
              <td class="numeric-cell">4.4</td>
            </tr>
            <tr>
              <td class="checkbox-cell">
                <label class="checkbox">
                  <input type="checkbox" />
                  <i class="icon-checkbox"></i>
                </label>
              </td>
              <td class="label-cell">Eclair</td>
              <td class="numeric-cell">262</td>
              <td class="numeric-cell">16.0</td>
              <td class="numeric-cell">24</td>
              <td class="numeric-cell">6.0</td>
            </tr>
            <tr>
              <td class="checkbox-cell">
                <label class="checkbox">
                  <input type="checkbox" />
                  <i class="icon-checkbox"></i>
                </label>
              </td>
              <td class="label-cell">Cupcake</td>
              <td class="numeric-cell">305</td>
              <td class="numeric-cell">3.7</td>
              <td class="numeric-cell">67</td>
              <td class="numeric-cell">4.3</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="block-title">Different actions on select</div>
    <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>
              <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="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>
            <tr>
              <td class="checkbox-cell">
                <label class="checkbox">
                  <input type="checkbox" />
                  <i class="icon-checkbox"></i>
                </label>
              </td>
              <td class="label-cell">Ice cream sandwich</td>
              <td class="numeric-cell">237</td>
              <td class="numeric-cell">9.0</td>
              <td class="numeric-cell">37</td>
              <td class="numeric-cell">4.4</td>
            </tr>
            <tr>
              <td class="checkbox-cell">
                <label class="checkbox">
                  <input type="checkbox" />
                  <i class="icon-checkbox"></i>
                </label>
              </td>
              <td class="label-cell">Eclair</td>
              <td class="numeric-cell">262</td>
              <td class="numeric-cell">16.0</td>
              <td class="numeric-cell">24</td>
              <td class="numeric-cell">6.0</td>
            </tr>
            <tr>
              <td class="checkbox-cell">
                <label class="checkbox">
                  <input type="checkbox" />
                  <i class="icon-checkbox"></i>
                </label>
              </td>
              <td class="label-cell">Cupcake</td>
              <td class="numeric-cell">305</td>
              <td class="numeric-cell">3.7</td>
              <td class="numeric-cell">67</td>
              <td class="numeric-cell">4.3</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="block-title">Alternate header with row actions</div>
    <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 class="numeric-cell">Fat (g)</th>
              <th class="numeric-cell">Carbs</th>
              <th class="numeric-cell">Protein (g)</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="numeric-cell">6.0</td>
              <td class="numeric-cell">24</td>
              <td class="numeric-cell">4.0</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>
            <tr>
              <td class="checkbox-cell">
                <label class="checkbox">
                  <input type="checkbox" />
                  <i class="icon-checkbox"></i>
                </label>
              </td>
              <td class="label-cell">Ice cream sandwich</td>
              <td class="numeric-cell">237</td>
              <td class="numeric-cell">9.0</td>
              <td class="numeric-cell">37</td>
              <td class="numeric-cell">4.4</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>
            <tr>
              <td class="checkbox-cell">
                <label class="checkbox">
                  <input type="checkbox" />
                  <i class="icon-checkbox"></i>
                </label>
              </td>
              <td class="label-cell">Eclair</td>
              <td class="numeric-cell">262</td>
              <td class="numeric-cell">16.0</td>
              <td class="numeric-cell">24</td>
              <td class="numeric-cell">6.0</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>
            <tr>
              <td class="checkbox-cell">
                <label class="checkbox">
                  <input type="checkbox" />
                  <i class="icon-checkbox"></i>
                </label>
              </td>
              <td class="label-cell">Cupcake</td>
              <td class="numeric-cell">305</td>
              <td class="numeric-cell">3.7</td>
              <td class="numeric-cell">67</td>
              <td class="numeric-cell">4.3</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>
  </div>
</div>

場所

data-table-title - テーブルタイトル
data-table-actions - メインテーブルアクション
data-table-header - デフォルトのテーブルヘッダー。選択された行がない場合に表示されます
data-table-header-selected - 選択されたテーブルヘッダー。選択された行がある場合に表示されます
data-table-selected-count - 選択されたテーブル行の数。 JavaScriptによってここに数値が配置されます
data-table-links - 代替/追加のテーブルアクション
actions-cell - アクションリンク/アイコンセル

ソート可能

data-table-sortable.f7.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="title">Sortable Table</div>
    </div>
  </div>
  <div class="page-content">
    <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-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>
            <tr>
              <td class="checkbox-cell">
                <label class="checkbox">
                  <input type="checkbox" /><i class="icon-checkbox"></i>
                </label>
              </td>
              <td class="label-cell">Ice cream sandwich</td>
              <td class="numeric-cell">237</td>
              <td class="numeric-cell">9.0</td>
              <td class="numeric-cell">37</td>
              <td class="numeric-cell">4.4</td>
            </tr>
            <tr>
              <td class="checkbox-cell">
                <label class="checkbox">
                  <input type="checkbox" /><i class="icon-checkbox"></i>
                </label>
              </td>
              <td class="label-cell">Eclair</td>
              <td class="numeric-cell">262</td>
              <td class="numeric-cell">16.0</td>
              <td class="numeric-cell">24</td>
              <td class="numeric-cell">6.0</td>
            </tr>
            <tr>
              <td class="checkbox-cell">
                <label class="checkbox">
                  <input type="checkbox" /><i class="icon-checkbox"></i>
                </label>
              </td>
              <td class="label-cell">Cupcake</td>
              <td class="numeric-cell">305</td>
              <td class="numeric-cell">3.7</td>
              <td class="numeric-cell">67</td>
              <td class="numeric-cell">4.3</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

場所

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

注: フレームワークによって提供される**実際のソートロジックはありません**。実際のソートロジックは手動で実装する必要があります

折りたたみ可能

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

data-table-collapsible.f7.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="title">Collapsible Table</div>
    </div>
  </div>
  <div class="page-content">
    <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">more_vertical_round</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">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>
            <tr>
              <td class="label-cell">Ice cream sandwich</td>
              <td class="numeric-cell">237</td>
              <td class="numeric-cell">9.0</td>
              <td class="numeric-cell">37</td>
              <td class="numeric-cell">4.4</td>
            </tr>
            <tr>
              <td class="label-cell">Eclair</td>
              <td class="numeric-cell">262</td>
              <td class="numeric-cell">16.0</td>
              <td class="numeric-cell">24</td>
              <td class="numeric-cell">6.0</td>
            </tr>
            <tr>
              <td class="label-cell">Cupcake</td>
              <td class="numeric-cell">305</td>
              <td class="numeric-cell">3.7</td>
              <td class="numeric-cell">67</td>
              <td class="numeric-cell">4.3</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

場所

data-table-collapsible - 折りたたむロジックを有効にするための追加のテーブルクラス。これには「data-table-init」クラスも必要です.

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

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

app.dataTable.create(parameters)- データテーブルインスタンスを作成します

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

メソッドは、作成されたデータテーブルのインスタンスを返します

app.dataTable.destroy(el)- データテーブルインスタンスを破棄します

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

app.dataTable.get(el)- HTML要素からデータテーブルインスタンスを取得します

el - HTMLElement または string (CSSセレクター付き)。データテーブル要素。

メソッドは、データテーブルのインスタンスを返します

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

データテーブルを作成するために必要な利用可能なパラメータのリストを見てみましょう

パラメータ	タイプ	デフォルト	説明
el	HTMLElement 文字列		データテーブル要素。 HTMLに既にデータテーブル要素があり、この要素を使用して新しいインスタンスを作成する場合に役立ちます

データテーブルイベント

データテーブルは、データテーブル要素で次のDOMイベントを発生させ、アプリとデータテーブルインスタンスでイベントを発生させます

DOMイベント

イベント	ターゲット	説明
datatable:sort	データテーブル要素<div class="data-table">	イベントは、データテーブルのソートが変更されたときにトリガーされます
datatable:beforedestroy	データテーブル要素<div class="data-table">	データテーブルインスタンスが破棄される直前にイベントがトリガーされます

アプリとデータテーブルインスタンスイベント

データテーブルインスタンスは、自身インスタンスとアプリインスタンスの両方でイベントを発生させます。アプリインスタンスイベントの名前は、dataTableというプレフィックスが付いた同じ名前です。

イベント	引数	ターゲット	説明
ソート	dataTable、ソート	dataTable	イベントは、データテーブルのソートが変更されたときにトリガーされます
dataTableSort	dataTable、ソート	アプリ	イベントは、データテーブルのソートが変更されたときにトリガーされます
beforeDestroy	dataTable	dataTable	データテーブルインスタンスが破棄される直前にイベントがトリガーされます
dataTableBeforeDestroy	dataTable	アプリ	データテーブルインスタンスが破棄される直前にイベントがトリガーされます

CSS変数

以下は、関連するCSS変数 (CSSカスタムプロパティ) のリストです。

コメント化された変数はデフォルトでは指定されておらず、その値はこの場合のフォールバック値であることに注意してください。

: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 .dark,
:root.dark {
  --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 .dark,
.ios.dark {
  --f7-table-head-text-color: rgba(255, 255, 255, 0.55);
  --f7-table-cell-border-color: rgba(255, 255, 255, 0.15);
  --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-actions-cell-link-color: rgba(0, 0, 0, 0.54);
  --f7-table-actions-link-color: rgba(0, 0, 0, 0.54);
  --f7-table-input-text-color: #212121;
}
.md .dark,
.md.dark {
  --f7-table-actions-cell-link-color: rgba(255, 255, 255, 0.54);
  --f7-table-actions-link-color: rgba(255, 255, 255, 0.54);
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-table-head-text-color: var(--f7-md-on-surface-variant);
  --f7-table-footer-text-color: var(--f7-md-on-surface-variant);
  --f7-table-selected-row-bg-color: var(--f7-md-secondary-container);
  --f7-table-cell-border-color: var(--f7-md-outline);
}

このドキュメントを改善する

このページで

テーブルレイアウト
ページネーションフッター
選択可能な行
テーブルヘッダーの入力
テーブルタイトル/ヘッダー
ソート可能
折りたたみ可能
データテーブルアプリメソッド
データテーブルパラメータ
データテーブルイベント

DOMイベント
アプリとデータテーブルインスタンスイベント

CSS変数