Table
Release dato: 16.05.2024
Sist oppdatert: â
Tabeller brukes for Ä presentere strukturert data i rader og kolonner. De gjÞr det enklere Ä skanne, sammenligne og utfÞre handlinger pÄ data. Tabellen kan inneholde interaktive elementer som lenker, knapper, inputfelt og avkrysningsbokser.
Test komponenten
Relaterte komponenter
For Ă„ gi brukeren mulighet til Ă„ filtrere og sĂžke i tabellen
For Ă„ velge Ă©n eller flere rader for massehandlinger
NĂ„r tabellen inneholder redigerbare felt
Varianter
StĂžrrelser
| StĂžrrelse | Beskrivelse |
|---|---|
| Default | For lesbarhet pÄ desktop |
| Compact | NÄr mange rader mÄ fÄ plass uten horisontal scroll |
Utseende/skin
| Skin | Beskrivelse |
|---|---|
| Basic | Hvit bakgrunn, grÄ skillelinjer |
| Zebra | Annenhver rad med lyseblÄ/grÄ bakgrunn for enklere skanning |
Retningslinjer for bruk
Bruk table nÄr
- du skal vise strukturert data i rader og kolonner
- brukeren mÄ kunne sammenligne flere poster side om side
- det er behov for sortering, filtrering eller paginering
UnngÄ table nÄr
- du bare skal vise Ă©n post i detalj (bruk for eksempel card i stedet)
- dataene blir vanskelig Ä lese pÄ smÄ skjermer, og en annen visning fungerer bedre
- du egentlig bare trenger en enkel liste
Skriv tydelige og beskrivende kolonneoverskrifter
Bruk korte og konsise overskrifter som gjÞr det enkelt Ä forstÄ hva kolonnen inneholder.
GjĂžr slik
UnngÄ
Juster innhold riktig
Tekst skal venstrejusteres, mens tall og summeringer bĂžr hĂžyrejusteres for enklere skanning.
GjĂžr slik
UnngÄ
Responsivitet
Table tilpasser seg tilgjengelig plass og vises ulikt avhengig av skjermstĂžrrelse.
PÄ mobil og smÄ skjermer bygges radene i hÞyden. Vi anbefaler Ä unngÄ horisontal scrolling fordi det kan vÊre forvirrende for brukeren. Dersom du likevel velger Ä bruke horisontal scroll, bÞr du alltid teste det nÞye pÄ mÄlgruppen.
Universell utforming
Innholdet mÄ gi mening med skjermleser
Alle tabeller skal kodes semantisk med <table>, <thead>, <tbody>, <th> og <td>. Bruk scope for
Ă„ knytte kolonne- og radoverskrifter til cellene.
Alle handlinger mÄ vÊre tilgjengelige med tastatur
Brukeren skal kunne navigere med âTabâ og âShift+Tabâ, og aktivere elementer med âEnterâ eller âMellomromâ.
SĂžrg for tydelig kontrast og fokusmarkering
Tekst, linjer og bakgrunn skal ha tilstrekkelig kontrast, og fokus pÄ interaktive elementer skal vÊre synlig.
Bruk caption ved behov
Hvis tabellen trenger en forklarende tittel, bruk <caption> slik at skjermlesere fanger det opp.
Teknikker for tilgjengelige tabeller hos W3C
Anatomi
| Element | Beskrivelse |
|---|---|
| Tittel (valgfritt) | Gir en overskrift som beskriver hva tabellen inneholder |
| Kolonneoverskrift | Viser hva hver kolonne representerer |
| Celleinnhold | Viser data eller handlinger i tabellen |
| Rad | Grupperer innhold pÄ tvers av kolonner |
Implementasjon i kode
Hvordan ta komponenten i bruk?
import { PktTable } from '@oslokommune/punkt-react';Props og tokens
Table
| Prop | Type | Beskrivelse |
|---|---|---|
compact | boolean | Skal tabellen vises i kompakt modus? |
skin | basiczebra-blue | Utseendet til tabellen |
responsiveView | boolean | Skal tabellen vises responsivt? |
TableDataCell
| Prop | Type | Beskrivelse |
|---|---|---|
dataLabel | string | Etikett som brukes for responsiv visning av tabellen, typisk samme som kolonneoverskriften |
| Slot (children) | Beskrivelse |
|---|---|
default | Innholdet i tabellcellen |