Laravel 10 Livewire DataTables Example

Laravel 10 livewire dataTable example; Through this tutorial, i am going to show you how to integrate and use livewire datatable in Laravel 10 apps.

Laravel 10 Livewire DataTable Example Tutorial

Follow the below given steps to install and use dataTable using livewire in Laravel 10 apps:

Step 1 – Download Laravel 10 App
Step 2 – Configure App To Database
Step 3 – Install Livewire & DataTable Livewire
Step 4 – Build User DataTable Livewire Component
Step 5 – Create Routes
Step 6 – Update UserDataTable Component File
Step 7 – Update Welcome Blade File
Step 8 – Start Development Server

Step 1 – Download Laravel 9 App

Run the following command on command prompt to install the new Laravel 10 app:

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

Step 2 – Configure App To Database

Setup database with your downloaded/installed Laravel 10 app. So, you need to find .env file and setup database details as following:

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

Step 3 – Install Livewire & DataTable Livewire

Run the following command on terminal to install livewire and dataTables livewire package:

composer require livewire/livewire

composer require mediconesystems/livewire-datatables

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

npm install

To run npm:

npm run dev

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

php artisan migrate

Step 4 – Build User DataTable Livewire Component

To 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

Step 5 – Create Routes

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

Step 6 – 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')
        ];
    }
}

Step 7 – Update Welcome Blade File

Go to resources/views/ directory and open welcome.blade.php. Then update the following code into it:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 10 Livewire DataTable Example - Laratutorials.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 Livewire Example - Laratutorials.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()

Step 8 – Start Development Server

Run the following command on command prompt 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