Pagination

@/components/ui/Pagination

Sidenavigasjon for en delt liste — «Forrige»/«Neste» og sidetall, ellipse ved mange sider.

Når brukes den

Bruk når en liste/tabell er delt i sider på serveren eller klienten, og brukeren skal kunne hoppe direkte til en side.
Mer enn 7 sider: komponenten samler automatisk sidetall langt fra gjeldende side i én «…» — ingen egen håndtering nødvendig fra kallstedet.
Ikke bruk til «last inn flere» (uendelig rulling) — det er en egen Button-basert løsning, ikke denne.

Få sider (ingen ellipse)

7 sider eller færre vises i sin helhet.

<Pagination side={side} antall={4} onChange={setSide} />

Mange sider (ellipse)

24 sider, gjeldende side 6 — første, siste, gjeldende og naboene vises, resten samles i «…».

Første/siste side

«Forrige»/«Neste» deaktiveres naturlig ved kantene.

Sveip tabellen for å se hele innholdet

Navn

Type

Default

Beskrivelse

side *

number

—

Gjeldende side, 1-indeksert.

antall *

number

—

Totalt antall sider.

onChange *

(side: number) => void

—

Kalles med den nye siden.

ariaLabel

string

'Sidenavigasjon'

Tilgjengelig navn på navigasjonen.

className

string

—

Ekstra klasser.