Gå til hovedinnhold
KOMPONENTER

Table

Tabeller brukes for å vise frem strukturert data

FraAvgangTilAnkomst
Majorstua10.00Østerås10.28
Majorstua11.00Østerås11.28
Majorstua12.00Østerås12.28

Komponenter

En tabell settes sammen av flere forskjellige komponenter. Rekkefølgen er viktig her, så følg nøye med om du ikke har brukt denne pakken før:

Table

NavnTypePåkrevd?Default-verdiBeskrivelse
classNamestring

Ekstra klassenavn

spacing"small" | "default" | "middle" "default"

Setter tettheten mellom rader og kolonner. Bruk gjerne middle og small for for sider med høy informasjonstetthet

fixedboolean false

Setter kolonne-layout til å være uavhengig av innhold

childrenReactNode

Innholdet i tabellen

<Table /> er grunnkomponenten til en tabell. Den wrapper man rundt en eller flere seksjonskomponenter (se <TableHead />, <TableBody /> og <TableFooter />), for å lage en tabell. Du kan også sende inn en <caption /> for å gi en tittel til tabellen din. <caption /> må i så fall være første barneelement.

Du kan spesifisere fixed-propen for å ha like kolonnestørrelser.

Om du ønsker en mer kompakt tabell, så kan du spesifisere middle-propen.

TableHead, TableBody og TableFooter

NavnTypePåkrevd?Beskrivelse
childrenReactNode

Kolonneoverskrifter

classNamestring

Esktra klassenavn

<TableHead />, <TableBody /> og <TableFooter /> er såkalte seksjonskomponenter, og brukes for å dele inn innholdet i tabellen din. <TableHead /> inneholder overskriftene, <TableBody /> inneholder selve den tabulære dataen, og <TableFooter /> inneholder raden eller radene som oppsummerer de andre radene.

TableRow

NavnTypePåkrevd?Beskrivelse
childrenReactNode

Tabellceller

classNamestring

Ekstra klassenavn

hoverboolean

Hvis satt, så vil tabellraden endre fargen ved hover

activeboolean

Om raden er klikkbar, så vil raden endre farge, og musepekeren vil symbolisere interaktivitet

<TableRow /> er en rad i tabellen, og inneholder enten <HeaderCell />- eller <DataCell />-komponenter.

HeaderCell og DataCell

NavnTypePåkrevd?Beskrivelse
childrenReactNode

Kolonneoverskrift

classNamestring

Ekstra klassenavn

padding"default" | "checkbox" | "radio" | "overflow-menu"

Størrelse som settes for HeaderCell for ulikt innhold av komponenter

NavnTypePåkrevd?Beskrivelse
childrenReactNode

Innholdet i tabellcellen

classNamestring

Ekstra klassenavn

padding"default" | "checkbox" | "radio" | "overflow-menu"

Størrelse som settes for DataCell for ulikt innhold av komponenter

status"negative" | "positive" | "neutral"

Viser en status-sirkel for DataCell

<HeaderCell /> brukes som kolonneoverskrifter, og skal plasseres inni en <TableRow /> inni en <TableHead />. Gi et godt og oppsummerende navn.

Det er ikke støtte for å ha rad-overskrifter, altså overskrifter til venstre for en rad.

<DataCell />-komponentene inneholder den tabulære dataen, og "cellen" i regnearket. Disse plasseres inni en <TableRow /> inni en <TableBody /> eller en <TableFooter />.

Sortering av tabell

Sorteringsfunksjonene er plassert i kolonneoverskriftene. Ved å klikke på en kolonneoverskrift sorteres tabellen basert på dataene innen - alfabetisk, numerisk, dato osv. En sortert tabell har tre tilstander: usortert, sortert etter stigende rekkefølge (pilikon - opp) eller sortert etter synkende rekkefølge (pilikon - ned). Ikonene indikerer gjeldende sortert tilstand og vises bare hvis sortering er aktivert. Det er kun kolonnen som blir sortert som skal vise et ikon, usorterte ikoner er bare synlige ved “hover”.

Hund13
Katt10
Spurv5
Elefant60
Skilpadde50
Løve25

Her brukes hooken useSortableData med dataen man vil ha i tabellen som output. Merk bruken av getSortableHeaderProps hvor man må sende inn en verdi for name som tilsvarer den i datasettet du bruker.

Obs for Typescript: getSortableData benytter seg av generic-types, dermed ville den i eksemplet over sett ut slikt:

const {
    sortedData,
    getSortableHeaderProps,
    getSortableTableProps,
  } = useSortable<{name:string; age:number }>(data);

Table density

Tabellkomponenten tilbyr tre størrelser: Default, Middle og Small. Dette tillater brukeren å veksle mellom ulike radhøyder for brukstilfeller der økt tetthet foredrer brukeropplevelsen.

Densitet
PassasjerkategoriTypeVognSete/kupeSete/kupeSete/kupeSete/kupeSete/kupe
VoksenKomfort31212121212
VoksenKomfort42212121212
Barn 0-5 årKomfort44412121212

Checkbox-tabell

Checkbox: Tabeller med valgbare rader som inneholder en Checkbox brukes i tilfeller der det er en liste over alternativer og brukeren kan velge ett eller flere alternativer. I tillegg brukes en global checkbox i tabelloverskriften for å kunne raskt velge eller fjerne markeringen av alle radene i tabellen.

Rader kan velges ved å gjøre første kolonne som en valgbar kolonne.

FraTilAvgang
MajorstuaØsterås10.00
Oslo SRøa11.30
Sofies PlassHelsfyr12.11

Radio-tabell

Radio: Tabeller med valgbare rader som inneholder Radio knapper brukes i tilfeller der brukeren kun kan velge ett alternativ.

FraTilAvgang
MajorstuaØsterås10.00
Oslo SRøa11.30
Sofies PlassHelsfyr12.11

Statustabell

En tabell kan vise ulike status via en statusindikator som vises i tabellradene. Statusindikatorene hjelper brukeren med å se hvilke rader som kan kreve spesiell oppmerksomhet. I dette eksemplet kan brukeren identifisere hvilke samtykker som er publisert (grønn), hvilke som er kladd (grå) og hvilke som er utløpt (rød).

BeskrivelseStatusPublisering start og sluttOpprettet av
Kan Entur vise reklame i mobilappen?Publisert01.04.2020 -
01.01.2022
Entur
Kan Entur sende deg tilbud og nyheter på e-post?KladdEntur
Kan Kringom sende deg e-post med
kvitteringer og billetter?
Utløpt02.02.2020Kringom

Sammenligningstabell

En sammenligningstabell er godt egnet til å visualisere og sammenligne data for produkter eller tjenester. Den gir mulighet for rask og enkel sammenligning mellom hvert produkts funksjoner og egenskaper. Alle kolonner skal være sorterte i enten stigende eller synkende rekkefølge fra høyre eller venstre, slik at alle likheter samles henholdsvis til høyre eller venstre.

ValørReisebillettPlassSovekupéOppgradering
Platinum
Gull
Sølv

Table actions

Handlinger som en bruker kan utføre fra en enkel tabellrad vises i kolonnen helt til høyre og er synlige ved hover. Hvis tabellraden har mer en tre alternativer bruker vi en OverflowMenu som inneholder handlinger relatert til den tabellraden. Har menyen en "slett" alternativ, bør det være på bunnen.

NavnPublisertKategoriMottaker
Status rapport Vy15.04.2020TransaksjonssstatistikkVy Alle
Status rapport Vy10.03.2020TransaksjonssstatistikkVy Alle
Status rapport Vy02.02.2020TransaksjonssstatistikkVy Alle

Inneholder over-flow menyen mindre enn tre alternativer, vis handlingene på linje som ikonknapper i stedet. Dette reduserer 1 klikk og gjør tilgjengelige handlinger synlige for brukerne med en gang.

Eksempler på handlingsikoner er info ikon for å vise mer detaljert informasjon, pen ikon for å konfigurere/redigere og søppelkasse ikon for å fjerne/slette en tabellrad.

NavnPublisertKategoriMottaker
Status rapport Vy15.04.2020TransaksjonssstatistikkVy Alle
Status rapport Vy10.03.2020TransaksjonssstatistikkVy Alle
Status rapport Vy02.02.2020TransaksjonssstatistikkVy Alle

Pagination

Paginering i tabeller fungerer ved å presentere et sett antall rader i en visning, med mulighet til å navigere til et annet sett. Brukes for å hjelpe brukerne å analysere et stort antall elementer når det er for mange resultater til å vises samtidig, slik at de ikke blir overveldet av for mye informasjon. Tabeller med mer enn 20 elementer bør inkludere paginering som alltid ligger under eller både over og under tabellen. Pagineringskontroller er tilgjengelig for å gi rask tilgang til alle sider og indikerer at flere sider eksisterer.

Kontrollene som støttes er:

  • Rader per side: Viser antall resultater slik at brukeren kan tilpasse hvor mye de ønsker å se.
  • Venstre og høyre pil: Lar brukeren navigere til neste eller forrige side.
  • Gå til side: Lar brukeren hoppe direkte til en ønsket side.
NavnPublisertKategoriMottaker
Ledelserapport Entur15.04.2020TransaksjonsstatistikkEntur Ledelse
Statusrapport Entur15.04.2020TransaksjonsstatistikkEntur Alle
Statusrapport Vy25.05.2020TransaksjonsstatistikkVy alle
Ledelserapport Entur15.04.2020TransaksjonsstatistikkEntur Ledelse
Statusrapport Entur15.04.2020TransaksjonsstatistikkEntur Alle
Statusrapport Vy25.05.2020TransaksjonsstatistikkVy alle
Ledelserapport Entur15.04.2020TransaksjonsstatistikkEntur Ledelse
Statusrapport Entur15.04.2020TransaksjonsstatistikkEntur Alle