Laravel 11 Livewire Datatable Example Tutorial

by

In this guide, we will explore the steps to develop a custom dynamic datatable using Laravel 11 and Livewire 3.

In a Laravel 11 Livewire Datatable Example Tutorial, you can set up dynamic DataTables with advanced features using the mediconesystems/livewire-datatables package. Here’s how to implement a DataTable with Livewire:

Step 1: Install Livewire

Begin by installing Livewire using Composer:

composer require livewire/livewire

Step 2: Install DataTable

Next, install the DataTable package:

composer require mediconesystems/livewire-datatables

Step 3: Create DataTable Component

Generate a Livewire DataTable component with the following command:

php artisan make:livewire user-datatables

Then, update the UserDatatables component located at app/Http/Livewire/UserDatatables.php to include the DataTable logic:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\User;
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;

    /**
     * Define the columns for the DataTable
     *
     * @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 the resources/views/welcome.blade.php file to include the DataTable component:

<!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

Start the Laravel server by running:

php artisan serve

Then, open your browser and navigate to:

http://localhost:8000/

This will allow you to see and interact with the DataTable integrated into your Livewire application.