Filament•14mo ago

Adding Image next to TextColumn

Hello, I want to add an image before a TextColumn (I am currently handling medias with Spatie package) My current code is :

Tables\Columns\SpatieMediaLibraryImageColumn::make('product-image')
                        ->label('')
                        ->circular()
                        ->collection('product-images')
                        ->limit(1)
                        ->extraImgAttributes(['loading' => 'lazy']),

Tables\Columns\TextColumn::make('name')
                        ->label('Name')
                        ->searchable()
                        ->sortable()

Tables\Columns\SpatieMediaLibraryImageColumn::make('product-image')
                        ->label('')
                        ->circular()
                        ->collection('product-images')
                        ->limit(1)
                        ->extraImgAttributes(['loading' => 'lazy']),

Tables\Columns\TextColumn::make('name')
                        ->label('Name')
                        ->searchable()
                        ->sortable()

This code create a separate Column, I want to "group" the two columns Please see picture below to see what I want to achieve Could you suggest how to do this ? Thank you

6 Replies

lazydog•14mo ago

One way to resolve this is to add a new

TextColumn::make('image')
->label('Image')
->state(function ($record) { 
      return $record->image_path;
})

einnlleinhatt_•14mo ago

Have you tried using formatstateusing() ?

->formatStateUsing(function ($record) {
                    return $record->image . ' ' . $record->name;
                })

->formatStateUsing(function ($record) {
                    return $record->image . ' ' . $record->name;
                })

Not sure if it's work with image squint

SlaxOP•14mo ago

It prints out the url of the image as string

einnlleinhatt_•14mo ago

I don't have any other ideas, have you tried to reserved it ? But I doubt it will work in image column

LeandroFerreira•13mo ago

custom column?

ViewColumn::make('custom_column')
    ->view('custom-column')

ViewColumn::make('custom_column')
    ->view('custom-column')

<!-- resources/views/custom-column.blade.php -->
<div class="flex">
    <img src="{{ Storage::url($getRecord()->image) }}" />
    <div>{{ $getRecord()->name }}</div>
</div>

<!-- resources/views/custom-column.blade.php -->
<div class="flex">
    <img src="{{ Storage::url($getRecord()->image) }}" />
    <div>{{ $getRecord()->name }}</div>
</div>

Dennis Koch•13mo ago

Well then just wrap it in a image tag.

Gaming

Programming

Adding Image next to TextColumn