Fix bug #1997 - Found the issue elsewhere also, so I fixed them too.

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/th.blade.php

@@ -20,8 +20,8 @@
 @if ($isTailwind)
     <th scope="col" {{
         $attributes->merge($customThAttributes)
-            ->class(['text-gray-500 dark:bg-gray-800 dark:text-gray-400' => ($customThAttributes['default-colors'] ?? true || $customThAttributes['default'] ?? true)])
-            ->class(['px-6 py-3 text-left text-xs font-medium whitespace-nowrap uppercase tracking-wider' => ($customThAttributes['default-styling'] ?? true || $customThAttributes['default'] ?? true)])
+            ->class(['text-gray-500 dark:bg-gray-800 dark:text-gray-400' => (($customThAttributes['default-colors'] ?? true) || ($customThAttributes['default'] ?? true))])
+            ->class(['px-6 py-3 text-left text-xs font-medium whitespace-nowrap uppercase tracking-wider' => (($customThAttributes['default-styling'] ?? true) || ($customThAttributes['default'] ?? true))])
             ->class(['hidden' => $column->shouldCollapseAlways()])
             ->class(['hidden md:table-cell' => $column->shouldCollapseOnMobile()])
             ->class(['hidden lg:table-cell' => $column->shouldCollapseOnTablet()])
@@ -35,8 +35,8 @@
                 <button wire:click="sortBy('{{ $column->getColumnSortKey() }}')"
                     {{
                         $attributes->merge($customSortButtonAttributes)
-                            ->class(['text-gray-500 dark:text-gray-400' => ($customSortButtonAttributes['default-colors'] ?? true || $customSortButtonAttributes['default'] ?? true)])    
-                            ->class(['flex items-center space-x-1 text-left text-xs leading-4 font-medium uppercase tracking-wider group focus:outline-none' => ($customSortButtonAttributes['default-styling'] ?? true || $customSortButtonAttributes['default'] ?? true)])
+                            ->class(['text-gray-500 dark:text-gray-400' => (($customSortButtonAttributes['default-colors'] ?? true) || ($customSortButtonAttributes['default'] ?? true))])
+                            ->class(['flex items-center space-x-1 text-left text-xs leading-4 font-medium uppercase tracking-wider group focus:outline-none' => (($customSortButtonAttributes['default-styling'] ?? true) || ($customSortButtonAttributes['default'] ?? true))])
                             ->except(['default', 'default-colors', 'default-styling', 'wire:key'])
                     }}
                 >
@@ -71,15 +71,15 @@ class="d-flex align-items-center laravel-livewire-tables-cursor"
                     wire:click="sortBy('{{ $column->getColumnSortKey() }}')"
                     {{
                         $attributes->merge($customSortButtonAttributes)
-                            ->class(['' => ($customSortButtonAttributes['default-styling'] ?? true || $customSortButtonAttributes['default'] ?? true)])
+                            ->class(['' => (($customSortButtonAttributes['default-styling'] ?? true) || ($customSortButtonAttributes['default'] ?? true))])
                             ->except(['default', 'default-colors', 'default-styling', 'wire:key'])
                     }}
                 >
                     <span {{ $customLabelAttributes->except(['default', 'default-colors', 'default-styling']) }}>{{ $column->getTitle() }}</span>
 
                     <x-livewire-tables::table.th.sort-icons :$direction                     {{
                         $attributes->merge($customSortButtonAttributes)
-                            ->class(['' => ($customSortButtonAttributes['default-colors'] ?? true || $customSortButtonAttributes['default'] ?? true)])
+                            ->class(['' => (($customSortButtonAttributes['default-colors'] ?? true) || ($customSortButtonAttributes['default'] ?? true))])
                             ->except(['default', 'default-colors', 'default-styling', 'wire:key'])
                     }}
                 />

resources/views/components/table/th/plain.blade.php

@@ -4,8 +4,8 @@
 <th x-cloak {{ $attributes }} scope="col"
     {{ 
         $attributes->merge($customAttributes)->class([
-            'table-cell px-3 py-2 md:px-6 md:py-3 text-center md:text-left bg-gray-50 dark:bg-gray-800 laravel-livewire-tables-reorderingMinimised' => ($isTailwind) && ($customAttributes['default-colors'] ?? true || $customAttributes['default'] ?? true),
-            'laravel-livewire-tables-reorderingMinimised' => ($isBootstrap) && ($customAttributes['default-colors'] ?? true || $customAttributes['default'] ?? true),
+            'table-cell px-3 py-2 md:px-6 md:py-3 text-center md:text-left bg-gray-50 dark:bg-gray-800 laravel-livewire-tables-reorderingMinimised' => ($isTailwind) && (($customAttributes['default-colors'] ?? true) || ($customAttributes['default'] ?? true)),
+            'laravel-livewire-tables-reorderingMinimised' => ($isBootstrap) && (($customAttributes['default-colors'] ?? true) || ($customAttributes['default'] ?? true)),
         ])
     }}
     @if($hideUntilReorder) :class="!reorderDisplayColumn && 'w-0 p-0 hidden'" @endif

resources/views/components/table/th/reorder.blade.php

@@ -6,8 +6,8 @@
 <x-livewire-tables::table.th.plain x-cloak x-show="currentlyReorderingStatus" wire:key="{{ $tableName }}-thead-reorder" :displayMinimisedOnReorder="false" 
     {{ 
         $attributes->merge($customThAttributes)
-            ->class(['text-gray-500 dark:bg-gray-800 dark:text-gray-400' => ($customThAttributes['default-colors'] ?? true || $customThAttributes['default'] ?? true)])
-            ->class(['table-cell px-6 py-3 text-left text-xs font-medium whitespace-nowrap uppercase tracking-wider' => ($customThAttributes['default-styling'] ?? true || $customThAttributes['default'] ?? true)])
+            ->class(['text-gray-500 dark:bg-gray-800 dark:text-gray-400' => (($customThAttributes['default-colors'] ?? true) || ($customThAttributes['default'] ?? true))])
+            ->class(['table-cell px-6 py-3 text-left text-xs font-medium whitespace-nowrap uppercase tracking-wider' => (($customThAttributes['default-styling'] ?? true) || ($customThAttributes['default'] ?? true))])
             ->class(['laravel-livewire-tables-reorderingMinimised' => ($isBootstrap) && ($customThAttributes['default'] ?? true)])
     }}
 >

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 (