Filament•2mo ago

sticky table header

Hello, I've searched this question here and all the solutions did not work, they did do something but not what I expected. I would like to know if anyone has implemented or has a solution for a sticky header on the tables. When scrolling down I would like the table header to follow through. Anyone?

3 Replies

Mansoor Khan•2mo ago

Havent tried them but you may take a look and see what works for you. https://filamentglow.com/trick/sticky-actions-in-forms-183851df https://filamentphp.com/plugins/awcodes-sticky-header

FilamentPHP Glow

Bring the sticky actions back form filament v2

Filament

Sticky Header by Adam Weston - Filament

A Filament Panels plugin to make headers sticky when scrolling.

Hugo•2mo ago

Hello, Im actually also using awcodes's sticky header but that is not what im looking for. I've come quite close to achieving what I want with the following css

.fi-ta-table thead {
    position: sticky !important;
    top: 10.11rem;
    z-index: 50;
}
/* opacity does not looks good in dark mode, so insert the corresponding bg color here */
.fi-ta-table thead:is(:where(.dark) .dark\:bg-white\/5){
    background-color: rgb(36 36 39);
}

.fi-ta-content{
    overflow: unset!important;
}

.fi-ta-ctn{
    overflow: unset!important;
}
.fi-layout {
    overflow: unset!important;
}

.fi-ta-table thead {
    position: sticky !important;
    top: 10.11rem;
    z-index: 50;
}
/* opacity does not looks good in dark mode, so insert the corresponding bg color here */
.fi-ta-table thead:is(:where(.dark) .dark\:bg-white\/5){
    background-color: rgb(36 36 39);
}

.fi-ta-content{
    overflow: unset!important;
}

.fi-ta-ctn{
    overflow: unset!important;
}
.fi-layout {
    overflow: unset!important;
}

The problem im facing now with unsetting the overflow from the .fi-layout is that the extra columns are showing outside the table. With the default .fi-layout, horizontal scroll is not possible. what im missing at the moment is the horizontal scroll on the table with the sticky header as it is with that css i've provided. Im not specialist in CSS, so if anyone has a good suggestion to how I can achieve that behavior i'd be glad. Thank you.

Mansoor Khan•2mo ago

Ah just re-read and turns out you need sticky table header not the header actions. My bad.

Gaming

Programming

sticky table header