F
Filament•10mo 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]);
        }),
])
->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.
No description
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: ```css .fi-resource-group-order-management .fi-ta-actions { @apply flex-col;...
Themes - Panel Builder - Filament
Jump to solution
10 Replies
wyChoong
wyChoong•10mo ago
Style with css
Sdeev
Sdeev•10mo ago
try ActionGroup
nowak
nowakOP•10mo ago
How would you do this? Can I add CSS directly to the ->actions() method? This groups the actions inside a dropdown, this is not what I want. @wyChoong my concern is that I don't want to add global styling for my entire filament panel, some actions would be okay to keep inline.
wyChoong
wyChoong•10mo ago
Scope that to your resource
nowak
nowakOP•10mo ago
@wyChoong That could be a solution, do you know if there is any documentation on how to add resource scoped css to filament?
wyChoong
wyChoong•10mo ago
nowak
nowakOP•10mo ago
@wyChoong I feel like this makes me more confused 😄 Do I need to build a theme to add this css? I am assuming that I need to add this: " .fi-resource-group-order-management .fi-ta-actions { flex-direction: column; } " to a .css file that is registered by my filament panel.
wyChoong
wyChoong•10mo ago
yes ideally that if you are lazy and hacky enough, can use render hook to inject <style></style> into that page
wyChoong
wyChoong•10mo ago
Solution
nowak
nowak•10mo ago
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;
}
.fi-resource-group-order-management .fi-ta-actions {
    @apply flex-col;
}
Themes - Panel Builder - Filament

Did you find this page helpful?