TH Fixes - Clean-up, efficiency, and Sort Icons fixes

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

@@ -1,90 +1,58 @@
-@aware([ 'tableName','isTailwind','isBootstrap'])
 @props(['column', 'index'])
 
 @php
-    $attributes = $attributes->merge(['wire:key' => $tableName . '-header-col-'.$column->getSlug()]);
     $allThAttributes = $this->getAllThAttributes($column);
-
     $customThAttributes = $allThAttributes['customAttributes'];
     $customSortButtonAttributes = $allThAttributes['sortButtonAttributes'];
-    $customSortIconAttributes = $allThAttributes['sortIconAttributes'];
     $customLabelAttributes = $allThAttributes['labelAttributes'];
-
-    //$customThAttributes = $this->getThAttributes($column);
-    //$customSortButtonAttributes = $this->getThSortButtonAttributes($column);
-    //$customSortIconAttributes = $this->getThSortIconAttributes($column);
-
-    $direction = $column->hasField() ? $this->getSort($column->getColumnSelectName()) : $this->getSort($column->getSlug()) ?? null ;
+    $customIconAttributes = $this->getThSortIconAttributes($column);
+    $direction = $column->hasField() ? $this->getSort($column->getColumnSelectName()) : $this->getSort($column->getSlug()) ?? null;
 @endphp
 
-@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(['hidden' => $column->shouldCollapseAlways()])
-            ->class(['hidden md:table-cell' => $column->shouldCollapseOnMobile()])
-            ->class(['hidden lg:table-cell' => $column->shouldCollapseOnTablet()])
-            ->except(['default', 'default-colors', 'default-styling'])
-        }}
-    >
-        @if($column->getColumnLabelStatus())
-            @unless ($this->sortingIsEnabled() && ($column->isSortable() || $column->getSortCallback()))
-                <span {{ $customLabelAttributes->except(['default', 'default-colors', 'default-styling']) }}>{{ $column->getTitle() }}</span>
-            @else
-                <button wire:click="sortBy('{{ $column->getColumnSortKey() }}')"
-                    {{
+<th {{
+    $attributes->merge($customThAttributes)
+        ->class([
+            'text-gray-500 dark:bg-gray-800 dark:text-gray-400' => $this->isTailwind && (($customThAttributes['default-colors'] ?? true) || ($customThAttributes['default'] ?? true)),
+            'px-6 py-3 text-left text-xs font-medium whitespace-nowrap uppercase tracking-wider' => $this->isTailwind && (($customThAttributes['default-styling'] ?? true) || ($customThAttributes['default'] ?? true)),
+            'hidden' => $this->isTailwind && $column->shouldCollapseAlways(),
+            'hidden md:table-cell' => $this->isTailwind && $column->shouldCollapseOnMobile(),
+            'hidden lg:table-cell' => $this->isTailwind && $column->shouldCollapseOnTablet(),
+            '' => $this->isBootstrap && ($customThAttributes['default'] ?? true),
+            'd-none' => $this->isBootstrap && $column->shouldCollapseAlways(),
+            'd-none d-md-table-cell' => $this->isBootstrap && $column->shouldCollapseOnMobile(),
+            'd-none d-lg-table-cell' => $this->isBootstrap && $column->shouldCollapseOnTablet(),
+        ])
+        ->except(['default', 'default-colors', 'default-styling'])
+}}>
+    @if($column->getColumnLabelStatus())
+        @unless ($this->sortingIsEnabled() && ($column->isSortable() || $column->getSortCallback()))
+            <x-livewire-tables::table.th.label :$customLabelAttributes :columnTitle="$column->getTitle()" />
+        @else
+            @if ($this->isTailwind)
+
+                <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))])
-                            ->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($customSortIconAttributes)
+                            ->class([
+                                'text-gray-500 dark:text-gray-400' => (($customSortButtonAttributes['default-colors'] ?? true) || ($customSortButtonAttributes['default'] ?? true)),
+                                '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'])
-                    }}
-                    />
-
+                }}>
+                    <x-livewire-tables::table.th.label :$customLabelAttributes :columnTitle="$column->getTitle()" />
+                    <x-livewire-tables::table.th.sort-icons :$direction :$customIconAttributes />
                 </button>
-            @endunless
-        @endif
-    </th>
-@elseif ($isBootstrap)
-    <th scope="col" {{
-        $attributes->merge($customThAttributes)
-            ->class(['' => $customThAttributes['default'] ?? true])
-            ->class(['d-none' => $column->shouldCollapseAlways()])
-            ->class(['d-none d-md-table-cell' => $column->shouldCollapseOnMobile()])
-            ->class(['d-none d-lg-table-cell' => $column->shouldCollapseOnTablet()])
-            ->except(['default','default-styling','default-colors'])
-        }}
-    >
-        @if($column->getColumnLabelStatus())
-            @unless ($this->sortingIsEnabled() && ($column->isSortable() || $column->getSortCallback()))
-                <span {{ $customLabelAttributes->except(['default', 'default-colors', 'default-styling']) }}>{{ $column->getTitle() }}</span>
-            @else
-                <div
-                    class="d-flex align-items-center laravel-livewire-tables-cursor"
-                    wire:click="sortBy('{{ $column->getColumnSortKey() }}')"
-                    {{
+            @elseif ($this->isBootstrap)
+                <div wire:click="sortBy('{{ $column->getColumnSortKey() }}')" {{
                         $attributes->merge($customSortButtonAttributes)
-                            ->class(['' => (($customSortButtonAttributes['default-styling'] ?? true) || ($customSortButtonAttributes['default'] ?? true))])
+                            ->class(['d-flex align-items-center laravel-livewire-tables-cursor' => (($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.label :$customLabelAttributes :columnTitle="$column->getTitle()" />
+                    <x-livewire-tables::table.th.sort-icons :$direction :$customIconAttributes />
 
-                    <x-livewire-tables::table.th.sort-icons :$direction                     {{
-                        $attributes->merge($customSortButtonAttributes)
-                            ->class(['' => (($customSortButtonAttributes['default-colors'] ?? true) || ($customSortButtonAttributes['default'] ?? true))])
-                            ->except(['default', 'default-colors', 'default-styling', 'wire:key'])
-                    }}
-                />
                 </div>
-            @endunless
-        @endif
-    </th>
-@endif
+            @endif
+
+        @endunless
+    @endif
+</th>

resources/views/components/table/th/bulk-actions.blade.php

@@ -1,20 +1,17 @@
-@aware([ 'tableName'])
 @php
     $customAttributes = $this->hasBulkActionsThAttributes ? $this->getBulkActionsThAttributes : $this->getAllThAttributes($this->getBulkActionsColumn())['customAttributes'];
-
     $bulkActionsThCheckboxAttributes = $this->getBulkActionsThCheckboxAttributes();
-    $theme = $this->getTheme();
 @endphp
 
 @if ($this->bulkActionsAreEnabled() && $this->hasBulkActions())
-    <x-livewire-tables::table.th.plain wire:key="{{ $tableName }}-thead-bulk-actions" :displayMinimisedOnReorder="true" :$customAttributes>
+    <x-livewire-tables::table.th.plain  :displayMinimisedOnReorder="true" wire:key="{{ $this->getTableName }}-thead-bulk-actions" :$customAttributes>
         <div
             x-data="{newSelectCount: 0, indeterminateCheckbox: false, bulkActionHeaderChecked: false}"
             x-init="$watch('selectedItems', value => indeterminateCheckbox = (value.length > 0 && value.length < paginationTotalItemCount))"
             x-cloak x-show="currentlyReorderingStatus !== true"
             @class([
-                'inline-flex rounded-md shadow-sm' => $theme === 'tailwind',
-                'form-check' => $theme === 'bootstrap-5',
+                'inline-flex rounded-md shadow-sm' => $this->isTailwind,
+                'form-check' => $this->isBootstrap,
             ])
         >
             <input
@@ -24,8 +21,9 @@
                 :checked="selectedItems.length == paginationTotalItemCount"
                 {{
                     $attributes->merge($bulkActionsThCheckboxAttributes)->class([
-                        'rounded border-gray-300 text-indigo-600 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600' => ($theme === 'tailwind') && ($bulkActionsThCheckboxAttributes['default'] ?? true),
-                        'form-check-input' => ($theme === 'bootstrap-5') && ($bulkActionsThCheckboxAttributes['default'] ?? true),
+                        'border-gray-300 text-indigo-600 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600' => $this->isTailwind && (($bulkActionsThCheckboxAttributes['default'] ?? true) || ($bulkActionsThCheckboxAttributes['default-colors'] ?? true)),
+                        'rounded shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50 ' => $this->isTailwind && (($bulkActionsThCheckboxAttributes['default'] ?? true) || ($bulkActionsThCheckboxAttributes['default-styling'] ?? true)),
+                        'form-check-input' => $this->isBootstrap && ($bulkActionsThCheckboxAttributes['default'] ?? true),
                     ])->except(['default','default-styling','default-colors'])
                 }}
             />

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

@@ -1,29 +1,15 @@
-@aware([ 'tableName','isTailwind','isBootstrap'])
-
-@if ($this->collapsingColumnsAreEnabled() && $this->hasCollapsedColumns())
-    @if ($isTailwind)
-        <th
-            scope="col"
-            {{
-                $attributes
-                    ->merge(['class' => 'table-cell dark:bg-gray-800 laravel-livewire-tables-reorderingMinimised'])
-                    ->class(['sm:hidden' => !$this->shouldCollapseOnTablet() && !$this->shouldCollapseAlways()])
-                    ->class(['md:hidden' => !$this->shouldCollapseOnMobile() && !$this->shouldCollapseOnTablet() && !$this->shouldCollapseAlways()])
-                    ->class(['lg:hidden' => !$this->shouldCollapseAlways()])
-            }}
-            :class="{ 'laravel-livewire-tables-reorderingMinimised': ! currentlyReorderingStatus }"
-        ></th>
-    @elseif ($isBootstrap)
-        <th
-            scope="col"
-            {{
-                $attributes
-                    ->merge(['class' => 'd-table-cell laravel-livewire-tables-reorderingMinimised'])
-                    ->class(['d-sm-none' => !$this->shouldCollapseOnTablet() && !$this->shouldCollapseAlways()])
-                    ->class(['d-md-none' => !$this->shouldCollapseOnMobile() && !$this->shouldCollapseOnTablet() && !$this->shouldCollapseAlways()])
-                    ->class(['d-lg-none' => !$this->shouldCollapseAlways()])
-            }}                    
-            :class="{ 'laravel-livewire-tables-reorderingMinimised': ! currentlyReorderingStatus }"
-        ></th>
-    @endif
+@if ($this->collapsingColumnsAreEnabled && $this->hasCollapsedColumns)
+    <th scope="col" :class="{ 'laravel-livewire-tables-reorderingMinimised': ! currentlyReorderingStatus }" {{
+        $attributes->merge()
+            ->class([
+                'table-cell dark:bg-gray-800 laravel-livewire-tables-reorderingMinimised' => $this->isTailwind,
+                'sm:hidden' => $this->isTailwind && !$this->shouldCollapseOnTablet && !$this->shouldCollapseAlways,
+                'md:hidden' => $this->isTailwind && !$this->shouldCollapseOnMobile && !$this->shouldCollapseOnTablet && !$this->shouldCollapseAlways,
+                'lg:hidden' => $this->isTailwind && !$this->shouldCollapseAlways,
+                'd-table-cell laravel-livewire-tables-reorderingMinimised' => $this->isBootstrap,
+                'd-sm-none' => $this->isBootstrap && !$this->shouldCollapseOnTablet && !$this->shouldCollapseAlways,
+                'd-md-none' => $this->isBootstrap && !$this->shouldCollapseOnMobile && !$this->shouldCollapseOnTablet && !$this->shouldCollapseAlways,
+                'd-lg-none' => $this->isBootstrap && !$this->shouldCollapseAlways,
+            ])
+        }}></th>
 @endif

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

@@ -0,0 +1,4 @@
+@props(['columnTitle' => '', 'customLabelAttributes' => ['default' => true]])
+<span {{ $customLabelAttributes->except(['default', 'default-colors', 'default-styling']) }}>
+    {{ $columnTitle }}
+</span>

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

@@ -1,14 +1,11 @@
-@aware(['isTailwind','isBootstrap'])
 @props(['displayMinimisedOnReorder' => false, 'hideUntilReorder' => false, 'customAttributes' => ['default' => true]])
 
-<th x-cloak {{ $attributes }} scope="col"
-    {{ 
+<th x-cloak scope="col" @if($hideUntilReorder) :class="!reorderDisplayColumn && 'w-0 p-0 hidden'" @endif {{ 
         $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)),
-        ])
-    }}
-    @if($hideUntilReorder) :class="!reorderDisplayColumn && 'w-0 p-0 hidden'" @endif
->
+            'table-cell px-3 py-2 md:px-6 md:py-3 text-center md:text-left laravel-livewire-tables-reorderingMinimised' => $this->isTailwind && (($customAttributes['default-styling'] ?? true) || ($customAttributes['default'] ?? true)),
+            'bg-gray-50 dark:bg-gray-800' => $this->isTailwind && (($customAttributes['default-colors'] ?? true) || ($customAttributes['default'] ?? true)),
+            'laravel-livewire-tables-reorderingMinimised' => $this->isBootstrap && (($customAttributes['default-colors'] ?? true) || ($customAttributes['default'] ?? true)),
+        ])->except(['default','default-styling','default-colors'])
+}}>
     {{ $slot }}
 </th>

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

@@ -1,14 +1,16 @@
-@aware(['tableName','isTailwind','isBootstrap'])
 @php
     $customThAttributes = $this->hasReorderThAttributes() ? $this->getReorderThAttributes() : $this->getAllThAttributes($this->getReorderColumn())['customAttributes'];
 @endphp
 
-<x-livewire-tables::table.th.plain x-cloak x-show="currentlyReorderingStatus" wire:key="{{ $tableName }}-thead-reorder" :displayMinimisedOnReorder="false" 
+<x-livewire-tables::table.th.plain x-cloak x-show="currentlyReorderingStatus" wire:key="{{ $this->getTableName }}-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(['laravel-livewire-tables-reorderingMinimised' => ($isBootstrap) && ($customThAttributes['default'] ?? true)])
+            ->class([
+                'table-cell px-6 py-3 text-left text-xs font-medium whitespace-nowrap uppercase tracking-wider' => $this->isTailwind && (($customThAttributes['default-styling'] ?? true) || ($customThAttributes['default'] ?? true)),
+                'text-gray-500 dark:bg-gray-800 dark:text-gray-400' => $this->isTailwind && (($customThAttributes['default-colors'] ?? true) || ($customThAttributes['default'] ?? true)),
+                'laravel-livewire-tables-reorderingMinimised' => $this->isBootstrap && ($customThAttributes['default'] ?? true),
+            ])
+            ->except(['default','default-styling','default-colors'])
     }}
 >
     <div x-cloak x-show="currentlyReorderingStatus"></div>