diff --git a/app/Http/Livewire/Admin/Menu/Level.php b/app/Http/Livewire/Admin/Menu/Level.php
index c0a429b..a05e799 100644
--- a/app/Http/Livewire/Admin/Menu/Level.php
+++ b/app/Http/Livewire/Admin/Menu/Level.php
@@ -3,18 +3,30 @@
 namespace App\Http\Livewire\Admin\Menu;
 
 use App\Models\MenuLevel;
+use App\Traits\General;
+use Illuminate\Database\Eloquent\Model;
 use Livewire\Component;
 
 class Level extends Component
 {
-    public string $pageHeader='Menu Level';
+    use General;
+
+    public string $pageHeader = 'Menu Level';
     public array $menuLevel;
 
-    public function mount(){
+    public $editMenuRecord = null;
+
+    protected $listeners = ['editMenuLevel'];
+
+    public function mount()
+    {
+        $this->formInfo('create', 'Create', 'Create', 'Create Menu Levels');
+        $this->formType = "create";
         $this->resetInput();
     }
 
-    public function resetForm(){
+    public function resetForm()
+    {
         $this->resetErrorBag();
     }
 
@@ -38,21 +50,52 @@ protected function validationAttributes()
         ];
     }
 
-    public function resetInput(){
-        $this->menuLevel=['name'=>''];
+    public function resetInput()
+    {
+        $this->menuLevel = ['name' => ''];
     }
 
+    public function editMenuLevel($row)
+    {
+        $this->editMenuRecord = MenuLevel::find($row)->first();
+        $this->menuLevel['name'] = $this->editMenuRecord->name;
+        $this->formInfo('update', 'Update', 'Update ' . $this->menuLevel['name'], 'Update ' . $this->menuLevel['name']);
+        $this->dispatchBrowserEvent('FirstModel', ['show' => true]);
+    }
 
 
-    public function submit(){
+    public function submit()
+    {
         $this->validate();
-       $level=new MenuLevel();
-       $level->name=$this->menuLevel['name'];
-       $level->save();
-       $this->resetForm();
-        $this->resetInput();
-       $this->dispatchBrowserEvent('FirstModel',['show'=>false]);
-       $this->dispatchBrowserEvent('Toast',['show'=>true,'type'=>'success','message'=>"'".$level->name."'".' was added to Menu Level!']);
+
+        switch ($this->formType) {
+
+            case 'create':
+                $level = new MenuLevel();
+                $level->name = $this->menuLevel['name'];
+                $level->save();
+
+                break;
+
+            case 'update':
+                $this->editMenuRecord->name = $this->menuLevel['name'];
+                $this->editMenuRecord->save();
+                break;
+        }
+        if ($this->formType === 'create' || $this->formType === 'update') {
+            $this->emit('refreshDatatable');
+            $this->resetForm();
+            $this->resetInput();
+            $this->dispatchBrowserEvent('FirstModel', ['show' => false]);
+
+            if($this->formType === 'update'){
+                $this->dispatchBrowserEvent('Toast', ['show' => true, 'type' => 'success', 'message' => "'" . $this->editMenuRecord->name . "'" . ' was updated!']);
+            }else{
+                $this->dispatchBrowserEvent('Toast', ['show' => true, 'type' => 'success', 'message' => "'" . $level->name . "'" . ' was added to Menu Level!']);
+            }
+
+        }
+
     }
 
     public function render()
diff --git a/app/Http/Livewire/Admin/Menu/MenuLevelTable.php b/app/Http/Livewire/Admin/Menu/MenuLevelTable.php
new file mode 100644
index 0000000..823d470
--- /dev/null
+++ b/app/Http/Livewire/Admin/Menu/MenuLevelTable.php
@@ -0,0 +1,72 @@
+<?php
+
+namespace App\Http\Livewire\Admin\Menu;
+
+use Rappasoft\LaravelLivewireTables\DataTableComponent;
+use Rappasoft\LaravelLivewireTables\Views\Column;
+use App\Models\MenuLevel;
+use Rappasoft\LaravelLivewireTables\Views\Columns\LinkColumn;
+
+class MenuLevelTable extends DataTableComponent
+{
+    protected $model = MenuLevel::class;
+
+
+
+    public string $tableName = 'level-menus';
+
+    public $columnSearch = [
+        'names' => null,
+    ];
+
+
+
+
+    public function configure(): void
+    {
+        $this->setPrimaryKey('id')
+             ->setPerPageAccepted([10, 25, 50, 100])
+           ->setPerPage(10)
+            ->setSortingStatus(true)
+            ->setSortingPillsStatus(false)
+            ->setPageName('menu-levels')
+            ->setPaginationVisibilityStatus(true)
+            ->setPaginationStatus(true)
+            ->setDefaultSort('id', 'desc')
+            ->setQueryStringStatus(false)
+        -> setUseHeaderAsFooterEnabled();
+    }
+
+
+
+
+    public function columns(): array
+    {
+        return [
+            Column::make("Id", "id")
+                ->searchable(),
+            Column::make("Name", "name")
+                ->searchable()
+                ->sortable(),
+            Column::make("Created at", "created_at")
+                ->sortable(),
+            Column::make("Updated at", "updated_at")
+                ->sortable(),
+            Column::make('Edit')
+                ->label(
+                    fn($row, Column $column) => 'Edit'
+                ),
+            LinkColumn::make('Action')
+                ->title(fn($row) => 'Edit')
+                ->location(fn($row) => route('admin.menu', $row)),
+            Column::make('Name')
+                ->format(
+                    fn($value, $row, Column $column) => '<svg wire:click.prevent="$emit(`editMenuLevel`,'.$row.')" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cursor-pointer w-5 h-5">
+                                                          <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
+                                                        </svg>'
+                )
+                ->html(),
+
+        ];
+    }
+}
diff --git a/app/Http/Livewire/UserTable.php b/app/Http/Livewire/UserTable.php
new file mode 100644
index 0000000..de499f8
--- /dev/null
+++ b/app/Http/Livewire/UserTable.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Livewire;
+
+use Rappasoft\LaravelLivewireTables\DataTableComponent;
+use Rappasoft\LaravelLivewireTables\Views\Column;
+use App\Models\User;
+
+class UserTable extends DataTableComponent
+{
+    protected $model = User::class;
+    public string $tableName = 'users';
+    public function configure(): void
+    {
+        $this->setPrimaryKey('id');
+
+    }
+
+    public function columns(): array
+    {
+        return [
+            Column::make("Id", "id")
+                ->sortable(),
+            Column::make("Name", "name")
+                ->sortable(),
+            Column::make("Email", "email")
+                ->sortable(),
+            Column::make("Created at", "created_at")
+                ->sortable(),
+            Column::make("Updated at", "updated_at")
+                ->sortable(),
+        ];
+    }
+}
diff --git a/app/Traits/General.php b/app/Traits/General.php
new file mode 100644
index 0000000..403ce7b
--- /dev/null
+++ b/app/Traits/General.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Traits;
+
+trait General
+{
+    public string $formType = 'create';
+    public string $buttonName = 'Create';
+    public string $modalHeader = 'Create';
+
+    public function formInfo($formType, $buttonName, $submitName, $modalHeader)
+    {
+        switch ($formType) {
+            case 'create':
+            case 'update':
+                $this->formType = $formType;
+                $this->buttonName = $buttonName;
+                $this->submitName = $submitName;
+                $this->modalHeader = $modalHeader;
+                break;
+        }
+    }
+}
diff --git a/app/View/Components/Svg/Edit.php b/app/View/Components/Svg/Edit.php
new file mode 100644
index 0000000..0ab5b6e
--- /dev/null
+++ b/app/View/Components/Svg/Edit.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Svg;
+
+use Illuminate\View\Component;
+
+class Edit extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.svg.edit');
+    }
+}
diff --git a/composer.json b/composer.json
index 1fed768..c0690d7 100644
--- a/composer.json
+++ b/composer.json
@@ -11,7 +11,8 @@
         "laravel/jetstream": "^2.12",
         "laravel/sanctum": "^3.0",
         "laravel/tinker": "^2.7",
-        "livewire/livewire": "^2.5"
+        "livewire/livewire": "^2.5",
+        "rappasoft/laravel-livewire-tables": "^2.8"
     },
     "require-dev": {
         "fakerphp/faker": "^1.9.1",
diff --git a/composer.lock b/composer.lock
index be4f58b..e3eb0c6 100644
--- 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": "38df77e53f4c78f3a21a8ec11d0d0a7a",
+    "content-hash": "a2a64ee96004e20af95f2c5f858ad79d",
     "packages": [
         {
             "name": "bacon/bacon-qr-code",
@@ -3453,6 +3453,136 @@
             ],
             "time": "2022-09-16T03:22:46+00:00"
         },
+        {
+            "name": "rappasoft/laravel-livewire-tables",
+            "version": "v2.8.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/rappasoft/laravel-livewire-tables.git",
+                "reference": "e6069cd0fac4b7f8a5d492388a735a3b7351bc80"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/rappasoft/laravel-livewire-tables/zipball/e6069cd0fac4b7f8a5d492388a735a3b7351bc80",
+                "reference": "e6069cd0fac4b7f8a5d492388a735a3b7351bc80",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/contracts": "^8.0|^9.0",
+                "livewire/livewire": "^2.6",
+                "php": "^7.4|^8.0",
+                "spatie/laravel-package-tools": "^1.4.3"
+            },
+            "require-dev": {
+                "ext-sqlite3": "*",
+                "orchestra/testbench": "^6.13|^7.0",
+                "phpunit/phpunit": "^9.3",
+                "spatie/laravel-ray": "^1.9"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Rappasoft\\LaravelLivewireTables\\LaravelLivewireTablesServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Rappasoft\\LaravelLivewireTables\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Anthony Rappa",
+                    "email": "rappa819@gmail.com",
+                    "role": "Developer"
+                }
+            ],
+            "description": "A dynamic table component for Laravel Livewire",
+            "homepage": "https://github.com/rappasoft/laravel-livewire-tables",
+            "keywords": [
+                "datatables",
+                "laravel",
+                "livewire",
+                "rappasoft",
+                "tables"
+            ],
+            "support": {
+                "issues": "https://github.com/rappasoft/laravel-livewire-tables/issues",
+                "source": "https://github.com/rappasoft/laravel-livewire-tables/tree/v2.8.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/rappasoft",
+                    "type": "github"
+                }
+            ],
+            "time": "2022-07-25T00:44:21+00:00"
+        },
+        {
+            "name": "spatie/laravel-package-tools",
+            "version": "1.13.6",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/spatie/laravel-package-tools.git",
+                "reference": "c377cc7223655c2278c148c1685b8b5a78af5c65"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/spatie/laravel-package-tools/zipball/c377cc7223655c2278c148c1685b8b5a78af5c65",
+                "reference": "c377cc7223655c2278c148c1685b8b5a78af5c65",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/contracts": "^9.28",
+                "php": "^8.0"
+            },
+            "require-dev": {
+                "mockery/mockery": "^1.5",
+                "orchestra/testbench": "^7.7",
+                "phpunit/phpunit": "^9.5.24",
+                "spatie/test-time": "^1.3"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Spatie\\LaravelPackageTools\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Freek Van der Herten",
+                    "email": "freek@spatie.be",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Tools for creating Laravel packages",
+            "homepage": "https://github.com/spatie/laravel-package-tools",
+            "keywords": [
+                "laravel-package-tools",
+                "spatie"
+            ],
+            "support": {
+                "issues": "https://github.com/spatie/laravel-package-tools/issues",
+                "source": "https://github.com/spatie/laravel-package-tools/tree/1.13.6"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/spatie",
+                    "type": "github"
+                }
+            ],
+            "time": "2022-10-11T06:37:42+00:00"
+        },
         {
             "name": "symfony/console",
             "version": "v6.1.6",
diff --git a/config/livewire-tables.php b/config/livewire-tables.php
new file mode 100644
index 0000000..e90072e
--- /dev/null
+++ b/config/livewire-tables.php
@@ -0,0 +1,8 @@
+<?php
+
+return [
+    /**
+     * Options: tailwind | bootstrap-4 | bootstrap-5.
+     */
+    'theme' => 'tailwind',
+];
diff --git a/resources/js/components/main.js b/resources/js/components/main.js
index 0157dd1..d58005e 100644
--- a/resources/js/components/main.js
+++ b/resources/js/components/main.js
@@ -32,9 +32,7 @@ export function Main(data) {
 
             // First Model
             window.addEventListener('FirstModel', event => {
-                if (event.detail.show === false) {
-                    this.isFirstModelButtonClicked = false
-                }
+                (event.detail.show === true) ?  this.isFirstModelButtonClicked = true : this.isFirstModelButtonClicked = false;
             });
 
             // Toast
diff --git a/resources/views/components/item/button.blade.php b/resources/views/components/item/button.blade.php
index 0364d59..56c226e 100644
--- a/resources/views/components/item/button.blade.php
+++ b/resources/views/components/item/button.blade.php
@@ -1,7 +1,7 @@
 @props([
 'size'=>'medium',
 'type'=>'button',
-'defaultBg'=>'transition-all duration-300 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-oblue-100 dark:hover:bg-oblue-100 dark:border-olblue-800 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-oblue-100',
+'defaultBg'=>'transition-all duration-300 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-oblue-100 dark:hover:bg-oblue-100 dark:border-olblue-800/[0.5] dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-oblue-100',
 'primaryBg'=>'transition-all duration-300 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-blue-600 text-gray-100 shadow-sm align-middle hover:bg-blue-700 border-blue-700 dark:border-blue-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-300 transition-all text-sm '
 ])
 @switch($size)
diff --git a/resources/views/components/item/input.blade.php b/resources/views/components/item/input.blade.php
index 5f3e87e..3d5b40b 100644
--- a/resources/views/components/item/input.blade.php
+++ b/resources/views/components/item/input.blade.php
@@ -3,8 +3,8 @@
 'placeholder'=>'',
 'size'=>'small',
 'sizeSmall'=>'py-2 px-3 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-oblue-300 dark:border-olblue-800/[0.5] dark:text-gray-400',
-'sizeMedium'=>'py-2 px-3 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400',
-'sizeLarge'=>'y-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 sm:p-5',
+'sizeMedium'=>'py-2 px-3 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-oblue-800 dark:border-gray-700 dark:text-gray-400',
+'sizeLarge'=>'y-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-oblue-800 dark:border-gray-700 dark:text-gray-400 sm:p-5',
 
 ])
 <input {{ $attributes->merge() }} type="text" id="{{$name}}" placeholder="{{$placeholder}}" name="{{$name}}"
diff --git a/resources/views/components/item/modal.blade.php b/resources/views/components/item/modal.blade.php
index 197aa8f..5d277b1 100644
--- a/resources/views/components/item/modal.blade.php
+++ b/resources/views/components/item/modal.blade.php
@@ -10,12 +10,12 @@
 
 <x-item.button @click.prevent="isFirstModelButtonClicked = true; $wire.resetForm()" size="small">
     @switch($type)
-        @case('add')
+        @case('create')
         <x-svg.add class="flex w-4 h-4"></x-svg.add>
         @break
 
         @case('update')
-        <x-svg.add class="flex w-4 h-4"></x-svg.add>
+        <x-svg.edit class="flex w-4 h-4"></x-svg.edit>
         @break
 
         @case('delete')
@@ -55,7 +55,7 @@ class="max-h-full !min-w-full overflow-hidden flex flex-col bg-white border shad
             <div class="flex justify-between items-center py-3 px-4 border-b dark:border-olblue-800/[0.5]">
                 <h3 class="flex justify-start items-center font-bold text-gray-800 dark:text-white">
                     @switch($type)
-                        @case('add')
+                        @case('create')
                         <x-svg.add class="flex w-5 h-5"></x-svg.add>
                         @break
 
diff --git a/resources/views/components/svg/edit.blade.php b/resources/views/components/svg/edit.blade.php
new file mode 100644
index 0000000..be66bac
--- /dev/null
+++ b/resources/views/components/svg/edit.blade.php
@@ -0,0 +1,3 @@
+<svg {{ $attributes->merge(['class' => 'flex-none']) }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
+    <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
+</svg>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 8982cd2..2a2aceb 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -17,6 +17,9 @@
     <!-- Scripts -->
     @vite(['resources/css/app.css', 'resources/js/app.js'])
 
+    <style>
+        [x-cloak] { display: none !important; }
+    </style>
     <!-- Styles -->
     @livewireStyles
 </head>
diff --git a/resources/views/livewire/admin/menu/level.blade.php b/resources/views/livewire/admin/menu/level.blade.php
index ee526be..cbfe4d3 100644
--- a/resources/views/livewire/admin/menu/level.blade.php
+++ b/resources/views/livewire/admin/menu/level.blade.php
@@ -6,23 +6,22 @@
 
     <!-- PAGE CONTENT -->
     <x-layout.content>
-
-        <!-- Menu Model create -->
-        <x-item.modal buttonName="Create" size="small" type="add" modalHeader="Create Menu Level">
+        <!-- Menu create -->
+        <x-item.modal buttonName="{{$buttonName}}" size="small" type="{{$formType}}" modalHeader="{{$modalHeader}}">
             <x-item.form method="POST">
                 <div class="grid grid-cols-1 gap-4">
-                    <x-item.elements.input wireName="menuLevel.name" updating="defer" name="menu-name" label="Name" placeholder="Enter a name for menu Level" ></x-item.elements.input>
+                    <x-item.elements.input wireName="menuLevel.name" updating="defer" name="menu-name" label="Name"
+                                           placeholder="Enter a name for menu Level"></x-item.elements.input>
                 </div>
-                    <x-item.form-submit name="Add"></x-item.form-submit>
+                <x-item.form-submit name="{{$submitName}}"></x-item.form-submit>
             </x-item.form>
         </x-item.modal>
 
-        <!-- menu Table -->
-
-
+        <!-- Menu datatable -->
+        <div class="mt-3">
+            <livewire:admin.menu.menu-level-table/>
+        </div>
     </x-layout.content>
 
 
-
-
 </div>
diff --git a/resources/views/vendor/livewire-tables/.gitkeep b/resources/views/vendor/livewire-tables/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/resources/views/vendor/livewire-tables/components/pagination.blade.php b/resources/views/vendor/livewire-tables/components/pagination.blade.php
new file mode 100644
index 0000000..5cbc922
--- /dev/null
+++ b/resources/views/vendor/livewire-tables/components/pagination.blade.php
@@ -0,0 +1,106 @@
+@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() && $rows->lastPage() > 1)
+                        <p class="paged-pagination-results text-sm text-gray-700 leading-5 dark:text-olblue-500">
+                            <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>
+                    @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() && $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>
+            @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() && $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>
+            @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
diff --git a/resources/views/vendor/livewire-tables/components/table.blade.php b/resources/views/vendor/livewire-tables/components/table.blade.php
new file mode 100644
index 0000000..0b1c7ef
--- /dev/null
+++ 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([' overflow-y-auto  border border-gray-200 dark:border-oblue-100 sm:rounded-xl' => $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-transparent' => $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-oblue-600 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
diff --git a/resources/views/vendor/livewire-tables/components/table/empty.blade.php b/resources/views/vendor/livewire-tables/components/table/empty.blade.php
new file mode 100644
index 0000000..308b48a
--- /dev/null
+++ 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-oblue-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
diff --git a/resources/views/vendor/livewire-tables/components/table/row-contents.blade.php b/resources/views/vendor/livewire-tables/components/table/row-contents.blade.php
new file mode 100644
index 0000000..1d37b8c
--- /dev/null
+++ 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
diff --git a/resources/views/vendor/livewire-tables/components/table/td.blade.php b/resources/views/vendor/livewire-tables/components/table/td.blade.php
new file mode 100644
index 0000000..3a0beae
--- /dev/null
+++ 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  border-t dark:border-oblue-100  text-sm font-medium text-gray-600 dark:text-olblue-400' => $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
diff --git 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
new file mode 100644
index 0000000..57bb4d0
--- /dev/null
+++ b/resources/views/vendor/livewire-tables/components/table/td/bulk-actions.blade.php
@@ -0,0 +1,31 @@
+@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' || $theme === 'bootstrap-5')
+        <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>
+    @endif
+@endif
diff --git a/resources/views/vendor/livewire-tables/components/table/td/plain.blade.php b/resources/views/vendor/livewire-tables/components/table/td/plain.blade.php
new file mode 100644
index 0000000..8583c10
--- /dev/null
+++ 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(['none d-sm-table-cell' => $column && $column->shouldCollapseOnMobile()])
+        ->class(['none d-md-table-cell' => $column && $column->shouldCollapseOnTablet()])
+        ->except('default')
+    }}>{{ $slot }}</td>
+@endif
diff --git a/resources/views/vendor/livewire-tables/components/table/td/reorder.blade.php b/resources/views/vendor/livewire-tables/components/table/td/reorder.blade.php
new file mode 100644
index 0000000..222fef5
--- /dev/null
+++ 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
diff --git 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
new file mode 100644
index 0000000..db155fa
--- /dev/null
+++ 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
diff --git a/resources/views/vendor/livewire-tables/components/table/th.blade.php b/resources/views/vendor/livewire-tables/components/table/th.blade.php
new file mode 100644
index 0000000..570a617
--- /dev/null
+++ 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 bg-gray-100  dark:bg-oblue-500 dark:text-olblue-600' => $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-olblue-600' => $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
diff --git 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
new file mode 100644
index 0000000..c28339c
--- /dev/null
+++ b/resources/views/vendor/livewire-tables/components/table/th/bulk-actions.blade.php
@@ -0,0 +1,26 @@
+@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' || $theme === 'bootstrap-5')
+        <x-livewire-tables::table.th.plain>
+            <input
+                wire:model="selectAll"
+                type="checkbox"
+            />
+        </x-livewire-tables::table.th.plain>
+    @endif
+@endif
diff --git a/resources/views/vendor/livewire-tables/components/table/th/plain.blade.php b/resources/views/vendor/livewire-tables/components/table/th/plain.blade.php
new file mode 100644
index 0000000..d146928
--- /dev/null
+++ 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-oblue-700']) }}>{{ $slot }}</th>
+@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+    <th scope="col">{{ $slot }}</th>
+@endif
diff --git a/resources/views/vendor/livewire-tables/components/table/th/reorder.blade.php b/resources/views/vendor/livewire-tables/components/table/th/reorder.blade.php
new file mode 100644
index 0000000..8510862
--- /dev/null
+++ 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
diff --git 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
new file mode 100644
index 0000000..48febd0
--- /dev/null
+++ 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-oblue-700'])
+                    ->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
diff --git a/resources/views/vendor/livewire-tables/components/table/tr.blade.php b/resources/views/vendor/livewire-tables/components/table/tr.blade.php
new file mode 100644
index 0000000..19253de
--- /dev/null
+++ 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-oblue-700 dark:border-oblue-100 dark:opacity-60"
+
+        @if ($component->reorderIsEnabled() && $component->currentlyReorderingIsEnabled())
+            wire:sortable.item="{{ $row->getKey() }}"
+        @endif
+
+        {{
+            $attributes->merge($customAttributes)
+                ->class(['bg-white dark:bg-oblue-400 dark:text-white' => ($customAttributes['default'] ?? true) && $rowIndex % 2 === 0])
+                ->class(['bg-gray-50 dark:bg-oblue-500 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
diff --git 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
new file mode 100644
index 0000000..744fd3c
--- /dev/null
+++ 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
diff --git a/resources/views/vendor/livewire-tables/components/table/tr/footer.blade.php b/resources/views/vendor/livewire-tables/components/table/tr/footer.blade.php
new file mode 100644
index 0000000..43bbd5a
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/resources/views/vendor/livewire-tables/components/table/tr/plain.blade.php b/resources/views/vendor/livewire-tables/components/table/tr/plain.blade.php
new file mode 100644
index 0000000..91038e6
--- /dev/null
+++ 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
diff --git 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
new file mode 100644
index 0000000..b34e35e
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/resources/views/vendor/livewire-tables/components/tools.blade.php b/resources/views/vendor/livewire-tables/components/tools.blade.php
new file mode 100644
index 0000000..24c3c0e
--- /dev/null
+++ 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
diff --git a/resources/views/vendor/livewire-tables/components/tools/filter-pills.blade.php b/resources/views/vendor/livewire-tables/components/tools/filter-pills.blade.php
new file mode 100644
index 0000000..7270f28
--- /dev/null
+++ 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="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
diff --git a/resources/views/vendor/livewire-tables/components/tools/filters/date.blade.php b/resources/views/vendor/livewire-tables/components/tools/filters/date.blade.php
new file mode 100644
index 0000000..1541167
--- /dev/null
+++ 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
diff --git a/resources/views/vendor/livewire-tables/components/tools/filters/datetime.blade.php b/resources/views/vendor/livewire-tables/components/tools/filters/datetime.blade.php
new file mode 100644
index 0000000..74a57b1
--- /dev/null
+++ 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
diff --git 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
new file mode 100644
index 0000000..01f42d4
--- /dev/null
+++ 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
diff --git a/resources/views/vendor/livewire-tables/components/tools/filters/number.blade.php b/resources/views/vendor/livewire-tables/components/tools/filters/number.blade.php
new file mode 100644
index 0000000..eba2665
--- /dev/null
+++ 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
diff --git a/resources/views/vendor/livewire-tables/components/tools/filters/select.blade.php b/resources/views/vendor/livewire-tables/components/tools/filters/select.blade.php
new file mode 100644
index 0000000..564f109
--- /dev/null
+++ b/resources/views/vendor/livewire-tables/components/tools/filters/select.blade.php
@@ -0,0 +1,29 @@
+@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)
+                <option value="{{ $key }}">{{ $value }}</option>
+            @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="form-control"
+    >
+        @foreach($filter->getOptions() as $key => $value)
+            <option value="{{ $key }}">{{ $value }}</option>
+        @endforeach
+    </select>
+@endif
diff --git 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
new file mode 100644
index 0000000..73edc44
--- /dev/null
+++ 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
diff --git a/resources/views/vendor/livewire-tables/components/tools/sorting-pills.blade.php b/resources/views/vendor/livewire-tables/components/tools/sorting-pills.blade.php
new file mode 100644
index 0000000..4310df0
--- /dev/null
+++ 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
diff --git a/resources/views/vendor/livewire-tables/components/tools/toolbar.blade.php b/resources/views/vendor/livewire-tables/components/tools/toolbar.blade.php
new file mode 100644
index 0000000..b71b8d2
--- /dev/null
+++ b/resources/views/vendor/livewire-tables/components/tools/toolbar.blade.php
@@ -0,0 +1,877 @@
+@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-oblue-100 dark:text-white dark:border-olblue-800/[0.5] dark:hover:bg-oblue-400/[0.5]"
+                >
+                    @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="py-2 px-3 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-oblue-100 dark:border-olblue-800/[0.5] dark:text-gray-400 @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-oblue-100 dark:text-white dark:border-olblue-800/[0.5] dark:hover:bg-oblue-300/[0.5]">
+                            <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-oblue-100 dark:text-white dark:border-olblue-800/[0.5] dark:hover:bg-oblue-400/[0.5]"
+
+                            @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-oblue-100 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-olblue-800/[0.5] 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-oblue-100 dark:text-white dark:border-olblue-800/[0.5] dark:hover:bg-oblue-400/[0.5]"
+                                    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-oblue-100 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-oblue-400/[0.5]"
+                                            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-oblue-100 dark:text-olblue-500 dark:border-olblue-800/[0.5] dark:hover:bg-oblue-400/[0.5]"
+                                    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 !bg-transparent"
+                        >
+                            <div class="bg-white rounded-md shadow-xs dark:bg-oblue-100 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-olblue-800/[0.5] dark:hover:bg-oblue-400/[0.5] dark:focus:bg-gray-600 disabled:opacity-50 disabled:cursor-wait"--}}
+                                                class="cursor-pointer shrink-0 mt-0.5 border-gray-200 rounded text-blue-600 pointer-events-none focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
+                                                @if($component->allDefaultVisibleColumnsAreSelected())
+                                                    checked
+                                                    wire:click="deselectAllColumns"
+                                                @else
+                                                    unchecked
+                                                    wire:click="selectAllColumns"
+                                                @endif
+                                                wire:loading.attr="disabled"
+                                                type="checkbox"
+                                            />
+                                            <span class="ml-2 text-xs">{{ __('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 text-xs 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-olblue-800/[0.5] dark:hover:bg-oblue-400/[0.5] dark:focus:bg-gray-600 disabled:opacity-50 disabled:cursor-wait"--}}
+class="cursor-pointer shrink-0 mt-0.5 border-gray-200 rounded text-blue-600 pointer-events-none focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
+                                                        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-oblue-100 dark:text-olblue-500 dark:border-olblue-800/[0.5]"
+                    >
+                        @foreach ($component->getPerPageAccepted() as $item)
+                            <option class="" 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>
+                                <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="ms-0 ms-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-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
diff --git a/resources/views/vendor/livewire-tables/components/wrapper.blade.php b/resources/views/vendor/livewire-tables/components/wrapper.blade.php
new file mode 100644
index 0000000..d988613
--- /dev/null
+++ 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>
diff --git a/resources/views/vendor/livewire-tables/datatable.blade.php b/resources/views/vendor/livewire-tables/datatable.blade.php
new file mode 100644
index 0000000..65cdb6b
--- /dev/null
+++ 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>
diff --git a/resources/views/vendor/livewire-tables/includes/columns/boolean.blade.php b/resources/views/vendor/livewire-tables/includes/columns/boolean.blade.php
new file mode 100644
index 0000000..f959f22
--- /dev/null
+++ 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
diff --git a/resources/views/vendor/livewire-tables/includes/columns/button-group.blade.php b/resources/views/vendor/livewire-tables/includes/columns/button-group.blade.php
new file mode 100644
index 0000000..7859611
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/resources/views/vendor/livewire-tables/includes/columns/image.blade.php b/resources/views/vendor/livewire-tables/includes/columns/image.blade.php
new file mode 100644
index 0000000..ab680db
--- /dev/null
+++ b/resources/views/vendor/livewire-tables/includes/columns/image.blade.php
@@ -0,0 +1 @@
+<img src="{{ $path }}" {!! count($attributes) ? $column->arrayToAttributes($attributes) : '' !!} />
\ No newline at end of file
diff --git a/resources/views/vendor/livewire-tables/includes/columns/link.blade.php b/resources/views/vendor/livewire-tables/includes/columns/link.blade.php
new file mode 100644
index 0000000..6033317
--- /dev/null
+++ b/resources/views/vendor/livewire-tables/includes/columns/link.blade.php
@@ -0,0 +1 @@
+<a href="{{ $path }}" {!! count($attributes) ? $column->arrayToAttributes($attributes) : '' !!}>{{ $title }}</a>
\ No newline at end of file
diff --git a/resources/views/vendor/livewire-tables/includes/debug.blade.php b/resources/views/vendor/livewire-tables/includes/debug.blade.php
new file mode 100644
index 0000000..d5e295d
--- /dev/null
+++ 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>
diff --git a/resources/views/vendor/livewire-tables/includes/offline.blade.php b/resources/views/vendor/livewire-tables/includes/offline.blade.php
new file mode 100644
index 0000000..30c9ad6
--- /dev/null
+++ 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
diff --git a/resources/views/vendor/livewire-tables/specific/bootstrap-4/pagination.blade.php b/resources/views/vendor/livewire-tables/specific/bootstrap-4/pagination.blade.php
new file mode 100644
index 0000000..95a14bc
--- /dev/null
+++ b/resources/views/vendor/livewire-tables/specific/bootstrap-4/pagination.blade.php
@@ -0,0 +1,50 @@
+<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 --}}
+                @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
+
+                {{-- 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>
\ No newline at end of file
diff --git a/resources/views/vendor/livewire-tables/specific/tailwind/pagination.blade.php b/resources/views/vendor/livewire-tables/specific/tailwind/pagination.blade.php
new file mode 100644
index 0000000..fa14d70
--- /dev/null
+++ b/resources/views/vendor/livewire-tables/specific/tailwind/pagination.blade.php
@@ -0,0 +1,104 @@
+<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-oblue-500 dark:text-olblue-500 dark:border-oblue-100">
+                            {!! __('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-oblue-500 dark:text-olblue-500 dark:ring-gray-600 dark:border-oblue-100 dark:hover:bg-oblue-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-oblue-500 dark:text-olblue-500 dark:ring-gray-600 dark:border-oblue-100 dark:hover:bg-oblue-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-oblue-500 dark:text-olblue-500 dark:border-oblue-100">
+                            {!! __('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-oblue-500 dark:text-olblue-500 dark:border-oblue-100" 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-oblue-500 dark:text-olblue-500 dark:ring-gray-600 dark:border-oblue-100 dark:hover:bg-oblue-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 --}}
+                        @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-oblue-500 dark:text-olblue-500 dark:border-oblue-100">{{ $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-oblue-100 dark:text-olblue-500 dark:border-oblue-100">{{ $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-oblue-500 dark:text-olblue-500 dark:ring-gray-600 dark:border-oblue-100 dark:hover:bg-oblue-600" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
+                                                {{ $page }}
+                                            </button>
+                                        @endif
+                                    </span>
+                                @endforeach
+                            @endif
+                        @endforeach
+
+                        <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-oblue-500 dark:text-olblue-500 dark:ring-gray-600 dark:border-oblue-100 dark:hover:bg-oblue-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-oblue-500 dark:text-olblue-500 dark:border-oblue-100" 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>
diff --git a/resources/views/vendor/livewire-tables/stubs/custom.blade.php b/resources/views/vendor/livewire-tables/stubs/custom.blade.php
new file mode 100644
index 0000000..e69de29
diff --git a/tailwind.config.js b/tailwind.config.js
index 045cb02..657e868 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,7 +9,9 @@ module.exports = {
         './storage/framework/views/*.php',
         './resources/views/**/*.blade.php',
         './node_modules/preline/dist/*.js',
+        './vendor/rappasoft/laravel-livewire-tables/resources/views/**/*.blade.php',
     ],
+
     tailwindConfig: './styles/tailwind.config.js',
     darkMode: 'class',
     variants: {