Vue composable - array pagination

Vue composable - array pagination

This is an example of a creating a pagination class for of the Vue 3 composition API.

The benefit of the composition API is that it allows to encapsulate the logic in a reusable self-enclosed non-single-file-component. This makes it easy to reuse and, compared to a mixin, is more predictable and maintainable. Because Vue 3 is not released yet, this write-up will be presented using a global bundle which will allow easier showcasing in a jsfiddle. While I have not tried it, this should be possible to apply to a Vue 2 project with the composition-api plugin with few changes.

Composable function

const { computed, ref, isRef } = Vue;

/**
 *
 * @param {Object} options
 * @param {ref|number} options.pageSize
 * @param {ref|number} options.currentIndex 0 based index
 * @param {ref|array} options.array
 */
const pagin8r = options => {
  // setup props
  const pageSize = isRef(options.pageSize)
    ? options.pageSize
    : ref(options.pageSize);
  const currentIndex = isRef(options.currentIndex)
    ? options.currentIndex
    : ref(options.currentIndex);
  const array = isRef(options.array) ? options.array : ref(options.array);

  // create computed
  const total = computed(() => array.value.length);
  const currentPageNum = computed(() => currentIndex.value + 1);
  const numPages = computed(() => Math.ceil(total.value / pageSize.value));
  const range = computed(() =>
    array.value.slice(
      currentIndex.value * pageSize.value,
      (currentIndex.value + 1) * pageSize.value
    )
  );

  // create methods
  const gotoNext = () => {
    currentIndex.value = Math.min(currentIndex.value + 1, numPages.value - 1);
  };
  const gotoPrev = () => {
    currentIndex.value = Math.max(0, currentIndex.value - 1);
  };
  const gotoFirst = () => {
    currentIndex.value = 0;
  };
  const gotoLast = () => {
    currentIndex.value = numPages.value - 1;
  };

  // return props, computed, and method variables
  return {
    array,
    pageSize,
    currentIndex,
    currentPageNum,
    total,
    numPages,
    range,
    gotoNext,
    gotoPrev,
    gotoFirst,
    gotoLast
  };
};

Few things to note.

The function has been laid out to mimic a typical non-composable, grouping props, computed, and methods. All of these have been passed to the returning object, to be available for use.

The pageSize, currentIndex, and array props check if they are being passed a ref or a value using isRef. This allows the function to accept ref and non-ref values. This makes it easier to compose functionality if you have multiple composables. Having this functionality in the Composition API makes it well suited to build a library of functional bits that can be assembled together in various configurations. For example having a simple scroll listening composable, you could calculate the page index from the scroll position and pass it to the pagination function. The Vue component itself would only worry about tying the composables together and rendering the outcome.

In the example fiddle, I use a ref for pageSize, to allow editing it in the template through a v-model. The other params are not used after creation, so a ref is not needed (but possible).

let array = [...Array(50)].map((x, n) => n);
let pageSize = ref(4);
let currentIndex = 0;

It's not complete. Edge cases have not been considered thoroughly. For example changing the page size when you're on the last page does not update the pageIndex automatically. (i.e. if you can end up on page 20 of a 10 page book.) I would probably implement through currentPageNum though

const currentPageNum = computed(() => {
  if (currentIndex.value >= numPages.value) {currentIndex.value = numPages.value - 1}
  return currentIndex.value + 1
});

I'm hoping to keep adding more examples of composables over the upcoming weeks/months.

TL;DR;

Full example: https://jsfiddle.net/dapo/kmpj38od/

photo credit: https://unsplash.com/@moonshadowpress