Gå til hovedinnhold
KOMPONENTER

Table

npmv4.3.9

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?Default-verdiBeskrivelse
childrenReactNode

Tabellceller

classNamestring

Ekstra klassenavn

hoverboolean false

Hvis satt, så vil tabellraden endre fargen ved hover

activeboolean false

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

errorboolean false

Signalisere om at det er en feil i tabellraden

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

HeaderCell og DataCell

NavnTypePåkrevd?Default-verdiBeskrivelse
childrenReactNode

Kolonneoverskrift

classNamestring

Ekstra klassenavn

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

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

NavnTypePåkrevd?Default-verdiBeskrivelse
childrenReactNode

Innholdet i tabellcellen

classNamestring

Ekstra klassenavn

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

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

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

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 />.

ExpandableRow og ExpandableRowButton

NavnTypePåkrevd?Default-verdiBeskrivelse
colSpannumber

Antall kolonner tabellraden er

childrenReactNode

Innholdet til ExpandableRow

openboolean false

Om ExpandableRow er åpen

NavnTypePåkrevd?Beskrivelse
openboolean

Merk colSpan-propen til ExpandableRow. Denne må settes til antallet kolonner du har i tabellen, for at innholdet som ekspanderes skal vises til hele bredden av tabellen. Se eksempelet under for hvordan dette kan gjøres.

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

Expandable tabell

En utvidbar tabell lar brukeren vise og skjule innholdet på en rad. Utvidbare tabeller er nyttig for å presentere store datamengder på et lite sted.

BetalingsmåteSalgssum
Faktura (6)20 487,-
Kort (4)4 487,-
Kontant (3)13 487,-

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

Inline editing

I noen tilfeller ønsker man å endre informasjonen som står i tabellene. Man kan da bruke EditableCell-komponenten for å gi tabeller redigerbarhet, sammenlignet med regnearksprogrammer som f.eks. Excel.

Obs: bruk hover-propen for å symbolisere at cellene i raden er redigerbare.

NavnDato
Nordmann
OlaNordmann

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
Statusrapport Entur01.01.2020TransaksjonsstatistikkEntur Alle
Statusrapport Vy02.01.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
Statusrapport Vy25.05.2020TransaksjonsstatistikkVy alle
Ledelserapport Entur15.04.2020TransaksjonsstatistikkEntur Ledelse
Statusrapport Entur15.04.2020TransaksjonsstatistikkEntur Alle

Filter tables

Tabeller med filtrering hjelper til med å begrense søkeresultatene, slik at brukeren kan finne mer nøyaktige resultater de leter etter, få ulik innsikt og gjøre sammenligninger. Det er tre typer filter-kontroller tilgjengelig:

Tabellsøk

Ved å benytte et søkefelt som begrenser resultatene som er vist basert på hva brukeren taster inn.

NavnKassepunkt IDSalgsstedSalgskanalÅpnetLukket
Rolf Svendsen87374061Oslo SMT28.04.20Åpent
Robert Jensen21837127Entur adminEntur Sørvis18.10.2020.10.20
Ola Nordmann66162613Oslo SMT12.10.2020.10.20
Rediger denne siden på Bitbucket