FilamentPHP Glow Filament Glow
beta
  • All Tricks
  • About
login
logo dark logo light

Make Filament table Headers sticky using CSS

Image Description
By: Prageeth Peiris
  • Published: 25 Oct 2024 Updated: 25 Oct 2024
Tables

Make Filament table Headers sticky using CSS

Add this css to your theme.css file

1div.fi-ta-content{
2 @apply h-screen;
3}
4
5
6table.fi-ta-table th{
7 @apply sticky top-0 bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-700;
8}

Back to Tricks
logo dark logo light

Related Tricks:

Quick Filter Above the Tables

Add a Quick links to activate table filter on FilamentPHP table

Demonstration of using a resource for multiple typical models

how to use a resource with multiple models

Add tooltip to table header column macro

Reuse action in both Table and Header

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

Implementing Row-Level Security in Filament Tables with applyRowAccessPolicy

Learn how to implement row-level security in Filament tables using the applyRowAccessPolicy macro that filters query results based on user permissions through Laravel's policy system.

Tweet
X GitHub RSS Feed
built with ❤️ using
filamentPHP
© 2025 Lara Zeus. All rights reserved.
Terms and Conditions Contact Us

Syntax highlighting by Torchlight .

FilamentPHP Glow Filament Glow
beta
    • All Tricks
    • About

Media Picker

  • No Files in the library or nothing found for your search.

Add Files