a pagination component to manage huge records

[FabienArcellier]

I think a pagination control would be great to manage situation when repeater is growing. The pagination component allow to rebuild collection binded to a repeater or to change the content of a dataframe.

two way binded properties :

• page : set the active page
• total items : count of items to build pagination
• page size : set the current page size [optional]

properties :

• default page size
• page size options [optional]

events :

• change_page : trigger when a user set a page and change the page size

I think ui component as following are interesting

source: https://tailwindtemplates.io/templates?category=pagination

[FabienArcellier]

I have finished to plan the pagination component (FabienArcellier#14). I need it on 2 applications I develop with streamsync. I will start the development. I don't know yet if it's interesting to have it on the core or if I should develop it as custom components.

---

Pagination is a streamsync component that allows you to paginate a repeater or a dataframe.

It will allow filtering on the backend side using the page selected by the user. Filtering is manual. This mechanism preserves application performance by preventing the user's browser from slowing down or crashing because it tries to display too many records. This component also allows you to better control the bandwidth necessary to display the application.

component wireframe

pagination simple

pagination with full options

streamsync design

The component events :

• when the user clicks on a page, it triggers the change_page event.
• when the user selects the number of items, it triggers the change_page event.

The components property :

• page : the page the use will view
• page size : the number of record on the page
• total items : the total of items
• page size: options [optional] : the option the user can select as the number of page records to show
• page size: show all [optional] : the page size select box offers the option show all records
• jump to [optional] : go to the specific page
• url_parameter [optional] : set the page as url param (and load the page from it)

[FabienArcellier]

I have opened the PR #177 for this component. If you want to try it, I have uploaded an extension you can use on existing version of streamsync.
custom_pagination.zip