Responsive Table

[andreaskevn]

Package

Table builder

Package Version

v3.3

How can we help you?

I have a problem with the table builder. I want to use 2 method on showing the data on the table.

1. When the breakpoint/view is dekstop, i want to use default table (column->TextColumn)
2. But, when the breakpoint is phone/mobile, i want to use stacked table

What i had tried is, i use stacked only for 'md', but the dekstop in view, table header is missing, but the mobile view is looking good.
I wondering how to showing back the column / table header.

[presidenwashil]

Hi, I’m experiencing the exact same issue on Filament v3.3.

I’m trying to conditionally use TextColumn for desktop view and a stacked layout for mobile. I attempted something like this:

public static function table(Table $table): Table
{
    return $table
        ->columns([
            Stack::make([
                TextColumn::make('...'),
                TextColumn::make('...'),
                TextColumn::make('...'),
            ])
        ])
        ->contentGrid([
           'sm' => 1,
        ]);
}

It works well on mobile (stacked looks great), but on desktop, the table headers are missing and just give us sorting filter. I’ve tried a few combinations of responsive breakpoints but haven’t found a clean workaround yet.