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.