Sticky Headers + horizontal scrolling in wrapper

[bencf]

I am looking to be able to use the sticky headers widget in a way that I can't find documented anywhere but I think is a fairly common use case: the headers are sticky in vertical scrolling of the window, but also scroll horizontally with the table based on a table wrapper.

This is useful for sticky headers on mobile. The wrapper allows for horizontal scrolling of a table when the viewport is not wide enough without having to horizontally scroll the entire page. But the table itself should still be fully visible vertically - the wrapper shouldn't cut that off.

This works fine, except that as you scroll the wrapper horizontally the sticky header doesn't scroll with it.

Here's an example: https://jsfiddle.net/nnxsvwn2/6/

Any thoughts on how to achieve this? Or if there's another way to accomplish what I'm looking to do?

Thanks in advance for any and all help, and let me know if there's anything I can clarify.

[Mottie]

Hi @bencf!

It does appear that the horizontal scrolling isn't being properly updated. I've made a few changes that will fix the demo you shared in the master branch. I plan to provide a new release some time this week.

[Mottie]

Fixed demo

$("table").tablesorter({
  theme: "blue",
  widgets: ["stickyHeaders"],
  widgetOptions: {
    stickyHeaders_xScroll: ".wrapper"
  }
});

[Mottie]

It was originally set up to only make the stickyHeaders scroll horizontally when you set the attachTo option to the wrapper (demo):

CSS (requires a position relative setting)

.wrapper {
  position: relative;
  height: 150px;
  overflow-y: auto;
}

Script

$("table").tablesorter({
  theme: "blue",
  widgets: ["stickyHeaders"],
  widgetOptions: {
    stickyHeaders_attachTo: ".wrapper"
  }
});

[bencf]

Fantastic, thank you so much for the quick fix. That first fixed demo you showed looks like it's exactly what I was looking for.

I had tried the attachTo feature, but this didn't let the headers stick when scrolling the document itself, just the wrapper. And I had tried the xScroll feature but it didn't seem to be doing anything. If I'm understanding correctly, this means that there was an issue in the code that you fixed and this should now work when you push the new release?

Thanks again,
Ben

[Mottie]

this means that there was an issue in the code that you fixed and this should now work when you push the new release?

Yep, big ol' ugly bug.

[Mottie]

Oh, and I should also add a note that because the header isn't attached inside the wrapper, any overflow won't be hidden - demo.

[bencf]

Right, so I figured that was the least bad of all the possibilities, and I'll just have to deal with that even if it's not ideal.

Any thoughts on a way to solve this, or is it too complicated? (I'd imagine there's a way to do it by determining the width of the sticky header based on the wrapper width or even the initial header width, similar to how I imagine the left position of the sticky header is determined. But I haven't jumped into the codebase so just throwing a question out there.)

[Mottie]

I don't know of any way to solve this right now... I made a stab at it, but it's not working

https://jsfiddle.net/nnxsvwn2/11/

Maybe I'll look again tomorrow with fresh eyes.

[bencf]

How does the code calculate where the left position of the sticky header should be? Say it's on a table that has 300px of padding-left in its containing div so that the header starts in the middle of the page. The sticky header figures that out, right? At the same time, could it not also measure the width of the table and set the sticky header's width to that number?

Again, I have not looked at the code itself so I could be way off base, just suggesting a potential approach if it's helpful.

Thanks again for all of this!

[Mottie]

If you attach the header, it only looks at the left padding. All other times, it checks the table offset (jQuery version), table margin-left and window scrollLeft (ref).

You can't set the sticky header's width because it will adjust the width of each internal column and completely mess up alignment. The only thing to do is to wrap it and use overflow hidden, but I'm not sure it'll work in this case.

I've got a full load of work today, so I may not be able to mess around with that demo until later... way later.