Table alignment (#379)

Author: pascalbaljet

app/app/Tables/Projects.php

@@ -59,10 +59,10 @@ public function configure(SpladeTable $table)
             ->column('updated_at', 'Project Updated', exportFormat: function () {
                 return NumberFormat::FORMAT_DATE_TIME2;
             })
-            ->column('organization.name', searchable: true, sortable: true, exportAs: false)
+            ->column('organization.name', searchable: true, sortable: true, exportAs: false, alignment: 'center')
             ->column('organization.address.city', 'Organization City', sortable: true, exportStyling: function (Style $style) {
                 $style->getFont()->setBold(true);
-            })
+            }, alignment: 'right')
             ->paginate(15);
     }
 }

resources/views/table/body.blade.php

@@ -31,11 +31,13 @@ class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300
                     v-show="table.columnIsVisible(@js($column->key))"
                     class="whitespace-nowrap text-sm @if($loop->first && $hasBulkActions) pr-6 @else px-6 @endif py-4 @if($column->highlight) text-gray-900 font-medium @else text-gray-500 @endif @if($table->rowLinks->has($itemKey)) cursor-pointer @endif {{ $column->classes }}"
                 >
-                    @isset(${'spladeTableCell' . $column->keyHash()})
-                        {{ ${'spladeTableCell' . $column->keyHash()}($item, $itemKey) }}
-                    @else
-                        {!! nl2br(e($getColumnDataFromItem($item, $column))) !!}
-                    @endisset
+                    <div class="flex flex-row items-center @if($column->alignment == 'right') justify-end @elseif($column->alignment == 'center') justify-center @else justify-start @endif">
+                        @isset(${'spladeTableCell' . $column->keyHash()})
+                            {{ ${'spladeTableCell' . $column->keyHash()}($item, $itemKey) }}
+                        @else
+                            {!! nl2br(e($getColumnDataFromItem($item, $column))) !!}
+                        @endisset
+                    </div>
                 </td>
             @endforeach
         </tr>

resources/views/table/head.blade.php

@@ -15,8 +15,8 @@ class="@if($loop->first && $hasBulkActions) pr-6 @else px-6 @endif py-3 text-lef
                     <Link keep-modal dusk="sort-{{ $column->key }}" href="{{ $sortBy($column) }}">
                 @endif
 
-                <span class="flex flex-row items-center">
-                    <span class="uppercase w-full">{{ $column->label }}</span>
+                <span class="flex flex-row items-center @if($column->alignment == 'right') justify-end @elseif($column->alignment == 'center') justify-center @else justify-start @endif">
+                    <span class="uppercase">{{ $column->label }}</span>
 
                     @if($column->sortable)
                         <svg aria-hidden="true" class="w-3 h-3 ml-2 @if($column->sorted) text-green-500 @else text-gray-400 @endif" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">

src/Table/Column.php

@@ -29,6 +29,7 @@ public function __construct(
         public Closure|array|null $exportStyling = null,
         public array|string|null $classes = null,
         public Closure|null $as = null,
+        public string $alignment = 'left',
     ) {
         if (is_array($classes)) {
             $classes = Arr::flatten($classes);
@@ -55,6 +56,7 @@ public function clone(): static
             $this->exportStyling,
             $this->classes,
             $this->as,
+            $this->alignment,
         );
     }
 
@@ -73,6 +75,7 @@ public function toArray()
             'sortable'      => $this->sortable !== false,
             'sorted'        => $this->sorted,
             'highlight'     => $this->highlight,
+            'alignment'     => $this->alignment,
         ];
     }
 

src/Table/HasColumns.php

@@ -57,6 +57,7 @@ public function column(
         callable|array|null $exportStyling = null,
         array|string|null $classes = null,
         callable|null $as = null,
+        string $alignment = 'left',
     ): self {
         $key   = $key   !== null ? $key : Str::kebab($label);
         $label = $label !== null ? $label : Str::headline(str_replace('.', ' ', $key));
@@ -84,6 +85,7 @@ public function column(
             exportStyling: $exportStyling,
             classes: $classes,
             as: $as,
+            alignment: $alignment,
         ))->values();
 
         if (!$searchable) {