Pagination Bar

The Pagination Bar component provides controls for navigating through paginated data with configurable page sizes and responsive layout.

Basic usage

The Pagination Bar displays page navigation controls and item count information.

Component anatomy

Page Size Control

Configure page size options using:

• pageSize Input: Default number of items per page (default: 15)
• allowedPageSizes Input: Available page size options ([10, 15, 20, 30, 50, 100])
• allowPageSizeChange Input: Enable/disable page size selection
• Dropdown menu for size selection

Navigation Controls

Page navigation features include:

• Previous/Next buttons
• Current page indicator
• Total pages display
• Direct page input
• RTL support
• Disabled states

Items Range Display

Control items information display:

• showVisibleItemsRange Input: Show/hide current range
• itemsCount Input: Total number of items
• Automatic range calculation
• Responsive layout

Interactive Features

User interaction options:

• Direct page number input
• Page size selection
• Previous/Next navigation
• Keyboard support
• Form control integration

Negative Theme

Enable dark theme using the negative Input, affecting:

• Background color
• Text color
• Divider color
• Button states
• Input fields

Accessibility

Keyboard Navigation

Comprehensive keyboard support:

• Arrow keys for navigation
• Enter/Space for actions
• Number input for direct page access
• Focus management
• Menu keyboard controls

ARIA Implementation

Complete ARIA integration:

• Navigation role
• Button labels
• Live regions
• State descriptions
• Range announcements

Screen Reader Support

Enhanced screen reader experience:

• Page context announcements
• Range information
• Navigation state changes
• Error notifications
• Selection confirmations

Best Practices for Developers

1. Range Configuration DEMO HERE

2. Navigation Implementation DEMO HERE

3. State Management DEMO HERE