Laravel 9 Livewire Datatable Example Tutorial

by

Laravel 9 livewire dataTable example, In this tutorial we are going to share how to install livewire datatable and implement dataTable in laravel with livewire package. Livewire is a full-stack framework for Laravel framework that makes building dynamic interfaces simple, without leaving the comfort of Laravel.

In this tutorial, we will create laravel livewire datatables using laravel MedicOneSystems/livewire-datatables package. Let’s see the use of laravel livewire datatables with laravel 6, laravel 7, laravel 8 and laravel 9 apps.

How to use Datatable In Laravel with Livewire

Follow the following steps to install and use dataTable with livewire in laravel 9 apps:

  • Step 1: Download Laravel App
  • Step 2: Connect App To Database
  • Step 3: Install Livewire & DataTable Livewire
  • Step 4: Build User DataTable Livewire Component
  • Step 5: Make Routes
  • Step 6: Update UserDataTable Component File
  • Step 7: Update Welcome Blade File
  • Step 8: Start Development Server

Download Laravel App

First create new laravel 9 application adding the following command in terminal.

composer create-project --prefer-dist laravel/laravel laravel-livewire-datatables

Now Go into the app:

cd laravel-livewire-datatables

Connect App To Database

Open the .env file and add your database credentials such as database name, username equally important password:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

Install Livewire & DataTable Livewire

In this step, execute the following command on terminal to install livewire and dataTables livewire package in laravel app:

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

Then, execute the “npm install && npm run dev” command to build assets:

npm install
npm run dev

Then, Execute the following command on the terminal to create tables into the database:

php artisan migrate

Build User DataTable Livewire Component

In this step, create users dataTable livewire components by executing the following command on terminal:

php artisan make:livewire user-datatables

This command will create two files, which is located on following path:

app/Http/Livewire/UserDatatables.php

resources/views/livewire/user-datatables.blade.php

Make Routes

In this step, create routes for laravel crud app. So, open web.php file from the routes directory of laravel livewire data tables app. And update the following routes into the web.php file:

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

Update UserDataTable Component File

Now, update the UserDatatables.php component file with the following code, which is placed on app/Http/Livewire directory:

<?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')
        ];
    }
}

Update Welcome Blade File

In this step, open welcome.blade.php file and update the following code into it, which is placed on resources/views/ directory:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 Livewire DataTable Example - Tutsmake.com</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">
        Laravel 9 Livewire DataTable Example - codingdriver.com
      </div>
      <div class="card-body">
        <livewire:user-datatables
            searchable="name, email"
            exportable
         />
   
      </div>
    </div>
         
</div>
     
</body>
   
@livewireScripts
   
</html>

Now, execute the following command on the terminal to create dummy records in database:

php artisan tinker

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

Start Development Server

Last step, open command prompt and run the following command to start developement server:

php artisan serve

Then open browser and hit the following url on it:

http://127.0.0.1:8000/user-datatables

The Laravel Livewire Datatable Example tutorial is over; in this tutorial, we learned the easiest way to integrate on datatables in laravel using the livewire library.

Leave a Comment