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.

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•9mo ago

Style with css

Sdeev•9mo ago

try ActionGroup

nowakOP•9mo 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•9mo ago

Scope that to your resource

nowakOP•9mo 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•9mo ago

Inspect element on browser https://github.com/filamentphp/filament/blob/7cae787fc737d0af570e1bdae9b2c60596933dc3/packages/panels/resources/views/resources/pages/list-records.blade.php#L4 And also .fi-ta-actions

nowakOP•9mo 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•9mo ago

yes ideally that if you are lazy and hacky enough, can use render hook to inject <style></style> into that page

wyChoong•9mo ago

https://filamentphp.com/docs/3.x/support/render-hooks

Render hooks - Core Concepts - Filament

Solution

nowak•9mo 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

Gaming

Programming

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