Datatabell
Använd en datatabell när du behöver visa information i en tabell och där användaren till exempel ska kunna söka, filtrera och sortera innehållet. Komponenten innehåller designen och du får själv bygga funktionaliteten utifrån de specifika kraven i ditt projekt.
Design och språk
Texten på rubriker
- Ska vara kort och tydlig.
- Ska helst inte innehålla förkortningar och tecken som till exempel snedstreck.
- Ska börja med stor bokstav.
Placering av innehåll i cellerna
För att det ska vara lätt att läsa informationen i tabellen ska
- celler med text vara vänsterjusterade
- celler med tal vara högerjusterade.
Centrerad text är svårläst så undvik det.
Brytpunkter
Två olika klassnamnsprefix används för att identifiera enhetens brytpunkter vid olika enhetsbredder. md:klassnamn och sm:klassnamn.
- md betyder medelstora skärmar och nedåt, till exempel surfplattor.
- sm betyder små skärmar och nedåt, till exempel mobil.
Komponenter och kod
Komponenten driftsattes första gången i version 19.8.6.
Stödansökan
| Journalnummer | |||||
|---|---|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
<style>
td:nth-child(3) {
text-align: center;
}
</style>
<div class="c-datatable">
<div class="c-datatable__header">
<h2 class="c-datatable__header-heading">Stödansökan</h2>
<div class="c-datatable__header-filters"></div>
</div>
<div class="c-datatable__wrapper">
<table class="c-datatable__table md:c-datatable__table--card--flex">
<colgroup>
<col />
<col />
<col />
<col />
<col />
</colgroup>
<thead class="c-datatable__table-header">
<tr>
<th class="c-datatable__table-header-col">
<button class="c-datatable__table-header__button">
<span>Datum</span>
<span
class="c-datatable__table-header__icon sjv-i-chevron-ner"
></span>
</button>
</th>
<th class="c-datatable__table-header-col">
<button class="c-datatable__table-header__button">
<span>Namn</span>
<span class="c-datatable__table-header__icon"></span>
</button>
</th>
<th class="c-datatable__table-header-col">
<button class="c-datatable__table-header__button l-align--center">
<span>Komplett</span>
<span class="c-datatable__table-header__icon"></span>
</button>
</th>
<th class="c-datatable__table-header-col">
<button class="c-datatable__table-header__button">
<span>Status</span>
<span class="c-datatable__table-header__icon"></span>
</button>
</th>
<th class="c-datatable__table-header-col">
<span class="c-datatable__table-header__text">Journalnummer</span>
</th>
<td class="c-datatable__table-header-col"></td>
</tr>
</thead>
<tbody class="c-datatable__table-body">
<tr>
<td>
<dl class="c-datatable__table-body__cell">
<dt class="c-datatable__table-body__cell-description">Datum</dt>
<dd>2021-11-20</dd>
</dl>
</td>
<td>
<dl class="c-datatable__table-body__cell">
<dt class="c-datatable__table-body__cell-description">Namn</dt>
<dd>Stöd för bredband</dd>
</dl>
</td>
<td>
<dl class="c-datatable__table-body__cell">
<dt class="c-datatable__table-body__cell-description">
Komplett
</dt>
<dd aria-label="Ja">
<span aria-hidden="true" class="sjv-i-check"></span>
</dd>
</dl>
</td>
<td>
<dl class="c-datatable__table-body__cell">
<dt class="c-datatable__table-body__cell-description">Status</dt>
<dd>Inskickad</dd>
</dl>
</td>
<td>
<dl class="c-datatable__table-body__cell">
<dt class="c-datatable__table-body__cell-description">
Journalnummer
</dt>
<dd>4567-8901-2</dd>
</dl>
</td>
</tr>
<tr>
<td>
<dl class="c-datatable__table-body__cell">
<dt class="c-datatable__table-body__cell-description">Datum</dt>
<dd>2021-12-05</dd>
</dl>
</td>
<td>
<dl class="c-datatable__table-body__cell">
<dt class="c-datatable__table-body__cell-description">Namn</dt>
<dd>Inköp av en ny maskin</dd>
</dl>
</td>
<td>
<dl class="c-datatable__table-body__cell">
<dt class="c-datatable__table-body__cell-description">
Komplett
</dt>
<dd aria-label="Nej">
<span aria-hidden="true" class="sjv-i-minus"></span>
</dd>
</dl>
</td>
<td>
<dl class="c-datatable__table-body__cell">
<dt class="c-datatable__table-body__cell-description">Status</dt>
<dd>Inskickad</dd>
</dl>
</td>
<td>
<dl class="c-datatable__table-body__cell">
<dt class="c-datatable__table-body__cell-description">
Journalnummer
</dt>
<dd>3456-7890-1</dd>
</dl>
</td>
</tr>
</tbody>
</table>
<div class="c-datatable__footer"></div>
</div>
</div>Översikt över datatabell-klasserna
Namn | Klassnamn | Beskrivning |
|---|---|---|
Medium | c-datatable--medium | Standard tabell |
Small | c-datatable--small | Kompakt tabell (uppfyller inte kraven på tillgänglighet) |
Tabell-layout fixed | c-datatable__table--fixed | Alla tabellkolumner har samma bredd. |
Kort | c-datatable__table--card | Kortvy på mindre enheter. |
Tillåter horisontell scroll | c-datatable__table--nowrap | Tabellbredden anpassas inte efter tillgänglig plats. Om innehållets bredd är större än enhetens bredd, navigerar du med rullningslisten. |
Teknisk information
Teknisk information som till exempel kodskelett hittar du i designsystemet. Där har du också möjlighet att se hur datatabellen ser ut med olika tillägg som till exempel table-layout och scroll.
Teknisk information för datatabell
Länk till annan webbplats. (länken nås bara av personer som arbetar på Jordbruksverket)
Senast publicerad
Sidansvarig för sidan är Styleguide