pagination
Paginationnpage

PaginationNPage

Componente de selección de elementos por página para la paginación, permitiendo seleccionar el número de elementos a mostrar en cada página.

Ejemplo

Importación

Para importar el componente PaginationNPage, se puede hacer desde fenextjs

import { PaginationNPage } from "fenextjs";

Parámetros

ParámetroTipoRequeridoDefaultDescripcion
classNamestringno''Clase CSS para el contenedor principal del componente de paginación.
defaultValuestring | numbernoValor por defecto de la opción seleccionada en el menú desplegable.
listNpageArray<{ id: string | number; text: string }>no[{ id: "10", text: "10" }, { id: "20", text: "20" }, { id: "50", text: "50" }, { id: "100", text: "100" }, { id: "all", text: "All" }]Lista de opciones para el número de elementos por página que se puede seleccionar.
onChangeNPage(value: string | number) => voidnoFunción de callback que se llama cuando cambia la opción seleccionada en el menú desplegable.

Storybook

Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)

Usos

  • Componente de selección de número de elementos por página con valor por defecto de 20
<PaginationNPage defaultValue="20" />
  • Componente de selección de número de elementos por página con clases personalizadas
<PaginationNPage className="custom-pagination-class" />
  • Componente con callback en cambio de selección
<PaginationNPage
  onChangeNPage={(value) => console.log("Elementos por página:", value)}
/>