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

CSS classes

The web component renders this markup:

Class	Description
.ro-pagination	Root flex list container.
.ro-pagination-btn	Page number or navigation arrow button.
.ro-pagination-btn.selected	Currently active page.
.ro-pagination_ellipsis	Ellipsis cell between page ranges.

CSS custom properties

Variable	Description
--ro-pagination-gap	Gap between pagination items.
--ro-pagination-btn-color	Button text color.
--ro-pagination-btn-radius	Button border radius.

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);
});