Het <table>
component is gebasseerd op Bootstrap’s Table.
Met de volgende uitzonderingen is de markup identiek aan Bootstrap:
.table-bordered
, .table-condensed
en .table-striped
varianten.tr.primary
en tr.secondary
..table-responsive
functionaliteit is beschikbaar onder .dso-table-responsive
. Zie ook hieronder.success
, info
, warning
en danger
row-modifiers.Zie Bootstrap Table.
Met de class .dso-table-responsive
wordt de tabel responsive wanneer de viewport smaller is dan 768px:
Als het al bekend is dat een tabel in een smalle container wordt geplaatst, zoals in een menu naast een kaart kan de implementator het responsive scroll gedrag forceren met een wrapper div.dso-table-scroll-container
.
Boven de tabel verschijnt de melding beweeg de tabel van links naar rechts
.
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.
<table>
tag<th scope="col">
voor koptitels in de kolommen.<th scope="row">
voor koptitels in de rijen.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
<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
Een data grid is een dynamischere weergave van informatie. Het bevat wel interactieve elementen om de tabel aan te passen.
<table>
tag én ARIA table role="grid"
<th>
om koptitels in header te definiëren.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.<th>
"role=columnheader"
toe.<th>
"role=rowheader"
toe.<th>
aan met aria-sort="ascending"
. Bij aflopende resultaten, gebruik aria-sort="descending"
.aria-sort
.<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
.<th scope="col">
voor koptitels in de kolommen.<th scope="row">
voor koptitels in de rijen.
<!-- 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">
<span class="sr-only">actief</span>
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">
<label for="search-bar--default" class="dso-search-icon">Filteren</label>
<input type="text" id="search-bar--default" placeholder="Tabel doorzoeken" />
</div>
<button type="button" class="btn btn-default sr-only">
Button
</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">
<label for="search-bar--default" class="dso-search-icon">Filteren</label>
<input type="text" id="search-bar--default" value="abcdef" />
</div>
<button type="button" class="btn btn-default sr-only">
Button
</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" aria-roledescription="sorteer oplopend knop" class="btn btn-link dso-sort dso-sort-active"><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" aria-roledescription="sorteer ongesorteerd knop" class="btn btn-link dso-sort"><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" aria-roledescription="sorteer ongesorteerd knop" class="btn btn-link dso-sort"><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" aria-roledescription="sorteer aflopend knop" class="btn btn-link dso-sort dso-sort-active"><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" aria-roledescription="sorteer ongesorteerd knop" class="btn btn-link dso-sort"><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" aria-roledescription="sorteer ongesorteerd knop" class="btn btn-link dso-sort"><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>
<!-- Viewport Responsive -->
<div class="dso-table-responsive">
<table class="table">
<caption class="sr-only">Data overzicht</caption>
<thead>
<tr>
<th scope="col" role="columnheader">
Nummer
</th>
<th scope="col" role="columnheader">
Link
</th>
<th scope="col" role="columnheader">
Beschrijving
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><a href="#">Omgevingsbesluit</a></td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin leo ligula, tempor in tincidunt ac, viverra quis nisi. Integer imperdiet pretium ex sed eleifend. Vestibulum quam turpis, mattis scelerisque ligula ut, aliquam bibendum ex. Aliquam et erat a magna venenatis tempor. Sed euismod pulvinar gravida. Sed eu felis vitae quam lobortis mollis. Etiam congue tristique sapien sed pretium. Vestibulum volutpat eu tortor id dignissim. Fusce eget nisl libero. Duis quis turpis vitae lorem vestibulum luctus sed sed lorem. Phasellus aliquet suscipit ultrices. Suspendisse ullamcorper, eros quis luctus porta, velit sapien egestas nunc, et venenatis sem sapien quis elit. Proin euismod ligula nisi, quis sagittis neque consectetur eget. Sed magna odio, dictum eget efficitur vitae, tempus vel risus. Pellentesque quis ligula id elit pharetra tempus. Cras sit amet lorem non augue lobortis efficitur.</td>
</tr>
<tr>
<th scope="row">2</th>
<td><a href="#">Omgevingswet</a></td>
<td>Pellentesque consequat nibh vel rutrum accumsan. Etiam eu laoreet leo, non eleifend enim. Curabitur non nisi in nisl gravida pellentesque. Donec lacinia turpis a ante sodales, eget feugiat sem fringilla. Aenean ligula mi, elementum sed tellus et, eleifend faucibus velit. Morbi vitae sem quis felis tempor consectetur sit amet nec diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam dolor sem, pretium eget eleifend nec, lacinia ut lacus. Nullam sapien felis, porttitor tincidunt elementum at, pellentesque sit amet orci. Donec ac imperdiet magna, sit amet tempor leo. Nam tincidunt massa erat, eget ultrices risus elementum at.</td>
</tr>
<tr>
<th scope="row">3</th>
<td><a href="#">VNGBegrippenkaderGemeenten</a></td>
<td>Ut luctus purus ac lectus ultrices, id mattis quam pharetra. Nullam at imperdiet tortor. Vestibulum eu cursus nisl, ut porta quam. Ut egestas a ante sit amet varius. Quisque sit amet tempor lorem. In dictum velit dui, vitae cursus erat vulputate sagittis. Vivamus sed dui placerat, scelerisque justo gravida, fermentum turpis. Nulla facilisi. Nunc tristique tellus sed elit viverra condimentum at nec turpis. Praesent imperdiet varius dictum. Maecenas ac rutrum odio.</td>
</tr>
<tr>
<th scope="row">4</th>
<td><a href="#">BesluitActiviteitenLeefomgeving</a></td>
<td>Quisque sed felis enim. Duis et ultricies ex, eu interdum turpis. Duis id aliquam arcu. Ut auctor risus sit amet elit fringilla malesuada. Quisque quis commodo est. Maecenas ac ante id ligula dictum elementum. Vestibulum a justo ipsum. Mauris ut turpis suscipit, pharetra ante ac, lobortis ligula. Vestibulum eget sapien sit amet mauris cursus hendrerit. Etiam fermentum elit eget posuere feugiat. Pellentesque convallis tristique odio, eget laoreet erat dictum a. Cras ac tortor maximus, iaculis libero iaculis, pellentesque sem. Nam pretium, lorem quis scelerisque varius, tortor tellus tincidunt arcu, in lacinia leo nunc at nisl. Integer posuere neque quis luctus blandit.</td>
</tr>
</tbody>
</table>
</div>
<!-- Horizontal Scrolling -->
<div class="dso-table-scroll-container">
<table class="table">
<caption class="sr-only">Data overzicht</caption>
<thead>
<tr>
<th scope="col" role="columnheader">
Nummer
</th>
<th scope="col" role="columnheader">
Link
</th>
<th scope="col" role="columnheader">
Beschrijving
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><a href="#">Omgevingsbesluit</a></td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin leo ligula, tempor in tincidunt ac, viverra quis nisi. Integer imperdiet pretium ex sed eleifend. Vestibulum quam turpis, mattis scelerisque ligula ut, aliquam bibendum ex. Aliquam et erat a magna venenatis tempor. Sed euismod pulvinar gravida. Sed eu felis vitae quam lobortis mollis. Etiam congue tristique sapien sed pretium. Vestibulum volutpat eu tortor id dignissim. Fusce eget nisl libero. Duis quis turpis vitae lorem vestibulum luctus sed sed lorem. Phasellus aliquet suscipit ultrices. Suspendisse ullamcorper, eros quis luctus porta, velit sapien egestas nunc, et venenatis sem sapien quis elit. Proin euismod ligula nisi, quis sagittis neque consectetur eget. Sed magna odio, dictum eget efficitur vitae, tempus vel risus. Pellentesque quis ligula id elit pharetra tempus. Cras sit amet lorem non augue lobortis efficitur.</td>
</tr>
<tr>
<th scope="row">2</th>
<td><a href="#">Omgevingswet</a></td>
<td>Pellentesque consequat nibh vel rutrum accumsan. Etiam eu laoreet leo, non eleifend enim. Curabitur non nisi in nisl gravida pellentesque. Donec lacinia turpis a ante sodales, eget feugiat sem fringilla. Aenean ligula mi, elementum sed tellus et, eleifend faucibus velit. Morbi vitae sem quis felis tempor consectetur sit amet nec diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam dolor sem, pretium eget eleifend nec, lacinia ut lacus. Nullam sapien felis, porttitor tincidunt elementum at, pellentesque sit amet orci. Donec ac imperdiet magna, sit amet tempor leo. Nam tincidunt massa erat, eget ultrices risus elementum at.</td>
</tr>
<tr>
<th scope="row">3</th>
<td><a href="#">VNGBegrippenkaderGemeenten</a></td>
<td>Ut luctus purus ac lectus ultrices, id mattis quam pharetra. Nullam at imperdiet tortor. Vestibulum eu cursus nisl, ut porta quam. Ut egestas a ante sit amet varius. Quisque sit amet tempor lorem. In dictum velit dui, vitae cursus erat vulputate sagittis. Vivamus sed dui placerat, scelerisque justo gravida, fermentum turpis. Nulla facilisi. Nunc tristique tellus sed elit viverra condimentum at nec turpis. Praesent imperdiet varius dictum. Maecenas ac rutrum odio.</td>
</tr>
<tr>
<th scope="row">4</th>
<td><a href="#">BesluitActiviteitenLeefomgeving</a></td>
<td>Quisque sed felis enim. Duis et ultricies ex, eu interdum turpis. Duis id aliquam arcu. Ut auctor risus sit amet elit fringilla malesuada. Quisque quis commodo est. Maecenas ac ante id ligula dictum elementum. Vestibulum a justo ipsum. Mauris ut turpis suscipit, pharetra ante ac, lobortis ligula. Vestibulum eget sapien sit amet mauris cursus hendrerit. Etiam fermentum elit eget posuere feugiat. Pellentesque convallis tristique odio, eget laoreet erat dictum a. Cras ac tortor maximus, iaculis libero iaculis, pellentesque sem. Nam pretium, lorem quis scelerisque varius, tortor tellus tincidunt arcu, in lacinia leo nunc at nisl. Integer posuere neque quis luctus blandit.</td>
</tr>
</tbody>
</table>
</div>
{%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>
{% elif responsiveModifier %}
<div class="{{ responsiveModifier }}">
<table {{ className(modifier) }}>
<caption {{ className([not showCaption, 'sr-only']) }}>{{ caption }}</caption>
<thead>
<tr>
{% for columnHeader in columnHeaders %}
<th scope="col" role="columnheader">
{{ columnHeader.title}}
</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for content in rowContent %}
<tr {{ className(content.rowNotification) }}>
<th scope="row">{{ content.col1 }}</th>
<td><a href="#">{{ content.col2 }}</a></td>
<td>{{ content.col3 }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{%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">
{% if activeRow %}
<span class="sr-only">actief</span>
{% endif %}
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
label: Filteren
hiddenLabel: 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
label: Filteren
hiddenLabel: 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
/* Viewport Responsive */
__title: Viewport responsive
modifier: table
caption: Data overzicht
responsiveModifier: dso-table-responsive
columnHeaders:
- title: Nummer
- title: Link
- title: Beschrijving
rowContent:
- col1: 1
col2: Omgevingsbesluit
col3: >-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin leo ligula,
tempor in tincidunt ac, viverra quis nisi. Integer imperdiet pretium ex
sed eleifend. Vestibulum quam turpis, mattis scelerisque ligula ut,
aliquam bibendum ex. Aliquam et erat a magna venenatis tempor. Sed euismod
pulvinar gravida. Sed eu felis vitae quam lobortis mollis. Etiam congue
tristique sapien sed pretium. Vestibulum volutpat eu tortor id dignissim.
Fusce eget nisl libero. Duis quis turpis vitae lorem vestibulum luctus sed
sed lorem. Phasellus aliquet suscipit ultrices. Suspendisse ullamcorper,
eros quis luctus porta, velit sapien egestas nunc, et venenatis sem sapien
quis elit. Proin euismod ligula nisi, quis sagittis neque consectetur
eget. Sed magna odio, dictum eget efficitur vitae, tempus vel risus.
Pellentesque quis ligula id elit pharetra tempus. Cras sit amet lorem non
augue lobortis efficitur.
- col1: 2
col2: Omgevingswet
col3: >-
Pellentesque consequat nibh vel rutrum accumsan. Etiam eu laoreet leo, non
eleifend enim. Curabitur non nisi in nisl gravida pellentesque. Donec
lacinia turpis a ante sodales, eget feugiat sem fringilla. Aenean ligula
mi, elementum sed tellus et, eleifend faucibus velit. Morbi vitae sem quis
felis tempor consectetur sit amet nec diam. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam dolor
sem, pretium eget eleifend nec, lacinia ut lacus. Nullam sapien felis,
porttitor tincidunt elementum at, pellentesque sit amet orci. Donec ac
imperdiet magna, sit amet tempor leo. Nam tincidunt massa erat, eget
ultrices risus elementum at.
- col1: 3
col2: VNGBegrippenkaderGemeenten
col3: >-
Ut luctus purus ac lectus ultrices, id mattis quam pharetra. Nullam at
imperdiet tortor. Vestibulum eu cursus nisl, ut porta quam. Ut egestas a
ante sit amet varius. Quisque sit amet tempor lorem. In dictum velit dui,
vitae cursus erat vulputate sagittis. Vivamus sed dui placerat,
scelerisque justo gravida, fermentum turpis. Nulla facilisi. Nunc
tristique tellus sed elit viverra condimentum at nec turpis. Praesent
imperdiet varius dictum. Maecenas ac rutrum odio.
- col1: 4
col2: BesluitActiviteitenLeefomgeving
col3: >-
Quisque sed felis enim. Duis et ultricies ex, eu interdum turpis. Duis id
aliquam arcu. Ut auctor risus sit amet elit fringilla malesuada. Quisque
quis commodo est. Maecenas ac ante id ligula dictum elementum. Vestibulum
a justo ipsum. Mauris ut turpis suscipit, pharetra ante ac, lobortis
ligula. Vestibulum eget sapien sit amet mauris cursus hendrerit. Etiam
fermentum elit eget posuere feugiat. Pellentesque convallis tristique
odio, eget laoreet erat dictum a. Cras ac tortor maximus, iaculis libero
iaculis, pellentesque sem. Nam pretium, lorem quis scelerisque varius,
tortor tellus tincidunt arcu, in lacinia leo nunc at nisl. Integer posuere
neque quis luctus blandit.
/* Horizontal Scrolling */
__title: Tabel breder dan zijn container
modifier: table
caption: Data overzicht
responsiveModifier: dso-table-scroll-container
columnHeaders:
- title: Nummer
- title: Link
- title: Beschrijving
rowContent:
- col1: 1
col2: Omgevingsbesluit
col3: >-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin leo ligula,
tempor in tincidunt ac, viverra quis nisi. Integer imperdiet pretium ex
sed eleifend. Vestibulum quam turpis, mattis scelerisque ligula ut,
aliquam bibendum ex. Aliquam et erat a magna venenatis tempor. Sed euismod
pulvinar gravida. Sed eu felis vitae quam lobortis mollis. Etiam congue
tristique sapien sed pretium. Vestibulum volutpat eu tortor id dignissim.
Fusce eget nisl libero. Duis quis turpis vitae lorem vestibulum luctus sed
sed lorem. Phasellus aliquet suscipit ultrices. Suspendisse ullamcorper,
eros quis luctus porta, velit sapien egestas nunc, et venenatis sem sapien
quis elit. Proin euismod ligula nisi, quis sagittis neque consectetur
eget. Sed magna odio, dictum eget efficitur vitae, tempus vel risus.
Pellentesque quis ligula id elit pharetra tempus. Cras sit amet lorem non
augue lobortis efficitur.
- col1: 2
col2: Omgevingswet
col3: >-
Pellentesque consequat nibh vel rutrum accumsan. Etiam eu laoreet leo, non
eleifend enim. Curabitur non nisi in nisl gravida pellentesque. Donec
lacinia turpis a ante sodales, eget feugiat sem fringilla. Aenean ligula
mi, elementum sed tellus et, eleifend faucibus velit. Morbi vitae sem quis
felis tempor consectetur sit amet nec diam. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam dolor
sem, pretium eget eleifend nec, lacinia ut lacus. Nullam sapien felis,
porttitor tincidunt elementum at, pellentesque sit amet orci. Donec ac
imperdiet magna, sit amet tempor leo. Nam tincidunt massa erat, eget
ultrices risus elementum at.
- col1: 3
col2: VNGBegrippenkaderGemeenten
col3: >-
Ut luctus purus ac lectus ultrices, id mattis quam pharetra. Nullam at
imperdiet tortor. Vestibulum eu cursus nisl, ut porta quam. Ut egestas a
ante sit amet varius. Quisque sit amet tempor lorem. In dictum velit dui,
vitae cursus erat vulputate sagittis. Vivamus sed dui placerat,
scelerisque justo gravida, fermentum turpis. Nulla facilisi. Nunc
tristique tellus sed elit viverra condimentum at nec turpis. Praesent
imperdiet varius dictum. Maecenas ac rutrum odio.
- col1: 4
col2: BesluitActiviteitenLeefomgeving
col3: >-
Quisque sed felis enim. Duis et ultricies ex, eu interdum turpis. Duis id
aliquam arcu. Ut auctor risus sit amet elit fringilla malesuada. Quisque
quis commodo est. Maecenas ac ante id ligula dictum elementum. Vestibulum
a justo ipsum. Mauris ut turpis suscipit, pharetra ante ac, lobortis
ligula. Vestibulum eget sapien sit amet mauris cursus hendrerit. Etiam
fermentum elit eget posuere feugiat. Pellentesque convallis tristique
odio, eget laoreet erat dictum a. Cras ac tortor maximus, iaculis libero
iaculis, pellentesque sem. Nam pretium, lorem quis scelerisque varius,
tortor tellus tincidunt arcu, in lacinia leo nunc at nisl. Integer posuere
neque quis luctus blandit.