FixedHeader responds to page scroll. How about to container scroll?

hanksterr7

Hi. I've been using dataTables for several years with great results. Thanks
I have a question about the fixedHeader option, and I searched the forum and am surprised to not find a discussion of this topic.
I recently created a new page that has several dataTables on it.
I want to put each table in its own div (with the div having style:overflow:auto, and having its position and size set by css)
I want to be able to vertically scroll each div, if the table contained in it vertically overflows the div. I can make that work easily enough, but if I enable fixedHeader on those tables, the header doesn't stay put within the div.
FixedHeader works fine if I scroll the page, but not if I scroll a div on the page that contains the table.
Is it possible to set the target container that fixedHeader should monitor for changes to scroll position? Or does it only know to listen for page scrolls?
I tried using scrollY instead of fixedHeader, that had issues with the colResize and colReorder options I also want to use.
I don't think this is a version issue, but I am using datatable v1.10.18 and fixedHeader v3.1.4. Happy to update these if likely to be helpful. Thanks

kthorngren

FixedHeader works fine if I scroll the page, but not if I scroll a div on the page that contains the table.

@allan will need to comment on this.

FixedHeader 3.2.0 added support for scrolling tables, ie, scrollY. I wonder if the Vertical scroll fitting solution will work for you. According to the Compatibility matrix scrolling is compatible with ColReorder. Not sure how this will affect calResize as that is a third party library which I believe incorporates an old version of ColReorder.

Kevin

hanksterr7

Ok, I created a new download, that contains these files in a singe datatables.js file:
jQuery 3 3.7.0,
DataTables 1.13.5,
ColReorder 1.7.0,
FixedHeader 3.4.0,
Responsive 2.5.0,
SearchBuilder 1.5.0,
SearchPanes 2.2.0,
Select 1.7.0

With this, if I put my html table in a div, with style="overflow:auto;" and activate DataTables() on the table, with these options:
colReorder: true,
scrollY: '40vh',
colResize: {
resizeTable: true
}

I get a table that nicely scrolls within my div region, and the fixedHeader row stays visible, and I can re-order columns by drag/drop in the header row

But colResize is not working. I think it is not part of the normal distribution, but is instead a 3rd party extension (
https://datatables.net/forums/discussion/70305
)

I'll see if I can get that working as well. I had it working in my older dt implementation (I was using smasala version of colResize)

Thanks

hanksterr7

Ok, after much trial and error, I now have a configuration that works!

It uses the colResize extension created by smasala
https://github.com/smasala/ColResize

This works with the latest version of dataTables (1.13.5) and with jquery 3.7.0

My configuration allows a table to live inside an overflow:auto div, and keeps the header row visible during table or page scrolling, and supports colReorder and colResize

To get this to work, use scrollY inside the colResize options (and not the dataTables scrollY). Don't enable dataTable's fixedHeader tool (doesn't do anything bad if you do)

Having the container do overflow:auto really is not necessary anymore (for my needs) as colResize, with its scrollY enabled, takes care of all scrolling needs.

That's pretty much it

The only issue happens if the overall page is not scrolled to the top. In this case, colResize doesn't do anything. Not sure why it has an issue with this.

If anyone can validate this works for them, that would be great

Thanks