Filament•2mo 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•2mo 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

abdullafahem•2mo ago

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

Vp•2mo ago

not sure.. maybe inspect classes and apply same

Adnan Yalahow•2mo ago

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

abdullafahem•2mo 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•2mo 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

abdullafahem•2mo ago

Let me try Not working

Solution

Vp•2mo 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•2mo 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 {}
}

abdullafahem•2mo ago

How to add that Action label inside the table?

Vp•2mo ago

$table->actionsColumnLabel('Action')

abdullafahem•2mo ago

Thanks I didn't know it

Gaming

Programming

Sticky Action Column