Gå til hovedinnhold
KOMPONENTER

Pagination

Pagination brukes for å fordele innhold på over flere sider, for å unngå for mange elementer i én og samme visning.


Komponenter

Pagination

NavnTypePåkrevd?Default-verdiBeskrivelse
classNamestring

Ekstra klassenavn

currentPagenumber

Sidenummeret som er aktivt nå

onPageChange(requestedPage: number) => void

Callback for når man ønsker å gå til en ny side

pageCountnumber

Antall sider totalt

previousPageLabelstring "Gå til forrige side"

Hva som blir lest opp når brukere av skjermlesere navigerer til “forrige side knappen”

nextPageLabelstring "Gå til neste side"

Hva som blir lest opp når brukere av skjermlesere navigerer til “neste side knappen”

pageLabel((pageNumber: number) => string) pageNumber => `Gå til side ${pageNumber}`,

Hva som blir lest opp når brukere av skjermlesere navigerer til “forrige side knappen”

showInputboolean false

Vis et felt til høyre for pagineringen hvor man kan angi siden man ønsker å vise i et tekstfelt.

inputLabelstring "Gå til side"

Label som vises til venstre for input-feltet som vises om showInput er true

resultsPerPagenumber
resultsPerPageOptionsnumber[] [10,25,50]
onResultsPerPageChange((e: number) => void)

<Pagination />-komponenten er ganske grei å bruke. Du sier hvor mange sider du har totalt, hvilken side man er på nå, og hva som skal skje når man trykker på et tall.

Hver gang brukeren ber om å endre en side, så blir callbacken onPageChange kalt med nummeret til den ønskede siden. Det er da opp til utvikleren å implementere navigasjonen derifra - f.eks. med window.history.push(), eller APIene til react-router, om du bruker det.

Du kan også spesifisere showInput for å vise et input-felt, der man kan skrive inn hvilken side man ønsker å bruke. Det kan være praktisk i svært store datasett, men bør kun brukes der det er behov.

Om du ønsker flerspråklig støtte, har du tilgang på flere props: pageLabel, previousPageLabel, nextPageLabel, og eventuelt inputLabel om det trengs.

For visning av resultat per side, og muligheten for å endre dette, bruk resultsPerPage og onResultsPerPageChange. Bruk så enten 10, 25 eller 50 resultater per side.

Retningslinjer for bruk

Pagination brukes for å fordele innhold på over flere sider, for å unngå for mange elementer i én og samme visning. Komponenten brukes for eksempel i Tabeller der man presenterer et sett antall rader, med mulighet til å navigere seg til et annet sett.

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.

Eksempel

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