React Pagination - Flowbite

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 React props API and the utility classes from Tailwind CSS.

You need to import the pagination component from the flowbite-react library before using it:

'use client';

import { Pagination } from 'flowbite-react';

Default pagination

Use the <Pagination> component to create a default pagination element and use the currentPage prop to set the currently active page, the totalPages prop to set how many pages there are in total and update the onPageChange even listener to set the state of the pagination component via React.

<Pagination
  currentPage={1}
  onPageChange={onPageChange}
  totalPages={100}
/>

Pagination with icons

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

<Pagination
  currentPage={1}
  onPageChange={onPageChange}
  showIcons
  totalPages={100}
/>

Previous and next

Show only the next and previous control buttons by passing the layout="navigation" prop from React.

<Pagination
  currentPage={1}
  layout="navigation"
  onPageChange={onPageChange}
  totalPages={100}
/>

Control button icons

Show the control buttons with icons by passing both the layout="navigation" and showIcons props.

<Pagination
  currentPage={1}
  layout="navigation"
  onPageChange={onPageChange}
  showIcons
  totalPages={100}
/>

Table data navigation

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

<div className="flex items-center justify-center text-center">
  <Pagination
    currentPage={1}
    layout="table"
    onPageChange={onPageChange}
    totalPages={1000}
  />
</div>

Table data navigation with icons

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

<div className="flex items-center justify-center text-center">
  <Pagination
    currentPage={1}
    layout="table"
    onPageChange={onPageChange}
    showIcons
    totalPages={1000}
  />
</div>

Control button text

Customize the text for the next and previous buttons by passing the previousLabel and nextLabel props.

<div className="flex items-center justify-center text-center">
  <Pagination
    currentPage={1}
    layout="pagination"
    nextLabel="Go forward"
    onPageChange={onPageChange}
    previousLabel="Go back"
    showIcons
    totalPages={1000}
  />
</div>

References

• Flowbite Pagination