toggle grid view
iam trying to get a toggle action for list view and grid view
19 Replies
So an Action that sets a property/url param based on which you set grid/list view?
yes
i can do that using ->contentGrid([
'md' => 2,
'xl' => 3,
]);
but i want both list view and grid view as a toggle
Does
->contentGrid(null) or ->contentGrid(false) show list view again?your not getting
->contentGrid([
'md' => 2,
'xl' => 4,
])
if i use this my default table shows as grid
but iam trying to get a toggle action
which toggle the list view and grid view
i think u saying like this
Actions\Action::make('Grid View')
->contentGrid(null)
its not working
I totally understood. I can't give you the full solution, but I am trying to figure out what could work 😉 There is no ready-to-use "Grid-List-Toggle-Action". That's why I described the process above.
Does
$table->contentGrid(null) or $table->contentGrid(false) show a List view? (Only list no toggle or anything)?
If this show List view again:
1) Create a action (header or page)
2) Inside the action set a property on the Livewire component or add a param to the URL
3) Inside the form use a Closure for ->contentGrid() to toggle between false/null and the array depending on your propertyThere’s an example of this in the Curator plugin. You can have a look at the code on GitHub.
what is did is
created a custom page for that resource and extended it on ListRecord
then added
protected function getTableContentGrid(): ?array
{
return [
'md' => 2,
'xl' => 3,
];
}
this and called the getTableColumns():array
to get the tables
on List page i have create a action button which will take me to that custom resource
is that a right approach
sorry, not following you, what does the action to take them to that custom reasource have to do with toggling a table between grid and list?
So you created to separate pages and link between them? I guess that will work, too.
Even though it's not what we suggested 😅
lets think u create a resource then
U wish to create a custom page for that resource ok
then what I did is extend that custom page to ListRecord .....
next in ListPage i have created a action button and in ->url() i have passed the custom page
then using this getTableColumns():array i have all the table content then on that table
i have this function for grid layout
protected function getTableContentGrid(): ?array
{
return [
'md' => 2,
'xl' => 3,
];
}
ya but i tried this
$table->contentGrid(null) or $table->contentGrid(false)
but not able to toggle that
Please read my messages carefully. Never said it would add a "toggle". Just wanted to know whether it shows as a List view
got it wrong
but not working
sry...
Are you sure? That's pretty much the same as Adam does with Curator: https://github.com/awcodes/filament-curator/blob/3d462e0f3fff5d8279d51fb7964ed281063dcb4f/src/Resources/MediaResource/ListMedia.php#L54-L65
GitHub
filament-curator/src/Resources/MediaResource/ListMedia.php at 3d462...
A media picker plugin for Filament Panels. Contribute to awcodes/filament-curator development by creating an account on GitHub.
No idea what you are doing, but it's working perfectly fine for me:
->contentGrid(null) => No Grid, List View
->contentGrid(['sm' => 3]) => Grid viewcan u show me a piece of code or any thing where u added this
plz not getting this 🥲
->contentGrid(null) => No Grid, List View
->contentGrid(['sm' => 3]) => Grid view
Normal table definition. Here in a resource. Not sure whether you are using admin panel or table builder only. Also no idea which Filament version you are using as you didn't select a tag
ooookk now i got it.......right
So since this works, we can go to step three: Using a Closure to toggle this:
->contentGrid(fn ($livewire) => $livewire->your_property ? ['sm' => 3] : null). See: https://discord.com/channels/883083792112300104/1138719691947393035/1138728131360981082this is what i did
public static function table(Table $table): Table
{
return $table
->columns(!Session::get('asset-assignment-table-layout-grid') ? static::getListTableColumns() : static::getGridTableColumns())
......}
public static function getListTableColumns(): array
{}
public static function getGridTableColumns(): array
{}
->headerActions([
Tables\Actions\Action::make('toggle-table-view')
->extraAttributes([
'class' => 'grid-view-header',
])
->action(function () {
return Session::put('asset-assignment-table-layout-grid', !Session::get('asset-assignment-table-layout-grid'));
})
])
ON ----list page
protected function getTableContentGrid(): ?array
{
if (!Session::get('asset-table-layout-grid')) return null;
return [
'sm' => 2,
'lg' => 3,
'xl' => 4,
];
}