Filament•15mo ago

Composed table column

Is there a way to get this kind of column? I cannot find the way

12 Replies

KerchackOP•15mo ago

What I need is avatar image on left and then, name on top + user role at bottom

Gush•15mo ago

i think that is a stack, https://filamentphp.com/docs/3.x/tables/layout#allowing-columns-to-stack-on-mobile

Layout - Table Builder - Filament

KerchackOP•15mo ago

yes but how to do that on code?

Gush•15mo ago

use Filament\Support\Enums\FontWeight;
use Filament\Tables\Columns\Layout\Split;
use Filament\Tables\Columns\TextColumn;
 
Split::make([
    ImageColumn::make('avatar')
        ->circular(),
    TextColumn::make('name')
        ->weight(FontWeight::Bold)
        ->searchable()
        ->sortable(),
    TextColumn::make('email'),
])

use Filament\Support\Enums\FontWeight;
use Filament\Tables\Columns\Layout\Split;
use Filament\Tables\Columns\TextColumn;
 
Split::make([
    ImageColumn::make('avatar')
        ->circular(),
    TextColumn::make('name')
        ->weight(FontWeight::Bold)
        ->searchable()
        ->sortable(),
    TextColumn::make('email'),
])

KerchackOP•15mo ago

This is my code

KerchackOP•15mo ago

And this what I get

KerchackOP•15mo ago

any suggestions of what I'm doing wrong?

GDG•15mo ago

You need to use a combination of Split and Stack to achieve your desired results. https://filamentphp.com/docs/3.x/infolists/layout/split#overview https://filamentphp.com/docs/3.x/tables/layout#stacking-within-a-split Basically, something like this but adjusting spans etc

->Split
    ->Avatar
    ->Stack
      ->Name
      ->Email

->Split
    ->Avatar
    ->Stack
      ->Name
      ->Email

Split - Infolist Builder - Filament

Layout - Table Builder - Filament

KerchackOP•15mo ago

Yeah, I've tried this

KerchackOP•15mo ago

And have this pretty close

KerchackOP•15mo ago

Now I need to set first column with 🙏 forgot columnSpan...

GDG•15mo ago

Hopefully that worked for you. 👍

Gaming

Programming

Composed table column