Paginator

CPaginator displays data in paged format and provides navigation between pages.

Basic

You must specify the rows and totalRecords properties to define the number of rows per page and the total number of records respectively.

<template>
  <CPaginator :rows="10" :totalRecords="120" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const currentPage = ref(0);
</script>

Size

You can define the size of the paginator using the size property.

<template>
  <CPaginator :rows="10" :totalRecords="120" size="small" />
  <CPaginator :rows="10" :totalRecords="120" />
  <CPaginator :rows="10" :totalRecords="120" size="large"/>
</template>

Rows per page options

You can provide a set of options for the number of rows per page using the rows-per-page-options property. This will render a dropdown allowing users to select their preferred number of rows per page.

10

<template>
  <CPaginator
      :rows="10"
      :totalRecords="120"
      :rows-per-page-options="[5,10,20,50]"
  />
</template>

Programmatic Page Navigation

You can programmatically navigate to a specific page using the setPage method available on the paginator component instance.

WARNING

The page index is zero-based, meaning that the first page is represented by 0.

<template>
  <CPaginator
      :rows="10"
      :totalRecords="120"
      ref="paginator"
  />
</template>

<script lang="ts" setup>
import { onMounted, useTemplateRef } from 'vue';

const paginator = useTemplateRef('paginator');

onMounted(() => {
  paginator.value?.setPage(2);
});
</script>

Page State

When the state of the paginator changes (such as when the user navigates to a different page or changes the number of rows per page), a page event is emitted. You can listen to this event to update your data accordingly.

The PageState object contains the following properties:

• first: Index of the first record in the current page.
• rows: Number of rows per page.
• page: Current page index (zero-based).
• pageCount: Total number of pages.

<template>
  <CPaginator
      :rows="10"
      :totalRecords="120"
      @page="state = $event"
  />
  <pre class="mt-4">{{ state }}</pre>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { type PageState } from 'primevue/paginator'

const state = ref<PageState>();
</script>

Paginated Data

We provide a composable usePaginatedData to help you manage paginated data easily.

The first parameter is a Ref containing the full dataset, and the second parameter is a Ref for the PageState. The composable returns a Ref pageData containing only the data for the current page.

<template>
  <CPaginator
      :rows="10"
      :totalRecords="120"
      @page="state = $event"
  />
  <ul class="list-disc">
    <li v-for="item in pageData" :key="item">{{ item }}</li>
  </ul>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { type PageState } from 'primevue/paginator'

const state = ref<PageState>();

const numbers = ref<number[]>([]);
for (let i = 1; i <= 115; i++) {
  numbers.value.push(i);
}

const {pageData} = usePaginatedData(numbers, state)
</script>