Initial commit

resources/views/livewire/datatables/boolean.blade.php

@@ -0,0 +1,7 @@
+<div>
+@if($value)
+    <x-icons.check-circle class="text-green-600 mx-auto" />
+@else
+    <x-icons.x-circle class="text-red-300 mx-auto" />
+@endif
+</div>

resources/views/livewire/datatables/checkbox.blade.php

@@ -0,0 +1,9 @@
+<div class="flex justify-center">
+    <input
+        type="checkbox"
+        wire:model.live="selected"
+        value="{{ $value }}"
+        @if (in_array($value, $this->pinnedRecords)) checked @endif
+        class="w-4 h-4 mt-1 text-black form-checkbox transition duration-150 ease-in-out"
+    />
+</div>

resources/views/livewire/datatables/complex-query-group.blade.php

@@ -0,0 +1,75 @@
+<div class="space-y-4">
+    @foreach($rules as $index => $rule)
+        @php $key = $parentIndex !== null ? $parentIndex . '.' . $index : $index; @endphp
+        <div wire:key="{{ $key }}">
+            @if($rule['type'] === 'rule')
+                @include('datatables::complex-query-rule', ['parentIndex' => $key, 'rule' => $rule])
+            @elseif($rule['type'] === 'group')
+                <div x-data="{
+                    key: '{{ collect(explode('.', $key))->join(".content.") . ".content" }}',
+                    source: () => document.querySelector('[dragging]'),
+                    dragstart: (e, key) => {
+                        e.target.setAttribute('dragging', key)
+                        e.target.classList.add('bg-opacity-20', 'bg-white')
+                    },
+                    dragend: (e) => {
+                        e.target.removeAttribute('dragging')
+                        e.target.classList.remove('bg-opacity-20', 'bg-white')
+                    },
+                    dragenter(e) {
+                        if (e.target.closest('[drag-target]') !== this.source().closest('[drag-target]')) {
+                            this.$refs.placeholder.appendChild(this.source())
+                        }
+                    },
+                    drop(e) {
+                        $wire.call('moveRule', this.source().getAttribute('dragging'), this.key)
+                    },
+                }" drag-target
+                    x-on:dragenter.prevent="dragenter"
+                    x-on:dragleave.prevent
+                    x-on:dragover.prevent
+                    x-on:drop="drop"
+                    class="p-4 space-y-4 bg-blue-500 bg-opacity-10 rounded-lg text-gray-{{ strlen($parentIndex) > 6 ? 1 : 9 }}00 border border-blue-400"
+                >
+                    <span class="flex justify-center space-x-4">
+                        <button wire:click="addRule('{{ collect(explode('.', $key))->join(".content.") . ".content" }}')" class="flex items-center space-x-2 px-3 py-2 border border-blue-400 rounded-md bg-white text-blue-500 text-xs leading-4 font-medium uppercase tracking-wider hover:bg-blue-200 focus:outline-none">ADD RULE</button>
+                        <button wire:click="addGroup('{{ collect(explode('.', $key))->join(".content.") . ".content" }}')" class="flex items-center space-x-2 px-3 py-2 border border-blue-400 rounded-md bg-white text-blue-500 text-xs leading-4 font-medium uppercase tracking-wider hover:bg-blue-200 focus:outline-none">ADD GROUP</button>
+                    </span>
+                    <div class="block sm:flex items-center">
+                        <div class="flex justify-center sm:block">
+                            @if(count($rule['content']) > 1)
+                                <div class="mr-8">
+                                    <label class="block uppercase tracking-wide text-xs font-bold py-1 rounded flex justify-between">Logic</label>
+                                    <select
+                                        wire:model.live="rules.{{ collect(explode('.', $key))->join(".content.") }}.logic"
+                                        class="w-24 text-sm leading-4 block rounded-md border-theme-border shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
+                                    >
+                                        <option value="and">AND</option>
+                                        <option value="or">OR</option>
+                                    </select>
+                                </div>
+                            @endif
+                        </div>
+                        <div x-ref="placeholder" class="flex-grow space-y-4">
+                            <div>
+                                @include('datatables::complex-query-group', [
+                                    'parentIndex' => $key,
+                                    'rules' => $rule['content'],
+                                    'logic' => $rule['logic']
+                                ])
+                            </div>
+                        </div>
+                    </div>
+
+
+                    <div class="flex justify-end">
+                        @unless($key === 0)
+                            <button wire:click="removeRule('{{ collect(explode('.', $key))->join(".content.") . ".content" }}')" class="px-3 py-2 rounded bg-red-600 text-white"><x-icons.trash /></button>
+                        @endunless
+                    </div>
+
+                </div>
+            @endif
+        </div>
+    @endforeach
+</div>

resources/views/livewire/datatables/complex-query-rule.blade.php

@@ -0,0 +1,96 @@
+<div class="w-full">
+    @php $key = collect(explode('.', $parentIndex))->join(".content.") . ".content" @endphp
+    <div
+        draggable="true"
+        x-on:dragstart="dragstart($event, '{{ $key }}')"
+        x-on:dragend="dragend"
+        key="{{ $key }}"
+        class="px-3 py-2 -my-1 sm:flex space-x-4 items-end hover:bg-opacity-20 hover:bg-white hover:shadow-xl"
+    >
+        <div class="sm:flex flex-grow sm:space-x-4">
+            <div class="sm:w-1/3">
+                <label
+                    class="block uppercase tracking-wide text-xs font-bold py-1 rounded flex justify-between">Column</label>
+                <div class="relative">
+                    <select wire:model.live="rules.{{ $key }}.column" name="selectedColumn"
+                        class="w-full my-1 text-sm text-theme-primary leading-4 block rounded-md border-theme-border shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
+                        <option value=""></option>
+                        @foreach ($columns as $i => $column)
+                            <option value="{{ $i }}">{{ Str::ucfirst($column['label']) }}</option>
+                        @endforeach
+                    </select>
+                </div>
+            </div>
+
+            @if ($options = $this->getOperands($key))
+                <div class="sm:w-1/3">
+                    <label
+                        class="block uppercase tracking-wide text-xs font-bold py-1 rounded flex justify-between">Operand</label>
+                    <div class="relative">
+                        <select name="operand" wire:model.live="rules.{{ $key }}.operand"
+                            class="w-full my-1 text-sm text-theme-primary leading-4 block rounded-md border-theme-border shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
+                            <option selected></option>
+                            @foreach ($options as $operand)
+                                <option value="{{ $operand }}">{{ $operand }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+                </div>
+            @endif
+
+            @if (!in_array($rule['content']['operand'], ['is empty', 'is not empty']))
+                <div class="sm:w-1/3">
+                    @if ($column = $this->getRuleColumn($key))
+                        <label
+                            class="block uppercase tracking-wide text-xs font-bold py-1 rounded flex justify-between">Value</label>
+                        <div class="relative">
+                            @if (is_array($column['filterable']))
+                                <select name="value" wire:model.live="rules.{{ $key }}.value"
+                                    class="w-full my-1 text-sm text-theme-primary leading-4 block rounded-md border-theme-border shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
+                                    <option selected></option>
+                                    @foreach ($column['filterable'] as $value => $label)
+                                        @if (is_object($label))
+                                            <option value="{{ $label->id }}">{{ $label->name }}</option>
+                                        @elseif(is_array($label))
+                                            <option value="{{ $label['id'] }}">{{ $label['name'] }}</option>
+                                        @elseif(is_numeric($value))
+                                            <option value="{{ $label }}">{{ $label }}</option>
+                                        @else
+                                            <option value="{{ $value }}">{{ $label }}</option>
+                                        @endif
+                                    @endforeach
+                                </select>
+                            @elseif($column['type'] === 'boolean')
+                                <select name="value" wire:model.live="rules.{{ $key }}.value"
+                                    class="w-full my-1 text-sm text-theme-primary leading-4 block rounded-md border-theme-border shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
+                                    <option selected></option>
+                                    <option value="true">True</option>
+                                    <option value="false">False</option>
+                                </select>
+                            @elseif($column['type'] === 'date')
+                                <input type="date" name="value" wire:model.blur="rules.{{ $key }}.value"
+                                    class="w-full px-3 py-2 border my-1 text-sm text-theme-primary leading-4 block rounded-md border-theme-border shadow-sm focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" />
+                            @elseif($column['type'] === 'time')
+                                <input type="time" name="value" wire:model.blur="rules.{{ $key }}.value"
+                                    class="w-full px-3 py-2 border my-1 text-sm text-theme-primary leading-4 block rounded-md border-theme-border shadow-sm focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" />
+                            @else
+                                <input name="value" wire:model.blur="rules.{{ $key }}.value"
+                                    class="w-full px-3 py-2 border my-1 text-sm text-theme-primary leading-4 block rounded-md border-theme-border shadow-sm focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" />
+                            @endif
+                        </div>
+                    @endif
+                </div>
+            @endif
+        </div>
+        <div class="flex justify-center sm:justify-end">
+            <button wire:click="duplicateRule('{{ $key }}')"
+                class="mb-px w-9 h-9 flex items-center justify-center rounded text-green-600 hover:text-green-400">
+                <x-icons.copy />
+            </button>
+            <button wire:click="removeRule('{{ $key }}')"
+                class="mb-px w-9 h-9 flex items-center justify-center rounded text-red-600 hover:text-red-400">
+                <x-icons.trash />
+            </button>
+        </div>
+    </div>
+</div>

resources/views/livewire/datatables/complex-query.blade.php

@@ -0,0 +1,73 @@
+<div x-data="{
+        rules: @if($persistKey) $persist('').as('{{ $persistKey }}') @else '' @endif,
+        init() {
+            Livewire.on('complexQuery', rules => this.rules = rules)
+            if (this.rules && this.rules !== '') {
+                $wire.set('rules', this.rules)
+                $wire.runQuery()
+            }
+        }
+    }" class=""
+>
+    <div class="my-4 flex justify-between text-xl uppercase tracking-wide font-medium leading-none">
+        <span>Query Builder</span>
+        <span>@if($errors->any())
+            <div class="text-red-500">You have missing values in your rules</div>
+        @endif</span>
+    </div>
+
+    @if(count($this->rules[0]['content']))
+        <div class="my-4 px-4 py-2 bg-gray-500 whitespace-pre-wrap @if($errors->any())text-red-200 @else text-green-100 @endif rounded">{{ $this->rulesString }}@if($errors->any()) Invalid rules @endif</div>
+    @endif
+
+    <div>@include('datatables::complex-query-group', ['rules' => $rules, 'parentIndex' => null])</div>
+
+    @if(count($this->rules[0]['content']))
+        @unless($errors->any())
+            <div class="pt-2 sm:flex w-full justify-between">
+                <div>
+                    {{-- <button class="bg-blue-500 px-3 py-2 rounded text-white" wire:click="runQuery">Apply Query</button> --}}
+                </div>
+                <div class="mt-2 sm:mt-0 sm:flex sm:space-x-2">
+                    @isset($savedQueries)
+                        <div class="flex items-center space-x-2" x-data="{
+                            name: null,
+                            saveQuery() {
+                                $wire.call('saveQuery', this.name)
+                                this.name = null
+                            }
+                        }">
+                            <input x-model="name" wire:loading.attr="disabled" x-on:keydown.enter="saveQuery" placeholder="save as..." class="flex-grow px-3 py-3 border text-sm text-theme-primary leading-4 block rounded-md border-theme-border shadow-sm focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" />
+                            <button x-bind:disabled="! name" x-show="rules" x-on:click="saveQuery" class="flex items-center space-x-2 px-3 py-0.5 border border-green-400 disabled:border-theme-border rounded-md bg-white text-green-500 disabled:text-theme-muted text-xs leading-4 font-medium uppercase tracking-wider hover:bg-green-200 disabled:hover:bg-white focus:outline-none disabled:pointer-events-none">
+                                <span>{{ __('Save') }}</span>
+                                <span wire:loading.remove><x-icons.check-circle class="m-2" /></span>
+                                <span wire:loading><x-icons.cog class="animate-spin m-2" /></span>
+                            </button>
+                        </div>
+                    @endisset
+                    <button x-show="rules" wire:click="resetQuery" class="flex items-center space-x-2 px-3 border border-red-400 rounded-md bg-white text-red-500 text-xs leading-4 font-medium uppercase tracking-wider hover:bg-red-200 focus:outline-none">
+                        <span>{{ __('Reset') }}</span>
+                        <x-icons.x-circle class="m-2" />
+                    </button>
+                </div>
+            </div>
+        @endif
+
+    @endif
+    @if(count($savedQueries ?? []))
+        <div>
+            <div class="mt-8 my-4 text-xl uppercase tracking-wide font-medium leading-none">Saved Queries</div>
+            <div class="grid md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-2">
+                @foreach($savedQueries as $saved)
+                    <div class="flex" wire:key="{{ $saved['id'] }}">
+                        <button wire:click="loadRules({{ json_encode($saved['rules']) }})" wire:loading.attr="disabled" class="p-2 flex-grow flex items-center space-x-2 px-3 border border-r-0 border-blue-400 rounded-md rounded-r-none bg-white text-blue-500 text-xs leading-4 font-medium uppercase tracking-wider hover:bg-blue-200 focus:outline-none">{{ $saved['name'] }}</button>
+                        <button wire:click="deleteRules({{ $saved['id'] }})" wire:loading.attr="disabled" class="p-2 flex items-center space-x-2 px-3 border border-red-400 rounded-md rounded-l-none bg-white text-red-500 text-xs leading-4 font-medium uppercase tracking-wider hover:bg-red-200 focus:outline-none">
+                            <x-icons.x-circle wire:loading.remove />
+                            <x-icons.cog wire:loading class="h-6 w-6 animate-spin" />
+                        </button>
+                    </div>
+                @endforeach
+            </div>
+        </div>
+    @endif
+</div>

resources/views/livewire/datatables/datatable.blade.php

@@ -0,0 +1,249 @@
+<div my-6>
+    @if($beforeTableSlot)
+        <div class="mt-8">
+            @include($beforeTableSlot)
+        </div>
+    @endif
+    <div class="relative">
+        <div class="flex items-center justify-between my-6">
+            <div class="flex items-center h-10">
+                @if($this->searchableColumns()->count())
+                    <div class="flex rounded-lg w-96 shadow-sm">
+                        <div class="relative flex-grow focus-within:z-10">
+                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                                <svg class="w-5 h-5 text-theme-muted" viewBox="0 0 20 20" stroke="currentColor" fill="none">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                                </svg>
+                            </div>
+                            <input wire:model.live.debounce.500ms="search" class="block w-full py-3 pl-10 text-sm border-theme-border leading-4 rounded-md shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:outline-none" placeholder="{{__('Search in')}} {{ $this->searchableColumns()->map->label->join(', ') }}" type="text" />
+                            <div class="absolute inset-y-0 right-0 flex items-center pr-2">
+                                <button wire:click="$set('search', null)" class="text-theme-muted hover:text-red-600 focus:outline-none">
+                                    <x-icons.x-circle class="w-5 h-5 stroke-current" />
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                @endif
+            </div>
+
+            @if($this->activeFilters)
+                <span class="text-xl text-theme-muted uppercase">{{ __('Fileters Active') }}</span>
+            @endif
+
+            <div class="flex flex-wrap items-center space-x-1">
+                <x-icons.cog wire:loading class="text-theme-muted h-9 w-9 animate-spin" />
+
+                    @if($this->activeFilters)
+                        <button wire:click="clearAllFilters" class="flex items-center px-3 text-xs font-medium tracking-wider text-red-500 uppercase bg-white border border-red-400 space-x-2 rounded-md leading-4 hover:bg-red-200 focus:outline-none"><span>{{ __('Reset') }}</span>
+                            <x-icons.x-circle class="m-2" />
+                        </button>
+                    @endif
+
+                    @if(count($this->massActionsOptions))
+                        <div class="flex items-center justify-center space-x-1">
+                            <label for="datatables_mass_actions">{{ __('With selected') }}:</label>
+                            <select wire:model.live="massActionOption" class="px-3 text-xs font-medium tracking-wider uppercase bg-white border border-green-400 space-x-2 rounded-md leading-4 focus:outline-none" id="datatables_mass_actions">
+                                <option value="">{{ __('Choose...') }}</option>
+                                @foreach($this->massActionsOptions as $group => $items)
+                                    @if(!$group)
+                                        @foreach($items as $item)
+                                            <option value="{{$item['value']}}">{{$item['label']}}</option>
+                                        @endforeach
+                                    @else
+                                        <optgroup label="{{$group}}">
+                                            @foreach($items as $item)
+                                                <option value="{{$item['value']}}">{{$item['label']}}</option>
+                                            @endforeach
+                                        </optgroup>
+                                    @endif
+                                @endforeach
+                            </select>
+                            <button
+                                wire:click="massActionOptionHandler"
+                                class="flex items-center px-4 py-2 text-xs font-medium tracking-wider text-green-500 uppercase bg-white border border-green-400 rounded-md leading-4 hover:bg-green-200 focus:outline-none" type="submit" title="Submit"
+                                                                                                                                                                                                                                          >Go</button>
+                        </div>
+                    @endif
+
+                    @if($exportable)
+                        <div x-data="{ init() {
+                        window.livewire.on('startDownload', link => window.open(link, '_blank'))
+                        } }" x-init="init">
+                        <button wire:click="export" class="flex items-center px-3 text-xs font-medium tracking-wider text-theme-secondary uppercase bg-white border border-theme-secondary space-x-2 rounded-md leading-4 hover:text-theme-muted focus:outline-none"><span>{{ __('Export') }}</span>
+                            <x-icons.excel class="m-2" /></button>
+                        </div>
+                    @endif
+
+                    @if($hideable === 'select')
+                        @include('datatables::hide-column-multiselect')
+                    @endif
+
+                    @foreach ($columnGroups as $name => $group)
+                        <button wire:click="toggleGroup('{{ $name }}')"
+                                class="px-3 py-2 text-xs font-medium tracking-wider text-green-500 uppercase bg-white border border-green-400 rounded-md leading-4 hover:bg-green-200 focus:outline-none">
+                            <span class="flex items-center h-5">{{ isset($this->groupLabels[$name]) ? __($this->groupLabels[$name]) : __('Toggle :group', ['group' => $name]) }}</span>
+                        </button>
+                    @endforeach
+            </div>
+        </div>
+
+        @if($hideable === 'buttons')
+            <div class="p-2 grid grid-cols-8 gap-2">
+                @foreach($this->columns as $index => $column)
+                    @if ($column['hideable'])
+                        <button wire:click="toggle('{{ $index }}')" class="px-3 py-2 rounded text-white text-xs focus:outline-none
+                        {{ $column['hidden'] ? 'bg-blue-100 hover:bg-blue-300 text-black' : 'bg-blue-500 hover:bg-blue-800' }}">
+                            {{ $column['label'] }}
+                        </button>
+                    @endif
+                @endforeach
+            </div>
+        @endif
+
+        <div wire:loading.class="opacity-50" class="rounded-sm @unless($complex || $this->hidePagination) rounded-sm @endunless shadow-sm bg-white max-w-screen overflow-x-scroll @if($this->activeFilters) border-blue-500 @else border-gray-100 border-b-2 rounded-sm @endif @if($complex) @endif">
+            <div>
+                <div class="table min-w-full align-middle">
+                    @unless($this->hideHeader)
+                        <div class="table-row divide-x divide-gray-200 bg-theme-primary">
+                            @foreach($this->columns as $index => $column)
+                                @if($hideable === 'inline')
+                                    @include('datatables::header-inline-hide', ['column' => $column, 'sort' => $sort])
+                                @elseif($column['type'] === 'checkbox')
+                                    @unless($column['hidden'])
+                                        <div class="flex justify-center table-cell w-32 h-12 px-6 py-4 overflow-hidden text-xs font-medium tracking-wider text-left text-theme-primary uppercase align-top border-gray-100 bg-gray-50 leading-4 focus:outline-none">
+                                            <div class="px-3 py-1 rounded @if(count($selected)) bg-orange-400 @else bg-theme-primary text-white @endif text-white text-center">
+                                                {{ count($selected) }}
+                                            </div>
+                                        </div>
+                                    @endunless
+                                @else
+                                    @include('datatables::header-no-hide', ['column' => $column, 'sort' => $sort])
+                                @endif
+                            @endforeach
+                        </div>
+                    @endunless
+                    <div class="table-row bg-blue-100 divide-x divide-blue-200">
+                        @foreach($this->columns as $index => $column)
+                            @if($column['hidden'])
+                                @if($hideable === 'inline')
+                                    <div class="table-cell w-5 overflow-hidden align-top bg-blue-100"></div>
+                                @endif
+                            @elseif($column['type'] === 'checkbox')
+                                @include('datatables::filters.checkbox')
+                            @elseif($column['type'] === 'label')
+                                <div class="table-cell overflow-hidden align-top">
+                                    {{ $column['label'] ?? '' }}
+                                </div>
+                            @else
+                                <div class="table-cell overflow-hidden align-top">
+                                    @isset($column['filterable'])
+                                        @if( is_iterable($column['filterable']) )
+                                            <div wire:key="{{ $index }}">
+                                                @include('datatables::filters.select', ['index' => $index, 'name' => $column['label'], 'options' => $column['filterable']])
+                                            </div>
+                                        @else
+                                            <div wire:key="{{ $index }}">
+                                                @include('datatables::filters.' . ($column['filterView'] ?? $column['type']), ['index' => $index, 'name' => $column['label']])
+                                            </div>
+                                        @endif
+                                    @endisset
+                                    </div>
+                                @endif
+                            @endforeach
+                        </div>
+                    @forelse($this->results as $row)
+                        <div class="table-row p-1 {{ $this->rowClasses($row, $loop) }}">
+                            @foreach($this->columns as $column)
+                                @if($column['hidden'])
+                                    @if($hideable === 'inline')
+                                        <div class="table-cell w-5 overflow-hidden align-top"></div>
+                                    @endif
+                                @elseif($column['type'] === 'checkbox')
+                                    @include('datatables::checkbox', ['value' => $row->checkbox_attribute])
+                                @elseif($column['type'] === 'label')
+                                    @include('datatables::label')
+                                @else
+                                    <div class="table-cell px-6 py-2 whitespace-no-wrap @if($column['align'] === 'right') text-right @elseif($column['align'] === 'center') text-center @else text-left @endif {{ $this->cellClasses($row, $column) }}">
+                                        @if(($column['type'] ?? '') === 'html' || ($column['allow_html'] ?? false))
+                                            {{-- XSS WARNING: HTML rendering allowed for this column. Ensure data is sanitized! --}}
+                                            {!! $row->{$column['name']} !!}
+                                        @else
+                                            {{-- Default: Escape output for XSS protection --}}
+                                            {{ $row->{$column['name']} }}
+                                        @endif
+                                    </div>
+                                @endif
+                            @endforeach
+                        </div>
+                    @empty
+                        <p class="p-3 text-lg text-theme-primary">
+                            {{ __("There's Nothing to show at the moment") }}
+                        </p>
+                    @endforelse
+
+                    @if ($this->hasSummaryRow())
+                        <div class="table-row p-1">
+                            @foreach($this->columns as $column)
+                                @unless($column['hidden'])
+                                    @if ($column['summary'])
+                                        <div class="table-cell px-6 py-2 whitespace-no-wrap @if($column['align'] === 'right') text-right @elseif($column['align'] === 'center') text-center @else text-left @endif {{ $this->cellClasses($row, $column) }}">
+                                            {{ $this->summarize($column['name']) }}
+                                        </div>
+                                    @else
+                                        <div class="table-cell"></div>
+                                    @endif
+                                @endunless
+                            @endforeach
+                        </div>
+                    @endif
+                </div>
+            </div>
+        </div>
+
+        @unless($this->hidePagination)
+            <div class="max-w-screen bg-white @unless($complex) @endunless border-2 @if($this->activeFilters) border-blue-500 @else border-transparent @endif">
+                <div class="items-center justify-between p-2 sm:flex">
+                    {{-- check if there is any data --}}
+                    @if(count($this->results))
+                        <div class="flex items-center my-2 sm:my-0">
+                            <select name="perPage" class="block w-full py-2 pl-3 pr-10 mt-1 text-base border-theme-border form-select leading-6 focus:outline-none focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:border-primary-300 sm:text-sm sm:leading-5" wire:model.live="perPage">
+                                @foreach(config('livewire-datatables.per_page_options', [ 10, 25, 50, 100 ]) as $per_page_option)
+                                    <option value="{{ $per_page_option }}">{{ $per_page_option }}</option>
+                                @endforeach
+                                <option value="99999999">{{__('All')}}</option>
+                            </select>
+                        </div>
+
+                        <div class="my-4 sm:my-0">
+                            <div class="lg:hidden">
+                                <span class="space-x-2">{{ $this->results->links('datatables::tailwind-simple-pagination') }}</span>
+                            </div>
+
+                            <div class="justify-center hidden lg:flex">
+                                <span>{{ $this->results->links('datatables::tailwind-pagination') }}</span>
+                            </div>
+                        </div>
+
+                        <div class="flex justify-end text-theme-secondary">
+                            {{__('Results')}} {{ $this->results->firstItem() }} - {{ $this->results->lastItem() }} {{__('of')}}
+                            {{ $this->results->total() }}
+                        </div>
+                    @endif
+                </div>
+            </div>
+        @endif
+    </div>
+
+    @if($complex)
+        <div class="bg-gray-50 px-4 py-4 rounded-b-lg rounded-t-none shadow-sm border-4 @if($this->activeFilters) border-blue-500 @else border-transparent @endif @if($complex) border-t-0 @endif">
+            <livewire:complex-query :columns="$this->complexColumns" :persistKey="$this->persistKey" :savedQueries="method_exists($this, 'getSavedQueries') ? $this->getSavedQueries() : null" />
+        </div>
+    @endif
+
+    @if($afterTableSlot)
+        <div class="mt-8">
+            @include($afterTableSlot)
+        </div>
+    @endif
+    <span class="hidden text-sm text-left text-center text-right text-theme-primary bg-gray-100 bg-yellow-100 leading-5 bg-gray-50"></span>
+</div>

resources/views/livewire/datatables/delete.blade.php

@@ -0,0 +1,57 @@
+<div x-data="{ open: {{ isset($open) && $open ? 'true' : 'false' }}, working: false }" x-cloak wire:key="delete-{{ $value }}">
+    <span x-on:click="open = true">
+        <button class="p-1 text-red-600 rounded hover:bg-red-600 hover:text-white"><x-icons.trash /></button>
+    </span>
+
+    <div x-show="open"
+        class="fixed z-50 bottom-0 inset-x-0 px-4 pb-4 sm:inset-0 sm:flex sm:items-center sm:justify-center">
+        <div x-show="open" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0"
+            x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200"
+            x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
+            class="fixed inset-0 transition-opacity">
+            <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+        </div>
+
+        <div x-show="open" x-transition:enter="ease-out duration-300"
+            x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+            x-transition:leave="ease-in duration-200"
+            x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+            x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            class="relative bg-gray-100 rounded-lg px-4 pt-5 pb-4 overflow-hidden shadow-xl transform transition-all sm:max-w-lg sm:w-full sm:p-6">
+            <div class="hidden sm:block absolute top-0 right-0 pt-4 pr-4">
+                <button @click="open = false" type="button"
+                    class="text-theme-muted hover:text-theme-muted focus:outline-none focus:text-theme-muted transition ease-in-out duration-150">
+                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+            <div class="w-full">
+                <div class="mt-3 text-center">
+                    <h3 class="text-lg leading-6 font-medium text-theme-primary">
+                        {{ __('Delete') }} {{ $value }}
+                    </h3>
+                    <div class="mt-2">
+                        <div class="mt-10 text-theme-primary">
+                            {{ __('Are you sure?')}}
+                        </div>
+                        <div class="mt-10 flex justify-center">
+                            <span class="mr-2">
+                                <button x-on:click="open = false" x-bind:disabled="working" class="w-32 shadow-sm inline-flex justify-center items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-theme-secondary hover:bg-theme-primary focus:outline-none focus:border-theme-primary focus:shadow-outline-teal active:bg-theme-primary transition ease-in-out duration-150">
+                                    {{ __('No')}}
+                                </button>
+                            </span>
+                            <span x-on:click="working = !working">
+                                <button wire:click="delete({{ $value }})" class="w-32 shadow-sm inline-flex justify-center items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:border-red-700 focus:shadow-outline-teal active:bg-red-700 transition ease-in-out duration-150">
+                                    {{ __('Yes')}}
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

resources/views/livewire/datatables/editable.blade.php

@@ -0,0 +1,22 @@
+<div x-data="{
+    edit: false,
+    edited: false,
+    init() {
+        window.livewire.on('fieldEdited', (id) => {
+            if (id === '{{ $rowId }}') {
+                this.edited = true
+                setTimeout(() => {
+                    this.edited = false
+                }, 5000)
+            }
+        })
+    }
+}" x-init="init()" :key="{{ $rowId }}">
+    <button class="min-h-[28px] w-full text-left hover:bg-blue-100 px-2 py-1 -mx-2 -my-1 rounded focus:outline-none" x-bind:class="{ 'text-green-600': edited }" x-show="!edit"
+        x-on:click="edit = true; $nextTick(() => { $refs.input.focus() })">{!! htmlspecialchars($value) !!}</button>
+    <span x-cloak x-show="edit">
+        <input class="border-blue-400 px-2 py-1 -mx-2 -my-1 rounded focus:outline-none focus:border" x-ref="input" value="{!! htmlspecialchars($value) !!}"
+            wire:change="edited($event.target.value, '{{ $key }}', '{{ $column }}', '{{ $rowId }}')"
+            x-on:click.away="edit = false" x-on:blur="edit = false" x-on:keydown.enter="edit = false" />
+    </span>
+</div>

resources/views/livewire/datatables/filters/boolean.blade.php

@@ -0,0 +1,31 @@
+<div x-data class="flex flex-col">
+    <select
+        x-ref="select"
+        name="{{ $name }}"
+        class="m-1 text-sm leading-4 block rounded-md border-theme-border shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
+        wire:input="doBooleanFilter('{{ $index }}', $event.target.value)"
+        x-on:input="$refs.select.value=''"
+    >
+        <option value=""></option>
+        <option value="0">{{ __('No') }}</option>
+        <option value="1">{{ __('Yes') }}</option>
+    </select>
+
+    <div class="flex flex-wrap max-w-48 space-x-1">
+        @isset($this->activeBooleanFilters[$index])
+        @if($this->activeBooleanFilters[$index] == 1)
+        <button wire:click="removeBooleanFilter('{{ $index }}')"
+            class="m-1 pl-1 flex items-center uppercase tracking-wide bg-gray-300 text-white hover:bg-red-600 rounded-full focus:outline-none text-xs space-x-1">
+            <span>{{ __('YES') }}</span>
+            <x-icons.x-circle />
+        </button>
+        @elseif(strlen($this->activeBooleanFilters[$index]) > 0)
+        <button wire:click="removeBooleanFilter('{{ $index }}')"
+            class="m-1 pl-1 flex items-center uppercase tracking-wide bg-gray-300 text-white hover:bg-red-600 rounded-full focus:outline-none text-xs space-x-1">
+            <span>{{ __('No') }}</span>
+            <x-icons.x-circle />
+        </button>
+        @endif
+        @endisset
+    </div>
+</div>

resources/views/livewire/datatables/filters/checkbox.blade.php

@@ -0,0 +1,13 @@
+<div
+    @if (isset($column['tooltip']['text'])) title="{{ $column['tooltip']['text'] }}" @endif
+    class="flex flex-col items-center h-full px-6 py-5 overflow-hidden text-xs font-medium tracking-wider text-left text-theme-muted uppercase align-top bg-blue-100 border-b border-theme-border leading-4 space-y-2 focus:outline-none">
+    <div>{{ __('SELECT ALL') }}</div>
+    <div>
+        <input
+        type="checkbox"
+        wire:click="toggleSelectAll"
+        class="w-4 h-4 mt-1 text-black form-checkbox transition duration-150 ease-in-out"
+        @if(count($selected) === $this->results->total()) checked @endif
+        />
+    </div>
+</div>

resources/views/livewire/datatables/filters/date.blade.php

@@ -0,0 +1,20 @@
+<div x-data class="flex flex-col">
+    <div class="w-full relative flex">
+        <input x-ref="start" class="w-full pr-8 m-1 text-sm leading-4 block rounded-md border-theme-border shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" type="date"
+            wire:change="doDateFilterStart('{{ $index }}', $event.target.value)" style="padding-bottom: 5px" />
+        <div class="absolute inset-y-0 right-0 pr-2 flex items-center">
+            <button x-on:click="$refs.start.value=''" wire:click="doDateFilterStart('{{ $index }}', '')" class="-mb-0.5 pr-1 flex text-theme-muted hover:text-red-600 focus:outline-none" tabindex="-1">
+                <x-icons.x-circle class="h-5 w-5 stroke-current" />
+            </button>
+        </div>
+    </div>
+    <div class="w-full relative flex items-center">
+        <input x-ref="end" class="w-full pr-8 m-1 text-sm leading-4 block rounded-md border-theme-border shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" type="date"
+            wire:change="doDateFilterEnd('{{ $index }}', $event.target.value)" style="padding-bottom: 5px" />
+        <div class="absolute inset-y-0 right-0 pr-2 flex items-center">
+            <button x-on:click="$refs.end.value=''" wire:click="doDateFilterEnd('{{ $index }}', '')" class="-mb-0.5 pr-1 flex text-theme-muted hover:text-red-600 focus:outline-none" tabindex="-1">
+                <x-icons.x-circle class="h-5 w-5 stroke-current" />
+            </button>
+        </div>
+    </div>
+</div>

resources/views/livewire/datatables/filters/editable.blade.php

@@ -0,0 +1,17 @@
+<div x-data class="flex flex-col">
+    <input
+        x-ref="input"
+        type="text"
+        class="pr-8 m-1 text-sm leading-4 block rounded-md border-theme-border shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
+        wire:change="doTextFilter('{{ $index }}', $event.target.value)"
+        x-on:change="$refs.input.value = ''"
+    />
+    <div class="flex flex-wrap max-w-48 space-x-1">
+        @foreach($this->activeTextFilters[$index] ?? [] as $key => $value)
+        <button wire:click="removeTextFilter('{{ $index }}', '{{ $key }}')" class="m-1 pl-1 flex items-center uppercase tracking-wide bg-gray-300 text-white hover:bg-red-600 rounded-full focus:outline-none text-xs space-x-1">
+            <span>{{ $this->getDisplayValue($index, $value) }}</span>
+            <x-icons.x-circle  class="h-5 w-5 stroke-current text-red-500"  />
+        </button>
+        @endforeach
+    </div>
+</div>

resources/views/livewire/datatables/filters/number.blade.php

@@ -0,0 +1,31 @@
+<div class="flex flex-col">
+    <div x-data class="relative flex">
+        <input
+            x-ref="min"
+            type="number"
+            wire:input.debounce.500ms="doNumberFilterStart('{{ $index }}', $event.target.value)"
+            class="w-full pr-8 m-1 text-sm leading-4 block rounded-md border-theme-border shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
+            placeholder="{{ __('MIN') }}"
+        />
+        <div class="absolute inset-y-0 right-0 pr-2 flex items-center">
+            <button x-on:click="$refs.min.value=''" wire:click="doNumberFilterStart('{{ $index }}', '')" class="-mb-0.5 pr-1 flex text-theme-muted hover:text-red-600 focus:outline-none" tabindex="-1">
+                <x-icons.x-circle class="h-5 w-5 stroke-current" />
+            </button>
+        </div>
+    </div>
+
+    <div x-data class="relative flex">
+        <input
+            x-ref="max"
+            type="number"
+            wire:input.debounce.500ms="doNumberFilterEnd('{{ $index }}', $event.target.value)"
+            class="w-full pr-8 m-1 text-sm leading-4 block rounded-md border-theme-border shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
+            placeholder="{{ __('MAX') }}"
+        />
+        <div class="absolute inset-y-0 right-0 pr-2 flex items-center">
+            <button x-on:click="$refs.max.value=''" wire:click="doNumberFilterEnd('{{ $index }}', '')" class="-mb-0.5 pr-1 flex text-theme-muted hover:text-red-600 focus:outline-none" tabindex="-1">
+                <x-icons.x-circle class="h-5 w-5 stroke-current" />
+            </button>
+        </div>
+    </div>
+</div>

resources/views/livewire/datatables/filters/select.blade.php

@@ -0,0 +1,34 @@
+<div x-data class="flex flex-col">
+    <div class="flex">
+        <select
+            x-ref="select"
+            name="{{ $name }}"
+            class="w-full m-1 text-sm leading-4 block rounded-md border-theme-border shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
+            wire:input="doSelectFilter('{{ $index }}', $event.target.value)"
+            x-on:input="$refs.select.value=''"
+        >
+            <option value=""></option>
+            @foreach($options as $value => $label)
+                @if(is_object($label))
+                    <option value="{{ $label->id }}">{{ $label->name }}</option>
+                @elseif(is_array($label))
+                    <option value="{{ $label['id'] }}">{{ $label['name'] }}</option>
+                @elseif(is_numeric($value))
+                    <option value="{{ $label }}">{{ $label }}</option>
+                @else
+                    <option value="{{ $value }}">{{ $label }}</option>
+                @endif
+            @endforeach
+        </select>
+    </div>
+
+    <div class="flex flex-wrap max-w-48 space-x-1">
+        @foreach($this->activeSelectFilters[$index] ?? [] as $key => $value)
+        <button wire:click="removeSelectFilter('{{ $index }}', '{{ $key }}')" x-on:click="$refs.select.value=''"
+            class="m-1 pl-1 flex items-center uppercase tracking-wide bg-gray-300 text-white hover:bg-red-600 rounded-full focus:outline-none text-xs space-x-1">
+            <span>{{ $this->getDisplayValue($index, $value) }}</span>
+            <x-icons.x-circle />
+        </button>
+        @endforeach
+    </div>
+</div>

resources/views/livewire/datatables/filters/string.blade.php

@@ -0,0 +1,17 @@
+<div x-data class="flex flex-col">
+    <input
+        x-ref="input"
+        type="text"
+        class="m-1 text-sm leading-4 block rounded-md border-theme-border shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
+        wire:change="doTextFilter('{{ $index }}', $event.target.value)"
+        x-on:change="$refs.input.value = ''"
+    />
+    <div class="flex flex-wrap max-w-48 space-x-1">
+        @foreach($this->activeTextFilters[$index] ?? [] as $key => $value)
+        <button wire:click="removeTextFilter('{{ $index }}', '{{ $key }}')" class="m-1 pl-1 flex items-center uppercase tracking-wide bg-gray-300 text-white hover:bg-red-600 rounded-full focus:outline-none text-xs space-x-1">
+            <span>{{ $this->getDisplayValue($index, $value) }}</span>
+            <x-icons.x-circle />
+        </button>
+        @endforeach
+    </div>
+</div>

resources/views/livewire/datatables/filters/time.blade.php

@@ -0,0 +1,20 @@
+<div x-data class="flex flex-col">
+    <div class="w-full relative flex">
+        <input x-ref="start" class="w-full pr-8 m-1 text-sm leading-4 block rounded-md border-theme-border shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" type="time"
+            wire:change="doTimeFilterStart('{{ $index }}', $event.target.value)" style="padding-bottom: 5px" />
+        <div class="absolute inset-y-0 right-0 pr-2 flex items-center">
+            <button x-on:click="$refs.start.value=''" wire:click="doTimeFilterStart('{{ $index }}', '')" class="-mb-0.5 pr-1 flex text-theme-muted hover:text-red-600 focus:outline-none" tabindex="-1">
+                <x-icons.x-circle class="h-5 w-5 stroke-current" />
+            </button>
+        </div>
+    </div>
+    <div class="w-full relative flex">
+        <input x-ref="end" class="w-full pr-8 m-1 text-sm leading-4 block rounded-md border-theme-border shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" type="time"
+            wire:change="doTimeFilterEnd('{{ $index }}', $event.target.value)" style="padding-bottom: 5px" />
+       <div class="absolute inset-y-0 right-0 pr-2 flex items-center">
+            <button x-on:click="$refs.end.value=''" wire:click="doTimeFilterEnd('{{ $index }}', '')" class="-mb-0.5 pr-1 flex text-theme-muted hover:text-red-600 focus:outline-none" tabindex="-1">
+                <x-icons.x-circle class="h-5 w-5 stroke-current" />
+            </button>
+        </div>
+    </div>
+</div>

resources/views/livewire/datatables/header-inline-hide.blade.php

@@ -0,0 +1,48 @@
+<div wire:click="toggle('{{ $index }}')"
+    class="@if($column['hidden']) relative table-cell h-12 w-3 bg-blue-100 hover:bg-blue-300 overflow-none align-top group @else hidden @endif"
+    style="min-width:12px; max-width:12px"
+>
+    <button class="relative h-12 w-3 focus:outline-none">
+        <span
+            class="w-32 hidden group-hover:inline-block absolute z-10 top-0 left-0 ml-3 bg-blue-300 font-medium leading-4 text-xs text-left text-blue-700 tracking-wider transform uppercase focus:outline-none">
+            {{ str_replace('_', ' ', $column['label']) }}
+        </span>
+    </button>
+    <svg class="absolute text-blue-100 fill-current w-full inset-x-0 bottom-0"
+        viewBox="0 0 314.16 207.25">
+        <path stroke-miterlimit="10" d="M313.66 206.75H.5V1.49l157.65 204.9L313.66 1.49v205.26z" />
+    </svg>
+</div>
+<div class="@if($column['hidden']) hidden @else relative h-12 overflow-hidden align-top flex table-cell @endif" @include('datatables::style-width')>
+
+    @if($column['unsortable'])
+        <div class="w-full h-full px-6 py-3 border-b border-theme-border bg-gray-50 text-xs leading-4 font-medium text-theme-muted uppercase tracking-wider flex justify-between items-center focus:outline-none">
+            <span class="inline flex-grow @if($column['align'] === 'right') text-right @elseif($column['align'] === 'center') text-center @endif"">{{ str_replace('_', ' ', $column['label']) }}</span>
+        </div>
+    @else
+        <button wire:click="sort('{{ $index }}')"
+            class="w-full h-full px-6 py-3 border-b border-theme-border bg-gray-50 text-xs leading-4 font-medium text-theme-muted uppercase tracking-wider flex justify-between items-center focus:outline-none">
+            <span class="inline flex-grow @if($column['align'] === 'right') text-right @elseif($column['align'] === 'center') text-center @endif"">{{ str_replace('_', ' ', $column['label']) }}</span>
+            <span class="inline text-xs text-blue-400">
+                @if($sort === $index)
+                @if($direction)
+                <x-icons.chevron-up class="h-6 w-6 text-theme-primary hover:text-theme-secondary stroke-current pl-2" />
+
+
+                @else
+                <x-icons.chevron-down class="h-6 w-6 text-theme-primary hover:text-theme-secondary stroke-current pl-2" />
+
+
+                @endif
+                @endif
+            </span>
+        </button>
+    @endif
+
+    @if ($column['hideable'])
+        <button wire:click="toggle('{{ $index }}')"
+            class="absolute bottom-1 right-1 focus:outline-none">
+            <x-icons.arrow-circle-left class="h-3 w-3 text-theme-muted hover:text-blue-400" />
+        </button>
+    @endif
+</div>

resources/views/livewire/datatables/header-no-hide.blade.php

@@ -0,0 +1,26 @@
+@unless($column['hidden'])
+    <div
+        @if (isset($column['tooltip']['text'])) title="{{ $column['tooltip']['text'] }}" @endif
+        class="relative table-cell h-12 overflow-hidden align-top" @include('datatables::style-width')>
+    @if($column['unsortable'])
+        <div class="w-full h-full px-6 py-3 border-b border-theme-border bg-gray-50 text-left text-xs leading-4 font-medium text-theme-muted uppercase tracking-wider flex items-center focus:outline-none @if($column['align'] === 'right') justify-end @elseif($column['align'] === 'center') justify-center @endif">
+            <span class="inline ">{{ str_replace('_', ' ', $column['label']) }}</span>
+        </div>
+    @else
+        <button wire:click="sort('{{ $index }}')" class="w-full h-full px-6 py-3 border-b border-theme-border bg-gray-50 text-left text-xs leading-4 font-medium text-theme-muted uppercase tracking-wider flex items-center focus:outline-none @if($column['align'] === 'right') justify-end @elseif($column['align'] === 'center') justify-center @endif">
+            <span class="inline ">{{ str_replace('_', ' ', $column['label']) }}</span>
+            <span class="inline text-xs text-blue-400">
+                @if($sort === $index)
+                    @if($direction)
+                        <x-icons.chevron-up wire:loading.remove class="w-6 h-6 text-theme-primary hover:text-theme-secondary stroke-current pl-2" />
+                    @else
+                        <x-icons.chevron-down wire:loading.remove class="w-6 h-6 text-theme-primary hover:text-theme-secondary stroke-current pl-2" />
+
+
+                    @endif
+                @endif
+            </span>
+        </button>
+    @endif
+</div>
+@endif

resources/views/livewire/datatables/hide-column-multiselect.blade.php

@@ -0,0 +1,52 @@
+<div x-data="{ show: false }" class="flex flex-col items-center">
+    <div class="flex flex-col items-center relative">
+        <button x-on:click="show = !show" class="px-3 py-2 border border-blue-400 rounded-md bg-white text-blue-500 text-xs leading-4 font-medium uppercase tracking-wider hover:bg-blue-200 focus:outline-none">
+            <div class="flex items-center h-5">
+                {{ __('Show / Hide Columns')}}
+            </div>
+        </button>
+        <div x-show="show" x-on:click.away="show = false" class="z-50 absolute mt-16 -mr-4 shadow-2xl top-100 bg-white w-96 right-0 rounded max-h-select overflow-y-auto" x-cloak>
+            <div class="flex flex-col w-full">
+                @foreach($this->columns as $index => $column)
+                <div>
+                    <div class="@unless($column['hidden']) hidden @endif cursor-pointer w-full border-theme-secondary border-b bg-theme-primary text-theme-muted hover:bg-blue-600 hover:text-white" wire:click="toggle({{$index}})">
+                        <div class="relative flex w-full items-center p-2 group">
+                            <div class=" w-full items-center flex">
+                                <div class="mx-2 leading-6">{{ $column['label'] }}</div>
+                            </div>
+                            <div class="absolute inset-y-0 right-0 pr-2 flex items-center">
+                                <x-icons.check-circle class="h-3 w-3 stroke-current text-theme-primary" />
+                            </div>
+                        </div>
+                    </div>
+                    <div class="@if($column['hidden']) hidden @endif cursor-pointer w-full border-theme-secondary border-b bg-theme-primary text-white hover:bg-red-600" wire:click="toggle({{$index}})">
+                        <div class="relative flex w-full items-center p-2 group">
+                            <div class=" w-full items-center flex">
+                                <div class="mx-2 leading-6">{{ $column['label'] }}</div>
+                            </div>
+                            <div class="absolute inset-y-0 right-0 pr-2 flex items-center">
+                                <x-icons.x-circle class="h-3 w-3 stroke-current text-theme-primary" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                @endforeach
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    .top-100 {
+        top: 100%
+    }
+
+    .bottom-100 {
+        bottom: 100%
+    }
+
+    .max-h-select {
+        max-height: 300px;
+    }
+
+</style>

resources/views/livewire/datatables/highlight.blade.php

@@ -0,0 +1 @@
+<span class="bg-yellow-100">{{ $slot }}</span>

resources/views/livewire/datatables/icons/arrow-circle-left.blade.php

@@ -0,0 +1,5 @@
+<svg {{ $attributes->merge(['class' => 'h-5 w-5 stroke-current']) }} fill="none" viewBox="0 0 24 24"
+    stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+        d="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z" />
+</svg>

resources/views/livewire/datatables/icons/arrow-left.blade.php

@@ -0,0 +1,3 @@
+<svg {{ $attributes->merge(['class' => 'h-5 w-5 stroke-current']) }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+</svg>

resources/views/livewire/datatables/icons/arrow-right.blade.php

@@ -0,0 +1,3 @@
+<svg {{ $attributes->merge(['class' => 'h-5 w-5 stroke-current']) }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+</svg>

resources/views/livewire/datatables/icons/check-circle.blade.php

@@ -0,0 +1,3 @@
+<svg {{ $attributes->merge(['class' => 'h-5 w-5 stroke-current']) }} 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>

resources/views/livewire/datatables/icons/chevron-down.blade.php

@@ -0,0 +1,3 @@
+<svg {{ $attributes->merge(['class' => 'h-5 w-5 stroke-current']) }} 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>

resources/views/livewire/datatables/icons/chevron-up.blade.php

@@ -0,0 +1,3 @@
+<svg {{ $attributes->merge(['class' => 'h-5 w-5 stroke-current']) }} 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>

resources/views/livewire/datatables/icons/cog.blade.php

@@ -0,0 +1,4 @@
+<svg {{ $attributes->merge(['class' => 'h-5 w-5 stroke-current']) }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+</svg>

resources/views/livewire/datatables/icons/copy.blade.php

@@ -0,0 +1,3 @@
+<svg {{ $attributes->merge(['class' => 'h-5 w-5']) }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"/>
+</svg>

resources/views/livewire/datatables/icons/excel.blade.php

@@ -0,0 +1 @@
+<svg {{ $attributes->merge(['class' => 'h-5 w-5 stroke-current']) }} fill="none" viewBox="0 0 384 512"><path fill="currentColor" d="M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48zm212-240h-28.8c-4.4 0-8.4 2.4-10.5 6.3-18 33.1-22.2 42.4-28.6 57.7-13.9-29.1-6.9-17.3-28.6-57.7-2.1-3.9-6.2-6.3-10.6-6.3H124c-9.3 0-15 10-10.4 18l46.3 78-46.3 78c-4.7 8 1.1 18 10.4 18h28.9c4.4 0 8.4-2.4 10.5-6.3 21.7-40 23-45 28.6-57.7 14.9 30.2 5.9 15.9 28.6 57.7 2.1 3.9 6.2 6.3 10.6 6.3H260c9.3 0 15-10 10.4-18L224 320c.7-1.1 30.3-50.5 46.3-78 4.7-8-1.1-18-10.3-18z"/></svg>

resources/views/livewire/datatables/icons/trash.blade.php

@@ -0,0 +1,3 @@
+<svg {{ $attributes->merge(['class' => 'h-5 w-5']) }} fill="none" stroke="currentColor">
+    <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path>
+</svg>

resources/views/livewire/datatables/icons/x-circle.blade.php

@@ -0,0 +1,3 @@
+<svg {{ $attributes->merge(['class' => 'h-5 w-5 stroke-current']) }} 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>

resources/views/livewire/datatables/label.blade.php

@@ -0,0 +1,3 @@
+<div class="table-cell px-6 py-2 whitespace-no-wrap @if($column['align'] === 'right') text-right @elseif($column['align'] === 'center') text-center @else text-left @endif {{ $this->cellClasses($row, $column) }}">
+    {!! $column['content'] ?? '' !!}
+</div>

resources/views/livewire/datatables/link.blade.php

@@ -0,0 +1 @@
+<a href="{{ $href }}" class="border-2 border-transparent hover:border-blue-500 hover:bg-blue-100 hover:shadow-lg text-black rounded-lg px-3 py-1">{{ $slot }}</a>

resources/views/livewire/datatables/style-width.blade.php

@@ -0,0 +1,3 @@
+@if (isset($column['width']))style="width:{{ $column['width'] }};"@endif
+@if (isset($column['minWidth']))style="min-width:{{ $column['minWidth'] }};"@endif
+@if (isset($column['maxWidth']))style="max-width:{{ $column['maxWidth'] }};"@endif

resources/views/livewire/datatables/tailwind-pagination.blade.php

@@ -0,0 +1,50 @@
+<div class="flex overflow-hidden border border-theme-border divide-x divide-gray-300 rounded pagination">
+    <!-- Previous Page Link -->
+    @if ($paginator->onFirstPage())
+    <button class="relative inline-flex items-center px-2 py-2 text-sm font-medium leading-5 text-theme-muted bg-white"
+        disabled>
+        <span>&laquo;</span>
+    </button>
+    @else
+    <button wire:click="previousPage"
+        id="pagination-desktop-page-previous"
+        class="relative inline-flex items-center px-2 py-2 text-sm font-medium leading-5 text-theme-muted transition duration-150 ease-in-out bg-white hover:text-theme-muted focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-theme-muted">
+        <span>&laquo;</span>
+    </button>
+    @endif
+
+    <div class="divide-x divide-gray-300">
+        @foreach ($elements as $element)
+        @if (is_string($element))
+        <button class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium leading-5 text-theme-primary bg-white" disabled>
+            <span>{{ $element }}</span>
+        </button>
+        @endif
+
+        <!-- Array Of Links -->
+
+        @if (is_array($element))
+        @foreach ($element as $page => $url)
+        <button wire:click="gotoPage({{ $page }})"
+                id="pagination-desktop-page-{{ $page }}"
+                class="-mx-1 relative inline-flex items-center px-4 py-2 text-sm leading-5 font-medium text-theme-primary hover:text-theme-muted focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-theme-primary transition ease-in-out duration-150 {{ $page === $paginator->currentPage() ? 'bg-gray-100' : 'bg-white' }}">
+            {{ $page }}
+            </button>
+        @endforeach
+        @endif
+        @endforeach
+    </div>
+
+    <!-- Next Page Link -->
+    @if ($paginator->hasMorePages())
+    <button wire:click="nextPage"
+        id="pagination-desktop-page-next"
+        class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium leading-5 text-theme-muted transition duration-150 ease-in-out bg-red hover:text-theme-muted focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-theme-muted">
+        <span>&raquo;</span>
+    </button>
+    @else
+    <button
+        class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium leading-5 text-theme-muted bg-white "
+        disabled><span>&raquo;</span></button>
+    @endif
+</div>

resources/views/livewire/datatables/tailwind-simple-pagination.blade.php

@@ -0,0 +1,28 @@
+<div class="flex justify-between">
+<!-- Previous Page Link -->
+@if ($paginator->onFirstPage())
+<div class="w-32 flex justify-between items-center relative px-4 py-2 border border-theme-border text-sm leading-5 font-medium rounded-md text-theme-muted bg-gray-50">
+    <x-icons.arrow-left />
+    {{ __('Previous')}}
+</div>
+@else
+<button wire:click="previousPage" id="pagination-mobile-page-previous" class="w-32 flex justify-between items-center relative px-4 py-2 border border-theme-border text-sm leading-5 font-medium rounded-md text-theme-primary bg-white hover:text-theme-muted focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-theme-primary transition ease-in-out duration-150">
+    <x-icons.arrow-left />
+    {{ __('Previous')}}
+</button>
+@endif
+
+
+<!-- Next Page pnk -->
+@if ($paginator->hasMorePages())
+<button wire:click="nextPage" id="pagination-mobile-page-next" class="w-32 flex justify-between items-center relative items-center px-4 py-2 border border-theme-border text-sm leading-5 font-medium rounded-md text-theme-primary bg-white hover:text-theme-muted focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-theme-primary transition ease-in-out duration-150">
+    {{ __('Next')}}
+    <x-icons.arrow-right />
+</button>
+@else
+<div class="w-32 flex justify-between items-center relative px-4 py-2 border border-theme-border text-sm leading-5 font-medium rounded-md text-theme-muted bg-gray-50">
+    {{ __('Next')}}
+    <x-icons.arrow-right class="inline" />
+</div>
+@endif
+</div>

resources/views/livewire/datatables/tooltip.blade.php

@@ -0,0 +1,4 @@
+<span class="relative group cursor-pointer">
+    <span class="flex items-center">{{ Str::limit($slot, $length) }}</span>
+    <span class="hidden group-hover:block absolute z-10 -ml-28 w-96 mt-2 p-2 text-xs whitespace-pre-wrap rounded-lg bg-gray-100 border border-theme-border shadow-xl text-theme-primary text-left">{{ $slot }}</span>
+</span>