Filtering

The basics of filtering tables

Shipment or recipient

Status

Shipment	Recipient	Sent	Recieved	Status
987654321	Mieow Corp	09.08.2024 11.50	12.08.2024 11.38	Delivered
123456789	Shiba Shipping Industries	10.08.2024 12.12	14.08.2024 11.05	Delivered
456789123	Toad Trampolines Co.	02.09.2024 10.38		In transit

Shipments per page

HTML

  <div class="flex gam align-ic">
    <div class="flex flex-dir-col">
      <label class="form__label" for="search-input">Shipment or recipient</label>
      <input type="text" id="search-input" class="form__control w16r" placeholder="Search" aria-controls="result-content" />
    </div>
    <div class="flex flex-dir-col">
      <label class="form__label" for="status-select">Status</label>
      <select id="status-select" class="form__control wauto maxw100p" aria-controls="result-content">
        <option>All statuses</option>
        <option selected data-filter="status">Delivered</option>
        <option data-filter="status">In transit</option>
      </select>
    </div>
    <button id="clear-filters" class="btn-link mts" title="Clear">
      <span data-mybicon="mybicon-cross" data-mybicon-class="icon-ui mrxs"></span>
      <span>Clear all</span>
    </button>
  </div>
  
  <div id="result-content">
    <div id="result-message" role="status" class="screen-reader-text mlm" aria-live="polite"></div>
  
    <table id="example-table" class="mb-table mts">
      <thead>
        <tr>
          <th scope="col">Shipment</th>
          <th scope="col">Recipient</th>
          <th scope="col">Sent</th>
          <th scope="col">Recieved</th>
          <th scope="col">Status</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-filter="shipment"><a href="#">987654321</a></td>
          <td data-filter="recipient">Mieow Corp</td>
          <td>09.08.2024 11.50</td>
          <td>12.08.2024 11.38</td>
          <td data-filter="status"><span class="mb-badge mb-badge--green">Delivered</span></td>
        </tr>
        <tr>
          <td data-filter="shipment"><a href="#">123456789</a></td>
          <td data-filter="recipient">Shiba Shipping Industries</td>
          <td>10.08.2024 12.12</td>
          <td>14.08.2024 11.05</td>
          <td data-filter="status"><span class="mb-badge mb-badge--green">Delivered</span></td>
        </tr>
        <tr hidden>
          <td data-filter="shipment"><a href="#">456789123</a></td>
          <td data-filter="recipient">Toad Trampolines Co.</td>
          <td>02.09.2024 10.38</td>
          <td></td>
          <td data-filter="status"><span class="mb-badge">In transit</span></td>
        </tr>
      </tbody>
    </table>
  </div>
  
  
  <div id="rowselect-pagination" class="flex flex-wrap align-ic gas">
    <div class="mb-rows-select">
      <select id="rows-select" class="form__control wauto maxw100p">
        <option>25</option>
        <option>50</option>
        <option>100</option>
      </select>
      <label for="rows-select">Shipments per page</label>
    </div>
    <nav aria-label="Pagination">
      <ul class="pagination">
        <li>
          <button title="Previous page">
            <span
              data-mybicon="mybicon-arrow-left"
              data-mybicon-class="icon-ui"
            ></span>
          </button>
        </li>
        <li>
          <button>1</button>
        </li>
        <li>
          <button aria-current="page">2</button>
        </li>
        <li>
          <button>3</button>
        </li>
        <li>
          <button>4</button>
        </li>
        <li>
          <button title="Next page">
            <span
              data-mybicon="mybicon-arrow-right"
              data-mybicon-class="icon-ui"
            ></span>
          </button>
        </li>
      </ul>
    </nav>
  </div>

Principles

What to filter

Knowing which filters and search options are most important or frequently used should inform their order. Tracking usage of filters and actions can offer valuable insights into user interactions with the tables. Knowing the lesser used options is equally important in case some can be removed.

Reference

Logging events

Merge multiple search fields to one.
Show the most important filters only. For filters that are rarely used but still needed, see Extended filters below.

Positions

Place search and filter above the table, aligning it to the left, followed by the filters.
Pagination and rowselect controls are only placed below the table, with row selection on the left.

Rows per page

Rows per page select allows the user to choose how many results to see on each page. Useful for large tables with a lot of data. A good starting point for values in the select is 25 - 50 - 100 rows per page. You can add logging to see which values are used the most, and adjust the default value and select options accordingly.

Wording

"Rows per page" is a good default, but it's even better to be context specific. For instance "Orders per page" or "Shipments per page".

Reference

Active filters

Active filter is shown in form controls.
Include "Clear all" button when a filter or search is active.

Empty search

When search or filtering yields no results, the entire table and pagination should be hidden. Instead, inform the user by displaying a message such as "No results found" in the table’s space.

Pagination

Reset the pagination with each filtering action, as the current page may no longer be accurate. Pagination is not often being used in combination with filtering, and there is no guarantee that the current page will still exist.

Extended filtrering

We are still working on guidelines for extended filtering, which will involve bigger and more complex tables with lots of filtering and need for column customization.