Paginate ListView?

App Building
1

I would like to limit the number of items displayed at one time (using collapsibleContainers inside the listView), to try to improve loading time. As currently listView doesn't have a built in option to paginate, does anyone have any ideas how to do this?

Currently I will have around 35 items in one listView and would like to paginate at 10 items. In the future this might be 70-100 items in total.

Thanks,
Jon.

2

What is your data source?

If you use (pretty much any) SQL backend, you can build a pagination with LIMIT and OFFSET:
SQL LIMIT & OFFSET (sqltutorial.org)

3

Thanks nmz,
That's a nice idea. I will experiment with a segmentedControl above the listView.
Using SQL query the total number of records and add an appropriate number of options to that segmentedControl, and then in turn pass the value selected back to another query to control what's displayed.
Should work.

4

I never manually implemented pagination in retool. So, I hope someone can chime in here!

Pagination UI elements are available in retool:
Pagination | Retool Component Library

My first guess would be to use the pagination UI by specifying the total number of pages like this (in postgres):

SELECT CEIL(COUNT(id)::float / 5) FROM animals; -- 5 is the desired page size, CEIL rounds up to full pages

Then use hash urlparams to tell the app about the currently selected page. E.g.

SELECT * FROM animals
LIMIT 5 OFFSET {{ (urlparams.hash.page - 1) * 5}}

while 5 is again the page size.

LIMIT 5 OFFSET (1 - 1) * 5; -- will be the first page
LIMIT 5 OFFSET (2 - 1) * 5; -- will be the second page
LIMIT 5 OFFSET (3 - 1) * 5: -- will be the third page, and so on

I hope I'm on the right track. Otherwise, feel free to correct me!

1 Like
5

Thanks again nmz

You've given me lots to think about. I definitely need to do some testing. Can't believe I didn't see there is a pagination component.

I believe the hash urlparams would be (for the first pagination component) - {{pagination1.value}}.

Then it should be a simple mathematical variable, using the logic you kindly shared. :slight_smile:

6

Here's a sample app with List View pagination! It currently references my data, but just replace the resource with your own resource and the table name with your own table name and it should work :slight_smile:

You can import this JSON file by clicking Create new (home page) > From JSON. Quick docs on exporting/importing apps here.


ssp.json

And here are our docs on pagination + list views:

1 Like
7

Thank you @victoria that's really helpful. I imported your app, and adjusted to my data source, and it worked really nicely.

I will implement this in the app I was building. Sorry for my delay in replying.

Thanks, :blush:
Jon.

1 Like
8

My pleasure, Jon. So glad to hear it was helpful!

No apologies needed at all. Hope your app building goes well and reach out anytime we can help :slight_smile:

2 Likes
9

@victoria Thank you for sharing this solution - it worked great and immensely improved my app's performance!

1 Like
10

Wow, that's awesome! So glad to hear it + thank you for sharing :hugs: