Pagination

The pagination component is used to navigate between multiple pages of content.

Usage

Use v-model to bind data to Pagination.

Use the items prop to define total number of pages

<template>
  <ci-pagination
    v-model="currentPage"
    :items="items"
  />
</template>

<script>
export default {
  data() {
    return {
      currentPage: 2,
      items: 1000
    }
  }
}
</script>

Per Page

User per-page prop to set default page size.

<template>
  <ci-pagination
    v-model="currentPage"
    :items="items"
    :per-page="perPage"
  />
</template>

<script>
export default {
  data() {
    return {
      currentPage: 2,
      items: 100,
      perPage: 50
    }
  }
}
</script>

Per Page Sublabel

User per-page-sublabel prop to set label for page size selector.

<template>
  <ci-pagination
    v-model="currentPage"
    :items="items"
    per-page-sublabel="Size"
  />
</template>

<script>
export default {
  data() {
    return {
      currentPage: 2,
      items: 100,
      perPage: 10
    }
  }
}
</script>

Per Page Option

Use the per-page-option to set the text for each option in the Per Page dropdown. You can include a $$ in your string where you want the number of elements per page to appear. The default is $$ rows.

<template>
  <ci-pagination
    v-model="currentPage"
    :items="items"
    per-page-option="$$ rows per page"
  />
</template>

<script>
export default {
  data() {
    return {
      currentPage: 2,
      items: 100,
      perPage: 10
    }
  }
}
</script>

Page Option

Use the page-option prop to set text for each option in the pagination overflow menu. You can include a $$ in your string where you want the page number to appear. The default is Page $$.

<template>
  <ci-pagination
    v-model="currentPage"
    :items="items"
    page-option="$$"
  />
</template>

<script>
export default {
  data() {
    return {
      currentPage: 2,
      items: 100,
      perPage: 10
    }
  }
}
</script>

Pagination side slot

Use the pagination-side slot to set content needed on right side of pagination.

<template>
  <ci-pagination
    v-model="currentPage"
    :items="items"
  >
    <template #pagination-side>
      {{ items }} items total
    </template>
  </ci-pagination>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 2,
      items: 100
    }
  }
}
</script>

Events

The Pagination component has 2 events: update and resize.

<template>
  <ci-pagination
    v-model="currentPage"
    :items="items"
    @update="onPageSelected"
    @resize="onResize"
  />
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      items: 100
    }
  },

  methods: {
    onPageSelected(page) {
      alert(`Page #${page} was selected`)
    },

    onResize(size) {
      alert(`Display ${size} rows per page`)
    }
  }
}
</script>

Event	Arguments	Emitted when....
@update	Page's number	page is selected
@resize	Page size	rows per page option is selected