Display the table correctly on Mobile and Desktop
I'm using Filament version 3 and I need to create two layouts with Table Builder. One for the desktop, which will be the traditional layout, and the other for mobile, which will use Split to group the columns. The problem is that I used the code below, and both the desktop and mobile layouts ended up with the same mobile layout. Could someone please help me and tell me if I did it or how to do it to make it work?
public static function table(Table $table): Table { return $table ->columns([ Tables\Columns\TextColumn::make('name') ->label('Área') ->searchable() ->sortable() ->visibleFrom('md') ->limit(30), Tables\Columns\TextColumn::make('departament.name') ->label('Departamento') ->searchable() ->sortable() ->visibleFrom('md') ->limit(30), Tables\Columns\TextColumn::make('email') ->label('E-mail') ->searchable() ->sortable() ->visibleFrom('md') ->limit(30), Tables\Columns\ToggleColumn::make('status') ->label('Status') ->visibleFrom('md') ->sortable(), Split::make([ Tables\Columns\TextColumn::make('name') ->label('Área') ->searchable() ->sortable() ->limit(30), Tables\Columns\TextColumn::make('departament.name') ->label('Departamento') ->searchable() ->sortable() ->limit(30), Tables\Columns\TextColumn::make('email') ->label('E-mail') ->searchable() ->sortable() ->limit(30), Tables\Columns\ToggleColumn::make('status') ->label('Status') ->sortable(),
])->from('md'), ])
9 Replies
Could someone please help me? I'm starting to think that filament isn't very responsive, as I've posted this question in several places and no one can help me.
There's a cool plugin doing what you are looking for. Look for it on the filament website.
There is no way to use two separate layouts for mobile/desktop
Filament tries it's best to be responsive out of the box. But there's no separate definitions for mobile/desktop so it's not super flexible.
Filament
Table Layout Toggle by Thomas Georgel - Filament
Provides a toggle button for tables, allowing users to switch between Grid and Table layout.
What would be the plugin please?
I understand. Do you have any suggestions on the best way to do this? This project requires a traditional desktop layout and a split layout on mobile. Thank you.
Maybe CSS could already solve this?
I'm thinking about creating a custom page and having two tables in it. Then, in the blade, I control which one will appear via the Tailwind breakpoint. Is it possible to have two tables on a custom page? If so, where can I see this in the documentation, please?
No, but you can create 2 Livewire components with a table each.
ok