How do you use the phoenix infinitescroll hook with tables?

Phoenix Forum Questions / Help
, ,
1

Hi everyone,

I’m trying to implement infinite scroll in both directions (up and down) using the phx-viewport-top and phx-viewport-bottom events from the default Phoenix.InfiniteScroll hook.

It works great when using a basic div layout or ul list.
However, when I try to apply the same behavior inside a table layout (using either actual <table> elements or display: table/display: grid with divs), it breaks or behaves inconsistently:

  • The scroll events don’t fire reliably.
  • Sometimes the scroll container doesn’t fill the expected space.
  • Sticky headers work, but scrolling seems unpredictable.

I’ve also tried wrapping the table in scrollable containers, adjusting min-height, overflow, etc., but with no luck so far.

Is this a known limitation with how phx-viewport-* interacts with table or grid layouts?
Do I need to customize the hook for these layouts, or is there a clean workaround?

Thanks a lot for your help! :blush:

2

I don’t know whether it’s applicable to your situation, but I just added a guide about infinite scroll to the Flop Phoenix documentation: Load More and Infinite Scroll — Flop Phoenix v0.25.1. Might be helpful even if you don’t use the library. Note that the example is using the observer API instead of phx-viewport-*, based on a code snippet posted by @Thr3x: Infinite scroll pagination · Issue #192 · woylie/flop_phoenix · GitHub.

3 Likes
3

I can’t speak to the specifics of your problem and I’ve never actually tried building an infinite scroll table. With that said, keep in mind that tables can be weird in that they change their layout based on their rows, so if you have rows come in with different sizes it could reflow the whole table in a way that changes the scroll position and makes things feel buggy. That could be what’s happening.

2 Likes
4

Thanks for the advice!

I managed to solve it (although it’s still a bit buggy at times) using the Intersection Observer API combined with parts of the original Phoenix hook.

I’ve shared the hook as a GitHub Gist in case anyone else finds it useful.
If you have any suggestions for improvements, I’d love to hear them!

1 Like