Table

GitHub Figma

Denne komponenten er under aktiv utvikling, og vi trenger din feedback!

Er du eventyrlysten, test den og kom med innspill til oss på Slack.

Om komponenten

Table gir brukerne en tydeligere oversikt over data og relasjoner ved å strukturere informasjonen i rader og kolonner.

Egnet til:

  • Vise strukturert data i rader og kolonner
  • Lage sammenligninger (f.eks. produkter eller priser)
  • Presentere statistikk eller rapporter

Uegnet til:

  • Sideoppsett og layout (bruk heller CSS Grid eller Flexbox)
  • Vanlig tekst- og bildeinnhold uten tabellstruktur
  • Interaktivt innhold som knapper, kort eller navigasjon
  • Opplisting av elementer

Varianter

Table har to varianter: default og zebra-stripet. Ved å gi annenhver rad ulik bakgrunnsfarge blir det lettere å følge riktig linje på tvers av tabellen. Dette skaper et tydelig visuelt skille mellom radene, gjør tabellen mer oversiktlig og reduserer risikoen for å lese feil verdier.

Default

<UNSAFE_Table aria-label="Eiendomsforvaltere">
  <UNSAFE_TableHeader>
    <UNSAFE_TableColumn>Navn</UNSAFE_TableColumn>
    <UNSAFE_TableColumn>E-post</UNSAFE_TableColumn>
    <UNSAFE_TableColumn>Område</UNSAFE_TableColumn>
  </UNSAFE_TableHeader>
  <UNSAFE_TableBody>
    <UNSAFE_TableRow>
      <UNSAFE_TableCell>Kari Hansen</UNSAFE_TableCell>
      <UNSAFE_TableCell>kari.hansen@obos.no</UNSAFE_TableCell>
      <UNSAFE_TableCell>Grünerløkka</UNSAFE_TableCell>
    </UNSAFE_TableRow>
    <UNSAFE_TableRow>
      <UNSAFE_TableCell>Lars Olsen</UNSAFE_TableCell>
      <UNSAFE_TableCell>lars.olsen@obos.no</UNSAFE_TableCell>
      <UNSAFE_TableCell>Frogner</UNSAFE_TableCell>
    </UNSAFE_TableRow>
    <UNSAFE_TableRow>
      <UNSAFE_TableCell>Ingrid Svendsen</UNSAFE_TableCell>
      <UNSAFE_TableCell>ingrid.svendsen@obos.no</UNSAFE_TableCell>
      <UNSAFE_TableCell>Majorstuen</UNSAFE_TableCell>
    </UNSAFE_TableRow>
  </UNSAFE_TableBody>
</UNSAFE_Table>

Zebra-striped

<UNSAFE_Table aria-label="Eiendomsforvaltere" variant="zebra-striped">
  <UNSAFE_TableHeader>
    <UNSAFE_TableColumn>Navn</UNSAFE_TableColumn>
    <UNSAFE_TableColumn>E-post</UNSAFE_TableColumn>
    <UNSAFE_TableColumn>Område</UNSAFE_TableColumn>
  </UNSAFE_TableHeader>
  <UNSAFE_TableBody>
    <UNSAFE_TableRow>
      <UNSAFE_TableCell>Kari Hansen</UNSAFE_TableCell>
      <UNSAFE_TableCell>kari.hansen@obos.no</UNSAFE_TableCell>
      <UNSAFE_TableCell>Grünerløkka</UNSAFE_TableCell>
    </UNSAFE_TableRow>
    <UNSAFE_TableRow>
      <UNSAFE_TableCell>Lars Olsen</UNSAFE_TableCell>
      <UNSAFE_TableCell>lars.olsen@obos.no</UNSAFE_TableCell>
      <UNSAFE_TableCell>Frogner</UNSAFE_TableCell>
    </UNSAFE_TableRow>
    <UNSAFE_TableRow>
      <UNSAFE_TableCell>Ingrid Svendsen</UNSAFE_TableCell>
      <UNSAFE_TableCell>ingrid.svendsen@obos.no</UNSAFE_TableCell>
      <UNSAFE_TableCell>Majorstuen</UNSAFE_TableCell>
    </UNSAFE_TableRow>
  </UNSAFE_TableBody>
</UNSAFE_Table>