Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Kode

Tabeller

Affaldstype Farvekode Beskrivelse Hvor ender det?
Dagrenovation Grøn Madaffald, samt papir, pap eller plastik der ikke kan genanvendes, fordi der er madrester eller andet snask på. Alt det affald, du smider ud i din primære skraldespand, som er dagrenovationen, bliver hentet og kørt på forbrændingen.
Bioaffald og kompost Beige Alt madaffald uden fødevareemballage. Bioaffaldet kommes i bionedbrydelige poser, som bliver komposteret til muld.
Glas Hvid Alle typer glas og flasker. De hele vinflasker rengøres og genbruges af vinhuse, mens glasskårene bliver smeltet om til nyt glas.
Elektronik Orange Genstande der har brugt strøm. Det elektroniske affald bliver typisk kørt til et demonteringsanlæg, hvor det bliver skilt ad, så de forskellige dele kan genanvendes separat.

Eksempler og retningslinjer

Installation

HTML Struktur

<div class="table--responsive-scroll">
      <table class="table">
          <thead>
              <tr>
                  <th>Affaldstype</th>
                  <th>Farvekode</th>
                  <th>Beskrivelse</th>
                  <th>Hvor ender det?</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>Dagrenovation</td>
                  <td>Grøn</td>
                  <td>Madaffald, samt papir, pap eller plastik der ikke kan
                      genanvendes, fordi der er madrester eller andet snask
                      på.</td>
                  <td>Alt det affald, du smider ud i din primære
                      skraldespand, som er dagrenovationen, bliver hentet
                      og kørt på forbrændingen. </td>
              </tr>
              <tr>
                  <td>Bioaffald og kompost</td>
                  <td>Beige</td>
                  <td>Alt madaffald uden fødevareemballage.</td>
                  <td>Bioaffaldet kommes i bionedbrydelige poser, som
                      bliver komposteret til muld.</td>
              </tr>
              <tr>
                  <td>Glas</td>
                  <td>Hvid</td>
                  <td>Alle typer glas og flasker.</td>
                  <td>De hele vinflasker rengøres og genbruges af vinhuse,
                      mens glasskårene bliver smeltet om til nyt glas.</td>
              </tr>
              <tr>
                  <td>Elektronik</td>
                  <td>Orange</td>
                  <td>Genstande der har brugt strøm.</td>
                  <td>Det elektroniske affald bliver typisk kørt til et
                      demonteringsanlæg, hvor det bliver skilt ad, så de
                      forskellige dele kan genanvendes separat.</td>
              </tr>
          </tbody>
      </table>
  </div>

Man kan gøre brug af hjælpeklasser til at definere bredde på kolonner.

Tilgængelighed

Tabeller i Det Fælles Designsystem overholder HTML standarden, men du skal selv tilføje scope=col eller scope=row til hver header celle th

Hvis du konstruerer en såkaldt kompleks tabel – en tabel med flere header-niveauer - skal hver header have tilføjet et unikt id (fx id=header-eksempel) og hver celle tilføjes en header-attribut med den relevante og tilknyttede tabel header’s id angivet (fx header=header-eksempel).

Når du tilføjer en titel til en tabel, skal du skrive den i caption indenfor table-elementet.

Javascript

Man kan sætte de korrekte attributter automatisk, hvis man ønsker en responsiv tabel. Man kan enten gøre brug af DKFDS.init() eller initiere komponenten manuelt med nedenstående:

new DKFDS.ResponsiveTable(document.getElementById('TABLE-ID'));

Varianter

Uden ramme

For at fjerne den yderste ramme tilføj klassen table--borderless til <table>.

Zebralinjer

Man kan sætte zebralinjer på en tabel med klassen table--zebra<table>.

Responsiv tabel

Tilføj en af nedenstående klasser:

  • table-sm-responsive-headers
  • table-md-responsive-headers
  • table-lg-responsive-headers

Indsæt den klasse der passer til mængden af kolonner i din tabel. Klasserne ændrer tabellens udseende i forskellige breakpoints.

Attributten data-title bør tilføjes til hver <td>, således at en label bliver tilføjet for hver celle på mindre skærme.

Attributten kan sættes automatisk ved brug af JavaScript.

<tr>
    <td data-title="Affaldstype">Bioaffald og kompost</td>
    <td data-title="Farvekode">Beige</td>
    <td data-title="Beskrivelse">Alt madaffald uden fødevareemballage.</td>
    <td data-title="Hvor ender det?">Bioaffaldet kommes i bionedbrydelige poser, som bliver komposteret til muld.</td>
</tr>

Scroll på tabel

En tabel er som udgangspunkt ikke responsiv, men man kan gøre den responsiv til en vis grad ved at tilføje vandret scroll.

Sæt <table> elementet i en <div>, som har klassen table--responsive-scroll.

Linjehøjde

Kompakt

Tilføj klassen table--compact<table>

Ekstra kompakt

Tilføj klassen table--extracompact<table>

Sortering i tabel

<div class="table--responsive-scroll">
    <table class="table mt-6" id="sortingTable">
        <thead>
            <tr>
                <th aria-sort="ascending" class="table-header-no-wrap">
                    Affaldstype<button id="btn-sort-by-affaldstype"
                        class="button button-unstyled ml-2"><svg class="icon-svg mr-0" focusable="false" aria-hidden="true"><use href="#sort-table-ascending"></use></svg><span
                            class="sr-only">Sortér efter
                            affaldstype</span></button></th>
                <th aria-sort="none" class="table-header-no-wrap">
                    Farvekode<button id="btn-sort-by-farvekode"
                        class="button button-unstyled ml-2"><svg class="icon-svg mr-0" focusable="false" aria-hidden="true"><use href="#sort-table-none"></use></svg><span
                            class="sr-only">Sortér efter
                            farvekode</span></button></th>
                <th aria-sort="none">Beskrivelse</th>
                <th aria-sort="none">Hvor ender det?</th>
            </tr>
        </thead>
        <tbody aria-live="polite">
            <tr>
                <td data-title="Affaldstype">Bioaffald og kompost</td>
                <td data-title="Farvekode">Beige</td>
                <td data-title="Beskrivelse">Alt madaffald uden
                    fødevareemballage.</td>
                <td data-title="Hvor ender det?">Bioaffaldet kommes i
                    bionedbrydelige poser, som bliver komposteret til muld.
                </td>
            </tr>
            <tr>
                <td data-title="Affaldstype">Dagrenovation</td>
                <td data-title="Farvekode">Grøn</td>
                <td data-title="Beskrivelse">Madaffald, samt papir, pap
                    eller plastik der ikke kan genanvendes, fordi der er
                    madrester eller andet snask på.</td>
                <td data-title="Hvor ender det?">Alt det affald, du smider
                    ud i din primære skraldespand, som er dagrenovationen,
                    bliver hentet og kørt på forbrændingen. </td>
            </tr>
            <tr>
                <td data-title="Affaldstype">Elektronik</td>
                <td data-title="Farvekode">Orange</td>
                <td data-title="Beskrivelse">Genstande der har brugt strøm.
                </td>
                <td data-title="Hvor ender det?">Det elektroniske affald
                    bliver typisk kørt til et demonteringsanlæg, hvor det
                    bliver skilt ad, så de forskellige dele kan genanvendes
                    separat.</td>
            </tr>
            <tr>
                <td data-title="Affaldstype">Glas</td>
                <td data-title="Farvekode">Hvid</td>
                <td data-title="Beskrivelse">Alle typer glas og flasker.
                </td>
                <td data-title="Hvor ender det?">De hele vinflasker
                    rengøres og genbruges af vinhuse, mens glasskårene
                    bliver smeltet om til nyt glas.</td>
            </tr>
        </tbody>
    </table>
</div>

Eksemplet er fuldt funktionelt, men funktionaliteten følger ikke med i FDS koden. Man skal derfor selv bygge sorteringsfunktionen ved tryk på diverse knapper. Eksemplet viser, hvordan HTML tilpasses ved ændring af sortering.

Valgbare rækker

<div class="table--responsive-scroll">
    <table class="table table--selectable" id="selectable-table1">
        <thead>
            <tr>
                <th>
                    <input id="selectable-table1-check-33-all"
                        type="checkbox" class="form-checkbox"
                        aria-controls=" selectable-table1-check-33-1 selectable-table1-check-33-2 selectable-table1-check-33-3 selectable-table1-check-33-4">
                    <label for="selectable-table1-check-33-all"
                        aria-label="Vælg alle rækker"><span
                            class="sr-only">Vælg alle rækker</span></label>
                </th>
                <th>Affaldstype</th>

                <th>Farvekode</th>

                <th>Beskrivelse</th>

                <th>Hvor ender det?</th>

            </tr>
        </thead>

        <tbody>

            <tr>
                <td><input id="selectable-table1-check-33-1"
                        type="checkbox" name="selectable-table1-check[]"
                        class="form-checkbox" value="Dagrenovation">
                    <label for="selectable-table1-check-33-1"
                        aria-label="Vælg række"><span class="sr-only">Vælg
                            række</span></label>
                </td>
                <td>Dagrenovation</td>

                <td>Grøn</td>

                <td>Madaffald, samt papir, pap eller plastik der ikke kan
                    genanvendes, fordi der er madrester eller andet snask
                    på.</td>

                <td>Alt det affald, du smider ud i din primære
                    skraldespand, som er dagrenovationen, bliver hentet og
                    kørt på forbrændingen.</td>

            </tr>

            <tr>
                <td><input id="selectable-table1-check-33-2"
                        type="checkbox" name="selectable-table1-check[]"
                        class="form-checkbox" value="Bioaffald og kompost">
                    <label for="selectable-table1-check-33-2"
                        aria-label="Vælg række"><span class="sr-only">Vælg
                            række</span></label>
                </td>
                <td>Bioaffald og kompost</td>

                <td>Beige</td>

                <td>Alt madaffald uden fødevareemballage.</td>

                <td>Bioaffaldet kommes i bionedbrydelige poser, som bliver
                    komposteret til muld.</td>

            </tr>

            <tr>
                <td><input id="selectable-table1-check-33-3"
                        type="checkbox" name="selectable-table1-check[]"
                        class="form-checkbox" value="Glas">
                    <label for="selectable-table1-check-33-3"
                        aria-label="Vælg række"><span class="sr-only">Vælg
                            række</span></label>
                </td>
                <td>Glas</td>

                <td>Hvid</td>

                <td>Alle typer glas og flasker.</td>

                <td>De hele vinflasker rengøres og genbruges af vinhuse,
                    mens glasskårene bliver smeltet om til nyt glas.</td>

            </tr>

            <tr>
                <td><input id="selectable-table1-check-33-4"
                        type="checkbox" name="selectable-table1-check[]"
                        class="form-checkbox" value="Elektronik">
                    <label for="selectable-table1-check-33-4"
                        aria-label="Vælg række"><span class="sr-only">Vælg
                            række</span></label>
                </td>
                <td>Elektronik</td>

                <td>Orange</td>

                <td>Genstande der har brugt strøm.</td>

                <td>Det elektroniske affald bliver typisk kørt til et
                    demonteringsanlæg, hvor det bliver skilt ad, så de
                    forskellige dele kan genanvendes separat.</td>

            </tr>

        </tbody>
    </table>
</div>

Valgbare rækker med funktionsknapper

<div class="table--responsive-scroll">
    <table class="table table--selectable" id="selectable-table2">
        <thead>
            <tr>
                <th>
                    <input id="selectable-table2-check-4-all"
                        type="checkbox" class="form-checkbox"
                        aria-controls=" selectable-table2-check-4-1 selectable-table2-check-4-2 selectable-table2-check-4-3 selectable-table2-check-4-4">
                    <label for="selectable-table2-check-4-all"
                        aria-label="Vælg alle rækker"><span
                            class="sr-only">Vælg alle rækker</span></label>
                </th>
                <th>Affaldstype</th>

                <th>Farvekode</th>

                <th>Beskrivelse</th>

                <th>Hvor ender det?</th>

            </tr>
        </thead>

        <tbody>

            <tr>
                <td><input id="selectable-table2-check-4-1" type="checkbox"
                        name="selectable-table2-check[]"
                        class="form-checkbox" value="Dagrenovation">
                    <label for="selectable-table2-check-4-1"
                        aria-label="Vælg række"><span class="sr-only">Vælg
                            række</span></label>
                </td>
                <td>Dagrenovation</td>

                <td>Grøn</td>

                <td>Madaffald, samt papir, pap eller plastik der ikke kan
                    genanvendes, fordi der er madrester eller andet snask
                    på.</td>

                <td>Alt det affald, du smider ud i din primære
                    skraldespand, som er dagrenovationen, bliver hentet og
                    kørt på forbrændingen.</td>

            </tr>

            <tr>
                <td><input id="selectable-table2-check-4-2" type="checkbox"
                        name="selectable-table2-check[]"
                        class="form-checkbox" value="Bioaffald og kompost">
                    <label for="selectable-table2-check-4-2"
                        aria-label="Vælg række"><span class="sr-only">Vælg
                            række</span></label>
                </td>
                <td>Bioaffald og kompost</td>

                <td>Beige</td>

                <td>Alt madaffald uden fødevareemballage.</td>

                <td>Bioaffaldet kommes i bionedbrydelige poser, som bliver
                    komposteret til muld.</td>

            </tr>

            <tr>
                <td><input id="selectable-table2-check-4-3" type="checkbox"
                        name="selectable-table2-check[]"
                        class="form-checkbox" value="Glas">
                    <label for="selectable-table2-check-4-3"
                        aria-label="Vælg række"><span class="sr-only">Vælg
                            række</span></label>
                </td>
                <td>Glas</td>

                <td>Hvid</td>

                <td>Alle typer glas og flasker.</td>

                <td>De hele vinflasker rengøres og genbruges af vinhuse,
                    mens glasskårene bliver smeltet om til nyt glas.</td>

            </tr>

            <tr>
                <td><input id="selectable-table2-check-4-4" type="checkbox"
                        name="selectable-table2-check[]"
                        class="form-checkbox" value="Elektronik">
                    <label for="selectable-table2-check-4-4"
                        aria-label="Vælg række"><span class="sr-only">Vælg
                            række</span></label>
                </td>
                <td>Elektronik</td>

                <td>Orange</td>

                <td>Genstande der har brugt strøm.</td>

                <td>Det elektroniske affald bliver typisk kørt til et
                    demonteringsanlæg, hvor det bliver skilt ad, så de
                    forskellige dele kan genanvendes separat.</td>

            </tr>

        </tbody>
    </table>

    <div class="table-actions">
        <p class="table-selected-number no-selected">Vælg en eller flere
            rækker for at udføre funktioner</p>

        <button class="button button-primary">
            <svg class="icon-svg" aria-hidden="true"><use xlink:href="#file-download"></use></svg>
            Download
        </button>

        <button class="button button-secondary">
            <svg class="icon-svg" aria-hidden="true"><use xlink:href="#content-copy"></use></svg>
            Duplikér
        </button>

        <button class="button button-secondary">
            <svg class="icon-svg" aria-hidden="true"><use xlink:href="#trash-can"></use></svg>
            Slet
        </button>

    </div>
</div>

Javascript

Tabel med valgbare rækker kræver JavaScript for at fungere. Man kan enten gøre brug af DKFDS.init() eller initiere komponenten manuelt med nedenstående:

new DKFDS.TableSelectableRows(document.getElementById('TABLE-ID')).init();
Events
Event key Element Beskrivelse
fds.table.selectable.updated <table> Når en tjekboks ændrer tilstand i tabellen vil eventet fds.table.selectable.updated blive udløst på <table> elementet