Home
Pagination
A pagination control with page size selector, item count display, and previous/next navigation.
Usage
Use pagination to control page navigation, adjust rows per page, and display the current item range.
Set pageSizes as a property to customize options shown in the rows-per-page wc-select.
<wc-pagination id="pagination-sizes-demo" style="width: 100%;" page="1" page-size="10" total-items="128"></wc-pagination>
<script>
const paginationSizesEl = document.getElementById('pagination-sizes-demo');
paginationSizesEl.pageSizes = [5, 10, 25, 50];
</script>
Listen to the page event to react to page changes in parent components.
<wc-pagination id="pagination-demo" style="width: 100%;" page="1" page-size="25" total-items="230"></wc-pagination>
<script>
const paginationEl = document.getElementById('pagination-demo');
paginationEl.addEventListener('page', (event) => {
console.log('Pagination changed:', event.detail);
});
</script>