Component Library
Browse and explore components
Pagination
Pagination is a UI component used to divide content into separate pages and allow users to navigate through them.
Default Pagination
Component Code
Copy Code
import { useState } from 'react'
import { Pagination } from 'flowbite-react'
const DefaultPaginationCode = () => {
const [currentPage, setCurrentPage] = useState(1)
const onPageChange = (page: number) => setCurrentPage(page)
return (
<div>
<div className='overflow-x-auto'>
<Pagination
currentPage={currentPage}
totalPages={100}
onPageChange={onPageChange}
/>
</div>
</div>
)
}
export default DefaultPaginationCode
Pagination With Icons
Component Code
Copy Code
import { useState } from 'react'
import { Pagination } from 'flowbite-react'
const WithIconCode = () => {
const [currentPages, setCurrentPages] = useState(1)
const onPageChanges = (page: number) => setCurrentPages(page)
return (
<div>
<div className='overflow-x-auto'>
<Pagination
currentPage={currentPages}
totalPages={100}
onPageChange={onPageChanges}
showIcons
/>
</div>
</div>
)
}
export default WithIconCode
Previous And Next Button
Component Code
Copy Code
import { useState } from 'react'
import { Pagination } from 'flowbite-react'
const PrevNextbuttonCode = () => {
const [flowPagin, setFlowPagin] = useState(1)
const onFlowChange = (page: number) => setFlowPagin(page)
return (
<div>
<div>
<Pagination
layout='navigation'
currentPage={flowPagin}
totalPages={100}
onPageChange={onFlowChange}
/>
</div>
</div>
)
}
export default PrevNextbuttonCode
With Icon
Component Code
Copy Code
import { Pagination } from 'flowbite-react'
import { useState } from 'react'
const PrevNextIconCode = () => {
const [currentPage, setCurrentPage] = useState(1)
const onPageChange = (page: number) => setCurrentPage(page)
return (
<div>
<div>
<Pagination
layout='navigation'
currentPage={currentPage}
totalPages={100}
onPageChange={onPageChange}
showIcons
/>
</div>
</div>
)
}
export default PrevNextIconCode
Table Data Navigation
Component Code
Copy Code
import { Pagination } from 'flowbite-react'
import { useState } from 'react'
const TableDataCode = () => {
const [tablePage, setTablePage] = useState(1)
const totalItems = 1000
const itemsPerPage = 10
const onTableChange = (page: number) => setTablePage(page)
return (
<div>
<Pagination
layout='table'
currentPage={tablePage}
onPageChange={onTableChange}
showIcons
itemsPerPage={itemsPerPage}
totalItems={totalItems}
/>
</div>
)
}
export default TableDataCode
Pagination Control Button Text
Component Code
Copy Code
import { useState } from 'react'
import { Pagination } from 'flowbite-react'
const ControlTextCode = () => {
const [controltextPage, setControltextPage] = useState(1)
const onControtextChange = (page: number) => setControltextPage(page)
return (
<div>
<div className='overflow-x-auto'>
<Pagination
layout='pagination'
currentPage={controltextPage}
totalPages={1000}
onPageChange={onControtextChange}
previousLabel='Go back'
nextLabel='Go forward'
showIcons
/>
</div>
</div>
)
}
export default ControlTextCode
API ( Pagination )
| Prop | Description | Type | Default |
|---|---|---|---|
currentPage | The current active page. | number | 1 |
totalPages | The total number of pages. | number | 1 |
showIcons | If `true`, next and previous buttons will be shown with icons. | boolean | false |
layout | The layout style of the pagination. | 'pagination' | 'navigation' | 'table' | 'pagination' |
previousLabel | Label for the previous button. | 'Previous' | 'Go back' | '<' | '‹' | 'Previous' |
nextLabel | Label for the next button. | 'Next' | 'Go forward' | '>' | '›' | 'Next' |