Filament•5mo ago

Collapse All Table Row Groups By Default

im trying to figure out if there is a way to collapse all groups by default in a filament table with groups + summaries is it possible? https://github.com/filamentphp/filament/discussions/10717

19 Replies

ericmpOP•5mo ago

bump

tim.lalev•5mo ago

Had a similar use case and couldn’t find a way to collapse groups on default. However I managed to create a satisfactory workaround. Ditch the filament groups. Modify the query. Add a custom view column containing a collapsible panel and put your group contents inside. You’ll need to handle summary logic yourself As added benefit you can lazy load the desired group content only when expanded so the table will be much faster

ericmpOP•5mo ago

hmm. @tim.lalev can u give me a little example on how to start implementing it plz?

tim.lalev•5mo ago

Sure For the table columns you can do something like that:

\Filament\Tables\Columns\Layout\Split::make([                    
    // Add any visible columns here
    Tables\Columns\TextColumn::make('block_id')->label('Trip Block'),
    Tables\Columns\TextColumn::make('driver_name')->label('Driver'),
]),

\Filament\Tables\Columns\Layout\Split::make([                    
    // All Collapsable content goes inside a custom view column
    ViewColumn::make('created_at')
    ->view('filament.trip.trip-leg'),

])->collapsible(),

\Filament\Tables\Columns\Layout\Split::make([                    
    // Add any visible columns here
    Tables\Columns\TextColumn::make('block_id')->label('Trip Block'),
    Tables\Columns\TextColumn::make('driver_name')->label('Driver'),
]),

\Filament\Tables\Columns\Layout\Split::make([                    
    // All Collapsable content goes inside a custom view column
    ViewColumn::make('created_at')
    ->view('filament.trip.trip-leg'),

])->collapsible(),

Inside the collapsible custom view column you would put a livewire component responsible for handling the group data. Make sure to generate a unique livewire key otherwise it will glitch when you collapse/expand the content. Here is an example:

<div class="flex max-w-max">
    @livewire('trip-leg', ['trip_id' => $getRecord()->id, ,key($getRecord()->id.'-'.Str::uuid()) 'lazy' => true])
</div>

<div class="flex max-w-max">
    @livewire('trip-leg', ['trip_id' => $getRecord()->id, ,key($getRecord()->id.'-'.Str::uuid()) 'lazy' => true])
</div>

When you add the 'lazy' => true then livewire will load the content only when visible on the screen (which happens when you expand the column content)

ericmpOP•5mo ago

thanks for the workaround. but then, if i do it this way, the items inside the split lose the label, how u handle that?

tim.lalev•5mo ago

Ah yeah so for labels you have multiple options. The simplest is to use description() instead of a label.

tim.lalev•5mo ago

https://filamentphp.com/docs/3.x/tables/columns/text#displaying-a-description

Text column - Table Builder - Filament

tim.lalev•5mo ago

It accepts a second parameter for posittion that can eaither be 'above' or 'below' The other option is to return an infolist from the livewire componet so that you can structure is however you want You can even render a whole new table from the livewire component if you really need lots of structured data to be shown

tim.lalev•5mo ago

https://filamentphp.com/docs/3.x/infolists/adding-an-infolist-to-a-livewire-component#setting-up-the-livewire-component

Adding an infolist to a Livewire component - Infolist Builder - Fil...

tim.lalev•5mo ago

https://filamentphp.com/docs/3.x/tables/adding-a-table-to-a-livewire-component#adding-the-table

Adding a table to a Livewire component - Table Builder - Filament

tim.lalev•5mo ago

Here is a sample of an infolist returned by the livewire component for expanded section

ericmpOP•5mo ago

looks really cool

tim.lalev•5mo ago

Looks nice and performance is really good

ericmpOP•5mo ago

it reminds me like a modal, but is like inside the row. lets see if i manage to get something similar. so far, thanks, really appreciate it

tim.lalev•5mo ago

You are welcome! Share your results

ericmpOP•5mo ago

yeah for sure

tim.lalev•5mo ago

I felt alone in the universe when trying to figure it out hahah good luck

mttt•3mo ago

Me and @Min Min Tun faced a similar issue and found a quick solution by extending the Filament vendor file vendor/filament/tables/resources/views/components/group/header.blade.php. Then replace

@if ($collapsible)
        x-on:click="toggleCollapseGroup(@js($title))"
 @endif

@if ($collapsible)
        x-on:click="toggleCollapseGroup(@js($title))"
 @endif

with

@if ($collapsible)
    x-init="collapsed = @js($title) ? toggleCollapseGroup(@js($title)) : false"
    x-on:click="collapsed = !collapsed; toggleCollapseGroup(@js($title))"
   @endif

@if ($collapsible)
    x-init="collapsed = @js($title) ? toggleCollapseGroup(@js($title)) : false"
    x-on:click="collapsed = !collapsed; toggleCollapseGroup(@js($title))"
   @endif

This ensures that all groups are collapsed by default.

mttt•3mo ago

Gaming

Programming

Collapse All Table Row Groups By Default