Update columns-details.blade.php

Author: devawebdeveloper

src/views/livewire/columns-details.blade.php

@@ -1,35 +1,42 @@
 <div>
-    <div class="" wire:loading>
-        <x-btui-loader loading="true" />
-    </div>
     @php
         $checkbox = 'border rounded border-gray-400';
     @endphp
-    <div class="flex items-center justify-start px-2 divide-x">
-        <div class="flex items-center justify-start gap-1 pr-2">
-            <label for="search-label-{{ $col }}" class="pr-2">Label</label>
-            <x-btui-input id="search-lebel-{{ $col }}" size="sm" wire:model='detailCols.{{ $col }}.label' />
-        </div>
-        <div class="flex items-center justify-start gap-1 px-2">
-            <input id="search-check-{{ $col }}" wire:model='detailCols.{{ $col }}.searchable' type="checkbox" class="{{ $checkbox }}">
-            <label for="search-check-{{ $col }}" class="pt-1">Searchable</label>
-        </div>
-        <div class="flex items-center justify-start gap-1 px-2">
-            <input id="sort-check-{{ $col }}" wire:model='detailCols.{{ $col }}.sortable' type="checkbox" class="{{ $checkbox }}">
-            <label for="sort-check-{{ $col }}" class="pt-1">Sortable</label>
-        </div>
-        <div class="flex items-center justify-start gap-1 px-2">
-            <input id="edit-check-{{ $col }}" wire:model='detailCols.{{ $col }}.editable' type="checkbox" class="{{ $checkbox }}">
-            <label for="edit-check-{{ $col }}" class="pt-1">Editable</label>
+    <div class="py-1 flex justify-between justify-items-center border">
+        <div class="flex items-center justify-start px-2 divide-x">
+            <div class="flex items-center justify-start gap-1 pr-2">
+                <label for="search-label-{{ $col }}" class="pr-2">Label</label>
+                <x-btui-input id="search-lebel-{{ $col }}" size="sm" wire:model='detailCols.{{ $col }}.label' />
+            </div>
+            <div class="flex items-center justify-start gap-1 px-2">
+                <input id="search-check-{{ $col }}" wire:model='detailCols.{{ $col }}.searchable' type="checkbox" class="{{ $checkbox }}">
+                <label for="search-check-{{ $col }}" class="pt-1">Searchable</label>
+            </div>
+            <div class="flex items-center justify-start gap-1 px-2">
+                <input id="sort-check-{{ $col }}" wire:model='detailCols.{{ $col }}.sortable' type="checkbox" class="{{ $checkbox }}">
+                <label for="sort-check-{{ $col }}" class="pt-1">Sortable</label>
+            </div>
+            <div class="flex items-center justify-start gap-1 px-2">
+                <input id="edit-check-{{ $col }}" wire:model='detailCols.{{ $col }}.editable' type="checkbox" class="{{ $checkbox }}">
+                <label for="edit-check-{{ $col }}" class="pt-1">Editable</label>
+            </div>
+
+            <div class="flex items-center justify-start gap-1 px-2">
+                <input id="filter-check-{{ $col }}" wire:model='detailCols.{{ $col }}.filterable' type="checkbox" class="{{ $checkbox }}">
+                <label for="filter-check-{{ $col }}" class="pt-1">Filterable</label>
+            </div>
+
         </div>
 
-        <div class="flex items-center justify-start gap-1 px-2">
-            <input id="filter-check-{{ $col }}" wire:model='detailCols.{{ $col }}.filterable' type="checkbox" class="{{ $checkbox }}">
-            <label for="filter-check-{{ $col }}" class="pt-1">Filterable</label>
+        <div class="relative">
+            <div class=" absolute right-0 -top-6 " wire:loading>
+                <x-btui-sloader />
+            </div>
         </div>
 
     </div>
 
+
     <div class="flex w-full gap-2 my-2 text-sm">
 
         @if($detailCols[$col]['editable'])