Pagination

Paginación con Anterior/Siguiente y números, separada de la tabla por una línea.

Cuándo usarlo

Props. total (páginas), page / defaultPage, onChange(n). Con más de 7 páginas recorta con "…". Separada de la tabla por una línea border-secondary.

Accesibilidad. Va en un <nav> llamado "Paginación"; la página actual lleva aria-current="page" y cada número se anuncia como "Página N". Anterior se desactiva en la primera y Siguiente en la última. Pulsar la página actual no avisa.

Recorte. Hasta 7 páginas se ven todas. Con más, cerca de los extremos se muestran 1 2 3 … 8 9 10, y en medio 1 … 4 5 6 … 10.

Textos. labels cambia "Anterior", "Siguiente", el nombre de la navegación y el de cada número.

Ejemplos

Props

Prop	Tipo	Por defecto	Descripción
`total`obligatoria	`number`	—	Número de páginas.
`page`	`number`	—	Página actual, desde 1 (controlado).
`defaultPage`	`number`	`1`	Página al principio (no controlado).
`onChange`	`((n: number) => void)`	—
`labels`	`Partial<PaginationLabels>`	—	Textos que trae el componente, para sustituirlos.
`className`	`string`	—

Código

import { Pagination } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<Pagination total={10} page={pagina} onChange={setPagina} />
		</>
	);
}

---
import { Pagination } from "@jotis-me/react";
---

<Pagination client:load total={10} page={pagina} onChange={setPagina} />

onChange es una función y no cruza de Astro a una isla: envuélvela en un .tsx y úsala con client:load.