refactor filter toggle logic to use Alpine.js for improved interactivity and state management

Author: AbdelrhmanSaid

resources/views/datatable.blade.php

@@ -3,7 +3,7 @@
     <script src="{{ $jsAssetsUrl }}" defer></script>
 @endassets
 
-<div class="card datatable" @style(['max-height: ' . $height]) id="{{ $id }}" wire:ignore.self>
+<div class="card datatable" @style(['max-height: ' . $height]) id="{{ $id }}" wire:ignore.self x-data="{ filtersOpen: {{ $filtersOpen ? 'true' : 'false' }} }">
     <div class="card-body d-flex align-items-center gap-1">
         <div class="w-auto me-auto" wire:ignore>
             @include('datatables::partials.per-page')
@@ -32,8 +32,8 @@
         </div>
     </div>
 
-    @if ($filterable && $showFilters)
-        <div class="card-body" wire:ignore>
+    @if ($filterable)
+        <div class="card-body" wire:ignore x-show="filtersOpen">
             @include('datatables::partials.filters')
         </div>
     @endif

resources/views/partials/filters-toggle.blade.php

@@ -1,4 +1,4 @@
-<button type="button" @class(['btn btn-icon', 'active' => $showFilters]) wire:click="$toggle('showFilters')">
+<button type="button" :class="{ 'active': filtersOpen }" class="btn btn-icon" x-on:click="filtersOpen = !filtersOpen">
     <i class="fas fa-filter"></i>
 </button>
 

src/Datatable.php

@@ -68,12 +68,6 @@ abstract class Datatable extends Component
     #[Url(as: 'filter')]
     public array $filtered = [];
 
-    /**
-     * Toggle filters visibility.
-     */
-    #[Url]
-    public bool $showFilters = false;
-
     /**
      * Set the datatable maximum height.
      */
@@ -327,6 +321,7 @@ public function viewData(): array
             'actions' => $actions,
 
             'colspan' => $this->getColspanForColumns($columns, $actions),
+            'filtersOpen' => count($this->filtered) > 0,
 
             'filterable' => count($filters) > 0,
             'searchable' => count(array_filter($columns, fn (Column $column) => $column->searchable)) > 0,