Qwik pagination - Flowbite

Get started with the pagination component to indicate the number of pages with number, link, and control buttons and allow the user to navigate through these pages

The pagination component can be used to show a list of pages with numbers and links to allow the users to navigate through multiple pages, data from tables, and more.

Choose one of the examples below based on various styles and sizes and customize them using the Qwik props API and the utility classes from Tailwind CSS.

To start using the pagination component you need to import it from flowbite-qwik :

import { Pagination } from "flowbite-qwik"

Default pagination

Use the following list of pagination items based on two sizes powered by Tailwind CSS utility classes to indicate a series of content for your website.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Pagination } from 'flowbite-qwik'

export default component$(() => {
  const currentPage = useSignal(1)

  return (
    <>
      <div class="flex gap-3 p-3 text-center">
        <Pagination totalPages={100} currentPage={currentPage} />
      </div>
    </>
  )
})

Pagination with icons

Add next and previous icons to the pagination component by passing the showIcons prop.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Pagination } from 'flowbite-qwik'

export default component$(() => {
  const currentPage = useSignal(1)

  return (
    <>
      <div class="flex gap-3 p-3 text-center">
        <Pagination totalPages={100} currentPage={currentPage} showIcons previousLabel="Go back" nextLabel="Go forward" />
      </div>
    </>
  )
})

Pagination with icons only

Add next and previous icons only to the pagination component by passing the showIcons prop and no labels.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Pagination } from 'flowbite-qwik'

export default component$(() => {
  const currentPage = useSignal(1)

  return (
    <>
      <div class="flex gap-3 p-3 text-center">
        <Pagination totalPages={100} currentPage={currentPage} showIcons />
      </div>
    </>
  )
})

Pagination with custom icons

Add custom icons to the pagination component by passing the showIcons prop and no labels.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Pagination } from 'flowbite-qwik'
import { IconArrowLeftSolid, IconArrowRightSolid } from 'flowbite-qwik-icons'

export default component$(() => {
  const currentPage = useSignal(1)

  return (
    <>
      <div class="flex gap-3 p-3 text-center">
        <Pagination totalPages={100} currentPage={currentPage} showIcons nextIcon={IconArrowRightSolid} previousIcon={IconArrowLeftSolid} />
      </div>
    </>
  )
})

Table data navigation

Use this example show table data navigation by using the layout="table" prop.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Pagination } from 'flowbite-qwik'

export default component$(() => {
  const currentPage = useSignal(1)

  return (
    <>
      <div class="flex gap-3 p-3 text-center">
        <Pagination layout="table" totalPages={100} currentPage={currentPage} />
      </div>
    </>
  )
})

Table data navigation with icons

Show icons for the next and previous control buttons for table navigation by passing the showIcons prop.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Pagination } from 'flowbite-qwik'

export default component$(() => {
  const currentPage = useSignal(1)

  return (
    <>
      <div class="flex gap-3 p-3 text-center">
        <Pagination layout="table" totalPages={100} currentPage={currentPage} />
      </div>
    </>
  )
})

With custom button

Customize the pagination buttons by passing a custom button component.

Edit on GitHub
tsx
import { component$, useSignal, Slot } from '@builder.io/qwik'
import { Pagination, PaginationButtonProps } from 'flowbite-qwik'

const CustomButton = component$<PaginationButtonProps>(({ active, ...props }) => {
  return (
    <button
      type="button"
      class={[
        'h-10 w-12 border border-gray-300 bg-white py-2 leading-tight text-gray-500 enabled:hover:bg-gray-100 enabled:hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 enabled:dark:hover:bg-gray-700 enabled:dark:hover:text-white',
        {
          'bg-orange-500 text-white hover:bg-orange-600 hover:text-white dark:bg-orange-500 dark:text-white dark:hover:bg-orange-600 dark:hover:text-white':
            active,
        },
      ]}
      {...props}
    >
      <Slot />
    </button>
  )
})
export default component$(() => {
  const currentPage = useSignal(1)

  return (
    <>
      <div class="flex gap-3 p-3 text-center">
        <Pagination totalPages={100} currentPage={currentPage} paginationButton={CustomButton} />
      </div>
    </>
  )
})