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

Related Tricks:

Reuse action in both Table and Header

how to use an action as a headerAction or as a table row action without code duplication

Globally Translate all Components

make all Field or any components translatable

Trigger an action when updating a column's state

Using an editable column like SelectColumn or ToggleColumn, you can conditionally trigger a modal form when a certain option is selected.

Demonstration of using a resource for multiple typical models

how to use a resource with multiple models

Quick Filter Above the Tables

Add a Quick links to activate table filter on FilamentPHP table