Filament: Clickable Table Column to Open Modal with Details

In Filament tables, sometimes we show just the sum/count number cause we don't have enough space. However, we can show the details in a MODAL window with would appear on click of that column.

In this case, we have a Sales Count column:

And when we click on it - we open a modal with detailed information:

To do this, we have to add an Action to our Column:

app/Filament/Resources/ProductResource.php

Tables\Columns\TextColumn::make('sales')
    ->formatStateUsing(function (Product $record) {
        return $record->sales_count;
    })
    ->action(
        Tables\Actions\Action::make('view_sales')
            ->modal()
            ->modalContent(fn(Product $record) => view('productViewSales', ['record' => $record]))
    ),

And create the view:

resources/views/productViewSales.blade.php

<div>
    <ul>
        @foreach($record->sales as $sale)
            <li>
                {{ $sale->user->name }} bought {{ $sale->quantity }} items on {{ $sale->created_at->format('Y-m-d') }}
            </li>
        @endforeach
    </ul>
</div>

Of course, doing this with a related table - will result in an N+1 query, so let's fix it:

app/Filament/Resources/ProductResource.php

public static function table(Table $table): Table
{
    return $table
        ->modifyQueryUsing(function (Builder $query) {
            return $query->with('sales.user')
                ->withCount('sales');
        })
        ->columns([
            // ...
        ]);
}

That's it. We can put any View content inside this modal and display even more detailed information.