Pagination
The pagination component provides controls for navigating through paged data sets.
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>
On this page
Usage