Sorteerbare tabel

Om inzicht te krijgen in de data kan het behulpzaam zijn om de gebruiker de data te laten sorteren. Bijvoorbeeld op basis van op of aflopende data.

Benodigde stappen:

1. Voeg een button toe binnen de th om sorteerelemeent klikbaar te maken.
2. Voeg binnen de knop een icoon toe indien gewenst. Voor meer informatie zie: Icoonknoppen
3. Voeg abbr="" toe aan de <th> met een korte duidelijke omschrijving om de gebruikerservaring te verbeteren voor gebruikers die gebruik maken van een screenreader.

Aandachtspunten

• Dit element bevat momenteel geen JavaScript of logica voorbeeld.

Voorbeelden

Visueel voorbeeld:

HTML-voorbeeld:

<div class="horizontal-scroll">
  <table>
    <caption>Tabelvoorbeeld met sorteerbare data:</caption>
    <thead>
      <tr>
        <th scope="col" abbr="Ascending data">
          <button title="Sort descending">Descending <span class="icon icon-ascending"></button>
        </th>
        <th scope="col" abbr="Descending data">
          <button title="Sort ascending">Ascending <span class="icon icon-descending"></span></button>
        </th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
      </tr>
    </tbody>
  </table>
</div>

Benodigdheden

• table/table-base.scss
• table/table-base-variables.scss
• button/button-base.scss
• button/button-base-variables.scss
• icon/icon-base.scss
• icon/icon-base-variables.scss