GitHub - byteboomers/vue-lpage: Low-level Vue pagination component (original) (raw)
vue-lpage
Low-level Vue pagination component
About
This is a low-level, ui-agnostic pagination component.
You pass it an array of data, the current page index and the desired amount of results per page.
It then exposes a scoped slot through which you can access the following:
- subset: the subset of data corresponding to the current page.
- totalPages: the total amount of pages.
- isFirstPage: whether the current page is the first one.
- isLastPage: whether the current page is the last one.
Recommended usage: wrap this in a high-level styled component.
Installation
NPM
npm install --save vue-lpage
CDN
Examples
{{ subset }}
Page
out of
{{ totalPages }}
Show
results per page
Previous
Next
- {{ quote }}
Notes
Pagination is one-based (page 1 is the first page).
Props
- data: the array of data to paginate.
- page: the page to display.
- results-per-page: the maximum amount of results to display per page.
Slot scope
- subset: the subset of data corresponding to the current page.
- totalPages: the total amount of pages.
- isFirstPage: whether the current page is the first one.
- isLastPage: whether the current page is the last one.