From 17cac1da9e0d035e94474f9d73c6c40041497ef4 Mon Sep 17 00:00:00 2001
From: Elisio Leonardo <elisio.leonardo@gmail.com>
Date: Wed, 14 May 2025 09:00:35 +0200
Subject: [PATCH 1/3] Implementing outside filters with bootstrap

---
 .../frameworks/bootstrap5/filter.blade.php    | 85 +++++++++++++++++++
 .../frameworks/bootstrap5/header.blade.php    |  4 +
 .../bootstrap5/header/filters.blade.php       | 14 +++
 .../bootstrap5/table-base.blade.php           | 18 ++++
 4 files changed, 121 insertions(+)
 create mode 100644 resources/views/components/frameworks/bootstrap5/filter.blade.php
 create mode 100644 resources/views/components/frameworks/bootstrap5/header/filters.blade.php

diff --git a/resources/views/components/frameworks/bootstrap5/filter.blade.php b/resources/views/components/frameworks/bootstrap5/filter.blade.php
new file mode 100644
index 00000000..26ba8621
--- /dev/null
+++ b/resources/views/components/frameworks/bootstrap5/filter.blade.php
@@ -0,0 +1,85 @@
+@props([
+    'columns' => null,
+    'theme' => null,
+    'tableName' => null,
+    'filtersFromColumns' => null,
+    'showFilters' => false,
+])
+<div
+    x-data="{ open: @entangle('showFilters').live }"
+    class="mt-2 md:mt-0"
+>
+    <div
+        x-show="open"
+        x-cloak
+        x-transition:enter="transform duration-100"
+        x-transition:enter-start="opacity-0 scale-90"
+        x-transition:enter-end="opacity-100 scale-100"
+        x-transition:leave="transform duration-100"
+        x-transition:leave-start="opacity-100 scale-100"
+        x-transition:leave-end="opacity-0 scale-90"
+        class="pg-filter-container"
+    >
+        @php
+            $customConfig = [];
+        @endphp
+        <div class="row g-3 mb-3">
+            @foreach ($filtersFromColumns as $column)
+                @php
+                    $filter = data_get($column, 'filters');
+                    $title = data_get($column, 'title');
+                    $baseClass = data_get($filter, 'baseClass');
+                    $className = str(data_get($filter, 'className'));
+                @endphp
+
+                <div class="col-12 col-sm-6 col-md-4 col-lg-3 {{ $baseClass }}">
+                    <div class="card h-100">
+                        <div class="card-header">
+                            <strong>{{ $title }}</strong>
+                        </div>
+                        <div class="card-body">
+                            @if ($className->contains('FilterMultiSelect'))
+                                <x-livewire-powergrid::inputs.select
+                                        :inline="false"
+                                        :theme="$theme"
+                                        :table-name="$tableName"
+                                        :filter="$filter"
+                                        :title="$title"
+                                        :initial-values="data_get(data_get($filter, 'multi_select'), data_get($filter, 'field'), [])"
+                                />
+                            @elseif ($className->contains(['FilterDateTimePicker', 'FilterDatePicker']))
+                                @includeIf(theme_style($theme, 'filterDatePicker.view'), [
+                                    'filter' => $filter,
+                                    'tableName' => $tableName,
+                                    'classAttr' => 'w-full',
+                                    'type' => $className->contains('FilterDateTimePicker') ? 'datetime' : 'date',
+                                ])
+                            @elseif ($className->contains(['FilterSelect', 'FilterEnumSelect']))
+                                @includeIf(theme_style($theme, 'filterSelect.view'), [
+                                    'filter' => $filter,
+                                ])
+                            @elseif ($className->contains('FilterNumber'))
+                                @includeIf(theme_style($theme, 'filterNumber.view'), [
+                                    'filter' => $filter,
+                                ])
+                            @elseif ($className->contains('FilterInputText'))
+                                @includeIf(theme_style($theme, 'filterInputText.view'), [
+                                    'filter' => $filter,
+                                ])
+                            @elseif ($className->contains('FilterBoolean'))
+                                @includeIf(theme_style($theme, 'filterBoolean.view'), [
+                                    'filter' => $filter,
+                                ])
+                            @elseif ($className->contains('FilterDynamic'))
+                                <x-dynamic-component
+                                        :component="data_get($filter, 'component', '')"
+                                        :attributes="new \Illuminate\View\ComponentAttributeBag(data_get($filter, 'attributes', []))"
+                                />
+                            @endif
+                        </div>
+                    </div>
+                </div>
+            @endforeach
+        </div>
+    </div>
+</div>
diff --git a/resources/views/components/frameworks/bootstrap5/header.blade.php b/resources/views/components/frameworks/bootstrap5/header.blade.php
index 7ca71448..c61755f3 100644
--- a/resources/views/components/frameworks/bootstrap5/header.blade.php
+++ b/resources/views/components/frameworks/bootstrap5/header.blade.php
@@ -14,6 +14,10 @@
                 @include(data_get($theme, 'root') . '.header.toggle-columns')
                 @includeIf(data_get($theme, 'root') . '.header.soft-deletes')
 
+                @if (config('livewire-powergrid.filter') === 'outside')
+                    @include(data_get($theme, 'root') . '.header.filters')
+                @endif
+
                 @includeWhen(boolval(data_get($setUp, 'header.wireLoading')),
                     data_get($theme, 'root') . '.header.loading')
             </div>
diff --git a/resources/views/components/frameworks/bootstrap5/header/filters.blade.php b/resources/views/components/frameworks/bootstrap5/header/filters.blade.php
new file mode 100644
index 00000000..763ff68d
--- /dev/null
+++ b/resources/views/components/frameworks/bootstrap5/header/filters.blade.php
@@ -0,0 +1,14 @@
+<div
+    wire:key="toggle-filters-{{ $tableName }}')"
+    id="toggle-filters"
+    class="d-flex me-2 mt-2 mt-sm-0 gap-2"
+>
+    <button
+        wire:click="toggleFilters"
+        type="button"
+        class="btn btn-outline-secondary btn-sm"
+    >
+        <x-livewire-powergrid::icons.filter class="bi bi-filter" />
+        <span>Filters</span>
+    </button>
+</div>
diff --git a/resources/views/components/frameworks/bootstrap5/table-base.blade.php b/resources/views/components/frameworks/bootstrap5/table-base.blade.php
index b3274692..f2c26395 100644
--- a/resources/views/components/frameworks/bootstrap5/table-base.blade.php
+++ b/resources/views/components/frameworks/bootstrap5/table-base.blade.php
@@ -9,6 +9,24 @@
             'enabledFilters' => $enabledFilters,
         ])
     </div>
+
+    @if (config('livewire-powergrid.filter') === 'outside')
+        @php
+            $filtersFromColumns = $columns
+                ->filter(fn($column) => filled(data_get($column, 'filters')));
+        @endphp
+
+        @if ($filtersFromColumns->count() > 0)
+            <x-livewire-powergrid::frameworks.bootstrap5.filter
+                :enabled-filters="$enabledFilters"
+                :tableName="$tableName"
+                :columns="$columns"
+                :filtersFromColumns="$filtersFromColumns"
+                :theme="$theme"
+            />
+        @endif
+    @endif
+
     <div
         class="{{ theme_style($theme, 'table.layout.div') }}"
     >

From bc9d06ed1a7fe2a8ccaf271fd019f544e665d72a Mon Sep 17 00:00:00 2001
From: Elisio Leonardo <elisio.leonardo@gmail.com>
Date: Wed, 14 May 2025 14:16:58 +0200
Subject: [PATCH 2/3] Implementing outside filters with bootstrap

---
 .../frameworks/bootstrap5/filter.blade.php    | 87 +++++++++----------
 .../bootstrap5/filters/boolean.blade.php      |  7 +-
 .../bootstrap5/filters/date-picker.blade.php  | 39 +++++----
 .../bootstrap5/filters/input-text.blade.php   | 19 ++--
 .../bootstrap5/filters/number.blade.php       | 43 ++++-----
 .../bootstrap5/filters/select.blade.php       | 59 +++++++------
 .../bootstrap5/header/filters.blade.php       |  4 +-
 7 files changed, 133 insertions(+), 125 deletions(-)

diff --git a/resources/views/components/frameworks/bootstrap5/filter.blade.php b/resources/views/components/frameworks/bootstrap5/filter.blade.php
index 26ba8621..e41a4402 100644
--- a/resources/views/components/frameworks/bootstrap5/filter.blade.php
+++ b/resources/views/components/frameworks/bootstrap5/filter.blade.php
@@ -23,7 +23,7 @@ class="pg-filter-container"
         @php
             $customConfig = [];
         @endphp
-        <div class="row g-3 mb-3">
+        <div class="d-grid gap-3" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
             @foreach ($filtersFromColumns as $column)
                 @php
                     $filter = data_get($column, 'filters');
@@ -32,52 +32,45 @@ class="pg-filter-container"
                     $className = str(data_get($filter, 'className'));
                 @endphp
 
-                <div class="col-12 col-sm-6 col-md-4 col-lg-3 {{ $baseClass }}">
-                    <div class="card h-100">
-                        <div class="card-header">
-                            <strong>{{ $title }}</strong>
-                        </div>
-                        <div class="card-body">
-                            @if ($className->contains('FilterMultiSelect'))
-                                <x-livewire-powergrid::inputs.select
-                                        :inline="false"
-                                        :theme="$theme"
-                                        :table-name="$tableName"
-                                        :filter="$filter"
-                                        :title="$title"
-                                        :initial-values="data_get(data_get($filter, 'multi_select'), data_get($filter, 'field'), [])"
-                                />
-                            @elseif ($className->contains(['FilterDateTimePicker', 'FilterDatePicker']))
-                                @includeIf(theme_style($theme, 'filterDatePicker.view'), [
-                                    'filter' => $filter,
-                                    'tableName' => $tableName,
-                                    'classAttr' => 'w-full',
-                                    'type' => $className->contains('FilterDateTimePicker') ? 'datetime' : 'date',
-                                ])
-                            @elseif ($className->contains(['FilterSelect', 'FilterEnumSelect']))
-                                @includeIf(theme_style($theme, 'filterSelect.view'), [
-                                    'filter' => $filter,
-                                ])
-                            @elseif ($className->contains('FilterNumber'))
-                                @includeIf(theme_style($theme, 'filterNumber.view'), [
-                                    'filter' => $filter,
-                                ])
-                            @elseif ($className->contains('FilterInputText'))
-                                @includeIf(theme_style($theme, 'filterInputText.view'), [
-                                    'filter' => $filter,
-                                ])
-                            @elseif ($className->contains('FilterBoolean'))
-                                @includeIf(theme_style($theme, 'filterBoolean.view'), [
-                                    'filter' => $filter,
-                                ])
-                            @elseif ($className->contains('FilterDynamic'))
-                                <x-dynamic-component
-                                        :component="data_get($filter, 'component', '')"
-                                        :attributes="new \Illuminate\View\ComponentAttributeBag(data_get($filter, 'attributes', []))"
-                                />
-                            @endif
-                        </div>
-                    </div>
+                <div class="{{ $baseClass }}">
+                    @if ($className->contains('FilterMultiSelect'))
+                        <x-livewire-powergrid::inputs.select
+                                :inline="false"
+                                :theme="$theme"
+                                :table-name="$tableName"
+                                :filter="$filter"
+                                :title="$title"
+                                :initial-values="data_get(data_get($filter, 'multi_select'), data_get($filter, 'field'), [])"
+                        />
+                    @elseif ($className->contains(['FilterDateTimePicker', 'FilterDatePicker']))
+                        @includeIf(theme_style($theme, 'filterDatePicker.view'), [
+                            'filter' => $filter,
+                            'tableName' => $tableName,
+                            'classAttr' => 'w-100',
+                            'type' => $className->contains('FilterDateTimePicker') ? 'datetime' : 'date',
+                        ])
+                    @elseif ($className->contains(['FilterSelect', 'FilterEnumSelect']))
+                        @includeIf(theme_style($theme, 'filterSelect.view'), [
+                            'filter' => $filter,
+                        ])
+                    @elseif ($className->contains('FilterNumber'))
+                        @includeIf(theme_style($theme, 'filterNumber.view'), [
+                            'filter' => $filter,
+                        ])
+                    @elseif ($className->contains('FilterInputText'))
+                        @includeIf(theme_style($theme, 'filterInputText.view'), [
+                            'filter' => $filter,
+                        ])
+                    @elseif ($className->contains('FilterBoolean'))
+                        @includeIf(theme_style($theme, 'filterBoolean.view'), [
+                            'filter' => $filter,
+                        ])
+                    @elseif ($className->contains('FilterDynamic'))
+                        <x-dynamic-component
+                                :component="data_get($filter, 'component', '')"
+                                :attributes="new \Illuminate\View\ComponentAttributeBag(data_get($filter, 'attributes', []))"
+                        />
+                    @endif
                 </div>
             @endforeach
         </div>
diff --git a/resources/views/components/frameworks/bootstrap5/filters/boolean.blade.php b/resources/views/components/frameworks/bootstrap5/filters/boolean.blade.php
index ec55a1cf..c6f86464 100644
--- a/resources/views/components/frameworks/bootstrap5/filters/boolean.blade.php
+++ b/resources/views/components/frameworks/bootstrap5/filters/boolean.blade.php
@@ -26,9 +26,10 @@
         :attributes="new \Illuminate\View\ComponentAttributeBag($params)"
     />
 @else
-    <div
-        class="{{ theme_style($theme, 'filterBoolean.base') }}"
-    >
+    <div class="mb-2">
+        @if (!$inline)
+            <label class="form-label fw-semibold mb-1">{{ $title ?? '' }}</label>
+        @endif
         <select
             style="{{ data_get($column, 'headerStyle') }}"
             class="{{ $selectClasses }}"
diff --git a/resources/views/components/frameworks/bootstrap5/filters/date-picker.blade.php b/resources/views/components/frameworks/bootstrap5/filters/date-picker.blade.php
index ab46a69a..c6c13a78 100644
--- a/resources/views/components/frameworks/bootstrap5/filters/date-picker.blade.php
+++ b/resources/views/components/frameworks/bootstrap5/filters/date-picker.blade.php
@@ -32,21 +32,28 @@
     wire:ignore.self
     x-data="pgFlatpickr(@js($params))"
 >
-    <div
-        class="{{ theme_style($theme, 'filterDatePicker.base') }}"
-    >
-        <form autocomplete="off">
-            <input
-                id="input_{{ $field }}"
-                x-ref="rangeInput"
-                wire:model="filters.{{ $type }}.{{ $field }}.formatted"
-                autocomplete="off"
-                data-field="{{ $field }}"
-                class="{{ theme_style($theme, 'filterDatePicker.input') }} {{ data_get($column, 'headerClass') }}"
-                type="text"
-                readonly
-                placeholder="{{ trans('livewire-powergrid::datatable.placeholders.select') }}"
-            />
-        </form>
+    <div class="mb-2">
+        @if (!$inline)
+            <label class="form-label fw-semibold mb-1">{{ $title ?? '' }}</label>
+        @endif
+        <div class="d-flex flex-row gap-2 align-items-center">
+            <div
+                class="{{ theme_style($theme, 'filterDatePicker.base') }}"
+            >
+                <form autocomplete="off">
+                    <input
+                        id="input_{{ $field }}"
+                        x-ref="rangeInput"
+                        wire:model="filters.{{ $type }}.{{ $field }}.formatted"
+                        autocomplete="off"
+                        data-field="{{ $field }}"
+                        class="{{ theme_style($theme, 'filterDatePicker.input') }} {{ data_get($column, 'headerClass') }}"
+                        type="text"
+                        readonly
+                        placeholder="{{ trans('livewire-powergrid::datatable.placeholders.select') }}"
+                    />
+                </form>
+            </div>
+        </div>
     </div>
 </div>
diff --git a/resources/views/components/frameworks/bootstrap5/filters/input-text.blade.php b/resources/views/components/frameworks/bootstrap5/filters/input-text.blade.php
index 48c08904..e70ee3fb 100644
--- a/resources/views/components/frameworks/bootstrap5/filters/input-text.blade.php
+++ b/resources/views/components/frameworks/bootstrap5/filters/input-text.blade.php
@@ -47,13 +47,14 @@
             :attributes="new \Illuminate\View\ComponentAttributeBag($params)"
         />
     @else
-        <div
-            class="{{ theme_style($theme, 'filterInputText.base') }}"
-        >
-            @if ($showSelectOptions)
-                <div class="relative">
+        <div class="{{ theme_style($theme, 'filterInputText.base') }}">
+            @if (!$inline)
+                <label class="form-label fw-semibold mb-1">{{ $title }}</label>
+            @endif
+            <div class="d-flex flex-row gap-2 align-items-center">
+                @if ($showSelectOptions)
                     <select
-                        class="{{ $selectClasses }}"
+                        class="form-select form-select-sm w-auto"
                         style="{{ data_get($column, 'headerStyle') }}"
                         {{ $defaultAttributes['selectAttributes'] }}
                     >
@@ -64,9 +65,7 @@ class="{{ $selectClasses }}"
                             >{{ trans('livewire-powergrid::datatable.input_text_options.' . $value) }}</option>
                         @endforeach
                     </select>
-                </div>
-            @endif
-            <div class="mt-1">
+                @endif
                 <input
                     wire:key="input-{{ $field }}"
                     data-id="{{ $field }}"
@@ -74,7 +73,7 @@ class="{{ $selectClasses }}"
                         @else
                             {{ $defaultAttributes['inputAttributes'] }} @endif
                     type="text"
-                    class="{{ $inputClasses }}"
+                    class="form-control form-control-sm"
                     placeholder="{{ $placeholder }}"
                 />
             </div>
diff --git a/resources/views/components/frameworks/bootstrap5/filters/number.blade.php b/resources/views/components/frameworks/bootstrap5/filters/number.blade.php
index e1882513..706d962c 100644
--- a/resources/views/components/frameworks/bootstrap5/filters/number.blade.php
+++ b/resources/views/components/frameworks/bootstrap5/filters/number.blade.php
@@ -29,26 +29,29 @@
         :attributes="new \Illuminate\View\ComponentAttributeBag($params)"
     />
 @else
-    <div
-        class="{{ theme_style($theme, 'filterNumber.base') }}"
-    >
-        <div>
-            <input
-                {{ $defaultAttributes['inputStartAttributes'] }}
-                @if ($inline) style="{{ data_get($column, 'headerStyle') }}" @endif
-                type="text"
-                class="{{ $filterClasses }}"
-                placeholder="{{ $placeholder['min'] ?? __('Min') }}"
-            >
-        </div>
-        <div class="mt-1">
-            <input
-                {{ $defaultAttributes['inputEndAttributes'] }}
-                @if ($inline) style="{{ data_get($column, 'headerStyle') }}" @endif
-                type="text"
-                class="{{ $filterClasses }}"
-                placeholder="{{ $placeholder['max'] ?? __('Max') }}"
-            >
+    <div class="mb-2">
+        @if (!$inline)
+            <label class="form-label fw-semibold mb-1">{{ $title ?? '' }}</label>
+        @endif
+        <div class="d-flex flex-row gap-2 align-items-center">
+            <div>
+                <input
+                    {{ $defaultAttributes['inputStartAttributes'] }}
+                    @if ($inline) style="{{ data_get($column, 'headerStyle') }}" @endif
+                    type="text"
+                    class="{{ $filterClasses }}"
+                    placeholder="{{ $placeholder['min'] ?? __('Min') }}"
+                >
+            </div>
+            <div class="mt-1">
+                <input
+                    {{ $defaultAttributes['inputEndAttributes'] }}
+                    @if ($inline) style="{{ data_get($column, 'headerStyle') }}" @endif
+                    type="text"
+                    class="{{ $filterClasses }}"
+                    placeholder="{{ $placeholder['max'] ?? __('Max') }}"
+                >
+            </div>
         </div>
     </div>
 @endif
diff --git a/resources/views/components/frameworks/bootstrap5/filters/select.blade.php b/resources/views/components/frameworks/bootstrap5/filters/select.blade.php
index 039e61f3..5e5473fe 100644
--- a/resources/views/components/frameworks/bootstrap5/filters/select.blade.php
+++ b/resources/views/components/frameworks/bootstrap5/filters/select.blade.php
@@ -26,34 +26,39 @@
         :attributes="new \Illuminate\View\ComponentAttributeBag($params)"
     />
 @else
-    <div
-        class="{{ theme_style($theme, 'filterSelect.base') }}"
-    >
-        <select
-            class="{{ $filterClasses }}"
-            style="{{ data_get($column, 'headerStyle') }}"
-            {{ $defaultAttributes['selectAttributes'] }}
+    <div class="mb-2">
+        @if (!$inline)
+            <label class="form-label fw-semibold mb-1">{{ $title ?? '' }}</label>
+        @endif
+        <div
+            class="{{ theme_style($theme, 'filterSelect.base') }}"
         >
+            <select
+                class="{{ $filterClasses }}"
+                style="{{ data_get($column, 'headerStyle') }}"
+                {{ $defaultAttributes['selectAttributes'] }}
+            >
 
-            @if(!data_get($params, 'params.disableOptionAll', false))
-                <option value="">{{ trans('livewire-powergrid::datatable.select.all') }}</option>
-            @endif
-
-            @php
-                $computedDatasource = data_get($filter, 'computedDatasource');
-                $dataSource = filled($computedDatasource)
-                    ? $this->{$computedDatasource}
-                    : data_get($filter, 'dataSource');
-            @endphp
-
-            @foreach ($dataSource as $key => $item)
-                <option
-                    wire:key="select-{{ $tableName }}-{{ $key }}"
-                    value="{{ $item[data_get($filter, 'optionValue')] }}"
-                >
-                    {{ $item[data_get($filter, 'optionLabel')] }}
-                </option>
-            @endforeach
-        </select>
+                @if(!data_get($params, 'params.disableOptionAll', false))
+                    <option value="">{{ trans('livewire-powergrid::datatable.select.all') }}</option>
+                @endif
+
+                @php
+                    $computedDatasource = data_get($filter, 'computedDatasource');
+                    $dataSource = filled($computedDatasource)
+                        ? $this->{$computedDatasource}
+                        : data_get($filter, 'dataSource');
+                @endphp
+
+                @foreach ($dataSource as $key => $item)
+                    <option
+                        wire:key="select-{{ $tableName }}-{{ $key }}"
+                        value="{{ $item[data_get($filter, 'optionValue')] }}"
+                    >
+                        {{ $item[data_get($filter, 'optionLabel')] }}
+                    </option>
+                @endforeach
+            </select>
+        </div>
     </div>
 @endif
diff --git a/resources/views/components/frameworks/bootstrap5/header/filters.blade.php b/resources/views/components/frameworks/bootstrap5/header/filters.blade.php
index 763ff68d..92a966e7 100644
--- a/resources/views/components/frameworks/bootstrap5/header/filters.blade.php
+++ b/resources/views/components/frameworks/bootstrap5/header/filters.blade.php
@@ -6,9 +6,9 @@ class="d-flex me-2 mt-2 mt-sm-0 gap-2"
     <button
         wire:click="toggleFilters"
         type="button"
-        class="btn btn-outline-secondary btn-sm"
+        class="btn btn-light btn-sm border rounded-circle d-flex align-items-center justify-content-center p-2 shadow-sm"
+        style="width: 36px; height: 36px;"
     >
         <x-livewire-powergrid::icons.filter class="bi bi-filter" />
-        <span>Filters</span>
     </button>
 </div>

From 5f5ad21c7fa5972132aae62f3633577c5b54cc77 Mon Sep 17 00:00:00 2001
From: luanfreitasdev <luanfreitas10@protonmail.com>
Date: Sun, 18 May 2025 17:07:53 -0300
Subject: [PATCH 3/3] fix: correct wire:key syntax in filters.blade.php

---
 .../components/frameworks/bootstrap5/header/filters.blade.php   | 2 +-
 .../components/frameworks/daisyui/header/filters.blade.php      | 2 +-
 .../components/frameworks/tailwind/header/filters.blade.php     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/views/components/frameworks/bootstrap5/header/filters.blade.php b/resources/views/components/frameworks/bootstrap5/header/filters.blade.php
index 92a966e7..98e90fca 100644
--- a/resources/views/components/frameworks/bootstrap5/header/filters.blade.php
+++ b/resources/views/components/frameworks/bootstrap5/header/filters.blade.php
@@ -1,5 +1,5 @@
 <div
-    wire:key="toggle-filters-{{ $tableName }}')"
+    wire:key="toggle-filters-{{ $tableName }}"
     id="toggle-filters"
     class="d-flex me-2 mt-2 mt-sm-0 gap-2"
 >
diff --git a/resources/views/components/frameworks/daisyui/header/filters.blade.php b/resources/views/components/frameworks/daisyui/header/filters.blade.php
index a8d2ed2f..e487c3fb 100644
--- a/resources/views/components/frameworks/daisyui/header/filters.blade.php
+++ b/resources/views/components/frameworks/daisyui/header/filters.blade.php
@@ -1,5 +1,5 @@
 <div
-    wire:key="toggle-filters-{{ $tableName }}')"
+    wire:key="toggle-filters-{{ $tableName }}"
     id="toggle-filters"
     class="flex mr-2 mt-2 sm:mt-0 gap-3"
 >
diff --git a/resources/views/components/frameworks/tailwind/header/filters.blade.php b/resources/views/components/frameworks/tailwind/header/filters.blade.php
index 1a8efe14..d7667880 100644
--- a/resources/views/components/frameworks/tailwind/header/filters.blade.php
+++ b/resources/views/components/frameworks/tailwind/header/filters.blade.php
@@ -1,5 +1,5 @@
 <div
-    wire:key="toggle-filters-{{ $tableName }}')"
+    wire:key="toggle-filters-{{ $tableName }}"
     id="toggle-filters"
     class="flex mr-2 mt-2 sm:mt-0 gap-3"
 >