table layout styling

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),
            ])

            ->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

25 Replies

Jamie CeeOP•5mo ago

It should only stack the name and username fields? Also all toggleable columns dont seem to have its functionality when using Stack, Split etc

Jamie CeeOP•5mo ago

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'),

            ])

            ->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

SeanKiwi (Semantics)•5d ago

@Jamie Cee Did you manage to figure this out?

awcodes•5d ago

Not aligned how?

SeanKiwi (Semantics)•5d ago

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

awcodes•5d ago

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

SeanKiwi (Semantics)•5d ago

@awcodes 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?

awcodes•5d ago

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.

SeanKiwi (Semantics)•5d ago

@awcodes 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

SeanKiwi (Semantics)•5d ago

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

awcodes•5d ago

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

SeanKiwi (Semantics)•5d ago

oh i actually just got it to work it makes the row very long though

SeanKiwi (Semantics)•5d ago

awcodes•5d ago

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.

SeanKiwi (Semantics)•5d ago

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

awcodes•5d ago

Nesting the columns would put td tags inside td tags which isn’t valid html and would lead to accessibility issues. Fair, but in filament stacks are designed to be used inside of splits or grids.

SeanKiwi (Semantics)•5d ago

yeah i am seeing that, would be cool to have it available as a column type but thanks for your advise 👍

awcodes•5d ago

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.

SeanKiwi (Semantics)•5d ago

right, that makes sense @awcodes 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(),

awcodes•5d ago

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

SeanKiwi (Semantics)•5d ago

all good, Thanks 👍

awcodes•5d ago

Did that work for you?

SeanKiwi (Semantics)•5d ago

yeah its the best solution i have tried so far

awcodes•5d ago

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

SeanKiwi (Semantics)•5d ago

cool, thank you 👍

Gaming

Programming

table layout styling

Did you find this page helpful?