Pagination is a crucial feature in web applications, especially when dealing with large datasets. Laravel provides built-in support for pagination, and when combined with Livewire, it becomes even more dynamic, allowing seamless page transitions without full-page reloads.

In this article, we'll explore how to implement pagination in Laravel Livewire, covering both traditional Livewire components and Livewire Volt-based components. We'll also dive into customizing pagination links and handling edge cases.

Prerequisites

Before diving into implementation, ensure you have the following:

• Laravel 10+ installed
• Livewire installed (composer require livewire/livewire)
• Basic knowledge of Laravel and Blade
• A database with some seeded data for pagination examples

Setting Up Pagination in Livewire

Livewire provides built-in pagination using the WithPagination trait. It handles paginated results dynamically without requiring a full page reload.

Step 1: Install and Configure Livewire

If you haven’t installed Livewire yet, run the following command:

 composer require livewire/livewire

Step 2: Create a Livewire Component

Let's create a component to display paginated records from a Post model:

php artisan make:livewire PostTable
 

This creates two files:

• app/Livewire/PostTable.php
• resources/views/livewire/post-table.blade.php

Step 3: Implementing Pagination in Livewire

Modify PostTable.php to use pagination:

 namespace App\Livewire;

use Livewire\Component;
use Livewire\WithPagination;
use App\Models\Post;

class PostTable extends Component
{
    use WithPagination;

    public function render()
    {
        return view('livewire.post-table', [
            'posts' => Post::paginate(10),
        ]);
    }
}
 

Step 4: Displaying Paginated Results in Blade

Modify post-table.blade.php to display paginated records:

 <div>
    <table class="w-full border">
        <thead>
            <tr>
                <th class="border px-4 py-2">ID</th>
                <th class="border px-4 py-2">Title</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($posts as $post)
                <tr>
                    <td class="border px-4 py-2">{{ $post->id }}</td>
                    <td class="border px-4 py-2">{{ $post->title }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>

    <div class="mt-4">
        {{ $posts->links() }}
    </div>
</div>

Now, when you visit the component, it will paginate the Post model and render pagination links.

Handling Pagination State Persistence

Livewire persists pagination state by default. To reset pagination when filtering, use:

public function updatingSearch()
{
    $this->resetPage();
} 

Customizing Pagination Links

You can customize pagination links by using Bootstrap:

 protected $paginationTheme = 'bootstrap';

And ensure Bootstrap is installed:

npm install bootstrap
 

Or publish the Laravel pagination views and modify them:

php artisan vendor:publish --tag=livewire-pagination
 

Modify the generated resources/views/vendor/livewire/tailwind.blade.php or bootstrap.blade.php as needed.

Implementing Pagination in Livewire Volt

Volt is an alternative way to use Livewire components without separate Blade files. Here's how to implement pagination in Volt.

Step 1: Install Volt

If you haven't installed Volt yet, run:

composer require livewire/volt
 

Step 2: Create a Volt Component

Create a new Volt component:

<?php

use Livewire\Volt\Component;
use Livewire\WithPagination;
use App\Models\Post;

class PostList extends Component
{
    use WithPagination;

    public function getPostsProperty()
    {
        return Post::paginate(10);
    }
}
?>

<div>
    <table class="w-full border">
        <thead>
            <tr>
                <th class="border px-4 py-2">ID</th>
                <th class="border px-4 py-2">Title</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($this->posts as $post)
                <tr>
                    <td class="border px-4 py-2">{{ $post->id }}</td>
                    <td class="border px-4 py-2">{{ $post->title }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>

    <div class="mt-4">
        {{ $this->posts->links() }}
    </div>
</div>

Why This Works

• Volt eliminates the need for render()
• Pagination is handled via a computed property (getPostsProperty)
• Works seamlessly with Livewire's pagination system

Advanced Pagination Techniques

Paginating Relationships

You can paginate related models:

$comments = $post->comments()->paginate(5);
 

Infinite Scroll with Livewire

Replace paginate() with simplePaginate() and add an infinite scroll button:

<button wire:click="loadMore">Load More</button>
 

In Livewire component:

public function loadMore()
{
    $this->perPage += 5;
}

Conclusion

Implementing pagination in Laravel Livewire is seamless and powerful, whether using traditional components or Volt. By leveraging Livewire’s built-in pagination features, you can create dynamic and efficient user experiences without reloading the page.