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
- Uden ramme
- Zebralinjer
- Responsiv
- Linjehøjde
- Sortering i tabel
- Søgning i tabeller
- Valgbare rækker
- Strukturerede lister
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 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 tiltable--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.
<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.
<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
<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
<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
<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
<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>