Table

Het <table> component is gebasseerd op Bootstrap’s Table.

Met de volgende uitzonderingen is de markup identiek aan Bootstrap:

  • Er zijn geen .table-bordered, .table-condensed en .table-striped varianten.
  • Er is geen tr.primary en tr.secondary.
  • Er is geen .table-responsive functionaliteit.
  • Er zijn geen success, info, warning en danger row-modifiers.

Zie Bootstrap Table.

Gebruik tabellen om inhoud logisch te structureren, zodat het gemakkelijker wordt om relaties te zien en te begrijpen. Gebruik een tabel nooit om inhoud op een pagina op te maken. Gebruik in plaats daarvan het gridsysteem.

Het component <table> wordt als een data-tabel gebruikt of als data-grid.

Hoe component “table” gebruiken als data-tabel

  • Bij het weergeven van logisch gestructureerde informatie
  • Bij het weergeven van “key-value pairs”.
  • Wanneer je wel headers kan toekennen.
  • Wanneer er geen interactieve elementen zijn om de tabel aan te passen.
  • Een data tabel is daarmee een statische weergave van informatie.
  • Opbouw van data tabel is met native HTML <table> tag
  • Gebruik <th scope="col"> voor koptitels in de kolommen.
  • Gebruik <th scope="row"> voor koptitels in de rijen.

Wanneer gebruik je het component “table” niet

Maak geen layout-tabel

Gebruik een <table> nooit om inhoud op een pagina op te maken. Dit is ook wel bekend als een layout-tabel. Gebruik in plaats daarvan het responsive grid-systeem om inhoud op een pagina op te maken.

Zie ook: de layout documentatie

Voorbeeld van een layout-tabel

Maak geen definition lists met “table”

  • Definition lists worden ook gebruikt om logisch gestructureerde data te tonen. Definition lists worden onder andere gebruikt bij het tonen van meta data.
  • Gebruik een definition list als je geen koptitel als header boven de kolom kan plaatsen.
  • Gebruik een <table> als je wel een koptitel boven de kolommen kunt plaatsen. De kolom kun je als een groep met een koptitel beschouwen.

Zie ook: Definition List

Hoe component “table” te gebruiken als data-grid

Een data grid is een dynamischere weergave van informatie. Het bevat wel interactieve elementen om de tabel aan te passen.

  • Opbouw van data grid is met native HTML <table> tag én ARIA table role="grid"
  • Gebruik <th> om koptitels in header te definiëren.
  • Specifieke keyboard interacties moeten verder worden toegevoegd voor interactieve elementen.

Sorteren in een data-grid

  • Bij het gebruik van role="grid" wordt vanuit gegaan dat de data in het data-grid aanpasbaar is. Voeg aria-readonly="true" toe, als de data niet aanpasbaar is.
  • Als je een kolom sorteerbaar wilt maken, voeg dan aan <th> "role=columnheader" toe.
    • Als je een rij sorteerbaar wilt maken, voeg dan aan <th> "role=rowheader" toe.
  • Wanneer de sortering oplopend is, geef dit bij <th> aan met aria-sort="ascending". Bij aflopende resultaten, gebruik aria-sort="descending".
  • Als er meerdere sorteerbare kolommen of rijen zijn, dan mag er alleen één sortering tegelijk actief zijn met aria-sort.

Gedrag en toegankelijkheid

  • Een tabel heeft altijd een <caption> nodig. De caption wordt als een titel opgelezen door een screen reader. Indien deze visueel niet wenselijk is wordt deze verborgen met .sr-only.
  • Houd de tabel zo eenvoudig mogelijk. Dit verhoogt de begrijpelijkheid van de tabel voor eindgebruikers.
  • Zorg ervoor dat er maximaal één kop niveau is voor de kolommen en maximaal één kop niveau voor de rijen. Screen readers hebben vaak moeite om goed meerdere kop niveaus op te lezen.
  • Gebruik <th scope="col"> voor koptitels in de kolommen.
  • Gebruik <th scope="row"> voor koptitels in de rijen.
  • Splits de table in twee losse tables als er twee kop niveaus nodig zijn.

Bronvermelding

<!-- Default -->
<table class="table">
    <caption class="sr-only">Overzicht van gebruikersnamen</caption>
    <thead>
        <tr>
            <th scope="col">Nummer</th>
            <th scope="col">Voornaam</th>
            <th scope="col">Achternaam</th>
            <th scope="col">
                GitHub gebruikersnaam

            </th>
            <th scope="col">Modifier</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td><a href="#fabien">Fabien</a></td>
            <td>Potencier</td>
            <td>fabpot</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td><a href="#andrew">Andrew</a></td>
            <td>Nesbitt</td>
            <td>andrew</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td><a href="#taylor">Taylor</a></td>
            <td>Otwell</td>
            <td>taylorotwell</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td><a href="#hugo">Hugo</a></td>
            <td>Giraudel</td>
            <td>HugoGiraudel</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
    </tbody>
</table>
<!-- Caption -->
<table class="table">
    <caption>Overzicht van gebruikersnamen</caption>
    <thead>
        <tr>
            <th scope="col">Nummer</th>
            <th scope="col">Voornaam</th>
            <th scope="col">Achternaam</th>
            <th scope="col">
                GitHub gebruikersnaam

            </th>
            <th scope="col">Modifier</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td><a href="#fabien">Fabien</a></td>
            <td>Potencier</td>
            <td>fabpot</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td><a href="#andrew">Andrew</a></td>
            <td>Nesbitt</td>
            <td>andrew</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td><a href="#taylor">Taylor</a></td>
            <td>Otwell</td>
            <td>taylorotwell</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td><a href="#hugo">Hugo</a></td>
            <td>Giraudel</td>
            <td>HugoGiraudel</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
    </tbody>
</table>
<!-- Hovered -->
<table class="table table-hover">
    <caption class="sr-only">Overzicht van gebruikersnamen</caption>
    <thead>
        <tr>
            <th scope="col">Nummer</th>
            <th scope="col">Voornaam</th>
            <th scope="col">Achternaam</th>
            <th scope="col">
                GitHub gebruikersnaam

            </th>
            <th scope="col">Modifier</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td><a href="#fabien">Fabien</a></td>
            <td>Potencier</td>
            <td>fabpot</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td><a href="#andrew">Andrew</a></td>
            <td>Nesbitt</td>
            <td>andrew</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr class="active">
            <th scope="row">3</th>
            <td><a href="#taylor">Taylor</a></td>
            <td>Otwell</td>
            <td>taylorotwell</td>
            <td>
                <code>tr.active</code>
            </td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td><a href="#hugo">Hugo</a></td>
            <td>Giraudel</td>
            <td>HugoGiraudel</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
    </tbody>
</table>
<!-- Table Text Left Aligned -->
<table class="table dso-text-left">
    <caption class="sr-only">Overzicht van gebruikersnamen</caption>
    <thead>
        <tr>
            <th scope="col">Nummer</th>
            <th scope="col">Voornaam</th>
            <th scope="col">Achternaam</th>
            <th scope="col">
                GitHub gebruikersnaam

            </th>
            <th scope="col">Modifier</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td><a href="#fabien">Fabien</a></td>
            <td>Potencier</td>
            <td>fabpot</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td><a href="#andrew">Andrew</a></td>
            <td>Nesbitt</td>
            <td>andrew</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td><a href="#taylor">Taylor</a></td>
            <td>Otwell</td>
            <td>taylorotwell</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td><a href="#hugo">Hugo</a></td>
            <td>Giraudel</td>
            <td>HugoGiraudel</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
    </tbody>
</table>
<!-- Table Text Centered -->
<table class="table dso-text-center">
    <caption class="sr-only">Overzicht van gebruikersnamen</caption>
    <thead>
        <tr>
            <th scope="col">Nummer</th>
            <th scope="col">Voornaam</th>
            <th scope="col">Achternaam</th>
            <th scope="col">
                GitHub gebruikersnaam

            </th>
            <th scope="col">Modifier</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td><a href="#fabien">Fabien</a></td>
            <td>Potencier</td>
            <td>fabpot</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td><a href="#andrew">Andrew</a></td>
            <td>Nesbitt</td>
            <td>andrew</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td><a href="#taylor">Taylor</a></td>
            <td>Otwell</td>
            <td>taylorotwell</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td><a href="#hugo">Hugo</a></td>
            <td>Giraudel</td>
            <td>HugoGiraudel</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
    </tbody>
</table>
<!-- Table Text Right Aligned -->
<table class="table dso-text-right">
    <caption class="sr-only">Overzicht van gebruikersnamen</caption>
    <thead>
        <tr>
            <th scope="col">Nummer</th>
            <th scope="col">Voornaam</th>
            <th scope="col">Achternaam</th>
            <th scope="col">
                GitHub gebruikersnaam

            </th>
            <th scope="col">Modifier</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td><a href="#fabien">Fabien</a></td>
            <td>Potencier</td>
            <td>fabpot</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td><a href="#andrew">Andrew</a></td>
            <td>Nesbitt</td>
            <td>andrew</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td><a href="#taylor">Taylor</a></td>
            <td>Otwell</td>
            <td>taylorotwell</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td><a href="#hugo">Hugo</a></td>
            <td>Giraudel</td>
            <td>HugoGiraudel</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
    </tbody>
</table>
<!-- Column Text Left Aligned -->
<table class="table">
    <caption class="sr-only">Overzicht van gebruikersnamen</caption>
    <thead>
        <tr>
            <th scope="col">Nummer</th>
            <th scope="col">Voornaam</th>
            <th scope="col">Achternaam</th>
            <th scope="col" class="dso-text-left">
                GitHub gebruikersnaam
                (kolom links uitgelijnd)

            </th>
            <th scope="col">Modifier</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td><a href="#fabien">Fabien</a></td>
            <td>Potencier</td>
            <td class="dso-text-left">fabpot</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td><a href="#andrew">Andrew</a></td>
            <td>Nesbitt</td>
            <td class="dso-text-left">andrew</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td><a href="#taylor">Taylor</a></td>
            <td>Otwell</td>
            <td class="dso-text-left">taylorotwell</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td><a href="#hugo">Hugo</a></td>
            <td>Giraudel</td>
            <td class="dso-text-left">HugoGiraudel</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
    </tbody>
</table>
<!-- Column Text Centered -->
<table class="table">
    <caption class="sr-only">Overzicht van gebruikersnamen</caption>
    <thead>
        <tr>
            <th scope="col">Nummer</th>
            <th scope="col">Voornaam</th>
            <th scope="col">Achternaam</th>
            <th scope="col" class="dso-text-center">
                GitHub gebruikersnaam
                (kolom gecentreerd)

            </th>
            <th scope="col">Modifier</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td><a href="#fabien">Fabien</a></td>
            <td>Potencier</td>
            <td class="dso-text-center">fabpot</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td><a href="#andrew">Andrew</a></td>
            <td>Nesbitt</td>
            <td class="dso-text-center">andrew</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td><a href="#taylor">Taylor</a></td>
            <td>Otwell</td>
            <td class="dso-text-center">taylorotwell</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td><a href="#hugo">Hugo</a></td>
            <td>Giraudel</td>
            <td class="dso-text-center">HugoGiraudel</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
    </tbody>
</table>
<!-- Column Text Right Aligned -->
<table class="table">
    <caption class="sr-only">Overzicht van gebruikersnamen</caption>
    <thead>
        <tr>
            <th scope="col">Nummer</th>
            <th scope="col">Voornaam</th>
            <th scope="col">Achternaam</th>
            <th scope="col" class="dso-text-right">
                GitHub gebruikersnaam
                (kolom rechts uitgelijnd)

            </th>
            <th scope="col">Modifier</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td><a href="#fabien">Fabien</a></td>
            <td>Potencier</td>
            <td class="dso-text-right">fabpot</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td><a href="#andrew">Andrew</a></td>
            <td>Nesbitt</td>
            <td class="dso-text-right">andrew</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td><a href="#taylor">Taylor</a></td>
            <td>Otwell</td>
            <td class="dso-text-right">taylorotwell</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td><a href="#hugo">Hugo</a></td>
            <td>Giraudel</td>
            <td class="dso-text-right">HugoGiraudel</td>
            <td>
                <code>tr</code>
            </td>
        </tr>
    </tbody>
</table>
<!-- Filtering -->
<div class="dso-table-filter-wrapper">
    <div class="dso-search-bar">
        <div class="dso-search-bar-input">

            <span class="dso-search-icon" aria-hidden="true"></span><input type="text" placeholder="Tabel doorzoeken" />
            <button type="button">
                Zoekopdracht legen
            </button>
        </div>
        <button type="button" class="btn btn-default sr-only">
            Zoeken
        </button>
    </div>

    <table class="table" aria-readonly="true">
        <caption class="sr-only">Overzicht van gebruikersnamen</caption>
        <thead>
            <tr>

                <th scope="col">
                    Nummer
                </th>

                <th scope="col">
                    Bron
                </th>

                <th scope="col">
                    Uitleg
                </th>

            </tr>
        </thead>
        <tbody>

            <tr>

                <th scope="row">1</th>

                <td><a href="#">AQUO</a></td>
                <td>In de Aquo-begrippenset staan begrippen, die worden gebruikt in de watersector.</td>
            </tr>

            <tr>

                <th scope="row">2</th>

                <td><a href="#">BesluitActiviteitenLeefomgeving</a></td>
                <td>Besluit Activiteiten Leefomgeving</td>
            </tr>

            <tr>

                <th scope="row">3</th>

                <td><a href="#">BesluitBouwwerkenLeefomgeving</a></td>
                <td>Besluit Bouwwerken Leefomgeving</td>
            </tr>

        </tbody>
    </table>
</div>
<!-- No Results -->
<div class="dso-table-filter-wrapper">
    <div class="dso-search-bar">
        <div class="dso-search-bar-input">

            <span class="dso-search-icon" aria-hidden="true"></span><input type="text" value="abcdef" />
            <button type="button">
                Zoekopdracht legen
            </button>
        </div>
        <button type="button" class="btn btn-default sr-only">
            Zoeken
        </button>
    </div>

    <table class="table" aria-readonly="true">
        <caption class="sr-only">Overzicht van gebruikersnamen</caption>
        <thead>
            <tr>

                <th scope="col">
                    Nummer
                </th>

                <th scope="col">
                    Bron
                </th>

                <th scope="col">
                    Uitleg
                </th>

            </tr>
        </thead>
        <tbody>

            <tr class="result-error">
                <td colspan="3">Geen resultaten gevonden</td>
            </tr>

        </tbody>
    </table>
</div>
<!-- Sortable Ascending -->
<table class="table" aria-readonly="true">
    <caption class="sr-only">Overzicht bronnen</caption>
    <thead>
        <tr>

            <th scope="col" role="columnheader" aria-sort="ascending">

                <button type="button" class="btn btn-link dso-sort dso-sort-active" aria-roledescription="sorteer oplopend knop"><span>Nummer</span><svg class="di di-sort-ascending">
                        <use href="../../dso-icons.svg#sort-ascending" />
                    </svg></button>

            </th>

            <th scope="col" role="columnheader">

                <button type="button" class="btn btn-link dso-sort" aria-roledescription="sorteer ongesorteerd knop"><span>Bron</span><svg class="di di-sort">
                        <use href="../../dso-icons.svg#sort" />
                    </svg></button>

            </th>

            <th scope="col" role="columnheader">

                <button type="button" class="btn btn-link dso-sort" aria-roledescription="sorteer ongesorteerd knop"><span>Uitleg</span><svg class="di di-sort">
                        <use href="../../dso-icons.svg#sort" />
                    </svg></button>

            </th>

        </tr>
    </thead>
    <tbody>

        <tr>

            <th scope="row">1</th>

            <td><a href="#">Omgevingsbesluit</a></td>
            <td>Omgevingsbesluit</td>
        </tr>

        <tr>

            <th scope="row">2</th>

            <td><a href="#">Omgevingswet</a></td>
            <td>Omgevingswet</td>
        </tr>

        <tr>

            <th scope="row">3</th>

            <td><a href="#">VNGBegrippenkaderGemeenten</a></td>
            <td>Dit is de bron waar alle VNG begrippen op gebaseerd zijn.</td>
        </tr>

        <tr>

            <th scope="row">4</th>

            <td><a href="#">BesluitActiviteitenLeefomgeving</a></td>
            <td>Besluit Activiteiten Leefomgeving</td>
        </tr>

    </tbody>
</table>
<!-- Descending -->
<table class="table" aria-readonly="true">
    <caption class="sr-only">Overzicht bronnen</caption>
    <thead>
        <tr>

            <th scope="col" role="columnheader" aria-sort="descending">

                <button type="button" class="btn btn-link dso-sort dso-sort-active" aria-roledescription="sorteer aflopend knop"><span>Nummer</span><svg class="di di-sort-descending">
                        <use href="../../dso-icons.svg#sort-descending" />
                    </svg></button>

            </th>

            <th scope="col" role="columnheader">

                <button type="button" class="btn btn-link dso-sort" aria-roledescription="sorteer ongesorteerd knop"><span>Bron</span><svg class="di di-sort">
                        <use href="../../dso-icons.svg#sort" />
                    </svg></button>

            </th>

            <th scope="col" role="columnheader">

                <button type="button" class="btn btn-link dso-sort" aria-roledescription="sorteer ongesorteerd knop"><span>Uitleg</span><svg class="di di-sort">
                        <use href="../../dso-icons.svg#sort" />
                    </svg></button>

            </th>

        </tr>
    </thead>
    <tbody>

        <tr>

            <th scope="row">4</th>

            <td><a href="#">BesluitActiviteitenLeefomgeving</a></td>
            <td>Besluit Activiteiten Leefomgeving</td>
        </tr>

        <tr>

            <th scope="row">3</th>

            <td><a href="#">VNGBegrippenkaderGemeenten</a></td>
            <td>Dit is de bron waar alle VNG begrippen op gebaseerd zijn.</td>
        </tr>

        <tr>

            <th scope="row">2</th>

            <td><a href="#">Omgevingswet</a></td>
            <td>Omgevingswet</td>
        </tr>

        <tr>

            <th scope="row">1</th>

            <td><a href="#">Omgevingsbesluit</a></td>
            <td>Omgevingsbesluit</td>
        </tr>

    </tbody>
</table>
{%if filter %}
  <div class="dso-table-filter-wrapper">
    {% render '@search-bar', filter %}
    <table {{ className(modifier) }} aria-readonly="true">
      <caption {{ className([not showCaption, 'sr-only']) }}>{{ caption }}</caption>
      <thead>
        <tr>
          {% for columnHeader in columnHeaders %}
            <th scope="col" {% if columnHeader.sorteerbaar %} role="columnheader" aria-sort="ascending"{% endif %}>
              {{ columnHeader.title }}
            </th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% if resultError %}
          <tr class="result-error">
            <td colspan="{{ cols }}">{{ resultError }}</td>
          </tr>
        {% elif rowContent %}
          {% for content in rowContent %}
            <tr {{ className(content.rowNotification) }}>
              {% if content.rowHeader %}
                <th scope="row">{{ content.rowHeader }}</th>
              {% endif %}
              <td><a href="#">{{ content.bron }}</a></td>
              <td>{{ content.uitleg }}</td>
            </tr>
          {% endfor %}
        {% endif %}
      </tbody>
    </table>
  </div>
{% elif sortable %}
  <table {{ className(modifier) }} aria-readonly="true">
    <caption {{ className([not showCaption, 'sr-only']) }}>{{ caption }}</caption>
    <thead>
      <tr>
        {% for columnHeader in columnHeaders %}
          <th scope="col" role="columnheader"{% if columnHeader.sort === 'ascending' or columnHeader.sort === 'descending' %} aria-sort="{{ sortable }}"{% endif %}>
            {% if columnHeader.sort === 'ascending' %}
              {% render '@button', {type:'button', modifier:'link dso-sort dso-sort-active', label: columnHeader.title, iconAfter:'sort-ascending', roleDescription: 'sorteer oplopend knop'} %}
            {% elif columnHeader.sort === 'descending' %}
              {% render '@button', {type:'button', modifier:'link dso-sort dso-sort-active', label: columnHeader.title, iconAfter:'sort-descending', roleDescription: 'sorteer aflopend knop'} %}
            {% elif columnHeader.sort %}
              {% render '@button', {type:'button', modifier:'link dso-sort', label: columnHeader.title, iconAfter:'sort', roleDescription: 'sorteer ongesorteerd knop'} %}
            {% endif %}
          </th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for content in rowContent %}
        <tr {{ className(content.rowNotification) }}>
          {% if content.rowHeader %}
            <th scope="row">{{ content.rowHeader }}</th>
          {% endif %}
          <td><a href="#">{{ content.bron }}</a></td>
          <td>{{ content.uitleg }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{%else%}
  <table {{ className(modifier) }}>
    <caption {{ className([not showCaption, 'sr-only']) }}>{{ caption }}</caption>
    <thead>
      <tr>
        <th scope="col">Nummer</th>
        <th scope="col">Voornaam</th>
        <th scope="col">Achternaam</th>
        <th scope="col" {{ className(columnAlign) }}>
          GitHub gebruikersnaam 
          {% if columnAlign === 'dso-text-left' %} (kolom links uitgelijnd)
          {% elif columnAlign === 'dso-text-center' %} (kolom gecentreerd)
          {% elif columnAlign === 'dso-text-right' %} (kolom rechts uitgelijnd)
          {% endif %}
          </th>
        <th scope="col">Modifier</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td><a href="#fabien">Fabien</a></td>
        <td>Potencier</td>
        <td {{ className(columnAlign) }}>fabpot</td>
        <td>
          <code>tr</code>
        </td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td><a href="#andrew">Andrew</a></td>
        <td>Nesbitt</td>
        <td {{ className(columnAlign) }}>andrew</td>
        <td>
          <code>tr</code>
        </td>
      </tr>
      <tr {{ className([activeRow, 'active']) }}>
        <th scope="row">3</th>
        <td><a href="#taylor">Taylor</a></td>
        <td>Otwell</td>
        <td {{ className(columnAlign) }}>taylorotwell</td>
        <td>
          <code>tr{% if activeRow %}.active{% endif %}</code>
        </td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td><a href="#hugo">Hugo</a></td>
        <td>Giraudel</td>
        <td {{ className(columnAlign) }}>HugoGiraudel</td>
        <td>
          <code>tr</code>
        </td>
      </tr>
    </tbody>
  </table>
{%endif%}
/* Default */
__title: Default
modifier: table
caption: Overzicht van gebruikersnamen
/* Caption */
__title: With caption
modifier: table
caption: Overzicht van gebruikersnamen
showCaption: true
/* Hovered */
__title: Hovered & Active
modifier: table table-hover
caption: Overzicht van gebruikersnamen
activeRow: true
/* Table Text Left Aligned */
__title: Table text left aligned
modifier: table dso-text-left
caption: Overzicht van gebruikersnamen
/* Table Text Centered */
__title: Table text centered
modifier: table dso-text-center
caption: Overzicht van gebruikersnamen
/* Table Text Right Aligned */
__title: Table text right aligned
modifier: table dso-text-right
caption: Overzicht van gebruikersnamen
/* Column Text Left Aligned */
__title: Column text left aligned
modifier: table
caption: Overzicht van gebruikersnamen
columnAlign: dso-text-left
/* Column Text Centered */
__title: Column text centered
modifier: table
caption: Overzicht van gebruikersnamen
columnAlign: dso-text-center
/* Column Text Right Aligned */
__title: Column text right aligned
modifier: table
caption: Overzicht van gebruikersnamen
columnAlign: dso-text-right
/* Filtering */
__title: Filter
modifier: table
caption: Overzicht van gebruikersnamen
filter:
  icon: true
  placeholder: Tabel doorzoeken
  hideSearchButton: true
columnHeaders:
  - title: Nummer
  - title: Bron
  - title: Uitleg
rowContent:
  - rowHeader: 1
    bron: AQUO
    uitleg: >-
      In de Aquo-begrippenset staan begrippen, die worden gebruikt in de
      watersector.
  - rowHeader: 2
    bron: BesluitActiviteitenLeefomgeving
    uitleg: Besluit Activiteiten Leefomgeving
  - rowHeader: 3
    bron: BesluitBouwwerkenLeefomgeving
    uitleg: Besluit Bouwwerken Leefomgeving
/* No Results */
__title: Filter no results
modifier: table
caption: Overzicht van gebruikersnamen
filter:
  icon: true
  value: abcdef
  hideSearchButton: true
columnHeaders:
  - title: Nummer
  - title: Bron
  - title: Uitleg
resultError: Geen resultaten gevonden
cols: 3
/* Sortable Ascending */
__title: Sortable ascending
modifier: table
caption: Overzicht bronnen
sortable: ascending
columnHeaders:
  - title: Nummer
    sort: ascending
  - title: Bron
    sort: true
  - title: Uitleg
    sort: true
rowContent:
  - rowHeader: 1
    bron: Omgevingsbesluit
    uitleg: Omgevingsbesluit
  - rowHeader: 2
    bron: Omgevingswet
    uitleg: Omgevingswet
  - rowHeader: 3
    bron: VNGBegrippenkaderGemeenten
    uitleg: Dit is de bron waar alle VNG begrippen op gebaseerd zijn.
  - rowHeader: 4
    bron: BesluitActiviteitenLeefomgeving
    uitleg: Besluit Activiteiten Leefomgeving
/* Descending */
__title: Sortable descending
modifier: table
caption: Overzicht bronnen
sortable: descending
columnHeaders:
  - title: Nummer
    sort: descending
  - title: Bron
    sort: true
  - title: Uitleg
    sort: true
rowContent:
  - rowHeader: 4
    bron: BesluitActiviteitenLeefomgeving
    uitleg: Besluit Activiteiten Leefomgeving
  - rowHeader: 3
    bron: VNGBegrippenkaderGemeenten
    uitleg: Dit is de bron waar alle VNG begrippen op gebaseerd zijn.
  - rowHeader: 2
    bron: Omgevingswet
    uitleg: Omgevingswet
  - rowHeader: 1
    bron: Omgevingsbesluit
    uitleg: Omgevingsbesluit