Hello Artisan,
In this laravel livewire datatable example tutorial, I will show you how we can show data in datatable using Laravel livewire. In this tutorial, You will see a complete example of livewire datatables laravel 9. You can use this example in your Laravel 6, 7, 8 version also.
You know that datatable is a must-needed thing for software to show data. So in this laravel 9 livewire datatable example, we will learn how to generate and show data in datatable in laravel livewire.
In this laravel livewire datatable tutorial, we will create laravel livewire datatables using laravel MedicOneSystems/livewire-datatables
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: Divide Your Posts with Laravel Livewire Pagination
Step 3: Install Livewire & livewire-datatable
Now in this step, we will simply install livewire to our laravel application using below command:
composer require livewire/livewire
composer require mediconesystems/livewire-datatables
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:livewire user-datatables
Now update the below file like that:
app/Http/Livewire/UserDatatables.php
namespace App\Http\Livewire;
use App\Models\User;
use Mediconesystems\LivewireDatatables\NumberColumn;
use Mediconesystems\LivewireDatatables\Column;
use Mediconesystems\LivewireDatatables\DateColumn;
use Mediconesystems\LivewireDatatables\Http\Livewire\LivewireDatatable;
class UserDatatables extends LivewireDatatable
{
public $model = User::class;
/**
* Write code on Method
*
* @return response()
*/
public function columns()
{
return [
NumberColumn::name('id')
->label('ID')
->sortBy('id'),
Column::name('name')
->label('Name'),
Column::name('email'),
DateColumn::name('created_at')
->label('Creation Date')
];
}
}
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('user-datatables', function () {
return view('welcome');
});
Step 6: Create View File
Now update the welcome file like below:
resources/views/welcome.blade.php
Now run php artisan serve
and you can test by visiting the below url:
Read also: How to Find Nearest Location Using Latitude and Longitude in Laravel
Hope it can help you.
#laravel #laravel-9x #livewire