sarathe-library v0.0.9

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

Event

Credits

• Siddharth Sarathe

• Pragati Tanwar