Filament•3mo ago

Sticky Action Column

Is there any solution about this I need to do something like this pic because I have to much columns and I need to be shown always the actions

Solution:

```css .fi-ta-header-cell:last-of-type { @apply relative right-0 top-0 bottom-0 bg-red-500; } ...

Jump to solution

12 Replies

Vp•3mo ago

https://filamentglow.com/trick/sticky-table-row-actions-4e3dba83

FilamentPHP Glow

how to make actions sticky in tables when you have a lot of columns

abdullafahemOP•3mo ago

It works but, is there any other solution not just the buttons but all column to be sticky?

Vp•3mo ago

not sure.. maybe inspect classes and apply same

Adnan Yalahow•3mo ago

will you mind share with us please i would love to do it too

abdullafahemOP•3mo ago

The problem the column of actions does not have any classes For me the only solution is that the actions column should have the head like other columns after that you can do it with this trick

Vp•3mo ago

So you want to keep actionsColumnLabel() as well right? then what about like thead tr th.fi-ta-header-cell:last-of-type {} not test, not sure as well

abdullafahemOP•3mo ago

Let me try Not working

Solution

Vp•3mo ago

.fi-ta-header-cell:last-of-type {
    @apply relative right-0 top-0 bottom-0 bg-red-500;
}

.fi-ta-header-cell:last-of-type {
    position: sticky;
}

.fi-ta-header-cell:last-of-type {
    @apply relative right-0 top-0 bottom-0 bg-red-500;
}

.fi-ta-header-cell:last-of-type {
    position: sticky;
}

Vp•3mo ago

You can also do like this:

thead>tr {
    .fi-ta-header-cell:last-of-type {}

    .fi-ta-header-cell:last-of-type {}
}

thead>tr {
    .fi-ta-header-cell:last-of-type {}

    .fi-ta-header-cell:last-of-type {}
}

abdullafahemOP•3mo ago

How to add that Action label inside the table?

Vp•3mo ago

$table->actionsColumnLabel('Action')

abdullafahemOP•3mo ago

Thanks I didn't know it

Gaming

Programming

Sticky Action Column