How to Create Livewire Datatable Using Laravel 10
In this article, I will guide you through the process of creating a Livewire DataTable using Laravel 10. Livewire is a powerful Laravel package that allows you to build interactive and dynamic user interfaces without writing a single line of JavaScript.
By combining Livewire with the DataTables library, you can create robust and feature-rich data tables that offer sorting, searching, pagination, and more, all seamlessly integrated with your Laravel application.
In the following sections, I will walk you through the step-by-step process of setting up Livewire, integrating DataTables. We will utilize the power of Laravel's blade templates and Livewire's reactive data-binding to build a responsive and efficient data table.
So, let's dive in and learn how to create a Livewire DataTable using Laravel 10.
Create a new Laravel project or use an existing one as the foundation for your application. You can create a new Laravel project by running the following command.
composer create-project laravel/laravel example-app
Open your terminal and navigate to your Laravel project directory. Then, run the following command to start Tinker.
php artisan tinker
App\Models\User::factory()->count(100)->create()
In your Laravel project directory, run the following command to install the Livewire package.
composer require livewire/livewire
Run the following command to install the Livewire datatable package.
composer require mediconesystems/livewire-datatables
Generate a new Livewire component that will serve as your DataTable. Run the following command in your terminal.
php artisan make:livewire user-datatables
This will create a new Livewire component in the app/Http/Livewire directory.
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')
];
}
}
In your routes/web.php file, define a route to render the Livewire DataTable component. Add the following code.
Route::get('user-datatables', function () {
return view('datatable');
});
Create a Blade view file for your DataTable component. By convention, Livewire will look for a Blade view with the same name as the Livewire component. In this case, create a file named datatable.blade.php in the resources/views directory.
resources/views/datatable.blade.php
<!DOCTYPE html>
<html>
<head>
<title>How to Create Livewire Datatable Using Laravel 10 - Techsolutionstuff</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 Livewire Datatable Using Laravel 10 - Techsolutionstuff</div>
<div class="card-body">
<livewire:user-datatables searchable="name, email" exportable/>
</div>
</div>
</div>
</body>
@livewireScripts
</html>
Run your Laravel development server using the following command.
php artisan serve
In this article, we explored the process of creating a Livewire DataTable using Laravel 10. By following the step-by-step guide, you have learned how to set up Livewire, integrate DataTables, and create a dynamic DataTable component.
By leveraging the power of Livewire, you can build interactive user interfaces without writing JavaScript code. The Livewire DataTable component allows you to fetch and display data in a seamless and efficient manner, with features like sorting, searching, and pagination seamlessly integrated.
You might also like:
- Read Also: Datatable Filter With Dropdown In Laravel 9
- Read Also: Laravel 8 Datatables Keeping Selected Page Number
- Read Also: Laravel Custom Export Button In Datatable
- Read Also: How To Create Dynamic Bar Chart In Laravel
