Tailwind drag and drop

Author: rappasoft

resources/views/tailwind/components/table/heading.blade.php

@@ -1,5 +1,6 @@
 @props([
     'column',
+    'sortingEnabled' => true,
     'sortable' => null,
     'direction' => null,
     'text' => null,
@@ -8,7 +9,7 @@
 <th
     {{ $attributes->merge(['class' => 'px-3 py-2 md:px-6 md:py-3 bg-gray-50'])->only('class') }}
 >
-    @unless ($sortable)
+    @unless ($sortingEnabled && $sortable)
         <span class="block text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
             {{ $text ?? $slot }}
         </span>

resources/views/tailwind/components/table/table.blade.php

@@ -1,12 +1,12 @@
 <div class="align-middle min-w-full overflow-x-auto shadow overflow-hidden rounded-none md:rounded-lg">
-    <table class="min-w-full divide-y divide-gray-200">
+    <table {{ $attributes->except('wire:sortable') }} class="min-w-full divide-y divide-gray-200">
         <thead>
             <tr>
                 {{ $head }}
             </tr>
         </thead>
 
-        <tbody class="bg-white divide-y divide-gray-200">
+        <tbody {{ $attributes->only('wire:sortable') }} class="bg-white divide-y divide-gray-200">
             {{ $body }}
         </tbody>
     </table>

resources/views/tailwind/includes/bulk-select-row.blade.php

@@ -1,6 +1,6 @@
 @if (count($bulkActions) && (($selectPage && $rows->total() > $rows->count()) || count($selected)))
     <x-livewire-tables::table.row wire:key="row-message" class="bg-indigo-50">
-        <x-livewire-tables::table.cell :colspan="count($bulkActions) ? count($columns) + 1 : count($columns)">
+        <x-livewire-tables::table.cell :colspan="$colspan">
             @if (count($selected) && !$selectAll && !$selectPage)
                 <div>
                     <span>

resources/views/tailwind/includes/filters.blade.php

@@ -1,4 +1,4 @@
-@if ($showFilterDropdown && ($filtersView || count($customFilters)))
+@if ($filtersEnabled && $showFilterDropdown && ($filtersView || count($customFilters)))
     <div
         x-data="{ open: false }"
         @keydown.escape.stop="open = false"

resources/views/tailwind/includes/table.blade.php

@@ -1,5 +1,9 @@
-<x-livewire-tables::table>
+<x-livewire-tables::table wire:sortable="{{ $reorderRows }}">
     <x-slot name="head">
+        @if (is_string($reorderRows))
+            <x-livewire-tables::table.heading />
+        @endif
+
         @if (count($bulkActions))
             <x-livewire-tables::table.heading>
                 <div class="inline-flex rounded-md shadow-sm">
@@ -20,6 +24,7 @@ class="rounded-md shadow-sm border-gray-300 block transition duration-150 ease-i
                     <x-livewire-tables::table.heading />
                 @else
                     <x-livewire-tables::table.heading
+                        :sortingEnabled="$sortingEnabled"
                         :sortable="$column->isSortable()"
                         :column="$column->column()"
                         :direction="$column->column() ? $sorts[$column->column()] ?? null : null"
@@ -32,12 +37,19 @@ class="rounded-md shadow-sm border-gray-300 block transition duration-150 ease-i
     </x-slot>
 
     <x-slot name="body">
+        @php
+            $colspan = count($columns);
+            if (count($bulkActions)) $colspan++;
+            if (is_string($reorderRows)) $colspan++;
+        @endphp
+
         @include('livewire-tables::tailwind.includes.bulk-select-row')
 
         @forelse ($rows as $index => $row)
             <x-livewire-tables::table.row
                 wire:loading.class.delay="opacity-50"
-                wire:key="table-row-{{ $row->getKey() }}"
+                wire:key="table-row-{{ $row->{$primaryKey} }}"
+                wire:sortable.item="{{ $row->{$primaryKey} }}"
                 :url="method_exists($this, 'getTableRowUrl') ? $this->getTableRowUrl($row) : ''"
                 :class="
                     ($index % 2 === 0 ?
@@ -49,6 +61,14 @@ class="rounded-md shadow-sm border-gray-300 block transition duration-150 ease-i
                 :id="method_exists($this, 'setTableRowId') ? $this->setTableRowId($row) : ''"
                 :customAttributes="method_exists($this, 'setTableRowAttributes') ? $this->setTableRowAttributes($row) : []"
             >
+                @if (is_string($reorderRows))
+                    <x-livewire-tables::table.cell wire:sortable.handle>
+                        <svg xmlns="http://www.w3.org/2000/svg" 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.cell>
+                @endif
+
                 @if (count($bulkActions))
                     <x-livewire-tables::table.cell>
                         <div class="inline-flex rounded-md shadow-sm">