Laravel 10 Livewire Datatables Tutorial

Laravel 10 livewire dataTable example tutorial. In this tutorial, you will learn how to install livewire datatable and implement dataTable in Laravel 10 app using the livewire datatable.

So, you’ll learn how to integrate datatables in Laravel 10 using livewire. This tutorial will give you easy example of Laravel 10 mediconesystems/livewire-datatables.

Laravel 10 Livewire DataTable Example Tutorial

Step 1 – Download Laravel 10 App
Step 2 – Connecting 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 10 App

First of all, start your terminal to download or install Laravel 10 new setup. Execute the following command into it to install new Laravel 10 app into your system:

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

Step 2 – Connecting App To Database

Configure your database with your apps. So, visit your app root directory and find .env file. Then configure database details as follows:

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

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

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

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

Step 5 – Create 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');
});

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

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 10 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 Livewire Example - Tutsmake.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

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

php artisan serve

Then open your browser and hit the following url on it:

http://127.0.0.1:8000/user-datatables

Laravel 10 Livewire DataTable Example Tutorial

Step 1 – Download Laravel 10 App

Step 2 – Connecting 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

Recommended Laravel Posts

Related

Laravel 10 Livewire Select2 Dropdown Tutorial Example

Laravel 10 Livewire Charts Tutorial Example

Jaspreet Singh Ghuman

Services

Quick Links

Contact