Pagination Components

Default pagination

<script lang="ts">
	import { Pagination } from 'flowbite-svelte';
	let pages = [
		{
			pageNum: 1,
			href: '/'
		},
		{
			pageNum: 2,
			href: '/'
		},
		{
			pageNum: 3,
			href: '/'
		},
		{
			pageNum: 4,
			href: '/'
		},
		{
			pageNum: 5,
			href: '/'
		}
	];
	const previous = () => {
		alert('Previous btn clicked. Make a call to your server to fetch data.');
	};
	const next = () => {
		alert('Next btn clicked. Make a call to your server to fetch data.');
	};
</script>

<Pagination {pages} on:previous={previous} on:next={next} />

Pagination with icons

<Pagination {pages} on:previous={previous} on:next={next} icon />

Previous and next

<script>
  import { Previous, Next } from 'flowbite-svelte';
</script>

<Previous on:previous={previous} />
<Next on:next={next} />

Previous and next with icons

<Previous on:previous={previous} icon />
<Next on:next={next} icon />

Table data pagination

<script>
    let helper = {
    start: 1,
    end: 10,
    total: 100
  }
</script>

<TableData on:next={next} on:previous={previous} />
<TableData on:next={next} on:previous={previous} {helper}/>

Props

The component has the following props, type, and default values. See types page for type information.

Pagination

Previous

Next

TableData

References