Pagination

Bruk Pagination når

Innhold skal fordeles på flere sider for å unngå for mange elementer i én og samme visning – for eksempel i en Table der man presenterer et gitt antall rader med mulighet til å navigere til et annet sett.

Retningslinjer

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

Eksempler

() => {
  const [currentPage, setPage] = React.useState(1);
  const [results, setResults] = React.useState(10);
  const numberOfResults = 100;
  return (
    <Pagination
      pageCount={Math.ceil(numberOfResults / results)}
      numberOfResults={numberOfResults}
      currentPage={currentPage}
      onPageChange={page => setPage(page)}
      resultsPerPage={results}
      onResultsPerPageChange={setResults}
    />
  );
}