Laravel Livewire Datatables With Bootstrap 4 & Bootstrap 5 Example

សេង ស៊ង់
27 Sep, 2022

ក្នុងមេរៀននេះខ្ញុំបង្ហាញពីរបៀបនៃការធ្វើការជាមួយ DataTable ជាមួយ Bootstrap 4 និង​ Bootstrap 5 

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/





អត្ថបទបន្ទាប់ អត្ថបទមុន