Paging

Pagination allows you to navigate from one page to the next.

Code


                                                        
                                                        
                                                            <PyxisPaging
                                                            v-model="args.selectedPage"
                                                            :itemsTotal="200"
                                                            :dataTestid="pyxis-paging-date-testid"
                                                            :perPageCount="20"
                                                            :label="{previous: 'Previous', next: 'Next'}"
                                                            @update:modelValue="updateSelectedPage"
                                                            @update:perPageCount="updatePerPageCount"
                                                        />

Example of a Paging component

Props

The Paging component supports the following props:

Name	Type	Default	Required
v-model	number	1	true
itemsTotal	string	0	true
perPageCount	string	20	true
label	{ previous: string; next: string; }	undefined	true
dataTestid	string	undefined	true
perPage	{ perPageOptionsList: PyxisSelcet.Option[]; perPageMaxWidth: string; label: string }	{ perPageOptionsList: []; perPageMaxWidth: 6.4rem; label: “Per Page" }	false
showPageIndex	boolean	true	false

Events

The interactions on the Paging component are handled by the following Events

@update:modelValue : This event is emitted when a new page is selected.

@update:perPageCount : This event is triggered when when a new total of items per page is selected.