Kode

Tabeller

Uden ramme
Zebralinjer
Responsiv
Scroll
Linjehøjde
Sortering i tabel
Valgbare rækker

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

<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

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-18-all"
                        type="checkbox" class="form-checkbox"
                        aria-controls=" selectable-table1-check-18-1 selectable-table1-check-18-2 selectable-table1-check-18-3 selectable-table1-check-18-4">
                    <label for="selectable-table1-check-18-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-18-1"
                        type="checkbox" name="selectable-table1-check[]"
                        class="form-checkbox" value="Dagrenovation">
                    <label for="selectable-table1-check-18-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-18-2"
                        type="checkbox" name="selectable-table1-check[]"
                        class="form-checkbox" value="Bioaffald og kompost">
                    <label for="selectable-table1-check-18-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-18-3"
                        type="checkbox" name="selectable-table1-check[]"
                        class="form-checkbox" value="Glas">
                    <label for="selectable-table1-check-18-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-18-4"
                        type="checkbox" name="selectable-table1-check[]"
                        class="form-checkbox" value="Elektronik">
                    <label for="selectable-table1-check-18-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

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-11-all"
                        type="checkbox" class="form-checkbox"
                        aria-controls=" selectable-table2-check-11-1 selectable-table2-check-11-2 selectable-table2-check-11-3 selectable-table2-check-11-4">
                    <label for="selectable-table2-check-11-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-11-1"
                        type="checkbox" name="selectable-table2-check[]"
                        class="form-checkbox" value="Dagrenovation">
                    <label for="selectable-table2-check-11-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-11-2"
                        type="checkbox" name="selectable-table2-check[]"
                        class="form-checkbox" value="Bioaffald og kompost">
                    <label for="selectable-table2-check-11-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-11-3"
                        type="checkbox" name="selectable-table2-check[]"
                        class="form-checkbox" value="Glas">
                    <label for="selectable-table2-check-11-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-11-4"
                        type="checkbox" name="selectable-table2-check[]"
                        class="form-checkbox" value="Elektronik">
                    <label for="selectable-table2-check-11-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();

Sprog

Hvis du ønsker at anvende et andet sprog end dansk i JavaScript-koden for tabeller med valgbare rækker, skal du selv give din oversættelse med og derefter initiere komponenten manuelt. Husk at opdatere værdien i attributten “lang” i din sides html-tag.

new DKFDS.TableSelectableRows(document.getElementById('TABLE-ID'), {
  "select_row": "Vælg række",
  "unselect_row": "Fravælg række",
  "select_all_rows": "Vælg alle rækker",
  "unselect_all_rows": "Fravælg alle rækker"
}).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