add sorting icons

resources/views/components/cols.blade.php

@@ -20,7 +20,9 @@
         }
     }
 
-    $sortOrder = isset($this->setUp['responsive']) ? data_get($this->setUp, "responsive.sortOrder.{$field}", null) : null;
+    $sortOrder = isset($this->setUp['responsive'])
+        ? data_get($this->setUp, "responsive.sortOrder.{$field}", null)
+        : null;
 @endphp
 <th
     @if ($sortOrder) sort_order="{{ $sortOrder }}" @endif
@@ -30,15 +32,15 @@ class="{{ data_get($theme, 'table.thClass') . ' ' . $column->headerClass }}"
     style="{{ $column->hidden === true ? 'display:none' : '' }}; width: max-content; @if ($column->sortable) cursor:pointer; @endif {{ data_get($theme, 'table.thStyle') . ' ' . $column->headerStyle }}"
 >
     <div
-        @class([
-            'pl-[11px]' => !$column->sortable && isTailwind(),
-            data_get($theme, 'cols.divClass'),
-        ])
+        class="{{ data_get($theme, 'cols.divClass') }}"
         style="{{ data_get($theme, 'cols.divStyle') }}"
     >
         @if ($column->sortable)
             <span>
-                {{ $this->sortLabel($field) }}
+                <x-dynamic-component
+                    component="{{ $this->sortIcon($field) }}"
+                    class="size-4"
+                />
             </span>
         @else
             <span style="width: 6px"></span>

resources/views/components/icons/chevron-up-down.blade.php

@@ -0,0 +1,13 @@
+<svg
+    {{ $attributes }}
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"
+    />
+</svg>

src/Concerns/Sorting.php

@@ -113,6 +113,23 @@ public function sortLabel(string $field): void
         }
     }
 
+    public function sortIcon(string $field): string
+    {
+        if ($this->multiSort && array_key_exists($field, $this->sortArray)) {
+            return ($this->sortArray[$field] == 'desc') ? 'livewire-powergrid::icons.chevron-up' : 'livewire-powergrid::icons.chevron-down';
+        } elseif ($this->multiSort) {
+            return 'livewire-powergrid::icons.chevron-up-down';
+        } else {
+            if ($this->sortField !== $field) {
+                return 'livewire-powergrid::icons.chevron-up-down';
+            } elseif ($this->sortDirection == 'desc') {
+                return 'livewire-powergrid::icons.chevron-up';
+            } else {
+                return 'livewire-powergrid::icons.chevron-down';
+            }
+        }
+    }
+
     public function updatedSortDirection(): void
     {
         if ($this->hasLazyEnabled) {

src/Themes/Tailwind.php

@@ -33,7 +33,7 @@ public function table(): Table
             ->th('font-extrabold px-2 pr-4 py-3 text-left text-xs text-pg-primary-700 tracking-wider whitespace-nowrap dark:text-pg-primary-300')
             ->tbody('text-pg-primary-800')
             ->trBody('border-b border-pg-primary-100 dark:border-pg-primary-600 hover:bg-pg-primary-50 dark:bg-pg-primary-800 dark:hover:bg-pg-primary-700')
-            ->tdBody('pl-[24px] px-3 py-2 whitespace-nowrap dark:text-pg-primary-200')
+            ->tdBody('px-3 py-2 whitespace-nowrap dark:text-pg-primary-200')
             ->tdBodyEmpty('px-3 py-2 whitespace-nowrap dark:text-pg-primary-200')
             ->trBodyClassTotalColumns('')
             ->tdBodyTotalColumns('px-3 py-2 whitespace-nowrap dark:text-pg-primary-200 text-sm text-pg-primary-600 text-right space-y-2');
@@ -56,7 +56,7 @@ public function actions(): Actions
     public function cols(): Cols
     {
         return Theme::cols()
-            ->div('select-none space-x-1')
+            ->div('select-none space-x-1 flex flex-row-reverse justify-end items-center gap-1')
             ->clearFilter('', '');
     }