List with pagination
Is there a simple way to create a paginated List?
As far as I know, currently, it is possible to have a List (but without pagination) or a Table (but without the option to show like Cards instead of rows with columns).
Thanks
17 Replies
You could do it by doing the pagination with buttons
And changing the list's list through this
Thank you @rubenf .
The challenge with this approach seems to be the consistency of design and logic across screens, and the repetition of tasks.
Especially if I want to use it on multiple screens, I would need to redo this component repeatedly, which would include multiple buttons, script integration, visual logic, etc.
Or am I missing something?
You're right but we do plan to add grouped components that you could copy and paste and that would keep their internal connection
we could also add pagination to list but i'm always afraid to add too much complexity
it would act as table and pass the page as input to the runnable
@Faton wdyt ?
Yes, passing the page as an input to the runnable would be the easiest way. I'll introduce a "Paginated" boolean config to the list component. When set to true, it'll pass the page prop to the runnable and will display the pagination buttons.
👍 let's make sure we align table and list
Issue created: https://github.com/windmill-labs/windmill/issues/2088
GitHub
Add "paginated" config to List component · Issue #2088 · windmill-l...
[MESSAGE_ID=1140977859498889287]
Yay! I loved knowing about the possibility of having this option in the list.
Tks.
Questions from a newbie:
- Does the table paginate data on the client side, after having all the data available?
- And the list, with this possible new proposal, would paginate on the server side, returning data from a script as pagination occurs?
Table can do either
Which is why we need to align both
we would just add an "off" compared to table pagination
I didn't quite understand the difference between "auto" and "manual" pagination in the table, unless I can specify the total number of pages.
1. How can I specify the number of items per page?
2. Does "manual" indicate server-side pagination and "auto" indicate client-side pagination?
3. How can I run a script for each pagination to read from the server side?
I searched the documentation but couldn't find anything about it. It's possible that I didn't know how to search for it.
(https://www.windmill.dev/docs/apps/app_configuration-settings/app_component_library#table)
Component Library | Windmill
The app components library is located on the right-hand side of the app editor. It displays the app components and allows you to configure them.
About the (1), it's related to "Manual" config.
I'm super excited about windmill. I discovered it a few days ago and I'm spending hours exploring things and trying to bring some "apps" to it.
However, I still have a lot to learn. That's why these newbie questions.
How can I specify the number of items per page? Does "manual" indicate server-side pagination and "auto" indicate client-side pagination? How can I run a script for each pagination to read from the server side?1. Page Size 2. exactly 3. that's what manual is for, the page is passed as an extra input to the runnable
Got it! I just tried it and it worked. 🙂 Great. Tks.
What I missed was feedback on the pagination buttons to indicate that it was loading, just like the submit button does, and maybe even inside the table.
I actually have some code that i was planning to send as a PR to the docs repo and app with a
Examples. Will try to get yo it today
Is this regarding pagination in table or list, @sindresvendby ?
@rubenf @Faton
I will follow the task of implementing pagination in the list, and I hope to use it when it is available. Thank you.
Docs on how to use Table with example.
It seems great. Tks.