数据表格

数据表格显示原始数据集。它们通常出现在桌面企业产品中

表格版式

常见的表格数据版式可以处理为如下

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 - 当应用程序宽度 >= 768 像素时，仅显示此单元格/列的附加类。有关此类响应类别的完整列表，请查看网格文档。它们是 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 string		数据表元素。如果你已在 HTML 中有数据表元素，且想要使用该元素来创建新实例，那么此参数会很有帮助

数据表事件

数据表将在数据表元素、app 元素和数据表实例上触发以下 DOM 事件

DOM 事件

事件	目标	说明
datatable:sort	数据表元素<div class="data-table">	数据表排序更改时触发事件
datatable:beforedestroy	数据表元素<div class="data-table">	在销毁数据表实例之前会触发事件

App 和数据表实例事件

数据表实例在自身和应用实例中都会触发事件。应用实例的事件名称相同，前缀是dataTable。

事件	自变量	目标	说明
sort	dataTable, sort	dataTable	数据表排序更改时触发事件
dataTableSort	dataTable, sort	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 事件
App 和数据表实例事件

CSS 变量