Pagination

Pagination is used in tables to divide a large amount of data into several pages and serves as an alternative to lazy loading. Pagination inherits style and behavior from the checkbox button group.

Basic usage

Source code

<script setup>
  import { AcvPagination } from '@acronis-platform/ui-component-library';
  import { ref } from 'vue';

  const currentPage = ref(1);
</script>

<template>
  <AcvPagination
    v-model="currentPage"
    :total="7"
    :limit="1"
  />
</template>

Examples

With router

...

...

Source code

<script setup lang="ts">
  import { AcvPagination } from '@acronis-platform/ui-component-library';
  // TODO: fix example with vue-router
  // import { computed, getCurrentInstance } from 'vue';
  // import { createRouter, createWebHistory, useRoute } from 'vue-router';

  // const router = createRouter({
  //   history: createWebHistory(),
  //   routes: [
  //     {
  //       path: '/',
  //       component: {
  //         template: '<div>Test</div>',
  //       },
  //     },
  //   ],
  // });

  // const { app } = getCurrentInstance().appContext;
  // app.use(router);
  //
  // const route = useRoute();
  // // const router = useRouter();
  // const currentPage = computed(() => (route.query.page ? +route.query.page : 1));

  /**
   * Merge existing query with pagination params
   */
  // function getAcvPaginationQuery(query: LocationQueryRaw, page: number): LocationQueryRaw {
  //   // don't show first page in url
  //   return { ...query, page: page > 1 ? page : undefined };
  // }

  async function setActivePage() {
    // await router.push({ query: getAcvPaginationQuery(route.query, newPage) });
  }
</script>

<template>
  <AcvPagination
    :total="20"
    :limit="1"
    :model-value="currentPage"
    @update:model-value="setActivePage"
  />
</template>

Related components

• Button

Props

Prop name	Description	Type	Values	Default
title	Title of the Pagination	string	-
description	Description of the Pagination	string	-

Events

Event name	Properties	Description
close	eventName string - The name of the event visible string - The visibility state of the component	Triggered when the component is closed

Slots

Name	Description	Bindings
default	The default slot content
description	The description slot content