# ArrayPagination

Paginates array, if the array changes size, it will handle the update

# State

The useArrayPagination function exposes the following reactive state:

import { useArrayPagination } from "vue-composable";

const {
  pageSize,
  total,
  currentPage,
  offset,
  lastPage,
  result
} = useArrayPagination();
State Type Description
pageSize Number Current page size, allows to set the pageSize
total Number Total elements
currentPage Number Current page
offset Number Current page offset from the beginning
lastPage Number Last page number
result Array Current page items

# Methods

The useArrayPagination function exposes the following methods:

import { useArrayPagination } from "vue-composable";

const { next, prev, first, last } = useArrayPagination();
Signature Description
next() Increments currentPage
prev() Decrements currentPage
first() Sets currentPage to 1
last() Sets currentPage = lastPage

# Example

page 1 of 334

  • 0
  • 1
  • 2

# Code

<template>
  <div>
    <p>page {{ currentPage }} of {{ lastPage }}</p>
    <p>
      <button @click="prev">prev</button>
      <button @click="next">next</button>
    </p>
    <ul>
      <li v-for="n in result" :key="n">
        {{ n }}
      </li>
    </ul>
  </div>
</template>

<script>
import { useArrayPagination } from "vue-composable";

export default {
  name: "array-pagination-example",
  setup() {
    const array = new Array(1000).fill(0).map((_, i) => i);
    const { result, next, prev, currentPage, lastPage } = useArrayPagination(
      array,
      {
        pageSize: 3
      }
    );

    return { result, next, prev, currentPage, lastPage };
  }
};
</script>