A flexible pagination component with smart page windowing, ellipsis, prev/next controls, and an optional results summary. Works with Laravel paginators or manually with Livewire.
Pass a LengthAwarePaginator to the :paginator prop. URL links and the "Showing X–Y of Z" summary are derived automatically.
{{-- Pass a LengthAwarePaginator from your Livewire computed property --}}
#[Computed]
public function users(): LengthAwarePaginator
{
return User::paginate(10);
}
<x-ui::pagination :paginator="$this->users" />
Three sizes to match the density of your layout. The default is md.
Small
Medium
Large
<x-ui::pagination :paginator="$this->users" size="sm" />
<x-ui::pagination :paginator="$this->users" size="md" />
<x-ui::pagination :paginator="$this->users" size="lg" />
Pass :page and :total-pages instead of a paginator. The component fires a page-change window event — listen with x-on:page-change.window and call your Livewire method.
Current page (server): 6 of 15
// Livewire component
public int $page = 1;
public int $perPage = 10;
public int $totalPages;
public function setPage(int $page): void
{
$this->page = $page;
}
// Template — listen for the page-change window event
<div x-on:page-change.window="$wire.setPage($event.detail.page)">
<x-ui::pagination
:page="$page"
:total-pages="$totalPages"
/>
</div>
Control how many page numbers appear on either side of the active page with :on-each-side. Increase it when you have more horizontal space.
onEachSide = 1 → [1 … 5 6 7 … 15]
onEachSide = 2 → [1 … 4 5 6 7 8 … 15]
{{-- 1 page on each side of current (default) → [1 … 5 6 7 … 15] --}}
<x-ui::pagination :page="6" :total-pages="15" :on-each-side="1" />
{{-- 2 pages on each side → [1 … 4 5 6 7 8 … 15] --}}
<x-ui::pagination :page="6" :total-pages="15" :on-each-side="2" />
Set :show-info="false" to hide the "Showing X–Y of Z" summary and render only the page controls.
<x-ui::pagination :paginator="$this->users" :show-info="false" />