incomplete column value on ->stackedonmobile() on Table Widget | Filament | Page 1

charred lagoon Jun 1, 2026, 3:53 AM

#

Anyone knows how to fix this? I have Table widget and i want to use stackedonmobile(), but the last column doesnt display any value. please see the image for reference. Thanks!

#

class AvailableDocumentTypesWidget extends TableWidget
{
    protected static ?int $sort = 5;

    protected int|string|array $columnSpan = 'full';

    protected static ?string $heading = 'Available Document Types';

    public function table(Table $table): Table
    {
        $isAlumni = auth()->user()?->hasRole('alumni') ?? false;

        return $table
            ->query(
                DocumentType::query()
                    ->where('is_active', true)
                    ->when($isAlumni, fn ($q) => $q->where('available_for_alumni', true))
            )
            ->stackedOnMobile()
            ->columns([
                TextColumn::make('name')
                    ->label('Document')
                    ->weight('bold'),

                TextColumn::make('processing_time')
                    ->label('Processing Time')
                    ->icon('heroicon-o-clock'),

                TextColumn::make('requirements')
                    ->label('Requirements')
                    ->wrap()
                    ->limit(80),

                TextColumn::make('max_daily_requests')
                    ->label('Daily Limit')
                    ->formatStateUsing(fn ($state) => ($state === 'No limit' || ! $state) ? 'No limit' : "{$state} per day")
                    ->default('No limit'),
            ])
            ->paginated(false);
    }
}

#

i already tried to re order the column and this happens

inland wharf Jun 1, 2026, 12:24 PM

#

It it actually empty or hidden via CSS?

charred lagoon Jun 1, 2026, 8:24 PM

#

its not empty or hidden, as you can see on the normal table, the value are complete but when i used ->stackedonmobile(), the value of last column are not visible.

inland wharf Jun 1, 2026, 10:19 PM

#

charred lagoon its not empty or hidden, as you can see on the normal table, the value are compl...

Yes. But the value can be hidden on mobile. Check the DevTools whether the value is there on mobile and just hidden.

charred lagoon Jun 1, 2026, 11:06 PM

#

inland wharf Yes. But the value can be hidden on mobile. Check the DevTools whether the value...

the value is visible on DevTools but not displaying on UI.

charred lagoon Jun 1, 2026, 11:23 PM

#

i tried to ask AI to fix it and this is the result.

@media (min-width: 768px) {
    th.fi-ta-header-cell:last-child {
        width: 1% !important;
        white-space: nowrap !important;
    }

    td.fi-ta-cell:last-child {
        width: 1% !important;
        white-space: nowrap !important;
    }
}

restive heron Jun 1, 2026, 11:25 PM

#

Something is off in your code that you aren’t sharing. It’s trying to apply badge classes but non of the code you shared is showing any application of badge to the column.

charred lagoon Jun 1, 2026, 11:29 PM

#

oh, my bad. the code i paste here is not updated.

 public function table(Table $table): Table
    {
        $isAlumni = auth()->user()?->hasRole('alumni') ?? false;

        return $table
            ->query(
                DocumentType::query()
                    ->where('is_active', true)
                    ->when($isAlumni, fn ($q) => $q->where('available_for_alumni', true))
            )
            ->columns([
                TextColumn::make('name')
                    ->label('Document')
                    ->weight('bold'),

                TextColumn::make('processing_time')
                    ->label('Processing Time')
                    ->icon('heroicon-o-clock'),

                TextColumn::make('requirements')
                    ->label('Requirements')
                    ->wrap()
                    ->limit(80),

                TextColumn::make('daily_limit')
                    ->label('Daily Limit')
                    ->badge()
                    ->color(fn ($state) => $state === 'No limit' ? 'gray' : 'warning')
                    ->state(fn (DocumentType $record) => $record->max_daily_requests ? "{$record->max_daily_requests} per day" : 'No limit'),
            ])
            ->stackedOnMobile()
            ->paginated(false);
    }

restive heron Jun 1, 2026, 11:32 PM

#

Then why isn’t it a badge in your non mobile view. Something else is off here.

charred lagoon Jun 1, 2026, 11:42 PM

#

it is. as you can see it displays both badge.

restive heron Jun 1, 2026, 11:47 PM

#

Ok, the last screenshot you shared didn’t show it as a badge.

#

Can you provide a reproduction repo without the AI fix? From a filament pov, it doesn’t make sense.

charred lagoon Jun 2, 2026, 12:15 AM

#

ah, my bad. there's actually no bug in Filament, so a reproduction repo won't be necessary!

the issue was entirely caused by my own custom theme.css. I had a global CSS rule (td.fi-ta-cell:last-child { width: 1% !important; }) to try and shrink-wrap my action columns on desktop views.

when stackedOnMobile() activated, that CSS rule accidentally squashed the mobile container into an invisible 1% width, which is why the badge was hidden on the UI but still visible in the DOM. i've scoped that CSS inside a @media (min-width: 768px) query and everything is rendering perfectly now.

sorry for the confusion, and thanks for taking the time to help!

restive heron Jun 2, 2026, 12:19 AM

#

No worries. Glad you found the issue.

#incomplete column value on ->stackedonmobile() on Table Widget