sarathe-library

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