Add A image lightbox in imageColumn

packages/tables/docs/03-columns/04-image.md

@@ -93,6 +93,17 @@ ImageColumn::make('avatar')
     ->defaultImageUrl(url('/images/placeholder.png'))
 ```
 
+## Image Lightbox
+
+You can display a image lightbox by using `lightbox()`:
+
+```php
+use Filament\Tables\Columns\ImageColumn;
+
+ImageColumn::make('header_image')
+    ->lightbox()
+```
+
 ## Stacking images
 
 You may display multiple images as a stack of overlapping images by using `stacked()`:

packages/tables/resources/views/columns/image-column.blade.php

@@ -5,6 +5,7 @@
     $isCircular = $isCircular();
     $isSquare = $isSquare();
     $isStacked = $isStacked();
+    $hasLightbox = $hasLightBox() ?? false;
     $overlap = $isStacked ? ($getOverlap() ?? 2) : null;
     $ring = $isStacked ? ($getRing() ?? 2) : null;
     $height = $getHeight() ?? ($isStacked ? '2rem' : '2.5rem');
@@ -41,6 +42,7 @@
 @endphp
 
 <div
+    @if($hasLightbox) x-data="SimpleImageLightBox"  @endif
     {{
         $attributes
             ->merge($getExtraAttributes(), escape: false)
@@ -71,6 +73,7 @@
             >
                 @foreach ($limitedState as $stateItem)
                     <img
+                        @if($hasLightbox)  @click="openSimpleImageLightBox($event)"  @endif
                         src="{{ filled($stateItem) ? $getImageUrl($stateItem) : $defaultImageUrl }}"
                         {{
                             $getExtraImgAttributeBag()

packages/tables/resources/views/index.blade.php

@@ -1119,4 +1119,57 @@ class="p-4 sm:px-6"
     </x-filament-tables::container>
 
     <x-filament-actions::modals />
+
+    <script>
+        document.addEventListener('alpine:init', () => {
+            Alpine.data('SimpleImageLightBox', () => ({
+                openSimpleImageLightBox(e) {
+                    e.preventDefault()
+                    let src = e.target.src
+                    let lightboxDiv = document.createElement('div')
+                    lightboxDiv.innerHTML = `
+                    <div
+                    id="SimpleImageLightBox"
+                    @keydown.escape.window="document.querySelector('#SimpleImageLightBox').remove()"
+                    class="fixed inset-0 flex items-center justify-center p-4 bg-black/50 bg-opacity-75"
+                    style="z-index: 10000;"
+                    >
+                    <div class="relative bg-white max-h-full max-w-2xl p-6 mx-auto rounded shadow"
+                        onclick="event.stopPropagation()"
+                        >
+                        <img src="${src}" alt="Lightbox image" class="object-cover w-full h-full rounded" />
+                        <button
+                        class="absolute p-2 m-2 text-white rounded-full focus:outline-none"
+                        style="top:0; right:0"
+                        >
+                        ✖️
+                        </button>
+                    </div>
+                    </div>
+                `
+                    lightboxDiv.addEventListener('click', () =>
+                        this.closeSimpleImageLightBox(),
+                    )
+                    lightboxDiv
+                        .querySelector('button')
+                        .addEventListener('click', (e) => {
+                            e.stopPropagation()
+                            this.closeSimpleImageLightBox()
+                        })
+                    lightboxDiv
+                        .querySelector('div')
+                        .addEventListener('keydown', (e) => {
+                            if (e.key === 'Escape')
+                                this.closeSimpleImageLightBox()
+                        })
+
+                    this.lightboxDiv = lightboxDiv
+                    document.body.appendChild(lightboxDiv)
+                },
+                closeSimpleImageLightBox() {
+                    this.lightboxDiv.remove()
+                },
+            }))
+        })
+    </script>
 </div>

packages/tables/src/Columns/ImageColumn.php

@@ -50,6 +50,8 @@ class ImageColumn extends Column
 
     protected string | Closure | null $limitedRemainingTextSize = null;
 
+    protected bool | Closure $lightbox = false;
+
     public function disk(string | Closure | null $disk): static
     {
         $this->disk = $disk;
@@ -283,6 +285,18 @@ public function getRing(): ?int
         return $this->evaluate($this->ring);
     }
 
+    public function lightbox(bool | Closure $lightbox = true): static
+    {
+        $this->lightbox = $lightbox;
+
+        return $this;
+    }
+
+    public function hasLightBox(): ?bool
+    {
+        return $this->evaluate($this->lightbox);
+    }
+
     public function limit(int | Closure | null $limit = 3): static
     {
         $this->limit = $limit;