Start on data table components.

dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
     "/js/filament.js": "/js/filament.js?id=575bb8a26dd76080eafa",
-    "/css/filament.css": "/css/filament.css?id=023aff7cc5ff2ee37f96"
+    "/css/filament.css": "/css/filament.css?id=e6c622d51000290fcc6f"
 }

resources/views/components/app-header.blade.php

@@ -4,17 +4,17 @@
     {{ $attributes->merge(['class' => 'bg-gray-900 text-gray-500 flex flex-col space-y-4 shadow-lg md:shadow-none']) }}>
     <x-filament::app-branding />
     <x-filament-nav class="flex-grow px-4 overflow-y-auto" />
-    <x-filament::dropdown class="w-full text-left flex-grow flex items-center px-4 py-3 space-x-3 transition-colors duration-200 hover:text-white hover:bg-gray-800" id="dropdown-user">
-        <x-filament-avatar :user="Auth::user()" :size="32" class="flex-shrink-0 w-8 h-8 rounded-full" />
-        <span class="flex-grow text-sm leading-tight font-semibold">{{ Auth::user()->name }}</span>
-
-        <x-slot name="content">
-            <ul class="list-dropdown" aria-label="{{ __('User actions') }}">
-                @if (Filament\Features::hasUserProfile())
-                    <li><a href="{{ route('filament.profile') }}">{{ __('Edit Profile') }}</a></li>
-                @endif
-                <li><livewire:filament-logout /></li>
-            </ul>
+    <x-filament::dropdown class="w-full text-left flex-grow flex items-center px-4 py-3 space-x-3 transition-colors duration-200 hover:text-white hover:bg-gray-800">
+        <x-slot name="button">
+            <x-filament-avatar :user="Auth::user()" :size="32" class="flex-shrink-0 w-8 h-8 rounded-full" />
+            <span class="flex-grow text-sm leading-tight font-semibold">{{ Auth::user()->name }}</span>
         </x-slot>
+
+        <ul class="list-dropdown" aria-label="{{ __('User actions') }}">
+            @if (Filament\Features::hasUserProfile())
+                <li><a href="{{ route('filament.profile') }}">{{ __('Edit Profile') }}</a></li>
+            @endif
+            <li><livewire:filament-logout /></li>
+        </ul>
     </x-filament::dropdown>
 </header>

resources/views/components/dropdown.blade.php

@@ -1,27 +1,33 @@
 @props([
-    'id',
+    'id' => Str::uuid(),
 ])
 
-<div class="relative"
+<div 
+    class="relative"
     x-data="{ menuIsOpen: false, popper: null }"
+    x-cloak
     x-init="popper = createPopper($refs.btn, $refs.menu, { modifiers: [flip, preventOverflow] })"
     @click.away="menuIsOpen = false"
-    wire:ignore.self>
-    <button type="button"
+    wire:ignore.self
+>
+    <button 
+        type="button"
         x-ref="btn"
         @click="menuIsOpen = !menuIsOpen; $nextTick(() => popper.update())"
         aria-haspopup="true"
         aria-controls="{{ $id }}"
         :aria-expanded="menuIsOpen"
-        {{ $attributes }}>
-        {{ $slot }}
+        {{ $attributes }}
+    >
+        {{ $button }}
     </button>
-    <div x-show="menuIsOpen" 
-        x-cloak
+    <div 
+        x-show="menuIsOpen" 
         x-ref="menu"
         role="menu"
         id="{{ $id }}"
-        tabindex="-1">
-        {{ $content }}
+        tabindex="-1"
+    >
+        {{ $slot }}
     </div>
 </div>

resources/views/components/table/cell-actions.blade.php

@@ -0,0 +1,20 @@
+@props([
+    'label' => __('Edit'),
+])
+
+<x-filament::table.cell class="text-right">
+    <x-filament::dropdown 
+        class="transform text-gray-400 hover:text-gray-600 transition duration-200"
+        x-bind:class="{ 'rotate-90': menuIsOpen }"
+    >
+        <x-slot name="button">
+            <x-heroicon-o-dots-horizontal 
+                class="w-4 h-4" 
+                aria-hidden="true" 
+            />
+            <span class="sr-only">{{ $label }}</span>
+        </x-slot>
+
+        {{ $slot }}
+    </x-filament::dropdown>
+</x-filament::table.cell>

resources/views/fields/file.blade.php

@@ -44,7 +44,7 @@
         </div>
         @if ($field->value)
             <ol 
-                class="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4" 
+                class="grid grid-cols-1 xl:grid-cols-2 gap-2 xl:gap-4" 
                 @if ($field->sortMethod)
                     wire:sortable="{{ $field->sortMethod }}"
                 @endif