Data Grid with infinite scroll

Hi,

Is there a way to create an infinite scroll with a DataGrid? I am trying to display a dictionary of unknown length, and would much prefer a scroll to clicking pages.

Tx!!

Data Grids are designed around paging, so I don’t know what would be involved in making the paging behavior go away.

But Repeating Panels (what data grids use internally) are not designed around paging, and if you do some searching in the forum, there are a couple proof of concepts posted for infinite scrolling on them.

1 Like

I haven’t tried, but perhaps setting the page size to zero and using this will work: Auto Scroll - Automatically add content as the user scrolls the mouse wheel

The tabulator dependency supports scrolling over pagination which may be worth a look at


    self.tabulator.options = {
        "height": 400,
        "pagination": False,
    }
1 Like

Thanks a lot stu - but could you help me a bit with that? I’m not really sure what I’m looking at on this Avil copy link you provided (when I try to run it, it times out)

The Tabulator dependency is available as a Third Party Depedency with this code: TGQCF3WT6FVL2EM2

You would typically add dependency,
add the Tabulator component in the designer
Then in code define the column structure, set the data, and any other options.

Some more info here: https://github.com/s-cork/Tabulator

For other specific questions on tabulator feel free to add a discussion topic:

Discussions · s-cork/Tabulator · GitHub

Sorry, is there a walk through on how to do this? My chrome is prompting me to “install it” when I ran your example?

ah yes - I should have linked this post my bad:

and this is the link in the docs about adding dependencies:

In the New IDE go to Settings > Dependencies
Then click Third Party, paste in the code TGQCF3WT6FVL2EM2 and hit enter.

It’ll end up looking something like this:

Great, thanks! Is there a library etc of other third-party things / other stuff I can drop into my app that I can check out?

Here’s a curated list:

1 Like

This Tabulator worked great, thanks again

1 Like

On the Tabulator, don’t suppose you know a way to select the last row? Its time series data, and I would like it to automatically be scrolled all the way to the bottom.

Not off the top of my head. I would normally go to tabulator.info. Lookup what I needed in the JavaScript documentation and then use the same approach in anvil.

If you get stuck feel free to move this conversation over to the GitHub I linked above for specific questions/advice on working with the anvil tabulator dependency.

2 Likes