Paginación

Pagina la presentación cuando la cantidad de datos es grande; admite controlado / no controlado, cambio del tamaño de página y salto a una página.

Uso básico

Uso básico

import { useState } from 'react'
import { LhPagination } from '@lh-ui/react'

export default function Demo() {
  const [current, setCurrent] = useState(1)

  return (
    <LhPagination
      total={128}
      current={current}
      onChange={(page) => setCurrent(page)}
    />
  )
}

Pagination Props

Prop	Descripción	Tipo	Valores permitidos	Predeterminado
total	Número total de datos (obligatorio)	number	—	—
current	Página actual (controlado; empieza en 1)	number	—	—
defaultCurrent	Valor por defecto de la página actual (no controlado)	number	—	1
pageSize	Tamaño de página (controlado)	number	—	—
defaultPageSize	Valor por defecto del tamaño de página (no controlado)	number	—	10
pageSizes	Opciones de tamaño de página	number[]	—	[10, 20, 30, 40]
siblingCount	Número de páginas que se muestran a cada lado de la actual	number	—	1
showTotal	Si se muestra el número total de elementos	boolean	—	false
showSizeChanger	Si se muestra el selector de tamaño de página	boolean	—	false
showJumper	Si se muestra la entrada de salto de página	boolean	—	false
simple	Modo compacto	boolean	—	false
disabled	Si está desactivado	boolean	—	false
sx	Props rápidas de layout	SxProps	—	—

Eventos de Pagination

Evento	Descripción	Firma del callback	Equivalente en Vue
onChange	Se dispara al cambiar de página (cambio de página, salto y el reajuste provocado por el cambio de tamaño de página)	(current: number, pageSize: number) => void	@change
onSizeChange	Se dispara al cambiar el tamaño de página	(pageSize: number) => void	@size-change

Controlado / no controlado

Si se pasa current, es controlado (el componente no mantiene estado interno, sino que lo conduce el exterior); si se pasa defaultCurrent, funciona con estado interno no controlado. pageSize funciona igual. En ambos modos se dispara onChange.

Reajuste del número de página

Cuando el cambio de pageSize reduce el número total de páginas y la página actual queda fuera de rango, el componente la reajusta automáticamente a la última página dentro del effect y dispara onChange, sin que la lógica de negocio tenga que cubrir ese caso.

Interacción de teclado

Entrada de salto de página: Enter envía el salto y la pérdida de foco también lo envía; los valores no válidos (fuera de rango o no numéricos) se reajustan al intervalo válido.

Accesibilidad

El elemento raíz es <nav aria-label>; la página actual emite aria-current="page" y cada botón de página lleva aria-label (plantilla pagination.page del paquete de idioma, p. ej. «Página 3»).

ref

forwardRef<HTMLElement>: el elemento raíz <nav>.

Estilos

import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/pagination'