Gå til hovedinnhold
KOMPONENTER

Paginering

Paginering lar deg navigere mellom sider i et resultatsett.

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.

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