Laravel 9 Livewire Datatables Example

Steps for Laravel 9 Livewire Datatables Example:

Step 1: Installing fresh new Laravel 9 Application
Step 2: Creating Database and Configuration
Step 3: Creating Dummy Records using Tinker Factory
Step 4: Installing Livewire and Livewire-Datatables Package
Step 5: Creating Component
Step 6: Creating Route
Step 7: Creating Blade View File
Step 8 Testing
Step 9: Conclusion

Also Read: Install NextUI with React Js in Laravel 9

Step 1: Installing fresh new Laravel 9 Application

First, we are installing a fresh new laravel 9 application. To install a laravel application run the following command in terminal.

composer create-project laravel/laravel livewire-datatables

cd livewire-datatables

Note: “livewire-datatables” is our laravel application name.

**Installing fresh new Laravel 9 Application**

Step 2: Creating Database and Configuration

Now, we will create a database. First open phpmyadmin and create a database with name “livewire-datatables” (you may use anything you like).

Creating Database - Laravel 9 Livewire Datatables Example — **Creating Database**

Now we are going to add the database details to the laravel application. Open .env file and enter the database details.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=livewire-datatables
DB_USERNAME=root
DB_PASSWORD=

Database Configuration - Laravel 9 Livewire Datatables Example — **Database Configuration**

Now migrate the following to create tables with the following command.

php artisan migrate

Also Read: Laravel 9 Install Vue JS Example

Step 3: Creating Dummy Records using Tinker Factory

Now we will create a dummy records for users using tinker factory. Run the following command to create a dummy records.

php artisan tinker
App\Models\User::factory()->count(100)->create()

**Creating Dummy Records using Tinker Factory**

Also Read: React JS Image Upload using Vite in Laravel 9 Example

Step 4: Installing Livewire and Livewire-Datatables Package

In this step, we are installing Livewire and Livewire-datatables package.

Install Livewire:

composer require livewire/livewire

Install livewire-datatables package:

composer require mediconesystems/livewire-datatables --with-all-dependencies

–with-all-dependencies is use to upgrade or downgrade the other package to match with the this package.

Step 5: Creating Component

Now, we will create component file. Run the following command to create a component file.

php artisan make:livewire user-datatables

The above command will create a two file:

app/Http/Livewire/UserDatatables.php
resources/views/livewire/user-datatables.blade.php

Now update the file with the below code.

app/Http/Livewire/UserDatatables.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\User;
use Illuminate\Support\Str;
use Mediconesystems\LivewireDatatables\Column;
use Mediconesystems\LivewireDatatables\NumberColumn;
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')
                ->label('Email'),
  
            DateColumn::name('created_at')
                ->label('Creation Date')
        ];
    }
}

Also Read: Create Custom Artisan Command Laravel 9 Example

Step 6: Creating Route

Now we will create route for our application. Add the following route to you routes/web.php

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::get('user-datatables', function () {
    return view('default');
});

Step 7: Creating Blade View File

Final step is to create a blade view file which we are call from route. Create default.blade.php in resources/views folder and add the following code.

resources/views/default.blade.php

<!DOCTYPE html>
<html>
<head>
  <title>Laravel 9 Livewire Datatables Example - LaravelTuts.com</title>
  @livewireStyles
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
</head>
<body>
  <div class="container mx-auto">
    <div class="shadow-sm rounded bg-gray-200 p-10 my-10">
      <div class="text-center text-2xl font-bold mb-10">
        Laravel 9 Livewire Datatables Example - LaravelTuts.com
      </div>
      <div class="card-body">
        <livewire:user-datatables 
          searchable="name, email"
          exportable
        />
      </div>
    </div>
  </div>
</body>
@livewireScripts
</html>

Also Read: How to create SEO friendly sluggable URL Laravel 9 Example

Step 8 Testing

Now its time to test the laravel application. Run the following command to start the laravel server.

php artisan serve

Then open the following URL in any web browser.

http://127.0.0.1:8000/user-datatables

Preview:

Step 9: Conclusion

Today, We had learn Laravel 9 Livewire Datatables Example. Hope this tutorial helped you with learning Laravel 9. If you have any question you can ask us at comment section below. If you like the tutorial please subscribe our YouTube Channel and follow us on social network Facebook and Instagram.

Also Read: Restrict User Access from IP Address in Laravel 9 Tutorial