[Feature Request] The ability to "stack" columns in a traditional table (not inside a split)

[ryanmortier]

I was looking for a way to stack columns like seen here: https://demo.filamentphp.com/blog/authors but without using a split.

A split removes the headers on the table which I still require. I would expect it would take a label() method since it wouldn't be able to infer the header. Something like this:

return $table
    ->columns([
        ImageColumn::make('avatar'),
        TextColumn::make('name'),
        Stack::make([
            TextColumn::make('phone')->icon('heroicon-m-phone'),
            TextColumn::make('email')->icon('heroicon-m-envelope'),
        ])->label('Contacts'),
    ])

I understand this can be achieved on a single TextColumn using the ->listWithLineBreaks() method. However, this requires a convoluted accessor defined on the model if you want to do anything fancy like include icons or change styling.

[usmansaleem489]

I'm also looking for same solution. This seems to be achieved in the screenshot provided in the filament docs but how it is done through code is not mentioned.
Refer to email address column under "Vertically aligning column content" section.
https://filamentphp.com/docs/3.x/tables/columns/getting-started#vertically-aligning-column-content

[ohchiko]

I did a workaround for this while waiting for an official method. Basically using the TextColumn ability as @ryanmortier mentioned, then format the state to html. So, in his case, it would be:

return $table
    ->columns([
        ImageColumn::make('avatar'),
        TextColumn::make('name'),
        TextColumn::make('contacts'),
            ->state(fn (Model $record): array => [
                TextColumn::make('phone')->record($record)->icon('heroicon-m-phone')->toHtml(),
                TextColumn::make('email')->record($record)->icon('heroicon-m-envelope')->toHtml(),
            ])
            ->listWithLineBreaks()
            ->formatStateUsing(fn ($state): HtmlString => new HtmlString($state)),    // or ->html()
    ])

Important things here are:

• setting column record
• render the column directly to html
• listWithLineBreaks()
• HtmlString or html()

First, setting the column record with the inherited record. Without doing this, the column would just contains nothing. Second, we need to render the column directly to html as I mentioned above with toHtml() method. Third, the listWithLineBreaks() breaks down the $state into individual state, therefore we can process them individually in formatStateUsing(). Last, the HtmlString as mentioned in the ref below, it allows us to opt out the default sanitizing process (might be dangerous). You can use the html() method instead to achieve this.

To get rid of the padding on each the column, you can apply the inline() method to the column you wish to. Screenshot of the achieved result below.

Hope that helps! :)

Refs:

• https://filamentphp.com/docs/3.x/tables/columns/text#rendering-html
• https://filamentphp.com/docs/3.x/tables/columns/text#listing-multiple-values
• https://filamentphp.com/docs/3.x/tables/columns/text#custom-formatting

[ohchiko]

Actually, I found that you didn't need to format them as html.

return $table
    ->columns([
        ImageColumn::make('avatar'),
        TextColumn::make('name'),
        TextColumn::make('contacts'),
            ->state(fn (Model $record): array => [
                TextColumn::make('phone')->record($record)->icon('heroicon-m-phone'),
                TextColumn::make('email')->record($record)->icon('heroicon-m-envelope'),
            ])
            ->listWithLineBreaks()
    ])

So, the important things are just setting the column record and listWithLineBreaks() method.

From there, you may customize the column as you wish.