Let op: Deze tabelstructuur kan als complex ervaren worden door gebruikers. Zeker in combinatie met hulptechnologieën. Maak enkel gebruik van deze opzet als het de gebruiker helpt om complexe data te begrijpen.

Uitklapbare tabel

Voor het tonen van complexe tabellen met bijbehorende details kan gekozen worden voor een tabel met uitklapbare tabelrijen.

Benodigde stappen:

Voeg aan de tabel een extra kolom toe voor de knoppen voor het bedienen van de uitklapbare rijen.
- Geef de <th> van deze kolom een id.
- Gebruik als kolomtitel een korte omschrijvende tekst. Bijvoorbeeld met de tekst "details".
Voeg een extra <tr> toe direct onder de bijbehorende zichtbare rij om een uitklapbare rij toe te voegen.
Geef de uitklapbare rij de class expando-row.
Zorg dat de zichtbare rij een <th> met scope="row" heeft, die de rij uniek identificeert. Gebruik hiervoor bijvoorbeeld een naam of ID. Geef deze <th> een id.
Voeg binnen de uitklapbare rij een tabelcel toe.
- Zorg er met colspan voor dat de cel de volledige breedte gebruikt. Vul als waarde de hoeveelheid kolommen van de tabel in, inclusief de "details"-kolom. In dit voorbeeld: <td colspan="5"></td>.
- Geef de tabelcel het headers-attribuut, en gebruik dat om te verwijzen naar de id's van de <th>'s van de openklapbare rij en de "details"-kolom (in die volgorde). In dit voorbeeld: headers="lorem-ipsum-header details-header"
Vul de uitklapbare tabel met de gewenste data.
Voeg voor iedere uitklapbare rij een knop toe aan de "details"-kolom met de class expando-button.
- Voeg een button-tekst toe die screenreader gebruikers toelicht dat de knop de uitklapbare rij bedient. Verwijs daarin naar de inhoud (bijvoorbeeld "details") en het onderwerp (bijvoorbeeld de naam of ID van de rij).
- HTML-voorbeeld: <button class="expando-button" data-icon-open-class="icon icon-descending" data-icon-close-class="icon icon-ascending">Lorem ipsum details</button>
Plaats <script defer src="pad/naar/expando-rows.min.js"></script> in de <head> van het document. Voor meer informatie zie: JavaScript toevoegen
Open/sluit-icoon toevoegen:
- Voeg de gewenste icoon-classes toe via het HTML-attribuut data-icon-open-class="" voor het open-icoon en data-icon-close-class="" voor het sluit-icoon. Vul tussen de "" de icoon-classes in van de door jouw gebruikte iconenset. Voor meer informatie over het toevoegen van iconensets, zie Iconen. Voor een implementatievoorbeeld zie het html-voorbeeld.

Aandachtspunten

Let op: Deze tabelstructuur kan als complex ervaren worden door gebruikers. Zeker in combinatie met hulptechnologieën. Maak enkel gebruik van deze opzet als het de gebruiker helpt om complexe data te begrijpen.
Wanneer JavaScript niet beschikbaar is, worden alle uitklapbare tabelrijen uitgeklapt getoond en worden de expando-<button>s verborgen zodat alle data ook beschikbaar is voor gebruikers zonder JavaScript.
Om een tabelrij standaard uitgeklapt te maken, voeg je aria-expanded="true" toe aan de <button>. Verander hierbij ook de button-tekst naar bijvoorbeeld "Sluit details", en vervang de data-close-label door een data-open-label met bijbehorende tekst zoals bijvoorbeeld "Open details.

Voorbeelden

Visueel voorbeeld:

Voorbeeld uitklapbare tabelrijen:
Bevindingstype	Risicolevel	Hoeveelheid	Status
Lorem ipsum	Critical	4	New
Details Dit zijn de details over de bevinding "lorem ipsum"
Dolor sit amet	High	12	New
Details Dit zijn de details over de bevinding "dolor sit amet".

HTML-voorbeeld:

<div class="horizontal-scroll">
  <table>
    <caption>Voorbeeld uitklapbare tabelrijen:</caption>
    <thead>
      <tr>
        <th scope="col">Bevindingstype</th>
        <th scope="col">Risicolevel</th>
        <th scope="col">Hoeveelheid</th>
        <th scope="col">Status</th>
        <th scope="col" id="details-header">Details</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row" id="lorem-ipsum-header">Lorem ipsum</th>
        <td><span class="critical">Critical</span></td>
        <td class="number">4</td>
        <td>New</td>
        <td>
          <button
            class="expando-button"
            data-icon-open-class="icon icon-descending"
            data-icon-close-class="icon icon-ascending"
          >
            Lopem ipsum details
          </button>
        </td>
      </tr>
      <tr class="expando-row">
        <td colspan="5" headers="lorem-ipsum-header details-header">
          <h4>Details</h4>
          <p>Dit zijn de details over de bevinding "lorem ipsum"</p>
        </td>
      </tr>
      <tr>
        <th scope="row" id="dolor-sit-amet-header">Dolor sit amet</th>
        <td><span class="high">High</span></td>
        <td class="number">12</td>
        <td>New</td>
        <td>
          <button
            class="expando-button"
            data-icon-open-class="icon icon-descending"
            data-icon-close-class="icon icon-ascending"
          >
            Dolor sit amet details
          </button>
        </td>
      </tr>
      <tr class="expando-row">
        <td colspan="5" headers="dolor-sit-amet-header details-header">
          <h4>Details</h4>
          <p>Dit zijn de details over de bevinding "dolor sit amet".</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Benodigdheden

table/table-expando-rows.scss
table/table-expando-rows-variables.scss
expando-rows.js

Instelbare variabelen

Overzicht beschikbare variabelen:
Naam	CSS-attribuut	Standaard waarde	Scope	Type
--expando-rows-table-cell-background-color	background-color	#e5e5e5	Openklapbare cel - td	CSS
--expando-rows-table-cell-padding	padding	2rem 1rem	Openklapbare cel - td	CSS
--expando-rows-table-cell-after-breakpoint-padding	padding	2rem 3rem	Openklapbare cel - td	CSS
$breakpoint	Breekpunt	24rem !default	Subtitel binnen de openklapbare cel - h2	SASS
--expando-rows-row-background-color	background-color	transparent	De openklapbare rij	CSS
--expando-rows-row-striping-background-color	background-color	var(--table-row-background-color-striping, initial)	De openklapbare rij	CSS
--expando-rows-row-font-weight	font-weight	bold	De openklapbare rij	CSS