Filament•3mo ago

Table columns

hi every one i would like to make my table to be grid for small devices and use the normal table when the screen is big is there any way i can achieve this using filament i need help please

Solution:

I figured out a laravel package called Agent https://github.com/jenssegers/agent

GitHub

GitHub - jenssegers/agent: 👮 A PHP desktop/mobile user agent parser...

👮 A PHP desktop/mobile user agent parser with support for Laravel, based on Mobiledetect - jenssegers/agent

Jump to solution

14 Replies

Dennis Koch•3mo ago

You might get what you want with some CSS, but probably requires a lot of changes.

LeandroFerreira•3mo ago

Is grid required? Maybe you could show/hide columns based on the breakpoints? https://filamentphp.com/docs/3.x/tables/layout#the-problem-with-traditional-table-layouts

Layout - Table Builder - Filament

Adnan YalahowOP•3mo ago

i have tried this approach and it really works well but when the screen is big table headings are hidden

Adnan YalahowOP•3mo ago

Adnan YalahowOP•3mo ago

this is my code https://gist.github.com/adnanyalahow/e2159079ddd0d6111aa382bcc17d27dc

Gist

columns.php

GitHub Gist: instantly share code, notes, and snippets.

Dennis Koch•3mo ago

Yes, that's intentional with Stack/Split

Adnan YalahowOP•3mo ago

any idea on displaying column headings when screen is bigger🤔

Dennis Koch•3mo ago

You can't with that, sorry. Not sure whether there is a better solution

awcodes•3mo ago

only real option is to format the state. for example:

TextColumn::make('name')
  ->formatStateUsing(fn ($state) => 'Name: ' . $state);

TextColumn::make('name')
  ->formatStateUsing(fn ($state) => 'Name: ' . $state);

Adnan YalahowOP•3mo ago

Thanks I appreciate you trying to help This is cool. but in every row you see Name: label. So, I will just use icons instead thank for the help

awcodes•3mo ago

understood, you just have to realize that when you use splits and stacks, it is technically not a table anymore so no headers, there's also no way to fake the headers since each 'column' actually contains more that one data attribute, so, there's no way to know which label to use for the headers anyway.

Adnan YalahowOP•3mo ago

Yeah, I see it.

Solution

Adnan Yalahow•3mo ago

I figured out a laravel package called Agent https://github.com/jenssegers/agent

GitHub

GitHub - jenssegers/agent: 👮 A PHP desktop/mobile user agent parser...

👮 A PHP desktop/mobile user agent parser with support for Laravel, based on Mobiledetect - jenssegers/agent

Adnan YalahowOP•3mo ago

so this is what I have done

 $agent = new Agent();

        return $table
            ->columns(
                $agent->isDesktop()
                    ? static::getListTableColumns()
                    : static::getGridTableColumns()
            )
            ->contentGrid(
                fn() =>  $agent->isDesktop()
                    ? null
                    : [
                        'default' => 2,
                        'sm' => 2,
                        'md' => 3,
                        'lg' => 1,
                    ]
            )

 $agent = new Agent();

        return $table
            ->columns(
                $agent->isDesktop()
                    ? static::getListTableColumns()
                    : static::getGridTableColumns()
            )
            ->contentGrid(
                fn() =>  $agent->isDesktop()
                    ? null
                    : [
                        'default' => 2,
                        'sm' => 2,
                        'md' => 3,
                        'lg' => 1,
                    ]
            )

Gaming

Programming

Table columns