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å etiketter
- 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.
Sortering i tabellen
Du kan låta flera kolumner vara sorterbara, men chevron det vill säga pilen, ska enbart synas på en kolumnrubrik åt gången. Chevron ska allltså bara visas på den kolumnrubrik som användaren har valt att sortera.
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">
<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.
Senast publicerad
Sidansvarig för sidan är Styleguide