logo-icon
STWUI

Pagination

Beta Component

This component is still a work in progress and is subject to change. Use with caution as breaking changes may occur.

svelte
<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