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
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)
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
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
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
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')
];
}
}
?>
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>
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');
});
Step 8: Run Our Laravel Application
We can start the server and run this example using the below command.
php artisan serve
Now we will run our example using the below Url in the browser.
http://127.0.0.1:8000/user-datatables
