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 på <table>.
Responsiv tabel
Tilføj en af nedenstående klasser:
table-sm-responsive-headerstable-md-responsive-headerstable-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
<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 |