search

DataTables / FixedHeader

Fix the header, footer, left or right columns of a table in place, to always show them when scrolling
http://www.datatables.net/
Other
75 stars 83 forks source link

Sticky header/footer for non-body scroll elements. #96

Open Danielku15 opened 7 years ago

Danielku15 commented 7 years ago

This PR implements the feature requested in #80. When the corresponding new "relative mode" is enabled via setting the header is positioned within the next parent scrollable element.

DataTables commented 7 years ago

Awesome - thanks for this! Any chance of adding an example for it? Also to confirm, this is one level of relative scrolling? It wouldn't work nested inside two or more scrolling containers. I think that's a fairly unlikely use case, in fairness, but I just want to confirm that wasn't a goal here.

One other thing, are you happy for this to be included under the MIT license?

Danielku15 commented 7 years ago

I would have to check how it behaves if you have nested scroll elements. It listens globally for all scroll events on all elements (capture event). The position calculation works then relatively to the parent. It could work since I also check if the scroll parent is visible and positioning is happening absolute. But there might be cases where this does not work out. I'll try to prepare a small sample in JSFiddle.

Danielku15 commented 7 years ago

Sample 1: Simple usage (Header Only) https://jsfiddle.net/ndd45j47/1/

Sample 2: Footer and Header https://jsfiddle.net/f2wtd6tn/1/

I also tried the nested behavior but it might not be fully as expected for some use cases. The header sticks to the top of the inner scroll window, it does not take any outer scroll into account. It's not directly wrong and would definitly need a setting to switch between the behaviors: https://jsfiddle.net/f2wtd6tn/2/

I also needed to make some fixes, I was accidentally using a jQuery UI specific function that was available in our application. I pulled a copy of the function with slight adjustments.

PS: Yes, I feel fine with including this under MIT in this library.

jdano1092 commented 6 years ago

When do you think this will become available? If not already. The examples look great.

CarlChilton commented 5 years ago

Hi all, was this published? I'm experiencing the same issues and the examples look perfect for my purposes. Best wishes.

DataTables commented 5 years ago

Not yet. Still on my (extensive) backlog I'm afraid.

viicslen commented 4 years ago

Hello, any news on this commit?

CarlChilton commented 4 years ago

I found a workaround, which is to disable data tables fixed header and use CSS to set the elements to position sticky with a top of 0. Works perfectly.

alveri commented 3 years ago

Hi. Any news on it?

DataTables commented 3 years ago

No sorry. This issue will be updated when I've been able to make time to dig into this.