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:
Gebruikersnaam Bekijk profiel Wijzig wachtwoord Deactiveer Verwijder
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">Wijzig wachtwoord</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-cat action-button">Bekijk profiel</button>
              </form>
          </td>
          <td>
              <form>
                  <button type="submit" class="icon icon-cat action-button">Wijzig wachtwoord</button>
              </form>
          </td>
          <td>
              <form>
                  <button type="submit" class="icon icon-cat action-button">Deactiveer</button>
              </form>
          </td>
          <td>
              <form>
                  <button type="submit" class="icon icon-cat 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">Wijzig wachtwoord</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">Wijzig wachtwoord</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