Skip to content

UiCursorPagination ​

Paginación por cursor para listas con grandes volúmenes de datos (como audit logs).

Props ​

PropTipoDefaultDescripción
hasPrevboolean—¿Hay página anterior?
canGoNextboolean—¿Hay página siguiente?
loadingbooleanfalseDeshabilita botones durante la carga
pageIndexnumber—Número de página actual (para mostrar "Página N")
countnumber—Cantidad de items en la página actual
totalLabelstring'registros'Unidad para el contador (ej: 'eventos')

Emits ​

EventoDescripción
prevUsuario pide la página anterior
nextUsuario pide la siguiente página

Ejemplo ​

vue
<UiCursorPagination
  :has-prev="auditStore.hasPrev"
  :can-go-next="auditStore.canGoNext"
  :loading="auditStore.isLoading"
  :page-index="auditStore.pageIndex"
  :count="auditStore.logs.length"
  total-label="eventos"
  @next="auditStore.nextPage"
  @prev="auditStore.prevPage"
/>

Diferencia con UiPagination ​

UiPaginationUiCursorPagination
TipoOffset (page/limit)Cursor (keyset)
Conoce el total✅❌
Navegación directa a página N✅❌
Eficiencia en tablas grandesLento (OFFSET)Rápido (índice)
Usado enMembers, Branches, RolesAudit logs

Documentación de Kaleo — plataforma SaaS multi-tenant