Laravel 11 Livewire Datatable Example

Websolutionstuff | Jun-05-2024 | Categories : Laravel

Hello, laravel web developers! In this article, we'll see how to create datatable in laravel 11 livewire using mediconesystems/livewire-datatables. Also, you can filter data, sort columns, hide/show columns, and export data in Excel and CSV format.

You can customize paging and pagination in Livewire datatable. livewire datatable provides built-in datatable like SimpleIntermediateComplexRelation, and Deletable.

Laravel 11 Livewire Datatable Example

Laravel 11 Livewire Datatable Example

 

Step 1: Install Laravel 11

In this step, we'll install laravel 11 using the following command.

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

 

 

Step 2: Install Livewire

Next, we'll install Laravel Livewire using the following composer command.

composer require livewire/livewire

composer require mediconesystems/livewire-datatables

 

Step 3: Create Livewire Component

Then, we'll create a livewire datatable component using the following command.

php artisan make:livewire user-datatables

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 4: Create View File

We'll create a blade file and include @livewireStyles, and @livewireScripts.

resources/views/default.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>how to create datatable in laravel 11 livewire - Websolutionstuff</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">
        how to create datatable in laravel 11 livewire - Websolutionstuff
      </div>
      <div class="card-body">
        <livewire:user-datatables 
            sort="name|asc"
            searchable="name, email"
            hide="latitude, longitude"
            exportable />
  
      </div>
    </div>
        
</div>
    
</body>
  
@livewireScripts
  
</html>

 

Step 5: Define Route

Then, we'll define routes to the web.php file.

routes/web.php

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

 


You might also like:

Recommended Post
Featured Post
How To Get Current Week Records In MySQL
How To Get Current Week Record...

In this tutorial, we will see how to get current week records in MySQL. Many times we need to get current week reco...

Read More

Feb-07-2022

How to add Pagination in Laravel 11 Livewire
How to add Pagination in Larav...

Hello, laravel web developers! This article will show how to add pagination in laravel 11 Livewire. Here, we'll...

Read More

Jun-14-2024

Carbon Add Minutes To Date In Laravel 9
Carbon Add Minutes To Date In...

In this article, we'll explore how to add minutes to a date in Laravel 8, Laravel 9 and Laravel 10 using Carbon...

Read More

Nov-23-2022

How to Resize Image before Upload in Laravel 11
How to Resize Image before Upl...

Hello, laravel web developers! In this article, we'll see how to resize images before uploading in laravel 11. Here,...

Read More

May-13-2024