Pagination
Pagination is a group of buttons that allow the user to navigate between a set of related content.
Beta Component
This component is still a work in progress and is subject to change. Use with caution as
breaking changes may occur.
Showing 1 to 10 of 97 results
<script lang="ts">
import { Pagination } from 'stwui';
let rowsPerPage = 10;
let start = 1;
let end = 10;
let total = 97;
let currentPage = 1;
function calculateStartAndEnd() {
start = currentPage * rowsPerPage - rowsPerPage + 1;
end = start + (rowsPerPage - 1) > total ? total : start + (rowsPerPage - 1);
}
function onPreviousClick() {
currentPage--;
calculateStartAndEnd();
}
function onNextClick() {
console.log('FIRED!');
currentPage++;
calculateStartAndEnd();
}
function onPageClick(page: number) {
currentPage = page;
calculateStartAndEnd();
}
</script>
<Pagination
{start}
{end}
{total}
pageSize={rowsPerPage}
{currentPage}
{onNextClick}
{onPageClick}
{onPreviousClick}
/>
Alert Props
start | number | |
end | number | |
total | number | |
total | number | |
currentPage | number | |
onNextClick | () => void | |
onPreviousClick | () => void | |
onPageClick | (page: number) => void | |
pageSize | number | 25 |