v3.4.22 Master Release (#1972)

lrljoe · matzeschmitt · khwadj · web-flow · commit 7d265a320e93 · 2024-10-01T00:20:32.000+01:00
* Add explanation of setRefreshMethod (#1857) * Unlocking Entangled Items (#1859) * Unlock properties locked in error --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com> * Add dispatch on updated filter components (#1861) * Add additional dispatch * Add FilterApplied Event * Add Filter Event Dispatch Tests --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com> * v3.4.8 * Fix superfluous bulk actions tr < (#1868) * Default useComputedProperties to False (#1869) * Update ChangeLog * Add Action Buttons (#1864) * Make ActionButtons An Optional Feature in Beta --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com> * FixDateRangeFilter (#1872) * Adjust Methods - useComputedProperties (#1873) * Adjust Methods - useComputedProperties * Adjust ActionTest * Update ChangeLog * AllowDeleteDateRangeFilter (#1875) * Fix ChangeLog * Update Docs (#1876) * Update ChangeLog - Add Docs Update * Add setIconLeft/setIconRight (#1877) * Add setIconLeft/setIconRight * Fix styling * Adjust Test * Adjust ActionTest --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com> * Adjust ChangeLog * Adjust Action Button Icon Margin (#1880) * Adjust Action Button Icon Margin * Adjust ChangeLog * Change Order of "Getting Started" section (#1883) * Change Order of "Getting Started" section * Change to "UsersTable" * Add Button with No Icon (#1887) * Add a "Recommended" approach (#1886) * Add a "Recommended" approach * Add blurb to Recommended * v3.4.13 * Set actions position (#1889) * Add displayActionsInToolbar and actionsPosition * Add docs and tests for setActionsInToolbar * Fix styling --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com> * Update ChangeLog * Doc Type Fixes (#1891) * Update NumberFilter and TypeHints * Update DateFilter/DateTimeFilter and ConfigurableAreasHelpers for typehints and array key exists * Add Float Test for NumberFilter * Add ColorColumn View Test * Adjust ColumnSelectConfigurationTest --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com> * BooleanColumn - Toggleable Callback (#1892) * Add Docs, Code for Toggleable Columns * Add Confirmation Option * Tweak Blade - Standardise * Add Tests for Toggleable --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com> * Update ChangeLog * Enable/Disable Tools/Toolbar (#1896) * Customised Toolbar Approach --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com> * Use Computed Properties By Default (#1898) * Fix has actions (#1901) * Fix Action Repetitive Calling * Fix validActionsCount --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com> * Add icon column (#1902) * Initial Commit - Awaiting Docs & Tests * Tweak to IconColumn label behaviour * Adding IconColumn documentation * Add Additional Tests - Replace Test Database * Add Visuals Test for IconColumn * Add Icon Columns to Other Column Types * Undo FrontendAssetsTest Changes --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com> * Add Baseline - Convert phpstan.neon to tabs (#1903) * Update ChangeLog * Save filter selection to session (BETA) (#1910) * Initial Commit * Fix styling * Initial Commit * Fix styling * Fix nullable return * Add Initial Tests - Remove Non-Required Method * Fix styling * Swap methods * Add default docs * Remove errant note * Adjust docs * Adjust Docs for storeFiltersInSessionEnabled --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com> * Add hide table option (#1914) * Initial Commit * Fix styling * Further adjustments * Fix styling * Improve Tests - Extend PetsTable * Fix styling --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com> * Add column select session methods (#1913) * Initial Commit * Fix styling * Minor Tweaks * Fix styling * Fix Tests * Add Tests for StoredColumnSelect * Fix styling * Add Missing Tests * Fix styling --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com> * Use Core HasTheme Methods (#1915) * Centralise Theme Methods * Fix styling * Fix for broken tests * Fix styling * Remove persisted computed properties --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com> * Use Core Attribute Bag (#1916) * Initial Commit * Fix styling * Add Missing Test * Fix styling * Adjustments * Fix styling * Adjust Test * Fix styling * Fix Sorting Visual Test --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com> * Fix ChangeLog * Add Polish translation by @meavric (#1925) * Add Polish translation by @meavric * Update ChangeLog to reflect translation * Add Vertical Scrolling Example (#1926) * Adjusting contributing * Fix missing variable in workflow (#1933) * Fix missing variable name * Remove phpunit failOnWarning * Tests * PCOV Use Laravel 11 * Fixes for ButtonGroupColumn, ImageColumn, LinkColumn - to not default as label if has a "from" property. (#1932) * Initial Commit - Allowing Labels with "From" to be included in queries * Fix styling * Fixes for ButtonGroupColumn, ImageColumn, LinkColumn - to not default as label if has a "from" property. --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com> * Add button type to tailwind pagination blade template (#1928) * v3.4.19 ChangeLog * Revert tableName to be public (#1937) * v3.4.20 ChangeLog * Migration to Core attribute management (#1943) * Migration to Core attribute management * Fix styling * Fix missing type hint, update tests * Fix styling * Remove defaults from being output * Fix styling * Adjust defaults * Adjust behaviour for Bulk Actions TH * Add "styling" to Columns docs * Docs Adjust, add missing test * Fix styling * Adjust workflows - use L11 for PHPStan, use PHPUnit for L10 * Add missing test for thSortIconAttributes * Fix styling * Add CustomAttributesTest * Fix styling * Add missing tests - correct attribute to respect defaults * Fix styling * Remove defined processes in workflows * Add test for setShouldBeHidden and setShouldBeDisplayed * Fix styling --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com> * Update docs - add Action setLabelAttributes method (#1952) * Reset Page on "Per Page" changing (#1953) * Localisation - Avoid Conflicts With Other Packages (#1955) * Merging Localisation Tweaks * Fix styling * Tweak localisations * Fix styling * Tweaks to sorting pill direction label * Fix styling * Fixes for Sorting Pill Labels --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com> * Add filterComponents into queryString (#1957) * Fix syntax for DateColumn outputFormat in docs (#1960) * Fix Filter Pills Icon - Tailwind (#1961) * Add original translation strings - for use in published views (#1959) * Fix for Search Field Attribute Defaults (#1962) * Fix for Search Field Attribute Defaults * SearchFieldAttributes -> Defaults To False * Change the type of LaravelLivewireTablesEvent::$user from Illuminate\Foundation\Auth\User to Illuminate\Contracts\Auth\Authenticatable (#1963) * Remove persist from getFilterGenericData (#1966) * Update ChangeLog * Update Pint Workflow (#1967) * Update Pint Workflow * Update ChangeLog * Test Styling Workflow * Fix styling * Test Workflow * Fix styling --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com> * Update Discord Releases Workflow (#1968) * Update ChangeLog * Fix Loading Placeholder Bug - Breaking Table (#1969) * FixLoadingPlaceholderBug * Adjust tests for new Loading blade * v3.4.22 ChangeLog * Update ChangeLog * Add comment on getTitle (#1976) * Add before-wrapper and after-wrapper configurable areas (#1977) * Add initial commit for setPaginationWrapperAttributes (#1978) * Add initial commit for setPaginationWrapperAttributes * Fix styling * Update ChangeLog * Adjust Tests & Methods * Fix styling --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com> * Update ChangeLog * Update ChangeLog * Adjust ChangeLog Date * Add ToolsAttributes and ToolbarAttributes (#1982) * Initial Commit * Fix styling * Add getCustomAttributesBagFromArray * Fix styling * Reorder Array * Reorder Initial Array - Add Additional Test * Fix styling * Add More Tests --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com> * Add docs for the ColumnSelect lifecycle hooks (#1983) * Add setToolsAttributes and setToolBarAttributes docs (#1984) * Update ChangeLog --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com> Co-authored-by: Matthias Schmitt <126666060+matzeschmitt@users.noreply.github.com> Co-authored-by: Paoulo Riveros <khwadj@gmail.com>
diff --git a/CHANGELOG.md b/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
diff --git a/docs/columns/styling.md b/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
 {
diff --git a/docs/datatable/configurable-areas.md b/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',
   ]);
 }
 ```
diff --git a/docs/datatable/styling.md b/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
 {
diff --git a/docs/misc/lifecycle-hooks.md b/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.
 
diff --git a/docs/misc/tools.md b/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]);
+    }
+```
diff --git a/docs/pagination/available-methods.md b/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']);
+}
+```
diff --git a/resources/views/components/includes/loading.blade.php b/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"
                 {{
diff --git a/resources/views/components/pagination.blade.php b/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')
+)
diff --git a/resources/views/components/table/tr.blade.php b/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"
diff --git a/resources/views/components/tools.blade.php b/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>
diff --git a/resources/views/components/tools/toolbar.blade.php b/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 (
diff --git a/resources/views/datatable.blade.php b/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>
diff --git a/src/Traits/Configuration/PaginationConfiguration.php b/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;
+    }
 }
diff --git a/src/Traits/Core/HasCustomAttributes.php b/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);
+    }
 }
diff --git a/src/Traits/Helpers/PaginationHelpers.php b/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());
+    }
 }
diff --git a/src/Traits/Styling/Configuration/ToolsStylingConfiguration.php b/src/Traits/Styling/Configuration/ToolsStylingConfiguration.php
diff --git a/src/Traits/Styling/HasToolsStyling.php b/src/Traits/Styling/HasToolsStyling.php
diff --git a/src/Traits/Styling/Helpers/ToolsStylingHelpers.php b/src/Traits/Styling/Helpers/ToolsStylingHelpers.php
diff --git a/src/Traits/WithPagination.php b/src/Traits/WithPagination.php
diff --git a/src/Traits/WithTools.php b/src/Traits/WithTools.php
diff --git a/tests/Traits/Helpers/PaginationHelpersTest.php b/tests/Traits/Helpers/PaginationHelpersTest.php
diff --git a/tests/Traits/Helpers/ToolsStylingHelpersTest.php b/tests/Traits/Helpers/ToolsStylingHelpersTest.php
diff --git a/tests/Traits/Visuals/LoadingPlaceholderVisualsTest.php b/tests/Traits/Visuals/LoadingPlaceholderVisualsTest.php
