Skip to content

Overview

The <x-aura::pagination> component renders page navigation controls for paginated datasets. It displays page numbers with ellipsis for large ranges, previous/next buttons, result count information, and an optional per-page selector. The component is designed to integrate directly with Laravel's paginator instances and Livewire's pagination system.

Basic Usage

{{-- In a Livewire component --}}
<x-aura::pagination :paginator="$users" />

// In your Livewire component class
public function render()
{
    return view('livewire.users', [
        'users' => User::paginate(10),
    ]);
}

Props

Prop Type Default Description
paginator LengthAwarePaginator|null null A Laravel paginator instance. The component renders nothing if null or if total is 0.
simple bool false When true, hides page numbers and per-page selector, showing only previous/next buttons.
perPageOptions array [10, 25, 50, 100] Options displayed in the per-page dropdown selector.
showInfo bool true Show the "Showing X-Y of Z results" information text.
showPerPage bool true Show the per-page selector dropdown.

Variants / Examples

Full Pagination with Livewire

{{-- users-table.blade.php --}}
<div>
    <table class="w-full">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            @foreach($users as $user)
                <tr>
                    <td>{{ $user->name }}</td>
                    <td>{{ $user->email }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>

    <x-aura::pagination :paginator="$users" />
</div>

Simple Pagination (Previous / Next Only)

<x-aura::pagination :paginator="$posts" :simple="true" />

Custom Per-Page Options

<x-aura::pagination
    :paginator="$orders"
    :perPageOptions="[5, 10, 20, 50]"
/>

Without Info Text

<x-aura::pagination
    :paginator="$products"
    :showInfo="false"
/>

Minimal (No Per-Page Selector, No Info)

<x-aura::pagination
    :paginator="$results"
    :showInfo="false"
    :showPerPage="false"
/>

Livewire Integration

The pagination component uses wire:click for page navigation and wire:model.live for the per-page selector. In your Livewire component, add a $perPage property to enable the per-page dropdown:

use Livewire\WithPagination;

class UserList extends \Livewire\Component
{
    use WithPagination;

    public int $perPage = 10;

    public function render()
    {
        return view('livewire.user-list', [
            'users' => User::paginate($this->perPage),
        ]);
    }
}

Live Demo

Product Category Price Stock Status
27" Monitor Stand Electronics $45.00 73 Draft
Bamboo Cutting Board Home $22.00 168 Draft
Bath Towel Set Home $34.99 110 Active
Bluetooth Speaker Electronics $42.99 165 Draft
Canvas Sneakers Clothing $44.50 156 Active
Cargo Pants Clothing $54.99 88 Draft
Ceramic Vase Home $32.99 67 Archived
Clean Code Books $39.99 340 Active
Cotton T-Shirt Clothing $24.99 500 Active
Cycling Gloves Sports $22.50 155 Draft

Accessibility

  • The component is wrapped in a <nav> element with role="navigation" and aria-label="Navigazione pagine".
  • Disabled previous/next buttons use aria-disabled="true" so screen readers can identify inactive controls.
  • The current page number is marked with aria-current="page".
  • Previous and next buttons include aria-label attributes (Precedente, Successiva) and rel attributes (prev, next) for semantic navigation.