Hopp til innhold

Table

Vi bruker tabeller for å vise data på en ordnet måte som gjør sammenlikning enkelt.

Overskrift for skjermlesere
DatoSaksnummerKundenummerKundenavnMilepælFølger saken
24.02.202020-1234567010203 99887Ola NordmannOpprettetSiri Saksbehandler
13.04.201920-8382811010203 99887Kari NordkvinneOpprettetSiri Saksbehandler
31.07.201720-1111010203 99887Kari NordkvinneOpprettetPer Persen

Jøkul tilbyr enkeltkomponenter tilsvarende de du finner i HTML. Hvert tabell-element har sin egen Jøkul-motpart du kan ta i bruk.

Tilgjengelighet

Alle tabeller må ha overskrifter for hver kolonne. Kolonneoverskriftene er helt nødvendige for å kunne navigere innholdet med skjermleser. Du kan skjule én eller flere overskrifter visuelt om du ønsker.

Vi oppfordrer alle til å ha en caption som beskriver tabellen for skjermlesere, men som er skjult visuelt. Dette er ikke et krav, men gjør det enklere å navigere for eksempel med rotoren i VoiceOver.

Se siden Test med skjermleser for mer om hvordan du tester tabeller.

Responsivitet

Mobilvisning av tabeller kan være vanskelig å løse siden det ikke finnes ett felles design som fungerer i alle sammenhenger. Noen ganger er det en forutsetning å kunne sammenligne flere kolonner vertikalt for å forstå innholdet, selv på mobil. Andre ganger lar innholdet seg stable på små skjermer uten at det går for mye ut over lesbarheten. Eller kanskje innholdet lar seg representere bedre på en helt annen måte på mobil, for eksempel med en graf.

Det sagt ser vi som oftest én av to varianter av tabeller på mobil:

  • En tabell som scroller horisontalt
  • En tabell som gjøres om til en listevisning

Under ser du et eksempel på horisontal scroll. Legg merke til at scrollbaren legger seg ved tabellen (gjør vinduet ditt mindre om det ikke scrolles). Det er viktig at tabeller som dette ikke gjør så hele siden scroller horisontalt.

Tabell som scroller horisontalt på mobil
DatoSaksnummerKundenummerKundenavnMilepælFølger saken
24.02.202020-1234567010203 99887Ola NordmannOpprettetSiri Saksbehandler
13.04.201920-8382811010203 99887Kari NordkvinneOpprettetSiri Saksbehandler
31.07.201720-1111010203 99887Kari NordkvinneOpprettetPer Persen

Og her ser du et eksempel på en tabell som gjøres om til en listevisning.

Tabell som vises som liste på mobil
DatoSaksnummerKundenummerKundenavnMilepælFølger saken
24.02.202020-1234567010203 99887Ola NordmannOpprettetSiri Saksbehandler
13.04.201920-8382811010203 99887Kari NordkvinneOpprettetSiri Saksbehandler
31.07.201720-1111010203 99887Kari NordkvinneOpprettetPer Persen

Typografi

Som regel skal innholdet i cellene være venstrejustert, med noen unntak som høyrejusteres:

  • Tall og valuta
  • Knapper

I sånne tilfeller skal også headeren følge innholdet og høyrestilles.

Vanligvis skal innholdet være toppjustert i tabellraden på grunn av lesbarhet på smalere skjermer. I enkelte tilfeller, for eksempel om raden har én eller flere knapper, kan sentrering brukes i stedet.

Eksempel: høyrehuster tall
ProduktPris
Testforsikring20 kr
QA-forsikring200 kr

Riktig

Høyrehuster tall for lesbarhet

Eksempel: venstrejusterte tall
ProduktPris
Testforsikring20 kr
QA-forsikring200 kr

Feil

Venstrejusterte tall blir gjerne rotete

Størrelsen på tabelloverskriften bør stå i stil til innholdet rundt. For eksempel: si at tabellen filtreres av ett eller flere skjemafelter. Da bør det brukes en kompakt tabelloverskrift for å stå mer i stil med labelen til skjemafeltet. Derimot, om tabellen for eksempel er rett under en heading-2 og et avsnitt med tekst kan det være bedre med en vanlig størrelse.

Om du er usikker, bruk en kompakt og bold overskrift.

Det er også mulig å skjule tabelloverskrifter visuelt. De må fremdeles være der for skjermlesere, og det må komme tydelig fram av innholdet rundt hva tabellen handler om.

Tabell uten synlig header
DatoSaksnummerKundenummerKundenavnMilepælFølger saken
24.02.202020-1234567010203 99887Ola NordmannOpprettetSiri Saksbehandler
13.04.201920-8382811010203 99887Kari NordkvinneOpprettetSiri Saksbehandler
31.07.201720-1111010203 99887Kari NordkvinneOpprettetPer Persen

Flere eksempler på bruk

Datatabeller

De enkleste tabellene består av et sett med navngitte kolonner, og en eller flere rader med data som tilhører de angitte kolonnene. Radene er uten interaksjon, og alle cellene er venstrejusterte. Den kan ikke brukes med tallverdier eller valuta.

Saksliste
DatoKundenavnMilepælFølger saken
24.02.2020Ola NordmannOpprettetSiri Saksbehandler
13.04.2019Kari NordkvinneOpprettetSiri Saksbehandler
31.07.2017Kari NordkvinneOpprettetPer Persen

Rader med handling

Knapper skal komme til slutt i raden og høyrejusteres. Tekstinnholdet i rader med handling bør sentreres vertikalt slik at det kommer på linje med knappene, med mindre det er mye innhold som bryter over flere linjer. I listevisning skal knappene venstrejusteres og vises under en egen overskrift.

Tabell med handlinger
KravnrKravtypeStatusÅrsakskodeMeldt datoAvsetningProsesserDokument
11102FQA3.2.222.11.2021233Ut
1232GQA3.2.201.12.2021312Inn
32312HPR2.2.012.11.20211332Siden

Klikkbare rader

Hele raden kan gjøres klikkbar om du ønsker, men foretrekk å ha en rad med handling i egen kolonne da det er mer tilgjengelig visuelt og for skjermlesere.

Tabell med klikkbare rader
KravnrKravtypeStatusÅrsakskodeMeldt datoAvsetningProsesser
11102FQA3.2.222.11.2021233Ut
1232GQA3.2.201.12.2021312Inn
32312HPR2.2.012.11.20211332Siden

Ekspanderende tabeller

Hele raden blir automatisk klikkbar, samtidig som man skal sette inn en celle for å vise hvorvidt raden er åpen eller ikke og tilføre informasjon for hjelpemidler. Hvis man vil ha en egen klikk-handling på raden og bruker propen clickable, er det kun knappen som vil kontrollere hvorvidt raden er åpen eller ikke.

Tabell med ekspanderbare rader
KravnrKravtypeStatusÅrsakskodeMeldt datoVis mer
11102FQA3.2.222.11.2021
1232GQA3.2.201.12.2021
32312HPR2.2.012.11.2021

React API

Her finner du en oversikt over props på komponentene i pakken.