BS5 drag and drop

Author: rappasoft

resources/views/bootstrap-5/components/table/heading.blade.php

@@ -1,11 +1,12 @@
 @props([
     'column',
+    'sortingEnabled' => true,
     'sortable' => null,
     'direction' => null,
     'text' => null,
 ])
 
-@unless ($sortable)
+@unless ($sortingEnabled && $sortable)
     <th {{ $attributes->only('class') }}>
         {{ $text ?? $slot }}
     </th>

resources/views/bootstrap-5/components/table/table.blade.php

@@ -1,12 +1,12 @@
 <div class="table-responsive">
-    <table class="table table-striped">
+    <table {{ $attributes->except('wire:sortable') }} class="table table-striped">
         <thead>
             <tr>
                 {{ $head }}
             </tr>
         </thead>
 
-        <tbody>
+        <tbody {{ $attributes->only('wire:sortable') }}>
             {{ $body }}
         </tbody>
     </table>

resources/views/bootstrap-5/datatable.blade.php

@@ -21,8 +21,8 @@ class="container-fluid p-0"
             <div class="d-md-flex">
                 @include('livewire-tables::bootstrap-5.includes.search')
 
-                @if ($showFilterDropdown)
-                    <div class="ms-0 ms-md-3 mb-3 mb-md-0">
+                @if ($filtersEnabled && $showFilterDropdown)
+                    <div class="{{ $showSearch ? 'ms-0 ms-md-3' : '' }} mb-3 mb-md-0">
                         @include('livewire-tables::bootstrap-5.includes.filters')
                     </div>
                 @endif

resources/views/bootstrap-5/includes/bulk-select-row.blade.php

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

resources/views/bootstrap-5/includes/table.blade.php

@@ -1,5 +1,9 @@
-<x-livewire-tables::bs5.table>
+<x-livewire-tables::bs5.table wire:sortable="{{ $reorderRows }}">
     <x-slot name="head">
+        @if (is_string($reorderRows))
+            <x-livewire-tables::bs5.table.heading />
+        @endif
+
         @if (count($bulkActions))
             <x-livewire-tables::bs5.table.heading>
                 <input
@@ -18,6 +22,7 @@ class="form-check-input"
                     <x-livewire-tables::bs5.table.heading />
                 @else
                     <x-livewire-tables::bs5.table.heading
+                        :sortingEnabled="$sortingEnabled"
                         :sortable="$column->isSortable()"
                         :column="$column->column()"
                         :direction="$column->column() ? $sorts[$column->column()] ?? null : null"
@@ -30,17 +35,32 @@ class="form-check-input"
     </x-slot>
 
     <x-slot name="body">
+        @php
+            $colspan = count($columns);
+            if (count($bulkActions)) $colspan++;
+            if (is_string($reorderRows)) $colspan++;
+        @endphp
+
         @include('livewire-tables::bootstrap-5.includes.bulk-select-row')
 
         @forelse ($rows as $index => $row)
             <x-livewire-tables::bs5.table.row
                 wire:loading.class.delay="text-muted"
-                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="method_exists($this, 'setTableRowClass') ? ' ' . $this->setTableRowClass($row) : ''"
                 :id="method_exists($this, 'setTableRowId') ? $this->setTableRowId($row) : ''"
                 :customAttributes="method_exists($this, 'setTableRowAttributes') ? $this->setTableRowAttributes($row) : []"
             >
+                @if (is_string($reorderRows))
+                    <x-livewire-tables::bs5.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::bs5.table.cell>
+                @endif
+
                 @if (count($bulkActions))
                     <x-livewire-tables::bs5.table.cell class="align-middle">
                         <input