Pagination

Use the Tailwind CSS pagination element to indicate a series of content across various pages

The pagination component can be used to navigate across a series of content and data sets for various pages such as blog posts, products, and more. You can use multiple variants of this component with or without icons and even for paginating table data entries.

Setup

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

Default pagination

Use the following list of pagination items to indicate a series of content for your website.

<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

The following pagination component example shows how you can use SVG icons instead of text to show the previous and next pages.

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

Previous and next

Use the following markup to show simple previous and next elements.

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

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

Previous and next with icons

Use the following code to show simple previous and next elements with icons.

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

Table data pagination

You can use the following markup to show the number of data shown inside a table element and also the previous and next action buttons.

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

Table data pagination with icons

You can use the following code to show the number of data shown inside a table element and also the previous and next action buttons coupled with icons.

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

<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

Forwarded Events: Next, Pagination, Previous, TableData

References