Hello artisan,
In this tutorial, I will show you how to create a functional livewire datatable in laravel 9. Rappasoft laravel livewire datatable is a plugin built for Laravel Livewire that allows us to create simple or advanced dynamic datatables. If you don't know how to use this rappasoft livewire datatable package then this article is for you.
I will simply use User model to generate laravel 9 livewire datatable. We can easily customize and can extends this package. It is very simple to use this package to generate and create laravel 9 livewire datatable. In this laravel 9 livewire datatable tutorial, we will create laravel livewire datatables using laravel rappasoft/laravel-livewire-tables package
. So see the preview image that we are going to make:
Step 1 : Install Laravel
I am going to start from scratch. So download a fresh Laravel project using the below command:
composer create-project laravel/laravel example-app
Step 2 : Create Dummy Records
We need to run the following command to create dummy records in your user's table. let's run both commands:
php artisan tinker
App\Models\User::factory()->count(100)->create()
Read also: Laravel 9 Livewire Datatables Example Step by Step
Step 3: Install Livewire & livewire-datatable
Now in this step, we will simply install livewire to our laravel application using below command:
composer require rappasoft/laravel-livewire-tables
//now
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
Step 4: Create Component
Now here we will create a livewire component using their command. so run the below command to create the data tables component.
php artisan make:datatable UserTable User
Now update the users table class like:
App\Http\Livewire\UserTable.php
namespace App\Http\Livewire;
use Rappasoft\LaravelLivewireTables\DataTableComponent;
use Rappasoft\LaravelLivewireTables\Views\Column;
use App\Models\User;
class UserTable extends DataTableComponent
{
protected $model = User::class;
public function configure(): void
{
$this->setPrimaryKey('id');
$this->setSearchEnabled();
$this->setSearchDebounce(1000);
}
public function columns(): array
{
return [
Column::make("Id", "id")
->sortable(),
Column::make("Name", "name")
->sortable(),
Column::make("Email", "email")
->sortable(),
Column::make("Created", "created_at")
->sortable()
];
}
public function filters(): array
{
return [];
}
}
Step 5: Create Route
Now we will create one route for calling our example, so let's add a new route to the web.php
file as below:
routes/web.php
use Illuminate\Support\Facades\Route;
Route::get('datatables', function () {
return view('welcome');
});
Step 6: Create View File
Now update the welcome file like the below:
resources/views/welcome.blade.php
Read also: Laravel 9 Rest API Development with Laravel Orion
Hope it can help you.
#laravel #laravel-9x #laravel-livewire