Sticky header

Introductie

Voor lange tabellen kan het gewenst zijn om de tabel-header in het zicht te houden zodat de gebruiker de titels kan zien.

Snelstart

SCSS importeren:

    
      
    
    @use "@minvws/manon/components/table";
@use "@minvws/manon/components/sticky-header";
  

Benodigde stappen

1. Voeg de class sticky-header toe aan een div om de table heen. Deze is div is nodig om de table scrollbaar te maken.
2. Een sticky-header-tabel heeft een maximale hoogte van de schermhoogte. Mocht er een andere maximale hoogte gewenst zijn zodat de tabel bijvooreeld minder hoog blijft kan deze via het variabelenbestand overschreven worden.

Voorbeelden

    
      
    
    <div class="horizontal-scroll sticky-header">
  <table>
    <caption>
      Tabelvoorbeeld met een sticky header.
    </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 sit</td>
      </tr>
    </tbody>
  </table>
</div>