Doc Changes, Cleanup, View Attributes

Author: lrljoe

docs/columns/styling.md

@@ -32,7 +32,7 @@ For example:
 Column::make('Name')
     ->setLabelAttributes(['class' => 'text-2xl'])
 ```
-By default, this replaces the default classes on the label, if you would like to keep them, set the default/default-styling/default-colors flags to true as appropriate.
+By default, this appends to the default classes on the label, if you would like to replace them, set the default/default-styling/default-colors flags to false as appropriate.
 
 ## Styling Table Elements
 
@@ -303,16 +303,28 @@ public function configure(): void
 
 ### via Attributes Callback
 
+You can create a callback to style an individual table cell, which can be simple, or complex, based on your needs.  The callback receives the value, the full table row, and the rowIndex (for striping).
+
+The below example would replace the default colours with "bg-blue-500" for "normal" and "bg-red-800" for "dark" themes, regardless of value.  The default styles would still be applied:
+```php
+Column::make("Name", "name")
+->attributes(fn($value, $row, $rowIndex) => ['class' => 'bg-blue-500 dark:bg-red-800', 'default-colors' => false]),
+```
+
 ### Enabling/Disabling whitespace-wrap
 
+By default, text does not wrap, unless the Column is an "html" column.  
+
+You can enable whitespace-wrap per-column as follows:
 ```php
 Column::make("Name", "name")
   ->wrapText(),
 ```
 
+
 ## Set Text Alignment
 
-You may customise the alignment of the text within the Column td elements as follows.  This will over-ride the value set by "setDefaultBodyTextAlignment" methods
+You may customise the alignment of the text within the Column td elements as follows.  This will over-ride the value set by "setDefaultBodyTextAlignment" methods.
 
 ### Left
 ```php

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

@@ -1,5 +1,5 @@
-@aware(['isTailwind','isTailwind4','isBootstrap', 'collapsingColumnInfo', 'tableRowDetails'])
-@props(['colIndex', 'isHtml' => false, 'wrapText' => false, 'isClickable' => false, 'customAttributes' => ['default' => true, 'default-colors' => true, 'default-styling' => true], 'textAlign' => $this->getDefaultBodyTextAlign()])
+@aware(['isTailwind','isTailwind4','isBootstrap', 'collapsingColumnInfo', 'tableRowDetails','defaultBodyTextAlign'])
+@props(['colIndex', 'isHtml' => false, 'wrapText' => false, 'isClickable' => false, 'customAttributes' => ['default' => true, 'default-colors' => true, 'default-styling' => true], 'textAlign' => $defaultBodyTextAlign])
 
 <td {{
         $attributes->merge($isClickable ? $tableRowDetails['tdAttribs'] : [])->merge($customAttributes)

resources/views/components/tbody/tbody.blade.php

@@ -1,4 +1,4 @@
-@aware(['dataTableFingerprint', 'isTailwind', 'isTailwind4', 'isBootstrap', 'coreTableAttributes', 'currentlyReorderingStatus', 'showBulkActionsSections', 'showCollapsingColumnSections', 'selectedVisibleColumns', 'selectedVisibleColumns', 'hasDisplayLoadingPlaceholder', 'hasTdAttributes'])
+@aware(['dataTableFingerprint', 'isTailwind', 'isTailwind4', 'isBootstrap', 'coreTableAttributes', 'currentlyReorderingStatus', 'showBulkActionsSections', 'showCollapsingColumnSections', 'selectedVisibleColumns', 'selectedVisibleColumns', 'hasDisplayLoadingPlaceholder', 'hasTdAttributes', 'defaultBodyTextAlign'])
 @props(['row','rowIndex','rowPk', 'tableRowDetails'])
 
 <tbody {{ $attributes->merge($coreTableAttributes['tbody'])
@@ -8,19 +8,19 @@
         ] : [])
         ->merge($tableRowDetails['attributes'])
         ->class([
-            'text-left' => $this->getDefaultBodyTextAlign() == 'left' && $isTailwind,
-            'text-center' => $this->getDefaultBodyTextAlign() == 'center' && $isTailwind,
-            'text-right' => $this->getDefaultBodyTextAlign() == 'right' && $isTailwind,
+            'text-left' => $defaultBodyTextAlign == 'left' && $isTailwind,
+            'text-center' => $defaultBodyTextAlign == 'center' && $isTailwind,
+            'text-right' => $defaultBodyTextAlign == 'right' && $isTailwind,
             'even:bg-white even:dark:bg-gray-700 odd:bg-gray-50 odd:dark:bg-gray-800 dark:text-white' => $isTailwind,
             'divide-gray-200 dark:divide-none' => $isTailwind && ($coreTableAttributes['tbody']['default-colors'] ?? ($coreTableAttributes['tbody']['default'] ?? true)),
             'divide-y' => $isTailwind && ($coreTableAttributes['tbody']['default-styling'] ?? ($coreTableAttributes['tbody']['default'] ?? true)),
             
             'tw4ph even:bg-white even:dark:bg-gray-700 odd:bg-gray-50 odd:dark:bg-gray-800 dark:text-white' => $isTailwind4,
             'tw4ph divide-gray-200 dark:divide-none' => $isTailwind4 && ($coreTableAttributes['tbody']['default-colors'] ?? ($coreTableAttributes['tbody']['default'] ?? true)),
             'tw4ph divide-y' => $isTailwind4 && ($coreTableAttributes['tbody']['default-styling'] ?? ($coreTableAttributes['tbody']['default'] ?? true)),
-            'tw4ph text-left' => $this->getDefaultBodyTextAlign() == 'left' && $isTailwind4,
-            'tw4ph text-center' => $this->getDefaultBodyTextAlign() == 'center' && $isTailwind4,
-            'tw4ph text-right' => $this->getDefaultBodyTextAlign() == 'right' && $isTailwind4,
+            'tw4ph text-left' => $defaultBodyTextAlign == 'left' && $isTailwind4,
+            'tw4ph text-center' => $defaultBodyTextAlign == 'center' && $isTailwind4,
+            'tw4ph text-right' => $defaultBodyTextAlign == 'right' && $isTailwind4,
             
         ])
         ->except(['default','default-styling','default-colors']) 

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

@@ -1,11 +1,11 @@
 @aware([ 'dataTableFingerprint','isTailwind','isTailwind4','isBootstrap'])
 @props(['filterMenuResetButtonAttributes'])
-
+@php($toolbarAttributes = $this->getToolBarAttributes())
 <div {{
-        $attributes->merge($this->getToolBarAttributes)
+        $attributes->merge($toolbarAttributes)
         ->class([
-            'md:flex md:justify-between mb-2 px-4 md:p-0' => ($isTailwind && ($this->getToolBarAttributes['default-styling'] ?? true)),
-            'd-md-flex justify-content-between mb-3' => ($isBootstrap && ($this->getToolBarAttributes['default-styling'] ?? true)),
+            'md:flex md:justify-between mb-2 px-4 md:p-0' => ($isTailwind && ($toolbarAttributes['default-styling'] ?? true)),
+            'd-md-flex justify-content-between mb-3' => ($isBootstrap && ($toolbarAttributes['default-styling'] ?? true)),
         ])
         ->except(['default','default-styling','default-colors'])
     }}
@@ -15,7 +15,7 @@
             'w-full mb-2 md:mb-0 md:w-2/4 md:flex space-y-4 md:space-y-0 md:space-x-2' => $isTailwind,
         ])
     >
-        @foreach($this->getLeftToolbarItems as $index => $toolbarItem)
+        @foreach($this->getLeftToolbarItems() as $index => $toolbarItem)
             @include($toolbarItem['view'], array_merge(['wire:key' => $dataTableFingerprint.'-toolbarItem-left-'.$index], $toolbarItem['attributes']))
         @endforeach
     </div>
@@ -27,7 +27,7 @@
         ])
     >
 
-        @foreach($this->getRightToolbarItems as $index => $toolbarItem)
+        @foreach($this->getRightToolbarItems() as $index => $toolbarItem)
             @include($toolbarItem['view'], array_merge(['wire:key' => $dataTableFingerprint.'-toolbarItem-right-'.$index], $toolbarItem['attributes']))
         @endforeach
 

resources/views/components/wrapper.blade.php

@@ -1,4 +1,4 @@
-@props(['component', 'isTailwind' => false, 'isTailwind4' => false, 'isBootstrap' => false,'isBootstrap4' => false, 'isBootstrap5' => false, 'tableName', 'primaryKey', 'collapsingColumnDetails', 'tdAttributes', 'tdCheckboxAttributes', 'collapsingColumnButtonExpandAttributes', 'collapsingColumnButtonCollapseAttributes', 'hasCollapsingColumns', 'currentlyReorderingStatus', 'hasDisplayLoadingPlaceholder', 'coreTableAttributes', 'selectedVisibleColumns', 'showBulkActionsSections', 'showCollapsingColumnSections', 'hasTrAttributes', 'collapsingColumnInfo', 'filterGenericData', 'hasTdAttributes', 'dataTableFingerprint'])
+@props(['component', 'isTailwind' => false, 'isTailwind4' => false, 'isBootstrap' => false,'isBootstrap4' => false, 'isBootstrap5' => false, 'tableName', 'primaryKey', 'collapsingColumnDetails', 'tdAttributes', 'tdCheckboxAttributes', 'collapsingColumnButtonExpandAttributes', 'collapsingColumnButtonCollapseAttributes', 'hasCollapsingColumns', 'currentlyReorderingStatus', 'hasDisplayLoadingPlaceholder', 'coreTableAttributes', 'selectedVisibleColumns', 'showBulkActionsSections', 'showCollapsingColumnSections', 'hasTrAttributes', 'collapsingColumnInfo', 'filterGenericData', 'hasTdAttributes', 'dataTableFingerprint', 'defaultBodyTextAlign'])
 <div {{ $attributes->merge($this->getComponentWrapperAttributes()) }}>
     @includeWhen($this->debugIsEnabled(),'livewire-tables::includes.debug')
     @includeWhen($this->offlineIndicatorIsEnabled(),'livewire-tables::includes.offline')

resources/views/datatable.blade.php

@@ -1,14 +1,13 @@
-@php($currentlyReorderingStatus = $this->getCurrentlyReorderingStatus())
-@php($hasTdAttributes = $this->hasTdAttributes())
 <div x-data="{ currentlyReorderingStatus: false }">
     <div {{ $this->getTopLevelAttributes() }}>
+
         @includeWhen(
             $this->hasConfigurableAreaFor('before-wrapper'),
             $this->getConfigurableAreaFor('before-wrapper'),
             $this->getParametersForConfigurableArea('before-wrapper')
         )
 
-        <x-livewire-tables::wrapper :$tableName :$dataTableFingerprint  :$primaryKey :$isTailwind :$isTailwind4 :$isBootstrap :$isBootstrap4 :$isBootstrap5 :$localisationPath :$collapsingColumnDetails  :$collapsingColumnButtonExpandAttributes :$collapsingColumnButtonCollapseAttributes :$hasCollapsingColumns :$currentlyReorderingStatus :$hasDisplayLoadingPlaceholder :$coreTableAttributes :$selectedVisibleColumns :$showBulkActionsSections :$showCollapsingColumnSections :$hasTrAttributes :$collapsingColumnInfo :$filterGenericData :$hasTdAttributes >
+        <x-livewire-tables::wrapper :$tableName :$dataTableFingerprint  :$primaryKey :$isTailwind :$isTailwind4 :$isBootstrap :$isBootstrap4 :$isBootstrap5 :$localisationPath :$collapsingColumnDetails  :$collapsingColumnButtonExpandAttributes :$collapsingColumnButtonCollapseAttributes :$hasCollapsingColumns :$currentlyReorderingStatus :$hasDisplayLoadingPlaceholder :$coreTableAttributes :$selectedVisibleColumns :$showBulkActionsSections :$showCollapsingColumnSections :$hasTrAttributes :$collapsingColumnInfo :$filterGenericData :$hasTdAttributes :$defaultBodyTextAlign>
 
             @if($this->shouldShowTools())
 

resources/views/includes/toolbar/items/column-select/legacy.blade.php

@@ -1,6 +1,6 @@
 @aware([ 'dataTableFingerprint','isTailwind','isTailwind4','isBootstrap','isBootstrap4','isBootstrap5', 'localisationPath', 'dataTableFingerprint'])
 @php($columnSelectButtonAttributes = $this->getColumnSelectButtonAttributes())
-@php($columnSelectMenuOptionCheckboxAttributes = $this->getColumnSelectMenuOptionCheckboxAttributes)
+@php($columnSelectMenuOptionCheckboxAttributes = $this->getColumnSelectMenuOptionCheckboxAttributes())
 @php($selectableSelectedColumnCount = $this->getSelectableSelectedColumns()->count())
 
 @if ($isTailwind)

resources/views/includes/toolbar/items/saving-state.blade.php

@@ -2,7 +2,7 @@
         <select wire:model.live="savedState" class="h-min rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 rounded-none rounded-l-md focus:ring-0 focus:border-gray-300 border-gray-300 dark:bg-gray-700 dark:text-white dark:border-gray-600 focus:border-gray-300 block w-full">
             <option value=''>{{ __('savingtablestate::core.select_one') }}</option>
             <option value='saveNew'>{{ __('savingtablestate::core.save_new') }}</option>
-            @foreach($this->getAvailableTableStates as $id => $name)
+            @foreach($this->getAvailableTableStates() as $id => $name)
                 <option value='{{ $id }}' wire:key="test-{{ $id }}">{{ $name}}</option>
             @endforeach
         </select>

src/DataTableComponent.php

@@ -5,9 +5,10 @@
 use Livewire\Attributes\{On, Renderless};
 use Livewire\Component;
 use Rappasoft\LaravelLivewireTables\Traits\{ComponentUtilities, WithCustomisations, WithData, WithDebugging, WithEvents, WithQuery, WithQueryString, WithRefresh, WithTableHooks};
-use Rappasoft\LaravelLivewireTables\Traits\Core\{HasCustomAttributes, HasLocalisations};
+use Rappasoft\LaravelLivewireTables\Traits\Core\{HasLocalisations};
 use Rappasoft\LaravelLivewireTables\Views\Traits\Core\HasTheme;
 use Rappasoft\LaravelLivewireTables\Traits\Styling\{HasCoreStyling};
+use Rappasoft\LaravelLivewireTables\Features\Core\HandlesCoreAttributes;
 use Rappasoft\LaravelLivewireTables\Features\Actions\Core\WithActions;
 use Rappasoft\LaravelLivewireTables\Features\BulkActions\Core\WithBulkActions;
 use Rappasoft\LaravelLivewireTables\Features\Columns\Core\WithColumns;
@@ -30,7 +31,8 @@
 abstract class DataTableComponent extends Component
 {
 
-    use WithFeatureDetection,
+    use HandlesCoreAttributes,
+        WithFeatureDetection,
         ComponentUtilities,
         WithQueryString,
         WithTableHooks,
@@ -49,7 +51,6 @@ abstract class DataTableComponent extends Component
         WithSorting,
         WithPagination,
         WithBulkActions,
-        HasCustomAttributes,
         WithConfigurableAreas,
         WithCustomisations,
         WithDebugging,

src/Exceptions/AttributePropertyException.php

@@ -0,0 +1,5 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Exceptions;
+
+class AttributePropertyException extends \Exception {}