Datatabel (sorteerbaar)

Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk.

Een sorteerbare tabel laat gebruikers data sorteren op verschillende kolommen. Gebruikers klikken op kolomkoppen om de volgorde te wijzigen. Dit helpt bij het analyseren en vergelijken van informatie.

Gebruik een sorteerbare tabel als:

• Je data hebt die gebruikers willen ordenen
• Er meerdere kolommen zijn om op te sorteren
• De dataset groot genoeg is dat sorteren nuttig is

Technische opbouw

• (4.1.2) Maak het component op met een <table>-element
• (2.4.6) De tabel moet een toegankelijke naam hebben hebben die het onderwerp beschrijft
• (1.3.1) Geef de tabel een <thead> en <tbody> voor structuur
• (1.3.1) Tabelkoppen moeten een scope="col" hebben
• (4.1.2) Gebruik <button>-elementen in de sorteerbare kolomkoppen
• (2.4.6) De knoppen moeten een toegankelijke naam hebben
• (4.1.2) Sorteerbare kolommen moeten een aria-sort-attribuut hebben met:
  • ascending bij oplopend gesorteerd
  • descending bij aflopend gesorteerd
  • none of geen attribuut bij niet-gesorteerd

Toetsenbordbediening

• Tab:
  • Gaat naar het volgende focusbare element in de tabel
• Shift + Tab:
  • Gaat naar het vorige focusbare element in de tabel
• Enter of Spatie:
  • Activeer sortering op huidige kolom

Focus management

• Na het sorteren blijft de focus op de knop

Voorbeeld datatabel

See the Pen Datatabel (sorteerbaar) by Niek (@niekd) on CodePen.

Bronnen

• Sortable Table Example | APG | WAI | W3C (Engelstalig)
• Data Tables (Engelstalig)