sarathe-library
v0.0.9
Published
This library will have some basic vue components which are ready to use out of the box
Downloads
22
Maintainers
Readme
Vue3 + Pagination
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