If you want to avoid Livewire while keeping the power of Yajra, your best bet is combining Spatie's Laravel-Query-Builder with Tailwind-ready Blade Components. Since you're looking for server-side filtering and sorting without the overhead of a heavy JS framework, this approach gives you full control over your HTML while the package handles the complex SQL logic. Alternatively, if you are using an Inertia.js stack, the Inertiajs-Tables package offers a seamless Tailwind experience that feels like a modern SPA but remains purely Laravel-driven at its core. If you didn't find the link, tell me to help you, to find.
Thanks for the detailed response! The Spatie approach sounds like exactly what I need. Could you share the link to the package and maybe a basic example of how to set up server-side sorting and filtering with custom Blade components? I'd love to see how to maintain that Yajra-like functionality with Tailwind styling.
Glad it helped! You can find the package here: spatie/laravel-query-builder. To replicate that Yajra-like functionality with Tailwind, here is a basic implementation:
- Controller Setup
The package handles the request parameters (like
?filter[name]=...and?sort=-created_at) automatically:
use Spatie\QueryBuilder\QueryBuilder;
use App\Models\User;
public function index()
{
$users = QueryBuilder::for(User::class)
->allowedFilters(['name', 'email'])
->allowedSorts(['name', 'created_at'])
->paginate(10);
return view('users.index', compact('users'));
}
- Blade Component (Tailwind Table) Instead of a complex JS configuration, you use simple Blade loops and Tailwind classes:
<div class="overflow-x-auto rounded-lg border border-gray-200">
<table class="min-w-full divide-y divide-gray-200 bg-white text-sm">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-2 font-medium text-gray-900">
<a href="{{ request()->fullUrlWithQuery(['sort' => request('sort') == 'name' ? '-name' : 'name']) }}">
Name @if(request('sort') == 'name') ↓ @elseif(request('sort') == '-name') ↑ @endif
</a>
</th>
<th class="px-4 py-2 font-medium text-gray-900 text-left">Email</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
@foreach($users as $user)
<tr>
<td class="px-4 py-2 text-gray-700">{{ $user->name }}</td>
<td class="px-4 py-2 text-gray-700">{{ $user->email }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="mt-4">
{{ $users->links() }} {{-- Standard Tailwind Pagination --}}
</div>
- Why this works:
Custom Styling: You have 100% control over the
<table>,<tr>, and<td>classes.
Performance: It only queries what is needed via Eloquent.
No Livewire: It uses standard GET requests, making it SEO-friendly and very fast for traditional multi-page applications.
Hope this gets your Tailwind tables up and running!
Thanks again! Just to clarify: are the 'Blade Components' you mentioned native to Laravel? Or do I need a specific library to create this Tailwind table structure?
Great question! Blade Components are 100% native to Laravel. They were introduced in version 7 and require no external libraries or packages.
You can simply create them using php artisan make:component Table, and then write your own Tailwind CSS directly within the component's Blade file. This gives you a clean, reusable, and dependency-free way to build your UI, keeping your code "DRY" without the overhead of extra packages.
Sign in to participate in this thread!
