FilamentF
Filament•2y ago
nowak

How to stack table row actions, show as flex-direction column instead of flex-direction row

Is it possible to display a tables actions as being stacked instead of inline?

I have these table actions:
->actions([
    Tables\Actions\Action::make('Decline')
        ->requiresConfirmation()
        ->action(function (GroupOrder $record) {
            $declinedStatusId = OrderStatus::where('name', 'declined')->first()->id;
            $record->update(['status_id' => $declinedStatusId]);
        }),
    Tables\Actions\Action::make('Accept')
        ->requiresConfirmation()
        ->action(function (GroupOrder $record) {
            $acceptedStatusId = OrderStatus::where('name', 'accepted')->first()->id;
            $record->update(['status_id' => $acceptedStatusId]);
        }),
])


Which are displayed inline by default, but I want to show them stacked.
In my screenshot I have added flex-direction: column; to the first fi-ta-actions element in the first row, which is what I want, while the second row is untouched.
image.png
Solution
I ended up creating a custom theme by following the docs https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme
And adding this css to the theme.css:
.fi-resource-group-order-management .fi-ta-actions {
    @apply flex-col;
}
Themes - Panel Builder - Filament
Jump to solution
Was this page helpful?