Sticky Header In DataTable Disable Filters

[ar1376]

Hi
I'm Using Primefaces 11 and 12

I'm Using

Code: Select all

stickyHeader="true"

tag in my

Code: Select all

<p:dataTable

and It work fine till I add a custom CSS :

Code: Select all

@media (min-width: 768px) {
    .ui-datatable table {
        width: 100% !important;
    }
}

@media (max-width: 769px) {
    .ui-datatable table {
        width: auto !important;
    }

    body .ui-datatable.ui-datatable-sticky > table > thead, body .ui-datatable.ui-datatable-sticky > table > tfoot {
        display: none;
    }
}

because in mobile users can't see columns and I should change width value that it make table scrollable
and I have to make sticky header's display as none because it won't scroll
and now the real table header's filters field (input text or selectOneMenu ...) are set as disabled
so I can't use filter

[Melloware]

I think your issue is this: https://github.com/primefaces/primefaces/issues/3847

[ar1376]

I think your issue is this: https://github.com/primefaces/primefaces/issues/3847

I didn't find any solution.
it seems that I need to customize primefaces code that don't disable the fields
well I don't know how yet
btw I'm using Diamond and Harmony template

UPDATE :
in datatable.js :
there is a function named as "setupStickyHeader" that in last line doing this :

this.clone.find('.ui-column-filter').prop('disabled', true);

and I have no idea how to customize this

[Melloware]

That is done on purpose to the "sticky" header so as its stuck on the screen it can't be filtered. This is done on purpose only on the Sticky version of the header while you are scrolling right?

[ar1376]

That is done on purpose to the "sticky" header so as its stuck on the screen it can't be filtered. This is done on purpose only on the Sticky version of the header while you are scrolling right?

There are Two headers when I Use Sticky Header , first one is the real header and the second one is the Sticky Header that Scroll down with it that it's on the first one, so you can't see the first one
but if I set the Sticky Header "display:none" then you can see the first header
but the problem is the filters are disabled !
I want my users be able to filter the column with first header too!
I put the code of primefaces on my last post that disable the fields

how can I customize "datatable.js" to solve the problem ?

[Melloware]

You will have to analyze the datatable.js code and hack around.

[nehakakar]

You can try the following Steps...
Instead of using the media query to set display: none for the sticky header on smaller screens,
You can try adjusting the position and z-index properties to ensure the sticky header still functions properly while being hidden visually.
Exa:

Code: Select all

@media (max-width: 769px) {
    .ui-datatable.ui-datatable-sticky > table > thead, .ui-datatable.ui-datatable-sticky > table > tfoot {
        position: absolute;
        top: -9999px;
        z-index: -1;
    }
}

If this not work try using this method.
You could modify the sticky header's visibility instead of using display: none. This might allow the filters to remain active.
Ex:

Code: Select all

@media (max-width: 769px) {
    .ui-datatable.ui-datatable-sticky > table > thead, .ui-datatable.ui-datatable-sticky > table > tfoot {
        visibility: hidden;
    }
}

If necessary, you can conditionally apply your custom styles based on the presence of the .ui-datatable-sticky class.
his way, you can control the styling only when sticky headers are active.
Ex:

Code: Select all

.ui-datatable-sticky {
    /* Sticky header styles */
}

.ui-datatable-sticky > table > thead {
    /* Sticky header visibility adjustments */
}

note: Always thoroughly test your changes across different screen sizes and ensure that the desired functionality,

[Clarar]

That is done on purpose to the "sticky" header so as its stuck on the screen it can't be filtered. This is done on purpose only on the Sticky version of the header while you are scrolling right?

Hi friend
Absolutely, intentional design! The "sticky" header stays fixed, preventing unintended filtering while scrolling.Free Fire name style

[Clarar]

Hello guys

Struggling with disabling filters in a DataTable's sticky header? Feel free to ask for guidance.