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

Related Tricks:

Sticky Table Row Actions

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

Make Filament table Headers sticky using CSS

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.

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.

Globally Translate all Components

make all Field or any components translatable