Laravel 8 Livewire DataTable Example Tutorial

December 11, 2020 XpertPhp

In this article, we will learn to you how to integrate Datatable example in Laravel 8 using Livewire(Laravel 8 Livewire DataTable Example Tutorial).

We can easily create the datatable using the “mediconesystems/livewire-datatables” package. so we will install and use that package.

Overview

Step 1: Install Laravel 8
Step 2: Setting Database Configuration
Step 3: Install Livewire and Datatable Livewire package
Step 4: Create Livewire Component
Step 5: Update Component File
Step 6: Update Blade Files
Step 7: Add Route
Step 8: Run Our Laravel Application

Step 1: Install Laravel 8

We are going to install laravel 8, so first open the command prompt or terminal and go to xampp htdocs folder directory using the command prompt. after then run the below command for laravel 8 install.

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

1	composer create-project --prefer-dist laravel/laravel laravel8_jl_crud

Step 2: Setting Database Configuration

After the complete installation of laravel. we have to database configuration. now we will open the .env file and change the database name, username, password in the .env file. See below changes in a .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name(laravel8_jl_crud)
DB_USERNAME=Enter_Your_Database_Username(root)
DB_PASSWORD=Enter_Your_Database_Password(root)

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=Enter_Your_Database_Name(laravel8_jl_crud)

DB_USERNAME=Enter_Your_Database_Username(root)

DB_PASSWORD=Enter_Your_Database_Password(root)

Step 3: Install Livewire and Datatable Livewire package
now, We will install a livewire package using the below PHP artisan command.

composer require livewire/livewire
composer require mediconesystems/livewire-datatables

1 2	composer require livewire/livewire composer require mediconesystems/livewire-datatables

npm install && npm run dev
php artisan migrate

1 2	npm install && npm run dev php artisan migrate

Step 4: Create Livewire Component

Now, We need to create a livewire component using the following command. so we will below command using create the livewire component.

php artisan make:livewire user-datatables

1	php artisan make:livewire user-datatables

After complete run above command. They created the following directory. so you can change that files as your requirement.

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

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

Step 5: Update Component File
In this step, we will update some methods in this file. so you can see our following file.
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'),
  
            DateColumn::name('created_at')
                ->label('Creation Date')
        ];
    }
}
?>

<?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'),

DateColumn::name('created_at')

->label('Creation Date')

];

}

Step 6: Update Blade Files

So finally, first we need to update the following blade file. so you can see our blade files.

resources/views/welcome.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 8 Livewire DataTable Example Tutorial - XpertPhp</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>
     
<div class="container">
     
    <div class="card">
      <div class="card-header">
        Users List Detail
      </div>
      <div class="card-body">
        <livewire:user-datatables searchable="name, email" exportable />
      </div>
    </div>   
</div>  
</body>
@livewireScripts   
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 8 Livewire DataTable Example Tutorial - XpertPhp</title>

@livewireStyles

</head>

<body>

Users List Detail

</div>

<livewire:user-datatables searchable="name, email" exportable />

</div>

</body>

@livewireScripts

</html>

Step 7: Add Route
We have to need put below student resource route in routes/web.php.
routes/web.php

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

Route::get('user-datatables', function () {

return view('welcome');

});

Step 8: Run Our Laravel Application
We can start the server and run this example using the below command.

php artisan serve

1	php artisan serve

Now we will run our example using the below Url in the browser.

http://127.0.0.1:8000/user-datatables

1	http://127.0.0.1:8000/user-datatables

Laravel 7 Livewire File Upload From Scratch

Please follow and like us:

Related posts: