add landing pages for meetups

2025-12-11 06:46:47 +00:00 · 2023-01-14 20:35:54 +01:00
parent 8120b13bff
commit 2f00e34e10
55 changed files with 3161 additions and 17 deletions
--- a/app/Console/Commands/Database/MigrateMeetupSlugs.php
+++ b/app/Console/Commands/Database/MigrateMeetupSlugs.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Console\Commands\Database;
+
+use App\Models\Meetup;
+use Illuminate\Console\Command;
+
+class MigrateMeetupSlugs extends Command
+{
+    /**
+     * The name and signature of the console command.
+     * @var string
+     */
+    protected $signature = 'meetups:slugs';
+
+    /**
+     * The console command description.
+     * @var string
+     */
+    protected $description = 'Command description';
+
+    /**
+     * Execute the console command.
+     * @return int
+     */
+    public function handle()
+    {
+        foreach (Meetup::all() as $item) {
+            $item->slug = str($item->name)->slug('-', 'de');
+            $item->save();
+        }
+
+        return Command::SUCCESS;
+    }
+}
--- a/app/Http/Livewire/BookCase/BookCaseTable.php
+++ b/app/Http/Livewire/BookCase/BookCaseTable.php
@@ -18,8 +18,9 @@ class BookCaseTable extends Component
    public function render()
    {
        return view('livewire.book-case.book-case-table', [
-            'markers'   => BookCase::when($this->table['filters']['byids'] ?? false,
-                fn($query) => $query->whereIn('id', str($this->table['filters']['byids'] ?? '')->explode(',')))
+            'markers'   => !isset($this->table['filters']['byids']) ? []
+                : BookCase::query()
+                          ->whereIn('id', str($this->table['filters']['byids'] ?? '')->explode(','))
                          ->get()
                          ->map(fn($b) => [
                              'title'     => $b->title,
--- a/app/Http/Livewire/Meetup/LandingPage.php
+++ b/app/Http/Livewire/Meetup/LandingPage.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Http\Livewire\Meetup;
+
+use App\Models\Country;
+use App\Models\Meetup;
+use App\Models\MeetupEvent;
+use Livewire\Component;
+use RalphJSmit\Laravel\SEO\Support\SEOData;
+
+class LandingPage extends Component
+{
+    public Meetup $meetup;
+    public Country $country;
+
+    public ?int $year = null;
+
+    protected $queryString = ['year'];
+
+    public function render()
+    {
+        return view('livewire.meetup.landing-page', [
+            'events'  => MeetupEvent::query()
+                                    ->with([
+                                        'meetup.city.country',
+                                    ])
+                                    ->where('meetup_events.meetup_id', $this->meetup->id)
+                                    ->where('meetup_events.start', '>=', now())
+                                    ->get()
+                                    ->map(fn($event) => [
+                                        'id'          => $event->id,
+                                        'startDate'   => $event->start,
+                                        'endDate'     => $event->start->addHours(1),
+                                        'location'    => $event->location,
+                                        'description' => $event->description,
+                                    ]),
+        ])
+            ->layout('layouts.guest', [
+            'SEOData' => new SEOData(
+                title: $this->meetup->name,
+                description: __('Bitcoiner Meetups are a great way to meet other Bitcoiners in your area. You can learn from each other, share ideas, and have fun!'),
+                image: asset($this->meetup->getFirstMediaUrl('logo')),
+            )
+        ]);
+    }
+}
--- a/app/Models/Meetup.php
+++ b/app/Models/Meetup.php
@@ -10,18 +10,20 @@ use Spatie\Image\Manipulations;
 use Spatie\MediaLibrary\HasMedia;
 use Spatie\MediaLibrary\InteractsWithMedia;
 use Spatie\MediaLibrary\MediaCollections\Models\Media;
+use Spatie\Sluggable\HasSlug;
+use Spatie\Sluggable\SlugOptions;

 class Meetup extends Model implements HasMedia
 {
    use HasFactory;
    use InteractsWithMedia;
+    use HasSlug;

    /**
     * The attributes that aren't mass assignable.
     * @var array
     */
    protected $guarded = [];
-
    /**
     * The attributes that should be cast to native types.
     * @var array
@@ -40,6 +42,14 @@ class Meetup extends Model implements HasMedia
        });
    }

+    public function getSlugOptions(): SlugOptions
+    {
+        return SlugOptions::create()
+                          ->generateSlugsFrom(['name'])
+                          ->saveSlugsTo('slug')
+                          ->usingLanguage('de');
+    }
+
    public function registerMediaConversions(Media $media = null): void
    {
        $this
--- a/composer.json
+++ b/composer.json
@@ -27,6 +27,7 @@
        "nova/start": "*",
        "oneduo/nova-time-field": "^1.0",
        "podcastindex/podcastindex-php": "^1.0",
+        "qcod/laravel-gamify": "^1.0",
        "ralphjsmit/laravel-seo": "^1.2",
        "rappasoft/laravel-livewire-tables": "^2.8",
        "sentry/sentry-laravel": "^3.1",
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
        "This file is @generated automatically"
    ],
-    "content-hash": "d570d40413edbe29a499759d99b8584c",
+    "content-hash": "5ff6a604d24b926e66423e09d07edd78",
    "packages": [
        {
            "name": "akuechler/laravel-geoly",
@@ -7054,6 +7054,74 @@
            },
            "time": "2022-12-23T17:47:18+00:00"
        },
+        {
+            "name": "qcod/laravel-gamify",
+            "version": "1.0.6",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/qcod/laravel-gamify.git",
+                "reference": "e642db7b77f52980606f4037a9bddde896c12cb4"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/qcod/laravel-gamify/zipball/e642db7b77f52980606f4037a9bddde896c12cb4",
+                "reference": "e642db7b77f52980606f4037a9bddde896c12cb4",
+                "shasum": ""
+            },
+            "require": {
+                "laravel/framework": "~5.4.0|~5.5.0|~5.6.0|~5.7.0|~5.8.0|^6.0|^7.0|^8.0|^9.0",
+                "php": "^7.3|^8.0"
+            },
+            "require-dev": {
+                "mockery/mockery": "^0.9.4 || ~1.0",
+                "orchestra/testbench": "~3.8|^4.0|^5.0|^7.0",
+                "phpunit/phpunit": "~8.5|^9.0"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "QCod\\Gamify\\GamifyServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "files": [
+                    "src/helpers.php"
+                ],
+                "psr-4": {
+                    "QCod\\Gamify\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Mohd Saqueib Ansari",
+                    "email": "saquibweb@gmail.com"
+                }
+            ],
+            "description": "Add gamification in laravel app with reputation point and badges support",
+            "homepage": "https://github.com/qcod/laravel-gamify",
+            "keywords": [
+                "Gamification",
+                "achivement",
+                "badge",
+                "gamify",
+                "laravel",
+                "points",
+                "qcod",
+                "reputation",
+                "reward"
+            ],
+            "support": {
+                "issues": "https://github.com/qcod/laravel-gamify/issues",
+                "source": "https://github.com/qcod/laravel-gamify/tree/1.0.6"
+            },
+            "time": "2022-02-09T10:01:08+00:00"
+        },
        {
            "name": "ralouphie/getallheaders",
            "version": "3.0.3",
--- a/config/gamify.php
+++ b/config/gamify.php
@@ -0,0 +1,37 @@
+<?php
+
+return [
+    // Model which will be having points, generally it will be User
+    'payee_model' => '\App\User',
+
+    // Reputation model
+    'reputation_model' => '\QCod\Gamify\Reputation',
+
+    // Allow duplicate reputation points
+    'allow_reputation_duplicate' => true,
+
+    // Broadcast on private channel
+    'broadcast_on_private_channel' => true,
+
+    // Channel name prefix, user id will be suffixed
+    'channel_name' => 'user.reputation.',
+
+    // Badge model
+    'badge_model' => '\QCod\Gamify\Badge',
+
+    // Where all badges icon stored
+    'badge_icon_folder' => 'images/badges/',
+
+    // Extention of badge icons
+    'badge_icon_extension' => '.svg',
+
+    // All the levels for badge
+    'badge_levels' => [
+        'beginner' => 1,
+        'intermediate' => 2,
+        'advanced' => 3,
+    ],
+
+    // Default level
+    'badge_default_level' => 1
+];
--- a/database/migrations/2023_01_14_185805_add_reputation_field_on_user_table.php
+++ b/database/migrations/2023_01_14_185805_add_reputation_field_on_user_table.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class AddReputationFieldOnUserTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->unsignedInteger('reputation')->default(0)->after('remember_token');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn('reputation');
+        });
+    }
+}
--- a/database/migrations/2023_01_14_185805_create_gamify_tables.php
+++ b/database/migrations/2023_01_14_185805_create_gamify_tables.php
@@ -0,0 +1,58 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateGamifyTables extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        // reputations table
+        Schema::create('reputations', function (Blueprint $table) {
+            $table->increments('id');
+            $table->string('name');
+            $table->mediumInteger('point', false)->default(0);
+            $table->integer('subject_id')->nullable();
+            $table->string('subject_type')->nullable();
+            $table->unsignedInteger('payee_id')->nullable();
+            $table->text('meta')->nullable();
+            $table->timestamps();
+        });
+
+        // badges table
+        Schema::create('badges', function (Blueprint $table) {
+            $table->increments('id');
+            $table->string('name');
+            $table->string('description')->nullable();
+            $table->string('icon')->nullable();
+            $table->tinyInteger('level')->default(config('gamify.badge_default_level', 1));
+            $table->timestamps();
+        });
+
+        // user_badges pivot
+        Schema::create('user_badges', function (Blueprint $table) {
+            $table->primary(['user_id', 'badge_id']);
+            $table->unsignedInteger('user_id');
+            $table->unsignedInteger('badge_id');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('user_badges');
+        Schema::dropIfExists('badges');
+        Schema::dropIfExists('reputations');
+    }
+}
--- a/database/migrations/2023_01_14_191356_add_slug_column_to_meetups_table.php
+++ b/database/migrations/2023_01_14_191356_add_slug_column_to_meetups_table.php
@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration {
+    /**
+     * Run the migrations.
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('meetups', function (Blueprint $table) {
+            $table->string('slug')
+                  ->nullable()
+                  ->after('id');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('meetups', function (Blueprint $table) {
+            //
+        });
+    }
+};
--- a/resources/views/columns/meetups/action.blade.php
+++ b/resources/views/columns/meetups/action.blade.php
@@ -25,4 +25,11 @@
            {{ __('Show dates') }} ({{ $row->meetup_events_count }})
        </x-button>
    @endif
+    <x-button
+        primary
+        :href="route('meetup.landing', ['country' => $country, 'meetup' => $row->slug])"
+    >
+        <i class="fa fa-thin fa-browser mr-2"></i>
+        {{ __('Show landing page') }}
+    </x-button>
 </div>
--- a/resources/views/livewire/book-case/book-case-table.blade.php
+++ b/resources/views/livewire/book-case/book-case-table.blade.php
@@ -11,11 +11,11 @@
                            class="w-full text-transparent bg-clip-text bg-gradient-to-r from-amber-400 via-amber-500 to-amber-200 lg:inline">{{ __('Bookcases') }}</span>
                    </h1>
                </div>
+
+                <div class="w-1/2">
                    <p class="px-0 mb-6 text-lg text-gray-600 md:text-xl">
                        {{ __('Search out a public bookcase') }}
                    </p>
-
-                <div class="w-1/2">
                    <div class="rounded" wire:ignore>
                        @if($markers[0] ?? false)
                            <style>
--- a/resources/views/livewire/meetup/landing-page.blade.php
+++ b/resources/views/livewire/meetup/landing-page.blade.php
@@ -0,0 +1,109 @@
+<div class="bg-21gray flex flex-col h-screen justify-between">
+    {{-- MAIN --}}
+    <section class="w-full mb-12 mt-8">
+        <div class="max-w-screen-2xl mx-auto px-2 sm:px-10 space-y-4 flex flex-col sm:flex-row">
+            <div class="flex flex-col sm:flex-row">
+                <div class="flex flex-col">
+                    <h1 class="mb-6 text-5xl font-extrabold leading-none tracking-normal text-gray-200 sm:text-6xl md:text-6xl lg:text-7xl md:tracking-tight">
+                        <span
+                            class="text-transparent bg-clip-text bg-gradient-to-r from-amber-400 via-amber-500 to-amber-200">{{ $meetup->name }}</span><br
+                            class="lg:block hidden">
+                        {{ __('Plebs together strong 💪') }}
+                    </h1>
+                    <div class="px-0 mb-6 text-lg text-gray-600 md:text-xl">
+                        {{ __('Bitcoiner Meetups are a great way to meet other Bitcoiners in your area. You can learn from each other, share ideas, and have fun!') }}
+
+                        <x-button primary lg class="whitespace-nowrap">
+                            <i class="fa fa-thin fa-external-link mr-2"></i>
+                            {{ __('Link') }}
+                        </x-button>
+                    </div>
+                </div>
+
+                <div class="p-4">
+                    <img class="max-h-64" src="{{ $meetup->getFirstMediaUrl('logo') }}" alt="Logo">
+                </div>
+            </div>
+
+        </div>
+
+        <div class="w-full">
+
+            @php
+                $locale = \Illuminate\Support\Facades\Cookie::get('lang', 'de');
+            @endphp
+
+            <link rel="stylesheet" type="text/css"
+                  href="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.css"/>
+            <script src="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.js"></script>
+            <script src="https://unpkg.com/js-year-calendar@latest/locales/js-year-calendar.{{ $locale }}.js"></script>
+
+            <style>
+                .calendar .calendar-header {
+                    background-color: #F7931A;
+                    color: white;
+                    border: 0;
+                }
+
+                .calendar table.month th.month-title {
+                    color: #F7931A;
+                }
+
+                .calendar table.month th.day-header {
+                    color: #fff;
+                }
+
+                .calendar table.month td.day .day-content {
+                    color: #fff;
+                }
+
+                .calendar .calendar-header table th:hover {
+                    background: #222;
+                }
+            </style>
+            <div
+                wire:ignore
+                x-data="{
+                                calendar: null,
+                                init() {
+                                    let events = {{ Js::from($events) }};
+                                    events = events.map(function(e){
+                                        return {id: e.id, startDate: new Date(e.startDate), endDate: new Date(e.endDate), location: e.location, description: e.description}
+                                    })
+
+                                    new Calendar(this.$refs.calendar, {
+                                        style: 'background',
+                                        language: '{{ $locale }}',
+                                        startYear: {{ date('Y') }},
+                                        dataSource: events,
+                                        yearChanged: function(e) {
+                                            @this.set('year', e.currentYear);
+                                        },
+                                        clickDay: function(e) {
+                                            if(e.events.length > 0) {
+                                                var content = '';
+                                                var ids = [];
+
+                                                for(var i in e.events) {
+                                                    ids.push(e.events[i].id);
+                                                    content += '<div class=\'event-tooltip-content\'>'
+                                                    + '<div class=\'event-name\'>' + e.events[i].location + '</div>'
+                                                    + '<div class=\'event-location\'>' + e.events[i].description + '</div>'
+                                                    + '</div>';
+                                                }
+                                                console.log(content);
+
+                                                $wire.call('popover', content, ids.join(','));
+                                            }
+                                        },
+                                    });
+                                },
+                            }"
+            >
+                <div x-ref="calendar"></div>
+            </div>
+        </div>
+    </section>
+    {{-- FOOTER --}}
+    <livewire:frontend.footer/>
+</div>
--- a/resources/views/vendor/livewire-tables/.gitkeep
+++ b/resources/views/vendor/livewire-tables/.gitkeep
--- a/resources/views/vendor/livewire-tables/components/pagination.blade.php
+++ b/resources/views/vendor/livewire-tables/components/pagination.blade.php
@@ -0,0 +1,139 @@
+@aware(['component'])
+@props(['rows'])
+
+@php
+    $theme = $component->getTheme();
+@endphp
+
+@if ($component->hasConfigurableAreaFor('before-pagination'))
+    @include($component->getConfigurableAreaFor('before-pagination'), $component->getParametersForConfigurableArea('before-pagination'))
+@endif
+
+@if ($theme === 'tailwind')
+    <div>
+        @if ($component->paginationVisibilityIsEnabled())
+            <div class="mt-4 px-4 md:p-0 sm:flex justify-between items-center space-y-4 sm:space-y-0">
+                <div>
+                    @if ($component->paginationIsEnabled() && $component->isPaginationMethod('standard') && $rows->lastPage() > 1)
+                        <p class="paged-pagination-results text-sm text-gray-700 leading-5 dark:text-white">
+                            <span>@lang('Showing')</span>
+                            <span class="font-medium">{{ $rows->firstItem() }}</span>
+                            <span>@lang('to')</span>
+                            <span class="font-medium">{{ $rows->lastItem() }}</span>
+                            <span>@lang('of')</span>
+                            <span class="font-medium">{{ $rows->total() }}</span>
+                            <span>@lang('results')</span>
+                        </p>
+                    @elseif ($component->paginationIsEnabled() && $component->isPaginationMethod('simple'))
+                        <p class="paged-pagination-results text-sm text-gray-700 leading-5 dark:text-white">
+                            <span>@lang('Showing')</span>
+                            <span class="font-medium">{{ $rows->firstItem() }}</span>
+                            <span>@lang('to')</span>
+                            <span class="font-medium">{{ $rows->lastItem() }}</span>
+                        </p>
+                    @else
+                        <p class="total-pagination-results text-sm text-gray-700 leading-5 dark:text-white">
+                            @lang('Showing')
+                            <span class="font-medium">{{ $rows->count() }}</span>
+                            @lang('results')
+                        </p>
+                    @endif
+                </div>
+
+                @if ($component->paginationIsEnabled())
+                    {{ $rows->links('livewire-tables::specific.tailwind.pagination') }}
+                @endif
+            </div>
+        @endif
+    </div>
+@elseif ($theme === 'bootstrap-4')
+    <div>
+        @if ($component->paginationVisibilityIsEnabled())
+            @if ($component->paginationIsEnabled() && $component->isPaginationMethod('standard') && $rows->lastPage() > 1)
+                <div class="row mt-3">
+                    <div class="col-12 col-md-6 overflow-auto">
+                        {{ $rows->links('livewire-tables::specific.bootstrap-4.pagination') }}
+                    </div>
+
+                    <div class="col-12 col-md-6 text-center text-md-right text-muted">
+                        <span>@lang('Showing')</span>
+                        <strong>{{ $rows->count() ? $rows->firstItem() : 0 }}</strong>
+                        <span>@lang('to')</span>
+                        <strong>{{ $rows->count() ? $rows->lastItem() : 0 }}</strong>
+                        <span>@lang('of')</span>
+                        <strong>{{ $rows->total() }}</strong>
+                        <span>@lang('results')</span>
+                    </div>
+                </div>
+            @elseif ($component->paginationIsEnabled() && $component->isPaginationMethod('simple'))
+                <div class="row mt-3">
+                    <div class="col-12 col-md-6 overflow-auto">
+                        {{ $rows->links('livewire-tables::specific.bootstrap-4.pagination') }}
+                    </div>
+
+                    <div class="col-12 col-md-6 text-center text-md-right text-muted">
+                        <span>@lang('Showing')</span>
+                        <strong>{{ $rows->count() ? $rows->firstItem() : 0 }}</strong>
+                        <span>@lang('to')</span>
+                        <strong>{{ $rows->count() ? $rows->lastItem() : 0 }}</strong>
+                    </div>
+                </div>
+            @else
+                <div class="row mt-3">
+                    <div class="col-12 text-muted">
+                        @lang('Showing')
+                        <strong>{{ $rows->count() }}</strong>
+                        @lang('results')
+                    </div>
+                </div>
+            @endif
+        @endif
+    </div>
+@elseif ($theme === 'bootstrap-5')
+    <div>
+        @if ($component->paginationVisibilityIsEnabled())
+            @if ($component->paginationIsEnabled() && $component->isPaginationMethod('standard') && $rows->lastPage() > 1)
+                <div class="row mt-3">
+                    <div class="col-12 col-md-6 overflow-auto">
+                        {{ $rows->links('livewire-tables::specific.bootstrap-4.pagination') }}
+                    </div>
+
+                    <div class="col-12 col-md-6 text-center text-md-end text-muted">
+                        <span>@lang('Showing')</span>
+                        <strong>{{ $rows->count() ? $rows->firstItem() : 0 }}</strong>
+                        <span>@lang('to')</span>
+                        <strong>{{ $rows->count() ? $rows->lastItem() : 0 }}</strong>
+                        <span>@lang('of')</span>
+                        <strong>{{ $rows->total() }}</strong>
+                        <span>@lang('results')</span>
+                    </div>
+                </div>
+            @elseif ($component->paginationIsEnabled() && $component->isPaginationMethod('simple'))
+                <div class="row mt-3">
+                    <div class="col-12 col-md-6 overflow-auto">
+                        {{ $rows->links('livewire-tables::specific.bootstrap-4.pagination') }}
+                    </div>
+
+                    <div class="col-12 col-md-6 text-center text-md-end text-muted">
+                        <span>@lang('Showing')</span>
+                        <strong>{{ $rows->count() ? $rows->firstItem() : 0 }}</strong>
+                        <span>@lang('to')</span>
+                        <strong>{{ $rows->count() ? $rows->lastItem() : 0 }}</strong>
+                    </div>
+                </div>
+            @else
+                <div class="row mt-3">
+                    <div class="col-12 text-muted">
+                        @lang('Showing')
+                        <strong>{{ $rows->count() }}</strong>
+                        @lang('results')
+                    </div>
+                </div>
+            @endif
+        @endif
+    </div>
+@endif
+
+@if ($component->hasConfigurableAreaFor('after-pagination'))
+    @include($component->getConfigurableAreaFor('after-pagination'), $component->getParametersForConfigurableArea('after-pagination'))
+@endif
--- a/resources/views/vendor/livewire-tables/components/table.blade.php
+++ b/resources/views/vendor/livewire-tables/components/table.blade.php
@@ -0,0 +1,97 @@
+@aware(['component'])
+
+@php
+    $theme = $component->getTheme();
+
+    $customAttributes = [
+        'wrapper' => $this->getTableWrapperAttributes(),
+        'table' => $this->getTableAttributes(),
+        'thead' => $this->getTheadAttributes(),
+        'tbody' => $this->getTbodyAttributes(),
+    ];
+@endphp
+
+@if ($theme === 'tailwind')
+    <div {{
+        $attributes->merge($customAttributes['wrapper'])
+            ->class(['shadow overflow-y-scroll border-b border-gray-200 dark:border-gray-700 sm:rounded-lg' => $customAttributes['wrapper']['default'] ?? true])
+            ->except('default')
+    }}>
+        <table {{
+            $attributes->merge($customAttributes['table'])
+                ->class(['min-w-full divide-y divide-gray-200 dark:divide-none' => $customAttributes['table']['default'] ?? true])
+                ->except('default')
+        }}>
+            <thead {{
+                $attributes->merge($customAttributes['thead'])
+                    ->class(['bg-gray-50' => $customAttributes['thead']['default'] ?? true])
+                    ->except('default')
+            }}>
+                <tr>
+                    {{ $thead }}
+                </tr>
+            </thead>
+            <tbody
+                @if ($component->reorderIsEnabled())
+                    wire:sortable="{{ $component->getReorderMethod() }}"
+                @endif
+
+                {{
+                    $attributes->merge($customAttributes['tbody'])
+                        ->class(['bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-none' => $customAttributes['tbody']['default'] ?? true])
+                        ->except('default')
+                }}
+            >
+                {{ $slot }}
+            </tbody>
+
+            @if (isset($tfoot))
+                <tfoot>
+                    {{ $tfoot }}
+                </tfoot>
+            @endif
+        </table>
+    </div>
+@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+    <div {{ 
+        $attributes->merge($customAttributes['wrapper'])
+            ->class(['table-responsive' => $customAttributes['wrapper']['default'] ?? true])
+            ->except('default')
+    }}>
+        <table {{
+            $attributes->merge($customAttributes['table'])
+                ->class(['table table-striped' => $customAttributes['table']['default'] ?? true])
+                ->except('default')
+        }}>
+            <thead {{
+                $attributes->merge($customAttributes['thead'])
+                    ->class(['' => $customAttributes['thead']['default'] ?? true])
+                    ->except('default')
+            }}>
+                <tr>
+                    {{ $thead }}
+                </tr>
+            </thead>
+
+            <tbody
+                @if ($component->reorderIsEnabled())
+                    wire:sortable="{{ $component->getReorderMethod() }}"
+                @endif
+
+                {{
+                    $attributes->merge($customAttributes['tbody'])
+                        ->class(['' => $customAttributes['tbody']['default'] ?? true])
+                        ->except('default')
+                }}
+            >
+                {{ $slot }}
+            </tbody>
+
+            @if (isset($tfoot))
+                <tfoot>
+                    {{ $tfoot }}
+                </tfoot>
+            @endif
+        </table>
+    </div>
+@endif
--- a/resources/views/vendor/livewire-tables/components/table/empty.blade.php
+++ b/resources/views/vendor/livewire-tables/components/table/empty.blade.php
@@ -0,0 +1,22 @@
+@aware(['component'])
+
+@php
+    $attributes = $attributes->merge(['wire:key' => 'empty-message-'.$component->id]);
+    $theme = $component->getTheme();
+@endphp
+
+@if ($theme === 'tailwind')
+    <tr {{ $attributes }}>
+        <td colspan="{{ $component->getColspanCount() }}">
+            <div class="flex justify-center items-center space-x-2 dark:bg-gray-800">
+                <span class="font-medium py-8 text-gray-400 text-lg dark:text-white">{{ $component->getEmptyMessage() }}</span>
+            </div>
+        </td>
+    </tr>
+@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+     <tr {{ $attributes }}>
+        <td colspan="{{ $component->getColspanCount() }}">
+            {{ $component->getEmptyMessage() }}
+        </td>
+    </tr>
+@endif
--- a/resources/views/vendor/livewire-tables/components/table/row-contents.blade.php
+++ b/resources/views/vendor/livewire-tables/components/table/row-contents.blade.php
@@ -0,0 +1,66 @@
+@aware(['component'])
+@props(['row', 'rowIndex'])
+
+@if ($component->collapsingColumnsAreEnabled() && $component->hasCollapsedColumns())
+    @php
+        $theme = $component->getTheme();
+        $columns = collect([]);
+
+        if ($component->shouldCollapseOnMobile() && $component->shouldCollapseOnTablet()) {
+            $columns->push($component->getCollapsedMobileColumns());
+            $columns->push($component->getCollapsedTabletColumns());
+        } elseif ($component->shouldCollapseOnTablet() && ! $component->shouldCollapseOnMobile()) {
+            $columns->push($component->getCollapsedTabletColumns());
+        } elseif ($component->shouldCollapseOnMobile() && ! $component->shouldCollapseOnTablet()) {
+            $columns->push($component->getCollapsedMobileColumns());
+        }
+
+        $columns = $columns->collapse();
+
+        // TODO: Column count
+        $colspan = $columns->count() + 1;
+    @endphp
+
+    @if ($theme === 'tailwind')
+        <tr
+            wire:key="row-{{ $rowIndex }}-collapsed-contents"
+            wire:loading.class.delay="opacity-50 dark:bg-gray-900 dark:opacity-60"
+            x-data
+            @toggle-row-content.window="$event.detail.row === {{ $rowIndex }} ? $el.classList.toggle('hidden') : null"
+            class="hidden md:hidden bg-white dark:bg-gray-700 dark:text-white"
+        >
+            <td class="pt-4 pb-2 px-4" colspan="{{ $colspan }}">
+                <div>
+                    @foreach($columns as $colIndex => $column)
+                        @continue($column->isHidden())
+                        @continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
+                        
+                        <p class="block mb-2 @if($column->shouldCollapseOnMobile()) sm:hidden @endif @if($column->shouldCollapseOnTablet()) md:hidden @endif">
+                            <strong>{{ $column->getTitle() }}</strong>: {{ $column->renderContents($row) }}
+                        </p>
+                    @endforeach
+                </div>
+            </td>
+        </tr>
+    @elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+        <tr
+            wire:key="row-{{ $rowIndex }}-collapsed-contents"
+            x-data
+            @toggle-row-content.window="$event.detail.row === {{ $rowIndex }} ? $el.classList.toggle('d-none') : null"
+            class="d-none d-md-none"
+        >
+            <td class="pt-3 p-2" colspan="{{ $colspan }}">
+                <div>
+                    @foreach($columns as $colIndex => $column)
+                        @continue($column->isHidden())
+                        @continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
+                        
+                        <p class="d-block mb-2 @if($column->shouldCollapseOnMobile()) d-sm-none @endif @if($column->shouldCollapseOnTablet()) d-md-none @endif">
+                            <strong>{{ $column->getTitle() }}</strong>: {{ $column->renderContents($row) }}
+                        </p>
+                    @endforeach
+                </div>
+            </td>
+        </tr>
+    @endif
+@endif
--- a/resources/views/vendor/livewire-tables/components/table/td.blade.php
+++ b/resources/views/vendor/livewire-tables/components/table/td.blade.php
@@ -0,0 +1,43 @@
+@aware(['component', 'row', 'rowIndex'])
+@props(['column', 'colIndex'])
+
+@php
+    $attributes = $attributes->merge(['wire:key' => 'cell-'.$rowIndex.'-'.$colIndex.'-'.$component->id]);
+    $theme = $component->getTheme();
+    $customAttributes = $component->getTdAttributes($column, $row, $colIndex, $rowIndex)
+@endphp
+
+@if ($theme === 'tailwind')
+    <td
+        @if ($column->isClickable())
+            onclick="window.open('{{ $component->getTableRowUrl($row) }}', '{{ $component->getTableRowUrlTarget($row) ?? '_self' }}')"
+        @endif
+
+        {{
+            $attributes->merge($customAttributes)
+                ->class(['px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white' => $customAttributes['default'] ?? true])
+                ->class(['hidden sm:table-cell' => $column && $column->shouldCollapseOnMobile()])
+                ->class(['hidden md:table-cell' => $column && $column->shouldCollapseOnTablet()])
+                ->except('default')
+        }}
+    >
+        {{ $slot }}
+    </td>
+@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+    <td
+        @if ($column->isClickable())
+            onclick="window.open('{{ $component->getTableRowUrl($row) }}', '{{ $component->getTableRowUrlTarget($row) ?? '_self' }}')"
+            style="cursor:pointer"
+        @endif
+
+        {{
+            $attributes->merge($customAttributes)
+                ->class(['' => $customAttributes['default'] ?? true])
+                ->class(['d-none d-sm-table-cell' => $column && $column->shouldCollapseOnMobile()])
+                ->class(['d-none d-md-table-cell' => $column && $column->shouldCollapseOnTablet()])
+                ->except('default')
+        }}
+    >
+        {{ $slot }}
+    </td>
+@endif
--- a/resources/views/vendor/livewire-tables/components/table/td/bulk-actions.blade.php
+++ b/resources/views/vendor/livewire-tables/components/table/td/bulk-actions.blade.php
@@ -0,0 +1,43 @@
+@aware(['component'])
+@props(['row'])
+
+@if ($component->bulkActionsAreEnabled() && $component->hasBulkActions())
+    @php
+        $theme = $component->getTheme();
+    @endphp
+
+    @if ($theme === 'tailwind')
+        <x-livewire-tables::table.td.plain>
+            <div class="inline-flex rounded-md shadow-sm">
+                <input
+                    wire:model="selected"
+                    wire:loading.attr.delay="disabled"
+                    value="{{ $row->{$this->getPrimaryKey()} }}"
+                    type="checkbox"
+                    class="rounded border-gray-300 text-indigo-600 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600"
+                />
+            </div>
+        </x-livewire-tables::table.td.plain>
+    @elseif ($theme === 'bootstrap-4')
+        <x-livewire-tables::table.td.plain>
+            <input
+                wire:model="selected"
+                wire:loading.attr.delay="disabled"
+                value="{{ $row->{$this->getPrimaryKey()} }}"
+                type="checkbox"
+            />
+        </x-livewire-tables::table.td.plain>
+    @elseif ($theme === 'bootstrap-5')
+        <x-livewire-tables::table.td.plain>
+            <div class="form-check">
+                <input
+                    wire:model="selected"
+                    wire:loading.attr.delay="disabled"
+                    value="{{ $row->{$this->getPrimaryKey()} }}"
+                    type="checkbox"
+                    class="form-check-input"
+                />
+            </div>
+        </x-livewire-tables::table.td.plain>
+    @endif
+@endif
--- a/resources/views/vendor/livewire-tables/components/table/td/plain.blade.php
+++ b/resources/views/vendor/livewire-tables/components/table/td/plain.blade.php
@@ -0,0 +1,24 @@
+@aware(['component'])
+@props(['column' => null, 'customAttributes' => []])
+
+@php
+    $theme = $component->getTheme();
+@endphp
+
+@if ($theme === 'tailwind')
+    <td {{ $attributes
+        ->merge($customAttributes)
+        ->class(['px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white' => $customAttributes['default'] ?? true])
+        ->class(['hidden sm:table-cell' => $column && $column->shouldCollapseOnMobile()])
+        ->class(['hidden md:table-cell' => $column && $column->shouldCollapseOnTablet()])
+        ->except('default')
+    }}>{{ $slot }}</td>
+@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+    <td {{ $attributes
+        ->merge($customAttributes)
+        ->class(['' => $customAttributes['default'] ?? true])
+        ->class(['d-none d-sm-table-cell' => $column && $column->shouldCollapseOnMobile()])
+        ->class(['d-none d-md-table-cell' => $column && $column->shouldCollapseOnTablet()])
+        ->except('default')
+    }}>{{ $slot }}</td>
+@endif
--- a/resources/views/vendor/livewire-tables/components/table/td/reorder.blade.php
+++ b/resources/views/vendor/livewire-tables/components/table/td/reorder.blade.php
@@ -0,0 +1,21 @@
+@aware(['component'])
+
+@php
+    $theme = $component->getTheme();
+@endphp
+
+@if ($this->currentlyReorderingIsEnabled())
+    @if ($theme === 'tailwind')
+        <x-livewire-tables::table.td.plain wire:sortable.handle>
+            <svg xmlns="http://www.w3.org/2000/svg" class="inline w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+        </x-livewire-tables::table.td.plain>
+    @elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+        <x-livewire-tables::table.td.plain wire:sortable.handle>
+            <svg xmlns="http://www.w3.org/2000/svg" class="d-inline" style="width:1em;height:1em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+        </x-livewire-tables::table.td.plain>
+    @endif
+@endif
--- a/resources/views/vendor/livewire-tables/components/table/td/row-contents.blade.php
+++ b/resources/views/vendor/livewire-tables/components/table/td/row-contents.blade.php
@@ -0,0 +1,67 @@
+@aware(['component'])
+@props(['rowIndex', 'hidden' => false])
+
+@if ($component->collapsingColumnsAreEnabled() && $component->hasCollapsedColumns())
+    @php
+        $theme = $component->getTheme();
+    @endphp
+
+    @if ($theme === 'tailwind')
+        <td
+            @if (! $hidden) x-data="{open:false}" @endif
+            {{
+                $attributes
+                    ->merge(['class' => 'p-3 table-cell text-center'])
+                    ->class([
+                        'md:hidden' =>
+                            (($component->shouldCollapseOnMobile() && $component->shouldCollapseOnTablet()) ||
+                            ($component->shouldCollapseOnTablet() && ! $component->shouldCollapseOnMobile()))
+                    ])
+                    ->class(['sm:hidden' => $component->shouldCollapseOnMobile() && ! $component->shouldCollapseOnTablet()])
+            }}
+        >
+            @if (! $hidden)
+                <button
+                    x-on:click.prevent="$dispatch('toggle-row-content', {'row': {{ $rowIndex }}});open = !open"
+                >
+                    <svg x-show="!open" xmlns="http://www.w3.org/2000/svg"  class="text-green-600 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+
+                    <svg x-cloak x-show="open" xmlns="http://www.w3.org/2000/svg" class="text-yellow-600 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                </button>
+            @endif
+        </td>
+    @elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+        <td
+            @if (! $hidden) x-data="{open:false}" @endif
+            {{
+                $attributes
+                    ->class([
+                        'd-md-none' =>
+                            (($component->shouldCollapseOnMobile() && $component->shouldCollapseOnTablet()) ||
+                            ($component->shouldCollapseOnTablet() && ! $component->shouldCollapseOnMobile()))
+                    ])
+                    ->class(['d-sm-none' => $component->shouldCollapseOnMobile() && ! $component->shouldCollapseOnTablet()])
+            }}
+        >
+            @if (! $hidden)
+                <button
+                    x-on:click.prevent="$dispatch('toggle-row-content', {'row': {{ $rowIndex }}});open = !open"
+                    class="p-0"
+                    style="background:none;border:none;"
+                >
+                    <svg x-show="!open" xmlns="http://www.w3.org/2000/svg" class="text-success" style="width:1.4em;height:1.4em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+
+                    <svg x-cloak x-show="open" xmlns="http://www.w3.org/2000/svg" class="text-warning" style="width:1.4em;height:1.4em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                </button>
+            @endif
+        </td>
+    @endif
+@endif
--- a/resources/views/vendor/livewire-tables/components/table/th.blade.php
+++ b/resources/views/vendor/livewire-tables/components/table/th.blade.php
@@ -0,0 +1,95 @@
+@aware(['component'])
+@props(['column', 'index'])
+
+@php
+    $attributes = $attributes->merge(['wire:key' => 'header-col-'.$index.'-'.$component->id]);
+    $theme = $component->getTheme();
+    $customAttributes = $component->getThAttributes($column);
+    $customSortButtonAttributes = $component->getThSortButtonAttributes($column);
+    $direction = $column->hasField() ? $component->getSort($column->getColumnSelectName()) : null;
+@endphp
+
+@if ($theme === 'tailwind')
+    <th scope="col" {{
+        $attributes->merge($customAttributes)
+            ->class(['px-6 py-3 text-left text-xs font-medium whitespace-nowrap text-gray-500 uppercase tracking-wider dark:bg-gray-800 dark:text-gray-400' => $customAttributes['default'] ?? true])
+            ->class(['hidden sm:table-cell' => $column->shouldCollapseOnMobile()])
+            ->class(['hidden md:table-cell' => $column->shouldCollapseOnTablet()])
+            ->except('default')
+    }}>
+        @unless ($component->sortingIsEnabled() && $column->isSortable())
+            {{ $column->getTitle() }}
+        @else
+            <button
+                wire:click="sortBy('{{ $column->getColumnSelectName() }}')"
+                {{ 
+                    $attributes->merge($customSortButtonAttributes)
+                        ->class(['flex items-center space-x-1 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider group focus:outline-none dark:text-gray-400' => $customSortButtonAttributes['default'] ?? true])
+                        ->except(['default', 'wire:key'])
+                }}
+            >
+                <span>{{ $column->getTitle() }}</span>
+
+                <span class="relative flex items-center">
+                    @if ($direction === 'asc')
+                        <svg class="w-3 h-3 group-hover:opacity-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
+                        </svg>
+
+                        <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 absolute" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                        </svg>
+                    @elseif ($direction === 'desc')
+                        <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 absolute" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+
+                        <svg class="w-3 h-3 group-hover:opacity-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                        </svg>
+                    @else
+                        <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
+                        </svg>
+                    @endif
+                </span>
+            </button>
+        @endunless
+    </th>
+@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+    <th scope="col" {{
+        $attributes->merge($customAttributes)
+            ->class(['' => $customAttributes['default'] ?? true])
+            ->class(['d-none d-sm-table-cell' => $column->shouldCollapseOnMobile()])
+            ->class(['d-none d-md-table-cell' => $column->shouldCollapseOnTablet()])
+            ->except('default')
+    }}>
+        @unless ($component->sortingIsEnabled() && $column->isSortable())
+            {{ $column->getTitle() }}
+        @else
+            <div 
+                class="d-flex align-items-center"
+                wire:click="sortBy('{{ $column->getColumnSelectName() }}')"
+                style="cursor:pointer;"
+            >
+                <span>{{ $column->getTitle() }}</span>
+
+                <span class="relative d-flex align-items-center">
+                    @if ($direction === 'asc')
+                        <svg xmlns="http://www.w3.org/2000/svg" class="ml-1" style="width:1em;height:1em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
+                        </svg>
+                    @elseif ($direction === 'desc')
+                        <svg xmlns="http://www.w3.org/2000/svg" class="ml-1" style="width:1em;height:1em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                        </svg>
+                    @else
+                        <svg xmlns="http://www.w3.org/2000/svg" class="ml-1" style="width:1em;height:1em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
+                        </svg>
+                    @endif
+                </span>
+            </div>
+        @endunless
+    </th>
+@endif
--- a/resources/views/vendor/livewire-tables/components/table/th/bulk-actions.blade.php
+++ b/resources/views/vendor/livewire-tables/components/table/th/bulk-actions.blade.php
@@ -0,0 +1,36 @@
+@aware(['component'])
+
+@if ($component->bulkActionsAreEnabled() && $component->hasBulkActions())
+    @php
+        $theme = $component->getTheme();
+    @endphp
+
+    @if ($theme === 'tailwind')
+        <x-livewire-tables::table.th.plain>
+            <div class="inline-flex rounded-md shadow-sm">
+                <input
+                    wire:model="selectAll"
+                    type="checkbox"
+                    class="rounded border-gray-300 text-indigo-600 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600"
+                />
+            </div>
+        </x-livewire-tables::table.th.plain>
+    @elseif ($theme === 'bootstrap-4')
+        <x-livewire-tables::table.th.plain>
+            <input
+                wire:model="selectAll"
+                type="checkbox"
+            />
+        </x-livewire-tables::table.th.plain>
+    @elseif ($theme === 'bootstrap-5')
+        <x-livewire-tables::table.th.plain>
+            <div class="form-check">
+                <input
+                    wire:model="selectAll"
+                    type="checkbox"
+                    class="form-check-input"
+                />
+            </div>
+        </x-livewire-tables::table.th.plain>
+    @endif
+@endif
--- a/resources/views/vendor/livewire-tables/components/table/th/plain.blade.php
+++ b/resources/views/vendor/livewire-tables/components/table/th/plain.blade.php
@@ -0,0 +1,11 @@
+@aware(['component'])
+
+@php
+    $theme = $component->getTheme();
+@endphp
+
+@if ($theme === 'tailwind')
+    <th scope="col" {{ $attributes->merge(['class' => 'table-cell px-3 py-2 md:px-6 md:py-3 text-center md:text-left bg-gray-50 dark:bg-gray-800']) }}>{{ $slot }}</th>
+@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+    <th scope="col">{{ $slot }}</th>
+@endif
--- a/resources/views/vendor/livewire-tables/components/table/th/reorder.blade.php
+++ b/resources/views/vendor/livewire-tables/components/table/th/reorder.blade.php
@@ -0,0 +1,5 @@
+@aware(['component'])
+
+@if ($this->currentlyReorderingIsEnabled())
+    <x-livewire-tables::table.th.plain />
+@endif
--- a/resources/views/vendor/livewire-tables/components/table/th/row-contents.blade.php
+++ b/resources/views/vendor/livewire-tables/components/table/th/row-contents.blade.php
@@ -0,0 +1,37 @@
+@aware(['component'])
+
+@if ($component->collapsingColumnsAreEnabled() && $component->hasCollapsedColumns())
+    @php
+        $theme = $component->getTheme();
+    @endphp
+
+    @if ($theme === 'tailwind')
+        <th
+            scope="col"
+            {{
+                $attributes
+                    ->merge(['class' => 'table-cell dark:bg-gray-800'])
+                    ->class([
+                        'md:hidden' =>
+                            (($component->shouldCollapseOnMobile() && $component->shouldCollapseOnTablet()) ||
+                            ($component->shouldCollapseOnTablet() && ! $component->shouldCollapseOnMobile()))
+                    ])
+                    ->class(['sm:hidden' => $component->shouldCollapseOnMobile() && ! $component->shouldCollapseOnTablet()])
+            }}
+        ></th>
+    @elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+        <th
+            scope="col"
+            {{
+                $attributes
+                    ->merge(['class' => 'd-table-cell'])
+                    ->class([
+                        'd-md-none' =>
+                            (($component->shouldCollapseOnMobile() && $component->shouldCollapseOnTablet()) ||
+                            ($component->shouldCollapseOnTablet() && ! $component->shouldCollapseOnMobile()))
+                    ])
+                    ->class(['d-sm-none' => $component->shouldCollapseOnMobile() && ! $component->shouldCollapseOnTablet()])
+            }}
+        ></th>
+    @endif
+@endif
--- a/resources/views/vendor/livewire-tables/components/table/tr.blade.php
+++ b/resources/views/vendor/livewire-tables/components/table/tr.blade.php
@@ -0,0 +1,45 @@
+@aware(['component'])
+@props(['row', 'rowIndex'])
+
+@php
+    $attributes = $attributes->merge(['wire:key' => 'row-'.$rowIndex.'-'.$component->id]);
+    $theme = $component->getTheme();
+    $customAttributes = $this->getTrAttributes($row, $rowIndex);
+@endphp
+
+@if ($theme === 'tailwind')
+    <tr
+        wire:loading.class.delay="opacity-50 dark:bg-gray-900 dark:opacity-60"
+
+        @if ($component->reorderIsEnabled() && $component->currentlyReorderingIsEnabled())
+            wire:sortable.item="{{ $row->getKey() }}"
+        @endif
+
+        {{
+            $attributes->merge($customAttributes)
+                ->class(['bg-white dark:bg-gray-700 dark:text-white' => ($customAttributes['default'] ?? true) && $rowIndex % 2 === 0])
+                ->class(['bg-gray-50 dark:bg-gray-800 dark:text-white' => ($customAttributes['default'] ?? true) && $rowIndex % 2 !== 0])
+                ->class(['cursor-pointer' => $component->hasTableRowUrl()])
+                ->except('default')
+        }}
+    >
+        {{ $slot }}
+    </tr>
+@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+    <tr
+        wire:loading.class.delay=""
+        
+        @if ($component->reorderIsEnabled() && $component->currentlyReorderingIsEnabled())
+            wire:sortable.item="{{ $row->getKey() }}"
+        @endif
+
+        {{
+            $attributes->merge($customAttributes)
+                ->class(['' => ($customAttributes['default'] ?? true) && $rowIndex % 2 === 0])
+                ->class(['' => ($customAttributes['default'] ?? true) && $rowIndex % 2 !== 0])
+                ->except('default')
+        }}
+    >
+        {{ $slot }}
+    </tr>
+@endif
--- a/resources/views/vendor/livewire-tables/components/table/tr/bulk-actions.blade.php
+++ b/resources/views/vendor/livewire-tables/components/table/tr/bulk-actions.blade.php
@@ -0,0 +1,119 @@
+@aware(['component'])
+@props(['rows'])
+
+@if ($component->bulkActionsAreEnabled() && $component->hasBulkActions() && $component->hasSelected())
+    @php
+        $table = $component->getTableName();
+        $theme = $component->getTheme();
+        $colspan = $component->getColspanCount();
+        $selected = $component->getSelectedCount();
+        $selectAll = $component->selectAllIsEnabled();
+    @endphp
+
+    @if ($theme === 'tailwind')
+        <x-livewire-tables::table.tr.plain
+            wire:key="bulk-select-message-{{ $table }}"
+            class="bg-indigo-50 dark:bg-gray-900 dark:text-white"
+        >
+            <x-livewire-tables::table.td.plain :colspan="$colspan">
+                @if ($selectAll)
+                    <div wire:key="all-selected-{{ $table }}">
+                        <span>
+                            @lang('You are currently selecting all')
+                            <strong>{{ number_format($rows->total()) }}</strong>
+                            @lang('rows').
+                        </span>
+
+                        <button
+                            wire:click="clearSelected"
+                            wire:loading.attr="disabled"
+                            type="button"
+                            class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-gray-800 focus:underline transition duration-150 ease-in-out dark:text-white dark:hover:text-gray-400"
+                        >
+                            @lang('Deselect All')
+                        </button>
+                    </div>
+                @else
+                    <div wire:key="some-selected-{{ $table }}">
+                        <span>
+                            @lang('You have selected')
+                            <strong>{{ $selected }}</strong>
+                            @lang('rows, do you want to select all')
+                            <strong>{{ number_format($rows->total()) }}</strong>?
+                        </span>
+
+                        <button
+                            wire:click="setAllSelected"
+                            wire:loading.attr="disabled"
+                            type="button"
+                            class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-gray-800 focus:underline transition duration-150 ease-in-out dark:text-white dark:hover:text-gray-400"
+                        >
+                            @lang('Select All')
+                        </button>
+
+                        <button
+                            wire:click="clearSelected"
+                            wire:loading.attr="disabled"
+                            type="button"
+                            class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-gray-800 focus:underline transition duration-150 ease-in-out dark:text-white dark:hover:text-gray-400"
+                        >
+                            @lang('Deselect All')
+                        </button>
+                    </div>
+                @endif
+            </x-livewire-tables::table.td.plain>
+        </x-livewire-tables::table.tr.plain>
+    @elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+        <x-livewire-tables::table.tr.plain
+            wire:key="bulk-select-message-{{ $table }}"
+        >
+            <x-livewire-tables::table.td.plain :colspan="$colspan">
+                @if ($selectAll)
+                    <div wire:key="all-selected-{{ $table }}">
+                        <span>
+                            @lang('You are currently selecting all')
+                            <strong>{{ number_format($rows->total()) }}</strong>
+                            @lang('rows').
+                        </span>
+
+                        <button
+                            wire:click="clearSelected"
+                            wire:loading.attr="disabled"
+                            type="button"
+                            class="btn btn-primary btn-sm"
+                        >
+                            @lang('Deselect All')
+                        </button>
+                    </div>
+                @else
+                    <div wire:key="some-selected-{{ $table }}">
+                        <span>
+                            @lang('You have selected')
+                            <strong>{{ $selected }}</strong>
+                            @lang('rows, do you want to select all')
+                            <strong>{{ number_format($rows->total()) }}</strong>?
+                        </span>
+
+                        <button
+                            wire:click="setAllSelected"
+                            wire:loading.attr="disabled"
+                            type="button"
+                            class="btn btn-primary btn-sm"
+                        >
+                            @lang('Select All')
+                        </button>
+
+                        <button
+                            wire:click="clearSelected"
+                            wire:loading.attr="disabled"
+                            type="button"
+                            class="btn btn-primary btn-sm"
+                        >
+                            @lang('Deselect All')
+                        </button>
+                    </div>
+                @endif
+            </x-livewire-tables::table.td.plain>
+        </x-livewire-tables::table.tr.plain>
+    @endif
+@endif
--- a/resources/views/vendor/livewire-tables/components/table/tr/footer.blade.php
+++ b/resources/views/vendor/livewire-tables/components/table/tr/footer.blade.php
@@ -0,0 +1,30 @@
+@aware(['component'])
+@props(['rows'])
+
+
+<x-livewire-tables::table.tr.plain 
+    :customAttributes="$this->getFooterTrAttributes($rows)" 
+    wire:key="footer-{{ $this->getTableName() }}"
+>
+    @if ($this->currentlyReorderingIsEnabled())
+        <x-livewire-tables::table.td.plain />
+    @endif
+
+    @if ($this->bulkActionsAreEnabled() && $this->hasBulkActions())
+        <x-livewire-tables::table.td.plain />
+    @endif
+
+    @if ($this->collapsingColumnsAreEnabled() && $this->hasCollapsedColumns())
+        <x-livewire-tables::table.td.row-contents rowIndex="-1" :hidden="true" />
+    @endif
+
+    @foreach($this->getColumns() as $colIndex => $column)
+        @continue($column->isHidden())
+        @continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
+        @continue($this->currentlyReorderingIsDisabled() && $column->isReorderColumn() && $this->hideReorderColumnUnlessReorderingIsEnabled())
+
+        <x-livewire-tables::table.td.plain :column="$column" :customAttributes="$this->getFooterTdAttributes($column, $rows, $colIndex)">
+            {{ $column->getFooterContents($rows) }}
+        </x-livewire-tables::table.td.plain>
+    @endforeach    
+</x-livewire-tables::table.tr.plain>
--- a/resources/views/vendor/livewire-tables/components/table/tr/plain.blade.php
+++ b/resources/views/vendor/livewire-tables/components/table/tr/plain.blade.php
@@ -0,0 +1,24 @@
+@aware(['component'])
+@props(['customAttributes' => []])
+
+@php
+    $theme = $component->getTheme();
+@endphp
+
+@if ($theme === 'tailwind')
+    <tr {{ $attributes
+        ->merge($customAttributes)
+        ->class(['bg-white dark:bg-gray-700 dark:text-white' => $customAttributes['default'] ?? true])
+        ->except('default')
+    }}>
+        {{ $slot }}
+    </tr>
+@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+    <tr {{ $attributes
+        ->merge($customAttributes)
+        ->class(['' => $customAttributes['default'] ?? true])
+        ->except('default')
+    }}>
+        {{ $slot }}
+    </tr>
+@endif
--- a/resources/views/vendor/livewire-tables/components/table/tr/secondary-header.blade.php
+++ b/resources/views/vendor/livewire-tables/components/table/tr/secondary-header.blade.php
@@ -0,0 +1,30 @@
+@aware(['component'])
+@props(['rows'])
+
+
+<x-livewire-tables::table.tr.plain 
+    :customAttributes="$this->getSecondaryHeaderTrAttributes($rows)" 
+    wire:key="secondary-header-{{ $this->getTableName() }}"
+>
+    @if ($this->currentlyReorderingIsEnabled())
+        <x-livewire-tables::table.td.plain />
+    @endif
+
+    @if ($this->bulkActionsAreEnabled() && $this->hasBulkActions())
+        <x-livewire-tables::table.td.plain />
+    @endif
+
+    @if ($this->collapsingColumnsAreEnabled() && $this->hasCollapsedColumns())
+        <x-livewire-tables::table.td.row-contents rowIndex="-1" :hidden="true" />
+    @endif
+
+    @foreach($this->getColumns() as $colIndex => $column)
+        @continue($column->isHidden())
+        @continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
+        @continue($this->currentlyReorderingIsDisabled() && $column->isReorderColumn() && $this->hideReorderColumnUnlessReorderingIsEnabled())
+
+        <x-livewire-tables::table.td.plain :column="$column" :customAttributes="$this->getSecondaryHeaderTdAttributes($column, $rows, $colIndex)">
+            {{ $column->getSecondaryHeaderContents($rows) }}
+        </x-livewire-tables::table.td.plain>
+    @endforeach    
+</x-livewire-tables::table.tr.plain>
--- a/resources/views/vendor/livewire-tables/components/tools.blade.php
+++ b/resources/views/vendor/livewire-tables/components/tools.blade.php
@@ -0,0 +1,15 @@
+@aware(['component'])
+
+@php
+    $theme = $component->getTheme();
+@endphp
+
+@if ($theme === 'tailwind')
+    <div class="flex-col">
+        {{ $slot }}
+    </div>
+@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+    <div class="d-flex flex-column">
+        {{ $slot }}
+    </div>
+@endif
--- a/resources/views/vendor/livewire-tables/components/tools/filter-pills.blade.php
+++ b/resources/views/vendor/livewire-tables/components/tools/filter-pills.blade.php
@@ -0,0 +1,137 @@
+@aware(['component'])
+
+@php
+    $theme = $component->getTheme();
+@endphp
+
+@if ($theme === 'tailwind')
+    <div>
+        @if ($component->filtersAreEnabled() && $component->filterPillsAreEnabled() && $component->hasAppliedVisibleFiltersForPills())
+            <div class="mb-4 px-4 md:p-0">
+                <small class="text-gray-700 dark:text-white">@lang('Applied Filters'):</small>
+
+                @foreach($component->getAppliedFiltersWithValues() as $filterSelectName => $value)
+                    @php
+                        $filter = $component->getFilterByKey($filterSelectName);
+                    @endphp
+
+                    @continue(is_null($filter))
+                    @continue($filter->isHiddenFromPills())
+
+                    <span
+                        wire:key="{{ $component->getTableName() }}-filter-pill-{{ $filter->getKey() }}"
+                        class="max-w-2xl truncate inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-indigo-100 text-indigo-800 capitalize dark:bg-indigo-200 dark:text-indigo-900"
+                    >
+                        {{ $filter->getFilterPillTitle() }}: {{ $filter->getFilterPillValue($value) }}
+
+                        <button
+                            wire:click="resetFilter('{{ $filter->getKey() }}')"
+                            type="button"
+                            class="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:outline-none focus:bg-indigo-500 focus:text-white"
+                        >
+                            <span class="sr-only">@lang('Remove filter option')</span>
+                            <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
+                                <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
+                            </svg>
+                        </button>
+                    </span>
+                @endforeach
+
+                <button
+                    wire:click.prevent="setFilterDefaults"
+                    class="focus:outline-none active:outline-none"
+                >
+                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-200 dark:text-gray-900">
+                        @lang('Clear')
+                    </span>
+                </button>
+            </div>
+        @endif
+    </div>
+@elseif ($theme === 'bootstrap-4')
+    <div>
+        @if ($component->filtersAreEnabled() && $component->filterPillsAreEnabled() && $component->hasAppliedVisibleFiltersForPills())
+            <div class="mb-3">
+                <small>@lang('Applied Filters'):</small>
+
+                @foreach($component->getAppliedFiltersWithValues() as $filterSelectName => $value)
+                    @php
+                        $filter = $component->getFilterByKey($filterSelectName);
+                    @endphp
+
+                    @continue(is_null($filter))
+                    @continue($filter->isHiddenFromPills())
+
+                    <span
+                        wire:key="{{ $component->getTableName() }}-filter-pill-{{ $filter->getKey() }}"
+                        class="badge badge-pill badge-info d-inline-flex align-items-center"
+                    >
+                        {{ $filter->getFilterPillTitle() }}: {{ $filter->getFilterPillValue($value) }}
+
+                        <a
+                            href="#"
+                            wire:click="resetFilter('{{ $filter->getKey() }}')"
+                            class="text-white ml-2"
+                        >
+                            <span class="sr-only">@lang('Remove filter option')</span>
+                            <svg style="width:.5em;height:.5em" stroke="currentColor" fill="none" viewBox="0 0 8 8">
+                                <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
+                            </svg>
+                        </a>
+                    </span>
+                @endforeach
+
+                <a
+                    href="#"
+                    wire:click.prevent="setFilterDefaults"
+                    class="badge badge-pill badge-light"
+                >
+                    @lang('Clear')
+                </a>
+            </div>
+        @endif
+    </div>
+@elseif ($theme === 'bootstrap-5')
+    <div>
+        @if ($component->filtersAreEnabled() && $component->filterPillsAreEnabled() && $component->hasAppliedVisibleFiltersForPills())
+            <div class="mb-3">
+                <small>@lang('Applied Filters'):</small>
+
+                @foreach($component->getAppliedFiltersWithValues() as $filterSelectName => $value)
+                    @php
+                        $filter = $component->getFilterByKey($filterSelectName);
+                    @endphp
+
+                    @continue(is_null($filter))
+                    @continue($filter->isHiddenFromPills())
+
+                    <span
+                        wire:key="{{ $component->getTableName() }}-filter-pill-{{ $filter->getKey() }}"
+                        class="badge rounded-pill bg-info d-inline-flex align-items-center"
+                    >
+                        {{ $filter->getFilterPillTitle() }}: {{ $filter->getFilterPillValue($value) }}
+
+                        <a
+                            href="#"
+                            wire:click="resetFilter('{{ $filter->getKey() }}')"
+                            class="text-white ms-2"
+                        >
+                            <span class="visually-hidden">@lang('Remove filter option')</span>
+                            <svg style="width:.5em;height:.5em" stroke="currentColor" fill="none" viewBox="0 0 8 8">
+                                <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
+                            </svg>
+                        </a>
+                    </span>
+                @endforeach
+
+                <a
+                    href="#"
+                    wire:click.prevent="setFilterDefaults"
+                    class="badge rounded-pill bg-light text-dark text-decoration-none"
+                >
+                    @lang('Clear')
+                </a>
+            </div>
+        @endif
+    </div>
+@endif
--- a/resources/views/vendor/livewire-tables/components/tools/filters/date.blade.php
+++ b/resources/views/vendor/livewire-tables/components/tools/filters/date.blade.php
@@ -0,0 +1,29 @@
+@php
+    $theme = $component->getTheme();
+@endphp
+
+@if ($theme === 'tailwind')
+    <div class="rounded-md shadow-sm">
+        <input
+            wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
+            wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+            id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+            type="date"
+            @if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
+            @if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
+            class="block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600"
+        />
+    </div>
+@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+    <div class="mb-3 mb-md-0 input-group">
+        <input
+            wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
+            wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+            id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+            type="date"
+            @if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
+            @if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
+            class="form-control"
+        />
+    </div>
+@endif
--- a/resources/views/vendor/livewire-tables/components/tools/filters/datetime.blade.php
+++ b/resources/views/vendor/livewire-tables/components/tools/filters/datetime.blade.php
@@ -0,0 +1,29 @@
+@php
+    $theme = $component->getTheme();
+@endphp
+
+@if ($theme === 'tailwind')
+    <div class="rounded-md shadow-sm">
+        <input
+            wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
+            wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+            id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+            type="datetime-local"
+            @if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
+            @if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
+            class="block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600"
+        />
+    </div>
+@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+    <div class="mb-3 mb-md-0 input-group">
+        <input
+            wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
+            wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+            id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+            type="datetime-local"
+            @if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
+            @if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
+            class="form-control"
+        />
+    </div>
+@endif
--- a/resources/views/vendor/livewire-tables/components/tools/filters/multi-select.blade.php
+++ b/resources/views/vendor/livewire-tables/components/tools/filters/multi-select.blade.php
@@ -0,0 +1,60 @@
+@php
+    $theme = $component->getTheme();
+@endphp
+
+@if ($theme === 'tailwind')
+    <div class="rounded-md">
+        <div>
+            <input
+                type="checkbox"
+                id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}-select-all"
+                wire:input="selectAllFilterOptions('{{ $filter->getKey() }}')"
+                {{ count($component->getAppliedFilterWithValue($filter->getKey()) ?? []) === count($filter->getOptions()) ? 'checked' : ''}}
+
+                class="text-indigo-600 rounded border-gray-300 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600 disabled:opacity-50 disabled:cursor-wait"
+            >
+            <label for="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}-select-all" class="dark:text-white">@lang('All')</label>
+        </div>
+
+        @foreach($filter->getOptions() as $key => $value)
+            <div wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}-multiselect-{{ $key }}">
+                <input
+                    type="checkbox"
+                    id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}"
+                    value="{{ $key }}"
+                    wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}"
+                    wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
+                    {{ count($component->getAppliedFilterWithValue($filter->getKey()) ?? []) === count($filter->getOptions()) ? 'disabled' : ''}}
+                    :class="{'disabled:bg-gray-400 disabled:hover:bg-gray-400' : {{ count($component->getAppliedFilterWithValue($filter->getKey()) ?? []) === count($filter->getOptions()) ? 'true' : 'false' }}}"
+                    class="text-indigo-600 rounded border-gray-300 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600 disabled:opacity-50 disabled:cursor-wait"
+                >
+                <label for="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}" class="dark:text-white">{{ $value }}</label>
+            </div>
+        @endforeach
+    </div>
+@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+    <div class="form-check">
+        <input
+            type="checkbox"
+            id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}-select-all"
+            wire:input="selectAllFilterOptions('{{ $filter->getKey() }}')"
+            {{ count($component->getAppliedFilterWithValue($filter->getKey()) ?? []) === count($filter->getOptions()) ? 'checked' : ''}}
+            class="form-check-input"
+        >
+        <label class="form-check-label" for="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}-select-all">@lang('All')</label>
+    </div>
+
+    @foreach($filter->getOptions() as $key => $value)
+        <div class="form-check" wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}-multiselect-{{ $key }}">
+            <input
+                class="form-check-input"
+                type="checkbox"
+                id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}"
+                value="{{ $key }}"
+                wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}"
+                wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
+            >
+            <label class="form-check-label" for="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}">{{ $value }}</label>
+        </div>
+    @endforeach
+@endif
--- a/resources/views/vendor/livewire-tables/components/tools/filters/number.blade.php
+++ b/resources/views/vendor/livewire-tables/components/tools/filters/number.blade.php
@@ -0,0 +1,29 @@
+@php
+    $theme = $component->getTheme();
+@endphp
+
+@if ($theme === 'tailwind')
+    <div class="rounded-md shadow-sm">
+        <input
+            wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
+            wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+            id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+            type="number"
+            @if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
+            @if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
+            class="block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600"
+        />
+    </div>
+@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+    <div class="mb-3 mb-md-0 input-group">
+        <input
+            wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
+            wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+            id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+            type="number"
+            @if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
+            @if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
+            class="form-control"
+        />
+    </div>
+@endif
--- a/resources/views/vendor/livewire-tables/components/tools/filters/select.blade.php
+++ b/resources/views/vendor/livewire-tables/components/tools/filters/select.blade.php
@@ -0,0 +1,45 @@
+@php
+    $theme = $component->getTheme();
+@endphp
+
+@if ($theme === 'tailwind')
+    <div class="rounded-md shadow-sm">
+        <select
+            wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
+            wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+            id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+            class="block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600"
+        >
+            @foreach($filter->getOptions() as $key => $value)
+                @if (is_iterable($value))
+                    <optgroup label="{{ $key }}">
+                        @foreach ($value as $optionKey => $optionValue)
+                            <option value="{{ $optionKey }}">{{ $optionValue }}</option>
+                        @endforeach
+                    </optgroup>
+                @else
+                    <option value="{{ $key }}">{{ $value }}</option>
+                @endif
+            @endforeach
+        </select>
+    </div>
+@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+    <select
+        wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
+        wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+        id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+        class="{{ $theme === 'bootstrap-4' ? 'form-control' : 'form-select' }}"
+    >
+        @foreach($filter->getOptions() as $key => $value)
+            @if (is_iterable($value))
+                <optgroup label="{{ $key }}">
+                    @foreach ($value as $optionKey => $optionValue)
+                        <option value="{{ $optionKey }}">{{ $optionValue }}</option>
+                    @endforeach
+                </optgroup>
+            @else
+                <option value="{{ $key }}">{{ $value }}</option>
+            @endif
+        @endforeach
+    </select>
+@endif
--- a/resources/views/vendor/livewire-tables/components/tools/filters/text-field.blade.php
+++ b/resources/views/vendor/livewire-tables/components/tools/filters/text-field.blade.php
@@ -0,0 +1,29 @@
+@php
+    $theme = $component->getTheme();
+@endphp
+
+@if ($theme === 'tailwind')
+    <div class="rounded-md shadow-sm">
+        <input
+            wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
+            wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+            id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+            type="text"
+            @if($filter->hasConfig('placeholder')) placeholder="{{ $filter->getConfig('placeholder') }}" @endif
+            @if($filter->hasConfig('maxlength')) maxlength="{{ $filter->getConfig('maxlength') }}" @endif
+            class="block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600"
+        />
+    </div>
+@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+    <div class="mb-3 mb-md-0 input-group">
+        <input
+            wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
+            wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+            id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+            type="text"
+            @if($filter->hasConfig('placeholder')) placeholder="{{ $filter->getConfig('placeholder') }}" @endif
+            @if($filter->hasConfig('maxlength')) maxlength="{{ $filter->getConfig('maxlength') }}" @endif
+            class="form-control"
+        />
+    </div>
+@endif
--- a/resources/views/vendor/livewire-tables/components/tools/sorting-pills.blade.php
+++ b/resources/views/vendor/livewire-tables/components/tools/sorting-pills.blade.php
@@ -0,0 +1,140 @@
+@aware(['component'])
+
+@php
+    $theme = $component->getTheme();
+@endphp
+
+@if ($theme === 'tailwind')
+    <div>
+        @if ($component->sortingPillsAreEnabled() && $component->hasSorts())
+            <div class="mb-4 px-4 md:p-0">
+                <small class="text-gray-700 dark:text-white">@lang('Applied Sorting'):</small>
+
+                @foreach($component->getSorts() as $columnSelectName => $direction)
+                    @php
+                        $column = $component->getColumnBySelectName($columnSelectName);
+                    @endphp
+
+                    @continue(is_null($column))
+                    @continue($column->isHidden())
+                    @continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
+
+                    <span
+                        wire:key="sorting-pill-{{ $columnSelectName }}"
+                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-indigo-100 text-indigo-800 capitalize dark:bg-indigo-200 dark:text-indigo-900"
+                    >
+                        {{ $column->getSortingPillTitle() }}: {{ $column->getSortingPillDirection($component, $direction) }}
+
+                        <button
+                            wire:click="clearSort('{{ $columnSelectName }}')"
+                            type="button"
+                            class="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:outline-none focus:bg-indigo-500 focus:text-white"
+                        >
+                            <span class="sr-only">@lang('Remove sort option')</span>
+                            <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
+                                <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
+                            </svg>
+                        </button>
+                    </span>
+                @endforeach
+
+                <button
+                    wire:click.prevent="clearSorts"
+                    class="focus:outline-none active:outline-none"
+                >
+                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-200 dark:text-gray-900">
+                        @lang('Clear')
+                    </span>
+                </button>
+            </div>
+        @endif
+    </div>
+@elseif ($theme === 'bootstrap-4')
+    <div>
+        @if ($component->sortingPillsAreEnabled() && $component->hasSorts())
+            <div class="mb-3">
+                <small>@lang('Applied Sorting'):</small>
+
+                @foreach($component->getSorts() as $columnSelectName => $direction)
+                    @php
+                        $column = $component->getColumnBySelectName($columnSelectName);
+                    @endphp
+
+                    @continue(is_null($column))
+                    @continue($column->isHidden())
+                    @continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
+
+                    <span
+                        wire:key="sorting-pill-{{ $columnSelectName }}"
+                        class="badge badge-pill badge-info d-inline-flex align-items-center"
+                    >
+                        {{ $column->getSortingPillTitle() }}: {{ $column->getSortingPillDirection($component, $direction) }}
+
+                        <a
+                            href="#"
+                            wire:click="clearSort('{{ $columnSelectName }}')"
+                            class="text-white ml-2"
+                        >
+                            <span class="sr-only">@lang('Remove sort option')</span>
+                            <svg style="width:.5em;height:.5em" stroke="currentColor" fill="none" viewBox="0 0 8 8">
+                                <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
+                            </svg>
+                        </a>
+                    </span>
+                @endforeach
+
+                <a
+                    href="#"
+                    wire:click.prevent="clearSorts"
+                    class="badge badge-pill badge-light"
+                >
+                    @lang('Clear')
+                </a>
+            </div>
+        @endif
+    </div>
+@elseif ($theme === 'bootstrap-5')
+    <div>
+        @if ($component->sortingPillsAreEnabled() && $component->hasSorts())
+            <div class="mb-3">
+                <small>@lang('Applied Sorting'):</small>
+
+                @foreach($component->getSorts() as $columnSelectName => $direction)
+                    @php
+                        $column = $component->getColumnBySelectName($columnSelectName);
+                    @endphp
+
+                    @continue(is_null($column))
+                    @continue($column->isHidden())
+                    @continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
+
+                    <span
+                        wire:key="sorting-pill-{{ $columnSelectName }}"
+                        class="badge rounded-pill bg-info d-inline-flex align-items-center"
+                    >
+                        {{ $column->getSortingPillTitle() }}: {{ $column->getSortingPillDirection($component, $direction) }}
+
+                        <a
+                            href="#"
+                            wire:click="clearSort('{{ $columnSelectName }}')"
+                            class="text-white ms-2"
+                        >
+                            <span class="visually-hidden">@lang('Remove sort option')</span>
+                            <svg style="width:.5em;height:.5em" stroke="currentColor" fill="none" viewBox="0 0 8 8">
+                                <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
+                            </svg>
+                        </a>
+                    </span>
+                @endforeach
+
+                <a
+                    href="#"
+                    wire:click.prevent="clearSorts"
+                    class="badge rounded-pill bg-light text-dark text-decoration-none"
+                >
+                    @lang('Clear')
+                </a>
+            </div>
+        @endif
+    </div>
+@endif
--- a/resources/views/vendor/livewire-tables/components/tools/toolbar.blade.php
+++ b/resources/views/vendor/livewire-tables/components/tools/toolbar.blade.php
@@ -0,0 +1,878 @@
+@aware(['component'])
+
+@php
+    $theme = $component->getTheme();
+@endphp
+
+@if ($component->hasConfigurableAreaFor('before-toolbar'))
+    @include($component->getConfigurableAreaFor('before-toolbar'), $component->getParametersForConfigurableArea('before-toolbar'))
+@endif
+
+@if ($theme === 'tailwind')
+    <div class="md:flex md:justify-between mb-4 px-4 md:p-0">
+        <div class="w-full mb-4 md:mb-0 md:w-2/4 md:flex space-y-4 md:space-y-0 md:space-x-2">
+            @if ($component->hasConfigurableAreaFor('toolbar-left-start'))
+                @include($component->getConfigurableAreaFor('toolbar-left-start'), $component->getParametersForConfigurableArea('toolbar-left-start'))
+            @endif
+
+            @if ($component->reorderIsEnabled())
+                <button
+                    wire:click="{{ $component->currentlyReorderingIsEnabled() ? 'disableReordering' : 'enableReordering' }}"
+                    type="button"
+                    class="inline-flex justify-center items-center w-full md:w-auto px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600"
+                >
+                    @if ($component->currentlyReorderingIsEnabled())
+                        @lang('Done Reordering')
+                    @else
+                        @lang('Reorder')
+                    @endif
+                </button>
+            @endif
+
+            @if ($component->searchIsEnabled() && $component->searchVisibilityIsEnabled())
+                <div class="flex rounded-md shadow-sm">
+                    <input
+                        wire:model{{ $component->getSearchOptions() }}="{{ $component->getTableName() }}.search"
+                        placeholder="{{ __('Search') }}"
+                        type="text"
+                        class="block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 dark:bg-gray-700 dark:text-white dark:border-gray-600 @if ($component->hasSearch()) rounded-none rounded-l-md focus:ring-0 focus:border-gray-300 @else focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md @endif"
+                    />
+
+                    @if ($component->hasSearch())
+                        <span wire:click.prevent="clearSearch" class="inline-flex items-center px-3 text-gray-500 bg-gray-50 rounded-r-md border border-l-0 border-gray-300 cursor-pointer sm:text-sm dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </span>
+                    @endif
+                </div>
+            @endif
+
+            @if ($component->filtersAreEnabled() && $component->filtersVisibilityIsEnabled() && $component->hasVisibleFilters())
+                <div
+                    @if ($component->isFilterLayoutPopover())
+                        x-data="{ open: false }"
+                        x-on:keydown.escape.stop="open = false"
+                        x-on:mousedown.away="open = false"
+                    @endif
+
+                    class="relative block md:inline-block text-left"
+                >
+                    <div>
+                        <button
+                            type="button"
+                            class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600"
+
+                            @if ($component->isFilterLayoutPopover())
+                                x-on:click="open = !open"
+                                aria-haspopup="true"
+                                x-bind:aria-expanded="open"
+                                aria-expanded="true"
+                            @endif
+
+                            @if ($component->isFilterLayoutSlideDown())
+                                x-on:click="filtersOpen = !filtersOpen"
+                            @endif
+                        >
+                            @lang('Filters')
+
+                            @if ($count = $component->getFilterBadgeCount())
+                                <span class="ml-1 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-indigo-100 text-indigo-800 capitalize dark:bg-indigo-200 dark:text-indigo-900">
+                                    {{ $count }}
+                                </span>
+                            @endif
+
+                            <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none"
+                                viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+                            </svg>
+                        </button>
+                    </div>
+
+                    @if ($component->isFilterLayoutPopover())
+                        <div
+                            x-cloak
+                            x-show="open"
+                            x-transition:enter="transition ease-out duration-100"
+                            x-transition:enter-start="transform opacity-0 scale-95"
+                            x-transition:enter-end="transform opacity-100 scale-100"
+                            x-transition:leave="transition ease-in duration-75"
+                            x-transition:leave-start="transform opacity-100 scale-100"
+                            x-transition:leave-end="transform opacity-0 scale-95"
+                            class="origin-top-left absolute left-0 mt-2 w-full md:w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none z-50 dark:bg-gray-700 dark:text-white dark:divide-gray-600"
+                            role="menu"
+                            aria-orientation="vertical"
+                            aria-labelledby="filters-menu"
+                        >
+                            @foreach($component->getFilters() as $filter)
+                                @if($filter->isVisibleInMenus())
+                                    <div class="py-1" role="none">
+                                        <div class="block px-4 py-2 text-sm text-gray-700 space-y-1" role="menuitem">
+                                            <label for="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+                                                class="block text-sm font-medium leading-5 text-gray-700 dark:text-white">
+                                                {{ $filter->getName() }}
+                                            </label>
+
+                                            {{ $filter->render($component) }}
+                                        </div>
+                                    </div>
+                                @endif
+                            @endforeach
+
+                            @if ($component->hasAppliedVisibleFiltersWithValuesThatCanBeCleared())
+                                <div class="block px-4 py-3 text-sm text-gray-700 dark:text-white" role="menuitem">
+                                    <button
+                                        wire:click.prevent="setFilterDefaults"
+                                        x-on:click="open = false"
+                                        type="button"
+                                        class="w-full inline-flex items-center justify-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:hover:border-gray-500"
+                                    >
+                                        @lang('Clear')
+                                    </button>
+                                </div>
+                            @endif
+                        </div>
+                    @endif
+                </div>
+            @endif
+
+            @if ($component->hasConfigurableAreaFor('toolbar-left-end'))
+                @include($component->getConfigurableAreaFor('toolbar-left-end'), $component->getParametersForConfigurableArea('toolbar-left-end'))
+            @endif
+        </div>
+
+        <div class="md:flex md:items-center space-y-4 md:space-y-0 md:space-x-2">
+            @if ($component->hasConfigurableAreaFor('toolbar-right-start'))
+                @include($component->getConfigurableAreaFor('toolbar-right-start'), $component->getParametersForConfigurableArea('toolbar-right-start'))
+            @endif
+
+            @if ($component->showBulkActionsDropdown())
+                <div class="w-full md:w-auto mb-4 md:mb-0">
+                    <div
+                        x-data="{ open: false }"
+                        @keydown.window.escape="open = false"
+                        x-on:click.away="open = false"
+                        class="relative inline-block text-left z-10 w-full md:w-auto"
+                    >
+                        <div>
+                            <span class="rounded-md shadow-sm">
+                                <button
+                                    x-on:click="open = !open"
+                                    type="button"
+                                    class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600"
+                                    aria-haspopup="true"
+                                    x-bind:aria-expanded="open"
+                                    aria-expanded="true"
+                                >
+                                    @lang('Bulk Actions')
+
+                                    <svg class="-mr-1 ml-2 h-5 w-5" x-description="Heroicon name: chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                                    </svg>
+                                </button>
+                            </span>
+                        </div>
+
+                        <div
+                            x-cloak
+                            x-show="open"
+                            x-transition:enter="transition ease-out duration-100"
+                            x-transition:enter-start="transform opacity-0 scale-95"
+                            x-transition:enter-end="transform opacity-100 scale-100"
+                            x-transition:leave="transition ease-in duration-75"
+                            x-transition:leave-start="transform opacity-100 scale-100"
+                            x-transition:leave-end="transform opacity-0 scale-95"
+                            class="origin-top-right absolute right-0 mt-2 w-full md:w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none z-50"
+                        >
+                            <div class="rounded-md bg-white shadow-xs dark:bg-gray-700 dark:text-white">
+                                <div class="py-1" role="menu" aria-orientation="vertical">
+                                    @foreach($component->getBulkActions() as $action => $title)
+                                        <button
+                                            wire:click="{{ $action }}"
+                                            wire:key="bulk-action-{{ $action }}-{{ $component->getTableName() }}"
+                                            type="button"
+                                            class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 flex items-center space-x-2 dark:text-white dark:hover:bg-gray-600"
+                                            role="menuitem"
+                                        >
+                                            <span>{{ $title }}</span>
+                                        </button>
+                                    @endforeach
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            @endif
+
+            @if ($component->columnSelectIsEnabled())
+                <div class="mb-4 w-full md:w-auto md:mb-0 md:ml-2">
+                    <div
+                        x-data="{ open: false }"
+                        @keydown.window.escape="open = false"
+                        x-on:click.away="open = false"
+                        class="inline-block relative w-full text-left md:w-auto"
+                        wire:key="column-select-button-{{ $component->getTableName() }}"
+                    >
+                        <div>
+                            <span class="rounded-md shadow-sm">
+                                <button
+                                    x-on:click="open = !open"
+                                    type="button"
+                                    class="inline-flex justify-center px-4 py-2 w-full text-sm font-medium text-gray-700 bg-white rounded-md border border-gray-300 shadow-sm hover:bg-gray-50 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600"
+                                    aria-haspopup="true"
+                                    x-bind:aria-expanded="open"
+                                    aria-expanded="true"
+                                >
+                                    @lang('Columns')
+
+                                    <svg class="-mr-1 ml-2 w-5 h-5" x-description="Heroicon name: chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                                    </svg>
+                                </button>
+                            </span>
+                        </div>
+
+                        <div
+                            x-cloak
+                            x-show="open"
+                            x-transition:enter="transition ease-out duration-100"
+                            x-transition:enter-start="transform opacity-0 scale-95"
+                            x-transition:enter-end="transform opacity-100 scale-100"
+                            x-transition:leave="transition ease-in duration-75"
+                            x-transition:leave-start="transform opacity-100 scale-100"
+                            x-transition:leave-end="transform opacity-0 scale-95"
+                            class="absolute right-0 z-50 mt-2 w-full bg-white rounded-md divide-y divide-gray-100 ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right md:w-48 focus:outline-none"
+                        >
+                            <div class="bg-white rounded-md shadow-xs dark:bg-gray-700 dark:text-white">
+                                <div class="p-2" role="menu" aria-orientation="vertical" aria-labelledby="column-select-menu">
+                                    <div>
+                                        <label
+                                            wire:loading.attr="disabled"
+                                            class="inline-flex items-center px-2 py-1 disabled:opacity-50 disabled:cursor-wait"
+                                        >
+                                            <input
+                                                class="text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600 disabled:opacity-50 disabled:cursor-wait"
+                                                @if($component->allDefaultVisibleColumnsAreSelected())
+                                                    checked
+                                                    wire:click="deselectAllColumns"
+                                                @else
+                                                    unchecked
+                                                    wire:click="selectAllColumns"
+                                                @endif
+                                                wire:loading.attr="disabled"
+                                                type="checkbox"
+                                            />
+                                            <span class="ml-2">{{ __('All Columns') }}</span>
+                                        </label>
+                                    </div>
+                                    @foreach($component->getColumns() as $column)
+                                        @if ($column->isVisible() && $column->isSelectable())
+                                            <div wire:key="columnSelect-{{ $loop->index }}-{{ $component->getTableName() }}">
+                                                <label
+                                                    wire:loading.attr="disabled"
+                                                    wire:target="selectedColumns"
+                                                    class="inline-flex items-center px-2 py-1 disabled:opacity-50 disabled:cursor-wait"
+                                                >
+                                                    <input
+                                                        class="text-indigo-600 rounded border-gray-300 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600 disabled:opacity-50 disabled:cursor-wait"
+                                                        wire:model="selectedColumns"
+                                                        wire:target="selectedColumns"
+                                                        wire:loading.attr="disabled"
+                                                        type="checkbox"
+                                                        value="{{ $column->getSlug() }}"
+                                                    />
+                                                    <span class="ml-2">{{ $column->getTitle() }}</span>
+                                                </label>
+                                            </div>
+                                        @endif
+                                    @endforeach
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            @endif
+
+            @if ($component->paginationIsEnabled() && $component->perPageVisibilityIsEnabled())
+                <div>
+                    <select
+                        wire:model="perPage"
+                        id="perPage"
+                        class="block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-white dark:border-gray-600"
+                    >
+                        @foreach ($component->getPerPageAccepted() as $item)
+                            <option value="{{ $item }}" wire:key="per-page-{{ $item }}-{{ $component->getTableName() }}">{{ $item === -1 ? __('All') : $item }}</option>
+                        @endforeach
+                    </select>
+                </div>
+            @endif
+
+            @if ($component->hasConfigurableAreaFor('toolbar-right-end'))
+                @include($component->getConfigurableAreaFor('toolbar-right-end'), $component->getParametersForConfigurableArea('toolbar-right-end'))
+            @endif
+        </div>
+    </div>
+
+    @if ($component->filtersAreEnabled() && $component->filtersVisibilityIsEnabled() && $component->hasVisibleFilters() && $component->isFilterLayoutSlideDown())
+        <div
+            x-cloak
+            x-show="filtersOpen"
+            x-transition:enter="transition ease-out duration-100"
+            x-transition:enter-start="transform opacity-0"
+            x-transition:enter-end="transform opacity-100"
+            x-transition:leave="transition ease-in duration-75"
+            x-transition:leave-start="transform opacity-100"
+            x-transition:leave-end="transform opacity-0"
+        >
+            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6 px-4 md:p-0 mb-6">
+                @foreach($component->getFilters() as $filter)
+                    @if($filter->isVisibleInMenus())
+                        <div class="space-y-1">
+                            <label for="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+                                class="block text-sm font-medium leading-5 text-gray-700 dark:text-white">
+                                {{ $filter->getName() }}
+                            </label>
+
+                            {{ $filter->render($component) }}
+                        </div>
+                    @endif
+                @endforeach
+            </div>
+        </div>
+    @endif
+@elseif ($theme === 'bootstrap-4')
+    <div class="d-md-flex justify-content-between mb-3">
+        <div class="d-md-flex">
+            @if ($component->hasConfigurableAreaFor('toolbar-left-start'))
+                @include($component->getConfigurableAreaFor('toolbar-left-start'), $component->getParametersForConfigurableArea('toolbar-left-start'))
+            @endif
+
+            @if ($component->reorderIsEnabled())
+                <div class="mr-0 mr-md-2 mb-3 mb-md-0">
+                    <button
+                        wire:click="{{ $component->currentlyReorderingIsEnabled() ? 'disableReordering' : 'enableReordering' }}"
+                        type="button"
+                        class="btn btn-default d-block w-100 d-md-inline"
+                    >
+                        @if ($component->currentlyReorderingIsEnabled())
+                            @lang('Done Reordering')
+                        @else
+                            @lang('Reorder')
+                        @endif
+                    </button>
+                </div>
+            @endif
+
+            @if ($component->searchIsEnabled() && $component->searchVisibilityIsEnabled())
+                <div class="mb-3 mb-md-0 input-group">
+                    <input
+                        wire:model{{ $component->getSearchOptions() }}="{{ $component->getTableName() }}.search"
+                        placeholder="{{ __('Search') }}"
+                        type="text"
+                        class="form-control"
+                    >
+
+                    @if ($component->hasSearch())
+                        <div class="input-group-append">
+                            <button wire:click.prevent="clearSearch" class="btn btn-outline-secondary" type="button">
+                                <svg style="width:.75em;height:.75em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                                </svg>
+                            </button>
+                        </div>
+                    @endif
+                </div>
+            @endif
+
+            @if ($component->filtersAreEnabled() && $component->filtersVisibilityIsEnabled() && $component->hasVisibleFilters())
+                <div class="ml-0 ml-md-2 mb-3 mb-md-0">
+                    <div
+                        @if ($component->isFilterLayoutPopover())
+                            x-data="{ open: false }"
+                            x-on:keydown.escape.stop="open = false"
+                            x-on:mousedown.away="open = false"
+                        @endif
+
+                        class="btn-group d-block d-md-inline"
+                    >
+                        <div>
+                            <button
+                                type="button"
+                                class="btn dropdown-toggle d-block w-100 d-md-inline"
+
+                                @if ($component->isFilterLayoutPopover())
+                                    x-on:click="open = !open"
+                                    aria-haspopup="true"
+                                    x-bind:aria-expanded="open"
+                                    aria-expanded="true"
+                                @endif
+
+                                @if ($component->isFilterLayoutSlideDown())
+                                    x-on:click="filtersOpen = !filtersOpen"
+                                @endif
+                            >
+                                @lang('Filters')
+
+                                @if ($count = $component->getFilterBadgeCount())
+                                    <span class="badge badge-info">
+                                        {{ $count }}
+                                    </span>
+                                @endif
+
+                                <span class="caret"></span>
+                            </button>
+                        </div>
+
+                        @if ($component->isFilterLayoutPopover())
+                            <ul
+                                x-cloak
+                                class="dropdown-menu w-100 mt-md-5"
+                                x-bind:class="{'show' : open}"
+                                role="menu"
+                            >
+                                @foreach($component->getFilters() as $filter)
+                                    @if($filter->isVisibleInMenus())
+                                        <div wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}" class="p-2">
+                                            <label for="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}" class="mb-2">
+                                                {{ $filter->getName() }}
+                                            </label>
+
+                                            {{ $filter->render($component) }}
+                                        </div>
+                                    @endif
+                                @endforeach
+
+                                @if ($component->hasAppliedVisibleFiltersWithValuesThatCanBeCleared())
+                                    <div class="dropdown-divider"></div>
+
+                                    <button
+                                        wire:click.prevent="setFilterDefaults"
+                                        x-on:click="open = false"
+                                        class="dropdown-item btn text-center"
+                                    >
+                                        @lang('Clear')
+                                    </button>
+                                @endif
+                            </ul>
+                        @endif
+                    </div>
+                </div>
+            @endif
+
+            @if ($component->hasConfigurableAreaFor('toolbar-left-end'))
+                @include($component->getConfigurableAreaFor('toolbar-left-end'), $component->getParametersForConfigurableArea('toolbar-left-end'))
+            @endif
+        </div>
+
+        <div class="d-md-flex">
+            @if ($component->hasConfigurableAreaFor('toolbar-right-start'))
+                @include($component->getConfigurableAreaFor('toolbar-right-start'), $component->getParametersForConfigurableArea('toolbar-right-start'))
+            @endif
+
+            @if ($component->showBulkActionsDropdown())
+                <div class="mb-3 mb-md-0">
+                    <div class="dropdown d-block d-md-inline">
+                        <button class="btn dropdown-toggle d-block w-100 d-md-inline" type="button" id="{{ $component->getTableName() }}-bulkActionsDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            @lang('Bulk Actions')
+                        </button>
+
+                        <div class="dropdown-menu dropdown-menu-right w-100" aria-labelledby="{{ $component->getTableName() }}-bulkActionsDropdown">
+                            @foreach($component->getBulkActions() as $action => $title)
+                                <a
+                                    href="#"
+                                    wire:click="{{ $action }}"
+                                    wire:key="bulk-action-{{ $action }}-{{ $component->getTableName() }}"
+                                    class="dropdown-item"
+                                >
+                                    {{ $title }}
+                                </a>
+                            @endforeach
+                        </div>
+                    </div>
+                </div>
+            @endif
+
+            @if ($component->columnSelectIsEnabled())
+                <div class="mb-3 mb-md-0 pl-0 pl-md-2">
+                    <div
+                        x-data="{ open: false }"
+                        x-on:keydown.escape.stop="open = false"
+                        x-on:mousedown.away="open = false"
+                        class="dropdown d-block d-md-inline"
+                        wire:key="column-select-button-{{ $component->getTableName() }}"
+                    >
+                        <button
+                            x-on:click="open = !open"
+                            class="btn dropdown-toggle d-block w-100 d-md-inline"
+                            type="button"
+                            id="columnSelect-{{ $component->getTableName() }}"
+                            aria-haspopup="true"
+                            x-bind:aria-expanded="open"
+                        >
+                            @lang('Columns')
+                        </button>
+
+                        <div
+                            class="dropdown-menu dropdown-menu-right w-100 mt-0 mt-md-3"
+                            x-bind:class="{'show' : open}"
+                            aria-labelledby="columnSelect-{{ $component->getTableName() }}"
+                        >
+                            <div>
+                                <label
+                                    wire:loading.attr="disabled"
+                                    class="px-2 mb-1"
+                                >
+                                    <input
+                                        @if($component->allDefaultVisibleColumnsAreSelected())
+                                            checked
+                                            wire:click="deselectAllColumns"
+                                        @else
+                                            unchecked
+                                            wire:click="selectAllColumns"
+                                        @endif
+                                        wire:loading.attr="disabled"
+                                        type="checkbox"
+                                    />
+                                    <span class="ml-2">{{ __('All Columns') }}</span>
+                                </label>
+                            </div>
+                            @foreach($component->getColumns() as $column)
+                                @if ($column->isVisible() && $column->isSelectable())
+                                    <div wire:key="columnSelect-{{ $loop->index }}-{{ $component->getTableName() }}">
+                                        <label
+                                            wire:loading.attr="disabled"
+                                            wire:target="selectedColumns"
+                                            class="px-2 {{ $loop->last ? 'mb-0' : 'mb-1' }}"
+                                        >
+                                            <input
+                                                wire:model="selectedColumns"
+                                                wire:target="selectedColumns"
+                                                wire:loading.attr="disabled"
+                                                type="checkbox"
+                                                value="{{ $column->getSlug() }}"
+                                            />
+                                            <span class="ml-2">{{ $column->getTitle() }}</span>
+                                        </label>
+                                    </div>
+                                @endif
+                            @endforeach
+                        </div>
+                    </div>
+                </div>
+            @endif
+
+            @if ($component->paginationIsEnabled() && $component->perPageVisibilityIsEnabled())
+                <div class="ml-0 ml-md-2">
+                    <select
+                        wire:model="perPage"
+                        id="perPage"
+                        class="form-control"
+                    >
+                        @foreach ($component->getPerPageAccepted() as $item)
+                            <option value="{{ $item }}" wire:key="per-page-{{ $item }}-{{ $component->getTableName() }}">{{ $item === -1 ? __('All') : $item }}</option>
+                        @endforeach
+                    </select>
+                </div>
+            @endif
+
+            @if ($component->hasConfigurableAreaFor('toolbar-right-end'))
+                @include($component->getConfigurableAreaFor('toolbar-right-end'), $component->getParametersForConfigurableArea('toolbar-right-end'))
+            @endif
+        </div>
+    </div>
+
+    @if ($component->filtersAreEnabled() && $component->filtersVisibilityIsEnabled() && $component->hasVisibleFilters() && $component->isFilterLayoutSlideDown())
+        <div
+            x-cloak
+            x-show="filtersOpen"
+        >
+            <div class="container">
+                <div class="row">
+                    @foreach($component->getFilters() as $filter)
+                        @if($filter->isVisibleInMenus())
+                            <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-4">
+                                <label for="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+                                    class="d-block">
+                                    {{ $filter->getName() }}
+                                </label>
+
+                                {{ $filter->render($component) }}
+                            </div>
+                        @endif
+                    @endforeach
+                </div>
+            </div>
+        </div>
+    @endif
+@elseif ($theme === 'bootstrap-5')
+    <div class="d-md-flex justify-content-between mb-3">
+        <div class="d-md-flex">
+            @if ($component->hasConfigurableAreaFor('toolbar-left-start'))
+                @include($component->getConfigurableAreaFor('toolbar-left-start'), $component->getParametersForConfigurableArea('toolbar-left-start'))
+            @endif
+
+            @if ($component->reorderIsEnabled())
+                <div class="me-0 me-md-2 mb-3 mb-md-0">
+                    <button
+                        wire:click="{{ $component->currentlyReorderingIsEnabled() ? 'disableReordering' : 'enableReordering' }}"
+                        type="button"
+                        class="btn btn-default d-block w-100 d-md-inline"
+                    >
+                        @if ($component->currentlyReorderingIsEnabled())
+                            @lang('Done Reordering')
+                        @else
+                            @lang('Reorder')
+                        @endif
+                    </button>
+                </div>
+            @endif
+
+            @if ($component->searchIsEnabled() && $component->searchVisibilityIsEnabled())
+                <div class="mb-3 mb-md-0 input-group">
+                    <input
+                        wire:model{{ $component->getSearchOptions() }}="{{ $component->getTableName() }}.search"
+                        placeholder="{{ __('Search') }}"
+                        type="text"
+                        class="form-control"
+                    >
+
+                    @if ($component->hasSearch())
+                        <button wire:click.prevent="clearSearch"  class="btn btn-outline-secondary" type="button">
+                            <svg style="width:.75em;height:.75em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    @endif
+                </div>
+            @endif
+
+            @if ($component->filtersAreEnabled() && $component->filtersVisibilityIsEnabled() && $component->hasVisibleFilters())
+                <div class="{{ $component->searchIsEnabled() ? 'ms-0 ms-md-2' : '' }} mb-3 mb-md-0">
+                    <div
+                        @if ($component->isFilterLayoutPopover())
+                            x-data="{ open: false }"
+                            x-on:keydown.escape.stop="open = false"
+                            x-on:mousedown.away="open = false"
+                        @endif
+
+                        class="btn-group d-block d-md-inline"
+                    >
+                        <div>
+                            <button
+                                type="button"
+                                class="btn dropdown-toggle d-block w-100 d-md-inline"
+
+                                @if ($component->isFilterLayoutPopover())
+                                    x-on:click="open = !open"
+                                    aria-haspopup="true"
+                                    x-bind:aria-expanded="open"
+                                    aria-expanded="true"
+                                @endif
+
+                                @if ($component->isFilterLayoutSlideDown())
+                                    x-on:click="filtersOpen = !filtersOpen"
+                                @endif
+                            >
+                                @lang('Filters')
+
+                                @if ($count = $component->getFilterBadgeCount())
+                                    <span class="badge bg-info">
+                                        {{ $count }}
+                                    </span>
+                                @endif
+
+                                <span class="caret"></span>
+                            </button>
+                        </div>
+
+                        @if ($component->isFilterLayoutPopover())
+                            <ul
+                                x-cloak
+                                class="dropdown-menu w-100"
+                                x-bind:class="{'show' : open}"
+                                role="menu"
+                            >
+                                @foreach($component->getFilters() as $filter)
+                                    @if($filter->isVisibleInMenus())
+                                        <div wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}" class="p-2">
+                                            <label for="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}" class="mb-2">
+                                                {{ $filter->getName() }}
+                                            </label>
+
+                                            {{ $filter->render($component) }}
+                                        </div>
+                                    @endif
+                                @endforeach
+
+                                @if ($component->hasAppliedVisibleFiltersWithValuesThatCanBeCleared())
+                                    <div class="dropdown-divider"></div>
+
+                                    <button
+                                        wire:click.prevent="setFilterDefaults"
+                                        x-on:click="open = false"
+                                        class="dropdown-item text-center"
+                                    >
+                                        @lang('Clear')
+                                    </button>
+                                @endif
+                            </ul>
+                        @endif
+                    </div>
+                </div>
+            @endif
+
+            @if ($component->hasConfigurableAreaFor('toolbar-left-end'))
+                @include($component->getConfigurableAreaFor('toolbar-left-end'), $component->getParametersForConfigurableArea('toolbar-left-end'))
+            @endif
+        </div>
+
+        <div class="d-md-flex">
+            @if ($component->hasConfigurableAreaFor('toolbar-right-start'))
+                @include($component->getConfigurableAreaFor('toolbar-right-start'), $component->getParametersForConfigurableArea('toolbar-right-start'))
+            @endif
+
+            @if ($component->showBulkActionsDropdown())
+                <div class="mb-3 mb-md-0">
+                    <div class="dropdown d-block d-md-inline">
+                        <button class="btn dropdown-toggle d-block w-100 d-md-inline" type="button" id="{{ $component->getTableName() }}-bulkActionsDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            @lang('Bulk Actions')
+                        </button>
+
+                        <div class="dropdown-menu dropdown-menu-end w-100" aria-labelledby="{{ $component->getTableName() }}-bulkActionsDropdown">
+                            @foreach($component->getBulkActions() as $action => $title)
+                                <a
+                                    href="#"
+                                    wire:click.prevent="{{ $action }}"
+                                    wire:key="bulk-action-{{ $action }}-{{ $component->getTableName() }}"
+                                    class="dropdown-item"
+                                >
+                                    {{ $title }}
+                                </a>
+                            @endforeach
+                        </div>
+                    </div>
+                </div>
+            @endif
+
+            @if ($component->columnSelectIsEnabled())
+                <div class="mb-3 mb-md-0 md-0 ms-md-2">
+                    <div
+                        x-data="{ open: false }"
+                        x-on:keydown.escape.stop="open = false"
+                        x-on:mousedown.away="open = false"
+                        class="dropdown d-block d-md-inline"
+                        wire:key="column-select-button-{{ $component->getTableName() }}"
+                    >
+                        <button
+                            x-on:click="open = !open"
+                            class="btn dropdown-toggle d-block w-100 d-md-inline"
+                            type="button"
+                            id="columnSelect-{{ $component->getTableName() }}"
+                            aria-haspopup="true"
+                            x-bind:aria-expanded="open"
+                        >
+                            @lang('Columns')
+                        </button>
+
+                        <div
+                            class="dropdown-menu dropdown-menu-end w-100"
+                            x-bind:class="{'show' : open}"
+                            aria-labelledby="columnSelect-{{ $component->getTableName() }}"
+                        >
+                            <div class="form-check ms-2">
+                                <input
+                                    @if($component->allDefaultVisibleColumnsAreSelected())
+                                        checked
+                                    wire:click="deselectAllColumns"
+                                    @else
+                                        unchecked
+                                    wire:click="selectAllColumns"
+                                    @endif
+                                    wire:loading.attr="disabled"
+                                    type="checkbox"
+                                    class="form-check-input"
+                                />
+                                <label
+                                    wire:loading.attr="disabled"
+                                    class="form-check-label"
+                                >
+                                    {{ __('All Columns') }}
+                                </label>
+                            </div>
+                            @foreach($component->getColumns() as $column)
+                                @if ($column->isVisible() && $column->isSelectable())
+                                    <div wire:key="columnSelect-{{ $loop->index }}-{{ $component->getTableName() }}"
+                                         class="form-check ms-2"
+                                    >
+                                        <input
+                                            wire:model="selectedColumns"
+                                            wire:target="selectedColumns"
+                                            wire:loading.attr="disabled"
+                                            type="checkbox"
+                                            class="form-check-input"
+                                            value="{{ $column->getSlug() }}"
+                                        />
+                                        <label
+                                            wire:loading.attr="disabled"
+                                            wire:target="selectedColumns"
+                                            class="{{ $loop->last ? 'mb-0' : 'mb-1' }} form-check-label"
+                                        >{{ $column->getTitle() }}</label>
+
+                                        </label>
+                                    </div>
+                                @endif
+                            @endforeach
+                        </div>
+                    </div>
+                </div>
+            @endif
+
+            @if ($component->paginationIsEnabled() && $component->perPageVisibilityIsEnabled())
+                <div class="ms-0 ms-md-2">
+                    <select
+                        wire:model="perPage"
+                        id="perPage"
+                        class="form-select"
+                    >
+                        @foreach ($component->getPerPageAccepted() as $item)
+                            <option value="{{ $item }}" wire:key="per-page-{{ $item }}-{{ $component->getTableName() }}">{{ $item === -1 ? __('All') : $item }}</option>
+                        @endforeach
+                    </select>
+                </div>
+            @endif
+
+            @if ($component->hasConfigurableAreaFor('toolbar-right-end'))
+                @include($component->getConfigurableAreaFor('toolbar-right-end'), $component->getParametersForConfigurableArea('toolbar-righ-end'))
+            @endif
+        </div>
+    </div>
+
+    @if ($component->filtersAreEnabled() && $component->filtersVisibilityIsEnabled() && $component->hasVisibleFilters() && $component->isFilterLayoutSlideDown())
+        <div
+            x-cloak
+            x-show="filtersOpen"
+        >
+            <div class="container">
+                <div class="row">
+                    @foreach($component->getFilters() as $filter)
+                        @if($filter->isVisibleInMenus())
+                            <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-4">
+                                <label for="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+                                    class="d-block">
+                                    {{ $filter->getName() }}
+                                </label>
+
+                                {{ $filter->render($component) }}
+                            </div>
+                        @endif
+                    @endforeach
+                </div>
+            </div>
+        </div>
+    @endif
+@endif
+
+@if ($component->hasConfigurableAreaFor('after-toolbar'))
+    @include($component->getConfigurableAreaFor('after-toolbar'), $component->getParametersForConfigurableArea('after-toolbar'))
+@endif
--- a/resources/views/vendor/livewire-tables/components/wrapper.blade.php
+++ b/resources/views/vendor/livewire-tables/components/wrapper.blade.php
@@ -0,0 +1,23 @@
+@props(['component'])
+
+@php
+    $refresh = $this->getRefreshStatus();
+    $theme = $component->getTheme();
+@endphp
+
+ <div
+    {{ $attributes->merge($this->getComponentWrapperAttributes()) }}
+
+    @if ($component->hasRefresh())
+        wire:poll{{ $component->getRefreshOptions() }}
+    @endif
+
+    @if ($component->isFilterLayoutSlideDown())
+        x-data="{ filtersOpen: false }"
+    @endif
+>
+     @include('livewire-tables::includes.debug')
+     @include('livewire-tables::includes.offline')
+
+     {{ $slot }}
+</div>
--- a/resources/views/vendor/livewire-tables/datatable.blade.php
+++ b/resources/views/vendor/livewire-tables/datatable.blade.php
@@ -0,0 +1,67 @@
+<x-livewire-tables::wrapper :component="$this">
+    <x-livewire-tables::tools>
+        <x-livewire-tables::tools.sorting-pills />
+        <x-livewire-tables::tools.filter-pills />
+        <x-livewire-tables::tools.toolbar />
+    </x-livewire-tables::tools>
+
+    <x-livewire-tables::table>
+        <x-slot name="thead">
+            <x-livewire-tables::table.th.reorder />
+            <x-livewire-tables::table.th.bulk-actions />
+            <x-livewire-tables::table.th.row-contents />
+
+            @foreach($columns as $index => $column)
+                @continue($column->isHidden())
+                @continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
+                @continue($this->currentlyReorderingIsDisabled() && $column->isReorderColumn() && $this->hideReorderColumnUnlessReorderingIsEnabled())
+
+                <x-livewire-tables::table.th :column="$column" :index="$index" />
+            @endforeach
+        </x-slot>
+
+        @if($this->secondaryHeaderIsEnabled() && $this->hasColumnsWithSecondaryHeader())
+            <x-livewire-tables::table.tr.secondary-header :rows="$rows" />
+        @endif
+
+        <x-livewire-tables::table.tr.bulk-actions :rows="$rows" />
+
+        @forelse ($rows as $rowIndex => $row)
+            <x-livewire-tables::table.tr :row="$row" :rowIndex="$rowIndex">
+                <x-livewire-tables::table.td.reorder />
+                <x-livewire-tables::table.td.bulk-actions :row="$row" />
+                <x-livewire-tables::table.td.row-contents :rowIndex="$rowIndex" />
+
+                @foreach($columns as $colIndex => $column)
+                    @continue($column->isHidden())
+                    @continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
+                    @continue($this->currentlyReorderingIsDisabled() && $column->isReorderColumn() && $this->hideReorderColumnUnlessReorderingIsEnabled())
+
+                    <x-livewire-tables::table.td :column="$column" :colIndex="$colIndex">
+                        {{ $column->renderContents($row) }}
+                    </x-livewire-tables::table.td>
+                @endforeach
+            </x-livewire-tables::table.tr>
+
+            <x-livewire-tables::table.row-contents :row="$row" :rowIndex="$rowIndex" />
+        @empty
+            <x-livewire-tables::table.empty />
+        @endforelse
+
+        @if ($this->footerIsEnabled() && $this->hasColumnsWithFooter())
+            <x-slot name="tfoot">
+                @if ($this->useHeaderAsFooterIsEnabled())
+                    <x-livewire-tables::table.tr.secondary-header :rows="$rows" />
+                @else
+                    <x-livewire-tables::table.tr.footer :rows="$rows" />
+                @endif
+            </x-slot>
+        @endif
+    </x-livewire-tables::table>
+
+    <x-livewire-tables::pagination :rows="$rows" />
+
+    @isset($customView)
+        @include($customView)
+    @endisset
+</x-livewire-tables::wrapper>
--- a/resources/views/vendor/livewire-tables/includes/columns/boolean.blade.php
+++ b/resources/views/vendor/livewire-tables/includes/columns/boolean.blade.php
@@ -0,0 +1,57 @@
+@php
+    $theme = $component->getTheme();
+@endphp
+
+@if ($theme === 'tailwind')
+    @if ($status)
+        @if ($type === 'icons')
+            <svg xmlns="http://www.w3.org/2000/svg" class="inline-block h-5 w-5 @if ($successValue === true) text-green-500 @else text-red-500 @endif" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+        @elseif ($type === 'yes-no')
+            @if ($successValue === true)
+                <span>Yes</span>
+            @else
+                <span>No</span>
+            @endif
+        @endif
+    @else
+        @if ($type === 'icons')
+            <svg xmlns="http://www.w3.org/2000/svg" class="inline-block h-5 w-5 @if ($successValue === false) text-green-500 @else text-red-500 @endif" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+        @elseif ($type === 'yes-no')
+            @if ($successValue === false)
+                <span>Yes</span>
+            @else
+                <span>No</span>
+            @endif
+        @endif
+    @endif
+@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+    @if ($status)
+        @if ($type === 'icons')
+            <svg xmlns="http://www.w3.org/2000/svg" style="width:1.2em;height:1.2em;" class="d-inline-block @if ($successValue === true) text-success @else text-danger @endif" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+        @elseif ($type === 'yes-no')
+            @if ($successValue === true)
+                <span>Yes</span>
+            @else
+                <span>No</span>
+            @endif
+        @endif
+    @else
+        @if ($type === 'icons')
+            <svg xmlns="http://www.w3.org/2000/svg" style="width:1.2em;height:1.2em;" class="d-inline-block @if ($successValue === false) text-success @else text-danger @endif" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+        @elseif ($type === 'yes-no')
+            @if ($successValue === false)
+                <span>Yes</span>
+            @else
+                <span>No</span>
+            @endif
+        @endif
+    @endif
+@endif
--- a/resources/views/vendor/livewire-tables/includes/columns/button-group.blade.php
+++ b/resources/views/vendor/livewire-tables/includes/columns/button-group.blade.php
@@ -0,0 +1,5 @@
+<div {!! count($attributes) ? $column->arrayToAttributes($attributes) : '' !!}>
+    @foreach($buttons as $button)
+        {!! $button->getContents($row) !!}
+    @endforeach
+</div>
--- a/resources/views/vendor/livewire-tables/includes/columns/image.blade.php
+++ b/resources/views/vendor/livewire-tables/includes/columns/image.blade.php
@@ -0,0 +1 @@
+<img src="{{ $path }}" {!! count($attributes) ? $column->arrayToAttributes($attributes) : '' !!} />
--- a/resources/views/vendor/livewire-tables/includes/columns/link.blade.php
+++ b/resources/views/vendor/livewire-tables/includes/columns/link.blade.php
@@ -0,0 +1 @@
+<a href="{{ $path }}" {!! count($attributes) ? $column->arrayToAttributes($attributes) : '' !!}>{{ $title }}</a>
--- a/resources/views/vendor/livewire-tables/includes/debug.blade.php
+++ b/resources/views/vendor/livewire-tables/includes/debug.blade.php
@@ -0,0 +1,20 @@
+<div>
+    @if ($component->debugIsEnabled())
+        @php
+            $debuggable = [
+                'query' => $component->getQuerySql(),
+                'filters' => $component->getAppliedFilters(),
+                'sorts' => $component->getSorts(),
+                'search' => $component->getSearch(),
+                'select-all' => $component->getSelectAllStatus(),
+                'selected' => $component->getSelected(),
+            ];
+        @endphp
+
+        <p><strong>@lang('Debugging Values'):</strong></p>
+
+        @if (! app()->runningInConsole())
+            <div class="mb-4">@dump($debuggable)</div>
+        @endif
+    @endif
+</div>
--- a/resources/views/vendor/livewire-tables/includes/offline.blade.php
+++ b/resources/views/vendor/livewire-tables/includes/offline.blade.php
@@ -0,0 +1,30 @@
+@if ($component->offlineIndicatorIsEnabled())
+    @if ($theme === 'tailwind')
+        <div wire:offline.class.remove="hidden" class="hidden">
+            <div class="rounded-md bg-red-100 p-4 mb-4 dark:border-red-800 dark:bg-red-500">
+                <div class="flex">
+                    <div class="flex-shrink-0">
+                        <svg class="h-5 w-5 text-red-400 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+                        </svg>
+                    </div>
+                    <div class="ml-3">
+                        <h3 class="text-sm font-medium text-red-800 dark:text-white">
+                            @lang('You are not connected to the internet.')
+                        </h3>
+                    </div>
+                </div>
+            </div>
+        </div>
+    @elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+        <div wire:offline.class.remove="d-none" class="d-none">
+            <div class="alert alert-danger d-flex align-items-center">
+                <svg xmlns="http://www.w3.org/2000/svg" style="width:1.3em;height:1.3em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+
+                <span class="d-inline-block ml-2">@lang('You are not connected to the internet.')</span>
+            </div>
+        </div>
+    @endif
+@endif
--- a/resources/views/vendor/livewire-tables/specific/bootstrap-4/pagination.blade.php
+++ b/resources/views/vendor/livewire-tables/specific/bootstrap-4/pagination.blade.php
@@ -0,0 +1,52 @@
+<div>
+    @if ($paginator->hasPages())
+        @php(isset($this->numberOfPaginatorsRendered[$paginator->getPageName()]) ? $this->numberOfPaginatorsRendered[$paginator->getPageName()]++ : $this->numberOfPaginatorsRendered[$paginator->getPageName()] = 1)
+
+        <nav>
+            <ul class="pagination">
+                {{-- Previous Page Link --}}
+                @if ($paginator->onFirstPage())
+                    <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
+                        <span class="page-link" aria-hidden="true">&lsaquo;</span>
+                    </li>
+                @else
+                    <li class="page-item">
+                        <button type="button" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}" class="page-link" wire:click="previousPage('{{ $paginator->getPageName() }}')" wire:loading.attr="disabled" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</button>
+                    </li>
+                @endif
+
+                {{-- Pagination Elements --}}
+                @if ($elements ?? null)
+                    @foreach ($elements as $element)
+                        {{-- "Three Dots" Separator --}}
+                        @if (is_string($element))
+                            <li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
+                        @endif
+
+                        {{-- Array Of Links --}}
+                        @if (is_array($element))
+                            @foreach ($element as $page => $url)
+                                @if ($page == $paginator->currentPage())
+                                    <li class="page-item active" wire:key="paginator-{{ $paginator->getPageName() }}-{{ $this->numberOfPaginatorsRendered[$paginator->getPageName()] }}-page-{{ $page }}" aria-current="page"><span class="page-link">{{ $page }}</span></li>
+                                @else
+                                    <li class="page-item" wire:key="paginator-{{ $paginator->getPageName() }}-{{ $this->numberOfPaginatorsRendered[$paginator->getPageName()] }}-page-{{ $page }}"><button type="button" class="page-link" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')">{{ $page }}</button></li>
+                                @endif
+                            @endforeach
+                        @endif
+                    @endforeach
+                @endif
+
+                {{-- Next Page Link --}}
+                @if ($paginator->hasMorePages())
+                    <li class="page-item">
+                        <button type="button" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}" class="page-link" wire:click="nextPage('{{ $paginator->getPageName() }}')" wire:loading.attr="disabled" rel="next" aria-label="@lang('pagination.next')">&rsaquo;</button>
+                    </li>
+                @else
+                    <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
+                        <span class="page-link" aria-hidden="true">&rsaquo;</span>
+                    </li>
+                @endif
+            </ul>
+        </nav>
+    @endif
+</div>
--- a/resources/views/vendor/livewire-tables/specific/tailwind/pagination.blade.php
+++ b/resources/views/vendor/livewire-tables/specific/tailwind/pagination.blade.php
@@ -0,0 +1,106 @@
+<div>
+    @if ($paginator->hasPages())
+        @php(isset($this->numberOfPaginatorsRendered[$paginator->getPageName()]) ? $this->numberOfPaginatorsRendered[$paginator->getPageName()]++ : $this->numberOfPaginatorsRendered[$paginator->getPageName()] = 1)
+
+        <nav role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">
+            <div class="flex justify-between flex-1 md:hidden">
+                <span>
+                    @if ($paginator->onFirstPage())
+                        <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md dark:bg-gray-700 dark:text-white dark:border-gray-600">
+                            {!! __('pagination.previous') !!}
+                        </span>
+                    @else
+                        <button wire:click="previousPage('{{ $paginator->getPageName() }}')" wire:loading.attr="disabled" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-700 dark:text-white dark:ring-gray-600 dark:border-gray-600 dark:hover:bg-gray-600">
+                            {!! __('pagination.previous') !!}
+                        </button>
+                    @endif
+                </span>
+
+                <span>
+                    @if ($paginator->hasMorePages())
+                        <button wire:click="nextPage('{{ $paginator->getPageName() }}')" wire:loading.attr="disabled" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-700 dark:text-white dark:ring-gray-600 dark:border-gray-600 dark:hover:bg-gray-600">
+                            {!! __('pagination.next') !!}
+                        </button>
+                    @else
+                        <span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md dark:bg-gray-700 dark:text-white dark:border-gray-600">
+                            {!! __('pagination.next') !!}
+                        </span>
+                    @endif
+                </span>
+            </div>
+
+            <div class="hidden md:flex-1 md:flex md:items-center md:justify-between">
+                <div>
+                    <span class="relative z-0 inline-flex rounded-md shadow-sm">
+                        <span>
+                            {{-- Previous Page Link --}}
+                            @if ($paginator->onFirstPage())
+                                <span aria-disabled="true" aria-label="{{ __('pagination.previous') }}">
+                                    <span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5 dark:bg-gray-700 dark:text-white dark:border-gray-600" aria-hidden="true">
+                                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+                                        </svg>
+                                    </span>
+                                </span>
+                            @else
+                                <button wire:click="previousPage('{{ $paginator->getPageName() }}')" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" rel="prev" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150 dark:bg-gray-700 dark:text-white dark:ring-gray-600 dark:border-gray-600 dark:hover:bg-gray-600" aria-label="{{ __('pagination.previous') }}">
+                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                        <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+                                    </svg>
+                                </button>
+                            @endif
+                        </span>
+
+                        {{-- Pagination Elements --}}
+                        @if ($elements ?? null)
+                            @foreach ($elements as $element)
+                                {{-- "Three Dots" Separator --}}
+                                @if (is_string($element))
+                                    <span aria-disabled="true">
+                                        <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5 dark:bg-gray-700 dark:text-white dark:border-gray-600">{{ $element }}</span>
+                                    </span>
+                                @endif
+
+                                {{-- Array Of Links --}}
+                                @if (is_array($element))
+                                    @foreach ($element as $page => $url)
+                                        <span wire:key="paginator-{{ $paginator->getPageName() }}-{{ $this->numberOfPaginatorsRendered[$paginator->getPageName()] }}-page{{ $page }}">
+                                            @if ($page == $paginator->currentPage())
+                                                <span aria-current="page">
+                                                    <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 dark:bg-gray-500 dark:text-white dark:border-gray-500">{{ $page }}</span>
+                                                </span>
+                                            @else
+                                                <button wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-700 dark:text-white dark:ring-gray-600 dark:border-gray-600 dark:hover:bg-gray-600" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
+                                                    {{ $page }}
+                                                </button>
+                                            @endif
+                                        </span>
+                                    @endforeach
+                                @endif
+                            @endforeach
+                        @endif
+
+                        <span>
+                            {{-- Next Page Link --}}
+                            @if ($paginator->hasMorePages())
+                                <button wire:click="nextPage('{{ $paginator->getPageName() }}')" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" rel="next" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150 dark:bg-gray-700 dark:text-white dark:ring-gray-600 dark:border-gray-600 dark:hover:bg-gray-600" aria-label="{{ __('pagination.next') }}">
+                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                                    </svg>
+                                </button>
+                            @else
+                                <span aria-disabled="true" aria-label="{{ __('pagination.next') }}">
+                                    <span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5 dark:bg-gray-700 dark:text-white dark:border-gray-600" aria-hidden="true">
+                                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                                        </svg>
+                                    </span>
+                                </span>
+                            @endif
+                        </span>
+                    </span>
+                </div>
+            </div>
+        </nav>
+    @endif
+</div>
--- a/resources/views/vendor/livewire-tables/stubs/custom.blade.php
+++ b/resources/views/vendor/livewire-tables/stubs/custom.blade.php
--- a/routes/web.php
+++ b/routes/web.php
@@ -92,6 +92,8 @@ Route::middleware([])
              ->name('table.meetup');
         Route::get('/meetup-events', \App\Http\Livewire\Meetup\MeetupEventTable::class)
              ->name('table.meetupEvent');
+         Route::get('/{meetup:slug}', \App\Http\Livewire\Meetup\LandingPage::class)
+              ->name('landing');
     });

 /*
				`@@ -0,0 +1 @@`
				`<img src="{{ $path }}" {!! count($attributes) ? $column->arrayToAttributes($attributes) : '' !!} />`
				`@@ -0,0 +1 @@`
				`<a href="{{ $path }}" {!! count($attributes) ? $column->arrayToAttributes($attributes) : '' !!}>{{ $title }}</a>`