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 install --save vue-lpageExamples
<!-- This will render [ "a", "b" ] -->
<template>
<vue-lpage :data="['a', 'b', 'c']" :page="1" :results-per-page="2">
<div slot-scope="{subset}">
{{ subset }}
</div>
</vue-lpage>
</template>
<script>
import VueLpage from 'vue-lpage';
export default {
components: {
VueLpage
}
};
</script><template>
<vue-lpage :data="data" :page="page" :results-per-page="resultsPerPage">
<div slot-scope="{subset, totalPages, isFirstPage, isLastPage}">
<div>
Page <input type="number" v-model="page" :min="1" :max="totalPages"> out of {{ totalPages }}
</div>
<div>
Show <input type="number" v-model="resultsPerPage" :min="1" :max="data.length"> results per page
</div>
<button :disabled="isFirstPage" @click="page--">
Previous
</button>
<button :disabled="isLastPage" @click="page++">
Next
</button>
<ul><li v-for="quote in subset" :key="quote">{{ quote }}</li></ul>
</div>
</vue-lpage>
</template>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.
Powered by
- Babel
- Webpack 4
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent