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:
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:Jump to 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;...
10 Replies
Style with css
try ActionGroup
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.
Scope that to your resource
@wyChoong That could be a solution, do you know if there is any documentation on how to add resource scoped css to filament?
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
@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.
yes ideally that
if you are lazy and hacky enough, can use render hook to inject
<style></style>
into that pageSolution
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: