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 på <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 på <table>

Ekstra kompakt

Tilføj klassen table--extracompact på <table>

Sortering i tabel

Vis dette eksempel i et nyt vindue

<table class="table table--responsive-headers 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>

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

Vis dette eksempel i et nyt vindue

<div class="table--responsive-scroll">
    <table class="table table--selectable" id="selectable-table1">
        <thead>
            <tr>
                <th>
                    <input id="selectable-table1-check-1-all"
                        type="checkbox" class="form-checkbox"
                        aria-controls="selectable-table1-check-1-1 selectable-table1-check-1-2 selectable-table1-check-1-3 selectable-table1-check-1-4" />
                    <label for="selectable-table1-check-1-all"
                        aria-label="Vælg alle rækker"></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-1-1" type="checkbox"
                        name="selectable-table1-check[]"
                        class="form-checkbox" value="Dagrenovation" />
                    <label for="selectable-table1-check-1-1"
                        aria-label="Vælg række"></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-1-2" type="checkbox"
                        name="selectable-table1-check[]"
                        class="form-checkbox"
                        value="Bioaffald og kompost" />
                    <label for="selectable-table1-check-1-2"
                        aria-label="Vælg række"></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-1-3" type="checkbox"
                        name="selectable-table1-check[]"
                        class="form-checkbox" value="Glas" />
                    <label for="selectable-table1-check-1-3"
                        aria-label="Vælg række"></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-1-4" type="checkbox"
                        name="selectable-table1-check[]"
                        class="form-checkbox" value="Elektronik" />
                    <label for="selectable-table1-check-1-4"
                        aria-label="Vælg række"></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

Vis dette eksempel i et nyt vindue

<div class="table--responsive-scroll">
    <table class="table table--selectable" id="selectable-table2">
        <thead>
            <tr>
                <th>
                    <input id="selectable-table2-check-18-all"
                        type="checkbox" class="form-checkbox"
                        aria-controls="selectable-table2-check-18-1 selectable-table2-check-18-2 selectable-table2-check-18-3 selectable-table2-check-18-4" />
                    <label for="selectable-table2-check-18-all"
                        aria-label="Vælg alle rækker"></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-18-1"
                        type="checkbox" name="selectable-table2-check[]"
                        class="form-checkbox" value="Dagrenovation" />
                    <label for="selectable-table2-check-18-1"
                        aria-label="Vælg række"></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-18-2"
                        type="checkbox" name="selectable-table2-check[]"
                        class="form-checkbox"
                        value="Bioaffald og kompost" />
                    <label for="selectable-table2-check-18-2"
                        aria-label="Vælg række"></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-18-3"
                        type="checkbox" name="selectable-table2-check[]"
                        class="form-checkbox" value="Glas" />
                    <label for="selectable-table2-check-18-3"
                        aria-label="Vælg række"></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-18-4"
                        type="checkbox" name="selectable-table2-check[]"
                        class="form-checkbox" value="Elektronik" />
                    <label for="selectable-table2-check-18-4"
                        aria-label="Vælg række"></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" focusable="false" aria-hidden="true"><use xlink:href="#file-download"></use></svg>
            Download
        </button>

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

        <button class="button button-secondary">
            <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#delete"></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 tjekbox ændrer tilstand i tabellen vil eventet `fds.table.selectable.updated` blive udløst på `<table>` elementet