In this tutorial, we will create laravel 8 livewire datatable with bootstrap 4 and bootstrap 5. For this section we will use Laravel 8, rappasoft laravel-livewire-tables package, bootstrap 4, 5.
laravel livewire datatable with bootstrap 4 & bootstrap 5 Example
Step 1: Set Up Laravel Project
Step 2: Set Up Database Details in ENV
Step 3: Install Bootstrap 4 or 5
Step 4: Set up laravel livewire
Step 5: Set up Datatable with laravel livewire & Bootstrap 4, 5
Step 1: Set Up Laravel Project
Installing a fresh new laravel application, so head over to the terminal, type the command, and create a new laravel app.
composer create-project --prefer-dist laravel/laravel larainfo
Step 2: Set Up Database Details in ENV
Now, you have to connect the laravel app to the database, hence open the .env configuration file and add the database credentials as suggested below.
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password
Step 3: Install Bootstrap 4 or 5
Install Laravel UI with bootstrap 4
Install laravel ui package form below command.
composer require laravel/ui
Step up Bootstrap 4
php artisan ui bootstrap
Step up Bootstrap 4 with Auth
php artisan ui bootstrap --auth
For bootstrap 5 you can check link below.
3 way to install bootstrap 5 in laravel 8
Step 4: Set up laravel livewire
composer require livewire/livewire
Include the JavaScript (on every page that will be using Livewire).
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
</html>
After, you need to install dependencies
npm install && npm run dev
And final run migrate
php artisan migrate
Step 5: Set up Datatable with laravel livewire & Bootstrap 4, 5
Install Rappasoft laravel-livewire-tables
composer require rappasoft/laravel-livewire-tables
publish the config file
php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider" --tag=livewire-tables-config
php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider" --tag=livewire-tables-views
php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider" --tag=livewire-tables-translations
Configure for datatables
app/config/livewire-tables.php
For Bootstrap 4
<?php
return [
/**
* Options: tailwind | bootstrap-4 | bootstrap-5.
*/
'theme' => 'bootstrap-4',
];
For Bootstrap 5
<?php
return [
/**
* Options: tailwind | bootstrap-4 | bootstrap-5.
*/
'theme' => 'bootstrap-5',
];
Create Fake Data With Tinker
php artisan ti
create 30 fake user using tinker factory.
Psy Shell v0.10.8 (PHP 7.4.22 — cli) by Justin Hileman >>> App\Models\User::factory(30)->create();
Create User Controller
php artisan make:controller UserController
app/Http/Controllers/UserController.php
<?php
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Http\Request;
class UserController extends Controller
{
public function index()
{
$users = User::all();
return view('user', compact('users'));
}
}
Create user.blade.php file
app/resources/views/user.blade.php
@extends('layouts.app')
@section('content')
<!-- Datatables will be here -->
@endsection
Create route web.php
<?php
use App\Http\Controllers\UserController;
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::get('/users', [UserController::class, 'index']);
Create Livewire component
php artisan make:livewire UsersTable
COMPONENT CREATED 🤙
CLASS: app/Http/Livewire/UsersTable.php
VIEW: resources/views/livewire/users-table.blade.php
Implements The Rappasoft laravel livewire tables Code
app/Http/Livewire/UsersTable.php
<?php
namespace App\Http\Livewire;
use App\Models\User;
use Livewire\Component;
use Illuminate\Database\Eloquent\Builder;
use Rappasoft\LaravelLivewireTables\DataTableComponent;
use Rappasoft\LaravelLivewireTables\Views\Column;
class UsersTable extends DataTableComponent
{
public function columns(): array
{
return [
Column::make('Name')
->sortable()
->searchable(),
Column::make('E-mail', 'email')
->sortable()
->searchable(),
Column::make('Created At', 'created_at')
->sortable()
->searchable(),
Column::make('Updated At', 'updated_at')
->sortable()
->searchable(),
];
}
public function query(): Builder
{
return User::query();
}
}
Add bootstrap code and <livewire:users-table /> file location
app/resources/views/user.blade.php
@extends('layouts.app')
@section('content')
<!-- Row -->
<div class="row">
<!-- Datatables -->
<div class="col-lg-12">
<div class="card mb-4">
<div class="table-responsive p-3">
<livewire:users-table />
</div>
</div>
</div>
</div>
<!--Row-->
</div>
@endsection
And final run server
php artisan serve
http://localhost:8000/
Laravel Livewire Datatables With Bootstrap 4 & Bootstrap 5 Example
