SUI Tables

SUI tables, like most of SUI components are build on top of their Bootstrap conterparts.

Default table

To use a default table either use a class of table, as they are in Bootstrap or with no classes at all. This is so we don't have to add any classes when we use this component in a WYSIWYG editor.

This example uses the Bootstrap solution to responsive tables, which is to wrap the table in a scrolling container via a class of table-responsive. This is the very least we want to to when it comes to tables on mobile. This isn't a great solution as it often isn't obvious to a user than they can interact with the table and they might not interpret it correctly seeing only if they can only see the first two columns, unaware there are more columns hidden off screen.

If you have a well formed table with a row of table headers and data cells with no colspan or rowspan then please take a look at the SUI responsive tables as they work loads better on mobile!

  <div class="table-responsive">
    <table>
      <thead>
        <tr>
          <th>Row 1, Col 1</th>
          <th>Row 1, Col 2</th>
          <th>Row 1, Col 3</th>
          <th>Row 1, Col 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 2, Col 1</td>
          <td>Row 2, Col 2</td>
          <td>Row 2, Col 3</td>
          <td>Row 2, Col 4</td>
        </tr>
        <tr>
          <td>Row 3, Col 1</td>
          <td>Row 3, Col 2</td>
          <td>Row 3, Col 3</td>
          <td>Row 4, Col 4</td>
        </tr>
      </tbody>
    </table>
  </div>

SUI Responsive tables

The Bootstrap solution to responsive tables is to wrap the table in a scrolling container. This is the least we want to to when it comes to tables on mobile, hence why we demonstrated it on the example above.

If you have a well formed table with a row of table headers and data cells with no colspan's then please take a look at the next example which is the same as the above example but check it again on mobile to see the difference. Not in this case yo do not need to use the table-responsive container as these types of table should not need them.

All you need to do to implement this type of 'mobile aware' table is wrap the table or group of tables in a wrapper with a class of bc-mobile-tables.
Like so:

  <div class="bc-mobile-tables">
    <table>
      ...
    </table>
    <table>
      ...
    </table>
  </div>

SUI Responsive tables with CTA

The folowing example shows some type product finder data including a call to action in the last cell of each row. This is achieved via a class of bc-cell-has-cta on the last cell and an icon link bc-icon-link-block-** inside that cell.

SUI Plain table

The following example shows a plain table, .bc-table-plain, it has all the same vertical paddings as a regular table except all colours are transparent.

SUI table with icons and cell overrides

Bootstrap Tables

All of the following examples are the default table options that come with Bootstrap

Basic example

Table with class="table"

Striped rows

Table with class="table table-striped"

Bordered table

Table with class="table table-bordered"

Hover rows

Table with class="table table-hover"

Condensed table

Table with class="table table-condensed"

Table with contextual classes

Standard table with context classes on the <tr>, possible values:

• <tr class="active">
• <tr class="success">
• <tr class="info">
• <tr class="warning">
• <tr class="danger">