#Pagination Component

#Introduction

The pagination component provides a flexible, accessible navigation system for paginated data. Built on top of Laravel's pagination system, it automatically detects whether you're using simple pagination or length-aware pagination and renders the appropriate interface. With two visual variants and full Livewire integration, it seamlessly handles user navigation through large datasets.

#Installation

Use the sheaf artisan command to install the pagination component:

php artisan sheaf:install pagination

Once installed, you can use the <x-ui.pagination /> component in any Livewire component.

#Basic Usage

#With Length-Aware Pagination

Length-aware pagination provides page numbers and total count, ideal for datasets where users need to know the total number of pages.

use Src\Components\Livewire\Concerns\WithPagination;

class UsersTable extends Component
{
    use WithPagination;

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

<!-- In your view -->
<div>
    @foreach($users as $user)
        <div>{{ $user->name }}</div>
    @endforeach

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

#With Simple Pagination

Simple pagination only shows Previous/Next buttons without total page count, optimized for large datasets where counting all records would be expensive.

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

<!-- Same view code works automatically -->
<x-ui.pagination :paginator="$users" />

Note: The component automatically detects whether you're using paginate() or simplePaginate() and renders the appropriate interface.

#Pagination Variants

#Default Variant

Compact pagination with minimal UI on the right corner for simple and length-aware paginations. No loading indicators.

#Full Variant

Comprehensive pagination with item counts, page information, and per-page selector (for length-aware only). Expands to full width for simple pagination. Includes loading indicators.

Features:

• Shows "1-15 of 150" item range
• Displays "Page 1 of 10"
• Includes per-page selector (10, 20, 30...)
• First/Last page buttons

#Usage with Table Component

The pagination component integrates seamlessly with the table component.

#Basic Integration

<x-ui.table :paginator="$users">
    <x-ui.table.header>
        <x-ui.table.columns>
            <x-ui.table.head>Name</x-ui.table.head>
            <x-ui.table.head>Email</x-ui.table.head>
        </x-ui.table.columns>
    </x-ui.table.header>

    <x-ui.table.rows>
        @foreach($users as $user)
            <x-ui.table.row>
                <x-ui.table.cell>{{ $user->name }}</x-ui.table.cell>
                <x-ui.table.cell>{{ $user->email }}</x-ui.table.cell>
            </x-ui.table.row>
        @endforeach
    </x-ui.table.rows>
</x-ui.table>

Tip: When you pass :paginator to the table component, it automatically renders pagination at the bottom. No need to add <x-ui.pagination> separately!

#Specifying Pagination Variant

Control the pagination variant through the table component:

<x-ui.table 
    :paginator="$users" 
    pagination:variant="full"
>
    <!-- Table content -->
</x-ui.table>

#Customization

#Per-Page Options

Customize the available per-page options (default: 10, 20, 30, 40, 50):

<!-- Standalone pagination -->
<x-ui.pagination 
    :paginator="$users" 
    :options="[10, 20, 30]" 
    variant="full" 
/>

<!-- With table component -->
<x-ui.table 
    :paginator="$users" 
    pagination:variant="full"
    :pagination:options="[10, 20, 30]"
>
    <!-- Table content -->
</x-ui.table>

Note: The $perPage property defaults to 15. It's only interactive (user-changeable) when using length-aware pagination with the full variant, which includes a per-page selector.

#Reset Pagination on Filter Change

use Src\Components\Livewire\Concerns\WithPagination;

class UsersTable extends Component
{
    use WithPagination;

    public string $searchQuery = '';

    public function updatedSearchQuery()
    {
        $this->resetPage(); // Reset to page 1 when search changes
    }

    public function render()
    {
        $users = User::query()
            ->when($this->searchQuery, fn($q) => 
                $q->where('name', 'like', "%{$this->searchQuery}%")
            )
            ->paginate($this->perPage);

        return view('livewire.users-table', ['users' => $users]);
    }
}

#Component Props