Home Laravel Laravel 9 Livewire Datatables

Laravel 9 Livewire Datatables

by Shahriar Sagor

Hello Dev today now in this short tutorial, i will cover a laravel 9 livewire datatables. If you want to know about an example of laravel 9 livewire datatable then i hope you are in right place. Here i will use datatables in laravel 9 livewire example. Now in this post i will give you a very simple example of laravel 9 mediconesystems/livewire-datatables.

Now in this tutorial, i will create laravel livewire datatables by using the laravel MedicOneSystems/livewire-datatables package.

We know that Livewire is a full-stack framework for Laravel that will makes building dynamic interfaces simple, without leaving the comfort of Laravel. If we are using the livewire with laravel then we don’t worry about writing the jquery ajax code, livewire will help us to write very simple way jquery ajax code by using php. without the page refresh laravel validation will work, form will submit etc.

Here, I will be give you a straightforward example of creating the data tables with a users table and then I will display data by using datatables in the blade file. So here i will use only livewire/livewire package.

So, let’s start and follow the bellow step:

Step 1 : Install Laravel

At first of all i have to need a fresh Laravel version application by using the bellow command. So need to open our terminal OR command prompt and then run bellow command:

composer create-project laravel/laravel example-app

Step 2 : Create Dummy Records using Tinker Factory

Now we have to run the following command to create the dummy records in our users table. So let’s run both command:

php artisan tinker
App\Models\User::factory()->count(100)->create()

Step 3: Install Livewire & livewire-datatables Package

Then now in this step, i will simply install the livewire to my laravel application by using bellow command:

composer require livewire/livewire  
composer require mediconesystems/livewire-datatables
Step 4: Create Component

Now here i will create livewire component by using their command. So just run the bellow command to create datatables component.

php artisan make:livewire user-datatables

Now they will created the fies on both path:

app/Http/Livewire/UserDatatables.php  
resources/views/livewire/user-datatables.blade.php

Now both file i will update as like as bellow for our contact us form.

app/Http/Livewire/UserDatatables.php

<?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 5: Create Route

now i will create one new route for calling our example, So let’s add the new route to web.php file as bellow:

routes/web.php

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

Step 6: Create View File

here, i will create the blade file for call form route. Now in this file i will use @livewireStyles, @livewireScripts and also @livewire(‘contact-form’). so let’s add and do it.

resources/views/default.blade.php

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

Run Laravel App:

That’s good all the required steps have been done. Now we have to type the given below command and then hit enter for run the Laravel application:

php artisan serve

Read Also : How to Store Array in Database Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook

close

You may also like