Sticky Table Column Headers

How can I make the column names header sticky? (after i scrolled down below it, i want it to stick at the top)

4 Replies

https://filamentglow.com/trick/make-filament-table-headers-sticky-using-css-a1a20a06 ?

FilamentPHP Glow

ruskiOP•2mo ago

doesn't work

@import '/vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

div.fi-ta-content {
    @apply h-screen;
}

table.fi-ta-table th {
    @apply sticky top-0 text-gray-700 bg-gray-100 bg-gray-800 dark: dark:text-gray-200 dark:border-gray-700;
}

@import '/vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

div.fi-ta-content {
    @apply h-screen;
}

table.fi-ta-table th {
    @apply sticky top-0 text-gray-700 bg-gray-100 bg-gray-800 dark: dark:text-gray-200 dark:border-gray-700;
}

Matthew•2mo ago

you need to run npm run build to recompile the css classes

ruskiOP•2mo ago

gotchu, the only issue is this doesn't make the header sticky, it just makes the table's content scrollable.

Gaming

Programming

Sticky Table Column Headers

Did you find this page helpful?