Creating a Collapsible Table Widget in FilamentPHP

One of the best thing about Filament is, it is highly customizable and which is why we love it. We often find ourselves looking for ways to enhance our FilamentPHP projects. One such enhancement is the ability to create collapsible table widgets. In this blog post, I'll share a custom implementation that allows you to create collapsible table widgets in FilamentPHP, providing a more compact and organized interface for your dashboard.

The Custom Widget Class

First, let's create an abstract class that extends FilamentPHP's TableWidget:

abstract class CollapsibleTableWidget extends \Filament\Widgets\TableWidget
{
    /**
     * @var view-string
     */
    protected static string $view = 'filament.widgets.collapsible-table-widget';
}

This class sets a custom view for our collapsible table widget. The view will be responsible for rendering the collapsible section containing our table.

The Custom Blade View

Next, we'll create the custom blade view for our widget.

filament/widgets/collapsible-table-widget.blade.php:

@php
    $table = $this->table;
 
    $this->table->header(new \Illuminate\Support\HtmlString(''));
@endphp
 
<x-filament-widgets::widget class="fi-wi-table">
    {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\Widgets\View\WidgetsRenderHook::TABLE_WIDGET_START, scopes: static::class) }}
 
    <x-filament::section
        collapsible
        class="collapsible-table-widget"
        :headerActions="$table->getHeaderActions()"
    >
        <x-slot name="heading">
            {{ $table->getHeading() }}
        </x-slot>
 
        {{ $this->table }}
    </x-filament::section>
 
    {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\Widgets\View\WidgetsRenderHook::TABLE_WIDGET_END, scopes: static::class) }}
</x-filament-widgets::widget>

This view is very similar to Filament's table-widget view, it just wraps our table in a collapsible section, using FilamentPHP's built-in <x-filament::section> component. We're also passing the table's header actions and heading to the section component. However, we don't want to show the table's header, so we set it to empty.

Styling

Wrapping a Filament table in a section adds extra borders and padding. To ensure our collapsible table widget looks seamless, we need to add some custom CSS to your theme.css file:

.collapsible-table-widget .fi-section-content {
    @apply p-0
}
 
.collapsible-table-widget .fi-ta-ctn {
    @apply rounded-t-none ring-0
}
 
.collapsible-table-widget .fi-section-content-ctn {
    @apply border-t-0
}

Usage

Now that we have our custom widget set up, let's see how to use it in practice. Here's an example of a widget that lists users:

use Filament\Tables;
use Filament\Tables\Table;
 
class ListUsersWidget extends CollapsibleTableWidget
{
    public function table(Table $table): Table
    {
        return $table
            ->query(...)
            ->headerActions([
                Tables\Actions\Action::make('create')
                    ->url(...),
                Tables\Actions\Action::make('view')
                    ->url(...),
            ])
            ->heading('Users');
    }
}

With this simple implementation, you can now create collapsible table widgets in your FilamentPHP projects. It provides a more compact and organized way to display tables on your dashboard, especially when you have multiple table widgets.

Remember to adjust the query, actions, and heading according to your specific use case. Happy coding!