Datatables with Livewire in Laravel 8

This is Laravel 8 Livewire DataTable tutorial and in this tutorial, you can learn How to install Livewire Datatable package in Laravel 8 framework and then after you can find the solution of how to implement DataTables in Laravel 8 framework using Livewire DataTable package.

In this post we will use Laravel mediconesystems/livewire-datatables package for implement DataTables in Laravel 8 framework and even you can use this Livewire package with existing version of Laravel 6, Laravel 7 also.

As a Laravel developer, we have know Livewire is a full stack framework which have been used with Laravel framework and by using Livewire we can make dynamic interface without leaving the conform of Laravel. The main benefits of Livewire package is that, if you have using Livewire with Laravel framework, then you do not have to worry about creating jQuery or Ajax code. This is because Livewire package will help your to make jQuery Ajax code using PHP and you application form will be submitted without refresh of web page with Laravel validation.

Now we have come to point of How to implement DataTables with Livewire package in Laravel 8 framework. So for this you have to follow following steps.

• 1. Download Laravel 8 Framework
• 2. Make Database connection
• 3. Create Model Class
• 4. Create Table in Mysql Database
• 5. Import Dummy Data into Mysql Table
• 6. Install Livewire Package
• 7. Install Livewire DataTables Package
• 8. Make Livewire Components
• 9. Create Routes
• 10. Change in Livewire Component Class File
• 11. Change in Welcome Blade File
• 12. Run Laravel Server

1. Download Laravel 8 Framework

In first steps, we have to download latest version of Laravel framework. So we have to go command prompt and write following command.

composer create-project --prefer-dist laravel/laravel livewire_datatable

This command will make livewire_datatable directory and under that directory it will download and install Laravel 8 framework.

2. Make Database connection

After downloading Laravel framework, next we want to make database connection. So for this we have to open .env file and under this file we have to define Mysql database configuration. After define database configuration it will make database connection.

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=testing
DB_USERNAME=root
DB_PASSWORD=

3. Create Model Class

Once you have make database connection, after this we have to make model class for perform database related operation. For this we have to run following command in command prompt.

php artisan make:model Ld -m

This command will make Ld.php class file under app/Models folder and migration file under database/migrations folder. This migration file we will used for make table in Mysql database.

4. Create Table in Mysql Database

After creating migration file, we have to open migration file and under that file we have to define table definition like define table column, which you can seen below.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateLdsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('lds', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->string('gender');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('lds');
    }
}

Once you have define table column in migration file, next we want to import this table definition to mysql database. For this we have go to command and write following command.

php artisan migrate

This command will migrate above table definition to mysql database and under mysql database it will make lds table.

5. Import Dummy Data into Mysql Table

After creating table in Mysql database using composer, next we want to fill table with dummy data. So for this first we have go to command prompt and write following command.

php artisan make:factory Ld

This command will make factory class file under database/factories folder. So we have to open that factory class and under that class we have to define fake data definition which you can seen below.

database/factories/LdFactory.php

<?php

namespace Database\Factories;

use App\Models\Ld;
use Illuminate\Database\Eloquent\Factories\Factory;

class LdFactory extends Factory
{
    /**
     * The name of the factory's corresponding model.
     *
     * @var string
     */
    protected $model = Ld::class;

    /**
     * Define the model's default state.
     *
     * @return array
     */
    public function definition()
    {
        $gender = $this->faker->randomElement(['Male', 'Female']);
        return [
            'name'      =>  $this->faker->name,
            'email'     =>  $this->faker->unique()->safeEmail,
            'gender'    =>  $gender
        ];
    }
}

Next we have go to command prompt and run following command.

php artisan tinker

This command will enable to write shell script in command prompt. So after enable for write shell script, we have to write following command, which will generate 100 fake data in lds table.

Ld::factory()->count(100)->create()

So this way we can generate fake data using factory class file in Laravel framework.

6. Install Livewire Package

Once you have generate fake data in Mysql table, next we want to install Livewire package in Laravel 8 framework. For this we have go to command prompt and run following command.

composer require livewire/livewire

This command will download and install Livewire package in Laravel 8 framework.

7. Install Livewire DataTables Package

After completing process of installing Livewire package in Laravel framework, next for use DataTable with Livewire package in Laravel framework, we have to download and install Mediconesystems Livewire Datatables package. For this we have to go command prompt and run following command.

composer require mediconesystems/livewire-datatables

This command will download and install Livewire DataTables package in Laravel 8 framework. Now we have can implement Livewire DataTable in Laravel framework.

8. Make Livewire Components

After download and install of Livewire DataTable package, next we want to create livewire component, so we have go to command prompt and run following command.

php artisan make:livewire livewire-datatables

This command will create following two files.

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

9. Create Routes

In this step, We have to create routes for Laravel application. So, We have open web.php file from the routes directory of Laravel framework, and update the following routes into the web.php file:

routes/web.php

Route::get('livewire-datatables', function () {
    return view('welcome');
});

10. Change in Livewire Component Class File

In this step, we have to update the LivewireDatatables.php component file with the following code, which has been placed on app/Http/Livewire folder:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Ld;
use Illuminate\Support\Str;
use Mediconesystems\LivewireDatatables\Column;
use Mediconesystems\LivewireDatatables\NumberColumn;
use Mediconesystems\LivewireDatatables\DateColumn;
use Mediconesystems\LivewireDatatables\Http\Livewire\LivewireDatatable;

class LivewireDatatables extends LivewireDatatable
{
    public $model = Ld::class;

    function columns()
    {
    	return [
    		NumberColumn::name('id')->label('ID')->sortBy('id'),
    		Column::name('name')->label('Name'),
    		Column::name('email')->label('Email Address'),
    		Column::name('gender')->label('Gender'),
    		DateColumn::name('created_at')->label('Creation Date')
    	];
    }
}

11. Change in Welcome Blade File

Under this step, we have to open resources/views/welcome.blade.php file and update following code under this file.

resources/views/welcome.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Datatables with Livewire in Laravel 8</title>
    @livewireStyles
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.2/tailwind.min.css" integrity="sha512-l7qZAq1JcXdHei6h2z8h8sMe3NbMrmowhOl+QkP3UhifPpCW2MC4M0i26Y8wYpbz1xD9t61MLT9L1N773dzlOA==" crossorigin="anonymous" />
</head>
<body>
<style>
    .rounded-lg, .rounded-b-none 
    {
        width: 1140px;
    }

    .form-input
    {
        width: 450px;
        height: 30px;
    }
</style>
<div class="container mx-auto">
    <br />
    <div class="flex items-center markdown">
        <h1 style="font-size: 2em;"><b>Datatables with Livewire in Laravel 8</b></h1>
    </div>
    <br />
    <div class="flex mb-4">
        <livewire:livewire-datatables searchable="name, email, gender" exportable />
    </div>
        
</div>
    
</body>
@livewireScripts
</html>

12. Run Laravel Server

This is last step and under this step, we have to open command prompt and run following command which will start Laravel development server.

php artisan serve

After run above command then it will start Laravel Development server and provide us base url of our Laravel application. For check above code we have to hit following url in browser.

http://127.0.0.1:8000/livewire-datatables