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:
import { Pagination } from "flowbite-react";
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.
Add next and previous icons to the pagination component by passing the showIcons prop via React.
Show only the next and previous control buttons by passing the layout="navigation" prop from React.
Show the control buttons with icons by passing both the layout="navigation" and showIcons props.
Use this example show table data navigation by using the layout="table" prop from React.
Showing 1 to 10 of 100 Entries
Show icons for the next and previous control buttons for table navigation by passing the showIcons prop.
Showing 1 to 10 of 100 Entries
Customize the text for the next and previous buttons by passing the previousLabel and nextLabel props.
To learn more about how to customize the appearance of components, please see the Theme docs.
{
"base": "",
"layout": {
"table": {
"base": "text-sm text-gray-700 dark:text-gray-400",
"span": "font-semibold text-gray-900 dark:text-white"
}
},
"pages": {
"base": "xs:mt-0 mt-2 inline-flex items-center -space-x-px",
"showIcon": "inline-flex",
"previous": {
"base": "ml-0 rounded-l-lg border border-gray-300 bg-white px-3 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",
"icon": "h-5 w-5"
},
"next": {
"base": "rounded-r-lg border border-gray-300 bg-white px-3 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",
"icon": "h-5 w-5"
},
"selector": {
"base": "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",
"active": "bg-cyan-50 text-cyan-600 hover:bg-cyan-100 hover:text-cyan-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white",
"disabled": "cursor-not-allowed opacity-50"
}
}
}RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4