Pagination
A pagination component for navigating through paginated data with page numbers and controls
Installation
Terminal
Import
Component.tsx
Basic
Pagination is a **compound component** for navigating through paginated data.
### Core Components
- **Pagination**: Root container, manages state and configuration
- **Pagination.Spinner**: Displays current page info (e.g., "1-10 of 100")
- **Pagination.Navigation**: Page number buttons and prev/next controls
- **Pagination.ItemsPerPage**: Dropdown to change items per page
### Required Props
- `currentPage`: Current active page number
- `totalItems`: Total number of items to paginate
- `itemsPerPage`: Number of items displayed per page
- `onPageChange`: Callback when page changes
1/ 10
Use arrow keys to navigate between options
Real World Example
A complete example showing Pagination integrated with a data table.
### Key Features Demonstrated
- Displaying paginated list items
- Dynamic content updates when page changes
- Custom `pageSizeOptions` for items per page selector
### Usage Pattern
```tsx
const startIndex = (currentPage - 1) * itemsPerPage
const endIndex = Math.min(startIndex + itemsPerPage, totalItems)
const currentItems = data.slice(startIndex, endIndex)
```
1/ 54
Use arrow keys to navigate between options
Responsive Example
Demonstrates how to adapt Pagination for different screen sizes.
### Desktop vs Mobile
- **Desktop**: Show all features (spinner, navigation, items per page)
- **Mobile**: Use `maxPageButtons` to limit visible page numbers
### Configuration Options
- `maxPageButtons`: Limits the number of page buttons shown (default: 7)
- `showPageSizeSelector`: Toggle items-per-page dropdown visibility
### Tips
- Omit `Pagination.ItemsPerPage` on mobile for a cleaner UI
- Use smaller `maxPageButtons` values (3-5) on narrow screens
1/ 50
Use arrow keys to navigate between options
Loading State
Shows how to handle loading states during page transitions.
### Loading Behavior
- Pass `loading={true}` to disable controls during data fetching
- The spinner component shows a loading indicator
- Prevents users from clicking multiple times during API calls
### Implementation Pattern
```tsx
const handlePageChange = (page: number) => {
setIsLoading(true)
setCurrentPage(page)
fetchData(page).finally(() => setIsLoading(false))
}
```
### Best Practices
- Reset to page 1 when `itemsPerPage` changes
- Show skeleton loaders in the content area during loading
1/ 13
Use arrow keys to navigate between options
API reference
| PaginationItemsPerPageProps | Type | Default |
|---|---|---|
disabled | boolean |undefined | - |
currentPage | number | - |
itemsPerPage | number |undefined | - |
labels | Partial<PaginationLabels> |undefined | - |
loading | boolean |undefined | - |
maxPageButtons | number |undefined | - |
onItemsPerPageChange | ((itemsPerPage: number) => void) |undefined | - |
onPageChange | ((page: number) => void) |undefined | - |
pageSizeOptions | number[] |undefined | - |
showPageSizeSelector | boolean |undefined | - |
totalItems | number | - |