PaginationFooter

Pagination controls placed at the bottom.

Overview

PaginationFooter is a composable block that provides pagination controls for data tables. It includes first/previous/next/last buttons, page number display, page size selector, and item count information. Perfect for enterprise data management interfaces.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Install

1

Code Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Props

• currentPage - Current page number (1-based, required)
• totalPages - Total number of pages (required)
• totalItems - Total number of items (optional)
• pageSize - Items per page (required)
• pageSizeOptions - Available page sizes (default: [10, 20, 50, 100])
• onPageChange - Page change handler (required)
• onPageSizeChange - Page size change handler (optional)
• showPageSizeSelector - Show page size selector (default: true)
• showItemCount - Show item count info (default: true)
• className - Additional className (optional)

Features

• First/Previous/Next/Last navigation buttons
• Page number display
• Page size selector
• Item count information
• Disabled states for boundary pages
• Responsive layout
• Fully accessible with ARIA labels

Related Blocks

• DataTableToolbar - Use together for complete table controls
• UsersListTemplate - Complete template using PaginationFooter
• DataTable - Table component to use with pagination

Accessibility

PaginationFooter uses semantic HTML and proper ARIA labels for all navigation buttons. All controls are keyboard accessible and support focus states.