Skip to main content
MybringDesign System

Tables

Getting started with displaying tabular data

Resources and tips

Mybring’s variety of complex tables creates potentially big and fun challenges. Common classes and shared principles aim to make it easier to get the basics in order fast.

Principles

Tables are content

Which means that they are best presented as tables and not treated as layout. The point of a table is to make tabular data into comprehensible content. It provides meaning through how the data is organised. In terms of table responsiveness they are not malleable like a flex layout because that would degrade their inherent meaning.

Syntax is free

Use table and related tags. That way, we get a lot for free. We need less CSS because the structure is already provided. The behaviour is predictable. Browsers and assistive tech can read the content as-is. Users can even retain the structure when copying and pasting.

Avoid 100 % width

Big viewports are just as important as small ones. We don’t want the content to truncate uncontrolled and we don’t want it to 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. See example
mb-table__sticky-left table Makes the th elements inside tbody sticky. See example
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
mb-table__cell--icon td Adjusts cell padding to prevent increased row height when using regular sized icons
mb-table__cell--iconm td Adjusts cell padding to prevent increased row height when using medium sized icons
mb-table__cell--btn-link td Adjusts cell padding to prevent increased row height when using btn-link component
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>