Svelte Pagination - Flowbite

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

<script>
  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} icon />

Previous and next #

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

Previous Next

<script>
  import { Pagination, Next, Previous } from 'flowbite-svelte'
  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>

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

<script>
  import { Pagination, Next, Previous } from 'flowbite-svelte'
  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>

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

<script>
  import { TableData } from 'flowbite-svelte'
  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>

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

Showing 1 to 10 of 100 Entries

<script>
  import { TableData } from 'flowbite-svelte'
  let helper = {
    start: 1,
    end: 10,
    total: 100
  }
  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>

<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

Name	Type	Default
icon	boolean	false
pages	PageType[]
ulClass	string	'inline-flex -space-x-px items-center'
pageClass	string	'py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white'
previousClass	string	'py-2 px-3 ml-0 leading-tight text-gray-500 bg-white rounded-l-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white'
nextClass	string	'py-2 px-3 leading-tight text-gray-500 bg-white rounded-r-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white'
iconPreviousClass	string	'block py-2 px-3 ml-0 leading-tight text-gray-500 bg-white rounded-l-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white'
iconNextClass	string	'block py-2 px-3 leading-tight text-gray-500 bg-white rounded-r-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white'

Name	Type	Default
icon	boolean	false
previousClass	string	'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white'

Name	Type	Default
icon	boolean	false
nextClass	string	'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white'

TableData

Name	Type	Default
btnPreClass	string	'py-2 px-4 text-sm font-medium text-white bg-gray-800 rounded-l hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white'
btnNextClass	string	'py-2 px-4 text-sm font-medium text-white bg-gray-800 rounded-r border-0 border-l border-gray-700 hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white'
helper	TableDataHelperType \| undefined	undefined

Forwarded Events #

Next, Pagination, Previous, TableData

on:blur on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover

References #

Flowbite Pagination