Gecomprimeerde weergave

Voor het tonen van grote datasets kan het voor de gebruiksvriendelijkheid fijner zijn om de data gecomprimeerd weer te geven zodat het makkelijker is voor de gebruiker om overzicht te houden.

Benodigde stappen:

1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Benodigdheden. Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen
2. Voeg de class condensed toe op de table.

Voorbeelden

Visueel voorbeeld:

In dit voorbeeld staat dat de <th> binnen de <thead> over de data in de kolommen gaan. En de <th> binnen de <tbody> over de data per rij gaan.

HTML-voorbeeld:

<div class="horizontal-scroll">
  <table class="condensed">
    <caption>Simple table example:</caption>
    <thead>
      <tr>
        <th scope="col">Table header heading 1</th>
        <th scope="col">Table header heading 2</th>
        <th scope="col">Table header heading 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
    </tbody>
  </table>
</div>

Benodigdheden

• table/table-base.scss
• table/table-base-variables.scss
• table/table-condensed.scss
• table/table-condensed-variables.scss

Instelbare variabelen

Dit component heeft momenteel geen instelbare variabelen

Gerelateerde pagina's