Pagination and load-more controls for navigating through data sets. Pagers support alignment variants, page input, first/last buttons, and custom info text. Load More provides an infinite-scroll style alternative.
Pager
Centered Pager (Default)
Default pager with previous/next buttons, page input, and page count. Center-aligned by default.
Alignment Variants
Pagers can be aligned to start, center (default), or end. All use logical directions for RTL support.
Start-Aligned with First/Last Buttons
End-Aligned with Info Text
Pager with Table
A practical example showing a pager controlling a paginated data table with 15 employees, 5 per page.
| # | Name | Position | Office | Salary |
|---|---|---|---|---|
| 1 | Tiger Nixon | System Architect | Edinburgh | $320,800 |
| 2 | Garrett Winters | Accountant | Tokyo | $170,750 |
| 3 | Ashton Cox | Junior Technical Author | San Francisco | $86,000 |
| 4 | Cedric Kelly | Senior Javascript Developer | Edinburgh | $433,060 |
| 5 | Airi Satou | Accountant | Tokyo | $162,700 |
Minimal Pager (No Page Input)
Pager without the page input field — just navigation buttons and optional info text.
Buttons Only
With Info Text
Pager with Item Count
infoPlacement="start" puts the info text before the controls.
Custom Controls (Snippet)
Use the controls snippet to fully customize the pager buttons. Use the info snippet to customize the info section.
Load More
Load More Alignment
Load More buttons support start, center (default), and end alignment.
Start
Center (Default)
End
Load More States
Load More supports a loading spinner state, count display, and custom text.
With Count
Loading State
Custom Text
Load More with Table
Interactive example: click "Load more" to reveal additional rows. Shows 3 of 9 products.
| Product | Price | Stock | Status |
|---|---|---|---|
| MacBook Pro | $2,399 | 12 | Available |
| iPhone 15 | $999 | 0 | Out of Stock |
| iPad Air | $599 | 8 | Available |
Props Reference
Pager Props
| Prop | Type | Default | Description |
|---|---|---|---|
currentPage | number | 1 | Current page number (bindable) |
totalPages | number | 1 | Total number of pages |
justify | 'start' | 'center' | 'end' | 'center' | Pager alignment (RTL-aware) |
hasPageInput | boolean | true | Show the page number input |
hasInfo | boolean | true | Show the info section |
infoText | string | - | Custom info text (e.g., "Showing 1-25 of 250") |
infoPlacement | 'start' | 'end' | 'end' | Info before (start) or after (end) the controls |
isPreviousDisabled | boolean | false | Disable previous/first buttons |
isNextDisabled | boolean | false | Disable next/last buttons |
onprevious | (e: MouseEvent) => void | - | Previous button click handler |
onnext | (e: MouseEvent) => void | - | Next button click handler |
onfirst | (e: MouseEvent) => void | - | First button click handler (shows button when provided) |
onlast | (e: MouseEvent) => void | - | Last button click handler (shows button when provided) |
onpagechange | (page: number) => void | - | Fires when page changes via input |
controls | Snippet | - | Custom controls snippet (replaces default buttons) |
info | Snippet | - | Custom info snippet (replaces default info section) |
LoadMore Props
| Prop | Type | Default | Description |
|---|---|---|---|
justify | 'start' | 'center' | 'end' | 'center' | Button alignment (RTL-aware) |
isLoading | boolean | false | Show loading spinner |
countText | string | - | Count text (e.g., "25 of 250") |
onclick | (e: MouseEvent) => void | - | Button click handler |
children | Snippet | - | Button label, rendered inside pa-load-more__text (default: i18n "Load more") |