F
Filamentβ€’8mo 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;...
Jump to solution
10 Replies
wyChoong
wyChoongβ€’8mo ago
Style with css
Sdeev
Sdeevβ€’8mo ago
try ActionGroup
nowak
nowakOPβ€’8mo 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β€’8mo ago
Scope that to your resource
nowak
nowakOPβ€’8mo ago
@wyChoong That could be a solution, do you know if there is any documentation on how to add resource scoped css to filament?
nowak
nowakOPβ€’8mo 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β€’8mo ago
yes ideally that if you are lazy and hacky enough, can use render hook to inject <style></style> into that page
Solution
nowak
nowakβ€’8mo 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;
}
Want results from more Discord servers?
Add your server