Tables

Getting started with displaying tabular data

Resources and tips

Get familiar with HTML element <table> and its relatives
Data tables on Inclusive Components also features nifty code examples for description lists.

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 scope="col">Shipment</th>
    <th scope="col">Recipient</th>
    <th scope="col">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 scope="col">Customer</th>
    <th scope="col">Key</th>
    <th scope="col">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 scope="col">Shipment</th>
    <th scope="col">Recipient</th>
    <th scope="col" 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>