From dc254a3a8636f9f7b073c57289000c7b63d6831b Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Sun, 29 Oct 2023 02:55:46 +0000
Subject: [PATCH] v3.0.0-beta.11 Merge (#1499)

* v3 - Fix - Correct setFilter behaviour (#1451)

* Fix for setFilter

* Update return types

---------

Co-authored-by: lrljoe <lrljoe@users.noreply.github.com>

* Fixes for missing brackets (#1455)

* v3 Toolbar - Splitting of Views/Blades (#1454)

* Initial Commit - Full Split of Toolbar

* Remove Confirms Code

* Fix superfluous endif

* Combining Blades - Stage 1

* More Merging

* Bulk Actions - Icon Adjustment

* Further clean up of toolbar - filter button

* Stripping Toolbar Theme Distinctions

* Adjust childElementOpen to respect hierachy

* To remove files

* Merge Column-Select into Single Blade

* Clean Up Blades

* Fix missing BootStrap Classes from Toolbar Blade (#1466)

* Adding x-cloak where it is missing for x-show (#1463)

* V3 - QueryString migration into Traits (#1465)

* Initial migration of queryString to Traits

* Lock $queryStringStatus

* Return empty arrays for Traits

* Add WithQueryString Trait

* Add Config/Helper Traits to WithQueryString

* Add default queryStringStatus

---------

Co-authored-by: lrljoe <lrljoe@users.noreply.github.com>

* Update Changelog (#1467)

* v3 DateRange - Icon Styling, FilterHelper Method (#1490)

* DateRange - Icon Styling, FilterHelper Method

* Add can_get_datestring test

* Add non-array test for DateRangeFilter

---------

Co-authored-by: lrljoe <lrljoe@users.noreply.github.com>

* V3 DateRangeFilter - Remove Icon, Add Placeholder (#1492)

* Remove DateRangeFilter Icon

* DateRangeFilter - Remove Icon & Add Placeholder

* Use FilterHelper method to generate wire:key, add placeholder with docs (#1493)

* For all Filters (Except MultiSelect currently), use the FilterHelper method to generate the wire:key rather than doing it in the blade. This centralises for future updates
MultiSelectFilter will follow in due course, as it requires some tidying & updates.

* Add placeholder config option to: DateRangeFilter, DateFilter, DateTimeFilter, NumberFilter and update docs to reflect the availability of the option

* Clean up classes on Filters

* Minor tweaks to toolbar/column select styling (#1494)

---------

Co-authored-by: lrljoe <lrljoe@users.noreply.github.com>
---
 CHANGELOG.md                                  |  10 +
 docs/filter-types/filters-date.md             |   9 +-
 docs/filter-types/filters-daterange.md        |   3 +-
 docs/filter-types/filters-datetime.md         |   9 +-
 docs/filter-types/filters-number.md           |   5 +-
 .../tools/filters/date-range.blade.php        |  68 ++--
 .../components/tools/filters/date.blade.php   |   5 +-
 .../tools/filters/datetime.blade.php          |   3 +-
 .../filters/multi-select-dropdown.blade.php   |   4 +-
 .../tools/filters/multi-select.blade.php      |   2 +-
 .../components/tools/filters/number.blade.php |   3 +-
 .../components/tools/filters/select.blade.php |   2 +-
 .../tools/filters/text-field.blade.php        |   2 +-
 .../views/components/tools/toolbar.blade.php  |   6 +-
 .../toolbar/items/column-select.blade.php     | 347 +++++++++---------
 src/Views/Filters/DateRangeFilter.php         |  20 +
 src/Views/Traits/Helpers/FilterHelpers.php    |   5 +
 tests/Views/Filters/DateRangeFilterTest.php   |  11 +
 .../Configuration/FilterConfigurationTest.php |  10 +
 .../Traits/Helpers/FilterHelpersTest.php      |  26 ++
 20 files changed, 304 insertions(+), 246 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 79748414e..2ffd5624a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,16 @@
 
 All notable changes to `laravel-livewire-tables` will be documented in this file
 
+## [3.0.0-beta.11] - 2023-10-29
+- Update Date Range Icon Styling
+- Migrate PHP from date-range blade into new DateRangeFilter method
+- Add FilterHelper method for generating filter wire:keys
+- Add Filter CustomPosition tests
+- Add Placeholder config option for DateRangeFilter
+- Add Placeholder config option for DateFilter, DateTimeFilter, NumberFilter
+- Clean up classes on filters
+- Minor tweaks to toolbar/column select styling
+
 ## [3.0.0-beta.10] - 2023-10-27
 - Changes to toolbar blade structure by @lrljoe in #[1454](https://github.com/rappasoft/laravel-livewire-tables/pull/1454) 
 - Fix queryStringEnabled by @lrljoe in #[1465](https://github.com/rappasoft/laravel-livewire-tables/pull/1465) 
diff --git a/docs/filter-types/filters-date.md b/docs/filter-types/filters-date.md
index bf2ca2b7b..488cda84f 100644
--- a/docs/filter-types/filters-date.md
+++ b/docs/filter-types/filters-date.md
@@ -18,7 +18,7 @@ public function filters(): array
 }
 ```
 
-Date filters have configs to set min and max, and to set the format for the Filter Pills
+Date filters have configs to set min and max, to set the format for the Filter Pills, and to set a placeholder value
 
 ```php
 public function filters(): array
@@ -26,9 +26,10 @@ public function filters(): array
     return [
         DateFilter::make('Verified From')
             ->config([
-                'min' => '2020-01-01',
-                'max' => '2021-12-31',
-                'pillFormat' => 'd M Y',
+                'min' => '2020-01-01',  // Earliest Acceptable Date
+                'max' => '2021-12-31', // Latest Acceptable Date
+                'pillFormat' => 'd M Y', // Format for use in Filter Pills
+                'placeholder' => 'Enter Date', // A placeholder value
             ])
     ];
 }
diff --git a/docs/filter-types/filters-daterange.md b/docs/filter-types/filters-daterange.md
index 3cd0c0b52..37d0ea552 100644
--- a/docs/filter-types/filters-daterange.md
+++ b/docs/filter-types/filters-daterange.md
@@ -18,7 +18,7 @@ public function filters(): array
 }
 ```
 
-DateRange filters have configs to set earliestDate and latestDate, to allow/disallow input, to set the input format, and display format, plus Filter Pills labels
+DateRange filters have configs to set earliestDate and latestDate, to allow/disallow input, to set the input format, to set a placeholder value,  display format, plus Filter Pills labels
 
 ```php
 public function filters(): array
@@ -32,6 +32,7 @@ public function filters(): array
             'dateFormat' => 'Y-m-d', // Date format that will be received by the filter
             'earliestDate' => '2020-01-01', // The earliest acceptable date
             'latestDate' => '2023-08-01', // The latest acceptable date
+            'placeholder' => 'Enter Date Range', // A placeholder value
         ])
         ->setFilterPillValues([0 => 'minDate', 1 => 'maxDate']) // The values that will be displayed for the Min/Max Date Values
         ->filter(function (Builder $builder, array $dateRange) { // Expects an array.
diff --git a/docs/filter-types/filters-datetime.md b/docs/filter-types/filters-datetime.md
index ac28ddecf..288d90b4b 100644
--- a/docs/filter-types/filters-datetime.md
+++ b/docs/filter-types/filters-datetime.md
@@ -18,7 +18,7 @@ public function filters(): array
 }
 ```
 
-DateTime filters have configs to set min and max, and to set the format for the Filter Pills
+DateTime filters have configs to set min and max, to set the format for the Filter Pills, and to set a placeholder value
 
 ```php
 public function filters(): array
@@ -26,9 +26,10 @@ public function filters(): array
     return [
         DateTimeFilter::make('Verified From')
             ->config([
-                'min' => '2022-11-31 00:00:00',
-                'max' => '2022-12-31 05:00:00',
-                'pillFormat' => 'd M Y - H:i',
+                'min' => '2022-11-31 00:00:00',  // Earliest Acceptable DateTime
+                'max' => '2022-12-31 05:00:00', // Latest Acceptable Date
+                'pillFormat' => 'd M Y - H:i', // Format for use in Filter Pills
+                'placeholder' => 'Enter Date Time', // A placeholder value
             ])
     ];
 }
diff --git a/docs/filter-types/filters-number.md b/docs/filter-types/filters-number.md
index 402878eaa..3b629dd0a 100644
--- a/docs/filter-types/filters-number.md
+++ b/docs/filter-types/filters-number.md
@@ -13,8 +13,9 @@ public function filters(): array
     return [
         NumberFilter::make('Amount')
             ->config([
-                'min' => 0,
-                'max' => 100,
+                'min' => 0, // Minimum Value Accepted
+                'max' => 100, // Maximum Value Accepted
+                'placeholder' => 'Enter Number 0 - 100', // A placeholder value
             ])
             ->filter(function(Builder $builder, string $value) {
                 $builder->where('amount', '<', $value);
diff --git a/resources/views/components/tools/filters/date-range.blade.php b/resources/views/components/tools/filters/date-range.blade.php
index 3599eee69..bdca66903 100644
--- a/resources/views/components/tools/filters/date-range.blade.php
+++ b/resources/views/components/tools/filters/date-range.blade.php
@@ -1,53 +1,27 @@
 @php
-
     $filterKey = $filter->getKey();
-    $filterConfigs = $filter->getConfigs();
-    $dateString = '';
-    $dateInput = isset($this->filters[$filterKey]) ? $this->filters[$filterKey] : '';
-    if ($dateInput != '') {
-        if (is_array($dateInput)) {
-            $startDate = isset($dateInput['minDate']) ? $dateInput['minDate'] : (isset($dateInput[1]) ? $dateInput[1] : date('Y-m-d'));
-            $endDate = isset($dateInput['maxDate']) ? $dateInput['maxDate'] : (isset($dateInput[0]) ? $dateInput[0] : date('Y-m-d'));
-            $dateString = $startDate . ' to ' . $endDate;
-        } else {
-            $dateArray = explode(',', $dateInput);
-            $startDate = isset($dateArray[0]) ? $dateArray[0] : date('Y-m-d');
-            $endDate = isset($dateArray[2]) ? $dateArray[2] : date('Y-m-d');
-            $dateString = $startDate . ' to ' . $endDate;
-        }
-    }
-
 @endphp
 
 <div x-cloak id="{{ $tableName }}-dateRangeFilter-{{ $filterKey }}" x-data="flatpickrFilter($wire, '{{ $filterKey }}', @js($filter->getConfigs()), $refs.dateRangeInput, '{{ App::currentLocale() }}')" >
-
-
-    <div>
-        <x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
-
-
-            <div
-                @class([
-                    'w-full rounded-md shadow-sm text-right' => $isTailwind,
-                    'd-inline-block w-100 mb-3 mb-md-0 input-group' => $isBootstrap,
-                ])
-            >
-                <input
-                    type="text"
-                    x-ref="dateRangeInput"
-                    x-on:click="init"
-                    value="{{ $dateString }}"
-                    wire:key="{{ $tableName }}-filter-dateRange-{{ $filterKey }}"
-                    id="{{ $tableName }}-filter-dateRange-{{ $filterKey }}"
-                    @class([
-                        'w-full inline transition duration-150 ease-in-out border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind,
-                        'd-inline-block form-control w-100 pr-2 transition duration-150 ease-in-out border border-gray rounded-sm shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isBootstrap,
-                    ])
-                />
-
-                <x-heroicon-o-calendar-days class="w-3 h-3 group-hover:opacity-0" />
-
-            </div>
-
+    <x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
+    <div
+        @class([
+            'w-full rounded-md shadow-sm text-left ' => $isTailwind,
+            'd-inline-block w-100 mb-3 mb-md-0 input-group' => $isBootstrap,
+        ])
+    >
+        <input
+            type="text"
+            x-ref="dateRangeInput"
+            x-on:click="init"
+            value="{{ $filter->getDateString(isset($this->appliedFilters[$filterKey]) ? $this->appliedFilters[$filterKey] : '') }}"
+            wire:key="{{ $filter->generateWireKey($tableName, 'dateRange') }}"
+            id="{{ $tableName }}-filter-dateRange-{{ $filterKey }}"
+            @class([
+                'w-full inline-block align-middle transition duration-150 ease-in-out border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind,
+                'd-inline-block w-100 form-control' => $isBootstrap,
+            ])
+            @if($filter->hasConfig('placeholder')) placeholder="{{ $filter->getConfig('placeholder') }}" @endif
+        />     
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/resources/views/components/tools/filters/date.blade.php b/resources/views/components/tools/filters/date.blade.php
index c23a7c120..947bb9b61 100644
--- a/resources/views/components/tools/filters/date.blade.php
+++ b/resources/views/components/tools/filters/date.blade.php
@@ -1,18 +1,17 @@
 <div>
     <x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
-
-
     <div @class([
         "rounded-md shadow-sm" => $isTailwind,
         "mb-3 mb-md-0 input-group" => $isBootstrap,
     ])>
         <input
             wire:model.live="filterComponents.{{ $filter->getKey() }}"
-            wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
+            wire:key="{{ $filter->generateWireKey($tableName, 'date') }}"
             id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
             type="date"
             @if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
             @if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
+            @if($filter->hasConfig('placeholder')) placeholder="{{ $filter->getConfig('placeholder') }}" @endif
             @class([
                 "block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600" => $isTailwind,
                 "form-control" => $isBootstrap,
diff --git a/resources/views/components/tools/filters/datetime.blade.php b/resources/views/components/tools/filters/datetime.blade.php
index 2cb073275..d05f0e087 100644
--- a/resources/views/components/tools/filters/datetime.blade.php
+++ b/resources/views/components/tools/filters/datetime.blade.php
@@ -7,11 +7,12 @@
     ])>
         <input
             wire:model.live="filterComponents.{{ $filter->getKey() }}"
-            wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
+            wire:key="{{ $filter->generateWireKey($tableName, 'datetime') }}"
             id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
             type="datetime-local"
             @if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
             @if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
+            @if($filter->hasConfig('placeholder')) placeholder="{{ $filter->getConfig('placeholder') }}" @endif
             @class([
                 "block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600" => $isTailwind,
                 "form-control" => $isBootstrap,
diff --git a/resources/views/components/tools/filters/multi-select-dropdown.blade.php b/resources/views/components/tools/filters/multi-select-dropdown.blade.php
index 705025aa6..2bd3466af 100644
--- a/resources/views/components/tools/filters/multi-select-dropdown.blade.php
+++ b/resources/views/components/tools/filters/multi-select-dropdown.blade.php
@@ -6,7 +6,7 @@
         <div class="rounded-md shadow-sm">
             <select multiple
                 wire:model.live.debounce.250ms="filterComponents.{{ $filter->getKey() }}"
-                wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
+                wire:key="{{ $filter->generateWireKey($tableName, 'multiselectdropdown') }}"
                 id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
                 class="block w-full transition duration-150 ease-in-out border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600"
             >
@@ -29,7 +29,7 @@ class="block w-full transition duration-150 ease-in-out border-gray-300 rounded-
     @elseif ($isBootstrap)
         <select multiple
             wire:model.live.debounce.250ms="filterComponents.{{ $filter->getKey() }}"
-            wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
+            wire:key="{{ $filter->generateWireKey($tableName, 'multiselectdropdown') }}"
             id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
             class="{{ $isBootstrap4 ? 'form-control' : 'form-select' }}"
         >
diff --git a/resources/views/components/tools/filters/multi-select.blade.php b/resources/views/components/tools/filters/multi-select.blade.php
index aa49decc6..4e2ec329b 100644
--- a/resources/views/components/tools/filters/multi-select.blade.php
+++ b/resources/views/components/tools/filters/multi-select.blade.php
@@ -3,7 +3,7 @@
 
 
     @if ($isTailwind)
-        <div class="rounded-md">
+        <div class="rounded-md shadow-sm">
             <div>
                 <input
                     type="checkbox"
diff --git a/resources/views/components/tools/filters/number.blade.php b/resources/views/components/tools/filters/number.blade.php
index 60f5d5ef7..b5903ab6d 100644
--- a/resources/views/components/tools/filters/number.blade.php
+++ b/resources/views/components/tools/filters/number.blade.php
@@ -8,11 +8,12 @@
     ])>
         <input
             wire:model.blur="filterComponents.{{ $filter->getKey() }}"
-            wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
+            wire:key="{{ $filter->generateWireKey($tableName, 'number') }}"
             id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
             type="number"
             @if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
             @if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
+            @if($filter->hasConfig('placeholder')) placeholder="{{ $filter->getConfig('placeholder') }}" @endif
             @class([
                 "block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600" => $isTailwind,
                 "form-control" => $isBootstrap,
diff --git a/resources/views/components/tools/filters/select.blade.php b/resources/views/components/tools/filters/select.blade.php
index 13c0f397d..55952ed88 100644
--- a/resources/views/components/tools/filters/select.blade.php
+++ b/resources/views/components/tools/filters/select.blade.php
@@ -7,7 +7,7 @@
     ])>
         <select
             wire:model.live="filterComponents.{{ $filter->getKey() }}"
-            wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
+            wire:key="{{ $filter->generateWireKey($tableName, 'select') }}"
             id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
             @class([
                     'block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind,
diff --git a/resources/views/components/tools/filters/text-field.blade.php b/resources/views/components/tools/filters/text-field.blade.php
index 04c254f11..43e99358f 100644
--- a/resources/views/components/tools/filters/text-field.blade.php
+++ b/resources/views/components/tools/filters/text-field.blade.php
@@ -7,7 +7,7 @@
     ])>
         <input
             wire:model.blur="filterComponents.{{ $filter->getKey() }}"
-            wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
+            wire:key="{{ $filter->generateWireKey($tableName, 'text') }}"
             id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
             type="text"
             @if($filter->hasConfig('placeholder')) placeholder="{{ $filter->getConfig('placeholder') }}" @endif
diff --git a/resources/views/components/tools/toolbar.blade.php b/resources/views/components/tools/toolbar.blade.php
index ffbd37b1a..3a72811fe 100644
--- a/resources/views/components/tools/toolbar.blade.php
+++ b/resources/views/components/tools/toolbar.blade.php
@@ -52,10 +52,8 @@
         @if ($component->showBulkActionsDropdownAlpine())
             <x-livewire-tables::tools.toolbar.items.bulk-actions />
         @endif
-
-        @if ($component->columnSelectIsEnabled()  && $component->isTailwind())
-            <x-livewire-tables::tools.toolbar.items.column-select /> 
-        @elseif($component->columnSelectIsEnabled() && $component->isBootstrap())
+        
+        @if ($component->columnSelectIsEnabled())
             <x-livewire-tables::tools.toolbar.items.column-select /> 
         @endif
 
diff --git a/resources/views/components/tools/toolbar/items/column-select.blade.php b/resources/views/components/tools/toolbar/items/column-select.blade.php
index 561083351..9c1f1af60 100644
--- a/resources/views/components/tools/toolbar/items/column-select.blade.php
+++ b/resources/views/components/tools/toolbar/items/column-select.blade.php
@@ -1,192 +1,191 @@
 @aware(['component', 'tableName'])
 @if ($component->isTailwind())
-<div
-                class="@if ($component->getColumnSelectIsHiddenOnMobile()) hidden sm:block @elseif ($component->getColumnSelectIsHiddenOnTablet()) hidden md:block @endif mb-4 w-full md:w-auto md:mb-0 md:ml-2"
-            >
-                <div
-                    x-data="{ open: false, childElementOpen: false }"
-                    @keydown.window.escape="if (!childElementOpen) { open = false }"
-                    x-on:click.away="if (!childElementOpen) { open = false }"
-                    class="inline-block relative w-full text-left md:w-auto"
-                    wire:key="{{ $tableName }}-column-select-button"
+<div class="@if ($component->getColumnSelectIsHiddenOnMobile()) hidden sm:block @elseif ($component->getColumnSelectIsHiddenOnTablet()) hidden md:block @endif mb-4 w-full md:w-auto md:mb-0 md:ml-2">
+    <div
+        x-data="{ open: false, childElementOpen: false }"
+        @keydown.window.escape="if (!childElementOpen) { open = false }"
+        x-on:click.away="if (!childElementOpen) { open = false }"
+        class="inline-block relative w-full text-left md:w-auto"
+        wire:key="{{ $tableName }}-column-select-button"
+    >
+        <div>
+            <span class="rounded-md shadow-sm">
+                <button
+                    x-on:click="open = !open"
+                    type="button"
+                    class="inline-flex justify-center px-4 py-2 w-full text-sm font-medium text-gray-700 bg-white rounded-md border border-gray-300 shadow-sm hover:bg-gray-50 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600"
+                    aria-haspopup="true"
+                    x-bind:aria-expanded="open"
+                    aria-expanded="true"
                 >
-                    <div>
-                        <span class="rounded-md shadow-sm">
-                            <button
-                                x-on:click="open = !open"
-                                type="button"
-                                class="inline-flex justify-center px-4 py-2 w-full text-sm font-medium text-gray-700 bg-white rounded-md border border-gray-300 shadow-sm hover:bg-gray-50 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600"
-                                aria-haspopup="true"
-                                x-bind:aria-expanded="open"
-                                aria-expanded="true"
-                            >
-                                @lang('Columns')
+                    @lang('Columns')
 
-                                <x-heroicon-m-chevron-down class="-mr-1 ml-2 h-5 w-5" />
-                            </button>
-                        </span>
-                    </div>
+                    <x-heroicon-m-chevron-down class="-mr-1 ml-2 h-5 w-5" />
+                </button>
+            </span>
+        </div>
 
-                    <div
-                        x-cloak x-show="open"
-                        x-transition:enter="transition ease-out duration-100"
-                        x-transition:enter-start="transform opacity-0 scale-95"
-                        x-transition:enter-end="transform opacity-100 scale-100"
-                        x-transition:leave="transition ease-in duration-75"
-                        x-transition:leave-start="transform opacity-100 scale-100"
-                        x-transition:leave-end="transform opacity-0 scale-95"
-                        class="absolute right-0 z-50 mt-2 w-full bg-white rounded-md divide-y divide-gray-100 ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right md:w-48 focus:outline-none"
-                    >
-                        <div class="bg-white rounded-md shadow-xs dark:bg-gray-700 dark:text-white">
-                            <div class="p-2" role="menu" aria-orientation="vertical"
-                                 aria-labelledby="column-select-menu">
-                                <div wire:key="{{ $tableName }}-columnSelect-selectAll-{{ rand(0,1000) }}">
-                                    <label
-                                        wire:loading.attr="disabled"
-                                        class="inline-flex items-center px-2 py-1 disabled:opacity-50 disabled:cursor-wait"
-                                    >
-                                        <input
-                                            class="text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600 disabled:opacity-50 disabled:cursor-wait"
-                                            wire:loading.attr="disabled" 
-                                            type="checkbox"
-                                            @checked($component->getSelectableSelectedColumns()->count() == $component->getSelectableColumns()->count())
-                                            @if($component->getSelectableSelectedColumns()->count() == $component->getSelectableColumns()->count())  wire:click="deselectAllColumns" @else wire:click="selectAllColumns" @endif
-                                        >
-                                        <span class="ml-2">{{ __('All Columns') }}</span>
-                                    </label>
-                                </div>
+        <div
+            x-cloak x-show="open"
+            x-transition:enter="transition ease-out duration-100"
+            x-transition:enter-start="transform opacity-0 scale-95"
+            x-transition:enter-end="transform opacity-100 scale-100"
+            x-transition:leave="transition ease-in duration-75"
+            x-transition:leave-start="transform opacity-100 scale-100"
+            x-transition:leave-end="transform opacity-0 scale-95"
+            class="absolute right-0 z-50 mt-2 w-full bg-white rounded-md divide-y divide-gray-100 ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right md:w-48 focus:outline-none"
+        >
+            <div class="bg-white rounded-md shadow-xs dark:bg-gray-700 dark:text-white">
+                <div class="p-2" role="menu" aria-orientation="vertical"
+                        aria-labelledby="column-select-menu"
+                >
+                    <div wire:key="{{ $tableName }}-columnSelect-selectAll-{{ rand(0,1000) }}">
+                        <label
+                            wire:loading.attr="disabled"
+                            class="inline-flex items-center px-2 py-1 disabled:opacity-50 disabled:cursor-wait"
+                        >
+                            <input
+                                class="text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600 disabled:opacity-50 disabled:cursor-wait"
+                                wire:loading.attr="disabled" 
+                                type="checkbox"
+                                @checked($component->getSelectableSelectedColumns()->count() == $component->getSelectableColumns()->count())
+                                @if($component->getSelectableSelectedColumns()->count() == $component->getSelectableColumns()->count())  wire:click="deselectAllColumns" @else wire:click="selectAllColumns" @endif
+                            >
+                            <span class="ml-2">{{ __('All Columns') }}</span>
+                        </label>
+                    </div>
 
-                                @foreach ($component->getColumnsForColumnSelect() as $columnSlug => $columnTitle)
-                                        <div
-                                            wire:key="{{ $tableName }}-columnSelect-{{ $loop->index }}"
-                                        >
-                                            <label
-                                                wire:loading.attr="disabled"
-                                                wire:target="selectedColumns"
-                                                class="inline-flex items-center px-2 py-1 disabled:opacity-50 disabled:cursor-wait"
-                                            >
-                                                <input
-                                                    class="text-indigo-600 rounded border-gray-300 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600 disabled:opacity-50 disabled:cursor-wait"
-                                                    wire:model.live="selectedColumns" wire:target="selectedColumns"
-                                                    wire:loading.attr="disabled" type="checkbox"
-                                                    value="{{ $columnSlug }}" />
-                                                <span class="ml-2">{{ $columnTitle }}</span>
-                                            </label>
-                                        </div>
-                                @endforeach
-                            </div>
+                    @foreach ($component->getColumnsForColumnSelect() as $columnSlug => $columnTitle)
+                        <div
+                            wire:key="{{ $tableName }}-columnSelect-{{ $loop->index }}"
+                        >
+                            <label
+                                wire:loading.attr="disabled"
+                                wire:target="selectedColumns"
+                                class="inline-flex items-center px-2 py-1 disabled:opacity-50 disabled:cursor-wait"
+                            >
+                                <input
+                                    class="text-indigo-600 rounded border-gray-300 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600 disabled:opacity-50 disabled:cursor-wait"
+                                    wire:model.live="selectedColumns" wire:target="selectedColumns"
+                                    wire:loading.attr="disabled" type="checkbox"
+                                    value="{{ $columnSlug }}" />
+                                <span class="ml-2">{{ $columnTitle }}</span>
+                            </label>
                         </div>
-                    </div>
+                    @endforeach
                 </div>
             </div>
+        </div>
+    </div>
+</div>
 @elseif ($component->isBootstrap())
 <div
-                @class([
-                    'd-none d-sm mb-3 mb-md-0 pl-0 pl-md-2' => $component->getColumnSelectIsHiddenOnMobile() && $component->isBootstrap4(),
-                    'd-none d-md-block mb-3 mb-md-0 pl-0 pl-md-2' => $component->getColumnSelectIsHiddenOnTablet() && $component->isBootstrap4(),
-                    'd-none d-sm-block mb-3 mb-md-0 md-0 ms-md-2' => $component->getColumnSelectIsHiddenOnMobile() && $component->isBootstrap5(),
-                    'd-none d-md-block mb-3 mb-md-0 md-0 ms-md-2' => $component->getColumnSelectIsHiddenOnTablet() && $component->isBootstrap5(),
-                ])
-            >
-                <div
-                    x-data="{ open: false, childElementOpen: false }"
-                    x-on:keydown.escape.stop="if (!childElementOpen) { open = false }"
-                    x-on:mousedown.away="if (!childElementOpen) { open = false }"
-                    @class([
-                        'dropdown d-block d-md-inline' => $component->isBootstrap(),
-                    ])
-                    wire:key="{{ $tableName }}-column-select-button"
-                >
-                    <button
-                        x-on:click="open = !open"
-                        @class([
-                            'btn dropdown-toggle d-block w-100 d-md-inline' => $component->isBootstrap(),
-                        ])
-                        type="button" id="{{ $tableName }}-columnSelect" aria-haspopup="true"
-                        x-bind:aria-expanded="open"
-                    >
-                        @lang('Columns')
-                    </button>
+    @class([
+        'd-none d-sm mb-3 mb-md-0 pl-0 pl-md-2' => $component->getColumnSelectIsHiddenOnMobile() && $component->isBootstrap4(),
+        'd-none d-md-block mb-3 mb-md-0 pl-0 pl-md-2' => $component->getColumnSelectIsHiddenOnTablet() && $component->isBootstrap4(),
+        'd-none d-sm-block mb-3 mb-md-0 md-0 ms-md-2' => $component->getColumnSelectIsHiddenOnMobile() && $component->isBootstrap5(),
+        'd-none d-md-block mb-3 mb-md-0 md-0 ms-md-2' => $component->getColumnSelectIsHiddenOnTablet() && $component->isBootstrap5(),
+    ])
+>
+    <div
+        x-data="{ open: false, childElementOpen: false }"
+        x-on:keydown.escape.stop="if (!childElementOpen) { open = false }"
+        x-on:mousedown.away="if (!childElementOpen) { open = false }"
+        @class([
+            'dropdown d-block d-md-inline' => $component->isBootstrap(),
+        ])
+        wire:key="{{ $tableName }}-column-select-button"
+    >
+        <button
+            x-on:click="open = !open"
+            @class([
+                'btn dropdown-toggle d-block w-100 d-md-inline' => $component->isBootstrap(),
+            ])
+            type="button" id="{{ $tableName }}-columnSelect" aria-haspopup="true"
+            x-bind:aria-expanded="open"
+        >
+            @lang('Columns')
+        </button>
 
-                    <div
-                        x-bind:class="{ 'show': open }"
-                        @class([
-                            'dropdown-menu dropdown-menu-right w-100 mt-0 mt-md-3' => $component->isBootstrap4(),
-                            'dropdown-menu dropdown-menu-end w-100' => $component->isBootstrap5(),
-                        ])
-                        aria-labelledby="columnSelect-{{ $tableName }}"
-                    >
-                        @if($component->isBootstrap4())
-                            <div wire:key="{{ $tableName }}-columnSelect-selectAll-{{ rand(0,1000) }}">
-                                <label wire:loading.attr="disabled" class="px-2 mb-1">
-                                    <input
-                                        wire:loading.attr="disabled"
-                                        type="checkbox"
-                                        @if($component->getSelectableSelectedColumns()->count() == $component->getSelectableColumns()->count()) checked wire:click="deselectAllColumns" @else unchecked wire:click="selectAllColumns" @endif
-                                    />
+        <div
+            x-bind:class="{ 'show': open }"
+            @class([
+                'dropdown-menu dropdown-menu-right w-100 mt-0 mt-md-3' => $component->isBootstrap4(),
+                'dropdown-menu dropdown-menu-end w-100' => $component->isBootstrap5(),
+            ])
+            aria-labelledby="columnSelect-{{ $tableName }}"
+        >
+            @if($component->isBootstrap4())
+                <div wire:key="{{ $tableName }}-columnSelect-selectAll-{{ rand(0,1000) }}">
+                    <label wire:loading.attr="disabled" class="px-2 mb-1">
+                        <input
+                            wire:loading.attr="disabled"
+                            type="checkbox"
+                            @if($component->getSelectableSelectedColumns()->count() == $component->getSelectableColumns()->count()) checked wire:click="deselectAllColumns" @else unchecked wire:click="selectAllColumns" @endif
+                        />
 
-                                    <span class="ml-2">{{ __('All Columns') }}</span>
-                                </label>
-                            </div>
-                        @elseif($component->isBootstrap5())
-                            <div class="form-check ms-2" wire:key="{{ $tableName }}-columnSelect-selectAll-{{ rand(0,1000) }}">
-                                <input
-                                    wire:loading.attr="disabled"
-                                    type="checkbox"
-                                    class="form-check-input"
-                                    @if($component->getSelectableSelectedColumns()->count() == $component->getSelectableColumns()->count()) checked wire:click="deselectAllColumns" @else unchecked wire:click="selectAllColumns" @endif
-                                />
+                        <span class="ml-2">{{ __('All Columns') }}</span>
+                    </label>
+                </div>
+            @elseif($component->isBootstrap5())
+                <div class="form-check ms-2" wire:key="{{ $tableName }}-columnSelect-selectAll-{{ rand(0,1000) }}">
+                    <input
+                        wire:loading.attr="disabled"
+                        type="checkbox"
+                        class="form-check-input"
+                        @if($component->getSelectableSelectedColumns()->count() == $component->getSelectableColumns()->count()) checked wire:click="deselectAllColumns" @else unchecked wire:click="selectAllColumns" @endif
+                    />
 
-                                <label wire:loading.attr="disabled" class="form-check-label">
-                                    {{ __('All Columns') }}
-                                </label>
-                            </div>
-                        @endif
+                    <label wire:loading.attr="disabled" class="form-check-label">
+                        {{ __('All Columns') }}
+                    </label>
+                </div>
+            @endif
 
-                        @foreach ($component->getColumnsForColumnSelect() as $columnSlug => $columnTitle)
-                                <div
-                                    wire:key="{{ $tableName }}-columnSelect-{{ $loop->index }}"
-                                    @class([
-                                        'form-check ms-2' => $component->isBootstrap5(),
-                                    ])
-                                >
-                                    @if ($component->isBootstrap4())
-                                        <label
-                                            wire:loading.attr="disabled"
-                                            wire:target="selectedColumns"
-                                            class="px-2 {{ $loop->last ? 'mb-0' : 'mb-1' }}"
-                                        >
-                                            <input
-                                                wire:model.live="selectedColumns"
-                                                wire:target="selectedColumns"
-                                                wire:loading.attr="disabled" type="checkbox"
-                                                value="{{ $columnSlug }}"
-                                            />
-                                            <span class="ml-2">
-                                                {{ $columnTitle }}
-                                            </span>
-                                        </label>
-                                    @elseif($component->isBootstrap5())
-                                        <input
-                                            wire:model.live="selectedColumns"
-                                            wire:target="selectedColumns"
-                                            wire:loading.attr="disabled"
-                                            type="checkbox"
-                                            class="form-check-input"
-                                            value="{{ $columnSlug }}"
-                                        />
-                                        <label
-                                            wire:loading.attr="disabled"
-                                            wire:target="selectedColumns"
-                                            class="{{ $loop->last ? 'mb-0' : 'mb-1' }} form-check-label"
-                                        >
-                                            {{ $columnTitle }}
-                                        </label>
-                                    @endif
-                                </div>
-                        @endforeach
-                    </div>
+            @foreach ($component->getColumnsForColumnSelect() as $columnSlug => $columnTitle)
+                <div
+                    wire:key="{{ $tableName }}-columnSelect-{{ $loop->index }}"
+                    @class([
+                        'form-check ms-2' => $component->isBootstrap5(),
+                    ])
+                >
+                    @if ($component->isBootstrap4())
+                        <label
+                            wire:loading.attr="disabled"
+                            wire:target="selectedColumns"
+                            class="px-2 {{ $loop->last ? 'mb-0' : 'mb-1' }}"
+                        >
+                            <input
+                                wire:model.live="selectedColumns"
+                                wire:target="selectedColumns"
+                                wire:loading.attr="disabled" type="checkbox"
+                                value="{{ $columnSlug }}"
+                            />
+                            <span class="ml-2">
+                                {{ $columnTitle }}
+                            </span>
+                        </label>
+                    @elseif($component->isBootstrap5())
+                        <input
+                            wire:model.live="selectedColumns"
+                            wire:target="selectedColumns"
+                            wire:loading.attr="disabled"
+                            type="checkbox"
+                            class="form-check-input"
+                            value="{{ $columnSlug }}"
+                        />
+                        <label
+                            wire:loading.attr="disabled"
+                            wire:target="selectedColumns"
+                            class="{{ $loop->last ? 'mb-0' : 'mb-1' }} form-check-label"
+                        >
+                            {{ $columnTitle }}
+                        </label>
+                    @endif
                 </div>
-            </div>
+            @endforeach
+        </div>
+    </div>
+</div>
 
 @endif
diff --git a/src/Views/Filters/DateRangeFilter.php b/src/Views/Filters/DateRangeFilter.php
index 78a77b965..5c8062bcc 100644
--- a/src/Views/Filters/DateRangeFilter.php
+++ b/src/Views/Filters/DateRangeFilter.php
@@ -170,6 +170,26 @@ public function isEmpty(array|string $value): bool
         return false;
     }
 
+    public function getDateString(string|array $dateInput): string
+    {
+        if ($dateInput != '') {
+            if (is_array($dateInput)) {
+                $startDate = isset($dateInput['minDate']) ? $dateInput['minDate'] : (isset($dateInput[1]) ? $dateInput[1] : date('Y-m-d'));
+                $endDate = isset($dateInput['maxDate']) ? $dateInput['maxDate'] : (isset($dateInput[0]) ? $dateInput[0] : date('Y-m-d'));
+            } else {
+                $dateArray = explode(',', $dateInput);
+                $startDate = isset($dateArray[0]) ? $dateArray[0] : date('Y-m-d');
+                $endDate = isset($dateArray[2]) ? $dateArray[2] : date('Y-m-d');
+            }
+
+            return $startDate.' to '.$endDate;
+
+        }
+
+        return '';
+
+    }
+
     public function render(string $filterLayout, string $tableName, bool $isTailwind, bool $isBootstrap4, bool $isBootstrap5): string|\Illuminate\Contracts\Foundation\Application|\Illuminate\View\View|\Illuminate\View\Factory
     {
         $this->getOptions();
diff --git a/src/Views/Traits/Helpers/FilterHelpers.php b/src/Views/Traits/Helpers/FilterHelpers.php
index 8dd8efb17..bf003643c 100644
--- a/src/Views/Traits/Helpers/FilterHelpers.php
+++ b/src/Views/Traits/Helpers/FilterHelpers.php
@@ -250,4 +250,9 @@ public function hasFilterLabelAttributes(): bool
     {
         return $this->getFilterLabelAttributes() != ['default' => true] && $this->getFilterLabelAttributes() != ['default' => false];
     }
+
+    public function generateWireKey(string $tableName, string $filterType, string $extraData = ''): string
+    {
+        return $tableName.'-filter-'.$filterType.'-'.$this->getKey().($extraData != '' ? '-'.$extraData : '').($this->hasCustomPosition() ? '-'.$this->getCustomPosition() : '');
+    }
 }
diff --git a/tests/Views/Filters/DateRangeFilterTest.php b/tests/Views/Filters/DateRangeFilterTest.php
index 633053a63..2616ca152 100644
--- a/tests/Views/Filters/DateRangeFilterTest.php
+++ b/tests/Views/Filters/DateRangeFilterTest.php
@@ -380,4 +380,15 @@ public function can_check_if_filter_is_reset_by_clear_button(): void
 
         $this->assertFalse($filter->isResetByClearButton());
     }
+
+    /** @test */
+    public function can_get_datestring(): void
+    {
+        $filter = DateRangeFilter::make('Active');
+        $this->assertSame('', $filter->getDateString(''));
+        $this->assertSame('2020-01-01 to 2020-02-02', $filter->getDateString(['2020-02-02', '2020-01-01']));
+        $this->assertSame('2021-03-03 to 2021-04-04', $filter->getDateString(['minDate' => '2021-03-03', 'maxDate' => '2021-04-04']));
+        $this->assertSame('2022-05-05 to 2022-06-06', $filter->getDateString('2022-05-05,to,2022-06-06'));
+
+    }
 }
diff --git a/tests/Views/Traits/Configuration/FilterConfigurationTest.php b/tests/Views/Traits/Configuration/FilterConfigurationTest.php
index 6e987435d..1691125b6 100644
--- a/tests/Views/Traits/Configuration/FilterConfigurationTest.php
+++ b/tests/Views/Traits/Configuration/FilterConfigurationTest.php
@@ -129,4 +129,14 @@ public function can_be_hidden_from_all(): void
         $this->assertTrue($filter->isHiddenFromFilterCount());
         $this->assertTrue($filter->isResetByClearButton());
     }
+
+    /** @test */
+    public function can_set_custom_position(): void
+    {
+        $filter = SelectFilter::make('Active');
+        $this->assertFalse($filter->hasCustomPosition());
+        $filter->setFilterPosition('header');
+        $this->assertTrue($filter->hasCustomPosition());
+        $this->assertSame('header', $filter->getCustomPosition());
+    }
 }
diff --git a/tests/Views/Traits/Helpers/FilterHelpersTest.php b/tests/Views/Traits/Helpers/FilterHelpersTest.php
index e1b45d22b..6b613492e 100644
--- a/tests/Views/Traits/Helpers/FilterHelpersTest.php
+++ b/tests/Views/Traits/Helpers/FilterHelpersTest.php
@@ -380,4 +380,30 @@ public function can_get_filter_label_attributes(): void
         $this->assertSame($filter1->getFilterLabelAttributes(), ['default' => false, 'class' => 'text-3xl']);
 
     }
+
+    /** @test */
+    public function can_get_filter_wire_key(): void
+    {
+        $filter1 = TextFilter::make('Filter1');
+        $tableName = 'test1';
+        $filterType = 'textfilter';
+        $filterKey = $filter1->getKey();
+
+        $this->assertSame($filter1->generateWireKey($tableName, $filterType), $tableName.'-filter-'.$filterType.'-'.$filterKey);
+    }
+
+    /** @test */
+    public function can_get_filter_wire_key_custom_position(): void
+    {
+        $filter1 = TextFilter::make('Filter1');
+        $tableName = 'test1';
+        $filterType = 'textfilter';
+        $customPosition = 'header';
+
+        $filterKey = $filter1->getKey();
+        $filter1->setFilterPosition($customPosition);
+        $this->assertTrue($filter1->hasCustomPosition());
+
+        $this->assertSame($filter1->generateWireKey($tableName, $filterType), $tableName.'-filter-'.$filterType.'-'.$filterKey.'-'.$customPosition);
+    }
 }