GeoTablePagination Ready 10.1.0+
GeoTablePagination is a component designed to fit nicely in a
GeoTable footer.
It displays controls for paginated content, including shortcuts to display first and last page of content, as well as a currently visible range.
Properties
| Prop name | Type | Default value | Description |
|---|---|---|---|
pageSize
| number | Show description | |
currentPage
| number | Show description | |
sourceDataLength
| number | Show description |
Events
| Name | Type | Description |
|---|---|---|
go-to-page |
Number
| User wants to change current page to given one. |
Slots
| Name | Description |
|---|---|
firstPageShortcut | Use this slot to customize the shortcut to display first page of data |
prevPageShortcut | Use this slot to customize the button to display previous page of data |
default | Use this slot to customize how currently displayed range is shown |
nextPageShortcut | Use this slot to customize the button to display next page of data |
lastPageShortcut | Use this slot to customize the shortcut to display last page of data |
Constants
| Name | Value |
|---|---|
GeoTablePaginationMixin | Show definition |
Examples
Default pagination
Customizing actions
There are 4 slots which allow customizing the actions displayed in the pagination:
firstPageShortcutprevPageShortcutnextPageShortcutlastPageShortcut
All of them are scoped slots, taking as scoped parameters:
action- function to be called in order to emit proper change page event. Note that each slot has a different function bound to this property.isNotFirstPage-booleanvalue telling whether currently displayed page is the first one (false) or not (true). Useful to show or hide first page shortcut accordingly.hasPreviousPage-booleanvalue telling whether there is a previous page that could be displayed (true) or not (false). Useful to show or hide previouspage shortcut accordingly.hasNextPage-booleanvalue telling whether there is a next page that could be displayed (true) or not (false). Useful to show or hide next page shortcut accordingly.isNotLastPage-booleanvalue telling whether currently displayed page is the last one (false) or not (true). Useful to show or hide last page shortcut accordingly.
Customizing displayed range
Just like pagination actions can be customized, the text displaying currently
visible range is customizable, too. To do so, use the default slot of
GeoTablePagination. It's a scoped slot which takes as scoped parameters:
isNotFirstPage-booleanvalue telling whether currently displayed page is the first one (false) or not (true). Useful to show or hide first page shortcut accordingly.hasPreviousPage-booleanvalue telling whether there is a previous page that could be displayed (true) or not (false). Useful to show or hide previous page shortcut accordingly.hasNextPage-booleanvalue telling whether there is a next page that could be displayed (true) or not (false). Useful to show or hide next page shortcut accordingly.isNotLastPage-booleanvalue telling whether currently displayed page is the last one (false) or not (true). Useful to show or hide last page shortcut accordingly.currentPage-number. Page currently being displayed.pageSize-number. Amount of items displayed in a single page at most.sourceDataLength-number. Total amount of items handled by parent table.rangeStart-number. Index of the first item being displayed.rangeEnd-number. Index of the last item being displayed.
Advanced customization
If you need additional customization not covered by any of the slots you can
build your own paginator based on GeoTablePaginationMixin, a mixin providing
the props, computed properties and methods used in GeoTablePagination
component.