BS5 reorder

Author: rappasoft

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

@@ -1,4 +1,10 @@
-@props(['url' => null, 'customAttributes' => []])
+@props(['url' => null, 'reordering' => false, 'customAttributes' => []])
+
+@if (!$reordering && $attributes->has('wire:sortable.item'))
+    @php
+        $attributes = $attributes->filter(fn ($value, $key) => $key !== 'wire:sortable.item');
+    @endphp
+@endif
 
 <tr
     {{ $attributes->merge($customAttributes) }}

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

@@ -19,6 +19,7 @@ class="container-fluid p-0"
 
         <div class="d-md-flex justify-content-between mb-3">
             <div class="d-md-flex">
+                @include('livewire-tables::bootstrap-5.includes.reorder')
                 @include('livewire-tables::bootstrap-5.includes.search')
 
                 @if ($filtersEnabled && $showFilterDropdown)

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

@@ -22,7 +22,7 @@ class="btn dropdown-toggle d-block w-100 d-md-inline"
             <span class="caret"></span>
         </button>
         <ul
-            class="dropdown-menu w-200 mt-3"
+            class="dropdown-menu w-100"
             :class="{'show' : open}"
             role="menu"
         >

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

@@ -0,0 +1,15 @@
+@if ($reorderEnabled)
+    <div class="me-0 me-md-3 mb-3 mb-md-0">
+        <button
+            wire:click="{{ $reordering ? 'disableReordering' : 'enableReordering' }}"
+            type="button"
+            class="btn btn-default d-block w-100 d-md-inline"
+        >
+            @if ($reordering)
+                @lang('Done Reordering')
+            @else
+                @lang('Reorder')
+            @endif
+        </button>
+    </div>
+@endif

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

@@ -1,4 +1,4 @@
-<x-livewire-tables::bs5.table wire:sortable="{{ $reorderingMethod }}">
+<x-livewire-tables::bs5.table wire:sortable="{{ $reordering ? $reorderingMethod : '' }}">
     <x-slot name="head">
         @if ($reordering)
             <x-livewire-tables::bs5.table.heading />
@@ -48,14 +48,15 @@ class="form-check-input"
                 wire:loading.class.delay="text-muted"
                 wire:key="table-row-{{ $row->{$primaryKey} }}"
                 wire:sortable.item="{{ $row->{$primaryKey} }}"
+                :reordering="$reordering"
                 :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 ($reordering)
                     <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">
+                        <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::bs5.table.cell>