T</>TahuCoding

Tutorial Datatables pada Laravel 10

Loading...

Step 1: Installing Laravel & DataTables

Jalankan perintah berikut pada terminal untuk mendownload dan menginstall project Laravel 10:

composer create-project laravel/laravel datatables-example

Setelah berhasil membuat project, kita akan install Laravel UI dan Yajra DataTables

composer require laravel/ui --dev
php artisan ui bootstrap --auth
composer require yajra/laravel-datatables

Step 2: Setup Database

Setelah menginstall project Laravel, mari konfigurasi database terlebih dahulu.

Buka file .env. Lalu tambahkan detail database sebagai berikut:

.env
 DB_CONNECTION=mysql
 DB_HOST=127.0.0.1
 DB_PORT=3306
 DB_DATABASE=nama databasemu
 DB_USERNAME=username databasemu
 DB_PASSWORD=password databasemu

Step 3: Install Laravel DataTables Vite

Selanjutkan, kita akan install Laravel DataTables Vite untuk mempermudah setup sisi frontend.

npm i laravel-datatables-vite --save-dev

Command diatas akan otomatis menginstall package-package berikut:

  • Bootstrap Icons
  • DataTables with Buttons and Select plugins for Bootstrap 5
  • Laravel DataTables custom scripts

Setelah proses instalsi selesai, konfigurasi scripts dan css yang dibutuhkan oleh project kita.

resources/js/app.js
import "./bootstrap";
import "laravel-datatables-vite";
resources/sass/app.scss
// Fonts
@import url("https://fonts.bunny.net/css?family=Nunito");
// Variables
@import "variables";
// Bootstrap
@import "bootstrap/scss/bootstrap";
// DataTables
@import "bootstrap-icons/font/bootstrap-icons.css";
@import "datatables.net-bs5/css/dataTables.bootstrap5.min.css";
@import "datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css";
@import "datatables.net-select-bs5/css/select.bootstrap5.css";

Selanjutnya jalankan vite development server agar dapat compile JS,CSS yang sudah kita setup.

npm run dev

Step 4: Setup DataTable Users

Buka terminal dan jalankan command berikut.

php artisan datatables:make Users

Selanjutnya kita akan konfigurasi UsersDataTable dan tambahkan kolom yang ingin ditampilkan.

app/DataTables/UsersDataTable.php
namespace App\DataTables;
use App\Models\User;
use Illuminate\Database\Eloquent\Builder as QueryBuilder;
use Yajra\DataTables\EloquentDataTable;
use Yajra\DataTables\Html\Builder as HtmlBuilder;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Services\DataTable;
class UsersDataTable extends DataTable
{
    public function dataTable(QueryBuilder $query): EloquentDataTable
    {
        return (new EloquentDataTable($query))->setRowId('id');
    }
    public function query(User $model): QueryBuilder
    {
        return $model->newQuery();
    }
    public function html(): HtmlBuilder
    {
        return $this->builder()
                    ->setTableId('users-table')
                    ->columns($this->getColumns())
                    ->minifiedAjax()
                    ->orderBy(1)
                    ->selectStyleSingle()
                    ->buttons([
                        Button::make('add'),
                        Button::make('excel'),
                        Button::make('csv'),
                        Button::make('pdf'),
                        Button::make('print'),
                        Button::make('reset'),
                        Button::make('reload'),
                    ]);
    }
    public function getColumns(): array
    {
        return [
            Column::make('id'),
            Column::make('name'),
            Column::make('email'),
            Column::make('created_at'),
            Column::make('updated_at'),
        ];
    }
    protected function filename(): string
    {
        return 'Users_'.date('YmdHis');
    }
}

Step 5: Setup a Users Controller, View & Route

Buatlah UsersController dengan menjalankan command berikut pada terminal.

php artisan make:controller UsersController

Render datatables pada view users.index

app/Http/Controllers/UsersController.php
namespace App\Http\Controllers;
use App\DataTables\UsersDataTable;
 
class UsersController extends Controller
{
    public function index(UsersDataTable $dataTable)
    {
        return $dataTable->render('users.index');
    }
}

Buatlah sebuah view users.index dan modifikasi seperti berikut.

resources/views/users/index.blade.php
@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="card">
            <div class="card-header">Manage Users</div>
            <div class="card-body">
                {{ $dataTable->table() }}
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    {{ $dataTable->scripts(attributes: ['type' => 'module']) }}
@endpush

Tambahkan rute baru pada routes/web.php

routes/web.php
<?php
 
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
 
use App\Http\Controllers\UsersController;
 
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/
 
Route::get('/users', [UsersController::class, 'index'])->name('users.index');

Set DataTable agar menggunakan vitejs secara default dengan cara mendaftarkan Builder::useVite() pada AppServiceProvider.

app\Providers\AppServiceProvider.php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Yajra\DataTables\Html\Builder;
 
class AppServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        Builder::useVite();
    }
}

Selanjutnya, sekarang Kamu dapat menggunakan script tanpa perlu mengatur type ke module.

resources/views/users/index.blade.php
@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="card">
            <div class="card-header">Manage Users</div>
            <div class="card-body">
                {{ $dataTable->table() }}
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    {{ $dataTable->scripts() }}
@endpush

Setp 6: Update App Layout

Agar dapat menggunakan custom script, kita harus menambahkan @stack('scripts') sebelum penutup body tag pada app.blade.php layout.

resources/views/layouts/app.blade.php
....
        <main class="py-4">
            @yield('content')
        </main>
    </div>
    @stack('scripts')
</body>
</html>

Step 7: Migrasi dan Seed Test Data

php artisan migrate
php artisan tinker
Psy Shell v0.9.9 (PHP 7.2.22 — cli) by Justin Hileman
>>> User::factory(100)->create()

Selamat Datatables sudah berhasil kita integrasi. Kamu dapat membukan http://localhost:8000/users untuk membuka Datatables Users.

Laravel Datatables