Skip to main content
MybringDesign System

Tables

Getting started with displaying tabular data

Resources and tips

Principles

Tables are content

The point of a table is to make tabular data into comprehensible content. It provides meaning through how the data is organised. Browsers and assistive tech can read the content as-is. Users can even retain the structure when copying and pasting. In terms of table responsiveness they are not malleable like a flex layout because that would degrade their inherent meaning. This also means we cannot use tables to lay out forms and rows of inputs.

Avoid 100 % width

We don’t want the content to truncate uncontrolably or expand indefinitely. The default table class aims to let the content dictate column width. This means that every table has different width, which makes the content as readable as possible because the spacings are always the same. We can combine it with min- and max-widths and/or different wrap properties to control the size and scaling so we avoid ultra-wide columns that are hard to read.

Except …

Setting a 100 % width can still make sense in cases where the table has very few columns and is placed inside a box or in conjunction with other width-limited content. That usually means the table is part of a bigger layout and not the main interface itself.

Class reference

Class Element Functionality
mb-table table Provides the basic styling to the entire table
mb-table__sticky-top table Makes the thead element sticky. Sticky example
mb-table__sticky-left table Makes the th elements inside tbody sticky. Sticky example
svg Ensures styling of the sorting icons
mb-table__sort th Provides hover/focus styling for sorting headers
mb-table__sort--by th Indicates the sorting column
mb-table__row--clickable tr Indicates functionality on hover
mb-table__row--selected tr Marks row as selected
mb-table__row--inactive tr Marks row as inactive
scrollshade-h parent of table Adds the vertical shadow at each side when tables scroll/overflow
mb-dlist parent of dl Styles a description list similar to the table, useful when media querying between a simple table and a description list

Examples

Base table

The mb-table class is the core of the table component. It provides styling for headers, footers, rows, columns and cells.

Reference

mb-table
Shipment Recipient Sent
987654321 Acme Industries 14.07.2016 12.56
123456789 Burgers and Beauty as 26.06.2016 14.12
456789123 Rent-A-Cat Co. 02.05.2016 11.38 
<table class="mb-table">
<thead>
  <tr>
    <th>Shipment</th>
    <th>Recipient</th>
    <th>Sent</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td><a href="#">987654321</a></td>
    <td>Acme Industries</td>
    <td>14.07.2016 12.56</td>
  </tr>
  <tr>
    <td><a href="#">123456789</a></td>
    <td>Burgers and Beauty as</td>
    <td>26.06.2016 14.12</td>
  </tr>
  <tr>
    <td><a href="#">456789123</a></td>
    <td>Rent-A-Cat Co.</td>
    <td>02.05.2016 11.38</td>
  </tr>
</tbody>
</table>

Row header

Pay attention to the th tags and scope attributes.

Customer Key Service
Acme Industries 12345678910 64defd07-8ce1-438d-a3c5-9ffaa9563797 Supply Base Services
Burgers and Beauty as 10987654321 df021eaf-24c1-4436-b55d-11e5f14e22fe Parcels
Rent-A-Cat Co. 01234567891 2c55f310-eaa4-46a5-869a-24c974dfdf03 Cargo 
<table class="mb-table">
<thead>
  <tr>
    <th>Customer</th>
    <th>Key</th>
    <th>Service</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Acme Industries
      <span class="db text-0.875r fwn">12345678910</span>
    </th>
    <td>64defd07-8ce1-438d-a3c5-9ffaa9563797</td>
    <td>Supply Base Services</td>
  </tr>
  <tr>
    <th scope="row">Burgers and Beauty as
      <span class="db text-0.875r fwn">10987654321</span>
    </th>
    <td>df021eaf-24c1-4436-b55d-11e5f14e22fe</td>
    <td>Parcels</td>
  </tr>
  <tr>
    <th scope="row">Rent-A-Cat Co.
      <span class="db text-0.875r fwn">01234567891</span>
    </th>
    <td>2c55f310-eaa4-46a5-869a-24c974dfdf03</td>
    <td>Cargo</td>
  </tr>
</tbody>
</table>

Footer

Shipment Recipient Parcels
987654321 Acme Industries 2
123456789 Burgers and Beauty as 43
456789123 Rent-A-Cat Co. 1
Total 46 
<table class="mb-table">
<thead>
  <tr>
    <th>Shipment</th>
    <th>Recipient</th>
    <th class="tr">Parcels</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td><a href="#">987654321</a></td>
    <td>Acme Industries</td>
    <td class="tr">2</td>
  </tr>
  <tr>
    <td><a href="#">123456789</a></td>
    <td>Burgers and Beauty as</td>
    <td class="tr">43</td>
  </tr>
  <tr>
    <td><a href="#">456789123</a></td>
    <td>Rent-A-Cat Co.</td>
    <td class="tr">1</td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <th scope="row">Total</th>
    <td></td>
    <td class="tr">46</td>
  </tr>
</tfoot>
</table>