DSO Toolkit | Component Library

Table Sortable Readonly 

<div class="dso-example-wrapper">
    <div class="dso-example-text">
        <h2>Sorteerbare data-grid</h2>
        <p>In het voorbeeld hieronder is de data is oplopend gesorteerd voor de kolom "Bron". Dit wordt aangeduid met <code>role=columnheader"</code> en <code>aria-sort="ascending"</code>. Daarnaast is de data niet aanpasbaar in dit voorbeeld. Zodoende wordt ook <code>aria-readonly="true"</code> gebruikt.</p>
    </div>
    <table class="table" role="grid" aria-readonly="true">
        <caption class="sr-only">Overzicht bronnen</caption>
        <thead>
            <tr role="row">
                <th scope="col" role="columnheader" aria-sort="ascending">
                    Bron
                    <button type="button" title="Sorteer" class="btn btn-link">
                        <span class="sr-only">Sorteer</span><svg class="di di-sort">
                            <use href="../../dso-icons.svg#sort" />
                        </svg>
                    </button>
                </th>
                <th scope="col">
                    Uitleg
                </th>
            </tr>
        </thead>
        <tbody>
            <tr role="row">
                <td><a href="#">AQUO</a></td>
                <td>In de Aquo-begrippenset staan begrippen, die worden gebruikt in de watersector.</td>
            </tr>
            <tr role="row">
                <td><a href="#">BesluitActiviteitenLeefomgeving</a></td>
                <td>Besluit Activiteiten Leefomgeving</td>
            </tr>
            <tr role="row">
                <td><a href="#">BesluitBouwwerkenLeefomgeving</a></td>
                <td>Besluit Bouwwerken Leefomgeving</td>
            </tr>
            <tr role="row">
                <td><a href="#">BesluitKwaliteitLeefomgeving</a></td>
                <td>Besluit Kwaliteit Leefomgeving</td>
            </tr>
            <tr role="row">
                <td><a href="#">Omgevingsbesluit</a></td>
                <td>Omgevingsbesluit</td>
            </tr>
            <tr role="row">
                <td><a href="#">Omgevingswet</a></td>
                <td>Omgevingswet</td>
            </tr>
            <tr role="row">
                <td><a href="#">VNGBegrippenkaderGemeenten</a></td>
                <td>Dit is de bron waar alle VNG begrippen op gebaseerd zijn.</td>
            </tr>
        </tbody>
    </table>
</div>
 
<div class="dso-example-wrapper">
  <div class="dso-example-text">
    <h2>Sorteerbare data-grid</h2>
    <p>In het voorbeeld hieronder is de data is oplopend gesorteerd voor de kolom "Bron". Dit wordt aangeduid met <code>role=columnheader"</code> en <code>aria-sort="ascending"</code>. Daarnaast is de data niet aanpasbaar in dit voorbeeld. Zodoende wordt ook <code>aria-readonly="true"</code> gebruikt.</p>
  </div>
  <table {{#if modifier}} class="{{modifier}}"{{/if}} role="grid" aria-readonly="true">
    <caption {{#unless showCaption}} class="sr-only"{{/unless}}>{{ caption }}</caption>
    <thead>
      <tr role="row">
        {{#each columnHeaders}}
        <th scope="col" {{#if sorteerbaar}} role="columnheader" aria-sort="ascending"{{/if}}>
          {{title}}
          {{#if sorteerbaar}}
          {{> '@button' type='button' modifier='link' label='Sorteer' icon='sort' iconOnly=true }}
          {{/if}}
        </th>
        {{/each}}
      </tr>
    </thead>
    <tbody>
      {{#each rowContent}}
      <tr {{#if rowNotification}} class="{{rowNotification}}"{{/if}} role="row">
        {{#if rowHeader}}
        <th scope="row">{{rowHeader}}</th>
        {{/if}}
        <td><a href="#">{{bron}}</a></td>
        <td>{{uitleg}}</td>
      </tr>
      {{/each}}
    </tbody>
  </table>
</div>
 
modifier: table
caption: Overzicht bronnen
columnHeaders:
  - title: Bron
    sorteerbaar: true
  - title: Uitleg
rowContent:
  - bron: AQUO
    uitleg: >-
      In de Aquo-begrippenset staan begrippen, die worden gebruikt in de
      watersector.
  - bron: BesluitActiviteitenLeefomgeving
    uitleg: Besluit Activiteiten Leefomgeving
  - bron: BesluitBouwwerkenLeefomgeving
    uitleg: Besluit Bouwwerken Leefomgeving
  - bron: BesluitKwaliteitLeefomgeving
    uitleg: Besluit Kwaliteit Leefomgeving
  - bron: Omgevingsbesluit
    uitleg: Omgevingsbesluit
  - bron: Omgevingswet
    uitleg: Omgevingswet
  - bron: VNGBegrippenkaderGemeenten
    uitleg: Dit is de bron waar alle VNG begrippen op gebaseerd zijn.
  • Handle: @table-sortable-readonly
  • Preview:
  • Filesystem Path: components/_previews/_table-sortable-readonly/_table-sortable-readonly.hbs
  • References (1): @button

There are no notes for this item.