micropagination
v0.0.2
Published
Pagination component and composable to simplify pagination in vue3
Downloads
9
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