# Pagination (fw-pagination)
fw-pagination displays pagination. The component displays starting and ending record numbers against total number of records.
# Demo
Show Code
# Usage
# Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
buttonGroupLabel | button-group-label | Aria Label to be used for the button group. | string | '' |
isLoading | is-loading | Indicates if the records in current page are being fetched. | boolean | false |
nextButtonLabel | next-button-label | Aria Label to be used for next button. | string | '' |
page | page | The current page number. | number | 1 |
perPage | per-page | The number of records to be shown per page. Defaults to 10. | number | 10 |
previousButtonLabel | previous-button-label | Aria Label to be used for previous button. | string | '' |
total | total | The total number of records. This is a mandatory parameter. | number | undefined |
# Events
| Event | Description | Type |
|---|---|---|
fwChange | Triggered when either previous or next button is clicked. | CustomEvent<any> |
# Methods
# nextPage() => Promise<void>
Navigates to next set of records if available.
# Returns
Type: Promise<void>
# previousPage() => Promise<void>
Navigates to previous set of records if available.
# Returns
Type: Promise<void>
# Dependencies
# Depends on
# Graph
graph TD;
fw-pagination --> fw-button-group
fw-pagination --> fw-button
fw-pagination --> fw-icon
fw-button --> fw-spinner
fw-button --> fw-icon
style fw-pagination fill:#f9f,stroke:#333,stroke-width:4px
Built with ❤ at Freshworks