Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
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
<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-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
<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 |