Membuat tabel menyesuikan data object/array menggunakan laravel

vandi

Untuk bisa membuat tabel colum yang dapat menyesuikan data bisa menggunakan fitur view component yang ada pada Laravel. Dengan demikian kita bisa lebih leluasa untuk memodifikasi tabel hanya mengubah data yang dikirim ke component yang dituju. Tidak usah berlama lama mari buka visual studio.

Pertama buat project Laravel yang akan kita gunakan

composer create-project laravel/laravel example-app

Kemudian, masukan perintah

php artisan make:component myTable

Maka, file baru pada app/View/Components dengan nama myTable.php dan ada file view dengan nama my-table.blade.php akan dibuat pada resources/views/components.

Ubah isi file myTable.php menjadi seperti dibawah ini:

<?php

namespace App\View\Components;

use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class myTable extends Component
{
    private $data;

    public function __construct($data)
    {
        $this->data = $data;
    }

    public function render(): View|Closure|string
    {
        $data = $this->data;
        return view('components.my-table', compact('data'));
    }
}

Terus untuk file my-table.blade.php ubah menjadi seperti dibawah ini:

@if(!empty($data))
<thead>
    <tr role="row">
        @foreach (array_keys($data[0]) as $index=> $label_item)
            <th class="@if($index==0) sorting_asc @else sorting @endif" tabindex="0" aria-controls="simpletable">{{ Str::ucfirst(Str::replace('_',' ',$label_item)) }}</th>
        @endforeach
    </tr>
</thead>
<tbody>
    @if (!empty($data))
        @php($no = 1)
        @foreach ($data as $collection)
            <tr role="row" class="odd">
                @foreach ($collection as $key => $value)
                    <td>{{ $value }}</td>
                @endforeach
            </tr>
        @endforeach
    @else
        <tr role="row" class="odd">
            <td colspan=""></td>
        </tr>
    @endif
</tbody>
@endif

Terus, untuk cara menggunakannya. kita butuh membuat helper dulu. Buat file Property.php pada folder app/Helper kemudian masukan kode seperti ini:

<?php

if (!function_exists('to_table')) {
    function to_table($data_source,$hide=[], $actions=[]){
        $container = [];
        $no = 1;
        foreach ($data_source as $key => $data) {
            $row = [];
            $row['no'] = $no++;
            foreach ($data as $key2 => $value2) {
                if(!in_array($key2, $hide)){ // Sembunyikan column jika tidak ingin ditampilkan
                    if(in_array($key2, array_keys($actions))){ // Kolom yang ingin ditambahkan aksi
                        $row[$key2] = view($actions[$key2], compact('data')); // Maka Akan render HTML yang akan telah ditentukan
                    }else{
                        $row[$key2] = $value2; // Add to row
                    }
                }
            }

            $container[] = check_extenstion($row, $actions, $data);
        }
       return $container;
    }

    function check_extenstion($data_row,$actions, $data){
        if(!empty($actions)){
            foreach ($actions as $key => $value) {
                if(!in_array($key,array_keys($data_row))){
                    $data_row[$key] = view($value, compact('data'));
                }
            }
        }

        return $data_row;
    }
}

Terus, ubah file composer.json ubah kode pada bagian autoload menjadi seperti ini.

"autoload": {
        "psr-4": {
            "App\\": "app/",
            "Database\\Factories\\": "database/factories/",
            "Database\\Seeders\\": "database/seeders/"
        },
        "files": [
            "app/Helper/Property.php",
        ]
    },

Selanjutnya, buka terminal pada visual code. Terus ketik seperti dibawa ini satu persatu

php artisan clear-compiled  '

composer dump-autoload

Kemudian, buat controller DashboardController.php kemudian ketik seperti ini:

<?php
namespace App\Http\Controllers\Master;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use User;

class DashboadController extends Controller
{
    //
    public function index(){
        $title = "Dashboard";
        $desc = "Halaman dashbord";
       
        $test = to_table(TahunAjaranBaru::all()->toArray(),
['id','created_at','updated_at','deleted_at'],
        	['aksi'=>'admin.pages.formulir-pendaftaran-offline.action']); /*pada helper to_table ada tiga parameter 
1.	Data dengan type array
2.	Data array jika ada colom yang akan disembunyikan
3.	Data array jika ada aksi yang akan ditambahkan tinggal masukan Alamat view yang akan ditambahkan ke dalammnya
*/
        return view('admin.pages.dashboard', compact('title', 'desc',’test’));
    }
}

Kemudian buka view dashboard.blade.php. lalu untuk memanggunakannya. Tambahkan kode seperti ini:

<table>
<x-mytable :data="$test" />	
</table>

Coba jalankan, jika berhasil tabel akan terbuat otomatis sesuai dengan data yang kita kirimkan.

SELAMAT MENCOBA …