Pagination

Navega a través de páginas de datos con controles personalizables.

Importar

import { Pagination } from 'asterui'

Ejemplos

Paginación básica

Paginación simple con números de página.

import { Pagination } from 'asterui'
import { useState } from 'react'

function App() {
  const [current, setCurrent] = useState(1);
  
  return (
      <Pagination
        current={current}
        total={85}
        onChange={(page) => setCurrent(page)}
      />
    )
}

export default App

Con cambiador de tamaño

Permite a los usuarios cambiar el tamaño de página.

import { Pagination } from 'asterui'
import { useState } from 'react'

function App() {
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  
  return (
      <Pagination
        current={current}
        total={500}
        pageSize={pageSize}
        showSizeChanger
        onChange={(page, size) => {
          setCurrent(page);
          setPageSize(size);
        }}
      />
    )
}

export default App

Mostrar total

Muestra el conteo total de elementos.

Total 250 items

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination total={250} showTotal />
    )
}

export default App

Total personalizado

Renderizado personalizado del conteo total.

Showing 1-10 of 250 items

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination
        total={250}
        showTotal={(total, range) => `Showing ${range[0]}-${range[1]} of ${total} items`}
      />
    )
}

export default App

Salto rápido

Permite a los usuarios saltar a una página específica.

Go to

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination total={500} showQuickJumper />
    )
}

export default App

Todas las características

Paginación con todas las características habilitadas.

1-10 of 500

Go to

import { Pagination } from 'asterui'
import { useState } from 'react'

function App() {
  const [current, setCurrent] = useState(1);
  
  return (
      <Pagination
        current={current}
        total={500}
        showSizeChanger
        showQuickJumper
        showTotal={(total, range) => `${range[0]}-${range[1]} of ${total}`}
        onChange={(page) => setCurrent(page)}
      />
    )
}

export default App

Modo simple

Paginación mínima con solo controles anterior/siguiente.

1 / 10

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination total={100} simple />
    )
}

export default App

Tamaños

Diferentes tamaños para controles de paginación.

Extra Small

Small

Medium (default)

Large

import { Pagination } from 'asterui'

function App() {
  return (
      <div className="space-y-4">
        <div>
          <div className="text-sm text-base-content/60 mb-2">Extra Small</div>
          <Pagination total={100} size="xs" />
        </div>
        <div>
          <div className="text-sm text-base-content/60 mb-2">Small</div>
          <Pagination total={100} size="sm" />
        </div>
        <div>
          <div className="text-sm text-base-content/60 mb-2">Medium (default)</div>
          <Pagination total={100} size="md" />
        </div>
        <div>
          <div className="text-sm text-base-content/60 mb-2">Large</div>
          <Pagination total={100} size="lg" />
        </div>
      </div>
    )
}

export default App

Deshabilitado

Estado deshabilitado para paginación.

import { Pagination } from 'asterui'

function App() {
  return (
      <Pagination total={100} disabled />
    )
}

export default App

API

`Pagination`

Propiedad	Descripción	Tipo	Predeterminado
`current`	Número de página actual (controlado)	`number`	-
`defaultCurrent`	Número de página inicial predeterminado	`number`	`1`
`total`	Número total de elementos	`number`	-
`pageSize`	Número de elementos por página (controlado)	`number`	-
`defaultPageSize`	Número predeterminado de elementos por página	`number`	`10`
`pageSizeOptions`	Opciones para selector de tamaño de página	`number[]`	`[10, 20, 50, 100]`
`onChange`	Callback cuando cambia la página o pageSize	`(page: number, pageSize: number) => void`	-
`onShowSizeChange`	Callback cuando cambia pageSize	`(current: number, size: number) => void`	-
`showSizeChanger`	Mostrar selector de tamaño de página	`boolean`	`false`
`showQuickJumper`	Mostrar entrada de salto rápido a página	`boolean`	`false`
`showTotal`	Mostrar conteo total o función de renderizado personalizada	`boolean \| ((total: number, range: [number, number]) => ReactNode)`	`false`
`simple`	Modo simple con controles mínimos	`boolean`	`false`
`size`	Tamaño de los botones de paginación	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`
`disabled`	Deshabilitar todos los controles de paginación	`boolean`	`false`
`className`	Clases CSS adicionales	`string`	-

Accesibilidad

Usa elemento nav con aria-label="Pagination"
La página actual está marcada con aria-current="page"
Los botones deshabilitados tienen el estado aria-disabled apropiado
La entrada de salto rápido tiene etiqueta accesible