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.
Live demo
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 |
Farger
| Element | CSS variabel |
|---|---|
| Bakgrunn default | |
| Bakgrunn zebra | |
| Border | |
| Tekst | |