Pagination

Pagination is used to split a large set of data into smaller chunks (pages), making it easier for users to navigate and digest content. 📄

Installation

You can install the Pagination component using the global design system bundle or as a standalone script.

Using the Bundle

<script src="https://webcdn.ringover.com/app/download/design-system/lts/design-system.js"></script>
<script>
const { RoPagination } = RingoUI;
customElements.define('ro-pagination', RoPagination);
</script>

Standalone

<script src="https://webcdn.ringover.com/app/download/design-system/lts/pagination.js"></script>
<script>
customElements.define('ro-pagination', RoPagination.RoPagination);
</script>

Example

Use the <ro-pagination> custom element. It automatically generates page buttons and navigation arrows based on the total items and page size provided.

<ro-pagination
id="my-pagination"
total-items="95"
page-size="10"
current-page="1">
</ro-pagination>

Preview

Attributes

Attribute	Type	Default	Description
total-items	number	0	Total number of items in the dataset.
page-size	number	10	Number of items displayed per page.
current-page	number	1	The currently active page.

JavaScript & Events

Event Details

Event Name	Detail	Description
page-change	{ page: number }	Fired when the user selects a new page. The event detail contains the new page number.

Example

You can listen for the page-change event to fetch new data or update your view.

const pagination = document.getElementById("my-pagination");

pagination.addEventListener("page-change", (e) => {
  const newPage = e.detail.page;
  console.log("User navigated to page:", newPage);

  // Example: Fetch data for the new page
  // fetchUsers(newPage);
});