Pagination
NB! The component will be deprecated soon.
Please check out our new Pagination component.
Default
…
…
State
@current_page_number = 6
Size
…
…
…
…
…
…
…
…
State
Use size prop. Default size is xsmall.
Example with a side section
Showing 26 – 30 of 48
…
…
State
@page_number = 6
@per_page = 5
@total_entries = 48
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| total_pages | number | true | - | The total number of pages. |
| range_before | number | No | 1 | Beginning of displayed range |
| range_after | number | No | 1 | End of displayed range |
| previous_button_label | string | No | Previous | Label for "previous" button |
| next_button_label | string | No | Next | Label for "next" button |
| on_change | event | No | - | The method to call when a page is clicked. Exposes the current page object as an argument. |
| current_page_number | number | true | - | Current selected page |
| page_size_section | - | - | - | TODO - Placeholder for "page size" component |
| page_size_section | - | - | - | TODO - Placeholder for "page size" component |
| go_to_page_section | - | - | - | TODO - Placeholder for "go to page" component |