Make Filament table Headers sticky using CSS

By: Prageeth Peiris

Published: 25 Oct 2024 Updated: 25 Oct 2024

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

how to use a resource with multiple models

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.

Add tooltip to table header column macro

Sticky Table Row Actions

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

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.