setThSortButtonAttributes

Author: rappasoft

CHANGELOG.md

@@ -9,6 +9,7 @@ All notable changes to `laravel-livewire-tables` will be documented in this file
 - Added table event listeners to sort/filter/clear from other components.
 - Added text filter.
 - Added $row as second parameter to BooleanColumn `setCallback()`.
+- Added `setThSortButtonAttributes()` to set attributes for th sort button.
 
 ## [2.3.0] - 2022-04-28
 

docs/datatable/available-methods.md

@@ -158,6 +158,26 @@ public function configure(): void
 }
 ```
 
+### setThSortButtonAttributes
+
+Set a list of attributes to override on the th sort button elements
+
+```php
+public function configure(): void
+{
+  // Takes a callback that gives you the current column.
+  $this->setThSortButtonAttributes(function(Column $column) {
+    if ($column->isField('name')) {
+      return [
+        'class' => 'bg-green-500',
+      ];
+    }
+
+    return [];
+  });
+}
+```
+
 By default, this replaces the default classes on the th, if you would like to keep them, set the default flag to true.
 
 ```php

output.txt

@@ -5,6 +5,7 @@
     $attributes = $attributes->merge(['wire:key' => 'header-col-'.$index.'-'.$component->id]);
     $theme = $component->getTheme();
     $customAttributes = $component->getThAttributes($column);
+    $customSortButtonAttributes = $component->getThSortButtonAttributes($column);
     $direction = $column->hasField() ? $component->getSort($column->getColumnSelectName()) : null;
 @endphp
 
@@ -21,7 +22,10 @@
         @else
             <button
                 wire:click="sortBy('{{ $column->getColumnSelectName() }}')"
-                class="flex items-center space-x-1 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider group focus:outline-none dark:text-gray-400"
+                {{ 
+                    $attributes->merge($customSortButtonAttributes)
+                        ->class(['flex items-center space-x-1 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider group focus:outline-none dark:text-gray-400' => $customSortButtonAttributes['default'] ?? true])
+                }}
             >
                 <span>{{ $column->getTitle() }}</span>
 

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

@@ -25,6 +25,7 @@ trait ComponentUtilities
     protected array $theadAttributes = [];
     protected array $tbodyAttributes = [];
     protected $thAttributesCallback;
+    protected $thSortButtonAttributesCallback;
     protected $trAttributesCallback;
     protected $trUrlCallback;
     protected $trUrlTargetCallback;

src/Traits/ComponentUtilities.php

@@ -98,6 +98,20 @@ public function setThAttributes(callable $callback): self
         return $this;
     }
 
+    /**
+     * Get a list of attributes to override on the th sort button elements
+     *
+     * @param  callable  $callback
+     *
+     * @return $this
+     */
+    public function setThSortButtonAttributes(callable $callback): self
+    {
+        $this->thSortButtonAttributesCallback = $callback;
+
+        return $this;
+    }
+
     /**
      * Get a list of attributes to override on the td elements
      *

src/Traits/Configuration/ComponentConfiguration.php

@@ -109,6 +109,16 @@ public function getThAttributes(Column $column): array
         return $this->thAttributesCallback ? call_user_func($this->thAttributesCallback, $column) : ['default' => true];
     }
 
+    /**
+     * @param  Column  $column
+     *
+     * @return bool[]
+     */
+    public function getThSortButtonAttributes(Column $column): array
+    {
+        return $this->thSortButtonAttributesCallback ? call_user_func($this->thSortButtonAttributesCallback, $column) : ['default' => true];
+    }
+
     /**
      * @param  Model  $row
      * @param  int  $index

src/Traits/Helpers/ComponentHelpers.php

@@ -74,6 +74,21 @@ public function can_set_th_attributes(): void
         $this->assertSame($this->basicTable->getThAttributes($this->basicTable->columns()[1]), ['default' => true, 'here' => 'there']);
     }
 
+    /** @test */
+    public function can_set_th_sort_button_attributes(): void
+    {
+        $this->basicTable->setThSortButtonAttributes(function (Column $column) {
+            if ($column->isField('id')) {
+                return ['default' => false, 'this' => 'that'];
+            }
+
+            return ['default' => true, 'here' => 'there'];
+        });
+
+        $this->assertSame($this->basicTable->getThSortButtonAttributes($this->basicTable->columns()[0]), ['default' => false, 'this' => 'that']);
+        $this->assertSame($this->basicTable->getThSortButtonAttributes($this->basicTable->columns()[1]), ['default' => true, 'here' => 'there']);
+    }
+
     /** @test */
     public function can_set_tr_attributes(): void
     {