v3.7.2 (#2257)

* Link column fix (#2223)

* Add handling for From field for "LinkColumn"

* Fix styling

* Update ChangeLog

* docs: add reminder of requirement to use toggle method (#2208)

Co-authored-by: Joe <[email protected]>

* Update IsNumericFilter.php (#2230)

* Link column fix (#2223) (#2224)

* Link column fix (#2223)

* Add handling for From field for "LinkColumn"

* Update ChangeLog

* Update IsNumericFilter.php

Fixes issues 2229

---------

Co-authored-by: Joe <[email protected]>

* Fix styling

* Boolean filter for bootstrap (#2244)

* Add BooleanFilter option for Bootstrap

* Add BS4 Support

* Update docs

* Fixes for livewire component column (#2245)

* Initial Commit

* Fix styling

* Initial Commit

* Fix styling

* Adjust test

* Fix styling

* Use test-livewire-column-component

* Additional Tests for LivewireComponentColumn

* Fix styling

* Add getContents Test

* TypeHint/PHPDoc Tidying (#2246)

* Fix broken typehints

* Minor tweaks to Footer/SecondaryHeader to ensure presence of callback prior to executing

* Fix styling

* PHPDoc additions

* Fix styling

* Update ChangeLog for TypeHintFixes

* Fix styling

* FilterPillData and StandardFilterPillData phpdocs

* Fix styling

* Add Wrapper Options to ArrayColumn (#2255)

* Add Wrapper Options to FlexCol

* Fix styling

* Moving getContents Back

* Fix styling

* Add Docs

* Add Wrapper Manual Tests

* Fix styling

* Update to test separator

* Fix styling

* Improved pagination UX (#2251)

* Link column fix (#2223) (#2224)

* Link column fix (#2223)

* Add handling for From field for "LinkColumn"

* Update ChangeLog

* Improved pagination UX

---------

Co-authored-by: Joe <[email protected]>

* Fixed collapsed function bug with tailwind CSS on mobile version (#2228)

* v3.7.2 updates (#2256)

---------

Co-authored-by: da-mask <[email protected]>
Co-authored-by: G4Zz0L1 <[email protected]>
Co-authored-by: Daniel Škopek <[email protected]>
Co-authored-by: CarlosChub27 <[email protected]>

Author: 5 people

CHANGELOG.md

@@ -2,9 +2,23 @@
 
 All notable changes to `laravel-livewire-tables` will be documented in this file
 
+## [v3.7.2] - 2025-05-03
+### Bug Fixes
+- Improved Pagination UX for Bootstrap 4 by @daniel-skopek in https://github.com/rappasoft/laravel-livewire-tables/pull/2251
+- Fixes for livewire component column by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/2245
+- Boolean filter for bootstrap by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/2244
+- Update IsNumericFilter.php by @G4Zz0L1 in https://github.com/rappasoft/laravel-livewire-tables/pull/2230
+- Fixed collapsed function bug with tailwind CSS on mobile version by CarlosChub27 in https://github.com/rappasoft/laravel-livewire-tables/pull/2228
+
+### New Features
+- Add Wrapper Options to ArrayColumn by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/2255
+
+### Tweaks
+- Tidying PHPDocs by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/2246
+
 ## [v3.7.1] - 2025-02-28
 ### Bug Fixes
-- Ensure that LinkColumn is included in query if "from" is defined
+- Ensure that LinkColumn is included in query if "from" is defined by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/2224
 
 ## [v3.7.0] - 2025-02-27
 

docs/column-types/array_column.md

@@ -13,14 +13,64 @@ ArrayColumn::make('notes', 'name')
     ->sortable(),
 ```
 
-### Empty Value
+## Empty Value
 You may define the default/empty value using the "emptyValue" method
 
 ```php
 ArrayColumn::make('notes', 'name')
     ->emptyValue('Unknown'),
 ```
 
+## Wrapping the Output
+
+As the ArrayColumn is designed to handle multiple related records, you can choose to wrap these for improved UX.
+
+It is recommended that you utilise the built-in flexCol or flexRow approaches, which will also disable the separator
+
+### flexCol
+This adds either:
+- Tailwind: 'flex flex-col'
+- Bootstrap: 'd-flex d-flex-col'
+
+And merges any attributes specified in the sole parameter (as an array)
+```php
+ArrayColumn::make('notes', 'name')
+    ->data(fn($value, $row) => ($row->notes))
+    ->outputFormat(fn($index, $value) => "<a href='".$value->id."'>".$value->name."</a>")
+    ->flexCol(['class' => 'bg-red-500'])
+    ->sortable(),
+```
+
+### flexRow
+
+This adds either:
+- Tailwind: 'flex flex-row'
+- Bootstrap: 'd-flex d-flex-row'
+
+And merges any attributes specified in the sole parameter (as an array)
+```php
+ArrayColumn::make('notes', 'name')
+    ->data(fn($value, $row) => ($row->notes))
+    ->outputFormat(fn($index, $value) => "<a href='".$value->id."'>".$value->name."</a>")
+    ->flexRow(['class' => 'bg-red-500'])
+    ->sortable(),
+```
+
+### Manually
+
+You can also specify a wrapperStart and wrapperEnd, for example, for an unordered list:
+
+```php
+ArrayColumn::make('notes', 'name')
+    ->data(fn($value, $row) => ($row->notes))
+    ->outputFormat(fn($index, $value) => "<li><a href='".$value->id."'>".$value->name."</a></li>")
+    ->wrapperStart("<ul class='bg-blue'>")
+    ->wrapperEnd("</ul>")
+    ->sortable(),
+```
+
+## See Also
+
 Please also see the following for other available methods:
 <ul>
     <li>

docs/column-types/boolean_columns.md

@@ -89,7 +89,7 @@ BooleanColumn::make('Active', 'status')
     ->toggleable('changeStatus'),
 ```
 
-Then your "changeStatus" method may look like
+Then your "changeStatus" method may look like (make sure you are selecting the `id` in the query)
 ```php
     public function changeStatus(int $id)
     {
@@ -108,7 +108,7 @@ BooleanColumn::make('Active', 'status')
     ->toggleable('changeStatus'),
 ```
 
-Then your "changeStatus" method may look like
+Then your "changeStatus" method may look like (make sure you are selecting the `id` in the query)
 ```php
     public function changeStatus(int $id)
     {

docs/filter-types/filters-boolean.md

@@ -4,7 +4,7 @@ weight: 2
 ---
 
 ## Beta
-This is currently in beta, and will only work with Tailwind.
+This is currently in beta, but should work with Tailwind, Bootstrap 4 and Bootstrap 5 as of latest version
 
 ## Details
 

phpstan.neon

@@ -27,10 +27,6 @@ parameters:
             - src/Traits/Helpers/QueryHelpers.php
             - src/Views/Columns/Traits/HasSlot.php
             - src/Views/Columns/Traits/Helpers/ArrayColumnHelpers.php
-        - identifier: instanceof.alwaysTrue
-          paths:
-            - src/Views/Columns/Traits/HasFooter.php
-            - src/Views/Columns/Traits/HasSecondaryHeader.php
         - identifier: function.alreadyNarrowedType
           paths: 
             - src/Views/Columns/Traits/Helpers/ArrayColumnHelpers.php
@@ -41,3 +37,6 @@ parameters:
             - src/Views/Filters/Traits/HasOptions.php
             - src/Views/Traits/Core/HasTheme.php
             - src/Views/Traits/Core/HasView.php
+        - identifier: unset.possiblyHookedProperty
+          paths:
+            - src/Traits/Configuration/CollapsingColumnConfiguration.php

resources/views/components/table/collapsed-columns.blade.php

@@ -28,7 +28,7 @@
                 @foreach($this->getCollapsedColumnsForContent as $colIndex => $column)
 
                     <p wire:key="{{ $tableName }}-row-{{ $row->{$primaryKey} }}-collapsed-contents-{{ $colIndex }}" @class([
-                            'block mb-2 hidden' => $isTailwind,
+                            'block mb-2' => $isTailwind,
                             'sm:block' => $isTailwind && $column->shouldCollapseAlways(),
                             'sm:block md:hidden' => $isTailwind && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && $column->shouldCollapseOnMobile(),
                             'sm:block lg:hidden' => $isTailwind && !$column->shouldCollapseAlways() && ($column->shouldCollapseOnTablet() || $column->shouldCollapseOnMobile()),

resources/views/components/tools/filters/boolean.blade.php

@@ -1,29 +1,39 @@
 @php
     $defaultValue = ($filter->hasFilterDefaultValue() ? (bool) $filter->getFilterDefaultValue() : false)
 @endphp
-<div class="flex flex-cols"
-    x-data="newBooleanFilter('{{ $filter->getKey() }}', '{{ $tableName }}', '{{ $defaultValue }}')"
->
-    <x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
-    <input id="thisId" type="checkbox" name="switch" class="hidden" :checked="value" />
+@if($isTailwind)
+    <div class="flex flex-cols" x-data="newBooleanFilter('{{ $filter->getKey() }}', '{{ $tableName }}', '{{ $defaultValue }}')">
+        <x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
+        <input id="thisId" type="checkbox" name="switch" class="hidden" :checked="value" />
 
-    <button x-cloak {{ $filterInputAttributes->merge([
-                ":class" => "(value == 1 || value == true) ? '".$filterInputAttributes['activeColor']."' : '".$filterInputAttributes['inactiveColor']."'",
-            ])
-            ->class([
-                'relative inline-flex h-6 py-0.5 ml-4 focus:outline-none rounded-full w-10' => ($filterInputAttributes['default-styling'] ?? true)
-            ])
-            ->except(['default-styling','default-colors','activeColor','inactiveColor','blobColor'])
-        }}>
-        <span :class="(value == 1 || value == true) ? 'translate-x-[18px]' : 'translate-x-0.5'" class="w-5 h-5 duration-200 ease-in-out rounded-full shadow-md {{ $filterInputAttributes['blobColor'] }}"></span>
-    </button>
-    <template x-if="(value == 1 || value == true)">
-        <button @click="toggleStatusWithReset" type="button"
-            class="flex-shrink-0 ml-1 h-6 w-6 rounded-full inline-flex items-center justify-center text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:outline-none focus:bg-indigo-500 focus:text-white"
-        >
-
-            <span class="sr-only">{{ __($localisationPath.'Remove filter option') }}</span>
-            <x-heroicon-m-x-mark class="h-6 w-6" />
+        <button x-cloak {{ $filterInputAttributes->merge([
+                    ":class" => "(value == 1 || value == true) ? '".$filterInputAttributes['activeColor']."' : '".$filterInputAttributes['inactiveColor']."'",
+                ])
+                ->class([
+                    'relative inline-flex h-6 py-0.5 ml-4 focus:outline-none rounded-full w-10' => ($filterInputAttributes['default-styling'] ?? true)
+                ])
+                ->except(['default-styling','default-colors','activeColor','inactiveColor','blobColor'])
+            }}>
+            <span :class="(value == 1 || value == true) ? 'translate-x-[18px]' : 'translate-x-0.5'" class="w-5 h-5 duration-200 ease-in-out rounded-full shadow-md {{ $filterInputAttributes['blobColor'] }}"></span>
         </button>
-    </template>
-</div>
+        <template x-if="(value == 1 || value == true)">
+            <button @click="toggleStatusWithReset" type="button"
+                class="flex-shrink-0 ml-1 h-6 w-6 rounded-full inline-flex items-center justify-center text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:outline-none focus:bg-indigo-500 focus:text-white"
+            >
+
+                <span class="sr-only">{{ __($localisationPath.'Remove filter option') }}</span>
+                <x-heroicon-m-x-mark class="h-6 w-6" />
+            </button>
+        </template>
+    </div>
+@elseif($isBootstrap4)
+    <div class="custom-control custom-switch" x-data="newBooleanFilter('{{ $filter->getKey() }}', '{{ $tableName }}', '{{ $defaultValue }}')">
+        <input type="checkbox" class="custom-control-input" id="customSwitch1" :checked="value" @click="toggleStatusWithUpdate" x-ref="switchButton">
+        <x-livewire-tables::tools.filter-label class="custom-control-label" for="customSwitch1" :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
+    </div>
+@else
+    <div class="form-check form-switch" x-data="newBooleanFilter('{{ $filter->getKey() }}', '{{ $tableName }}', '{{ $defaultValue }}')">
+        <x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
+        <input id="thisId" type="checkbox" name="switch" class="form-check-input" role="switch" :checked="value" @click="toggleStatusWithUpdate" x-ref="switchButton"/>
+    </div>
+@endif

resources/views/specific/bootstrap-4/pagination.blade.php

@@ -3,7 +3,7 @@
         @php(isset($this->numberOfPaginatorsRendered[$paginator->getPageName()]) ? $this->numberOfPaginatorsRendered[$paginator->getPageName()]++ : $this->numberOfPaginatorsRendered[$paginator->getPageName()] = 1)
 
         <nav>
-            <ul class="pagination">
+            <ul class="pagination d-flex flex-wrap justify-content-start">
                 {{-- Previous Page Link --}}
                 @if ($paginator->onFirstPage())
                     <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">

src/DataTransferObjects/DebuggableData.php

@@ -6,13 +6,13 @@
 
 class DebuggableData
 {
-    public DataTableComponent $component;
-
-    public function __construct(DataTableComponent $component)
-    {
-        $this->component = $component;
-    }
+    public function __construct(public DataTableComponent $component) {}
 
+    /**
+     * Returns data to an array
+     *
+     * @return array<mixed>
+     */
     public function toArray(): array
     {
         return [

src/DataTransferObjects/FilterGenericData.php

@@ -4,25 +4,13 @@
 
 class FilterGenericData
 {
-    public string $tableName;
-
-    public string $filterLayout;
-
-    public bool $isTailwind = false;
-
-    public bool $isBootstrap4 = false;
-
-    public bool $isBootstrap5 = false;
-
-    public function __construct(string $tableName, string $filterLayout, bool $isTailwind = false, bool $isBootstrap4 = false, bool $isBootstrap5 = false)
-    {
-        $this->tableName = $tableName;
-        $this->filterLayout = $filterLayout;
-        $this->isTailwind = $isTailwind;
-        $this->isBootstrap4 = $isBootstrap4;
-        $this->isBootstrap5 = $isBootstrap5;
-    }
+    public function __construct(public string $tableName, public string $filterLayout, public bool $isTailwind = false, public bool $isBootstrap4 = false, public bool $isBootstrap5 = false) {}
 
+    /**
+     * Convert To Array
+     *
+     * @return array<mixed>
+     */
     public function toArray(): array
     {
         return [