Skip to main content
MybringDesign System

Overflow, responsive and sticky

Scaling, scrolling and rearranging

In most cases, we want tables to scroll horizontally instead of shifting things around because tabular data gets meaning from its position. We also have many large tables, so reflowing them is rarely viable. The only time reflowing can be relevant is when the tables are small, with two or three columns and a part of a bigger interface. But then the need to reflow is also less important.

Scaling

The mb-table class scales the font-size down to 0.9 rem when the viewport is narrower than 62.5 em. All other size properties inside it scale relative to that.

Overflow and scrolling

Horizontal scrolling is the most user-friendly option for tables when the screen isn’t wide enough. Which depends solely on the column-richness.

We want to limit the scrolling to the table itself. This is done by placing ofx-auto and scrollshade-h on a div element wrapping the table element. The first adds scrollbars when overflowing, the other adds a shadow to indicate the overflow.

Implementations before June 2023 required an additional maxw100vw on the element wrapping the entire page. That should no longer be used as it leads to an extra set of scrollbars. When we mount the app correctly, Mybring Layout will take care of that.

Sticky headers

If the table is large and contains many rows, consider making it vertically scrollable as well using of-auto on the parent div element, in addition to setting a height or max-height with a vh unit.

Make the table header sticky by adding the class mb-table__sticky-top on the table element. For making the row headers sticky as well, add the class mb-table__sticky-left in addition.

Reference

  • ofx-auto or of-auto
  • scrollshade-h
  • mb-table__sticky-top
  • mb-table__sticky-left
Shipment Recipient Created Updated Order Plant Status Price Sent Delivered
Amec Steel 987654321 Acme Industries 14.07.2022 12:56 14.07.2022 13:41 0098765432122 BOB Arrived NOK 198 765,00
Fine Fries AS 123456789 Burgers and Beauty as 26.06.2022 14:12 28.06.2022 11:27 0012345678943 BOB Delivered NOK 666,00 28.06.2022 14:18
MomCorp 456789123 Rich Industries 02.05.2022 11:38 03.05.2022 15:33 0145678912377 BOB Delivered NOK 37,00 06.05.2022 09:44
Wayne Enterprises 876543219 Stark Industries 28.04.2022 10:08 29.04.2022 14:32 0037123345567 BOB Delivered NOK 97,00 29.04.2022 12:14
Virtucon 765432198 Gringotts 16.04.2022 09:18 18.04.2022 15:41 0037987567543 BOB Delivered NOK 804,00 18.04.2022 10:12
Oscorp 654321098 Wayne Enterprises 29.03.2022 11:38 30.03.2022 15:33 0037987567345 BOB Delivered NOK 543,00 31.03.2022 10:54
Frobozz Magic Co. 543210987 Spacely Space Sprockets 27.02.2022 13:35 28.02.2022 15:28 0037234456234 BOB Delivered NOK 76,00 28.02.2022 10:06 
<div class="scrollshade-h of-auto" style="max-height:30vh;">
<table class="mb-table mb-table__sticky-top mb-table__sticky-left mbm">
  <thead>
    <tr>
      <th></th>
      <th>Shipment</th>
      <th class="minw9r ws-nowrap">Recipient</th>
      <th>Created</th>
      <th>Updated</th>
      <th>Order</th>
      <th>Plant</th>
      <th>Status</th>
      <th class="tr">Price</th>
      <th>Sent</th>
      <th>Delivered</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="ws-nowrap">Amec Steel</th>
      <td><a href="#">987654321</a></td>
      <td>Acme Industries</td>
      <td>14.07.2022 12:56</td>
      <td>14.07.2022 13:41</td>
      <td><a href="#">0098765432122</a></td>
      <td>BOB</td>
      <td>Arrived</td>
      <td class="tr ws-nowrap">NOK 198 765,00</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th class="ws-nowrap">Fine Fries AS</th>
      <td><a href="#">123456789</a></td>
      <td>Burgers and Beauty as</td>
      <td>26.06.2022 14:12</td>
      <td>28.06.2022 11:27</td>
      <td><a href="#">0012345678943</a></td>
      <td>BOB</td>
      <td>Delivered</td>
      <td class="tr ws-nowrap">NOK 666,00</td>
      <td>28.06.2022 14:18</td>
      <td class="mb-table__cell--icon tc">
        <span
          data-mybicon="mybicon-check"
          data-mybicon-class="icon-ui icon-ui--green-dark"
        ></span>
      </td>
    </tr>
    <tr>
      <th class="ws-nowrap">MomCorp</th>
      <td><a href="#">456789123</a></td>
      <td>Rich Industries</td>
      <td>02.05.2022 11:38</td>
      <td>03.05.2022 15:33</td>
      <td><a href="#">0145678912377</a></td>
      <td>BOB</td>
      <td>Delivered</td>
      <td class="tr ws-nowrap">NOK 37,00</td>
      <td>06.05.2022 09:44</td>
      <td class="mb-table__cell--icon tc">
        <span
          data-mybicon="mybicon-check"
          data-mybicon-class="icon-ui icon-ui--green-dark"
        ></span>
      </td>
    </tr>
    <tr>
      <th class="ws-nowrap">Wayne Enterprises</th>
      <td><a href="#">876543219</a></td>
      <td>Stark Industries</td>
      <td>28.04.2022 10:08</td>
      <td>29.04.2022 14:32</td>
      <td><a href="#">0037123345567</a></td>
      <td>BOB</td>
      <td>Delivered</td>
      <td class="tr ws-nowrap">NOK 97,00</td>
      <td>29.04.2022 12:14</td>
      <td class="mb-table__cell--icon tc">
        <span
          data-mybicon="mybicon-check"
          data-mybicon-class="icon-ui icon-ui--green-dark"
        ></span>
      </td>
    </tr>
    <tr>
      <th class="ws-nowrap">Virtucon</th>
      <td><a href="#">765432198</a></td>
      <td>Gringotts</td>
      <td>16.04.2022 09:18</td>
      <td>18.04.2022 15:41</td>
      <td><a href="#">0037987567543</a></td>
      <td>BOB</td>
      <td>Delivered</td>
      <td class="tr ws-nowrap">NOK 804,00</td>
      <td>18.04.2022 10:12</td>
      <td class="mb-table__cell--icon tc">
        <span
          data-mybicon="mybicon-check"
          data-mybicon-class="icon-ui icon-ui--green-dark"
        ></span>
      </td>
    </tr>
    <tr>
      <th class="ws-nowrap">Oscorp</th>
      <td><a href="#">654321098</a></td>
      <td>Wayne Enterprises</td>
      <td>29.03.2022 11:38</td>
      <td>30.03.2022 15:33</td>
      <td><a href="#">0037987567345</a></td>
      <td>BOB</td>
      <td>Delivered</td>
      <td class="tr ws-nowrap">NOK 543,00</td>
      <td>31.03.2022 10:54</td>
      <td class="mb-table__cell--icon tc">
        <span
          data-mybicon="mybicon-check"
          data-mybicon-class="icon-ui icon-ui--green-dark"
        ></span>
      </td>
    </tr>
    <tr>
      <th class="ws-nowrap">Frobozz Magic Co.</th>
      <td><a href="#">543210987</a></td>
      <td>Spacely Space Sprockets</td>
      <td>27.02.2022 13:35</td>
      <td>28.02.2022 15:28</td>
      <td><a href="#">0037234456234</a></td>
      <td>BOB</td>
      <td>Delivered</td>
      <td class="tr ws-nowrap">NOK 76,00</td>
      <td>28.02.2022 10:06</td>
      <td class="mb-table__cell--icon tc">
        <span
          data-mybicon="mybicon-check"
          data-mybicon-class="icon-ui icon-ui--green-dark"
        ></span>
      </td>
    </tr>
  </tbody>
</table>
</div>

Rearrange and reflow

For smaller tables with few columns, it can make sense to have a second component presenting the data in a description list. We can switch between these at at reasonable viewport sizes – or perhaps make it the user’s choice.

It requires us to build a second component where we translate the table into a set of description lists:

  • tr becomes dl
  • th becomes dt
  • td becomes dd
  • All the dls are wrapped in a div with the mb-dlist class.

Reference

mb-dlist
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
Shipment
987654321
Recipient
Acme Industries
Sent
14.07.2016 12.56
Shipment
123456789
Recipient
Burgers and Beauty as
Sent
26.06.2016 14.12
Shipment
456789123
Recipient
Rent-A-Cat Co.
Sent
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>

<div class="mb-dlist maxw24r">
<dl>
  <dt>Shipment</dt>
  <dd><a href="#">987654321</a></dd>
  <dt>Recipient</dt>
  <dd>Acme Industries</dd>
  <dt>Sent</dt>
  <dd>14.07.2016 12.56</dd>
</dl>
<dl>
  <dt>Shipment</dt>
  <dd><a href="#">123456789</a></dd>
  <dt>Recipient</dt>
  <dd>Burgers and Beauty as</dd>
  <dt>Sent</dt>
  <dd>26.06.2016 14.12</dd>
</dl>
<dl>
  <dt>Shipment</dt>
  <dd><a href="#">456789123</a></dd>
  <dt>Recipient</dt>
  <dd>Rent-A-Cat Co.</dd>
  <dt>Sent</dt>
  <dd>02.05.2016 11.38</dd>
</dl>
</div>