Filament•2mo 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•2mo ago

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

LeandroFerreira•2mo 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 Yalahow•2mo ago

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

Adnan Yalahow•2mo ago

Adnan Yalahow•2mo ago

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

Gist

columns.php

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

Dennis Koch•2mo ago

Yes, that's intentional with Stack/Split

Adnan Yalahow•2mo ago

any idea on displaying column headings when screen is bigger🤔

Dennis Koch•2mo ago

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

awcodes•2mo 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 Yalahow•2mo 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•2mo 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 Yalahow•2mo ago

Yeah, I see it.

Solution

Adnan Yalahow•2mo 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 Yalahow•2mo 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