Logo

Midnight Owl UI

Pagination

Stable v1.0.2

Pagination controls that shrink and expand their page numbers based on available space, and drop straight into the Table component if you're using it.

1. Interactive Playground (Employee List)

Showcases Custom UI Slots for Selection, Drag Handles, and Accordions to perfectly construct complex cell layouts without breaking column limits.

Features
Appearance
Style Variant:
Soft
Button Size:
Small
Severity:
Primary
Data & State
Total Records:
Rows/Page Options:
1Active Page

1 to 10 of 14,285 records

10 / page
Go to
Awaiting platform click events...
Playground Component Integration
<Pagination
  v-model:current-page="page"
  v-model:rows-per-page="limit"
  :total-records="14285"
  size="sm"
  @page-change="handlePageChange"
/>

2. Local Array Slicing

A perfect demonstration of binding Pagination and Table to the same client-side data array. Change the rows-per-page to watch the math update instantly.

Identity Hash
Account Name
System Role
USR-1000
System Operator 1
Admin
USR-1001
System Operator 2
Operator
USR-1002
System Operator 3
Operator
USR-1003
System Operator 4
Operator
USR-1004
System Operator 5
Operator

1 to 5 of 142 records

5 / page
Go to
Computed Slicing Logic
const paginatedData = computed(() => {
  const start = (enterprisePage.value - 1) * enterpriseRows.value
  const end = start + enterpriseRows.value
  return mockDatabase.slice(start, end) // Hands fragment to Table
})

3. Server-Side Integration (Headless Mode)

When driving APIs (like Laravel LengthAwarePaginator endpoints), use the @page-change emitter to trigger your network fetch layer.

Awaiting API Interaction...

Viewing 1 - 50 of 820,491 DB Records

50 / page
Go to
API Event Dispatch
<Pagination
  v-model:current-page="apiPage"
  v-model:rows-per-page="apiRows"
  :total-records="820491"
  :disabled="isLoading"
  @page-change="executeAxiosFetch"
>
  <!-- Custom Truncated Text Formatting -->
  <template #meta="{ start, end, total }">
    ...
  </template>
</Pagination>

API Reference

Complete specifications for components, props, events, and dynamic slots.

Props

Name
Type / Payload
Default
Description
totalRecords
number
undefined (Required)
The absolute total number of records across all pages.
currentPage
number
undefined (Required)
The currently active page number. Supports v-model binding.
rowsPerPage
number
10
Determines how many records are shown per page. Supports v-model binding.
rowsPerPageOptions
number[]
[10, 20, 50, 100]
Array of numeric options for the rows-per-page dropdown.
showRowsPerPage
boolean
true
Toggles the "10 / page" limit selector, rendered with the library Select component.
showJumpToPage
boolean
true
Toggles the "Go to" quick-jump InputNumber in the meta bar. Jumps on Enter or when the field commits (blur).
disabled
boolean
false
Disables all interactions. Useful during network requests.
size
"xs" | "sm" | "md" | "lg" | "xl"
"lg"
Scales the overall size of the pagination controls.
variant
"solid" | "soft" | "outline" | "text" | "link"
"soft"
Visual weight of the inactive pager buttons; "text" renders them as plain buttons grouped in one bordered box. The active page is always a solid pill in `severity`.
severity
"primary" | "secondary" | "success" | "warning" | "danger" | "info"
"primary"
Semantic color of the active page pill, same core six as Button. Inactive pager buttons stay "secondary" regardless.
rounded
boolean
false
Fully rounded version: circular pager buttons, a pill-shaped limit Select, and a pill quick-jump field.

Events (Emits)

Name
Type / Payload
Default
Description
update:currentPage
(page: number)
-
Fired when the page changes. Enables v-model:currentPage.
update:rowsPerPage
(rows: number)
-
Fired when the user selects a new page size. Enables v-model:rowsPerPage.
page-change
{ page: number, rowsPerPage: number }
-
Fired upon any interaction. Best used for triggering API fetch requests.

Slots

Slot Name
Exposed Bindings
Description
start
-
Injected before the "Showing X to Y" info text (far left of the meta bar on desktop).
meta
{ start: number, end: number, total: number }
Overrides the default "Showing 1 to 10 of 14,285 records" info text in the meta bar.
middle
-
Injected in the meta bar controls group, before the rows-per-page selector.
end
-
Injected at the very end of the pagination container (far right).