Aqua Basis

The AqPagination component is designed to manage the navigation of paginated content. It allows users to easily traverse large sets of records by dividing them into smaller pages.

The component offers customization options such as the number of records per page, top border display, and visibility of the items-per-page selector. This ensures flexibility, consistency, and a smoother user experience when handling data-heavy interfaces.

<aq-pagination records="100" per-page="20"></aq-pagination>
<aq-pagination records="100" per-page="20" hasBorderTop></aq-pagination>
<aq-pagination records="180" per-page="10" show-items-per-page="false" chunk=9 is-small="true"></aq-pagination>

Props and Attributes

Prop / Attr	Type	Default	Description
`page`	`number`	`1`	Current active page (mutable).
`totalPages`	`number`	`-`	Total number of pages to render.
`records`	`number`	`0`	Total number of records to paginate.
`perPage`	`number`	`10`	Number of records per page (mutable).
`chunk`	`number`	`3`	Number of pagination buttons to display at once.
`perPageValues`	`number[]`	`[10, 25, 50, 100]`	List of selectable values for records per page.
`isSmall`	`boolean`	`false`	If true, renders the pagination in a more compact style.
`align`	`AlignType` (from `AlignTypeUnsetted`)	`right`	Alignment of the pagination (e.g., `left`, `center`, `right`).
`showItemsPerPage`	`boolean`	`true`	Whether to show the selector for items per page.
`cid`	`string`	`''`	Component identifier, useful for linking or custom targeting logic.

PlayGround

You can interact with the component and experiment with its attributes and properties directly in this playground.

In the Code tab, the generated code snippet is available.

In addition to the interactive examples in this documentation, you can explore the full playground with all supported options and advanced configurations at the following link:

👉 Open full playground

https://aqua-ds-playground.masivianlabs.com/doc-storybook/index.html?path=/story/components-data-aqpagination--default&nav=0

<aside> ⚠️

Important: The code shown is in Web Component format. If you are using a specific framework (Vue, React, Angular), you must adapt it to the framework’s conventions before using it.

</aside>

Events

Event	Description	React	Angular	Vue	Vanilla
`setPage`	Fired when the current page changes.	`onSetPage={handlePageChange}`	`(setPage)="handlePageChange($event)"`	`@setPage="handlePageChange"`	`addEventListener('setPage', handler)`
`setPerPageValue`	Fired when a new items-per-page value is set.	`onSetPerPageValue={handlePerPage}`	`(setPerPageValue)="handlePerPage($event)"`	`@setPerPageValue="handlePerPage"`	`addEventListener('setPerPageValue', handler)`

Event Types

Event	React/Angular/Vue
`open`	`(e?:Event)`
`close`	`(e?:Event)`

In Frameworks

Props considerations

When using the components across different frameworks, keep in mind the convention for defining props:

In Vue, Angular and in vanilla JavaScript/HTML (direct Web Component usage), props must be written in kebab-case (e.g., is-required, helper-text).
In React props should be written in camelCase (e.g., isRequired, helperText).

This difference exists because each framework has its own best practices: React follows JavaScript conventions and uses camelCase for props, while Vue, Angular, and direct HTML/Web Components usage rely on kebab-case in templates to align with HTML attribute naming conventions.

Web Components

<aq-pagination records="100" per-page="20"></aq-pagination>
<aq-pagination records="100" per-page="20" hasBorderTop></aq-pagination>
<aq-pagination records="180" per-page="10" show-items-per-page="false" chunk=9 is-small="true"></aq-pagination>

Vue

<script lang="ts">
	import { defineComponent, ref } from 'vue';
	import { AqPagination } from '@aqua-ds/vue';
	import { ALIGNMENT } from '@aqua-ds/web-components/enums';
	import type { AlignType } from '@aqua-ds/web-components/types';

	export default defineComponent({
    components: {
	    AqPagination,
	  },
	  setup() {
	    const aligment: AlignType = ALIGNMENT.LEFT
	    const handleSetPage= (e: Event) => {
	      console.log('hanldeSetPage', e)
	    }
	    const handleSetPerPageValue = (e: Event) => {
	      console.log('hanldeSetPerPageValue', e)
	    }
	    return { handleSetPage, handleSetPerPageValue, aligment }
	  },
	});
</script>

<template>
	<aq-pagination
    :align="aligment"
    :records="100"
    :perPage="20"
    @setPage="handleSetPage"
    @setPerPageValue="handleSetPerPageValue"
  ></aq-pagination>
</template>

React

import {
  AqPagination
} from '@aqua-ds/react';

export const AqPagination = () => {
  const handleSetPage = (e: Event) => {
    console.log('hanldeSetPage', e);
  };
  const handleSetPerPageValue = (e: Event) => {
    console.log('hanldeSetPerPageValue', e);
  };
  return (
    <>
      <AqPagination
	      aligment="left"
	      records={100}
	      perPage={20}
	      onSetPage={handleSetPage}
	      onSetPerPageValue={handleSetPerPageValue}
      ></AqPagination>
    </>
  );
};

Angular

// label-set.component.ts
import { Component } from '@angular/core';
import { AqLabel } from '@aqua-ds/angular';

@Component({
  selector: 'app-pagination',
  standalone: true,
  imports: [
    AqPagination
  ],
  templateUrl: './pagination-set.component.html',
})
export class SetPaginationComponent {
  handleSetPage(e: Event) {
    console.log('handleSetPage', e);
  }
  handleSetPerPageValue(e: Event) {
    console.log('handleSetPerPageValue', e);
  }

  records = 100;
  perPage = 20;
  showItemsPerPage = true;
  chunk = 9;
  isSmall = true;
  align = 'left';
}

<!-- pagination-set.component.html -->
<aq-pagination
  (setPage)="handleSetPage($event)"
  (setPerPageValue)="handleSetPerPageValue($event)"
  [records]="records"
  [perPage]="perPage"
  [showItemsPerPage]="showItemsPerPage"
  [chunk]="chunk"
  [isSmall]="isSmall"
  [align]="align"
></aq-pagination>