Pagination

<script setup lang="ts">
import { ref } from "vue";
import MtPagination from "@shopware-ag/meteor-component-library/MtPagination";

const currentPage = ref(1);

function handlePageChange(page: number) {
  currentPage.value = page;
}
</script>

<template>
  <mt-pagination
    :current-page="currentPage"
    :limit="25"
    :total-items="100"
    @change-current-page="handlePageChange"
  />
</template>

Usage

Pagination is a control for moving through larger result sets one page at a time, letting users move forward, backward, or jump to a specific page. Use it alongside data tables, result lists, or overview pages with many items when a list or table is split into pages.

import { MtPagination } from "@shopware-ag/meteor-component-library";

API reference

Props

Events

Best practices

Behavior

• Pagination displays the current visible range, for example 1-25 of 100.
• It emits change-current-page when users navigate with the buttons or by typing a page number.
• Changing limit resets the current page back to 1.

Accessibility

• Navigation buttons include accessible labels for first, previous, next, and last page.
• Keep Pagination near the content it updates so the relationship stays clear.
• Make sure page changes also update the visible content in a predictable way for keyboard and screen-reader users.