Tabel met actieknoppen

Herhalende content zoals actieknoppen kunnen visueel als iconen weergegeven worden.

Benodigde stappen:

  1. Om gebruik te maken van de visuele actieknop weergave, voeg de class action-button toe aan de button.
  2. Als alle knoppen binnen een tabel weergegeven mogen worden als actieknop kan er ook gebruik gemaakt worden van de class action-buttons direct op de <table>.

Aandachtspunten

  • Omdat niet alle gebruikers weten wat een icoon betekent is het verstandig om een omschrijvende tekst in de header te plaatsen.
  • Voor toegankelijkheid is het belangrijk om de tekst ook toe te voegen aan de knop ook al wordt deze visueel niet getoont. Screenreaders maken hier bijvoorbeeld gebruik van.
  • Voor tabellen met lange lijsten kan het de gebruiker helpen om gebruik te maken van de tabel met sticky header zodat de toelichting van de iconen altijd in beeld blijft. Voor meer informatie zie: tabel met sticky header.

Voorbeelden

Visueel voorbeeld:

Tabelvoorbeeld met actieknoppen:
GebruikersnaamBekijk profielGoedkeurenDeactiveerVerwijder
Jane doe

HTML-voorbeeld:

class op indivuele knoppen

<div class="horizontal-scroll">
  <table>
    <caption>Tabelvoorbeeld met actieknoppen:</caption>
    <thead>
      <tr>
        <th scope="col">Gebruikersnaam</th>
        <th scope="col">Bekijk profiel</th>
        <th scope="col">Goedkeuren</th>
        <th scope="col">Deactiveer</th>
        <th scope="col">Verwijder</th>
      </tr>
    </thead>
    <tbody>
      <tr>
          <td>Jane doe</td>
          <td>
              <form>
                  <button type="submit" class="icon icon-user action-button">Bekijk profiel</button>
              </form>
          </td>
          <td>
              <form>
                  <button type="submit" class="icon icon-check action-button">Goedkeuren</button>
              </form>
          </td>
          <td>
              <form>
                  <button type="submit" class="icon icon-close action-button">Deactiveer</button>
              </form>
          </td>
          <td>
              <form>
                  <button type="submit" class="icon icon-trash action-button">Verwijder</button>
              </form>
          </td>
      </tr>
    </tbody>
  </table>
</div>

class op table

<div class="horizontal-scroll">
  <table class="action-buttons">
    <caption>Tabelvoorbeeld met actieknoppen:</caption>
    <thead>
      <tr>
        <th scope="col">Gebruikersnaam</th>
        <th scope="col">Bekijk profiel</th>
        <th scope="col">Goedkeuren</th>
        <th scope="col">Deactiveer</th>
        <th scope="col">Verwijder</th>
      </tr>
    </thead>
    <tbody>
      <tr>
          <td>Jane doe</td>
          <td>
              <form>
                  <button type="submit">Bekijk profiel</button>
              </form>
          </td>
          <td>
              <form>
                  <button type="submit">Goedkeuren</button>
              </form>
          </td>
          <td>
              <form>
                  <button type="submit">Deactiveer</button>
              </form>
          </td>
          <td>
              <form>
                  <button type="submit">Verwijder</button>
              </form>
          </td>
      </tr>
    </tbody>
  </table>
</div>

Benodigdheden

  • table/table-base.scss
  • table/table-base-variables.scss
  • button/button-base.scss
  • button/button-base-variables.scss
  • icon/icon-base.scss
  • icon/icon-base-variables.scss
  • table/table-action-buttons.scss
  • table/table-action-buttons-variables.scss

Instelbare variabelen