Generic Paging

A container for managing the actively viewed page of any items. By default, it displays controls for navigating to the first, previous, next, and last pages, as well as to pages close to the current one.

Provided Aliases: $paging

Example

const labels = {
  first: '«',
  last: '»',
  prev: '‹',
  next: '›'
};

<gb-generic-paging labels="{labels}"></gb-generic-paging>

Properties

All of these are optional.

Property	Type	Default	Notes
`showLabels`	boolean	`true`	Set to `false` to hide the labels.
`numericLabels`	boolean	`false`	Set to `true` to use numeric values for page numbers instead of labels.
`labels.first`	string	`'First'`	The label for the control that returns user to the first page of items.
`labels.last`	string	`'Last'`	The label for the control that brings the user to the last page of items.
`labels.prev`	string	`'Prev'`	The label for the control that returns user to the previous page of items.
`labels.next`	string	`'Next'`	The label for the control that brings the user to the next page of items.
`pageSize`	number	`20`	The number of items per page.
`current`	number	`1`	The number of the current page.
`itemCount`	number	`0`	The total number of items.
`limit`	number	`5`	The maximum number of pages to show at once.
`firstPage()`	function		The callback to invoke when the control that brings the user to the first page of items is clicked.
`lastPage()`	function		The callback to invoke when the control that brings the user to the last page of items is clicked.
`prevPage()`	function		The callback to invoke when the control that brings the user to the previous page of items is clicked.
`nextPage()`	function		The callback to invoke when the control that brings the user to the next page of items is clicked.
`switchPage(page)`	function		The callback to invoke when the control that brings the user to the specified `page` of items is clicked.

State

Property	Type	Default	Notes
`highOverflow`	boolean	`false`	Determines whether ellipsis should be shown on the right side of `<gb-pages>` to indicate hidden page numbers above the current range.
`lowOverflow`	boolean	`false`	Determines whether ellipsis should be shown on the left side of `<gb-pages>` to indicate hidden page numbers below the current range.
`backDisabled`	boolean	`true`	Indicates whether or not paging backward is possible. When `true`, previous and first paging options will be disabled.
`forwardDisabled`	boolean	`false`	Indicates whether or not paging forward is possible. When `true`, next and last paging options will be disabled.
`range`	number[]	`[]`	An array of all page numbers that should be displayed by `<gb-pages>`.
`firstPage()`	function		Calls `props.firstPage()`.
`lastPage()`	function		Calls `props.lastPage()`.
`prevPage()`	function		Calls `props.prevPage()`.
`nextPage()`	function		Calls `props.nextPage()`.
`switchPage(page)`	function		Calls `props.switchPage(page)`.

Events

This component does not listen for any events.

Child Components: Terminal Pager

A container with links for switching to first and last pages.

This component does not have any properties.
This component does not have any properties in state.

Example

<gb-terminal-pager></gb-terminal-pager>

Child Components: Pager

A container with links for switching to previous and next pages.

This component does not have any properties.
This component does not have any properties in state.

Example

<gb-pager></gb-pager>

Child Components: Pages

A container with links for switching to numbered pagers.

This component does not have any properties.
This component does not have any properties in state.

Example

<gb-pages></gb-pages>