Table

Om komponenten

Tabeller (table) brukes for å strukturere data i rader og kolonner. Den brukes til å vise datasett på en ryddig og lesbar måte. Den kan tilpasses for å imøtekomme ulike krav til datavisualisering, og kan inneholde interaktive komponenter slik som knapper, lenker, inputfelter og avkrysningsbokser.

Varianter

Tabellen kan brukes i to ulike størrelser: Default og Compact. Bruk den som passer best til ditt formål.

Farger

Tabellen kommer i to ulike varianter (skins): standard med hvit bakgrunn og grå linjer mellom radene, og zebra med lyseblå bakgrunn på annenhver rad. Fargene som brukes er:

• Lyseblå bakgrunn: $blue-100 (#F1FDFF)
• Grå outline: $gray-100 (#E6E6E6)

Alle bruker blue-dark (#2A2859) som tekstfarge.

Slik bruker du komponenten

Innholdet i tabellen bør være venstrejustert, og unntatt tall, som bør høyrejusteres for å gjøre det enklere å sammenligne tallene.

1. Sticky header: Hvis Tabellen har mange kolonner, legg til sticky header som følger brukeren mens de scroller gjennom Tabellen for å holde kolonneoverskriftene synlige.

Gjør dette/ikke gjør dette

Bruk tydelige og beskrivende kolonneoverskrifter for å indikere hva hver kolonne inneholder

Innholdet i tabellen bør være venstrejustert for å sikre god lesbarhet. Tall og knapper bør høyrejusteres for å gjøre det enklere å sammenligne tallene når man scanner tabellen.

Anatomi

Tabellkomponenten består av følgende elementer:

1. Tittel
2. Kolonneoverskrift
3. Rad
4. Celleinnold