How to show the label when using Split or Stack layout in Table

[khanakia]

I am using this example to Stack the Values on Mobile https://filamentphp.com/docs/3.x/tables/layout#stacking-within-a-split

But i want to show the labels for each value. How do i achieve this?

[leandrocfe]

via formatStateUsing?

->formatStateUsing(fn (Column $column, $state): string => $column->getLabel() . ': ' . $state)

[ccc-developer]

Hi @khanakia!

You can show labels for each value in Split/Stack layouts by using formatStateUsing() on each column. Here's how I did it:

use Filament\Tables\Columns\Layout\Split;
use Filament\Tables\Columns\Layout\Stack;
use Filament\Tables\Columns\TextColumn;

Split::make([
    TextColumn::make('name')
        ->label('Name')
        ->formatStateUsing(fn ($state, $column) => "{$column->getLabel()}: {$state}"),
    Stack::make([
        TextColumn::make('phone')
            ->label('Phone')
            ->formatStateUsing(fn ($state, $column) => "{$column->getLabel()}: {$state}")
            ->icon('heroicon-m-phone'),
        TextColumn::make('email')
            ->label('Email')
            ->formatStateUsing(fn ($state, $column) => "{$column->getLabel()}: {$state}")
            ->icon('heroicon-m-envelope'),
    ]),
])


protected function formatColumnWithLabel(): Closure 
{
    return fn ($state, $column) => "{$column->getLabel()}: {$state}";
}

// Then use it like:
Split::make([
    TextColumn::make('name')
        ->formatStateUsing($this->formatColumnWithLabel()),
    Stack::make([
        TextColumn::make('phone')
            ->formatStateUsing($this->formatColumnWithLabel()),
        TextColumn::make('email')
            ->formatStateUsing($this->formatColumnWithLabel()),
    ]),
])

[ccc-developer]

I ran into an issue with the ->date() method overriding my custom formatting function. Here's how I solved it:

TextColumn::make('report_date')
    ->label('Report Date')
    ->formatStateUsing($this->formatDateColumnWithLabel())
    // Remove the ->date() method since we're formatting manually

// Then in your class add this new function:
protected function formatDateColumnWithLabel(): Closure
{
    return function ($state, $column) {
        if (!$state) return null;
        return date('M d, Y', strtotime($state)) . " ({$column->getLabel()})";
    };
}

There may be a better solution, but this worked for me, so I wanted to share it with you.