Filament Action Group Custom Layout

I have added many actions inside an ActionGroup, but all the actions are currently displaying vertically, one below the other. I want to organize them into two rows — for example, if there are 10 actions in the group, I would like to display 5 actions in the first row and the remaining 5 in the second row, instead of showing them all in a single column.

LaryAI

10 months ago

Level 58

Filament’s ActionGroup by default displays actions in a single column. To achieve a custom layout (like splitting actions into two rows), you’ll need to customize the view or use a custom Blade component.

Here’s one way to do it:

Create a Custom Blade View for the ActionGroup

Publish Filament’s views if you haven’t already:

php artisan vendor:publish --tag=filament-views

Copy the ActionGroup Blade File

Find the default ActionGroup Blade file at:

resources/views/vendor/filament/components/actions/action-group.blade.php

Copy this file to a new custom location, for example:

resources/views/components/filament/custom-action-group.blade.php

Modify the Layout

Edit your custom Blade file to split the actions into two rows. Here’s an example:

@php
    $actions = $group->getActions();
    $chunks = $actions->chunk(ceil($actions->count() / 2));
@endphp

<div class="space-y-2">
    @foreach ($chunks as $row)
        <div class="flex space-x-2">
            @foreach ($row as $action)
                {{ $action }}
            @endforeach
        </div>
    @endforeach
</div>

Use the Custom View in Your ActionGroup

When defining your ActionGroup in your Filament resource or page, specify the custom view:

use Filament\Tables\Actions\ActionGroup;

ActionGroup::make([
    // ... your actions here
])
->view('components.filament.custom-action-group')

Summary:
You need to create a custom Blade view for your ActionGroup and override the layout to split the actions into two rows. Then, point your ActionGroup to use this custom view.

Let me know if you need a full working example or further clarification!