Skip to main content
MybringDesign System

Sorting

Indicating sortability and direction

We need to supply our own JavaScript and make the entire header cell clickable. This is how we style it:

  • Classname mb-table__sort on the table header cell.
  • Additional classname mb-table__sort--by on the currently "sorted by" table header cell.
    The arrow icons indicating the current direction and make use of the icon title for accessibility. Find instructions for JS and React via the icon system.
  • And finally, add the extra span and invisible whitespace with classname ws-nowrap to stop the icon from ending up on its own when the text wraps.

To make a header cell keyboard focusable and register as interactive elements, add role="button" tabindex="0" to it.

Reference

Shipment Recipient Sent
123456789 Burgers and Beauty as 26.06.2016 14.12
456789123 Rent-A-Cat Co. 02.05.2016 11.38
987654321 Acme Industries 14.07.2016 12.56 
<table class="mb-table">
<thead>
  <tr>
    <th class="mb-table__sort mb-table__sort--by" role="button" tabindex="0">
      Shipment<span class="ws-nowrap">&#65279;<span
      data-mybicon="mybicon-sorting-arrow-down"
      data-mybicon-title="Sort by shipment"
      ></span></span>
    </th>
    <th class="mb-table__sort" role="button" tabindex="0">
      Recipient<span class="ws-nowrap">&#65279;<span
      data-mybicon="mybicon-sorting-arrows-default"
      data-mybicon-title="Sort by recipient"
      ></span></span>
    </th>
    <th class="mb-table__sort" role="button" tabindex="0">
      Sent<span class="ws-nowrap">&#65279;<span
      data-mybicon="mybicon-sorting-arrows-default"
      data-mybicon-title="Sort by sent date"
      ></span></span>
    </th>
  </tr>
</thead>
<tbody>
  <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>
  <tr>
    <td><a href="#">987654321</a></td>
    <td>Acme Industries</td>
    <td>14.07.2016 12.56</td>
  </tr>
</tbody>
</table>