A pagination component built with Web Components.
Installation
bun add @duskmoon-dev/el-pagination
Usage
Auto-Register
import '@duskmoon-dev/el-pagination/register';
<el-dm-pagination total="100" current="1"></el-dm-pagination>
Manual Registration
import { ElDmPagination, register } from '@duskmoon-dev/el-pagination';
// Register with default tag name
register();
// Or register with custom tag name
customElements.define('my-pagination', ElDmPagination);
Sizes
| Size | Description |
|---|
sm | Small pagination |
md | Medium pagination (default) |
lg | Large pagination |
Attributes
| Attribute | Type | Default | Description |
|---|
total | number | 0 | Total number of pages |
current | number | 1 | Current page number |
siblings | number | 1 | Pages shown on each side of current |
boundaries | number | 1 | Pages shown at start/end |
size | string | 'md' | Size: sm, md, lg |
color | string | 'primary' | Color variant |
CSS Parts
| Part | Description |
|---|
container | The pagination container |
button | All page buttons |
page | Page number buttons |
ellipsis | The ellipsis element |
Events
| Event | Detail | Description |
|---|
change | { page } | Fired when page changes |
Examples
Basic
<el-dm-pagination total="10" current="1"></el-dm-pagination>
Many Pages
<el-dm-pagination total="100" current="50"></el-dm-pagination>
Custom Siblings
<el-dm-pagination total="20" siblings="2"></el-dm-pagination>
Custom Boundaries
<el-dm-pagination total="20" boundaries="2"></el-dm-pagination>
Sizes
<el-dm-pagination total="10" size="sm"></el-dm-pagination>
<el-dm-pagination total="10" size="md"></el-dm-pagination>
<el-dm-pagination total="10" size="lg"></el-dm-pagination>
Handling Page Change
const pagination = document.querySelector('el-dm-pagination');
pagination.addEventListener('change', (e) => {
console.log('Page changed to:', e.detail.page);
// Fetch data for the new page
fetchData(e.detail.page);
});
With Data Table
<el-dm-table id="table"></el-dm-table>
<el-dm-pagination id="pagination" total="10"></el-dm-pagination>
<script>
const table = document.querySelector('#table');
const pagination = document.querySelector('#pagination');
pagination.addEventListener('change', async (e) => {
const data = await fetchPageData(e.detail.page);
table.data = data;
});
</script>
License
MIT