Filament•6mo ago

Table Actions Fixed Width

Is there any chance for table action like edit/delete to be fixed width if we have more than column the action should be fixed not need to go in the end of the table to click the actions?

32 Replies

LeandroFerreira•6mo ago

too long contents?

abdullafahemOP•6mo ago

Yea exactly I have to many columns that need to be in the table

LeandroFerreira•6mo ago

Wouldn't using ->wrap() in the columns be enough to fix the issue?

toeknee•6mo ago

No, he wants fixed delete/actions for when there are tons of columns so the actionable part is always there. There was a PR/Work on this going on somewhere

Vp•6mo ago

Maybe not exactly what you expect, but you can display in the first column then no need to scroll https://filamentphp.com/docs/3.x/tables/actions#positioning-row-actions-before-columns

Actions - Table Builder - Filament

LeandroFerreira•6mo ago

@toeknee, like this? 1- create a custom theme: https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme 2 - add

.fi-ta td:last-child {
    @apply sticky right-0 bg-white dark:bg-gray-900
}

.fi-ta td:last-child {
    @apply sticky right-0 bg-white dark:bg-gray-900
}

Themes - Panel Builder - Filament

toeknee•6mo ago

Yep, I'd probably condition the table thought with an extra class .sticky-last-column. But seems to be the one I'd say.

abdullafahemOP•6mo ago

I saw it but not excatly what I want Is there another way not to create a custom theme

LeandroFerreira•6mo ago

I don't know...

abdullafahemOP•6mo ago

Thanks

dissto•6mo ago

Why not just put the actions at the front? 🤔

$table
  ->actionsPosition(ActionsPosition::BeforeColumns) // or ActionsPosition::BeforeCells

$table
  ->actionsPosition(ActionsPosition::BeforeColumns) // or ActionsPosition::BeforeCells

abdullafahemOP•6mo ago

The design is not tha well in the front if we look in the UX side

dissto•6mo ago

I see. Well you could put those actions inside a group and only show an icon (assuming you have multiple actions) 😋 But i agree actions in the front seem unconventional...was just suggestion it to show other options ✌️

abdullafahemOP•6mo ago

No problem thanks for your contribution I really appreciate it

EMMAN•4mo ago

sir @LeandroFerreira problem on .fi-ta td:last-child { @apply sticky right-0 bg-white dark:bg-gray-900 } see the attachment

EMMAN•4mo ago

.fi-ta td:last-child { @apply sticky right-0 bg-white dark:bg-gray-900 z-10; } i add z-index, and result is create another problem

Lara Zeus•4mo ago

try this

.fi-ta-row {
    .fi-ta-cell:last-of-type {
        @apply relative right-0 top-0 bottom-0;
        > div {
            @apply bg-white dark:bg-gray-900;
        }
    }
    .fi-ta-cell:last-of-type {
        position: sticky;
        > div {
            @apply shadow-md rounded-full py-2;
        }
    }
}

.fi-ta-row {
    .fi-ta-cell:last-of-type {
        @apply relative right-0 top-0 bottom-0;
        > div {
            @apply bg-white dark:bg-gray-900;
        }
    }
    .fi-ta-cell:last-of-type {
        position: sticky;
        > div {
            @apply shadow-md rounded-full py-2;
        }
    }
}

Lara Zeus•4mo ago

it is based on adams code https://discord.com/channels/883083792112300104/883084832387760148/1176631687782858782

awcodes•4mo ago

Feel free to add to glow. 😄 I wasn’t about to go back through the showcase to find it. 😆

Lara Zeus•4mo ago

LITERALLY just finished scheduling it 😂

Lara Zeus•4mo ago

also I always copy it like this, with the url, so I wont losing it I guess glow is a good idea 😉

awcodes•4mo ago

Nice. And thank you for the attribution.

Lara Zeus•4mo ago

always 😊

EMMAN•4mo ago

thank you sir @Lara Zeus and sir @awcodes it works good on without ActionsGroup, but with ActionsGroup, it looks like this: (please see the attachment)

awcodes•4mo ago

Yea. I think it could be figured out. Never needed groups in what I was doing. It’s just a matter of getting the css selectors right.

EMMAN•4mo ago

oh okay. can you help sir to figure out that problem? thank you so much.

awcodes•4mo ago

At the moment, no, sorry. I’m on my phone.

EMMAN•4mo ago

oh okay sir. that's fine. maybe later. thank you

awcodes•4mo ago

Just go through the html in dev tools and try some things to see if you can get it to work the way you need it. That’s all I did. Once you figure it out in devtools then you can apply it in your css. And I get that css is difficult but once you get a grasp on selectors it gets easier.

EMMAN•4mo ago

I'll try sir. thank you hi sir @awcodes . sorry but, still can't figure it out.

Lara Zeus•4mo ago

play around with the z-index for the button or the menu

EMMAN•4mo ago

hmm let's see

Gaming

Programming

Table Actions Fixed Width