table layout styling | Filament | Page 1

olive umbra Nov 19, 2024, 9:08 AM

#

So whenever I implement layout functionality such as Split or stack. The entire table just keels over.

            ->columns([
                Tables\Columns\TextColumn::make('id')
                    ->label('ID')
                    ->toggleable(isToggledHiddenByDefault: true)
                    ->searchable(),
                Tables\Columns\Layout\Stack::make([
                    Tables\Columns\TextColumn::make('name')
                        ->searchable(),
                    Tables\Columns\TextColumn::make('username')
                        ->toggleable(isToggledHiddenByDefault: true)
                        ->searchable(),
                ]),
                Tables\Columns\TextColumn::make('email')
                    ->searchable(),
                Tables\Columns\TextColumn::make('email_verified_at')
                    ->dateTime()
                    ->toggleable(isToggledHiddenByDefault: true)
                    ->sortable(),
                Tables\Columns\TextColumn::make('status')
                    ->badge(),
                Tables\Columns\TextColumn::make('roles')
                    ->formatStateUsing(function ($record) {
                        return $record->roles->pluck('name')->join(', ');
                    })
                    ->toggleable(isToggledHiddenByDefault: true),
                Tables\Columns\TextColumn::make('dt_last_logged_in')
                    ->dateTime()
                    ->toggleable(isToggledHiddenByDefault: true)
                    ->sortable(),
                Tables\Columns\TextColumn::make('created_at')
                    ->dateTime()
                    ->sortable()
                    ->toggleable(isToggledHiddenByDefault: true),
                Tables\Columns\TextColumn::make('updated_at')
                    ->dateTime()
                    ->sortable()
                    ->toggleable(isToggledHiddenByDefault: true),
            ])

Example

kind lintelBOT Nov 19, 2024, 9:08 AM

#

To help others find answers, you can mark your question as solved via Right click solution message -> Apps -> ✅ Mark Solution

olive umbra Nov 19, 2024, 9:09 AM

#

It should only stack the name and username fields?

Also all toggleable columns dont seem to have its functionality when using Stack, Split etc

olive umbra Nov 19, 2024, 9:30 AM

#

Another example, where it's just all over and messy

            ->columns([
                Tables\Columns\Layout\Split::make([
                    Tables\Columns\Layout\Stack::make([
                        Tables\Columns\TextColumn::make('name')
                            ->icon('heroicon-o-identification')
                            ->searchable(),
                        Tables\Columns\TextColumn::make('email')
                            ->icon('heroicon-o-envelope')
                            ->searchable(),
                    ]),

                    Tables\Columns\TextColumn::make('status')
                        ->badge(),
                    Tables\Columns\TextColumn::make('roles')
                        ->formatStateUsing(function ($record) {
                            return $record->roles->pluck('name')->join(', ');
                        })
                        ->toggleable(isToggledHiddenByDefault: true),
                    Tables\Columns\TextColumn::make('dt_last_logged_in')
                        ->dateTime()
                        ->toggleable(isToggledHiddenByDefault: true)
                        ->sortable(),
                ])->from('md'),

            ])

Nothing is aligned

dawn trench Mar 28, 2025, 8:56 PM

#

@olive umbra Did you manage to figure this out?

silver perch Mar 28, 2025, 9:09 PM

#

Not aligned how?

dawn trench Mar 28, 2025, 9:10 PM

#

you can see in the last screenshot, columns are not aligned, i have similiar results

silver perch Mar 28, 2025, 9:16 PM

#

Oh. You mean “column” width? That’s because using splits and stacks it is not an actual table anymore. See https://filamentphp.com/docs/3.x/tables/layout#controlling-column-width-using-a-grid

Layout - Tables - Filament

dawn trench Mar 28, 2025, 9:20 PM

#

@silver perch i tried this as well, however it creates alot more work to get everything right and its breaks other things such as ->defaultSort('name').

Is there no other options for a simple stack just to get 2 columns stacked vertically?

silver perch Mar 28, 2025, 9:22 PM

#

dawn trench <@766328954503299083> i tried this as well, however it creates alot more work to...

Not really. When you use stacks and splits it is no longer rendered as an actual html table but rows of flex items. So the only way to force even widths is with a grid or possibly more complicated with css in a theme.

dawn trench Mar 28, 2025, 9:24 PM

#

@silver perch i came across this thread from last year for the same topic and someone managed to find a work around, however it does not appear to be working, was it maybe for filament2?

https://github.com/filamentphp/filament/discussions/12061

#

if you dont want to go through that post the final solution was

silver perch Mar 28, 2025, 9:26 PM

#

Hmm, I’m surprised that ever worked because it would create an invalid html structure.

dawn trench Mar 28, 2025, 9:27 PM

#

oh i actually just got it to work

#

it makes the row very long though

#

silver perch Mar 28, 2025, 9:27 PM

#

But you could do that with formatStateUsing() and returning either p tags or just a string with br tags.

#

I wouldn’t nest actual columns like in the issue though.

dawn trench Mar 28, 2025, 9:29 PM

#

ok will look into that, thanks.

I am currently moving over from Nova to Filament and so far this is the only thing that was more friendly on Nova. you can just Stack::make anywhere in your table

silver perch Mar 28, 2025, 9:30 PM

#

Nesting the columns would put td tags inside td tags which isn’t valid html and would lead to accessibility issues.

silver perch Mar 28, 2025, 9:31 PM

#

dawn trench ok will look into that, thanks. I am currently moving over from Nova to Filamen...

Fair, but in filament stacks are designed to be used inside of splits or grids.

dawn trench Mar 28, 2025, 9:33 PM

#

yeah i am seeing that, would be cool to have it available as a column type

#

but thanks for your advise 👍

silver perch Mar 28, 2025, 9:37 PM

#

dawn trench yeah i am seeing that, would be cool to have it available as a column type

I hear you, but having to generate recursive nested table inside table cells with all the methods and action would end up being a nightmare and possibly huge performance implications in v3.

#

Probably a lot easier in nova since it’s vue. So no heavy rerendering on the livewire side.

dawn trench Mar 28, 2025, 9:38 PM

#

right, that makes sense

#

@silver perch did you mean something like this? i had to use getStateUsing because formatStateUsing isnt working for some reason.

            TextColumn::make('customer_details')
                ->label('Test')
                ->getStateUsing(fn ($record) => "{$record->model_number} <br> {$record->status}")
                ->html(),

silver perch Mar 28, 2025, 9:54 PM

#

dawn trench <@766328954503299083> did you mean something like this? i had to use getStateUsi...

Yea. That looks right. I think format is on inputs. Sorry

dawn trench Mar 28, 2025, 9:54 PM

#

all good, Thanks 👍

silver perch Mar 28, 2025, 9:54 PM

#

Did that work for you?

dawn trench Mar 28, 2025, 9:55 PM

#

yeah its the best solution i have tried so far

silver perch Mar 28, 2025, 9:57 PM

#

dawn trench yeah its the best solution i have tried so far

Glad it worked. Probably the best approach to keep things semantic and accessible in the html.

#table layout styling