Detecting scroll end

[itishermann]

Hi everyone,
Can someone tell me how to detect the scroll end when the Datatable is scrollable ?
i tried adding an event listener to the body ref but it didn't work

[icflorescu]

Hey @itishermann,

It's not possible in the current version, but I think it wouldn't be too difficult for me to expose the underlying ScrollArea's onScrollPositionChange.

What exactly are you trying to achieve?

I'm trying to understand if this would be a potentially useful feature for other people.

Thanks!

[itishermann]

hi, i'm trying to achieve an inifinte scroll, at the company i'm working for, we use cursor based pagination so the included pagination doesn't really fits.

[icflorescu]

I see.
In this case simply exposing the ScrollArea's onScrollPositionChange wouldn't be enought.
I think it would be helpful if Mantine DataTable would expose an onScrollPositionChange event that gives you the current scroll position and the underlying ScrollArea's scrollHeight and scrollWidth, so you can establish whether you're nearing a "scroll end threshold" and trigger the data loading, am I right?...

[itishermann]

exactly, that would be perfect

[icflorescu]

Or better yet, to make life easier, the component could expose these granular events: onScrollToTop, onScrollToBottom, onScrollToLeft, onScrollToRight.
This way you could simply use onScrollToBottom to trigger loading more data.
What do you think?

[icflorescu]

Starting with v2.1.0 you can use the onScrollToBottom event 🎉
See this example: https://icflorescu.github.io/mantine-datatable/examples/infinite-scrolling