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
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

HTML

<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 scope="col" aria-label="Row titles"></th>
        <th scope="col">Shipment</th>
        <th scope="col" class="minw9r ws-nowrap">Recipient</th>
        <th scope="col">Created</th>
        <th scope="col">Updated</th>
        <th scope="col">Order</th>
        <th scope="col">Plant</th>
        <th scope="col">Status</th>
        <th scope="col" class="tr">Price</th>
        <th scope="col">Sent</th>
        <th scope="col">Delivered</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row" 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 scope="row" 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="tc">
          <span
            data-mybicon="mybicon-check"
            data-mybicon-class="icon--green-dark"
          ></span>
        </td>
      </tr>
      <tr>
        <th scope="row" 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="tc">
          <span
            data-mybicon="mybicon-check"
            data-mybicon-class="icon--green-dark"
          ></span>
        </td>
      </tr>
      <tr>
        <th scope="row" 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="tc">
          <span
            data-mybicon="mybicon-check"
            data-mybicon-class="icon--green-dark"
          ></span>
        </td>
      </tr>
      <tr>
        <th scope="row" 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="tc">
          <span
            data-mybicon="mybicon-check"
            data-mybicon-class="icon--green-dark"
          ></span>
        </td>
      </tr>
      <tr>
        <th scope="row" 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="tc">
          <span
            data-mybicon="mybicon-check"
            data-mybicon-class="icon--green-dark"
          ></span>
        </td>
      </tr>
      <tr>
        <th scope="row" 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="tc">
          <span
            data-mybicon="mybicon-check"
            data-mybicon-class="icon--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 with mb-dlist class
th becomes dt
td becomes dd

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

HTML

<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>

<dl class="mb-dlist">
  <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 class="mb-dlist">
  <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 class="mb-dlist">
  <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>