micropagination
v0.0.2
Published
Pagination component and composable to simplify pagination in vue3
Downloads
31
Readme
Micropagination
Pagination component and composable to simplify pagination in vue3
Getting started
You can install using any package manager
npm install --save micropagination
With yarn:
yarn add micropagination
With pnpm:
pnpm add micropagination
Then, you can import the component
import Micropagination from 'micropagination';
And use it in your project:
<template>
<Micropagination @change="changePage" />
</template>
<script lang="ts" setup>
import Micropagination from 'micropagination';
const changePage = (page: number) => console.log('New page: ', page);
</script>
Props
Events
Slots:
<template>
<Micropagination
@change="handleChange"
currentPage="2"
perPage="5"
:total="200"
>
<template v-slot:prev-button>
<div>prev</div>
</template>
<template v-slot:next-button>
<div>next</div>
</template>
</Micropagination>
</template>
css default variables
Composables
This package also provides a usePagination
composable to handle the pagination, and here show you how to use it:
<template>
<ul v-if="data && data.length">
<li v-for="item in data" :key="item.id">
<p>{{ item.content }}</p>
</li>
</ul>
<hr />
<Micropagination
:current-page="page"
:per-page="perPage"
:total="total"
@change="changePage"
v-if="total"
/>
</template>
<script setup lang="ts">
import Micropagination, { usePagination, type CallbackParams } from "micropagination";
import { unref } from "vue";
type Data = {
id: string;
content: string;
};
// Receive a callback and a default params object
const { data, page, total, perPage, changePage } = usePagination<Data>(
paginationCallback,
{
perPage: 5,
}
);
async function paginationCallback(params: CallbackParams) {
// unref to avoid the ref wrapper
const page = unref(params.page);
const pageSize = unref(params.perPage);
// get the api result passing the pagination parameters
const result = await api({ page, pageSize });
// change the reactive variable values
return {
total: result.pagination.total,
pageCount: result.pagination.pageCount,
data: result.data,
};
}
</script>
Author
- David Arenas @dave136
LICENSE
This project is licensed under the MIT License