📘 Pagination Component — Usage Guide

A Reusable Pagination component that works for both:

• API-based Pagination — when data comes from a backend (e.g., Laravel’s ->paginate(20)->withPath('');).
• Static Pagination — when data is already available locally.

---

⚙️ Component Props

Prop	Type	Default	Description
meta	Object	null	Pagination metadata (from API) (optional for static).
apiUrl	String	''	Base API URL for dynamic pagination (optional for static).
perPage	Number/String	10	Default per-page count. (null for API-base)
perPageOptions	Array	[5,10,15,25,50,100,'All']	Dropdown values for "Per Page" selector.
autoScrollTop	Boolean	true	Scrolls to top when page changes.
allData	Array	[]	All Data for Static Pagination
paginatedData	Array	[]	Return Paginated Data

---

📤 Events Emitted

Event	Description	Payload
page-change	Triggered when a pagination button or page link is clicked.	Full or relative URL (e.g., ?page=2&per_page=10).

---

🚀 1. Using with API-Based Pagination

🧠 When to Use

Laravel returns paginated data with a structure like:

{
  "data": [...],
  "meta": {
    "current_page": 2,
    "last_page": 10,
    "per_page": 25,
    "total": 240,
    "links": [...]
  }
}

<template>
    <div>
        <Pagination
            :meta="pagination.meta"
            :api-url="pagination.apiUrl"
            :per-page="pagination.perPage"
            @page-change="getData"
        />
    </div>
</template>

<script>
export default {
    data() {
        return {
            users: [],
            pagination: { 
                apiUrl: '/api/users', 
                meta: {} 
                perPage: null,
            },
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        async getData(url = null) {

            const api = url ? url : this.pagination.apiUrl

            await axios.post(api)
                .then((response) => {
                    this.users = response.data.data;
                    this.pagination.meta = response.data.meta
                })
        },
    },
}
</script>

🧾 Description

• The component emits page-change with the next/previous page URL.
• The parent method (getData) re-fetches the data from the server.
• Works with any backend that returns a standard pagination object.

🚀 2. Using with Static Data Pagination

🧠 When to Use

Use Static Mode when all your data already exists in the frontend (for example, in a local array).

<template>
    <div>
        <table class="table table-bordered">
            <tr v-for="user in visibleUsers" :key="user.id">
                <td>{{ user.name }}</td>
            </tr>
        </table>

        <Pagination 
            :all-data="allUsers" 
            :paginated-data.sync="visibleUsers" 
            :per-page="10" 
        />
    </div>
</template>
<script>
export default {
    data() {
        return {
            allUsers: [],
            visibleUsers: [],
        }
    },
}
</script>

🧾 Description

• No API calls are made.
• The dataset is sliced manually based on the selected page and per-page count.