Set reorder th attributes (#1811)

* Initial Commit

* Add Docs

* Update generic styling doc

* Add test for setReorderThAttributes


---------

Co-authored-by: lrljoe <[email protected]>

docs/datatable/styling.md

@@ -130,6 +130,7 @@ public function configure(): void
 Set a list of attributes to override on the th elements.  
 
 Note: If you are using Bulk Actions, then the th for Bulk Actions is [styled separately](../bulk-actions/customisations).
+Note: If you are using Reorder, then the th for Reorder is [styled separately](../reordering/available-methods).
 
 ```php
 public function configure(): void

docs/reordering/available-methods.md

@@ -142,3 +142,19 @@ public function configure(): void
     $this->setDefaultReorderSort('order', 'desc');
 }
 ```
+
+
+## setReorderThAttributes
+
+You may pass an array to this method, which allows you to pass Custom Attributes into the table header for the Reorder Column
+
+```php
+public function configure(): void
+{
+
+    $this->setReorderThAttributes([
+        'class' => 'bg-red-500',
+        'default' => false
+    ]);
+}
+```

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

@@ -1,5 +1,12 @@
-@aware(['component', 'tableName'])
+@aware(['tableName'])
 
-<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="{{ $tableName }}-thead-reorder" :displayMinimisedOnReorder="false" {{ 
+        $attributes->merge($this->getReorderThAttributes())->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' => ($this->isTailwind()) && ($this->getReorderThAttributes['default'] ?? true),
+            'laravel-livewire-tables-reorderingMinimised' => ($this->isBootstrap()) && ($this->getReorderThAttributes['default'] ?? true),
+        ])
+    }}
+>
     <div x-cloak x-show="currentlyReorderingStatus"></div>
 </x-livewire-tables::table.th.plain>
+

src/Traits/Configuration/ReorderingConfiguration.php

@@ -81,4 +81,14 @@ public function setDefaultReorderSort(string $field, string $direction = 'asc'):
 
         return $this;
     }
+
+    /**
+     * Used to set attributes for the <th> for Reorder Column
+     */
+    public function setReorderThAttributes(array $reorderThAttributes): self
+    {
+        $this->reorderThAttributes = [...$this->reorderThAttributes, ...$reorderThAttributes];
+
+        return $this;
+    }
 }

src/Traits/Helpers/ReorderingHelpers.php

@@ -91,4 +91,15 @@ public function getReorderingBackupSessionKey(): string
     {
         return $this->getTableName().'-reordering-backup';
     }
+
+    /**
+     * Used to get attributes for the <th> for Bulk Actions
+     *
+     * @return array<mixed>
+     */
+    #[Computed]
+    public function getReorderThAttributes(): array
+    {
+        return $this->reorderThAttributes ?? ['default' => true];
+    }
 }

src/Traits/WithReordering.php

@@ -26,6 +26,8 @@ trait WithReordering
 
     public array $orderedItems = [];
 
+    protected array $reorderThAttributes = ['default' => true];
+
     public function setupReordering(): void
     {
         if ($this->reorderIsDisabled()) {

tests/Traits/Configuration/ReorderingConfigurationTest.php

@@ -88,4 +88,22 @@ public function test_can_set_default_reorder_column_and_direction(): void
         $this->assertSame('sort2', $this->basicTable->getDefaultReorderColumn());
         $this->assertSame('desc', $this->basicTable->getDefaultReorderDirection());
     }
+
+    public function test_can_set_reorder_th_attributes(): void
+    {
+        $this->assertSame(['default' => true], $this->basicTable->getReorderThAttributes());
+
+        $this->basicTable->setReorderThAttributes(['class' => 'bg-blue-500']);
+
+        $this->assertSame(['default' => true, 'class' => 'bg-blue-500'], $this->basicTable->getReorderThAttributes());
+
+        $this->basicTable->setReorderThAttributes(['class' => 'bg-red-500', 'default' => false]);
+
+        $this->assertSame(['default' => false, 'class' => 'bg-red-500'], $this->basicTable->getReorderThAttributes());
+
+        $this->basicTable->setReorderThAttributes(['style' => 'font:black', 'default' => true]);
+
+        $this->assertSame(['default' => true, 'class' => 'bg-red-500', 'style' => 'font:black'], $this->basicTable->getReorderThAttributes());
+
+    }
 }