Description
Flux version
v2.1.6
Livewire version
v3.6.3
Tailwind version
v4.0.7
Browser and Operating System
Chrome / Edge on Win11
What is the problem?
Hi team,
I'm building an admin CMS with Laravel 12 and the Livewire Starter Kit (Breeze). My index page for resources (e.g., Pages) uses a typical controller method that retrieves paginated results via
$pages = Page::orderBy('sort_order')->paginate(5);
and returns them to the view. The route uses the standard Laravel resource controller pattern (Route::resource('pages', ...)), protected by authentication middleware.
The index view leverages the Breeze layout (x-layouts.app) and renders the paginated table with <flux:table :paginate="$pages">. The pagination control displays properly, but when clicking on any page or next/previous, the content does not update (the page does not change). This occurs even though the paginator instance is provided and works as expected with standard Laravel Blade pagination.
I resolved this by adjusting the pagination markup to use <a href="..."> links when not running inside Livewire, and <button wire:click="..."> when running inside a Livewire component—I detect Livewire context with isset($_instance). Since both the table and pagination are Flux Pro components, I'm not sharing the code here, but I will be more than happy to provide the full code for your evaluation upon request.
Please advise if there’s an official solution or if I missed a recommended approach for hybrid Blade + Livewire projects using FluxUI’s table and pagination components.
Thank you!
Code snippets
{{-- In your Blade view, e.g. resources/views/admin/pages/index.blade.php --}}
@php
// $pages is a LengthAwarePaginator from: Page::orderBy('sort_order')->paginate(5)
@endphp
<flux:card>
<flux:table :paginate="$pages">
<flux:table.columns>
<flux:table.column>ID</flux:table.column>
<flux:table.column>Title</flux:table.column>
<flux:table.column>Status</flux:table.column>
{{-- Add your other columns --}}
</flux:table.columns>
<flux:table.rows>
@foreach ($pages as $page)
<flux:table.row>
<flux:table.cell>{{ $page->id }}</flux:table.cell>
<flux:table.cell>{{ $page->title }}</flux:table.cell>
<flux:table.cell>{{ $page->status }}</flux:table.cell>
{{-- Add your other cells --}}
</flux:table.row>
@endforeach
</flux:table.rows>
</flux:table>
</flux:card>public function index()
{
$pages = Page::orderBy('sort_order')->paginate(5);
return view('admin.pages.index', compact('pages'));
}How do you expect it to work?
This is how I make it to work (general idea - full solution can be provided):
@php
$isLivewire = isset($_instance); // Detect if inside Livewire
@endphp
<div class="pagination">
{{-- Previous --}}
@if ($paginator->onFirstPage())
<span class="disabled">Prev</span>
@else
@if ($isLivewire)
<button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" class="page-btn">Prev</button>
@else
<a href="{{ $paginator->previousPageUrl() }}" class="page-link">Prev</a>
@endif
@endif
{{-- Page Numbers --}}
@foreach ($paginator->elements() as $element)
@if (is_string($element))
<span class="dots">{{ $element }}</span>
@endif
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
<span class="active-page">{{ $page }}</span>
@else
@if ($isLivewire)
<button
type="button"
wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')"
class="page-btn"
>{{ $page }}</button>
@else
<a
href="{{ $url }}"
class="page-link"
>{{ $page }}</a>
@endif
@endif
@endforeach
@endif
@endforeach
{{-- Next --}}
@if ($paginator->hasMorePages())
@if ($isLivewire)
<button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" class="page-btn">Next</button>
@else
<a href="{{ $paginator->nextPageUrl() }}" class="page-link">Next</a>
@endif
@else
<span class="disabled">Next</span>
@endif
</div>Please confirm (incomplete submissions will not be addressed)
- I have provided easy and step-by-step instructions to reproduce the bug.
- I have provided code samples as text and NOT images.
- I understand my bug report will be closed if I haven't met the criteria above.