Gå til sidens indhold
Det Fælles Designsystem

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

Åbn dette eksempel i et nyt vindue: table
Eksempel på tabel
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

Kodeeksempel
<div class="table--responsive-scroll">
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Affaldstype</th>
                <th scope="col">Farvekode</th>
                <th scope="col">Beskrivelse</th>
                <th scope="col">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ælpeklassen for bredde i procent til at definere bredde på kolonner.

Brug klassen table-header-no-wrap på th-elementet inde i thead, hvis du ikke ønsker, at en header skal kunne ombrydes til flere linjer.

Brug klasserne vertical-align-top, vertical-align-middle og vertical-align-bottom på enten <th> eller <td> til at ændre den vertikale placering af indholdet i en celle i toppen, midten eller bunden.

Horisontalt scroll

Tabeller er som udgangspunkt sat ind i en <div>, der har klassen table--responsive-scroll, hvilket gør at tabellen kan scrolles vandret, hvis den bliver for smal. Hvis man ikke ønsker, at dette skal være muligt, kan man undlade denne <div>.

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

En tabel gøres responsiv ved at tilføje klassen table--responsive-headers til <table>. Responsive tabeller ændrer som standard udseende ved breakpoint sm, men hvis du har mange kolonner i din tabel, kan det give mening at anvende et andet breakpoint.

Hvis din tabel indeholder værdier, der kræver mere end ca. 290 pixels i bredden for at blive vist, bør du undlade at gøre den responsiv og i stedet anvende horisontalt scroll - tjek eventuelt om din responsive tabel kan vises pænt, når skærmstørrelsen er 320 pixels i bredden, uden at indholdet ryger ud over kanten.

Du kan anvende en af nedenstående klasser for at ændre, ved hvilket breakpoint tabellens udseende skal ændres:

  • table-sm-responsive-headers (svarer til table--responsive-headers)
  • table-md-responsive-headers
  • table-lg-responsive-headers

Udover at tilføje en klasse, skal attributten data-title tilføjes til hver <td>, hvilket gør at en label bliver tilføjet for hver celle på mindre skærme.

<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>

Attributten kan sættes automatisk ved brug af JavaScript.

Bemærk, at tabeller med sortering og tabeller med valgbare rækker ikke har en responsiv version.

JavaScript for responsive tabeller

Anvendes til at 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'));

Linjehøjde

Kompakt

Tilføj klassen table--compact på <table>.

Ekstra kompakt

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

Sortering i tabel

Se nedenstående eksempels HTML for, hvilke klasser, attributter og knapper, der skal sættes på hhv. <th> og <tbody>.

Der følger ikke JavaScript med til sortering i tabeller og man skal derfor selv håndtere funktionaliteten. Nedenstående eksempel er dog gjort funktionelt som demonstration.

Vis dette eksempel i et nyt vindue: table-sort
Kodeeksempel
<div class="table--responsive-scroll">
    <table class="table" id="sortingTable">
        <thead>
            <tr>
                <th scope="col" class="table-header-no-wrap" aria-sort="ascending">
                    Affaldstype<button class="button button-unstyled ml-2"
                        id="btn-sort-by-affaldstype" type="button">
                        <svg class="icon-svg mr-0" focusable="false" aria-hidden="true"><use xlink:href="#sort-table-ascending"></use></svg>
                        <span class="sr-only">Sortér efter Affaldstype</span>
                    </button></th>
                <th scope="col" class="table-header-no-wrap">Farvekode
                    <button class="button button-unstyled ml-2" id="btn-sort-by-farvekode"
                        type="button">
                        <svg class="icon-svg mr-0" focusable="false" aria-hidden="true"><use xlink:href="#sort-table-none"></use></svg>
                        <span class="sr-only">Sortér efter Farvekode</span>
                    </button>
                </th>
                <th scope="col">Beskrivelse</th>
                <th scope="col">Hvor ender det?</th>
            </tr>
        </thead>
        <tbody aria-live="polite">
            <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>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>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>
            <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>
        </tbody>
    </table>
</div>

Søgning i tabeller

Anvend søgefeltkomponenten sammen med din tabel og tilføj aria-live="polite" til <table>.

Der følger ikke JavaScript med til søgning i tabeller og man skal derfor selv håndtere funktionaliteten. Nedenstående eksempel er dog gjort funktionelt som demonstration.

Vis dette eksempel i et nyt vindue: table-search
Kodeeksempel
<form novalidate method="get" id="formSearchTable">
    <div class="form-group search">
        <label for="inputSearchTable" class="sr-only">Søg efter indhold</label>
        <input class="form-input input-char-27" id="inputSearchTable" name="searchtable"
            type="search">
        <button class="button button-search" id="btnSearchTable" type="submit">
            Søg
        </button>
    </div>
</form>

<div class="table--responsive-scroll mt-4">
    <table class="table" id="searchTable" aria-live="polite">
        <thead>
            <tr>
                <th scope="col">Affaldstype</th>
                <th scope="col">Farvekode</th>
                <th scope="col">Beskrivelse</th>
                <th scope="col">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>

Valgbare rækker

Vis dette eksempel i et nyt vindue: table-selectable
Kodeeksempel
<div class="table--responsive-scroll">
    <table class="table table--selectable" id="selectable-table1">
        <thead>
            <tr>
                <th>
                    <input id="selectable-table1-check-all" type="checkbox"
                        class="form-checkbox"
                        aria-controls=" selectable-table1-check-1 selectable-table1-check-2 selectable-table1-check-3 selectable-table1-check-4">
                    <label for="selectable-table1-check-all"><span class="sr-only">Vælg alle
                            rækker</span></label>
                </th>
                <th scope="col">Affaldstype</th>
                <th scope="col">Farvekode</th>
                <th scope="col">Beskrivelse</th>
                <th scope="col">Hvor ender det?</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input id="selectable-table1-check-1" type="checkbox"
                        name="selectable-table1-check[]" class="form-checkbox"
                        value="Dagrenovation">
                    <label for="selectable-table1-check-1"><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-2" type="checkbox"
                        name="selectable-table1-check[]" class="form-checkbox"
                        value="Bioaffald og kompost">
                    <label for="selectable-table1-check-2"><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-3" type="checkbox"
                        name="selectable-table1-check[]" class="form-checkbox" value="Glas">
                    <label for="selectable-table1-check-3"><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-4" type="checkbox"
                        name="selectable-table1-check[]" class="form-checkbox"
                        value="Elektronik">
                    <label for="selectable-table1-check-4"><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: table-selectable-functions
Kodeeksempel
<div class="table--responsive-scroll">
    <table class="table table--selectable" id="selectable-table2">
        <thead>
            <tr>
                <th>
                    <input id="selectable-table2-check-all" type="checkbox"
                        class="form-checkbox"
                        aria-controls=" selectable-table2-check-1 selectable-table2-check-2 selectable-table2-check-3 selectable-table2-check-4">
                    <label for="selectable-table2-check-all"><span class="sr-only">Vælg alle
                            rækker</span></label>
                </th>
                <th scope="col">Affaldstype</th>
                <th scope="col">Farvekode</th>
                <th scope="col">Beskrivelse</th>
                <th scope="col">Hvor ender det?</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input id="selectable-table2-check-1" type="checkbox"
                        name="selectable-table2-check[]" class="form-checkbox"
                        value="Dagrenovation">
                    <label for="selectable-table2-check-1"><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-2" type="checkbox"
                        name="selectable-table2-check[]" class="form-checkbox"
                        value="Bioaffald og kompost">
                    <label for="selectable-table2-check-2"><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-3" type="checkbox"
                        name="selectable-table2-check[]" class="form-checkbox" value="Glas">
                    <label for="selectable-table2-check-3"><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" type="checkbox"
                        name="selectable-table2-check[]" class="form-checkbox"
                        value="Elektronik">
                    <label for="selectable-table2-check-4"><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" 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="#trash-can"></use></svg>
            Slet
        </button>
    </div>
</div>

JavaScript for tabeller med valgbare rækker

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();

Bemærk, at for valgbare rækker med funktionsknapper skal man selv håndtere funktionaliteten for, hvilke meddelelser der vises under tabellen, for eksempel antal rækker valgt. Nedenstående eksempel er gjort funktionelt som demonstration.

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

Strukturerede lister

Vis dette eksempel i et nyt vindue: structured-list
Kodeeksempel
<div class="table--responsive-scroll">
    <table class="table structured-list table-sm-responsive-headers">
        <tbody>
            <tr>
                <th scope="row" class="w-percent-md-30">Navn</th>
                <td>Kirsten Mønster Jensen</td>
            </tr>
            <tr>
                <th scope="row" class="w-percent-md-30">Sagsnummer</th>
                <td>123.456</td>
            </tr>
            <tr>
                <th scope="row" class="w-percent-md-30">Dato</th>
                <td>04/05/2011</td>
            </tr>
            <tr>
                <th scope="row" class="w-percent-md-30">Beskrivelse</th>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. </td>
            </tr>
        </tbody>
    </table>
</div>

Strukturerede lister kan bruges i forbindelse med opsummering eller kvitteringssider som en alternativ tabel, hvor der ikke er nogen vandrette headers.

Listerne skal altid indeholde præcis 2 eller 3 kolonner. Første kolonne anvendes til headers/titel, anden kolonne til indhold/information og tredje kolonne til eventuel redigering af rækkens indhold. Husk at markere scope="row" for hver tabelheader.

Listen kan gøres responsiv ved at tilføje klassen med det ønskede breakpoint.

Struktureret liste med redigér

Vis dette eksempel i et nyt vindue: structured-list--edit
Kodeeksempel
<div class="table--responsive-scroll">
    <table class="table structured-list table-sm-responsive-headers">
        <tbody>
            <tr>
                <th scope="row">Navn</th>
                <td>Kirsten Mønster Jensen</td>
                <td class="d-print-none align-text-md-right"><a href="#">Redigér<span
                            class="sr-only"> navn</span></a></td>
            </tr>
            <tr>
                <th scope="row">E-mail</th>
                <td>kirstenjensen@eksempel.dk</td>
                <td class="d-print-none align-text-md-right"><a href="#">Redigér<span
                            class="sr-only"> e-mail</span></a></td>
            </tr>
            <tr>
                <th scope="row">Telefonnummer</th>
                <td>12 34 56 78</td>
                <td class="d-print-none align-text-md-right"><a href="#">Redigér<span
                            class="sr-only"> telefonnummer</span></a></td>
            </tr>
        </tbody>
    </table>
</div>