資料表格

資料表格顯示原始資料集。它們通常出現在桌面企業產品中

表格版面

常見的資料表格版面可以視為以下內容

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 - 主要標籤儲存格（每列只有一種此類儲存格，通常是第一個儲存格）
  - 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 - 物件。包含資料表格參數的物件

方法傳回已建立的資料表格實例

app.dataTable.destroy(el)- 銷毀資料表格實例

el - HTMLElement 或字串（含 CSS 選擇器）或物件。要銷毀的資料表格元素或資料表格實例。

app.dataTable.get(el)- 透過 HTML 元素取得資料表格實例

el - HTMLElement 或字串（含 CSS 選擇器）。資料表格元素。

方法傳回資料表格實例

資料表參數

現在讓我們來看一下建立資料表所需可用參數清單

參數	類型	預設	說明
el	HTMLElement 字串		資料表元素。如果你已經在 HTML 中有資料表元素，並且想要使用此元素建立新執行個體時，這會很有用

資料表事件

資料表會在資料表元素上觸發以下 DOM 事件，以及在應用程式和資料表執行個體上觸發事件

DOM 事件

事件	目標	說明
datatable:sort	資料表元素<div class="data-table">	當資料表排序變更時，將觸發事件
datatable:beforedestroy	資料表元素<div class="data-table">	在資料表執行個體即將被銷毀之前，將觸發事件

應用程式和資料表執行個體事件

資料表執行個體會在自身執行個體和應用程式執行個體上發出事件。應用程式執行個體事件具有相同的名稱，並加上 dataTable 前綴。

事件	參數	目標	說明
排序	dataTable、排序	dataTable	當資料表排序變更時，將觸發事件
dataTableSort	dataTable、排序	app	當資料表排序變更時，將觸發事件
beforeDestroy	dataTable	dataTable	在資料表執行個體即將被銷毀之前，將觸發事件
dataTableBeforeDestroy	dataTable	app	在資料表執行個體即將被銷毀之前，將觸發事件

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 變數