PCCW Global

  1. Home
  2. Tables

Tables

Tables are suitable for rendering data with the same properties that would naturally belong in a grid. Responsive design tends toward making tables obsolete, because of their limitation to render data properly for small screen devices.

Sky Framework strongly suggests that tables are used for directly comparable tabular data only. In cases where comparison is not needed, list items should be used instead.

The table component

Modern design has to provide solutions to the table element limitations that were introduced along with responsive design.

  • Due to the way HTML tables handle content, long tables tend to wrap content awkwardly, often rendering it unreadable.
  • Table cell wrapping heavily depends on content and thus, cannot be predicted, so definitive breaking points for table re-structuring cannot be standardized.
  • Table cell width is set arbitrarily by the browser using a combination of the number of the table cells per row and table cell contents. Even small changes of content can lead to major table re-structuring.
  • Due to the nature of modern applications using large volumes of data, tables unavoidably grow long with tens of columns, that are unable to be accommodated even in high resolution desktop screens.

To style a table component, a table class should be applied to an HTML table. It is recommended that simple tables are wrapped within a table-scrollable container, to avoid overflowing issues; this container allows a scrollbar to appear when necessary that allows the table content to be scrolled, where otherwise the table would overflow its parent container.

By default table-cell content is not allowed to be wrapped, but applying a class wrap to a table cell allows its content to wrap normally.

The sample below includes sorting icons, but the functionality implementation depends on the application, since many applications require server-side manipulation of large tabular data.

Sample table component

Code output HTML markup
Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content 
Copy<div class="table-scrollable">
  <table class="table">
    <thead>
      <tr>
        <th><button>Column Header 1<i class="sky-icon-sort-asc"></i></button></th>
        <th><button>Column Header 2<i class="sky-icon-sort"></i></button></th>
        <th><button>Column Header 3<i class="sky-icon-sort"></i></button></th>
        <th><button>Column Header 4<i class="sky-icon-sort"></i></button></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
      </tr>
      <tr>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
      </tr>
      <tr>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
      </tr>
    </tbody>
  </table>
</div>
Table rowspans and colspans are not supported by this framework due to styling limitations, so they should be used with caution.

Table global styling

Tablescan be styled by applying combinations of classes that gradually change its appearance.

Bordered table

Applying a table-bordered class gives borders to all table-cells

Code output HTML markup
Column header 1 Column header 2 Column header 3 Column header 4
Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content 
Copy<div class="table-scrollable">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Column header 1</th>
        <th>Column header 2</th>
        <th>Column header 3</th>
        <th>Column header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
      </tr>
      <tr>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
      </tr>
      <tr>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
      </tr>
    </tbody>
  </table>
</div>

Striped table

Applying a table-striped creates a striped pattern by slightly changing color of every other table row.

Code output HTML markup
Column header 1 Column header 2 Column header 3 Column header 4
Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content 
Copy<div class="table-scrollable">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Column header 1</th>
        <th>Column header 2</th>
        <th>Column header 3</th>
        <th>Column header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
      </tr>
      <tr>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
      </tr>
      <tr>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
      </tr>
    </tbody>
  </table>
</div>

Centered text table

Although text alignment classes can be applied to individual cells, applying a text-center class on a table, centers aligns all content including header-cells and table-cells. By default, all content is centered when the table component stacks its table cells content vertically.

Code output HTML markup
Column header 1 Column header 2 Column header 3 Column header 4
Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content 
Copy<div class="table-scrollable">
  <table class="table text-center">
    <thead>
      <tr>
        <th>Column header 1</th>
        <th>Column header 2</th>
        <th>Column header 3</th>
        <th>Column header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
      </tr>
      <tr>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
      </tr>
      <tr>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
      </tr>
    </tbody>
  </table>
</div>

Contextual colored table rows

Table rows can make use of contextual colors by using one of the 3 classes tr-error, tr-warning or tr-success depending on the use case.

Code output HTML markup
Column header 1 Column header 2 Column header 3 Column header 4
Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content 
Copy<div class="table-scrollable">
   <table class="table text-center">
    <thead>
      <tr>
        <th>Column header 1</th>
        <th>Column header 2</th>
        <th>Column header 3</th>
        <th>Column header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr class="tr-error">
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
      </tr>
      <tr class="tr-warning">
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
      </tr>
      <tr class="tr-success">
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
        <td>Table cell content</td>
      </tr>
    </tbody>
  </table>
</div>

Tables with fixed header

Tables that are wrapped inside a table-scrollable container can be accompanied by a fixed header, as long as they are enclosed within an additional table-fixed-height container that has fixed height value assigned.

Code output HTML markup
Column header 1 Column header 2 Column header 3 Column header 4 Column header 5 Column header 6 Column header 7 Column header 8 Column header 9 Column header 10
Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content 
Copy<div class="table-fixed-height" style="height:200px;">
  <div class="table-scrollable table-fixed-header">
    <table class="table">
      <thead>
        <tr>
          <th>Column header 1</th>
          <th>Column header 2</th>
          <th>Column header 3</th>
          <th>Column header 4</th>
          <th>Column header 5</th>
          <th>Column header 6</th>
          <th>Column header 7</th>
          <th>Column header 8</th>
          <th>Column header 9</th>
          <th>Column header 10</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
        </tr>
        <tr>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
        </tr>
        <tr>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
        </tr>
        <tr>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
        </tr>
        <tr>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Classes table-fixed-viewport-25, table-fixed-viewport-50 and table-fixed-viewport-75 have been defined based on vh units in order to limit tables with fixed header up to a maximum viewport height; the classes essentially allow scrollable tables to be fully visible within the browser window.

The fixed header feature and the fixed height value are removed on mobile devices due to hardware limitations that lead to performance issues.

Tables with actions

It is common for table list items to include actions that vary from basic functions like view, edit or delete up to more complex application-specific functions, which are usually placed at the last column table-cell. Under the assumption that more complex functionality cannot be based solely on icons, Sky promotes the use of labeled actions over icon actions to standardize user experience across all tables.

Table list item actions should always be available to the user, regardless how long the table is. Sky Framework introduces semi-fixed action table cells that respond to resolution changes and adapts to the design accordingly, based on dynamically changing table width.

These action table cells, that are defined by the fixed-actions class are elevating above all other table cell content when the table starts overflowing its parent container.

Since the action table cells are always visible to the user, their size is restricted to a maximum width of 150px - including 20px of total side padding. By default, actions are contained inside a dropdown menu.

Keep in mind that it is required that tables with actions must be wrapped within a relative-wrapper container.

Code output HTML markup
Actions
Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content 
Copy<div class="relative-wrapper">
  <div class="table-actions">
    <table class="table">
      <thead>
        <tr>
          <th><button>Column Header 1<i class="sky-icon-sort-asc"></i></button></th>
          <th><button>Column Header 2<i class="sky-icon-sort"></i></button></th>
          <th><button>Column Header 3<i class="sky-icon-sort"></i></button></th>
          <th><button>Column Header 3<i class="sky-icon-sort"></i></button></th>
          <th class="fixed-actions">
            <span>Actions</span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td class="fixed-actions">
            <div class="dropdown">
              <button class="btn btn-sm btn-dropdown-toggle" data-toggle="dropdown"><span>Item actions</span></button>
              <ul class="dropdown-menu">
                <li><a href=#>Edit</a></li>
                <li><a href=#>Delete</a></li>
              </ul>
            </div>
          </td>
        </tr>
        <tr>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td class="fixed-actions">
            <div class="dropdown">
              <button class="btn btn-sm btn-dropdown-toggle" data-toggle="dropdown"><span>Item actions</span></button>
              <ul class="dropdown-menu">
                <li><a href=#>Edit</a></li>
                <li><a href=#>Delete</a></li>
              </ul>
            </div>
          </td>
        </tr>
        <tr>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td class="fixed-actions">
            <div class="dropdown">
              <button class="btn btn-sm btn-dropdown-toggle" data-toggle="dropdown"><span>Item actions</span></button>
              <ul class="dropdown-menu">
                <li><a href=#>Edit</a></li>
                <li><a href=#>Delete</a></li>
              </ul>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Tables with actions and expanded options

In cases where the total width of all the action labels combined does not exceed 150px, responsive classes can be applied to the action table cells to expand dropdown options as normal action buttons. The responsive classes that allow dropdown expansion inside the fixed-actions table cells are defined as fixed-actions-{affix}-expanded where affix is one of the 3 responsive tier affixes sm, md, lg at smaller resolution tiers the options are forced to be condensed to a compact version of the dropdown-menu.

In the following example, the class fixed-actions-lg-expanded is applied alongside the fixed-actions to enable dropdown expansion at large screen resolution tiers. Keep in mind that the before-mentioned responsive classes are only allowed on the respective tbody table cells.

Code output HTML markup
Actions
Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content 
Copy<div class="relative-wrapper">
  <div class="table-actions">
    <table class="table">
      <thead>
        <tr>
          <th><button>Column Header 1<i class="sky-icon-sort-asc"></i></button></th>
          <th><button>Column Header 2<i class="sky-icon-sort"></i></button></th>
          <th><button>Column Header 3<i class="sky-icon-sort"></i></button></th>
          <th><button>Column Header 3<i class="sky-icon-sort"></i></button></th>
          <th class="fixed-actions">
            <span>Actions</span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td class="fixed-actions fixed-actions-lg-expanded">
            <div class="dropdown">
              <button class="btn btn-sm btn-dropdown-toggle" data-toggle="dropdown"><span>Item actions</span></button>
              <ul class="dropdown-menu">
                <li><a href=#>Edit</a></li>
                <li><a href=#>Delete</a></li>
              </ul>
            </div>
          </td>
        </tr>
        <tr>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td class="fixed-actions fixed-actions-lg-expanded">
            <div class="dropdown">
              <button class="btn btn-sm btn-dropdown-toggle" data-toggle="dropdown"><span>Item actions</span></button>
              <ul class="dropdown-menu">
                <li><a href=#>Edit</a></li>
                <li><a href=#>Delete</a></li>
              </ul>
            </div>
          </td>
        </tr>
        <tr>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td class="fixed-actions fixed-actions-lg-expanded">
            <div class="dropdown">
              <button class="btn btn-sm btn-dropdown-toggle" data-toggle="dropdown"><span>Item actions</span></button>
              <ul class="dropdown-menu">
                <li><a href=#>Edit</a></li>
                <li><a href=#>Delete</a></li>
              </ul>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Tables with multi-selected items bulk actions

Checkboxes can be used in tables with actions to promote multi-selected items bulk actions. The table header includes a master checkbox to toggle selection of all table list items and a master dropdown with actions to initiate bulk actions on the selected table list items.

The checkboxes are always visible to the user, regardless of the table width; similar to the fixed action table cells, checkboxes are elevating above all other table cell content when the table starts overflowing its parent container.

Code output HTML markup
Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content 
Copy<div class="relative-wrapper">
  <div class="table-actions">
    <table class="table">
      <thead>
        <tr>
          <th class="checkbox">
            <label class="custom-checkbox no-label">
            <input type="checkbox" value="checkboxalla">
            <span></span>
            </label>
          </th>
          <th><button>Column Header 1<i class="sky-icon-sort-asc"></i></button></th>
          <th><button>Column Header 2<i class="sky-icon-sort"></i></button></th>
          <th><button>Column Header 3<i class="sky-icon-sort"></i></button></th>
          <th><button>Column Header 3<i class="sky-icon-sort"></i></button></th>
          <th class="fixed-actions">
            <div class="dropdown">
              <button class="btn btn-sm btn-dropdown-toggle" data-toggle="dropdown"><span>Multi actions</span></button>
              <ul class="dropdown-menu">
                <li><a href=#>Edit - <strong>2</strong></a></li>
                <li><a href=#>Delete - <strong>2</strong></a></li>
              </ul>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="checkbox" >
            <label class="custom-checkbox no-label">
            <input type="checkbox" value="checkbox1a">
            <span></span>
            </label>
          </td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td class="fixed-actions">
            <div class="dropdown">
              <button class="btn btn-sm btn-dropdown-toggle" data-toggle="dropdown"><span>Item actions</span></button>
              <ul class="dropdown-menu">
                <li><a href=#>Edit</a></li>
                <li><a href=#>Delete</a></li>
              </ul>
            </div>
          </td>
        </tr>
        <tr>
          <td class="checkbox" >
            <label class="custom-checkbox no-label">
            <input type="checkbox" value="checkbox2a">
            <span></span>
            </label>
          </td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td class="fixed-actions">
            <div class="dropdown">
              <button class="btn btn-sm btn-dropdown-toggle" data-toggle="dropdown"><span>Item actions</span></button>
              <ul class="dropdown-menu">
                <li><a href=#>Edit</a></li>
                <li><a href=#>Delete</a></li>
              </ul>
            </div>
          </td>
        </tr>
        <tr>
          <td class="checkbox" >
            <label class="custom-checkbox no-label">
            <input type="checkbox" value="checkbox3a">
            <span></span>
            </label>
          </td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td class="fixed-actions">
            <div class="dropdown">
              <button class="btn btn-sm btn-dropdown-toggle" data-toggle="dropdown"><span>Item actions</span></button>
              <ul class="dropdown-menu">
                <li><a href=#>Edit</a></li>
                <li><a href=#>Delete</a></li>
              </ul>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Tables with sticky header

Sky promotes the use of tables with sticky headers as a replacement of normal tables. This complex component includes features that allow functionality otherwise impossible with the use of normal tables.

The table header sticks at the top of the screen when the document scrolls past it, and is released as soon as the bottom of the table is reached. If the table overflows its parent container the sticky header also scrolls along with the rest of the table content with the use of Javascript.

The table with sticky header markup requires replication of the initial table header inside the sticky header container. The relative-wrapper is no longer required since the styling required is provided by the sticky-rail container. The required markup is shown in the following example.

The sticky header feature is removed on mobile devices below 991px, due to hardware limitations that lead to performance issues.
Code output HTML markup
Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content 
Copy<div class="sticky-rail">
  <div class="table-sticky">
    <div class="sticky table-sticky-header">
      <div class="table-sticky-header-overflown">
        <table class="table">
          <thead>
            <tr>
              <th><button>Column Header 1<i class="sky-icon-sort-asc"></i></button></th>
              <th><button>Column Header 2<i class="sky-icon-sort"></i></button></th>
              <th><button>Column Header 3<i class="sky-icon-sort"></i></button></th>
              <th><button>Column Header 4<i class="sky-icon-sort"></i></button></th>
              <th><button>Column Header 5<i class="sky-icon-sort"></i></button></th>
              <th><button>Column Header 6<i class="sky-icon-sort"></i></button></th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th><button>Column Header 1<i class="sky-icon-sort-asc"></i></button></th>
          <th><button>Column Header 2<i class="sky-icon-sort"></i></button></th>
          <th><button>Column Header 3<i class="sky-icon-sort"></i></button></th>
          <th><button>Column Header 4<i class="sky-icon-sort"></i></button></th>
          <th><button>Column Header 5<i class="sky-icon-sort"></i></button></th>
          <th><button>Column Header 6<i class="sky-icon-sort"></i></button></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
        </tr>
        <tr>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
        </tr>
        <tr>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Table with sticky header and actions

The sticky header can be also combined with tables that include actions by including the necessary markup.

Code output HTML markup
Actions
Actions
Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content 
Copy<div class="sticky-rail">
  <div class="table-actions">
    <div class="sticky table-sticky-header">
      <div class="table-sticky-header-overflown">
        <table class="table">
          <thead>
            <tr>
              <th><button>Column Header 1<i class="sky-icon-sort-asc"></i></button></th>
              <th><button>Column Header 2<i class="sky-icon-sort"></i></button></th>
              <th><button>Column Header 3<i class="sky-icon-sort"></i></button></th>
              <th><button>Column Header 4<i class="sky-icon-sort"></i></button></th>
              <th><button>Column Header 5<i class="sky-icon-sort"></i></button></th>
              <th><button>Column Header 6<i class="sky-icon-sort"></i></button></th>
              <th class="fixed-actions">
                <span>Actions</span>
              </th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th><button>Column Header 1<i class="sky-icon-sort-asc"></i></button></th>
          <th><button>Column Header 2<i class="sky-icon-sort"></i></button></th>
          <th><button>Column Header 3<i class="sky-icon-sort"></i></button></th>
          <th><button>Column Header 4<i class="sky-icon-sort"></i></button></th>
          <th><button>Column Header 5<i class="sky-icon-sort"></i></button></th>
          <th><button>Column Header 6<i class="sky-icon-sort"></i></button></th>
          <th class="fixed-actions">
            <span>Actions</span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td class="fixed-actions">
            <div class="dropdown">
              <button class="btn btn-sm btn-dropdown-toggle" data-toggle="dropdown"><span>Item actions</span></button>
              <ul class="dropdown-menu">
                <li><a href=#>Edit</a></li>
                <li><a href=#>Delete</a></li>
              </ul>
            </div>
          </td>
        </tr>
        <tr>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td class="fixed-actions">
            <div class="dropdown">
              <button class="btn btn-sm btn-dropdown-toggle" data-toggle="dropdown"><span>Item actions</span></button>
              <ul class="dropdown-menu">
                <li><a href=#>Edit</a></li>
                <li><a href=#>Delete</a></li>
              </ul>
            </div>
          </td>
        </tr>
        <tr>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td class="fixed-actions">
            <div class="dropdown">
              <button class="btn btn-sm btn-dropdown-toggle" data-toggle="dropdown"><span>Item actions</span></button>
              <ul class="dropdown-menu">
                <li><a href=#>Edit</a></li>
                <li><a href=#>Delete</a></li>
              </ul>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Tables with sticky header and multi-selected items bulk actions

By including the the additional markup required for the checkboxes and the master actions dropdown, the sticky header can promote multi-select items bulk functionality.

The combination of the sticky header with the master actions dropdown, provide an intuitive way to promote bulk functionality, which is constantly available to users while viewing tabular data.

Unlike the combinations of the sticky header with a table described above, the sticky header of tables with multi-selected item functionality is also available for mobile devices, although it is toned down, so that multi-selected items bulk functionality is available without performance impact.

Code output HTML markup
Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content Table cell content Table cell content 
Copy<div class="sticky-rail">
  <div class="table-actions">
    <div class="sticky table-sticky-header table-sticky-multi-actions">
      <div class="table-sticky-header-overflown">
        <table class="table">
          <thead>
            <tr>
              <th class="checkbox">
                <label class="custom-checkbox no-label">
                <input type="checkbox" value="checkboxallb">
                <span></span>
                </label>
                <span><strong>2</strong> items</span>
              </th>
              <th><button>Column Header 1<i class="sky-icon-sort-asc"></i></button></th>
              <th><button>Column Header 2<i class="sky-icon-sort"></i></button></th>
              <th><button>Column Header 3<i class="sky-icon-sort"></i></button></th>
              <th><button>Column Header 4<i class="sky-icon-sort"></i></button></th>
              <th><button>Column Header 5<i class="sky-icon-sort"></i></button></th>
              <th><button>Column Header 6<i class="sky-icon-sort"></i></button></th>
              <th class="fixed-actions">
                <div class="dropdown">
                  <button class="btn btn-sm btn-dropdown-toggle" data-toggle="dropdown"><span>Multi actions</span></button>
                  <ul class="dropdown-menu">
                    <li><a href=#>Delete - <strong>2</strong></a></li>
                    <li><a href=#>Checkout - <strong>2</strong></a></li>
                  </ul>
                </div>
              </th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th class="checkbox">
            <label class="custom-checkbox no-label">
            <input type="checkbox" value="checkboxallb">
            <span></span>
            </label>
          </th>
          <th><button>Column Header 1<i class="sky-icon-sort-asc"></i></button></th>
          <th><button>Column Header 2<i class="sky-icon-sort"></i></button></th>
          <th><button>Column Header 3<i class="sky-icon-sort"></i></button></th>
          <th><button>Column Header 4<i class="sky-icon-sort"></i></button></th>
          <th><button>Column Header 5<i class="sky-icon-sort"></i></button></th>
          <th><button>Column Header 6<i class="sky-icon-sort"></i></button></th>
          <th class="fixed-actions">
            <div class="dropdown">
              <button class="btn btn-sm btn-dropdown-toggle" data-toggle="dropdown"><span>Multi actions</span></button>
              <ul class="dropdown-menu">
                <li><a href=#>Delete - <strong>2</strong></a></li>
                <li><a href=#>Checkout - <strong>2</strong></a></li>
              </ul>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="checkbox" >
            <label class="custom-checkbox no-label">
            <input type="checkbox" value="checkbox1b">
            <span></span>
            </label>
          </td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td class="fixed-actions">
            <div class="dropdown">
              <button class="btn btn-sm btn-dropdown-toggle" data-toggle="dropdown"><span>Item actions</span></button>
              <ul class="dropdown-menu">
                <li><a href=#>Edit</a></li>
                <li><a href=#>Delete</a></li>
              </ul>
            </div>
          </td>
        </tr>
        <tr>
          <td class="checkbox" >
            <label class="custom-checkbox no-label">
            <input type="checkbox" value="checkbox2b">
            <span></span>
            </label>
          </td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td class="fixed-actions">
            <div class="dropdown">
              <button class="btn btn-sm btn-dropdown-toggle" data-toggle="dropdown"><span>Item actions</span></button>
              <ul class="dropdown-menu">
                <li><a href=#>Edit</a></li>
                <li><a href=#>Delete</a></li>
              </ul>
            </div>
          </td>
        </tr>
        <tr>
          <td class="checkbox" >
            <label class="custom-checkbox no-label">
            <input type="checkbox" value="checkbox3b">
            <span></span>
            </label>
          </td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td>Table cell content</td>
          <td class="fixed-actions">
            <div class="dropdown">
              <button class="btn btn-sm btn-dropdown-toggle" data-toggle="dropdown"><span>Item actions</span></button>
              <ul class="dropdown-menu">
                <li><a href=#>Edit</a></li>
                <li><a href=#>Delete</a></li>
              </ul>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Responsive tables

An alternative to the scrollable tables is the use of responsive tables, which are defined by combining a class table-{affix}-responsive along with the table class, where affix is one of the 3 smaller responsive tier affixes xxs, xs, sm. When using a responsive class table cells are stacked vertically at the two extra small resolution tiers that range up to 767px, or stacked vertically in pairs at the small resolution tier ranging from 768px up to 991px. Multiple repsonsive table classes can be combined to produce the same result for multiple resolution tiers.

Code output HTML markup
Column header 1 Column header 2 Column header 3 Column header 3 Column header 4
Table cell content Table cell contentTable cell contentTable cell contentTable cell contentTable cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content 
Copy<table class="table table-xxs-responsive table-xs-responsive table-sm-responsive">
  <thead>
    <tr>
      <th>Column header 1</th>
      <th>Column header 2</th>
      <th>Column header 3</th>
      <th>Column header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell content</td>
      <td>Table cell content</td>
      <td>Table cell content</td>
      <td>Table cell content</td>
    </tr>
    <tr>
      <td>Table cell content</td>
      <td>Table cell content</td>
      <td>Table cell content</td>
      <td>Table cell content</td>
    </tr>
    <tr>
      <td>Table cell content</td>
      <td>Table cell content</td>
      <td>Table cell content</td>
      <td>Table cell content</td>
    </tr>
  </tbody>
</table>

Responsive tables with actions

Responsive tables are allowed to hold simple functionality; an actions class is required to be applied on the table-cell that holds the action functionality. When the table responds to resolution changes below 991px, the actions are placed at the bottom of each of the stacked list items as shown in the example below.

Code output HTML markup
Column header 1 Column header 2 Column header 3 Actions
Table cell content Table cell content Table cell content Edit Delete
Table cell content Table cell content Table cell content Edit Delete
Table cell content Table cell content Table cell content Edit Delete 
Copy<table class="table table-xxs-responsive table-xs-responsive">
  <thead>
    <tr>
      <th>Column header 1</th>
      <th>Column header 2</th>
      <th>Column header 3</th>
      <th class="text-center">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell content</td>
      <td>Table cell content</td>
      <td>Table cell content</td>
      <td class="actions">
        <a href=#>Edit</a>
        <a href=#>Delete</a>
      </td>
    </tr>
    <tr>
      <td>Table cell content</td>
      <td>Table cell content</td>
      <td>Table cell content</td>
      <td class="actions">
        <a href=#>Edit</a>
        <a href=#>Delete</a>
      </td>
    </tr>
    <tr>
      <td>Table cell content</td>
      <td>Table cell content</td>
      <td>Table cell content</td>
      <td class="actions">
        <a href=#>Edit</a>
        <a href=#>Delete</a>
      </td>
    </tr>
  </tbody>
</table>

Collapsible responsive tables

Adding the class table-responsive-collapsed collapses table rows into compact list items that can be expanded on-demand by clicking in the arrow button on the bottom right of each list item.

The collapsing functionality is ignored in case the table is wrapped in a table-scrollable container.
Code output HTML markup
Column header 1 Column header 2 Column header 3 Column header 4
Table cell contentTable cell contentTable cell contentTable cell contentTable cell contentTable cell contentTable cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content Table cell content 
Copy<table class="table table-xxs-responsive table-xs-responsive table-sm-responsive table-responsive-collapsed">
  <thead>
    <tr>
      <th>Column header 1</th>
      <th>Column header 2</th>
      <th>Column header 3</th>
      <th>Column header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell content</td>
      <td>Table cell content</td>
      <td>Table cell content</td>
      <td>Table cell content</td>
    </tr>
    <tr>
      <td>Table cell content</td>
      <td>Table cell content</td>
      <td>Table cell content</td>
      <td>Table cell content</td>
    </tr>
    <tr>
      <td>Table cell content</td>
      <td>Table cell content</td>
      <td>Table cell content</td>
      <td>Table cell content</td>
    </tr>
  </tbody>
</table>

Collapsible responsive tables with actions

In order for collapsible responsive tables to accommodate actions, additional markup ir required. The use of a dropdown component allows actions to be handled naturally at all screen resolution tiers; at large screen resolution tiers the actions are visible, while at small screen resolution tiers, the actions are condensed to a dropdown element, and are expanded by clicking the corresponding icon.

Code output HTML markup
Column header 1 Column header 2 Column header 3 Actions
Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content
Table cell content Table cell content Table cell content 
Copy<table class="table table-xxs-responsive table-xs-responsive table-sm-responsive table-responsive-collapsed">
  <thead>
    <tr>
      <th>Column header 1</th>
      <th>Column header 2</th>
      <th>Column header 3</th>
      <th class="text-center">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell content</td>
      <td>Table cell content</td>
      <td>Table cell content</td>
      <td class="actions">
        <div class="dropdown">
          <button class="btn btn-sm btn-dropdown-toggle" data-toggle="dropdown"><span>Item actions</span></button>
          <ul class="dropdown-menu">
            <li><a href=#>Edit</a></li>
            <li><a href=#>Delete</a></li>
          </ul>
        </div>
      </td>
    </tr>
    <tr>
      <td>Table cell content</td>
      <td>Table cell content</td>
      <td>Table cell content</td>
      <td class="actions">
        <div class="dropdown">
          <button class="btn btn-sm btn-dropdown-toggle" data-toggle="dropdown"><span>Item actions</span></button>
          <ul class="dropdown-menu">
            <li><a href=#>Edit</a></li>
            <li><a href=#>Delete</a></li>
          </ul>
        </div>
      </td>
    </tr>
    <tr>
      <td>Table cell content</td>
      <td>Table cell content</td>
      <td>Table cell content</td>
      <td class="actions">
        <div class="dropdown">
          <button class="btn btn-sm btn-dropdown-toggle" data-toggle="dropdown"><span>Item actions</span></button>
          <ul class="dropdown-menu">
            <li><a href=#>Edit</a></li>
            <li><a href=#>Delete</a></li>
          </ul>
        </div>
      </td>
    </tr>
  </tbody>
</table>
© 2024, PCCW Global