@extends('layouts.app') @section('title', 'Tables UI Kit') @section('content')

Tables

Komponen tabel dengan seleksi checkbox kustom yang modern.

Basic Data Table

@foreach([ ['name' => 'Alex Rivera', 'email' => 'alex@example.com', 'status' => 'Paid', 'color' => 'emerald'], ['name' => 'Sarah Chen', 'email' => 'sarah@example.com', 'status' => 'Pending', 'color' => 'amber'], ['name' => 'Mike Ross', 'email' => 'mike@example.com', 'status' => 'Failed', 'color' => 'rose'] ] as $row) @endforeach
Customer Status Action
{{ substr($row['name'], 0, 2) }}

{{ $row['name'] }}

{{ $row['email'] }}

{{ $row['status'] }}
<!-- Basic Table -->
<table class="w-full text-left">
    <thead class="bg-gray-50 dark:bg-gray-800/50">...</thead>
    <tbody class="divide-y divide-gray-100">...</tbody>
</table>

Checkbox Selection

@foreach(['Macbook Pro M3', 'iPad Pro 12.9', 'iPhone 15 Pro Max'] as $index => $item) @endforeach
Inventory Stock
{{ $item }} 124 Units
<!-- Beautiful Custom Checkbox UI -->
<label class="relative flex items-center cursor-pointer">
    <input type="checkbox" class="peer sr-only">
    <div class="w-5 h-5 border-2 rounded-lg peer-checked:bg-indigo-600 peer-checked:border-indigo-600 transition-all"></div>
    <i class="ti ti-check absolute text-white text-xs scale-0 peer-checked:scale-100"></i>
</label>

Advanced Table

@foreach([1, 2, 3] as $order) @endforeach
Order ID Amount Date Status
#TRX-99{{ $order }} Rp 12.500.000 12 Jan 2024 Processing

Showing 1-10 of 240

@endsection