Laravel 9 Livewire Datatables Example

Hi Dev, Today we are going to learn Laravel 9 Livewire Datatables Example. In this tutorial we are going to cover laravel 9 livewire datatables with example. we are creating laravel livewire datatables using MedicOneSystems/livewire-datatables package.

Laravel Livewire is a library that makes it simple to build modern, reactive, dynamic interfaces using Laravel Blade as your templating language. This is a great stack to choose if you want to build an application that is dynamic and reactive but don’t feel comfortable jumping into a full JavaScript framework like Vue.

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
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
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:

Laravel 9 Livewire Datatables Example
Laravel 9 Livewire Datatables Example

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

4 Comments

Leave a Reply