Quasar Pagination Component

A customizable pagination component for Quasar Framework applications.

Installation

npm install quasar-pagination-component

Usage

<template>
  <PaginationTable
    :current-page-prop="currentPage"
    :total-pages-prop="totalPages"
    @change-pagination="handlePageChange"
  />
</template>

<script setup>
import { PaginationTable } from "quasar-pagination-component";
import { ref } from "vue";

const currentPage = ref(1);
const totalPages = ref(10);

const handlePageChange = (page) => {
  currentPage.value = page;
};
</script>

Props

| Prop | Type | Description | Default | | ----------------- | -------- | --------------------- | --------- | | currentPageProp | Number | Current active page | - | | totalPagesProp | Number | Total number of pages | - | | color | String | Color of the buttons | grey | | activeColor | String | Color of active page | primary |

Events

| Event | Payload | Description | | ------------------- | -------- | ----------------------------- | | change-pagination | Number | Emitted when the page changes |