Code your dreams into reality.
Every line of code is a step towards a better future.
Embrace the bugs, they make you a better debugger.
Laravel 11 Livewire DataTable Tutorial

Laravel 11 Livewire DataTable Tutorial

Last Updated on June 14, 2024 by

In Laravel 11 Livewire application, you can implement dynamic DataTables with advanced feature using mediconesystems/livewire-datatables.

Let’s start to implement dataTable with livewire in application:

Step 1: Install Livewire

Run the following command to install livewire:

composer require livewire/livewire

Step 2: Install DataTable

Run the following command to install dataTable:

composer require mediconesystems/livewire-datatables

Step 3: Create DataTable Component

Run the following command to create a livewire datatable component:

php artisan make:livewire user-datatables

Edit app/Http/Livewire/UserDatatables.php file, and implement dataTable logic on server side:

<?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 4: Import Component in View

Edit resources/views/welcome.blade.php file, and import dataTable view component in file:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Livewire DataTable Tutorial - Itcodstuff.com</title>
    @livewireStyles
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h2>Laravel 11 Livewire DataTable Tutorial - Itcodstuff.com</h2>
                    </div>
                    <div class="card-body">
                        <livewire:user-datatables 
                        sort="name|asc"
                        searchable="name, email"
                        hide="latitude, longitude"
                        exportable />
                    </div>
                </div>
            </div>
        </div>
    </div>
    @livewireScripts
</body>
</html>

Step 5: Test Application

Run php artisan serve command to start application server:

php artisan serve

Open the following url in browser for test this application:

http://localhost:8000/

Leave a Comment