BjPagination

Pagination contrôlée : nombre total d’éléments, taille de page, page courante et rappel quand la page change. Fenêtre de numéros avec ellipses.

Utilisation

import { useState } from 'react'
import { BjPagination } from '@flrxnt/dsbj/react'

export default function App() {
  const [page, setPage] = useState(1)

  return (
    <BjPagination page={page} total={240} perPage={10} onChange={setPage} />
  )
}

Aperçu

perPage

perPage (défaut 10) sert à calculer totalPages = ceil(total / perPage). Ex. total 47 et perPage 20 → 3 pages.

import { useState } from 'react'
import { BjPagination } from '@flrxnt/dsbj/react'

export function LargerPages() {
  const [page, setPage] = useState(1)

  return (
    <BjPagination
      page={page}
      total={500}
      perPage={50}
      onChange={setPage}
    />
  )
}

maxVisible

maxVisible (défaut 5) limite le nombre de numéros affichés dans la fenêtre glissante ; des ellipses relient 1 et la dernière page si besoin.

import { useState } from 'react'
import { BjPagination } from '@flrxnt/dsbj/react'

export function NarrowWindow() {
  const [page, setPage] = useState(5)

  return (
    <BjPagination
      page={page}
      total={200}
      perPage={10}
      maxVisible={3}
      onChange={setPage}
    />
  )
}

onChange (callback)

onChange reçoit l’index de page (base 1) quand l’utilisateur clique un numéro ou précédent/suivant. Les clics sur la page courante ou hors bornes ne déclenchent pas de changement.

import { useCallback, useState } from 'react'
import { BjPagination } from '@flrxnt/dsbj/react'

export function WithCallback() {
  const [page, setPage] = useState(1)

  const onChange = useCallback((next: number) => {
    setPage(next)
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }, [])

  return (
    <BjPagination page={page} total={120} perPage={10} onChange={onChange} />
  )
}

Combinaison perPage × maxVisible

Ajustez perPage et maxVisible ensemble pour de longues listes ou un UI compact.

import { useState } from 'react'
import { BjPagination } from '@flrxnt/dsbj/react'

export function DataTableFooter() {
  const [page, setPage] = useState(1)

  return (
    <BjPagination
      page={page}
      total={10_000}
      perPage={25}
      maxVisible={7}
      onChange={setPage}
      aria-label="Pagination du tableau"
    />
  )
}

Attributs natifs du nav

id, className, aria-label sur le <nav> racine (la prop DOM onChange du nav est omise du typage).

import { useState } from 'react'
import { BjPagination } from '@flrxnt/dsbj/react'

export function WithNativeAttrs() {
  const [page, setPage] = useState(1)

  return (
    <BjPagination
      id="results-pagination"
      className="search-results__pager"
      data-testid="pager"
      page={page}
      total={60}
      onChange={setPage}
    />
  )
}

Props

Prop	Description
`page`	Index de la page courante (base 1).
`total`	Nombre total d’éléments à paginer.
`perPage`	Taille de page utilisée pour calculer le nombre de pages (défaut 10).
`maxVisible`	Nombre maximal de numéros visibles dans la fenêtre glissante (défaut 5).
`onChange`	Fonction appelée avec le nouvel index de page lors d’un clic sur un numéro ou précédent / suivant.
`…rest`	Attributs natifs du nav et className fusionnés sur l’élément racine (la prop DOM onChange du nav est exclue du typage).