Pagination

<bk-pagination></bk-pagination>

The Pagination displays pagination navigation tools to query pages of a dataset. It allows moving backward and forward between pages, skipping to the first and last pages, and adjusting the current pagination size. Additionally, it displays a counter showing the current page and the total number of pages. It shows the current page and total elements in a given dataset while interacting with dynamic filters.

The Pagination communicates with other components by providing pagination parameters for data retrieval. It achieves this by injecting keys pageNumber and pageSize into the payload of a change-query event, which is emitted upon interacting with the component. Components such as the CRUD Client can listen to this event and use the provided pagination parameters to fetch new data accordingly.

Furthermore, the Pagination component listens to count-data events, which relay information about the size of the currently viewed dataset, to update its state.

In cases where the signaled data count is negative, the Pagination adjusts its view. In this scenario, only tasks such as navigating between pages and modifying the pagination size can be performed. Additionally, no information is provided about the currently viewed page or the total number of pages.

In case the request to visualize or navigate nested data is received, the Pagination notifies other components on what slice of data should be visualized according to its state.

How to configure

For its most basic usage, the Pagination does not require any particular configuration.

{
  "tag": "bk-pagination"
}

Properties pageSize and pageSizeOptions are available to configure the default value and the selectable options for pagination size.

Property showPagesCount controls whether or not to display the current page and the total number of pages. If set to false, the next button goes to the next pages even if there are no data anymore. The component will be displayed like in the following image:

Locale

The texts of the Pagination can be customized through the property customLocale, which accepts an object shaped like the following:

type Locale = {
  prev_page: LocalizedText
  next_page: LocalizedText
  lastPage: LocalizedText
  firstPage: LocalizedText
  itemsPerPage: LocalizedText
}

where LocalizedText is either a string or an object mapping language acronyms to strings.

API

Properties & Attributes

property	attribute	type	default	description
pageSize	page-size	number	25	number of data items per page
pageSizeOptions	-	number[]	[10, 25, 50, 100]	available page sizes
showPagesCount	-	boolean	true	whether or not to display the current page and the total number of pages

Listens to

event	action
loading-data	sets internal loading state
count-data	notifies the size of the currently viewed dataset
nested-navigation-state/push	updates internal representation of the current nesting path by adding one step. Emits nested-navigation-state/display with slice of data to display
nested-navigation-state/back	updates internal representation of the current nesting path by removing the specified number of steps. Emits nested-navigation-state/display with slice of data to display

Emits

event	description
change-query	requires data filtered according with the current pagination
nested-navigation-state/display	in case of nested data, notifies the slice of data to display