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 tre ulike varianter (skins): normal med hvit bakgrunn og grå linjer mellom radene, zebra med lysegrå bakgrunn på annenhverrad, og zebra med lyseblå bakgrunn på annenhver rad.

Fargene som brukes er:

• Lysegrå bakgrunn: $gray-50 (#F9F9F9)
• 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.

(Legg ved eksempel her)

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

Gjør dette:

• Bruk tydelige og beskrivende kolonneoverskrifter for å indikere hva hver kolonne inneholder.
• Tilby funksjonalitet for sortering, filtrering og paginering for å forbedre brukeropplevelsen.

Ikke gjør dette:

• Overfyll tabellen med for mange kolonner eller unødvendig informasjon.
• Bruk farger eller stiler som gjør det vanskelig å skille mellom dataene eller forstå informasjonen.

Anatomi

Tabellkomponenten består av følgende elementer:

• Kolonneoverskrifter: Beskriver innholdet i hver kolonne.
• Rader: Viser individuelle oppføringer eller datasett.
• Celleinnhold: Faktiske data som vises i Tabellen.