Table

Egnet til:

• organisering og visning av data på en effektiv måte der det er nyttig å presentere i rekker og kolonner.

Uegnet til:

• å dele opp innholdet på en side systematisk. Se i stedet artikkel om sidelayout.
• å vise store mengder data på mobil.

Teknisk dokumentasjon

Se Table i Storybook for tekniske detaljer. 

Varianter

Alle tabeller har titler på kolonner og mulighet for å sortere dataene i kolonnen. Den skal kunne vises i den bredden som innholdet krever. 

Standard

Standard tabellvariant kommer med en gitt tekststørrelse og definerte avstander. 

Kompakt

Tekststørrelsen og luften i tabellen reduserers. All tekst vises innefor sine celler, uavhengig av mengde tekst.

Hvordan bruke komponenten

Ekspanderbare rader

Tabellrader kan settes opp til å vise mer og skjule relatert innhold. Vi anbefaler at raden åpnes og lukkes ved hjelp av de innebyggede knappene, i stedet for å klikke på rad eller bruke løse knapper i eller utenfor tabellen. 

Redigere innhold

Eksempel på tabell med mulighet for å redigere. Brukeren må fullføre redigering av en rad for å kunne redigere en annen.

Universell utforming 

• På små skjermer vil endre-ikon flyttes til venstre, og tabellen har horisontal scrolling ved behov.
• Husk at th-tags skal brukes på kolonneoverskrifter. Det kan også være fornuftig å bruke dette på radoverskrifter for å gjøre navigering i tabellen med skjermleser mer effektiv. Husk å bruke scope="row" og scope="col" for spesifisering.
• Tomme celler skal være td-tag.
• Sjekk at du kan velge ulik sortering med tastatur.
• Test med skjermleser at du hører hva som er sorterbart, typer sortering og at du ikke mister fokus når du endrer sortering.
• Tabeller skal alltid ha et caption-element med kort tekst om hva tabellen viser. Som standard er caption visuelt skjult, men kan vises ved behov.
  Skjermlesere vil lese caption-elementet og brukerne kan ta stilling til om de vil lese videre i tabellen.