It’s 2022 and people are still using the old jquery tables with Laravel. As laravel have the livewire why do we have to use the jquery tables ??
In this tutorial, we are going to use the livewire tables and gonna see the benefits of it.
The main problem I see with Jquery Datatable is :
- Page will flicker when we do any search, as it will fire the server-side query and fetch results
- HTML Appending into JS for action column
- It’s not easy to customize the row, we have to write the HTML into JS
The main benefits of using Laravel Livewire tables are:
- After searching results will be quickly updated on-page, without flickering
- As the Livewire table is JS less, Of course, you don’t have to append HTML into it. you can do it via blade files 🙂
- You can easily customize the row and tables view by adding your custom blade views.
How to integrate Bootstrap Livewire tables?
For that we are going to use the following package :
https://github.com/rappasoft/laravel-livewire-tables
Install Package
composer require rappasoft/laravel-livewire-tables
Publish Assets
php artisan vendor:publish –provider=”Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider” –tag=livewire-tables-config
php artisan vendor:publish –provider=”Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider” –tag=livewire-tables-views
php artisan vendor:publish –provider=”Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider” –tag=livewire-tables-translations `
Choosing Bootstrap 5 theme
Into the published config file you can choose/change theme to bootstrap-5
return [
/**
* Options: tailwind | bootstrap-4 | bootstrap-5.
*/
'theme' => 'bootstrap-5',
];
Render the components
<livewire:members-table />
Create Component
namespace App\Http\Livewire;
use App\Models\User;
use Rappasoft\LaravelLivewireTables\DataTableComponent;
use Rappasoft\LaravelLivewireTables\Views\Column;
class MembersTable extends DataTableComponent
{
protected $model = User::class;
public function configure(): void
{
$this->setPrimaryKey('id');
}
public function columns(): array
{
return [
Column::make('ID', 'id')
->sortable(),
Column::make('Name')
->sortable(),
];
}
}
That’s It 🙂
That’s it, and you will see the bootstrap-5 Laravel livewire table. it have other lot’s of fucntionality too, you can use or disable it as per your need.
