v3.4.22 Master Release

CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to `laravel-livewire-tables` will be documented in this file
 
+## [v3.4.22] - 2024-09-29
+### Bug Fixes
+- Fix Loading Placeholder Bug - Breaking Table by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1969
+
+### New Features
+- Add setPaginationWrapperAttributes by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1978
+- Add configurable areas - before-wrapper and after-wrapper by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1977
+- Add ToolsAttributes and ToolbarAttributes by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1982
+
+### Docs
+- Add getTitle reference for setTdAttributes/setTrAttributes by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1976
+- Add setToolsAttributes and setToolBarAttributes docs by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1984
+- Add docs for the ColumnSelect lifecycle hooks by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1983
+
 ## [v3.4.21] - 2024-09-25
 ### Bug Fixes
 - Remove persist from getFilterGenericData by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1966

docs/columns/styling.md

@@ -45,6 +45,11 @@ Below is a copy of the relevant sections from [datatable styling](../datatable/s
 
 Set a list of attributes to override on the th elements.  
 
+If your Column does not have a field (e.g. a label column), then you may use the following, which will utilise the first parameter in Column::make()
+```php
+  $column->getTitle()
+```
+
 ```php
 public function configure(): void
 {
@@ -204,6 +209,11 @@ public function configure(): void
 
 Set a list of attributes to override on the td elements.  For example, changing the background color between red/green based on whether the "total" field is over or under 1000.
 
+If your Column does not have a field (e.g. a label column), then you may use the following, which will utilise the first parameter in Column::make()
+```php
+  $column->getTitle()
+```
+
 ```php
 public function configure(): void
 {

docs/datatable/configurable-areas.md

@@ -26,6 +26,7 @@ You can use the `setConfigurableAreas` method to set multiple areas that you wan
 public function configure(): void
 {
   $this->setConfigurableAreas([
+    'before-wrapper' => 'path.to.my.view',
     'before-tools' => 'path.to.my.view',
     'toolbar-left-start' => 'path.to.my.view',
     'toolbar-left-end' => 'path.to.my.view',
@@ -35,6 +36,7 @@ public function configure(): void
     'after-toolbar' => 'path.to.my.view',
     'before-pagination' => 'path.to.my.view',
     'after-pagination' => 'path.to.my.view',
+    'after-wrapper' => 'path.to.my.view',
   ]);
 }
 ```

docs/datatable/styling.md

@@ -150,6 +150,11 @@ public function configure(): void
 
 Set a list of attributes to override on the th elements.  
 
+If your Column does not have a field (e.g. a label column), then you may use the following, which will utilise the first parameter in Column::make()
+```php
+  $column->getTitle()
+```
+
 ```php
 public function configure(): void
 {
@@ -311,6 +316,11 @@ public function configure(): void
 
 Set a list of attributes to override on the td elements
 
+If your Column does not have a field (e.g. a label column), then you may use the following, which will utilise the first parameter in Column::make()
+```php
+  $column->getTitle()
+```
+
 ```php
 public function configure(): void
 {

docs/misc/lifecycle-hooks.md

@@ -19,6 +19,12 @@ This is called prior to setting up the available Columns via the columns() metho
 ## columnsSet
 This is called immediately after the Columns are set up
 
+## configuringColumnSelect
+This is called immediately prior to setting up Column Select
+
+## configuredColumnSelect
+This is called immediately after setting up Column Select
+
 ## rowsRetrieved
 This is called immediately after the query is executed, and is passed the result from the executed query.
 

docs/misc/tools.md

@@ -56,4 +56,28 @@ Disables the Toolbar, which contains the Reorder, Filters, Search, Column Select
     {
         $this->setToolBarDisabled();
     }
-```
+```
+
+### setToolsAttributes
+Allows setting of attributes for the parent element in the tools blade
+
+By default, this replaces the default classes on the tools blade, if you would like to keep them, set the default-colors/default-styling flags to true as appropriate
+
+```php
+    public function configure(): void
+    {
+       $this->setToolsAttributes(['class' => ' bg-green-500', 'default-colors' => false, 'default-styling' => true]);
+    }
+```
+
+### setToolBarAttributes
+Allows setting of attributes for the parent element in the toolbar blade.
+
+By default, this replaces the default classes on the toolbar blade, if you would like to keep them, set the default-colors/default-styling flags to true as appropriate
+
+```php
+    public function configure(): void
+    {
+       $this->setToolBarAttributes(['class' => ' bg-red-500', 'default-colors' => false, 'default-styling' => true]);
+    }
+```

docs/pagination/available-methods.md

@@ -296,3 +296,14 @@ public function configure(): void
     $this->setShouldRetrieveTotalItemCountDisabled();
 }
 ```
+
+## setPaginationWrapperAttributes
+
+Used to set attributes for the "div" that wraps the pagination section
+
+```php
+public function configure(): void
+{
+    $this->setPaginationWrapperAttributes(['class' => 'text-lg']);
+}
+```

resources/views/components/includes/loading.blade.php

@@ -9,15 +9,15 @@
     @include($this->getLoadingPlaceHolderBlade(), ['colCount' => $colCount])
 @else
 
-    <tr wire:key="{{ $tableName }}-loader" class="hidden d-none"
+    <tr wire:key="{{ $tableName }}-loader"
     {{
         $attributes->merge($customAttributes['loader-wrapper'])
-            ->class(['w-full text-center h-screen place-items-center align-middle' => $isTailwind && ($customAttributes['loader-wrapper']['default'] ?? true)])
-            ->class(['w-100 text-center h-100 align-items-center' => $isBootstrap && ($customAttributes['loader-wrapper']['default'] ?? true)]);
+            ->class(['hidden w-full text-center h-screen place-items-center align-middle' => $isTailwind && ($customAttributes['loader-wrapper']['default'] ?? true)])
+            ->class(['d-none w-100 text-center h-100 align-items-center' => $isBootstrap && ($customAttributes['loader-wrapper']['default'] ?? true)]);
     }}
     wire:loading.class.remove="hidden d-none"
     >
-        <td colspan="{{ $colCount }}">
+        <td colspan="{{ $colCount }}" wire:key="{{ $tableName }}-loader-column" >
             <div class="h-min self-center align-middle text-center">
                 <div class="lds-hourglass"
                 {{

resources/views/components/pagination.blade.php

@@ -1,11 +1,13 @@
 @aware(['component','isTailwind','isBootstrap','isBootstrap4','isBootstrap5'])
 
-@if ($this->hasConfigurableAreaFor('before-pagination'))
-    @include($this->getConfigurableAreaFor('before-pagination'), $this->getParametersForConfigurableArea('before-pagination'))
-@endif
+@includeWhen(
+    $this->hasConfigurableAreaFor('before-pagination'), 
+    $this->getConfigurableAreaFor('before-pagination'), 
+    $this->getParametersForConfigurableArea('before-pagination')
+)
 
 @if ($this->isTailwind)
-    <div>
+    <div {{ $this->getPaginationWrapperAttributesBag() }}>
         @if ($this->paginationVisibilityIsEnabled())
             <div class="mt-4 px-4 md:p-0 sm:flex justify-between items-center space-y-4 sm:space-y-0">
                 <div>
@@ -47,7 +49,7 @@
         @endif
     </div>
 @elseif ($this->isBootstrap4)
-    <div >
+    <div {{ $this->getPaginationWrapperAttributesBag() }}>
         @if ($this->paginationVisibilityIsEnabled())
             @if ($this->paginationIsEnabled() && $this->isPaginationMethod('standard') && $this->getRows->lastPage() > 1)
                 <div class="row mt-3">
@@ -100,7 +102,7 @@
         @endif
     </div>
 @elseif ($this->isBootstrap5)
-    <div >
+    <div {{ $this->getPaginationWrapperAttributesBag() }} >
         @if ($this->paginationVisibilityIsEnabled())
             @if ($this->paginationIsEnabled() && $this->isPaginationMethod('standard') && $this->getRows->lastPage() > 1)
                 <div class="row mt-3">
@@ -152,6 +154,8 @@
     </div>
 @endif
 
-@if ($this->hasConfigurableAreaFor('after-pagination'))
-    @include($this->getConfigurableAreaFor('after-pagination'), $this->getParametersForConfigurableArea('after-pagination'))
-@endif
+@includeWhen(
+    $this->hasConfigurableAreaFor('after-pagination'), 
+    $this->getConfigurableAreaFor('after-pagination'), 
+    $this->getParametersForConfigurableArea('after-pagination')
+)

resources/views/components/table/tr.blade.php

@@ -12,9 +12,9 @@
     x-on:dragover.prevent.throttle.500ms="currentlyReorderingStatus && dragOverEvent(event)"
     x-on:dragleave.prevent.throttle.500ms="currentlyReorderingStatus && dragLeaveEvent(event)"
     @if($this->hasDisplayLoadingPlaceholder()) 
-    wire:loading.remove
+        wire:loading.class.add="hidden d-none"
     @else
-    wire:loading.class.delay="opacity-50 dark:bg-gray-900 dark:opacity-60"
+        wire:loading.class.delay="opacity-50 dark:bg-gray-900 dark:opacity-60"
     @endif
     id="{{ $tableName }}-row-{{ $row->{$primaryKey} }}"
     :draggable="currentlyReorderingStatus"

resources/views/components/tools.blade.php

@@ -1,8 +1,12 @@
 @aware(['component','isTailwind','isBootstrap'])
+@php($toolsAttributes = $this->getToolsAttributesBag())
 
-<div @class([
-    'flex-col' => $isTailwind,
-    'd-flex flex-column ' => ($isBootstrap),
-])>
+<div {{ 
+    $toolsAttributes->merge()
+        ->class(['flex-col' => $isTailwind && ($toolsAttributes['default-styling'] ?? true)])
+        ->class(['d-flex flex-column' => $isBootstrap && ($toolsAttributes['default-styling'] ?? true)])
+        ->except(['default','default-styling','default-colors']) 
+    }}
+>
     {{ $slot }}
 </div>

resources/views/components/tools/toolbar.blade.php

@@ -1,10 +1,14 @@
 @aware(['component', 'tableName','isTailwind','isBootstrap'])
 @props([])
+@php($toolBarAttributes = $this->getToolBarAttributesBag())
 
-<div @class([
-        'd-md-flex justify-content-between mb-3' => $this->isBootstrap,
-        'md:flex md:justify-between mb-4 px-4 md:p-0' => $this->isTailwind,
-    ])
+<div 
+    {{
+        $toolBarAttributes->merge()
+        ->class(['md:flex md:justify-between mb-4 px-4 md:p-0' => $isTailwind && ($toolBarAttributes['default-styling'] ?? true)])
+        ->class(['d-md-flex justify-content-between mb-3' => $isBootstrap && ($toolBarAttributes['default-styling'] ?? true)])
+        ->except(['default','default-styling','default-colors']) 
+    }}
 >
     <div @class([
             'd-md-flex' => $this->isBootstrap,
@@ -52,9 +56,7 @@
             'md:flex md:items-center space-y-4 md:space-y-0 md:space-x-2' => $this->isTailwind,
         ])
     >
-        @if ($this->hasConfigurableAreaFor('toolbar-right-start'))
-            @include($this->getConfigurableAreaFor('toolbar-right-start'), $this->getParametersForConfigurableArea('toolbar-right-start'))
-        @endif
+        @includeWhen($this->hasConfigurableAreaFor('toolbar-right-start'), $this->getConfigurableAreaFor('toolbar-right-start'), $this->getParametersForConfigurableArea('toolbar-right-start'))
 
         @if($this->hasActions && $this->showActionsInToolbar && $this->getActionsPosition == 'right')
             <x-livewire-tables::includes.actions/>    
@@ -72,9 +74,7 @@
             <x-livewire-tables::tools.toolbar.items.pagination-dropdown />
         @endif
 
-        @if ($this->hasConfigurableAreaFor('toolbar-right-end'))
-            @include($this->getConfigurableAreaFor('toolbar-right-end'), $this->getParametersForConfigurableArea('toolbar-right-end'))
-        @endif
+        @includeWhen($this->hasConfigurableAreaFor('toolbar-right-end'), $this->getConfigurableAreaFor('toolbar-right-end'), $this->getParametersForConfigurableArea('toolbar-right-end'))
     </div>
 </div>
 @if (

resources/views/datatable.blade.php

@@ -7,15 +7,24 @@
 @php($isBootstrap5 = $this->isBootstrap5)
 
 <div {{ $this->getTopLevelAttributes() }}>
+
+    @includeWhen(
+        $this->hasConfigurableAreaFor('before-wrapper'), 
+        $this->getConfigurableAreaFor('before-wrapper'), 
+        $this->getParametersForConfigurableArea('before-wrapper')
+    )
+
     <x-livewire-tables::wrapper :component="$this" :tableName="$tableName" :$primaryKey :$isTailwind :$isBootstrap :$isBootstrap4 :$isBootstrap5>
         @if($this->hasActions && !$this->showActionsInToolbar)
             <x-livewire-tables::includes.actions/>    
         @endif
 
 
-        @if ($this->hasConfigurableAreaFor('before-tools'))
-            @include($this->getConfigurableAreaFor('before-tools'), $this->getParametersForConfigurableArea('before-tools'))
-        @endif
+        @includeWhen(
+            $this->hasConfigurableAreaFor('before-tools'), 
+            $this->getConfigurableAreaFor('before-tools'), 
+            $this->getParametersForConfigurableArea('before-tools')
+        )
 
         @if($this->shouldShowTools)
         <x-livewire-tables::tools>
@@ -26,11 +35,21 @@
                 <x-livewire-tables::tools.filter-pills />
             @endif
 
-            @includeWhen($this->hasConfigurableAreaFor('before-toolbar'), $this->getConfigurableAreaFor('before-toolbar'), $this->getParametersForConfigurableArea('before-toolbar'))
+            @includeWhen(
+                $this->hasConfigurableAreaFor('before-toolbar'), 
+                $this->getConfigurableAreaFor('before-toolbar'), 
+                $this->getParametersForConfigurableArea('before-toolbar')
+            )
+
             @if($this->shouldShowToolBar)
                 <x-livewire-tables::tools.toolbar />
             @endif
-            @includeWhen($this->hasConfigurableAreaFor('after-toolbar'), $this->getConfigurableAreaFor('after-toolbar'), $this->getParametersForConfigurableArea('after-toolbar'))
+
+            @includeWhen(
+                $this->hasConfigurableAreaFor('after-toolbar'), 
+                $this->getConfigurableAreaFor('after-toolbar'), 
+                $this->getParametersForConfigurableArea('after-toolbar')
+            )
 
         </x-livewire-tables::tools>
         @endif
@@ -110,4 +129,11 @@
 
         @includeIf($customView)
     </x-livewire-tables::wrapper>
+
+    @includeWhen(
+            $this->hasConfigurableAreaFor('after-wrapper'), 
+            $this->getConfigurableAreaFor('after-wrapper'), 
+            $this->getParametersForConfigurableArea('after-wrapper')
+    )
+
 </div>

src/Traits/Configuration/PaginationConfiguration.php

@@ -177,4 +177,11 @@ public function setShouldRetrieveTotalItemCountDisabled(): self
 
         return $this;
     }
+
+    public function setPaginationWrapperAttributes(array $paginationWrapperAttributes): self
+    {
+        $this->paginationWrapperAttributes = array_merge(['class' => ''], $paginationWrapperAttributes);
+
+        return $this;
+    }
 }

src/Traits/Core/HasCustomAttributes.php

@@ -46,4 +46,9 @@ public function setCustomAttributes(string $propertyName, array $customAttribute
 
         return $this;
     }
+
+    public function getCustomAttributesBagFromArray(array $attributesArray): ComponentAttributeBag
+    {
+        return new ComponentAttributeBag($attributesArray);
+    }
 }

src/Traits/Helpers/PaginationHelpers.php

@@ -2,6 +2,7 @@
 
 namespace Rappasoft\LaravelLivewireTables\Traits\Helpers;
 
+use Illuminate\View\ComponentAttributeBag;
 use Livewire\Attributes\Computed;
 
 trait PaginationHelpers
@@ -155,4 +156,15 @@ public function getShouldRetrieveTotalItemCount(): bool
     {
         return $this->shouldRetrieveTotalItemCount;
     }
+
+    public function getPaginationWrapperAttributes(): array
+    {
+        return $this->paginationWrapperAttributes ?? ['class' => ''];
+    }
+
+    #[Computed]
+    public function getPaginationWrapperAttributesBag(): ComponentAttributeBag
+    {
+        return new ComponentAttributeBag($this->getPaginationWrapperAttributes());
+    }
 }