Sticky Table Row Actions - FilamentPHP Glow

Sticky Table Row Actions

By: Lara Zeus

Published: 10 Aug 2024 Updated: 10 Aug 2024

Tables Panels

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

simply create a new theme following the docs.

then add this CSS toy your theme:

 1.fi-ta-row {
 2    .fi-ta-cell:last-of-type {
 3        @apply relative right-0 top-0 bottom-0;
 4        > div {
 5            @apply bg-white dark:bg-gray-900;
 6        }
 7    }
 8    .fi-ta-cell:last-of-type {
 9        position: sticky;
10        > div {
11            @apply shadow-md rounded-full py-2;
12        }
13    }
14}

if you want it only stick on hover, replace .fi-ta-cell:last-of-type with &:hover .fi-ta-cell:last-of-type

this was originally shard by @awcodes.

Back to Tricks

Quick Filter Above the Tables

Add a Quick links to activate table filter on FilamentPHP table

Globally Translate all Components

make all Field or any components translatable

Sticky Table Row Actions

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

Demonstration of using a resource for multiple typical models

how to use a resource with multiple models