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:

Make components globally translatable

Translating components can often be a repetitive task, Fortunately, there's a neat trick to automate this process, making your components instantly translatable.

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.

Make Filament table Headers sticky using CSS

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.

Add tooltip to table header column macro

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

File