You can use use this pagination with both option and composition api.
Install with yarn
yarn add sarathe-library
Install with npm
npm i sarathe-library
- Import pagination library and css to your component
<script setup>
import {Pagination} from 'sarathe-library';
import 'sarathe-library/dist/sarathe-lib.css'
</script>
- Add pagination component to template
<Pagination :items="myArr" @display="getComputedResult"/>
Pagination component accepts array or array of objects as prop and Pagination component emit and event called display.
Full Example
<template>
<div>
<table>
<tbody>
<tr v-for="displayArr in displayArray">
{{displayArr}}
</tr>
</tbody>
</table>
<Pagination :items="myArr" @display="getComputedResult"/>
</div>
</template>
<script setup>
import { ref,onMounted } from 'vue'
import {Pagination} from 'sarathe-library';
import 'sarathe-library/dist/sarathe-lib.css'
const myArr = ref([]);
let displayArray = ref([])
function getComputedResult(e) {
displayArray.value = e
}
onMounted(() => {
for(let i =1 ; i<= 290; i++){
myArr.value.push('page- ' + i)
}
})
</script>
<style scoped>
</style>
Props
Prop | isRequired | Usages | Type |
---|---|---|---|
items | yes | :items="your actual array" | Array |
itemsToDisplay | no | :items-to-display="10"; defaults to 10 | Number |
pageClass | no | page-class="css class"; Pagination css class | String |
pageStyle | no | :page-style="yourStyleObject" | Object |
pageActiveClass | no | page-active-class="cssClass"; Currently active page class | String |
pageActiveStyle | no | :page-active-style="activePageStyleObject" | Object |
disableShowingLabel | no | :disable-showing-label="true"; default to true | Boolean |
Event
Event name | isRequired | Description |
---|---|---|
display | yes | The display event emits computed array which you can use to display inside your template tag |
Credits
-
Siddharth Sarathe
-
Pragati Tanwar