Pagination
A responsive component for navigating through paginated data.
Examples
Basic Pagination
Standard layout with few pages.
blade
<x-plume::form
formData="{ 'currentPage': 1 }">
<x-plume::pagination :total="5" model="currentPage" class="w-full" />
</x-plume::form>Many Pages
Automatically handles ellipses for large page counts.
blade
<x-plume::pagination :total="20" :current="10" class="w-full" />| Prop | Type | Default | Description |
|---|---|---|---|
| total | int | 1 | Total number of pages. |
| current | int | 1 | Currently active page. |
| onEachSide | int | 1 | Number of page links to show on each side of the current page. |
| model | string | null | AlpineJS model name for the current page. |
| onPageChange | string | null | AlpineJS expression or function to call when the page is changed. |
Events
| Event | Payload | Description |
|---|---|---|
| plume-page-change | {page: number} | Dispatched when a page is clicked. |
Usage
blade
<x-plume::pagination :total="20" :current="10" @change="page = $event.detail.page" />