Core
Navigation / Router
Components
- Accordion / Collapsible
- Autocomplete
- Buttons
- Calendar / Datepicker
- Cards
- Chips / Tags
- Content Block
- Data Table
- Floating Action Button
- Forms
  - Form Elements
  - Checkboxes and Radios
  - Smart Select
  - Disabled Elements
  - Form Data
  - Form Storage
  - Ajax Form Submit
- Infinite Scroll
- Layout Grid
- Lazy Load
- List View (Table View)
  - List View
  - Contacts List
  - Media List View
  - Swipeout
  - Sortable List
  - Virtual List
- Modals / Overlays
  - Modal
  - Popup
  - Popover
  - Action Sheet
  - Login Screen
  - Picker Modal
- Messages
- Message Bar
- Navbars & Toolbars
  - Layout types
  - Navbar
  - Dynamic Navbar
  - Sub Navbar
  - Toolbar
  - Tab Bar
  - Hide Bars On Scroll
- Notifications
- Photo Browser
- Picker
- Preloader Indicator
- Progress Bar
- Pull to Refresh
- Search Bar
- Side Panels
- Status Bar overlay
- Swiper Slider
- Tabs
- Timeline
Icons
- Icons
- Framework7 Icons Cheatsheet
Styling
- Color Themes
- Hairlines
Template7
Fast Clicks
Utilities
- Device API
- Support API
Plugins API
- Plugins API
Custom Build
- Custom Build

Data Table

Data tables display sets of raw data. They usually appear in desktop enterprise products

Data Table Layout

Common Data Table layout could be treat as the following:

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

Within Card:

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

Where

data-table - main Data Table wrapper. Required
- table - table itself. Required
  - thead - table head
  - tbody - table body. Required
  - label-cell - main label cell (only one such kind of cell per row, usually first cell)
  - numeric-cell - cell to display numeric data (right-aligned)
  - tablet-only - additional class to show this cell/column only on wide tablet devices (iPad)

Selectable Rows

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

Where

data-table-init - additional class to enable JavaScript action required for selectable rows

Checkbox cell. Such cell in table header will select/deselect all rows in table body:

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

Table Title/Header

When data table is used within Card it is possible to use additional data table title with actions in card header.

With title and actions

<div class="data-table data-table-init card">
  <!-- Card Header -->
  <div class="card-header">
    <!-- Table title -->
    <div class="data-table-title">Nutrition</div>
    <!-- Table actions -->
    <div class="data-table-actions">
      <a class="link icon-only"><i class="icon f7-icons">sort</i></a>
      <a class="link icon-only"><i class="icon f7-icons">more_vertical_round</i></a>
    </div>
  </div>
  <!-- Card Content -->
  <div class="card-content">
    <table>
      <thead>
        <tr>
          <th class="checkbox-cell">
            <label class="form-checkbox">
              <input type="checkbox"><i></i>
            </label>
          </th>
          <th class="label-cell">Desert (100g serving)</th>
          <th class="numeric-cell">Calories</th>
          ...
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="checkbox-cell">
            <label class="form-checkbox">
              <input type="checkbox"><i></i>
            </label>
          </td>
          <td class="label-cell">Frozen yogurt</td>
          <td class="numeric-cell">159</td>
          ...
        </tr>
        ...
      </tbody>
    </table>
  </div>
</div>

Where

data-table-title - table title
data-table-actions - main table actions

Different actions on select

<div class="data-table data-table-init card">
  <!-- Card header -->
  <div class="card-header">
    <!-- Default table header -->
    <div class="data-table-header">
      <!-- Default table title -->
      <div class="data-table-title">Nutrition</div>
      <!-- Default table actions -->
      <div class="data-table-actions">
        <a class="link icon-only"><i class="icon f7-icons">sort</i></a>
        <a class="link icon-only"><i class="icon f7-icons">more_vertical_round</i></a>
      </div>
    </div>
    <!-- Selected table header -->
    <div class="data-table-header-selected">
      <!-- Selected table title -->
      <div class="data-table-title-selected"><span class="data-table-selected-count"></span> items selected</div>
      <!-- Selected table actions -->
      <div class="data-table-actions">
        <a class="link icon-only"><i class="icon f7-icons">trash</i></a>
        <a class="link icon-only"><i class="icon f7-icons">more_vertical_round</i></a>
      </div>
    </div>
  </div>
  <div class="card-content">
    <table>
      <thead>
        <tr>
          <th class="checkbox-cell">
            <label class="form-checkbox">
              <input type="checkbox"><i></i>
            </label>
          </th>
          <th class="label-cell">Desert (100g serving)</th>
          <th class="numeric-cell">Calories</th>
          ...
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="checkbox-cell">
            <label class="form-checkbox">
              <input type="checkbox"><i></i>
            </label>
          </td>
          <td class="label-cell">Frozen yogurt</td>
          <td class="numeric-cell">159</td>
          ...
        </tr>
        ...
      </tbody>
    </table>
  </div>
</div>

Where

data-table-header - default table header. Visible when there are no selected rows
data-table-header-selected - selected table header. Visible when there are selected rows
data-table-selected-count - count of selected table rows. Number will be placed here by JavaScript

Alternate header with row actions

<div class="data-table data-table-init card">
  <div class="card-header">
    <!-- Table links/actions -->
    <div class="data-table-links">
      <a class="link">Add</a>
      <a class="link">Remove</a>
    </div>
    <!-- Table actions -->
    <div class="data-table-actions">
      <a class="link icon-only"><i class="icon f7-icons">sort</i></a>
      <a class="link icon-only"><i class="icon f7-icons">more_vertical_round</i></a>
    </div>
  </div>
  <div class="card-content">
    <table>
      <thead>
        <tr>
          <th class="checkbox-cell">
            <label class="form-checkbox">
              <input type="checkbox"><i></i>
            </label>
          </th>
          <th class="label-cell">Desert (100g serving)</th>
          <th class="numeric-cell">Calories</th>
          ...
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="checkbox-cell">
            <label class="form-checkbox">
              <input type="checkbox"><i></i>
            </label>
          </td>
          <td class="label-cell">Frozen yogurt</td>
          <td class="numeric-cell">159</td>
          ...
          <td class="actions-cell">
            <a class="link icon-only"><i class="icon f7-icons">compose</i></a>
            <a class="link icon-only"><i class="icon f7-icons">trash</i></a>
          </td>
        </tr>
        ...
      </tbody>
    </table>
  </div>
</div>

Where

data-table-links - alternate/additional table actions
actions-cell - action links/icons cell

Sortable

<div class="data-table data-table-init card">
  <div class="card-header">
    <div class="data-table-title">Nutrition</div>
    <div class="data-table-actions">
      <a class="link icon-only"><i class="icon f7-icons">sort</i></a>
      <a class="link icon-only"><i class="icon f7-icons">more_vertical_round</i></a>
    </div>
  </div>
  <div class="card-content">
    <table>
      <thead>
        <tr>
          <th class="checkbox-cell">
            <label class="form-checkbox">
              <input type="checkbox"><i></i>
            </label>
          </th>
          <th class="label-cell sortable-cell sortable-active">Desert (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="form-checkbox">
              <input type="checkbox"><i></i>
            </label>
          </td>
          <td class="label-cell">Frozen yogurt</td>
          <td class="numeric-cell">159</td>
          <td class="numeric-cell">6.0</td>
          <td class="numeric-cell">24</td>
          <td class="numeric-cell">4.0</td>
        </tr>
        ...
      </tbody>
    </table>
  </div>
</div>

Where

sortable-cell - additional class to make cell/column is sortable
sortable-active - additional class to specify active/default sortable cell/column
sortable-asc - additional class to specify current sorting as ascending (default)
sortable-desc - additional class to specify current sorting as descending

Note, there is no actual sortable logic provided by framework. Actual sorting logic should be realized manually

Collapsible

The following table will be collapsed to kind of List View on small screens:

<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">sort</i></a>
      <a class="link icon-only"><i class="icon f7-icons">more_vertical_round</i></a>
    </div>
  </div>
  <div class="card-content">
    <table>
      <thead>
        <tr>
          <th class="label-cell">Desert (100g serving)</th>
          <th class="numeric-cell">Calories</th>
          ...
          <th class="numeric-cell">Protein (g)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="label-cell">Frozen yogurt</td>
          <td class="numeric-cell">159</td>
          ...
          <td class="numeric-cell">4.0</td>
        </tr>
        ...
      </tbody>
    </table>
  </div>
</div>

Where

data-table-collapsible - additional table class to enable collapsible logic. Note that "data-table-init" class is also required for this.