How to use the pagination in Laravel Livewire with the Functional version not class based?

Updated: Feb 24, 2025

How to use the pagination in Laravel Livewire with the Functional version not class based?

To use pagination in Laravel Livewire with the functional version (not class-based), you can follow these steps:

  1. Fetch the data from the database using the useLivewire and Livewire facades, and apply the paginate method to the data.
<?php

namespace App\Http\Livewire\Functional;

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

class PaginationFunctional extends Component
{
    use WithPagination;

    public function render()
    {
        return view('livewire.functional.pagination', [
            'users' => User::latest()->paginate(5),
        ]);
    }
}
  1. In your blade view file, you need to use the @livewireStyles and @livewireScripts directives to include the Livewire CSS and JavaScript files.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @livewireStyles
    <title>Pagination Functional</title>
</head>
<body>
    <div class="container">
        <table class="table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($users as $user)
                    <tr>
                        <td>{{ $user->id }}</td>
                        <td>{{ $user->name }}</td>
                        <td>{{ $user->email }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        {{ $users->links() }}
    </div>

    @livewireScripts
</body>
</html>
  1. In the render method of your Livewire component, you need to pass the paginated data to the view file.
public function render()
{
    return view('livewire.functional.pagination', [
        'users' => User::latest()->paginate(5),
    ]);
}
  1. Finally, in your blade view file, you can use the $users variable to display the paginated data and the $users->links() method to display the pagination links.
{{ $users->links() }}

That's it! You have successfully implemented pagination in Laravel Livewire with the functional version.