Laravel 9 Livewire Datatables Example Step By Step

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.